fragment-headless-sdk 2.4.3 → 2.5.0

package/dist/components/Announcement/index.js

@@ -2,7 +2,7 @@
 import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType, SectionType } from "../../constants";
-import { fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveAnnouncementColors, } from "../../utils";
+import { fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, normalizeRichTextHtml, resolveAnnouncementColors, resolveAnnouncementTypography, } from "../../utils";
 import AnnouncementButton from "./AnnouncementButton";
 import { AnnouncementStyles } from "./AnnouncementStyles";
 import CountdownTimer from "./CountdownTimer";
@@ -18,14 +18,16 @@ export default function Announcement({ content, type, handleClose, }) {
         return null;
     const styling = content.styling;
     const colors = resolveAnnouncementColors(content);
+    const typography = resolveAnnouncementTypography(content);
+    const announcementHtml = normalizeRichTextHtml(content.announcementHtml);
     const themeClasses = getThemeClasses(styling);
-    const rootClass = mergeSlotClasses(`relative w-full ${themeClasses}`, styling, "root");
+    const rootClass = mergeSlotClasses(`fragment-announcement relative w-full ${themeClasses}`, styling, "root");
     const rootStyle = mergeSlotStyles({
         backgroundColor: colors.background,
         color: colors.text,
     }, styling, "root");
     const rootAttributes = mergeSlotAttributes(styling, "root");
-    const innerClass = mergeSlotClasses("relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:px-4 py-2 md:py-0 text-center md:text-left min-h-[50px]", styling, "inner", "wrapper");
+    const innerClass = mergeSlotClasses("relative mx-auto flex max-w-screen-xl flex-col md:flex-row items-center justify-center gap-4 px-10 md:pl-4 md:pr-10 py-2 md:py-0 text-center min-h-[50px]", styling, "inner", "wrapper");
     const innerStyle = mergeSlotStyles(undefined, styling, "inner", "wrapper");
     const innerAttributes = mergeSlotAttributes(styling, "inner", "wrapper");
     const marqueeContainerClass = mergeSlotClasses("flex w-full flex-col md:flex-row items-center justify-between gap-2 md:gap-4 overflow-hidden md:pr-8", styling, "marqueeContainer");
@@ -37,14 +39,14 @@ export default function Announcement({ content, type, handleClose, }) {
     const marqueeTextClass = mergeSlotClasses("whitespace-nowrap animate-marquee", styling, "marqueeText");
     const marqueeTextStyle = mergeSlotStyles(undefined, styling, "marqueeText");
     const marqueeTextAttributes = mergeSlotAttributes(styling, "marqueeText");
-    const marqueeContentClass = mergeSlotClasses("inline-block max-w-none text-base", styling, "marqueeContent");
-    const marqueeContentStyle = mergeSlotStyles(undefined, styling, "marqueeContent");
+    const marqueeContentClass = mergeSlotClasses(`fragment-announcement-text inline-block max-w-none font-semibold ${typography.fontSize} ${typography.lineHeight}`, styling, "marqueeContent");
+    const marqueeContentStyle = mergeSlotStyles({ fontFamily: typography.fontFamily }, styling, "marqueeContent");
     const marqueeContentAttributes = mergeSlotAttributes(styling, "marqueeContent");
     const contentRowClass = mergeSlotClasses("flex flex-col md:flex-row items-center justify-center gap-2 md:gap-4 w-full", styling, "contentRow");
     const contentRowStyle = mergeSlotStyles(undefined, styling, "contentRow");
     const contentRowAttributes = mergeSlotAttributes(styling, "contentRow");
-    const announcementTextClass = mergeSlotClasses("max-w-none text-based", styling, "announcementText");
-    const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
+    const announcementTextClass = mergeSlotClasses(`fragment-announcement-text max-w-none font-semibold ${typography.fontSize} ${typography.lineHeight}`, styling, "announcementText");
+    const announcementTextStyle = mergeSlotStyles({ fontFamily: typography.fontFamily }, styling, "announcementText");
     const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
     const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer", styling, "closeButton");
     const closeButtonStyle = mergeSlotStyles({ color: colors.closeButton }, styling, "closeButton");
@@ -56,12 +58,12 @@ export default function Announcement({ content, type, handleClose, }) {
                 React.createElement("div", { className: marqueeTextWrapperClass, style: marqueeTextWrapperStyle, ...(marqueeTextWrapperAttributes ?? {}) },
                     React.createElement("div", { className: marqueeTextClass, style: marqueeTextStyle, ...(marqueeTextAttributes ?? {}) },
                         React.createElement("div", { className: marqueeContentClass, style: marqueeContentStyle, ...(marqueeContentAttributes ?? {}), dangerouslySetInnerHTML: {
-                                __html: content.announcementHtml || "",
+                                __html: announcementHtml,
                             } }))),
                 content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref })))) : (React.createElement("div", { className: contentRowClass, style: contentRowStyle, ...(contentRowAttributes ?? {}) },
                 React.createElement("div", { className: announcementTextClass, style: announcementTextStyle, ...(announcementTextAttributes ?? {}) },
                     React.createElement("div", { dangerouslySetInnerHTML: {
-                            __html: content.announcementHtml || "",
+                            __html: announcementHtml,
                         } })),
                 type === AnnouncementType.Countdown && (React.createElement(CountdownTimer, { content: content })),
                 content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref })))),

package/dist/components/Hero/DesktopHero.d.ts

@@ -8,9 +8,9 @@ interface HeroViewProps {
     contentWidthClass: string;
     typography: ReturnType<typeof resolveHeroTypography>;
     position: "left" | "center" | "right";
-    height: string;
+    heightCss: string;
     buttonSpacing?: string;
     contentSpacing?: string;
 }
-export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, height, buttonSpacing, contentSpacing, }: HeroViewProps): React.JSX.Element;
+export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, heightCss, buttonSpacing, contentSpacing, }: HeroViewProps): React.JSX.Element;
 export {};

package/dist/components/Hero/DesktopHero.js

@@ -3,7 +3,7 @@ import { SectionType } from "../../constants";
 import { fireClickMetric } from "../../utils";
 import { DEFAULT_CONTENT_WIDTH_CLASS, joinClassNames, renderText, } from "../../utils/hero-resolvers";
 import HeroCountdownTimer from "./HeroCountdownTimer";
-export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, height, buttonSpacing, contentSpacing, }) {
+export default function DesktopHero({ buttonHref, content, colors, contentWidthClass, typography, position, heightCss, buttonSpacing, contentSpacing, }) {
     const getPositionClasses = () => {
         switch (position) {
             case "center":
@@ -18,7 +18,7 @@ export default function DesktopHero({ buttonHref, content, colors, contentWidthC
     const handleClick = React.useCallback(() => {
         fireClickMetric(content.measurementId, content.sectionType || SectionType.HeroBanner, content.sectionId);
     }, [content.measurementId, content.sectionType, content.sectionId]);
-    return (React.createElement("div", { className: `relative ${height} gap-4 w-full`, style: { backgroundColor: colors.background } },
+    return (React.createElement("div", { className: "relative gap-4 w-full", style: { backgroundColor: colors.background, height: heightCss } },
         content?.videoUrl ? (React.createElement("video", { src: content.videoUrl, autoPlay: true, muted: true, loop: true, playsInline: true, className: "absolute inset-0 z-0 object-cover w-full h-full" })) : (
         /* Image Background */
         content?.imageUrl && (React.createElement("img", { src: content.imageUrl, alt: content.title || "Hero", className: "absolute inset-0 z-0 object-cover w-full h-full" }))),

package/dist/components/Hero/index.js

@@ -19,12 +19,12 @@ export default function Hero({ content }) {
     const contentWidthClass = resolveContentWidthClass(content);
     const typography = resolveHeroTypography(content);
     const position = resolvePosition(content);
-    const height = resolveHeight(content);
+    const heightCss = resolveHeight(content);
     const buttonSpacing = resolveButtonSpacing(content);
     const contentSpacing = resolveContentSpacing(content);
     return (React.createElement("div", { className: "bg-black", ref: ref, style: { backgroundColor: colors.background } },
         React.createElement("div", { className: "hidden lg:block" },
-            React.createElement(DesktopHero, { content: content, buttonHref: buttonHref, colors: colors, contentWidthClass: contentWidthClass, typography: typography, position: position, height: height, buttonSpacing: buttonSpacing, contentSpacing: contentSpacing })),
+            React.createElement(DesktopHero, { content: content, buttonHref: buttonHref, colors: colors, contentWidthClass: contentWidthClass, typography: typography, position: position, heightCss: heightCss, buttonSpacing: buttonSpacing, contentSpacing: contentSpacing })),
         React.createElement("div", { className: "block lg:hidden" },
             React.createElement(MobileHero, { content: content, buttonHref: buttonHref, colors: colors, typography: typography, buttonSpacing: buttonSpacing, contentSpacing: contentSpacing }))));
 }

package/dist/styles/fragment-sdk.css

@@ -29,3 +29,14 @@
   color: currentColor;
   text-decoration: underline;
 }
+
+/* Announcement text links: always inherit the surrounding text color and stay underlined */
+.fragment-announcement-text a {
+  color: currentColor;
+  text-decoration: underline;
+}
+
+.fragment-announcement-text a:hover {
+  color: currentColor;
+  text-decoration: underline;
+}

package/dist/utils/announcement-resolvers.d.ts

@@ -1,4 +1,5 @@
 import { IAnnouncementContent } from "../types";
+import { FontKey } from "./hero-resolvers";
 export interface AnnouncementResolvedColors {
     background: string;
     text: string;
@@ -11,5 +12,12 @@ export interface CountdownResolvedColors {
     digitBackgroundColor: string;
     textColor: string;
 }
+export interface AnnouncementTypographySettings {
+    fontSize: string;
+    lineHeight: string;
+    font: FontKey;
+    fontFamily: string;
+}
 export declare function resolveAnnouncementColors(content: IAnnouncementContent): AnnouncementResolvedColors;
+export declare function resolveAnnouncementTypography(content: IAnnouncementContent): AnnouncementTypographySettings;
 export declare function resolveCountdownColors(content: IAnnouncementContent): CountdownResolvedColors;

package/dist/utils/announcement-resolvers.js

@@ -1,3 +1,4 @@
+import { FONT_FAMILY_MAP } from "./hero-resolvers";
 import { resolveToken, resolveTokenByCategory } from "./styling";
 const DEFAULT_ANNOUNCEMENT_COLORS = {
     background: "#000000",
@@ -6,6 +7,12 @@ const DEFAULT_ANNOUNCEMENT_COLORS = {
     buttonText: "#000000",
     closeButton: "#ffffff",
 };
+const DEFAULT_ANNOUNCEMENT_TYPOGRAPHY = {
+    fontSize: "text-base",
+    lineHeight: "leading-relaxed",
+    font: "geist",
+    fontFamily: FONT_FAMILY_MAP.geist,
+};
 const DEFAULT_COUNTDOWN_COLORS = {
     digitColor: "#ffffff",
     digitBackgroundColor: "#000000",
@@ -32,6 +39,23 @@ export function resolveAnnouncementColors(content) {
         closeButton: fallbackColor(closeButton, fallbackColor(text, DEFAULT_ANNOUNCEMENT_COLORS.closeButton)),
     };
 }
+export function resolveAnnouncementTypography(content) {
+    const typography = content?.styling?.tokens?.typography;
+    const rawFont = typography?.announcementFont;
+    const isValidFont = typeof rawFont === "string" &&
+        Object.prototype.hasOwnProperty.call(FONT_FAMILY_MAP, rawFont);
+    const font = isValidFont
+        ? rawFont
+        : DEFAULT_ANNOUNCEMENT_TYPOGRAPHY.font;
+    return {
+        fontSize: typography?.announcementFontSize ??
+            DEFAULT_ANNOUNCEMENT_TYPOGRAPHY.fontSize,
+        lineHeight: typography?.announcementLineHeight ??
+            DEFAULT_ANNOUNCEMENT_TYPOGRAPHY.lineHeight,
+        font,
+        fontFamily: FONT_FAMILY_MAP[font],
+    };
+}
 export function resolveCountdownColors(content) {
     const styling = content.styling;
     const digitColor = resolveToken(styling, "counterDigitColor");

package/dist/utils/hero-resolvers.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { IHeroContent } from "../types";
-import { CountdownResolvedColors } from "./announcement-resolvers";
+import type { CountdownResolvedColors } from "./announcement-resolvers";
 export interface HeroResolvedColors {
     title: string;
     text: string;
@@ -10,7 +10,16 @@ export interface HeroResolvedColors {
 }
 export declare const DEFAULT_COLORS: HeroResolvedColors;
 export declare const DEFAULT_CONTENT_WIDTH_CLASS = "w-2/5";
-export declare const DEFAULT_HEIGHT_CLASS = "h-[400px]";
+export declare const DEFAULT_HEIGHT_CSS = "400px";
+/**
+ * Converts a Tailwind height class to a CSS value for use in inline styles.
+ * Handles arbitrary values (`h-[400px]`), named tokens (`h-screen`), and
+ * raw CSS values passed through unchanged (`400px`, `50vh`).
+ *
+ * Inline style is required because height tokens are stored in the database
+ * at runtime — Tailwind's static scanner cannot include them in the CSS bundle.
+ */
+export declare function parseTailwindHeight(cls: string): string;
 export declare const FONT_FAMILY_MAP: {
     readonly geist: "\"Geist\", -apple-system, BlinkMacSystemFont, sans-serif";
     readonly georgia: "\"Georgia\", \"Times New Roman\", serif";

package/dist/utils/hero-resolvers.js

@@ -1,4 +1,5 @@
 import React from "react";
+import { normalizeRichTextHtml } from "./html";
 import { resolveToken } from "./styling";
 export const DEFAULT_COLORS = {
     title: "#ffffff",
@@ -8,7 +9,35 @@ export const DEFAULT_COLORS = {
     background: "#000000",
 };
 export const DEFAULT_CONTENT_WIDTH_CLASS = "w-2/5";
-export const DEFAULT_HEIGHT_CLASS = "h-[400px]";
+export const DEFAULT_HEIGHT_CSS = "400px";
+/**
+ * Converts a Tailwind height class to a CSS value for use in inline styles.
+ * Handles arbitrary values (`h-[400px]`), named tokens (`h-screen`), and
+ * raw CSS values passed through unchanged (`400px`, `50vh`).
+ *
+ * Inline style is required because height tokens are stored in the database
+ * at runtime — Tailwind's static scanner cannot include them in the CSS bundle.
+ */
+export function parseTailwindHeight(cls) {
+    const trimmed = cls?.trim() ?? "";
+    if (trimmed.length === 0)
+        return DEFAULT_HEIGHT_CSS;
+    const match = trimmed.match(/^h-\[(.+)\]$/);
+    if (match)
+        return match[1];
+    const map = {
+        "h-screen": "100vh",
+        "h-full": "100%",
+        "h-auto": "auto",
+        "h-fit": "fit-content",
+    };
+    if (map[trimmed])
+        return map[trimmed];
+    // Pass through values that are already valid CSS (e.g. "500px", "50vh")
+    if (!trimmed.startsWith("h-"))
+        return trimmed;
+    return DEFAULT_HEIGHT_CSS;
+}
 export const FONT_FAMILY_MAP = {
     geist: '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
     georgia: '"Georgia", "Times New Roman", serif',
@@ -67,9 +96,9 @@ export function resolveHeight(content) {
     const layout = content?.styling?.tokens?.layout ?? {};
     const rawHeight = layout.height;
     if (typeof rawHeight === "string" && rawHeight.trim().length > 0) {
-        return rawHeight.trim();
+        return parseTailwindHeight(rawHeight.trim());
     }
-    return DEFAULT_HEIGHT_CLASS;
+    return DEFAULT_HEIGHT_CSS;
 }
 const DEFAULT_BUTTON_SPACING = "mt-4";
 export function resolveButtonSpacing(content) {
@@ -127,16 +156,17 @@ export function renderText({ fontSize, lineHeight, text, className, color, font,
     if (!text || text.trim().length === 0) {
         return null;
     }
-    const baseClasses = "drop-shadow-lg max-w-full break-words";
+    const baseClasses = "drop-shadow-lg max-w-full";
     const combinedClasses = className
         ? `${baseClasses} ${fontSize} ${lineHeight} ${className}`
         : `${baseClasses} ${fontSize} ${lineHeight}`;
+    const displayHtml = normalizeRichTextHtml(text);
     return React.createElement("div", {
         className: combinedClasses,
         style: {
             color,
             fontFamily: FONT_FAMILY_MAP[font] ?? FONT_FAMILY_MAP.geist,
         },
-        dangerouslySetInnerHTML: { __html: text },
+        dangerouslySetInnerHTML: { __html: displayHtml },
     });
 }

package/dist/utils/html.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Rich-text editors often emit ` ` between words to preserve spacing.
+ * That prevents normal word wrapping and causes overflow in constrained
+ * containers (marquees, single-line announcements, heros). Replace them with
+ * regular spaces so the browser can break on them as expected.
+ */
+export declare const normalizeRichTextHtml: (html: string | null | undefined) => string;

package/dist/utils/html.js

@@ -0,0 +1,7 @@
+/**
+ * Rich-text editors often emit ` ` between words to preserve spacing.
+ * That prevents normal word wrapping and causes overflow in constrained
+ * containers (marquees, single-line announcements, heros). Replace them with
+ * regular spaces so the browser can break on them as expected.
+ */
+export const normalizeRichTextHtml = (html) => (html ?? "").replace(/ /g, "\u0020");

package/dist/utils/index.d.ts

@@ -3,5 +3,6 @@ export * from "./attribution";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";
+export * from "./html";
 export * from "./metrics";
 export * from "./styling";

package/dist/utils/index.js

@@ -3,5 +3,6 @@ export * from "./attribution";
 export * from "./cache";
 export * from "./fetch-resource";
 export * from "./hero-resolvers";
+export * from "./html";
 export * from "./metrics";
 export * from "./styling";

package/docs/CHANGELOG.md

@@ -7,11 +7,36 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### [Unreleased]
 
+#### Added
+
+- **`normalizeRichTextHtml` utility** – New shared helper in `utils/html.ts` that normalizes rich-text editor output (replaces ` ` with regular spaces so words wrap at natural boundaries). Exported from the SDK entrypoint and used by both `Announcement` and `renderText` in `hero-resolvers`, replacing previously duplicated inline implementations.
+- **`parseTailwindHeight` is now public** – Previously an internal helper, now exported so preview/template consumers (e.g. `HeroBannerTemplate`) can share the same Tailwind-height → CSS conversion. Also accepts raw CSS values (`500px`, `50vh`) as pass-through (`hero-resolvers.ts`).
+- **`AnnouncementTypographySettings.fontFamily`** – `resolveAnnouncementTypography` now returns a resolved `fontFamily` CSS value alongside `font`/`fontSize`/`lineHeight`, so callers no longer need to import `FONT_FAMILY_MAP` to translate the font key themselves.
+- **Font key validation in `resolveAnnouncementTypography`** – Invalid/stale `announcementFont` values stored in the database now fall back to `geist` instead of being silently cast to a non-existent `FontKey` (`announcement-resolvers.ts`).
+
+#### Changed
+
+- **Announcement applies typography tokens** – `Announcement` now applies `announcementFontSize`, `announcementLineHeight`, and `announcementFont` (as `fontFamily`) to marquee and standard text elements. Previously these tokens were ignored and text always rendered at `text-base` with no font override (`components/Announcement/index.tsx`).
+- **Announcement inner wrapper padding** – Reserves right-side padding on `md+` (`md:pl-4 md:pr-10`) so the close button no longer overlaps long announcement text, and drops `md:text-left` so copy stays centered across breakpoints (`components/Announcement/index.tsx`).
+- **`DesktopHero` prop rename** – `height` → `heightCss` to reflect that the value is a CSS string, not a Tailwind class. Callers updated accordingly (`components/Hero/DesktopHero.tsx`, `components/Hero/index.tsx`).
+
+#### Fixed
+
+- **Announcement text breaking mid-word** – `Announcement` now normalizes ` ` entities to regular spaces before rendering so words wrap at natural boundaries. Applied to both marquee and standard/countdown layouts (`components/Announcement/index.tsx`).
+- **Announcement text class typo** – Replaced `max-w-none text-based` (invalid Tailwind class) with the correct resolved `${fontSize} ${lineHeight}` tokens (`components/Announcement/index.tsx`).
+- **Announcement text links** – Links inside `.fragment-announcement-text` now inherit surrounding text color and stay underlined on hover, matching the existing hero link behavior (`styles/fragment-sdk.css`).
+
+### [2.4.4] - 2026-04-14
+
+#### Fixed
+
+- **Hero height ignored for non-default values**: `resolveHeight` now converts stored Tailwind height classes (e.g. `h-[500px]`) to CSS values and applies them via inline `style`. Arbitrary-value classes from the database are never included in Tailwind's generated CSS bundle at build time, so any height other than the 400 px default was silently ignored (`hero-resolvers.ts`, `DesktopHero.tsx`).
+- **Hero text breaking mid-word**: `renderText` now replaces ` ` entities with regular spaces before rendering so words wrap naturally at boundaries. Removed `break-words` which was masking the underlying cause rather than fixing it (`hero-resolvers.ts`).
+
 ### [2.4.3] - 2026-04-14
 
 #### Fixed
 
-- **Hero text overflow**: `renderText` base classes now include `max-w-full break-words` so title and description respect their content column width and wrap correctly when content contains non-breaking spaces.
 - **Desktop hero content alignment**: `DesktopHero` content column now uses `items-start` so child elements (button, countdown) no longer stretch to full column width.
 
 ### [2.4.2] - 2026-04-14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.4.3",
+  "version": "2.5.0",
   "description": "Official SDK for Fragment-Shopify CMS: React components, TypeScript types, and utilities for headless Shopify storefronts.",
   "license": "MIT",
   "main": "dist/index.js",