@deneb-ui/create-template 2.0.38 → 2.0.39

package/package.json

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

package/template/fivora-template.json

@@ -4,7 +4,12 @@
   "visualEditing": {
     "contractVersion": 1,
     "mode": "strict",
-    "controlOnlyPaths": ["services[*].id"]
+    "controlOnlyPaths": [
+      "services[*].id",
+      "products[*].id",
+      "products[*].currency",
+      "about.collageImages[*].id"
+    ]
   },
   "siteDataFile": "src/data/site-data.json",
   "outputDirectory": "out",
@@ -12,9 +17,22 @@
   "buildCommand": "npm run build",
   "basePathEnvVar": "NEXT_PUBLIC_SITE_BASE_PATH",
   "pages": [
-    { "id": "home", "label": "Home", "route": "/", "required": true },
-    { "id": "about_us", "label": "About Us", "route": "/about_us" },
-    { "id": "services", "label": "Services", "route": "/services" },
+    {
+      "id": "home",
+      "label": "Home",
+      "route": "/",
+      "required": true
+    },
+    {
+      "id": "about_us",
+      "label": "About Us",
+      "route": "/about_us"
+    },
+    {
+      "id": "services",
+      "label": "Services",
+      "route": "/services"
+    },
     {
       "id": "contact",
       "label": "Contact",
@@ -59,14 +77,38 @@
             "type": "object",
             "label": "Navigation labels",
             "fields": [
-              { "key": "home", "type": "text", "label": "Home label" },
-              { "key": "about_us", "type": "text", "label": "About label" },
-              { "key": "services", "type": "text", "label": "Services label" },
-              { "key": "contact", "type": "text", "label": "Contact label" }
+              {
+                "key": "home",
+                "type": "text",
+                "label": "Home label"
+              },
+              {
+                "key": "about_us",
+                "type": "text",
+                "label": "About label"
+              },
+              {
+                "key": "services",
+                "type": "text",
+                "label": "Services label"
+              },
+              {
+                "key": "contact",
+                "type": "text",
+                "label": "Contact label"
+              }
             ]
           },
-          { "key": "footerHeading", "type": "text", "label": "Footer heading" },
-          { "key": "copyright", "type": "text", "label": "Copyright" }
+          {
+            "key": "footerHeading",
+            "type": "text",
+            "label": "Footer heading"
+          },
+          {
+            "key": "copyright",
+            "type": "text",
+            "label": "Copyright"
+          }
         ]
       },
       {
@@ -76,14 +118,22 @@
         "type": "object",
         "label": "Home Page",
         "fields": [
-          { "key": "heroEyebrow", "type": "text", "label": "Hero eyebrow" },
+          {
+            "key": "heroEyebrow",
+            "type": "text",
+            "label": "Hero eyebrow"
+          },
           {
             "key": "heroTitle",
             "type": "text",
             "label": "Hero title",
             "required": true
           },
-          { "key": "heroSummary", "type": "textarea", "label": "Hero summary" },
+          {
+            "key": "heroSummary",
+            "type": "textarea",
+            "label": "Hero summary"
+          },
           {
             "key": "bannerImageUrl",
             "type": "image",
@@ -129,7 +179,11 @@
                 "label": "Title",
                 "required": true
               },
-              { "key": "body", "type": "textarea", "label": "Description" }
+              {
+                "key": "body",
+                "type": "textarea",
+                "label": "Description"
+              }
             ]
           },
           {
@@ -140,9 +194,27 @@
             "minItems": 0,
             "maxItems": 12,
             "fields": [
-              { "key": "buttonLabel", "type": "text", "label": "Button Label" },
-              { "key": "buttonUrl", "type": "url", "label": "Button Url" }
+              {
+                "key": "buttonLabel",
+                "type": "text",
+                "label": "Button Label"
+              },
+              {
+                "key": "buttonUrl",
+                "type": "url",
+                "label": "Button Url"
+              }
             ]
+          },
+          {
+            "key": "productsHeading",
+            "type": "text",
+            "label": "Featured Products Heading"
+          },
+          {
+            "key": "productsSummary",
+            "type": "textarea",
+            "label": "Featured Products Summary"
           }
         ]
       },
@@ -159,7 +231,11 @@
             "label": "Heading",
             "required": true
           },
-          { "key": "body", "type": "textarea", "label": "About text" },
+          {
+            "key": "body",
+            "type": "textarea",
+            "label": "About text"
+          },
           {
             "key": "imageUrl",
             "type": "image",
@@ -167,10 +243,26 @@
             "recommendedWidth": 1200,
             "recommendedHeight": 900
           },
-          { "key": "collageHeading", "type": "text", "label": "Collage Heading" },
-          { "key": "collageDescription", "type": "textarea", "label": "Collage Description" },
-          { "key": "historyHeading", "type": "text", "label": "History Heading" },
-          { "key": "history", "type": "textarea", "label": "History" },
+          {
+            "key": "collageHeading",
+            "type": "text",
+            "label": "Collage Heading"
+          },
+          {
+            "key": "collageDescription",
+            "type": "textarea",
+            "label": "Collage Description"
+          },
+          {
+            "key": "historyHeading",
+            "type": "text",
+            "label": "History Heading"
+          },
+          {
+            "key": "history",
+            "type": "textarea",
+            "label": "History"
+          },
           {
             "key": "collageImages",
             "type": "list",
@@ -179,8 +271,16 @@
             "minItems": 0,
             "maxItems": 12,
             "fields": [
-              { "key": "image", "type": "image", "label": "Image" },
-              { "key": "caption", "type": "text", "label": "Caption" }
+              {
+                "key": "image",
+                "type": "image",
+                "label": "Image"
+              },
+              {
+                "key": "caption",
+                "type": "text",
+                "label": "Caption"
+              }
             ]
           }
         ]
@@ -198,7 +298,11 @@
             "label": "Heading",
             "required": true
           },
-          { "key": "intro", "type": "textarea", "label": "Introduction" }
+          {
+            "key": "intro",
+            "type": "textarea",
+            "label": "Introduction"
+          }
         ]
       },
       {
@@ -210,9 +314,22 @@
         "minItems": 0,
         "maxItems": 12,
         "fields": [
-          { "key": "id", "type": "text", "label": "System ID" },
-          { "key": "name", "type": "text", "label": "Name", "required": true },
-          { "key": "description", "type": "textarea", "label": "Description" },
+          {
+            "key": "id",
+            "type": "text",
+            "label": "System ID"
+          },
+          {
+            "key": "name",
+            "type": "text",
+            "label": "Name",
+            "required": true
+          },
+          {
+            "key": "description",
+            "type": "textarea",
+            "label": "Description"
+          },
           {
             "key": "imageUrl",
             "type": "image",
@@ -224,7 +341,10 @@
             "key": "features",
             "type": "list",
             "label": "Included features",
-            "itemField": { "type": "text", "label": "Feature" }
+            "itemField": {
+              "type": "text",
+              "label": "Feature"
+            }
           }
         ]
       },
@@ -241,14 +361,103 @@
             "label": "Heading",
             "required": true
           },
-          { "key": "intro", "type": "textarea", "label": "Introduction" },
-          { "key": "phone", "type": "tel", "label": "Phone" },
-          { "key": "email", "type": "email", "label": "Email" },
-          { "key": "address", "type": "textarea", "label": "Address" },
-          { "key": "directionsLabel", "type": "text", "label": "Directions Label" },
-          { "key": "directionsUrl", "type": "url", "label": "Directions Url" },
-          { "key": "formTitle", "type": "text", "label": "Form heading" },
-          { "key": "submitLabel", "type": "text", "label": "Submit button" }
+          {
+            "key": "intro",
+            "type": "textarea",
+            "label": "Introduction"
+          },
+          {
+            "key": "phone",
+            "type": "tel",
+            "label": "Phone"
+          },
+          {
+            "key": "email",
+            "type": "email",
+            "label": "Email"
+          },
+          {
+            "key": "address",
+            "type": "textarea",
+            "label": "Address"
+          },
+          {
+            "key": "directionsLabel",
+            "type": "text",
+            "label": "Directions Label"
+          },
+          {
+            "key": "directionsUrl",
+            "type": "url",
+            "label": "Directions Url"
+          },
+          {
+            "key": "formTitle",
+            "type": "text",
+            "label": "Form heading"
+          },
+          {
+            "key": "submitLabel",
+            "type": "text",
+            "label": "Submit button"
+          }
+        ]
+      },
+      {
+        "id": "products",
+        "path": "products",
+        "type": "list",
+        "label": "Products",
+        "minItems": 0,
+        "maxItems": 24,
+        "fields": [
+          {
+            "key": "id",
+            "type": "text",
+            "label": "Product ID"
+          },
+          {
+            "key": "title",
+            "type": "text",
+            "label": "Title",
+            "required": true
+          },
+          {
+            "key": "description",
+            "type": "textarea",
+            "label": "Description"
+          },
+          {
+            "key": "price",
+            "type": "number",
+            "label": "Price",
+            "required": true
+          },
+          {
+            "key": "compareAtPrice",
+            "type": "number",
+            "label": "Compare Price"
+          },
+          {
+            "key": "currency",
+            "type": "text",
+            "label": "Currency"
+          },
+          {
+            "key": "category",
+            "type": "text",
+            "label": "Category"
+          },
+          {
+            "key": "imageUrl",
+            "type": "image",
+            "label": "Product Image"
+          },
+          {
+            "key": "badge",
+            "type": "text",
+            "label": "Badge"
+          }
         ]
       }
     ]

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.38"
+    "@deneb-ui/ui": "^2.0.39"
   },
   "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.38",
+    "@deneb-ui/cli": "^2.0.39",
     "tailwindcss": "^3.4.17",
     "postcss": "8.5.26",
     "autoprefixer": "^10.4.20"

package/template/src/app/page.tsx

@@ -5,12 +5,14 @@ import {
   contentObject,
   contentText,
   useSiteData,
+  useProducts,
 } from '@/lib/siteDataContext';
 import { pageRoute, withBasePath } from '@/lib/utils';
 import {
   EditableText,
   EditableList,
   EditableCard,
+  EditableProductCard,
   ListActionCta,
 } from '@deneb-ui/ui';
 
@@ -24,6 +26,7 @@ export default function HomePage() {
   const content = contentObject(siteData.content);
   const home = contentObject(content.home);
   const features = contentList(home.features);
+  const products = useProducts();
   const demoCta = contentObject(
     (contentList(home.demoPreOrderCta)[0] as Record<string, unknown> | undefined) ?? {}
   );

package/template/src/app/services/page.tsx

@@ -1,49 +1,43 @@
 'use client';
 
-import { contentList, contentObject, contentText, useSiteData } from '@/lib/siteDataContext';
-import { withBasePath } from '@/lib/utils';
+import { contentObject, contentText, useServices, useSiteData } from '@/lib/siteDataContext';
+import { EditableServiceCard, EditableText } from '@deneb-ui/ui';
 
 export default function ServicesPage() {
   const siteData = useSiteData();
   const content = contentObject(siteData.content);
   const page = contentObject(content.servicesPage);
-  const services = contentList(content.services);
+  const services = useServices();
 
   return (
     <div data-preview-page-key="services">
       <section className="page-section page-heading" data-design-section="services-heading">
-        <h1 data-preview-field-path="servicesPage.heading">{contentText(page.heading)}</h1>
-        <p data-preview-field-path="servicesPage.intro">{contentText(page.intro)}</p>
+        <EditableText
+          as="h1"
+          variant="h1"
+          size="4xl"
+          weight="bold"
+          color="heading"
+          data-preview-field-path="servicesPage.heading"
+          defaultValue={contentText(page.heading)}
+        />
+        <EditableText
+          as="p"
+          variant="lead"
+          color="muted"
+          data-preview-field-path="servicesPage.intro"
+          defaultValue={contentText(page.intro)}
+        />
       </section>
       <section className="page-section alt" data-design-section="services-list">
         <div className="card-grid" data-preview-list-path="services">
-          {services.map((rawService, index) => {
-            const service = contentObject(rawService);
-            const features = contentList(service.features);
-            return (
-              <article className="card" key={contentText(service.id) || index} data-preview-item-path={`services[${index}]`}>
-                <img
-                  className="card-image"
-                  src={withBasePath(contentText(service.imageUrl) || '/placeholder.svg')}
-                  alt=""
-                  data-preview-field-path={`services[${index}].imageUrl`}
-                />
-                <h2 data-preview-field-path={`services[${index}].name`}>{contentText(service.name)}</h2>
-                <p data-preview-field-path={`services[${index}].description`}>{contentText(service.description)}</p>
-                <ul data-preview-list-path={`services[${index}].features`}>
-                  {features.map((feature, featureIndex) => (
-                    <li
-                      key={featureIndex}
-                      data-preview-item-path={`services[${index}].features[${featureIndex}]`}
-                      data-preview-field-path={`services[${index}].features[${featureIndex}]`}
-                    >
-                      {contentText(feature)}
-                    </li>
-                  ))}
-                </ul>
-              </article>
-            );
-          })}
+          {services.map((service, index) => (
+            <EditableServiceCard
+              key={contentText(service.id) || index}
+              itemPath={`services[${index}]`}
+              service={service}
+            />
+          ))}
         </div>
       </section>
     </div>

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

@@ -1,5 +1,10 @@
 {
-  "project": { "id": "starter-demo", "title": "Fivora Starter Demo", "status": "APPROVED" },
+  "project": {
+    "id": "starter-demo",
+    "slug": "starter-demo",
+    "title": "Fivora Starter Demo",
+    "status": "APPROVED"
+  },
   "merchant": {
     "businessName": "Fivora Store",
     "description": "A modern high-converting digital storefront built on the Fivora platform."
@@ -9,7 +14,12 @@
     "name": "Fivora Starter",
     "engine": "NEXT_STATIC_EXPORT",
     "structure": {
-      "pages": ["home", "about_us", "services", "contact"],
+      "pages": [
+        "home",
+        "about_us",
+        "services",
+        "contact"
+      ],
       "theme": {
         "primaryColor": "#016a7e",
         "secondaryColor": "#0a1931",
@@ -25,7 +35,12 @@
     }
   },
   "requirements": {
-    "requiredPages": ["home", "about_us", "services", "contact"],
+    "requiredPages": [
+      "home",
+      "about_us",
+      "services",
+      "contact"
+    ],
     "requiredFeatures": []
   },
   "content": {
@@ -60,11 +75,27 @@
       "introBody": "Every editable value comes directly from Fivora site data with auto-balancing layouts, responsive typography, and strict contract validation out of the box.",
       "featuresHeading": "Why build with the Fivora Authoring Kit?",
       "features": [
-        { "title": "Auto-Balancing Layouts", "body": "Cards, grids, and containers automatically balance and fill space seamlessly across all screen sizes." },
-        { "title": "Strict Visual Editing", "body": "Direct bindings enable merchants to click, edit, and preview changes without breaking template styles." },
-        { "title": "1-Click Clean Packaging", "body": "Built-in zip command strips heavy caches, node_modules, and git files so uploads pass instantly." }
+        {
+          "title": "Auto-Balancing Layouts",
+          "body": "Cards, grids, and containers automatically balance and fill space seamlessly across all screen sizes."
+        },
+        {
+          "title": "Strict Visual Editing",
+          "body": "Direct bindings enable merchants to click, edit, and preview changes without breaking template styles."
+        },
+        {
+          "title": "1-Click Clean Packaging",
+          "body": "Built-in zip command strips heavy caches, node_modules, and git files so uploads pass instantly."
+        }
+      ],
+      "demoPreOrderCta": [
+        {
+          "buttonLabel": "Book a Demo",
+          "buttonUrl": "https://wa.me/94771234567"
+        }
       ],
-      "demoPreOrderCta": [{ "buttonLabel": "Book a Demo", "buttonUrl": "https://wa.me/94771234567" }]
+      "productsHeading": "Featured Store Products",
+      "productsSummary": "Live inventory and pricing updated in real time from your Fivora Shop Owner panel."
     },
     "about": {
       "heading": "Built for the next generation of online storefronts",
@@ -75,9 +106,21 @@
       "historyHeading": "Where we started",
       "history": "We began as a small team helping local businesses move online. Today our templates power visual editing labs, strict Fivora contracts, and one-click packaging for developers worldwide.",
       "collageImages": [
-        { "id": "studio", "image": "/placeholder.svg", "caption": "Design studio" },
-        { "id": "build", "image": "/placeholder.svg", "caption": "Build & test" },
-        { "id": "ship", "image": "/placeholder.svg", "caption": "Ship to Fivora" }
+        {
+          "id": "studio",
+          "image": "/placeholder.svg",
+          "caption": "Design studio"
+        },
+        {
+          "id": "build",
+          "image": "/placeholder.svg",
+          "caption": "Build & test"
+        },
+        {
+          "id": "ship",
+          "image": "/placeholder.svg",
+          "caption": "Ship to Fivora"
+        }
       ]
     },
     "servicesPage": {
@@ -90,14 +133,22 @@
         "name": "Visual Editing Lab",
         "description": "Simulate how merchants customize your template in real time with the built-in local development lab.",
         "imageUrl": "/placeholder.svg",
-        "features": ["Zero-server static preview", "Field focus bridge", "Instant feedback"]
+        "features": [
+          "Zero-server static preview",
+          "Field focus bridge",
+          "Instant feedback"
+        ]
       },
       {
         "id": "clean-packaging",
         "name": "Automated Packager",
         "description": "Automatically produce clean, upload-ready ZIP archives excluding junk and cache files.",
         "imageUrl": "/placeholder.svg",
-        "features": ["Excludes node_modules", "Excludes .next and .git", "100% preflight compliant"]
+        "features": [
+          "Excludes node_modules",
+          "Excludes .next and .git",
+          "100% preflight compliant"
+        ]
       }
     ],
     "contact": {
@@ -112,8 +163,60 @@
       "submitLabel": "Send Message",
       "directMessageText": "Send us a direct message",
       "whatsapp": "+94 77 123 4567"
-    }
+    },
+    "products": [
+      {
+        "id": "prod-1",
+        "title": "Minimalist Ceramic Cup",
+        "description": "Handcrafted matte ceramic cup for your daily espresso or pour-over brew.",
+        "price": 3200,
+        "compareAtPrice": 4000,
+        "currency": "LKR",
+        "imageUrl": "/placeholder.svg",
+        "category": "Ceramics",
+        "badge": "Bestseller",
+        "isAvailable": true
+      },
+      {
+        "id": "prod-2",
+        "title": "Artisan Linen Apron",
+        "description": "Durable pure washed linen apron with deep front utility pockets.",
+        "price": 5400,
+        "compareAtPrice": 6200,
+        "currency": "LKR",
+        "imageUrl": "/placeholder.svg",
+        "category": "Kitchen",
+        "badge": "New",
+        "isAvailable": true
+      },
+      {
+        "id": "prod-3",
+        "title": "Botanical Room Spray",
+        "description": "Natural essential oil room mist infused with wild lavender and cedarwood.",
+        "price": 2800,
+        "compareAtPrice": null,
+        "currency": "LKR",
+        "imageUrl": "/placeholder.svg",
+        "category": "Aromatherapy",
+        "badge": null,
+        "isAvailable": true
+      }
+    ]
   },
   "media": {},
-  "seo": null
+  "seo": null,
+  "siteInstance": {
+    "id": "starter-demo-instance",
+    "slug": "starter-demo",
+    "domain": "starter-demo.fivora.site",
+    "subdomain": "starter-demo",
+    "customDomain": null,
+    "liveUrl": "https://starter-demo.fivora.site"
+  },
+  "api": {
+    "baseUrl": "https://api.fivora.site",
+    "catalogUrl": "https://api.fivora.site/site-catalog/starter-demo/live-data",
+    "contactUrl": "https://api.fivora.site/site-contact",
+    "analyticsUrl": "https://api.fivora.site/site-analytics/page-view"
+  }
 }

package/template/src/lib/siteDataContext.tsx

@@ -3,6 +3,10 @@
 export {
   SiteDataProvider,
   useSiteData,
+  useProducts,
+  useServices,
+  useSiteCatalog,
+  useSiteApi,
   contentText,
   contentObject,
   contentList,
@@ -15,4 +19,12 @@ export {
   PREVIEW_FIELD_ATTRIBUTE,
 } from '@deneb-ui/ui';
 
-export type { SiteData, SiteDataProviderProps } from '@deneb-ui/ui';
+export type {
+  SiteData,
+  SiteDataProviderProps,
+  SiteDataApiConfig,
+  SiteDataProject,
+  SiteInstanceData,
+  ProductItem,
+  ServiceItem,
+} from '@deneb-ui/ui';