@deneb-ui/ui 2.0.48 → 2.0.50

package/README.md

@@ -156,8 +156,12 @@ export default function Page() {
 ### 7. Runtime State & Theming Primitives
 | Component / Hook | Module Path | Purpose |
 | :--- | :--- | :--- |
-| `SiteDataProvider` | `SiteDataProvider` | Real-time `BroadcastChannel` & `postMessage` state synchronizer |
-| `useSiteData` | `SiteDataProvider` | React hook to access live synchronized `siteData` |
+| `SiteDataProvider` / `DenebDataProvider` | `SiteDataProvider` | Real-time backend catalog fetcher & `postMessage` preview state synchronizer |
+| `useProducts` | `SiteDataProvider` | React hook to access live synchronized products list (`content.products`) |
+| `useServices` | `SiteDataProvider` | React hook to access live synchronized services list (`content.services`) |
+| `useSiteCatalog` | `SiteDataProvider` | Returns `{ products, services, project, siteInstance, api }` in one call |
+| `useSiteApi` | `SiteDataProvider` | Returns official Fivora backend endpoints (`catalogUrl`, `contactUrl`, `analyticsUrl`) |
+| `useSiteData` / `useDenebData` | `SiteDataProvider` | React hook to access full live synchronized `siteData` |
 | `ThemeStyles` | `ThemeStyles` | Dynamic CSS variable injector for colors, fonts, and radii |
 | `ResponsiveBaseStyles`| `ResponsiveBaseStyles` | Universal fluid typography & responsive baseline styles |
 | `DenebComponentStyles`| `DenebComponentStyles` | Scoped component style definitions |
@@ -165,6 +169,94 @@ export default function Page() {
 | `useDenebFonts` | `fonts/useDenebFonts` | Hook for checking active font definitions |
 | `CartProvider` / `useCart`| `cart/useCart` | Global cart state management with persistent storage |
 
+---
+
+## Data Fetching & Backend Integration Hooks
+
+### 1. `useProducts(fallback?: ProductItem[])`
+Retrieves the live products list from the site data. Automatically resolves top-level `content.products`, nested `content.home.products`, and live backend rehydration updates from `api.catalogUrl`.
+
+```tsx
+import { useProducts, ProductGrid } from '@deneb-ui/ui';
+
+export default function CatalogSection() {
+  const products = useProducts();
+
+  return (
+    <ProductGrid
+      title="Featured Collection"
+      subtitle="Handpicked Styles"
+      products={products}
+      categories={['All', 'Accessories', 'Apparel']}
+      cardVariant="modern-glass" // 'modern-glass' | 'classic' | 'minimal' | 'horizontal'
+      columns={{ mobile: 1, tablet: 2, desktop: 3 }}
+    />
+  );
+}
+```
+
+### 2. `useSiteApi()`
+Returns the official backend API configuration object (`SiteDataApiConfig`) defined in `site-data.json`. Use this hook whenever you need to connect custom forms or direct API calls to the backend:
+
+```tsx
+import { useSiteApi } from '@deneb-ui/ui';
+
+export default function ApiDemo() {
+  const api = useSiteApi();
+
+  // api?.baseUrl      -> "https://api.fivora.site"
+  // api?.catalogUrl   -> "https://api.fivora.site/site-catalog/:slug/live-data"
+  // api?.contactUrl   -> "https://api.fivora.site/site-contact"
+  // api?.analyticsUrl -> "https://api.fivora.site/site-analytics/page-view"
+  
+  return null;
+}
+```
+
+### 3. `useSiteCatalog()`
+Convenience hook that bundles catalog metadata and live status together:
+
+```tsx
+import { useSiteCatalog } from '@deneb-ui/ui';
+
+export default function CatalogOverview() {
+  const { products, services, project, siteInstance, api } = useSiteCatalog();
+
+  return (
+    <div>
+      <h3>{project?.title}</h3>
+      <p>Active live products: {products.length}</p>
+      <p>Active live services: {services.length}</p>
+    </div>
+  );
+}
+```
+
+### 4. `useServices(fallback?: ServiceItem[])`
+Retrieves the live services list from `content.services` or `content.home.services`:
+
+```tsx
+import { useServices, ServiceCard } from '@deneb-ui/ui';
+
+export default function ServicesList() {
+  const services = useServices();
+
+  return (
+    <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+      {services.map((service, index) => (
+        <ServiceCard
+          key={service.id || index}
+          itemPath={`services[${index}]`}
+          service={service}
+        />
+      ))}
+    </div>
+  );
+}
+```
+
+---
+
 ## Component Guides & API Reference
 
 ### 1. `GoogleFeedback` (`EditableGoogleFeedback`)

package/dist/EditableProductGrid.d.ts

@@ -19,11 +19,12 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
      */
     subtitle?: string;
     /**
-     * Array of product items.
+     * Array of product items. If omitted or empty, automatically pulls live products using useProducts().
      */
-    products: ProductItem[];
+    products?: ProductItem[];
     /**
      * Optional category filter tabs (e.g. ['All', 'Sneakers', 'Performance', 'Lifestyle']).
+     * If omitted, automatically derived from product categories.
      */
     categories?: string[];
     /**
@@ -52,9 +53,9 @@ export interface EditableProductGridProps extends React.HTMLAttributes<HTMLEleme
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
- * and built-in Quick View modal triggers.
+ * automatic useProducts() fallback rehydration, and built-in Quick View modal triggers.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-export declare function EditableProductGrid({ sectionPath, listPath, title, subtitle, products, categories, cardVariant, columns, onQuickView, cardPrefix, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
+export declare function EditableProductGrid({ sectionPath, listPath, title, subtitle, products: userProducts, categories, cardVariant, columns, onQuickView, cardPrefix, className, style, ...props }: EditableProductGridProps): React.JSX.Element;
 export declare const ProductGrid: typeof EditableProductGrid;

package/dist/EditableProductGrid.js

@@ -5,14 +5,26 @@ exports.EditableProductGrid = EditableProductGrid;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const EditableProductCard_1 = require("./EditableProductCard");
+const SiteDataProvider_1 = require("./SiteDataProvider");
 /**
  * EditableProductGrid is an elite, fully responsive e-commerce showcase grid
  * with interactive category filtering, live Fivora visual editing synchronization,
- * and built-in Quick View modal triggers.
+ * automatic useProducts() fallback rehydration, and built-in Quick View modal triggers.
  *
  * Created by Chamika Gayashan & Induranga Kawishwara
  */
-function EditableProductGrid({ sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products = [], categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', className = '', style, ...props }) {
+function EditableProductGrid({ sectionPath = 'home', listPath = 'products', title = 'Featured Collection', subtitle = 'Just Dropped', products: userProducts, categories = ['All'], cardVariant = 'modern-glass', columns = { mobile: 1, tablet: 2, desktop: 4 }, onQuickView, cardPrefix = 'product', className = '', style, ...props }) {
+    const liveProducts = (0, SiteDataProvider_1.useProducts)();
+    const products = userProducts && userProducts.length > 0 ? userProducts : liveProducts;
+    const resolvedCategories = (0, react_1.useMemo)(() => {
+        if (categories && categories.length > 1) {
+            return categories;
+        }
+        const distinct = Array.from(new Set(products
+            .map((p) => p.category)
+            .filter((cat) => typeof cat === 'string' && cat.trim().length > 0)));
+        return distinct.length > 0 ? ['All', ...distinct] : categories;
+    }, [categories, products]);
     const [activeCategory, setActiveCategory] = (0, react_1.useState)(categories[0] || 'All');
     const filteredProducts = (0, react_1.useMemo)(() => {
         if (!activeCategory || activeCategory.toLowerCase() === 'all') {
@@ -33,7 +45,7 @@ function EditableProductGrid({ sectionPath = 'home', listPath = 'products', titl
         const dClass = d === 3 ? 'lg:grid-cols-3' : d === 2 ? 'lg:grid-cols-2' : 'lg:grid-cols-4';
         return `${mClass} ${tClass} ${dClass}`;
     }, [columns]);
-    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: title })] }), categories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: categories.map((cat) => {
+    return ((0, jsx_runtime_1.jsxs)("section", { "data-preview-page-key": sectionPath, className: `editable-product-grid max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16 ${className}`.trim(), style: style, ...props, children: [(0, jsx_runtime_1.jsxs)("div", { className: "flex flex-col md:flex-row md:items-end justify-between mb-10 gap-6", children: [(0, jsx_runtime_1.jsxs)("div", { children: [subtitle && ((0, jsx_runtime_1.jsx)("span", { "data-preview-field-path": `${sectionPath}.gridSubtitle`, className: "text-xs font-black tracking-widest uppercase text-lime-400 block mb-2", children: subtitle })), (0, jsx_runtime_1.jsx)("h2", { "data-preview-field-path": `${sectionPath}.gridTitle`, className: "text-3xl sm:text-4xl font-extrabold tracking-tight text-white leading-tight", children: title })] }), resolvedCategories.length > 1 && ((0, jsx_runtime_1.jsx)("div", { className: "flex flex-wrap items-center gap-2", children: resolvedCategories.map((cat) => {
                             const isActive = activeCategory.toLowerCase() === cat.toLowerCase();
                             return ((0, jsx_runtime_1.jsx)("button", { type: "button", onClick: () => setActiveCategory(cat), className: `px-4 py-2 rounded-xl text-xs font-bold transition-all duration-200 ${isActive
                                     ? 'bg-white text-slate-950 shadow-md scale-102 font-extrabold'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/ui",
-  "version": "2.0.48",
+  "version": "2.0.50",
   "description": "Visual-first React component library for editable commerce storefronts. Built for Next.js and Fivora.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -49,7 +49,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@deneb-ui/core": "^2.0.48"
+    "@deneb-ui/core": "^2.0.50"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",