fragment-headless-sdk 2.1.3 → 2.1.5

package/dist/components/Announcement/CountdownTimer.js

@@ -33,29 +33,31 @@ export default function CountdownTimer({ content, }) {
     const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
     const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
     const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
-    const digitClass = mergeSlotClasses("w-5 h-6 rounded bg-black text-white text-base font-bold flex items-center justify-center", styling, "countdownDigit");
-    const digitBgColor = resolveToken(styling, "counterBgColor", "#000000") || "#000000";
+    const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none", styling, "countdownDigit");
     const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
     const digitStyle = mergeSlotStyles({
-        backgroundColor: digitBgColor,
         color: digitTextColor,
     }, styling, "countdownDigit");
     const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
-    const labelClass = mergeSlotClasses("mt-0.5 text-[10px]", styling, "countdownLabel");
-    const labelStyle = mergeSlotStyles(undefined, styling, "countdownLabel");
+    const labelClass = mergeSlotClasses("mt-0.5 text-[10px] leading-tight", styling, "countdownLabel");
+    const labelStyle = mergeSlotStyles({
+        color: digitTextColor,
+    }, styling, "countdownLabel");
     const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
     const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
-    const separatorStyle = mergeSlotStyles(undefined, styling, "countdownSeparator");
+    const separatorStyle = mergeSlotStyles({
+        color: digitTextColor,
+    }, styling, "countdownSeparator");
     const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
     const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },
-        React.createElement("div", { className: "flex gap-1" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
+        React.createElement("div", { className: "flex" }, value.split("").map((digit, i) => (React.createElement("span", { key: i, className: digitClass, style: digitStyle, ...(digitAttributes ?? {}) }, digit)))),
         React.createElement("span", { className: labelClass, style: labelStyle, ...(labelAttributes ?? {}) }, label)));
     return (React.createElement("div", { className: containerClass, style: containerStyle, ...(containerAttributes ?? {}) },
         renderBlock(timeLeft.days, "Days"),
         React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
         renderBlock(timeLeft.hours, "Hours"),
         React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
-        renderBlock(timeLeft.minutes, "Minutes"),
+        renderBlock(timeLeft.minutes, "Mins"),
         React.createElement("span", { className: separatorClass, style: separatorStyle, ...(separatorAttributes ?? {}) }, ":"),
-        renderBlock(timeLeft.seconds, "Seconds")));
+        renderBlock(timeLeft.seconds, "Secs")));
 }

package/dist/components/Announcement/index.js

@@ -1,3 +1,4 @@
+import { XMarkIcon } from "@heroicons/react/24/outline";
 import React, { useEffect, useRef } from "react";
 import { AnnouncementType, ButtonType } from "../../constants";
 import { buildClickUrl, fireImpressionWhenVisible, getThemeClasses, mergeSlotAttributes, mergeSlotClasses, mergeSlotStyles, resolveToken, resolveTokenByCategory, } from "../../utils";
@@ -50,7 +51,7 @@ export default function Announcement({ content, type, handleClose, }) {
     const announcementTextClass = mergeSlotClasses("max-w-none text-base font-semibold", styling, "announcementText");
     const announcementTextStyle = mergeSlotStyles(undefined, styling, "announcementText");
     const announcementTextAttributes = mergeSlotAttributes(styling, "announcementText");
-    const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 text-3xl leading-none cursor-pointer", styling, "closeButton");
+    const closeButtonClass = mergeSlotClasses("absolute right-4 top-1/2 -translate-y-1/2 cursor-pointer", styling, "closeButton");
     const closeButtonColor = resolveTokenByCategory(styling, "colors", "closeButton") ||
         (resolveToken(styling, "closeButtonColor", textColor ?? "#000") ?? "#000");
     const closeButtonStyle = mergeSlotStyles({ color: closeButtonColor }, styling, "closeButton");
@@ -69,7 +70,8 @@ export default function Announcement({ content, type, handleClose, }) {
                     React.createElement("div", { dangerouslySetInnerHTML: {
                             __html: content.announcementHtml || "",
                         } })),
-                type === AnnouncementType.Countdown ? (React.createElement(CountdownTimer, { content: content })) : (content.buttonText &&
-                    content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref }))))),
-            React.createElement("div", { onClick: handleClose, className: closeButtonClass, style: closeButtonStyle, ...(closeButtonAttributes ?? {}) }, "\u00D7"))));
+                type === AnnouncementType.Countdown && (React.createElement(CountdownTimer, { content: content })),
+                content.buttonText && content.buttonType !== ButtonType.None && (React.createElement(AnnouncementButton, { content: content, buttonHref: buttonHref, clickHref: clickTrackingHref })))),
+            React.createElement("div", { onClick: handleClose, className: closeButtonClass, style: closeButtonStyle, ...(closeButtonAttributes ?? {}) },
+                React.createElement(XMarkIcon, { className: "w-5 h-5" })))));
 }

package/dist/types/announcement.d.ts

@@ -21,8 +21,10 @@ export interface IAnnouncement {
     name: string;
     status: AnnouncementStatus;
     content: IAnnouncementContent | null;
-    created_at: string;
-    updated_at: string;
+    active_start_date: string | null;
+    active_end_date: string | null;
+    created_at: string | null;
+    updated_at: string | null;
     views_count: number;
     clicks_count: number;
 }

package/dist/types/hero.d.ts

@@ -22,11 +22,13 @@ export interface IHero {
     shop: string;
     name: string;
     type: HeroType;
-    page: ShopPage["handle"];
+    page: ShopPage["handle"] | null;
     status: HeroStatus;
     content: IHeroContent | null;
-    created_at: string;
-    updated_at: string;
+    active_start_date: string | null;
+    active_end_date: string | null;
+    created_at: string | null;
+    updated_at: string | null;
     views_count: number;
     clicks_count: number;
 }

package/dist/types/styling.d.ts

@@ -63,19 +63,6 @@ export interface IFragmentStyling {
      * Structured design tokens for consistent theming.
      */
     tokens?: IFragmentTokens;
-    /**
-     * Legacy flat token support for backward compatibility.
-     * @deprecated Use structured tokens instead.
-     */
-    legacyTokens?: Record<string, string>;
-    /**
-     * Theme variant (light, dark, brand, etc.).
-     */
-    theme?: "light" | "dark" | "brand" | "minimal" | "bold" | string;
-    /**
-     * Component variant for different styles of the same component.
-     */
-    variant?: "default" | "outlined" | "ghost" | "solid" | "gradient" | string;
     /**
      * Global CSS variables to apply to the component root.
      */

package/dist/utils/styling.js

@@ -260,10 +260,6 @@ export function resolveToken(styling, token, fallback) {
             }
         }
     }
-    // Fall back to legacy tokens
-    if (styling.legacyTokens && token in styling.legacyTokens) {
-        return styling.legacyTokens[token];
-    }
     return fallback;
 }
 export function resolveTokenByCategory(styling, category, token, fallback) {
@@ -278,16 +274,8 @@ export function resolveTokenByCategory(styling, category, token, fallback) {
     return fallback;
 }
 export function getThemeClasses(styling) {
-    if (!styling)
-        return "";
-    const classes = [];
-    if (styling.theme) {
-        classes.push(`theme-${styling.theme}`);
-    }
-    if (styling.variant) {
-        classes.push(`variant-${styling.variant}`);
-    }
-    return classes.join(" ");
+    // Theme and variant system has been removed
+    return "";
 }
 export function generateCSS(styling) {
     if (!styling)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.1.3",
+  "version": "2.1.5",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -18,6 +18,7 @@
     "build": "tsc"
   },
   "dependencies": {
+    "@heroicons/react": "^2.2.0",
     "react": "^19.1.0"
   },
   "devDependencies": {

package/readme.md

@@ -2,39 +2,11 @@
 
 The official SDK for integrating with Fragment-Shopify CMS. Provides React components, TypeScript types, and utilities for rendering published sections in headless Shopify storefronts.
 
-## ✨ What's New in v2.1.3
+## ✨ What's New
 
-⚡ **Request Deduplication** - Intelligent request deduplication prevents identical concurrent API calls  
-🚀 **Enhanced Caching** - Improved caching strategy with 60-second revalidation for better performance  
-🔧 **Optimized Fetching** - Consistent parameter handling and smarter cache key generation  
-🛡️ **Anti-Spam Protection** - Built-in protection against redundant API requests
+**v2.1.4** - Countdown timer enhancements and improved announcement layouts
 
-### Previous Release (v2.1.2)
-
-📚 **Enhanced Documentation** - Comprehensive documentation updates highlighting new click tracking features  
-📖 **Better Examples** - Improved usage examples and feature descriptions  
-🎯 **Feature Highlights** - Clear documentation of the enhanced click tracking system
-
-### Previous Release (v2.1.1)
-
-🎯 **Enhanced Click Tracking System** - Improved click tracking architecture with better user experience  
-⚡ **Direct Navigation** - Users go directly to destinations without redirect delays  
-🔗 **Separated Tracking** - Button destinations and click tracking are now handled separately  
-🛠️ **Better Performance** - Non-blocking click tracking that doesn't delay navigation
-
-### Previous Release (v2.1.0)
-
-🎨 **Enhanced Hero Styling System** - New hero resolvers utility with advanced typography, positioning, and layout controls  
-🔤 **Advanced Typography** - Built-in font family support with granular control over sizes and line heights  
-📐 **Flexible Layout Controls** - Content positioning (left/center/right), width management, and height configuration  
-🎯 **Developer Experience** - Enhanced TypeScript interfaces and utility functions for better development workflow
-
-### Previous Major Release (v2.0.0)
-
-🎨 **Revolutionary Styling System** - Complete overhaul with advanced theming, responsive design, and scalable architecture  
-🏗️ **Component-Specific Types** - Enhanced type safety with dedicated slot interfaces  
-🚀 **Performance Optimized** - Caching and optimizations for production-ready performance  
-🎯 **Future-Proof Architecture** - Built to scale with any number of components and styling requirements
+> See [CHANGELOG.md](./docs/CHANGELOG.md) for full release history
 
 ---
 
@@ -59,7 +31,7 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-headless-sdk (Consumer)
 - ✅ **Data Fetching**: Built-in utilities to fetch sections from Fragment-Shopify API
 - ✅ **React Components**: Pre-built Hero and Announcement components with responsive design
 - ✅ **TypeScript Support**: Full type definitions for all components and data structures
-- ✅ **Multiple Announcement Types**: Standard, marquee, and countdown announcement variants
+- ✅ **Multiple Announcement Types**: Standard, marquee, and countdown announcements
 - ✅ **Hero Sections**: Desktop/mobile responsive hero components with video support
 - ✅ **Advanced Click Tracking**: Separated tracking and navigation for optimal user experience
 
@@ -68,10 +40,9 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-headless-sdk (Consumer)
 - 🎨 **Structured Design Tokens**: Organized color, spacing, typography, and effect tokens
 - 📱 **Responsive Styling**: Breakpoint-specific overrides (sm, md, lg, xl, 2xl)
 - 🎭 **State-Based Styling**: Hover, active, focus, disabled, and loading states
-- 🎯 **Theme & Variant Support**: Built-in theme system with variant support
+- 🎯 **Design Token System**: Structured tokens for consistent styling
 - 🔧 **Component-Specific Slots**: Type-safe styling for individual component parts
 - ⚡ **Performance Optimized**: Caching and memoization for optimal performance
-- 🔄 **Legacy Compatibility**: Seamless migration path from v1.x styling
 - 🎪 **CSS-in-JS Support**: Integration with styled-components, emotion, etc.
 
 ### Hero Resolvers System (v2.1+)
@@ -81,7 +52,6 @@ Fragment-Shopify App (CMS) → API Endpoint → fragment-headless-sdk (Consumer)
 - 🎨 **Smart Color Resolution**: Intelligent fallback handling for color tokens
 - 🛠️ **Utility Functions**: Helper functions for class joining, text rendering, and style resolution
 - 📝 **Type Safety**: Enhanced TypeScript interfaces for all styling options
-- 🔄 **Backward Compatible**: Works seamlessly with existing Hero implementations
 
 ### Request Deduplication & Performance System (v2.1.3+)
 
@@ -259,10 +229,6 @@ const heroContent = {
 
   // Advanced styling configuration
   styling: {
-    // Theme and variant
-    theme: "dark",
-    variant: "gradient",
-
     // Structured design tokens
     tokens: {
       colors: {
@@ -317,357 +283,7 @@ const heroContent = {
 <Hero content={heroContent} />;
 ```
 
----
-
-## 🎨 Advanced Styling System
-
-### Overview
-
-The v2.0 styling system provides unprecedented control over component appearance while maintaining backward compatibility.
-
-### Key Concepts
-
-#### 1. **Structured Design Tokens**
-
-Organize your design system with categorized tokens:
-
-```typescript
-styling: {
-  tokens: {
-    colors: {
-      primary: "#007bff",
-      secondary: "#6c757d",
-      background: "#ffffff",
-      text: "#333333"
-    },
-    spacing: {
-      xs: "0.25rem",
-      sm: "0.5rem",
-      md: "1rem",
-      lg: "1.5rem",
-      xl: "2rem"
-    },
-    typography: {
-      heading: "2.5rem",
-      body: "1rem",
-      small: "0.875rem"
-    },
-    transitions: {
-      fast: "150ms ease",
-      normal: "300ms ease",
-      slow: "500ms ease"
-    },
-    shadows: {
-      sm: "0 1px 2px rgba(0,0,0,0.05)",
-      md: "0 4px 6px rgba(0,0,0,0.1)",
-      lg: "0 10px 15px rgba(0,0,0,0.1)"
-    }
-  }
-}
-```
-
-#### 2. **Component Slots**
-
-Target specific parts of components with type-safe slot names:
-
-```typescript
-// Announcement component slots
-slots: {
-  root: { /* Root container */ },
-  inner: { /* Inner wrapper */ },
-  marqueeContainer: { /* Marquee wrapper */ },
-  announcementText: { /* Text content */ },
-  button: { /* Action button */ },
-  closeButton: { /* Close button */ }
-}
-
-// Hero component slots
-slots: {
-  root: { /* Root container */ },
-  desktopContainer: { /* Desktop layout */ },
-  mobileContainer: { /* Mobile layout */ },
-  image: { /* Background image */ },
-  title: { /* Hero title */ },
-  description: { /* Hero description */ },
-  button: { /* CTA button */ }
-}
-```
-
-#### 3. **Responsive Design**
-
-Apply different styles at different breakpoints:
-
-```typescript
-slots: {
-  title: {
-    className: "text-2xl font-bold",
-    responsive: {
-      sm: { className: "text-3xl" },
-      md: { className: "text-4xl" },
-      lg: { className: "text-5xl" },
-      xl: { className: "text-6xl" }
-    }
-  }
-}
-```
-
-#### 4. **State-Based Styling**
-
-Style components based on interaction states:
-
-```typescript
-slots: {
-  button: {
-    className: "bg-blue-500 text-white px-6 py-3 rounded",
-    states: {
-      hover: {
-        className: "bg-blue-600 shadow-lg",
-        style: { transform: "translateY(-2px)" }
-      },
-      active: { className: "bg-blue-700" },
-      disabled: {
-        className: "bg-gray-300 cursor-not-allowed",
-        attributes: { "aria-disabled": "true" }
-      }
-    }
-  }
-}
-```
-
-#### 5. **Theme and Variant System**
-
-Apply consistent theming across components:
-
-```typescript
-styling: {
-  theme: "dark", // "light" | "dark" | "brand" | custom
-  variant: "outlined", // "default" | "outlined" | "ghost" | "solid" | custom
-
-  // Automatic theme classes applied: "theme-dark variant-outlined"
-}
-```
-
-### Migration from v1.x
-
-The system maintains full backward compatibility:
-
-```typescript
-// v1.x style (still works)
-content: {
-  bgColor: "#ffffff",
-  textColor: "#333333",
-  buttonColor: "#007bff"
-}
-
-// v2.0+ enhanced style
-content: {
-  styling: {
-    // Legacy tokens (backward compatible)
-    legacyTokens: {
-      bgColor: "#ffffff",
-      textColor: "#333333",
-      buttonColor: "#007bff"
-    },
-
-    // New structured tokens (recommended)
-    tokens: {
-      colors: {
-        background: "#ffffff",
-        text: "#333333",
-        button: "#007bff"
-      }
-    }
-  }
-}
-```
-
-### CSS-in-JS Integration
-
-Support for styled-components, emotion, and other CSS-in-JS libraries:
-
-```typescript
-slots: {
-  button: {
-    css: `
-      background: linear-gradient(45deg, #007bff, #0056b3);
-      border: none;
-      border-radius: 8px;
-      padding: 12px 24px;
-      
-      &:hover {
-        background: linear-gradient(45deg, #0056b3, #004085);
-        transform: translateY(-2px);
-      }
-    `;
-  }
-}
-```
-
----
-
-## 🎨 Hero Resolvers System (v2.1+)
-
-The Hero Resolvers system provides advanced utilities for customizing Hero components with enhanced typography, layout, and styling controls.
-
-### Typography Control
-
-```typescript
-import { resolveHeroTypography, FontKey } from "fragment-headless-sdk";
-
-// Enhanced typography configuration
-const heroContent = {
-  title: "Welcome to Our Store",
-  description: "Discover amazing products",
-  styling: {
-    tokens: {
-      typography: {
-        // Title typography
-        titleFont: "montserrat" as FontKey,
-        titleFontSize: "text-6xl",
-        titleLineHeight: "leading-tight",
-
-        // Description typography
-        descriptionFont: "inter" as FontKey,
-        descriptionFontSize: "text-xl",
-        descriptionLineHeight: "leading-relaxed",
-      },
-    },
-  },
-};
-
-// Resolve typography settings
-const typography = resolveHeroTypography(heroContent);
-```
-
-### Layout & Positioning
-
-```typescript
-import {
-  resolvePosition,
-  resolveContentWidthClass,
-  resolveHeight,
-} from "fragment-headless-sdk";
-
-const heroContent = {
-  title: "Centered Hero",
-  styling: {
-    tokens: {
-      layout: {
-        position: "center", // "left" | "center" | "right"
-        contentWidth: "max-w-4xl", // Tailwind width classes
-        height: "min-h-screen", // Custom height classes
-      },
-    },
-  },
-};
-
-// Resolve layout settings
-const position = resolvePosition(heroContent); // "center"
-const contentWidth = resolveContentWidthClass(heroContent); // "max-w-4xl"
-const height = resolveHeight(heroContent); // "min-h-screen"
-```
-
-### Color Resolution
-
-```typescript
-import { resolveHeroColors } from "fragment-headless-sdk";
-
-const heroContent = {
-  title: "Styled Hero",
-  styling: {
-    tokens: {
-      colors: {
-        title: "#ffffff",
-        text: "#f0f0f0",
-        button: "#007bff",
-        buttonText: "#ffffff",
-        background: "#1a1a1a",
-      },
-    },
-  },
-};
-
-// Resolve colors with intelligent fallbacks
-const colors = resolveHeroColors(heroContent);
-// Returns: { title: "#ffffff", text: "#f0f0f0", buttonBackground: "#007bff", buttonText: "#ffffff", background: "#1a1a1a" }
-```
-
-### Built-in Font Families
-
-The system includes support for popular web fonts:
-
-```typescript
-type FontKey =
-  | "roboto"
-  | "open-sans"
-  | "lato"
-  | "montserrat"
-  | "poppins"
-  | "inter"
-  | "nunito-sans"
-  | "source-sans-pro";
-```
-
-### Utility Functions
-
-```typescript
-import { joinClassNames, renderText } from "fragment-headless-sdk";
-
-// Safe class name joining
-const classes = joinClassNames("text-xl", "font-bold", null, "text-center");
-// Returns: "text-xl font-bold text-center"
-
-// Unified text rendering
-const titleElement = renderText({
-  fontSize: "text-4xl",
-  lineHeight: "leading-tight",
-  text: "Hero Title",
-  className: "font-bold",
-  color: "#ffffff",
-  font: "montserrat",
-});
-```
-
-### Complete Example
-
-```typescript
-import { Hero } from "fragment-headless-sdk";
-
-const advancedHeroContent = {
-  title: "Advanced Hero Section",
-  description: "With enhanced typography and layout controls",
-  buttonText: "Get Started",
-  buttonLink: "/signup",
-  imageUrl: "https://example.com/hero.jpg",
-
-  styling: {
-    tokens: {
-      colors: {
-        title: "#ffffff",
-        text: "#e2e8f0",
-        button: "#3b82f6",
-        buttonText: "#ffffff",
-        background: "#1e293b",
-      },
-      typography: {
-        titleFont: "montserrat",
-        titleFontSize: "text-5xl lg:text-7xl",
-        titleLineHeight: "leading-tight",
-        descriptionFont: "inter",
-        descriptionFontSize: "text-lg lg:text-xl",
-        descriptionLineHeight: "leading-relaxed",
-      },
-      layout: {
-        position: "center",
-        contentWidth: "max-w-4xl",
-        height: "min-h-screen",
-      },
-    },
-  },
-};
-
-<Hero content={advancedHeroContent} />;
-```
+> **Advanced Features:** For detailed styling options, see [STYLING.md](./docs/STYLING.md) | For hero customization, see [HERO-RESOLVERS.md](./docs/HERO-RESOLVERS.md)
 
 ---
 
@@ -818,88 +434,6 @@ interface IAnnouncementContent {
 - `closeButton` - Close button
 - `countdown` - Countdown container (countdown type)
 
----
-
-## 🎯 Styling Examples
-
-### Basic Theme Application
-
-```typescript
-const styling = {
-  theme: "dark",
-  variant: "outlined",
-  tokens: {
-    colors: {
-      background: "#1a1a1a",
-      text: "#ffffff",
-      button: "#007bff",
-    },
-  },
-};
-```
-
-### Responsive Hero Design
-
-```typescript
-const heroStyling = {
-  slots: {
-    title: {
-      className: "font-bold text-center",
-      responsive: {
-        sm: { className: "text-3xl" },
-        md: { className: "text-4xl text-left" },
-        lg: { className: "text-6xl" },
-      },
-    },
-    button: {
-      className: "px-6 py-3 rounded-lg",
-      responsive: {
-        md: { className: "px-8 py-4 text-lg" },
-      },
-      states: {
-        hover: { className: "shadow-xl transform scale-105" },
-      },
-    },
-  },
-};
-```
-
-### Advanced Announcement Styling
-
-```typescript
-const announcementStyling = {
-  theme: "brand",
-  tokens: {
-    colors: {
-      background: "linear-gradient(90deg, #667eea 0%, #764ba2 100%)",
-      text: "#ffffff",
-    },
-    transitions: {
-      smooth: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    },
-  },
-  slots: {
-    root: {
-      style: {
-        background: "var(--colors-background)",
-        transition: "var(--transitions-smooth)",
-      },
-    },
-    announcementText: {
-      className: "font-semibold tracking-wide",
-      states: {
-        hover: { className: "text-yellow-200" },
-      },
-    },
-    closeButton: {
-      className: "opacity-70 hover:opacity-100 transition-opacity",
-    },
-  },
-};
-```
-
----
-
 ## 🔑 API Key Setup
 
 Before using the SDK, you need to generate an API key from your Fragment-Shopify app:
@@ -955,7 +489,7 @@ graph TD
 2. **Publishing**: Sections are published and available via API
 3. **Data Fetching**: Your app calls `fetchResource()` to get section data
 4. **Component Rendering**: Pass data to Hero/Announcement components
-5. **Styling Application**: Advanced styling system applies themes, responsive design, and interactions
+5. **Styling Application**: Advanced styling system applies design tokens, responsive design, and interactions
 6. **UI Display**: Components render beautiful, responsive, styled sections
 
 ---
@@ -989,8 +523,8 @@ const sections = await fetchResource({...});
 fragment-headless-sdk/
 ├── src/
 │   ├── components/          # React components
-│   │   ├── Announcement/   # Announcement component variants
-│   │   └── Hero/           # Hero component variants
+│   │   ├── Announcement/   # Announcement components
+│   │   └── Hero/           # Hero components
 │   ├── constants/          # Enums and constants
 │   ├── types/              # TypeScript interfaces
 │   │   └── styling.ts      # Advanced styling types
@@ -999,150 +533,16 @@ fragment-headless-sdk/
 └── dist/                   # Compiled output
 ```
 
----
-
-## 🔄 Migration Guide
+## 📚 Documentation
 
-### From v2.0 to v2.1
-
-**No Breaking Changes** - v2.1 is fully backward compatible!
-
-All existing Hero components continue to work exactly as before. The new Hero Resolvers system is completely opt-in.
-
-#### New Features Available (Optional)
-
-```typescript
-// v2.0 style (continues to work)
-const heroContent = {
-  title: "My Hero",
-  styling: {
-    tokens: {
-      colors: {
-        title: "#ffffff",
-        button: "#007bff",
-      },
-    },
-  },
-};
-
-// v2.1 enhanced style (new features)
-const heroContent = {
-  title: "My Hero",
-  styling: {
-    tokens: {
-      colors: {
-        title: "#ffffff",
-        button: "#007bff",
-      },
-      // NEW: Typography controls
-      typography: {
-        titleFont: "montserrat",
-        titleFontSize: "text-6xl",
-        titleLineHeight: "leading-tight",
-      },
-      // NEW: Layout controls
-      layout: {
-        position: "center",
-        contentWidth: "max-w-4xl",
-        height: "min-h-screen",
-      },
-    },
-  },
-};
-```
-
-### From v1.x to v2.0
-
-**No Breaking Changes** - v2.0 is fully backward compatible!
-
-#### Option 1: Keep Using v1.x Style (No Changes Required)
-
-```typescript
-// This continues to work exactly as before
-const content = {
-  title: "My Hero",
-  bgColor: "#ffffff",
-  textColor: "#333333",
-};
-```
-
-#### Option 2: Gradual Migration
-
-```typescript
-// Start using new styling alongside legacy
-const content = {
-  title: "My Hero",
-  styling: {
-    legacyTokens: {
-      bgColor: "#ffffff", // Keep existing tokens
-      textColor: "#333333",
-    },
-    tokens: {
-      colors: {
-        button: "#007bff", // Add new structured tokens
-      },
-    },
-  },
-};
-```
-
-#### Option 3: Full v2.0 Adoption
-
-```typescript
-// Embrace the full power of v2.0
-const content = {
-  title: "My Hero",
-  styling: {
-    theme: "dark",
-    variant: "gradient",
-    tokens: {
-      colors: {
-        background: "#1a1a1a",
-        text: "#ffffff",
-        button: "#007bff",
-      },
-    },
-    slots: {
-      title: {
-        className: "text-4xl font-bold",
-        responsive: {
-          md: { className: "text-6xl" },
-        },
-      },
-    },
-  },
-};
-```
-
----
-
-## 🤝 Contributing
-
-This package is designed to work specifically with the Fragment-Shopify app. When adding new section types:
-
-1. Add the resource type to `ResourceType` enum
-2. Create corresponding TypeScript interfaces
-3. Build React components for rendering
-4. Add styling slot interfaces for type safety
-5. Update this documentation
+- [CHANGELOG.md](./docs/CHANGELOG.md) - Release history and version notes
+- [STYLING.md](./docs/STYLING.md) - Advanced styling system documentation
+- [HERO-RESOLVERS.md](./docs/HERO-RESOLVERS.md) - Hero component customization guide
+- [MIGRATION.md](./docs/MIGRATION.md) - Version migration guides
+- [PUBLISHING.md](./docs/PUBLISHING.md) - NPM publishing guide
 
 ---
 
 ## 📝 License
 
 MIT License - See LICENSE file for details.
-
----
-
-## 🎉 What's Next?
-
-The v2.1 Hero Resolvers system and v2.0 styling foundation provide unlimited customization and scalability. Future enhancements may include:
-
-- Visual styling editor integration
-- Animation and transition presets
-- Advanced layout system for all components
-- Component composition utilities
-- Design system generator
-- Enhanced Announcement component resolvers
-
-**Ready to build beautiful, scalable headless experiences with advanced typography and layout controls!** 🚀

package/dist/styles/fragment-sdk.css

@@ -1,31 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@300;400;600;700&family=Lato:wght@300;400;700&family=Montserrat:wght@300;400;500;700&family=Inter:wght@300;400;500;700&family=Poppins:wght@300;400;600;700&family=Raleway:wght@300;400;500;700&family=Playfair+Display:wght@400;700&family=Merriweather:wght@300;400;700&family=Oswald:wght@300;400;500;700&display=swap");
-
-/* Custom animations for fragment-headless-sdk */
-@keyframes marquee {
-  0% {
-    transform: translateX(0%);
-  }
-  100% {
-    transform: translateX(-100%);
-  }
-}
-
-/* Utility classes for marquee animations */
-.animate-marquee {
-  animation: marquee 25s linear infinite;
-}
-
-/* Make hero/announcement prose links inherit the surrounding text color (v2.1+) */
-.prose {
-  --tw-prose-links: currentColor;
-  --tw-prose-links-hover: currentColor;
-}
-
-.prose :where(a):not(:where([class~="not-prose"] *)) {
-  color: currentColor;
-}
-
-.prose :where(a):not(:where([class~="not-prose"] *)):hover {
-  color: currentColor;
-  text-decoration: underline;
-}