@osimart/create-storefront 0.0.0-stage → 1.0.0

package/app/logic/components/SiteFooter.js

@@ -0,0 +1,476 @@
+import { SECTION_WIDTHS } from "../../composables/useSectionShell";
+
+export default function useLogic({ props }) {
+  const isBar = computed(() => props.part === "bar");
+  // Utilities blocks' keys (FooterUtilitiesSection), to tag the parts.
+  const utilityBlocks = inject("osiUtilityBlocks", computed(() => ({})));
+
+  const settings = useThemeGroup("FOOTER");
+  const brand = useThemeGroup("BRAND");
+  /* ------------------------------------------------------------ appearance
+   * Like the header: a colour scheme with background / text / link overrides
+   * (empty = the scheme's). The bar under the footer (Utilities) follows the
+   * footer's scheme and overrides unless it has a scheme of its own.
+   */
+  const pick = (key) => {
+    const own = props.own?.[key];
+    return own !== undefined && own !== null && own !== "" ? own : settings.value[key];
+  };
+  const barScheme = computed(() => (isBar.value ? pick("FOOTER_BOTTOM_COLOR_SCHEME") : null));
+  const scheme = useColorScheme(
+    // Nothing picked: the theme's Default scheme (useColorScheme's fallback),
+    // never a hardcoded SCHEME_1 — so changing it in Theme settings repaints
+    // the footer and the bar, with or without a Footer section.
+    computed(() => barScheme.value || pick("FOOTER_COLOR_SCHEME") || null)
+  );
+  const appearance = computed(() => {
+    // A bar with its own scheme starts from that scheme, not the footer's colours.
+    const inherit = !barScheme.value;
+    const background = isBar.value
+      ? pick("FOOTER_BOTTOM_BACKGROUND") || (inherit ? pick("FOOTER_BACKGROUND") : null)
+      : pick("FOOTER_BACKGROUND");
+    const text = !isBar.value || inherit ? pick("FOOTER_TEXT_COLOR") : null;
+    const link = !isBar.value || inherit ? pick("FOOTER_LINK_COLOR") : null;
+    const hover = !isBar.value || inherit ? pick("FOOTER_LINK_HOVER_COLOR") : null;
+    return Object.fromEntries(Object.entries({
+      "--osi-bg": background || undefined,
+      "--osi-text": text || undefined,
+      "--osi-footer-link": link || undefined,
+      "--osi-footer-link-hover": hover || undefined,
+    }).filter(([, v]) => v !== undefined));
+  });
+
+  const { store, storeLogo } = useStorefront();
+  const { mediaUrl } = useMediaUrl();
+  const { useMenuByHandle } = useMenu();
+  const t = useT();
+
+  // Three fixed slots rather than a repeater: theme settings has no repeatable
+  // field type, and footer columns are menus the merchant already maintains.
+  // Empty handles resolve to empty menus and are filtered out below.
+  const menu1 = useMenuByHandle(computed(() => settings.value.FOOTER_MENU_1));
+  const menu2 = useMenuByHandle(computed(() => settings.value.FOOTER_MENU_2));
+  const menu3 = useMenuByHandle(computed(() => settings.value.FOOTER_MENU_3));
+
+  // Custom widths only take effect when FOOTER_COLUMN_WIDTH_MODE is CUSTOM;
+  // otherwise every column shares the row equally, exactly as before.
+  const columnWidthMode = computed(() => settings.value.FOOTER_COLUMN_WIDTH_MODE || "EQUAL");
+  function columnFlexBasis(widthSetting) {
+    if (columnWidthMode.value !== "CUSTOM") return null;
+    return `${widthSetting || 33}%`;
+  }
+
+  const columns = computed(() =>
+    [
+      {
+        menu: menu1.value,
+        title: t(settings.value.FOOTER_MENU_1_TITLE),
+        flexBasis: columnFlexBasis(settings.value.FOOTER_MENU_1_WIDTH),
+      },
+      {
+        menu: menu2.value,
+        title: t(settings.value.FOOTER_MENU_2_TITLE),
+        flexBasis: columnFlexBasis(settings.value.FOOTER_MENU_2_WIDTH),
+      },
+      {
+        menu: menu3.value,
+        title: t(settings.value.FOOTER_MENU_3_TITLE),
+        flexBasis: columnFlexBasis(settings.value.FOOTER_MENU_3_WIDTH),
+      },
+    ]
+      .filter((column) => column.menu.items.length)
+      .map((column) => ({ ...column, title: column.title || column.menu.title }))
+  );
+
+  // FOOTER_LOGO overrides BRAND.LOGO for this section only; empty falls through
+  // to the brand logo and then the store's default logo, same chain the old
+  // markup used before the override field existed.
+  const logoSrc = computed(() =>
+    mediaUrl(settings.value.FOOTER_LOGO || brand.value.LOGO || storeLogo.value)
+  );
+  const logoPosition = computed(() => settings.value.FOOTER_LOGO_POSITION || "TOP_CENTER");
+  const logoAlignment = computed(() => {
+    const map = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+    return map[settings.value.FOOTER_LOGO_ALIGNMENT] ?? "center";
+  });
+
+  // Mobile width falls back to the desktop width so old configs (which only
+  // ever set FOOTER_LOGO_WIDTH) render identically on every breakpoint.
+  const logoWidthVars = computed(() => {
+    const desktop = settings.value.FOOTER_LOGO_WIDTH || 64;
+    const mobile = settings.value.FOOTER_LOGO_WIDTH_MOBILE || desktop;
+    return {
+      "--osi-footer-logo-w": `${desktop}px`,
+      "--osi-footer-logo-w-mobile": `${mobile}px`,
+    };
+  });
+
+  const showBrandDescription = computed(
+    () => settings.value.FOOTER_SHOW_BRAND_DESCRIPTION === true && !!t(settings.value.FOOTER_BRAND_DESCRIPTION)
+  );
+  // Independent from FOOTER_LOGO_ALIGNMENT: that one only exists for TOP_CENTER
+  // (it justifies the logo row), while the description renders in all three
+  // logo positions and needs its own alignment regardless of where the logo sits.
+  const DESCRIPTION_ALIGNMENTS = { LEFT: "left", CENTER: "center", RIGHT: "right" };
+  const brandDescriptionStyle = computed(() => ({
+    maxWidth: `${settings.value.FOOTER_BRAND_DESCRIPTION_WIDTH || 32}ch`,
+    textAlign: DESCRIPTION_ALIGNMENTS[settings.value.FOOTER_BRAND_DESCRIPTION_ALIGNMENT] || "left",
+    // Centers the box itself (not just the text inside it) so a short
+    // description doesn't stay pinned to the left edge of its column.
+    marginInline: settings.value.FOOTER_BRAND_DESCRIPTION_ALIGNMENT === "CENTER" ? "auto" : undefined,
+  }));
+
+  const footerText = computed(() => t(settings.value.FOOTER_TEXT));
+  const copyright = computed(
+    () =>
+      t(settings.value.FOOTER_COPYRIGHT) ||
+      `© ${new Date().getFullYear()} ${store.value?.name ?? ""}`
+  );
+
+  // Guarded rather than assumed: StoreSerializer was trimmed to identity/theme
+  // fields, so these may not be on the bootstrap payload. If they aren't,
+  // the relevant block renders nothing instead of throwing.
+  // Socials live in useFooterSocials + FooterSocials.vue. SiteFooter only needs
+  // the count and the placement, because those decide whether a column or a
+  // bottom-bar zone renders at all.
+  const {
+    socials,
+    enabled: socialsEnabled,
+    position: socialPosition,
+  } = useFooterSocials();
+
+  const paymentIcons = computed(() => store.value?.payment_icons ?? []);
+  const languages = computed(() => store.value?.languages ?? []);
+  const countries = computed(() => store.value?.countries ?? []);
+  const currentLanguage = computed(() => store.value?.language ?? languages.value[0]);
+  const currentCountry = computed(() => store.value?.country ?? countries.value[0]);
+
+  // All "show X" booleans below default to true in the schema, so only an
+  // explicit `false` should hide them — undefined (an unsaved setting) must
+  // still fall through to the schema default, not be treated as "off".
+  const showSocial = socialsEnabled;
+  const socialAlignment = computed(() => {
+    const map = { LEFT: "flex-start", CENTER: "center", RIGHT: "flex-end" };
+    return map[settings.value.FOOTER_SOCIAL_ALIGNMENT] ?? "flex-start";
+  });
+
+  const showNewsletter = computed(() => settings.value.FOOTER_SHOW_NEWSLETTER !== false);
+  const newsletterOnStart = computed(() => (settings.value.FOOTER_NEWSLETTER_POSITION || "START") === "START");
+  const newsletterStacked = computed(() => settings.value.FOOTER_NEWSLETTER_LAYOUT === "STACKED");
+  const newsletterAlignment = computed(() => (settings.value.FOOTER_NEWSLETTER_ALIGNMENT || "LEFT").toLowerCase());
+  const showConsent = computed(() => settings.value.FOOTER_NEWSLETTER_SHOW_CONSENT !== false);
+
+  // Local-only "did it submit" state — the schema's success message is just
+  // copy; wiring the form to a real subscribe endpoint is unrelated to this
+  // settings pass, so submitting just reveals the message as an acknowledgement.
+  const newsletterSubmitted = ref(false);
+  function handleNewsletterSubmit() {
+    newsletterSubmitted.value = true;
+  }
+  const newsletterSuccessMessage = computed(
+    () => t(settings.value.FOOTER_NEWSLETTER_SUCCESS_MESSAGE) || "Thanks for subscribing!"
+  );
+
+  const showPaymentIcons = computed(() => settings.value.FOOTER_SHOW_PAYMENT_ICONS !== false);
+  const showLanguageSelector = computed(() => settings.value.FOOTER_SHOW_LANGUAGE_SELECTOR !== false);
+  const showCountrySelector = computed(() => settings.value.FOOTER_SHOW_COUNTRY_SELECTOR !== false);
+
+  // --------------------------------------------------------------- containers
+
+  /**
+   * Inner: max-width and centring only.
+   *
+   * The side gutter belongs on the footer root, not here. useSectionShell puts
+   * paddingInline on the shell and maxWidth on the inner; the footer had both on
+   * the inner, which makes its usable width maxWidth minus twice the gutter while
+   * a section directly above it gets the full maxWidth. That 32px is the
+   * misalignment between the two.
+   *
+   * SECTION_WIDTHS comes from useSectionShell rather than a local copy — the
+   * footer's own map had NARROW at calc(page-width - 320px) against the sections'
+   * flat 720px, so the same enum value produced two different widths.
+   */
+  const containerStyle = computed(() => ({
+    maxWidth: SECTION_WIDTHS[settings.value.FOOTER_CONTAINER] ?? SECTION_WIDTHS.NORMAL,
+    marginInline: "auto",
+  }));
+
+  const footerStyle = computed(() => ({
+    ...scheme.value.style,
+    ...appearance.value,
+    // Side gutter on the root, matching useSectionShell's shellStyle.
+    paddingInlineStart: `${settings.value.FOOTER_CONTAINER_PADDING_X ?? 16}px`,
+    paddingInlineEnd: `${settings.value.FOOTER_CONTAINER_PADDING_X ?? 16}px`,
+    "--osi-footer-pt": `${settings.value.FOOTER_PADDING_TOP ?? 64}px`,
+    "--osi-footer-pb": `${settings.value.FOOTER_PADDING_BOTTOM ?? 32}px`,
+    // The bottom bar needs vertical padding independent of FOOTER_PADDING_BOTTOM:
+    // that one is the gap below the whole footer, and base.json sets it to 0
+    // while still wanting the copyright row to breathe.
+    "--osi-footer-bar-py": `${settings.value.FOOTER_BOTTOM_PADDING_Y ?? 16}px`,
+    // Drives .osi-footer-inner and .osi-footer-main, which used to hardcode
+    // gap: 2rem regardless of what a merchant set here.
+    "--osi-footer-section-gap": `${settings.value.FOOTER_SECTION_GAP ?? 32}px`,
+    "--osi-footer-col-gap": `${settings.value.FOOTER_COLUMN_GAP ?? 64}px`,
+    "--osi-footer-col-row-gap": `${settings.value.FOOTER_COLUMN_ROW_GAP ?? 16}px`,
+    "--osi-footer-link-gap": `${settings.value.FOOTER_LINK_GAP ?? 12}px`,
+    "--osi-footer-social-gap": `${settings.value.FOOTER_SOCIAL_GAP ?? 16}px`,
+    "--osi-footer-payment-icon-size": `${settings.value.FOOTER_PAYMENT_ICON_SIZE || 20}px`,
+    "--osi-footer-payment-gap": `${settings.value.FOOTER_PAYMENT_ICON_GAP ?? 8}px`,
+    ...logoWidthVars.value,
+    // The divider marks the boundary between page content and the footer's
+    // top content area. With .osi-footer-inner hidden (see hasFooterContent),
+    // that boundary doesn't exist — the border would just sit directly above
+    // the bottom bar instead, which isn't what FOOTER_SHOW_DIVIDER means.
+    borderTop: !hasFooterContent.value || settings.value.FOOTER_SHOW_DIVIDER === false
+      ? "none"
+      : pick("FOOTER_DIVIDER_COLOR")
+        ? `1px solid ${pick("FOOTER_DIVIDER_COLOR")}`
+        : undefined,
+  }));
+
+  const columnsAlignment = computed(() => {
+    const map = { START: "flex-start", CENTER: "center", END: "flex-end", SPREAD: "space-between" };
+    return map[settings.value.FOOTER_COLUMNS_ALIGNMENT] ?? "flex-end";
+  });
+  const columnsVerticalAlignment = computed(() => {
+    const map = { TOP: "flex-start", CENTER: "center", BOTTOM: "flex-end" };
+    return map[settings.value.FOOTER_COLUMNS_VERTICAL_ALIGNMENT] ?? "flex-start";
+  });
+  const columnTextAlignment = computed(() => (settings.value.FOOTER_COLUMN_TEXT_ALIGNMENT || "LEFT").toLowerCase());
+
+  const JUSTIFY = { START: "flex-start", CENTER: "center", END: "flex-end", SPREAD: "space-between" };
+  // One per line: SPREAD has nothing to spread, so it centres.
+  const ALIGN = { START: "flex-start", CENTER: "center", END: "flex-end", SPREAD: "center" };
+  const TEXT = { START: "start", CENTER: "center", END: "end", SPREAD: "center" };
+  const bottomAlignment = computed(() => JUSTIFY[settings.value.FOOTER_BOTTOM_ALIGNMENT] ?? "center");
+  const showBottomBarDivider = computed(() => settings.value.FOOTER_SHOW_BOTTOM_BAR_DIVIDER !== false);
+
+
+  /**
+   * Bottom bar arrangement.
+   *
+   *   INLINE      one flex row, distributed by FOOTER_BOTTOM_ALIGNMENT. What
+   *               every existing store renders today, unchanged.
+   *   THREE_ZONE  copyright and powered-by at the start, policy links centred,
+   *               socials at the end — the Shopify arrangement.
+   *
+   * INLINE stays the schema default so no saved theme changes appearance; the
+   * preset opts into THREE_ZONE.
+   */
+  const bottomThreeZone = computed(
+    () => String(settings.value.FOOTER_BOTTOM_LAYOUT ?? "INLINE").toUpperCase() === "THREE_ZONE"
+  );
+  // STACKED: each part on its own line, aligned by FOOTER_BOTTOM_ALIGNMENT.
+  const bottomStacked = computed(
+    () => String(settings.value.FOOTER_BOTTOM_LAYOUT ?? "").toUpperCase() === "STACKED"
+  );
+
+  const px = (v) => (v === "" || v == null || !Number.isFinite(Number(v)) ? undefined : `${Number(v)}px`);
+
+  /** The bar's own look (Utilities section) and its phone alignment. */
+  const barVars = computed(() => {
+    const s = settings.value;
+    const align = String(s.FOOTER_BOTTOM_ALIGNMENT || "CENTER").toUpperCase();
+    const mobile = String(s.FOOTER_BOTTOM_MOBILE_ALIGNMENT || "CENTER").toUpperCase();
+    return Object.fromEntries(Object.entries({
+      "--bar-gap": px(s.FOOTER_BOTTOM_GAP),
+      "--bar-fs": px(s.FOOTER_BOTTOM_TEXT_SIZE),
+      "--bar-color": s.FOOTER_BOTTOM_TEXT_COLOR || undefined,
+      // A chosen colour is shown as chosen, not faded.
+      "--bar-opacity": s.FOOTER_BOTTOM_TEXT_COLOR ? "1" : undefined,
+      "--bar-align": ALIGN[align],
+      "--bar-text": TEXT[align],
+      "--bar-m-justify": JUSTIFY[mobile],
+      "--bar-m-align": ALIGN[mobile],
+      "--bar-m-text": TEXT[mobile],
+    }).filter(([, v]) => v !== undefined));
+  });
+
+  /** Policy links block: its own spacing, separator, underline, size, colour. */
+  const policyClasses = computed(() => {
+    const s = settings.value;
+    return [
+      `pol-sep-${String(s.FOOTER_POLICY_SEPARATOR || "NONE").toLowerCase()}`,
+      `pol-underline-${String(s.FOOTER_POLICY_UNDERLINE || "HOVER").toLowerCase()}`,
+      { "pol-stack-mobile": s.FOOTER_POLICY_MOBILE_INLINE === false },
+    ];
+  });
+  const policyStyle = computed(() => {
+    const s = settings.value;
+    return Object.fromEntries(Object.entries({
+      "--pol-gap": px(s.FOOTER_POLICY_GAP),
+      "--pol-fs": px(s.FOOTER_POLICY_TEXT_SIZE),
+      "--pol-color": s.FOOTER_POLICY_COLOR || undefined,
+      order: isBar.value ? utilityBlocks.value.order?.policies : undefined,
+    }).filter(([, v]) => v !== undefined && v !== -1));
+  });
+  const copyrightStyle = computed(() => {
+    const s = settings.value;
+    return Object.fromEntries(Object.entries({
+      fontSize: px(s.FOOTER_COPYRIGHT_TEXT_SIZE),
+      color: s.FOOTER_COPYRIGHT_COLOR || undefined,
+    }).filter(([, v]) => v !== undefined));
+  });
+  /** Utilities: parts in block order. */
+  const orderStyle = (part) => {
+    const n = isBar.value ? utilityBlocks.value.order?.[part] : undefined;
+    return n === undefined || n < 0 ? undefined : { order: n };
+  };
+
+  /**
+   * The bottom bar is a sibling of .osi-footer-inner, not a child, so it doesn't
+   * inherit the container. It takes the same containerStyle so its content —
+   * and its top border — line up with the columns above rather than running the
+   * full width of the footer.
+   *
+   * Kept a sibling rather than moved inside .osi-footer-inner because that
+   * element owns FOOTER_PADDING_BOTTOM; putting the bar in it would place the
+   * footer's bottom padding above the copyright row instead of below it.
+   *
+   * justifyContent only applies to INLINE — the three-zone grid places its own
+   * children, so handing it a flex property would do nothing at best.
+   */
+  const barStyle = computed(() => ({
+    ...containerStyle.value,
+    ...barVars.value,
+    ...(bottomThreeZone.value || bottomStacked.value ? {} : { justifyContent: bottomAlignment.value }),
+  }));
+
+  const showPoweredBy = computed(() => settings.value.FOOTER_SHOW_POWERED_BY !== false);
+  const poweredByText = computed(() => t(settings.value.FOOTER_POWERED_BY_TEXT));
+  // Plain text between the copyright and the link — not part of the link.
+  const poweredByPrefix = computed(() => {
+    const v = settings.value.FOOTER_POWERED_BY_PREFIX;
+    return v === undefined || v === null ? ", " : String(v);
+  });
+  // Copyright block: space between the copyright and "powered by" (default 0).
+  const copyrightGap = computed(() => {
+    const n = Number(settings.value.FOOTER_COPYRIGHT_GAP);
+    return { columnGap: `${Number.isFinite(n) ? n : 0}px` };
+  });
+  const poweredByUrl = computed(() => settings.value.FOOTER_POWERED_BY_URL || "");
+
+  /**
+   * Policy links as four fixed label/URL pairs, not a menu.
+   *
+   * The footer columns above are menus because a merchant curates those and their
+   * length varies. Policy links are a short fixed set that every store has, and
+   * requiring a merchant to build a menu before their terms link appears is a
+   * setup step with no upside. Same reasoning as the three fixed column slots:
+   * theme settings has no repeatable field type.
+   *
+   * A slot with a label but no URL is dropped rather than rendered as dead text.
+   */
+  const POLICY_SLOTS = [1, 2, 3, 4];
+
+  const policyLinks = computed(() => {
+    // Utilities: the Policy links block is the switch.
+    if (!isBar.value && settings.value.FOOTER_SHOW_POLICY_LINKS === false) return [];
+    return POLICY_SLOTS.map((n) => ({
+      key: `policy-${n}`,
+      label: t(settings.value[`FOOTER_POLICY_${n}_LABEL`]),
+      url: settings.value[`FOOTER_POLICY_${n}_URL`] || "",
+    })).filter((link) => link.label && link.url);
+  });
+
+  /**
+   * Placement is FOOTER_SOCIAL_POSITION's decision, always.
+   *
+   * Nothing double-renders because the four positions are mutually exclusive —
+   * that's what makes an enum the right shape for this. An earlier version had
+   * THREE_ZONE seize the socials to avoid a double render, which prevented the
+   * duplicate but also silently discarded the merchant's OWN_COLUMN choice: two
+   * settings fighting over one decision, with the winner invisible in the panel.
+   *
+   * So in the three-zone bar the end zone carries the socials only when the
+   * merchant put them there. Otherwise it carries the payment icons alone, and
+   * the socials render wherever they were assigned.
+   */
+  // The Utilities section's Social media links block; the old fixed footer's
+  // "with the copyright" position.
+  const socialsInBar = computed(() =>
+    isBar.value
+      ? !!settings.value.FOOTER_UTIL_SOCIAL
+      : props.part === "all" && showSocial.value && socialPosition.value === "WITH_COPYRIGHT"
+  );
+  const socialsInColumns = computed(
+    () =>
+      showSocial.value &&
+      (socialPosition.value === "OWN_COLUMN" || socialPosition.value === "UNDER_MENU")
+  );
+  const socialsUnderNewsletter = computed(
+    () => showSocial.value && socialPosition.value === "UNDER_NEWSLETTER"
+  );
+
+  // FOOTER_PADDING_TOP/BOTTOM exist to space real content away from the edges
+  // of .osi-footer-inner. With the newsletter turned off, no menus assigned,
+  // no logo, no footer text, and no locale selector, that padding has nothing
+  // to space out — it just renders as blank area above the bottom bar. Gate
+  // the whole block on there being something to show, same as every other
+  // piece of the footer is already individually gated.
+  const hasFooterContent = computed(() =>
+    Boolean(
+      props.tree?.children?.length ||
+      (logoSrc.value && logoPosition.value === "TOP_CENTER") ||
+        showNewsletter.value ||
+        columns.value.length ||
+        socialsInColumns.value ||
+        (logoSrc.value && logoPosition.value !== "TOP_CENTER") ||
+        footerText.value ||
+        (showLanguageSelector.value && (currentLanguage.value || currentCountry.value))
+    )
+  );
+  // ------------------------------------------------------- mobile accordion
+  //
+  // Desktop is unaffected either way: the accordion state only changes which
+  // CSS rules apply under the mobile breakpoint (see <style>), and open state
+  // is tracked per column index rather than per menu handle so a column
+  // staying open/closed doesn't depend on which menu happens to be assigned to it.
+  const mobileAccordion = computed(() => settings.value.FOOTER_MOBILE_COLUMN_LAYOUT === "ACCORDION");
+  const openColumns = ref(
+    settings.value.FOOTER_MOBILE_ACCORDION_EXPAND_FIRST === true ? { 0: true } : {}
+  );
+  function toggleColumn(index) {
+    openColumns.value = { ...openColumns.value, [index]: !openColumns.value[index] };
+  }
+  function isColumnOpen(index) {
+    return !!openColumns.value[index];
+  }
+
+  // ---------------------------------------------------------- text styling
+  //
+  // Mirrors what text_style() emits in the schema (SIZE / SIZE_MOBILE / WEIGHT /
+  // COLOR / LINE_HEIGHT / LETTER_SPACING / FONT) into CSS custom properties, so
+  // the two typography sets (heading, link) share one mapping instead of two
+  // near-identical computeds. TRANSFORM is applied as an inline style rather
+  // than a CSS var so its default can differ per prefix (headings default to
+  // uppercase, links don't) without a third variable.
+
+  const FONT_WEIGHTS = { REGULAR: 400, MEDIUM: 500, SEMIBOLD: 600, BOLD: 700 };
+  const FONT_FAMILIES = { HEADING: "var(--osi-font-heading)", BODY: "var(--osi-font-body)" };
+  const TEXT_TRANSFORMS = {
+    NONE: "none",
+    UPPERCASE: "uppercase",
+    LOWERCASE: "lowercase",
+    CAPITALIZE: "capitalize",
+  };
+
+  function textStyleVars(prefix, defaultTransform) {
+    const s = settings.value;
+    return {
+      "--osi-fs": `${s[`${prefix}_SIZE`] ?? 14}px`,
+      "--osi-fs-mobile": `${s[`${prefix}_SIZE_MOBILE`] || s[`${prefix}_SIZE`] || 14}px`,
+      "--osi-fw": FONT_WEIGHTS[s[`${prefix}_WEIGHT`]] ?? 400,
+      "--osi-lh": `${(s[`${prefix}_LINE_HEIGHT`] ?? 130) / 100}`,
+      "--osi-ls": `${(s[`${prefix}_LETTER_SPACING`] ?? 0) / 100}em`,
+      "--osi-ff": FONT_FAMILIES[s[`${prefix}_FONT`]] ?? "inherit",
+      color: s[`${prefix}_COLOR`] || undefined,
+      textTransform: TEXT_TRANSFORMS[s[`${prefix}_TRANSFORM`]] ?? TEXT_TRANSFORMS[defaultTransform],
+    };
+  }
+
+  const headingTextStyle = computed(() => textStyleVars("FOOTER_HEADING", "UPPERCASE"));
+  const linkTextStyle = computed(() => textStyleVars("FOOTER_LINK", "NONE"));
+
+  return { isBar, utilityBlocks, settings, brand, pick, barScheme, scheme, appearance, store, storeLogo, mediaUrl, useMenuByHandle, t, menu1, menu2, menu3, columnWidthMode, columnFlexBasis, columns, logoSrc, logoPosition, logoAlignment, logoWidthVars, showBrandDescription, DESCRIPTION_ALIGNMENTS, brandDescriptionStyle, footerText, copyright, socials, socialsEnabled, socialPosition, paymentIcons, languages, countries, currentLanguage, currentCountry, showSocial, socialAlignment, showNewsletter, newsletterOnStart, newsletterStacked, newsletterAlignment, showConsent, newsletterSubmitted, handleNewsletterSubmit, newsletterSuccessMessage, showPaymentIcons, showLanguageSelector, showCountrySelector, containerStyle, footerStyle, columnsAlignment, columnsVerticalAlignment, columnTextAlignment, JUSTIFY, ALIGN, TEXT, bottomAlignment, showBottomBarDivider, bottomThreeZone, bottomStacked, px, barVars, policyClasses, policyStyle, copyrightStyle, orderStyle, barStyle, showPoweredBy, poweredByText, poweredByPrefix, copyrightGap, poweredByUrl, POLICY_SLOTS, policyLinks, socialsInBar, socialsInColumns, socialsUnderNewsletter, hasFooterContent, mobileAccordion, openColumns, toggleColumn, isColumnOpen, FONT_WEIGHTS, FONT_FAMILIES, TEXT_TRANSFORMS, textStyleVars, headingTextStyle, linkTextStyle };
+}