fragment-headless-sdk 2.4.3 → 2.4.4

package/dist/components/Hero/DesktopHero.js

@@ -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 } },
         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/utils/hero-resolvers.d.ts

@@ -10,7 +10,7 @@ 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";
 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

@@ -8,7 +8,25 @@ 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 (e.g. "h-[400px]", "h-screen") to a CSS
+ * value string so it can be applied via inline style. This avoids Tailwind's
+ * static-scan limitation where dynamic class names from the database are never
+ * included in the generated CSS bundle.
+ */
+function parseTailwindHeight(cls) {
+    const match = cls.match(/^h-\[(.+)\]$/);
+    if (match)
+        return match[1];
+    const map = {
+        "h-screen": "100vh",
+        "h-full": "100%",
+        "h-auto": "auto",
+        "h-fit": "fit-content",
+    };
+    return map[cls] ?? DEFAULT_HEIGHT_CSS;
+}
 export const FONT_FAMILY_MAP = {
     geist: '"Geist", -apple-system, BlinkMacSystemFont, sans-serif',
     georgia: '"Georgia", "Times New Roman", serif',
@@ -67,9 +85,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 +145,18 @@ 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}`;
+    //   from rich text editors prevents word wrapping; replace with regular spaces.
+    const displayHtml = text.replace(/ /g, "\u0020");
     return React.createElement("div", {
         className: combinedClasses,
         style: {
             color,
             fontFamily: FONT_FAMILY_MAP[font] ?? FONT_FAMILY_MAP.geist,
         },
-        dangerouslySetInnerHTML: { __html: text },
+        dangerouslySetInnerHTML: { __html: displayHtml },
     });
 }

package/docs/CHANGELOG.md

@@ -7,11 +7,17 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### [Unreleased]
 
+### [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.4.4",
   "description": "Official SDK for Fragment-Shopify CMS: React components, TypeScript types, and utilities for headless Shopify storefronts.",
   "license": "MIT",
   "main": "dist/index.js",