@deneb-ui/create-template 2.0.60 → 2.0.62

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/create-template",
-  "version": "2.0.60",
+  "version": "2.0.62",
   "description": "Scaffold production-ready DENEB UI storefront templates for Next.js in seconds.",
   "bin": {
     "create-deneb-template": "bin/index.js",

package/template/README.md

@@ -79,6 +79,29 @@ When you run **`npm run lab`**, you can click directly on any element with a `da
 
 The root layout wraps your application with `<SiteDataProvider>`, which automatically connects to the Fivora backend (`api.catalogUrl`) on live sites and listens to live visual editing updates in the Lab.
 
+For product detail navigation in a static export, always use the stable exported
+page `/products/detail/?id=PRODUCT_ID`. Do not generate `/products/PRODUCT_ID`
+links for live catalog rows: products added after the build do not have a
+corresponding static directory and will 404. The package owns the URL parsing,
+live lookup, retries, and fallback states:
+
+```tsx
+// src/app/products/detail/page.tsx
+'use client';
+
+import { PlatformProductDetail } from '@deneb-ui/ui';
+
+export default function ProductDetailPage() {
+  return <PlatformProductDetail />;
+}
+```
+
+Use `platformProductDetailHref(product.id)` for card links. To preserve a
+template-specific visual design, pass `renderProduct={(product, context) =>
+<YourProductDetail product={product} index={context.productIndex} />}` or use
+the lower-level `usePlatformProductDetail()` hook. Always verify that the export
+contains `products/detail/index.html`.
+
 Import hooks from `@/lib/siteDataContext` or `@deneb-ui/ui`:
 
 ```tsx

package/template/fivora-template.json

@@ -440,7 +440,7 @@
             "label": "Product ID"
           },
           {
-            "key": "title",
+            "key": "name",
             "type": "text",
             "label": "Title",
             "required": true

package/template/package.json

@@ -18,7 +18,7 @@
     "next": "15.5.23",
     "react": "19.2.8",
     "react-dom": "19.2.8",
-    "@deneb-ui/ui": "^2.0.60"
+    "@deneb-ui/ui": "^2.0.62"
   },
   "devDependencies": {
     "@eslint/eslintrc": "3.3.6",
@@ -28,7 +28,7 @@
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.23",
     "typescript": "5.8.3",
-    "@deneb-ui/cli": "^2.0.60",
+    "@deneb-ui/cli": "^2.0.62",
     "tailwindcss": "^3.4.17",
     "postcss": "8.5.26",
     "autoprefixer": "^10.4.20"

package/template/src/app/globals.css

@@ -273,6 +273,37 @@ h3 {
   aspect-ratio: 16 / 10;
 }
 
+.product-section-header {
+  max-width: 44rem;
+  margin: 0 auto 2.5rem;
+  text-align: center;
+}
+
+.product-section-header > p {
+  margin: 0.75rem auto 0;
+  color: color-mix(in srgb, var(--page-text) 72%, transparent);
+}
+
+.product-detail-link {
+  display: inline-flex;
+  width: 100%;
+  min-height: 2.75rem;
+  align-items: center;
+  justify-content: center;
+  border-radius: 0.75rem;
+  background: var(--brand-color);
+  color: #ffffff;
+  font-size: 0.875rem;
+  font-weight: 800;
+  text-decoration: none;
+  transition: filter 160ms ease, transform 160ms ease;
+}
+
+.product-detail-link:hover {
+  filter: brightness(1.08);
+  transform: translateY(-1px);
+}
+
 .contact-grid {
   display: grid;
   grid-template-columns: 1fr 1.35fr;

package/template/src/app/page.tsx

@@ -4,6 +4,7 @@ import {
   contentList,
   contentObject,
   contentText,
+  platformProductDetailHref,
   useSiteData,
   useProducts,
 } from '@/lib/siteDataContext';
@@ -203,6 +204,64 @@ export default function HomePage() {
           }}
         </EditableList>
       </section>
+
+      <section
+        className="page-section"
+        data-design-section="home-products"
+      >
+        <div className="section-header product-section-header">
+          <EditableText
+            variant="h2"
+            size="3xl"
+            weight="bold"
+            align="center"
+            color="heading"
+            className="section-title"
+            data-preview-field-path="home.productsHeading"
+            defaultValue={contentText(home.productsHeading)}
+          />
+          <EditableText
+            variant="lead"
+            align="center"
+            color="muted"
+            data-preview-field-path="home.productsSummary"
+            defaultValue={contentText(home.productsSummary)}
+          />
+        </div>
+
+        <EditableList
+          data-preview-list-path="products"
+          items={products}
+          className="card-grid"
+          itemAs={false}
+        >
+          {(rawProduct, index, itemPath) => {
+            const product = contentObject(rawProduct);
+            const productId =
+              typeof product.id === 'string' || typeof product.id === 'number'
+                ? product.id
+                : null;
+
+            return (
+              <EditableProductCard
+                key={productId ?? index}
+                itemPath={itemPath}
+                product={product}
+                currency={contentText(product.currency) || 'LKR'}
+                actionSlot={
+                  <a
+                    href={platformProductDetailHref(productId)}
+                    className="product-detail-link"
+                    data-preview-static="Open the stable live product detail page"
+                  >
+                    View details
+                  </a>
+                }
+              />
+            );
+          }}
+        </EditableList>
+      </section>
     </div>
   );
 }

package/template/src/app/products/detail/page.tsx

@@ -0,0 +1,7 @@
+'use client';
+
+import { PlatformProductDetail } from '@deneb-ui/ui';
+
+export default function ProductDetailPage() {
+  return <PlatformProductDetail backHref="/" />;
+}

package/template/src/data/site-data.json

@@ -167,7 +167,7 @@
     "products": [
       {
         "id": "prod-1",
-        "title": "Minimalist Ceramic Cup",
+        "name": "Minimalist Ceramic Cup",
         "description": "Handcrafted matte ceramic cup for your daily espresso or pour-over brew.",
         "price": 3200,
         "compareAtPrice": 4000,
@@ -179,7 +179,7 @@
       },
       {
         "id": "prod-2",
-        "title": "Artisan Linen Apron",
+        "name": "Artisan Linen Apron",
         "description": "Durable pure washed linen apron with deep front utility pockets.",
         "price": 5400,
         "compareAtPrice": 6200,
@@ -191,7 +191,7 @@
       },
       {
         "id": "prod-3",
-        "title": "Botanical Room Spray",
+        "name": "Botanical Room Spray",
         "description": "Natural essential oil room mist infused with wild lavender and cedarwood.",
         "price": 2800,
         "compareAtPrice": null,

package/template/src/lib/siteDataContext.tsx

@@ -17,6 +17,7 @@ export {
   PREVIEW_FOCUS_MESSAGE,
   LEGACY_PREVIEW_FOCUS_MESSAGE,
   PREVIEW_FIELD_ATTRIBUTE,
+  platformProductDetailHref,
 } from '@deneb-ui/ui';
 
 export type {