@deneb-ui/create-template 2.0.0 → 2.0.3

package/README.md

@@ -1,36 +1,47 @@
-# @fivora/create-template
+# DENEB
 
-Scaffold a modern, pre-validated **Fivora** template in seconds (Vite-style initializer).
+### The official template initializer for DENEB UI.
 
-[![npm version](https://img.shields.io/npm/v/@fivora/create-template.svg)](https://www.npmjs.com/package/@fivora/create-template)
+> **DENEB UI — Build beautiful interfaces, effortlessly.**  
+> The premier visual-first React component ecosystem.  
+> Created by **Chamika Gayashan & Induranga Kawishwara**.
+
+[![Framework: DENEB UI](https://img.shields.io/badge/Framework-DENEB_UI_v2.0-blue.svg)](https://github.com/chamikathereal)
 [![License: MIT](https://img.shields.io/badge/License-MIT-teal.svg)](https://opensource.org/licenses/MIT)
 
 ---
 
 ## Quick Start
 
-Create a new Fivora template with a single command:
+Scaffold a complete storefront in seconds with a single command:
 
 ```bash
 # Using npm
-npm create @fivora/template my-store
+npm create @deneb-ui/template my-store
 
 # Or using npx
-npx @fivora/create-template my-store
+npx @deneb-ui/create-template my-store
+
+# Or using yarn / pnpm
+yarn create @deneb-ui/template my-store
+pnpm create @deneb-ui/template my-store
+```
+
+If you don't provide a project name, the interactive wizard will prompt you:
+
+```text
+⚡ Welcome to DENEB UI Template Creator!
 
-# Or yarn / pnpm
-yarn create @fivora/template my-store
-pnpm create @fivora/template my-store
+? What is your template name? (e.g. my-store):
 ```
 
 Then start developing:
 
 ```bash
 cd my-store
-npm install
-npm run dev       # Start Next.js local development
-npm run lab       # Test in Fivora Visual Editing Lab
-npm run validate  # Run Fivora preflight compliance checks
+npm run dev       # Start Next.js + Tailwind local development
+npm run lab       # Launch Visual Editing Lab
+npm run validate  # Run contract compliance checks
 npm run zip       # Create upload-ready clean ZIP
 ```
 
@@ -39,27 +50,30 @@ npm run zip       # Create upload-ready clean ZIP
 ## What is Included?
 
 Each generated template comes pre-configured with:
-- ⚡ **Next.js App Router**: Modern React 19 / Next.js with static HTML export support
-- 🎨 **`@fivora/editable-components`**: Pre-configured visual editing primitives and theme palettes
-- 🛠️ **`@fivora/cli`**: Built-in developer tools (`lab`, `validate`, `zip`)
-- 📋 **`fivora-template.json`**: Strict Version 2 template manifest
-- 📦 **`src/data/site-data.json`**: Merchant defaults and editable content structure
+- ⚡ **Next.js 15 App Router**: Modern React 19 / Next.js with static HTML export support
+- 🎨 **Tailwind CSS**: Pre-configured `tailwind.config.ts`, `postcss.config.mjs`, and Tailwind utility classes
+- 💎 **`@deneb-ui/ui`**: Pre-installed DENEB UI visual-first component ecosystem
+- 🛠️ **`@deneb-ui/cli`**: Developer toolchain (`deneb lab`, `deneb validate`, `deneb zip`, `deneb add`)
+- 📋 **Manifest & Schema**: Pre-configured storefront template contract & visual editing bindings
+- 📦 **`src/data/site-data.json`**: Single source of truth for branding, nav labels, and editable content
+- 📖 **In-App Developer Guide**: Built-in developer guidance right on the homepage (`src/app/page.tsx`)
 
 ---
 
 ## Command Options
 
 ```bash
-npx @fivora/create-template <project-name> [options]
+npx @deneb-ui/create-template <project-name> [options]
 ```
 
 | Option | Description |
 | :--- | :--- |
-| `<project-name>` | Target directory name (e.g. `my-fashion-store`) |
+| `<project-name>` | Target directory name (e.g. `my-store`) |
 | `--skip-install` | Do not run `npm install` automatically after scaffolding |
 
 ---
 
-## License
+## 👤 Author & Credits
 
-MIT © [Fivora](https://fivora.com)
+Created and architected by **Chamika Gayashan & Induranga Kawishwara**.  
+Part of the **DENEB UI** ecosystem.

package/bin/index.js

@@ -9,11 +9,11 @@ let targetDirInput = args[0];
 
 function printBanner() {
   console.log(`
-  \x1b[36m╔═══════════════════════════════════════════════════════╗
-  ║              \x1b[1mDENEB TEMPLATE CREATOR\x1b[0m\x1b[36m                  ║
-  ║       \x1b[90mScaffold a fast, compliant commerce template\x1b[0m\x1b[36m    ║
-  ║     \x1b[90mCreated by Chamika Gayashan (CEE G)\x1b[0m\x1b[36m      ║
-  ╚═══════════════════════════════════════════════════════╝\x1b[0m
+  \x1b[36m╔═════════════════════════════════════════════════════════════╗
+  ║                 \x1b[1mDENEB TEMPLATE CREATOR\x1b[0m\x1b[36m                    ║
+  ║          \x1b[90mScaffold a fast, compliant commerce template\x1b[0m\x1b[36m      ║
+  ║   \x1b[90mCreated by Chamika Gayashan & Induranga Kawishwara\x1b[0m\x1b[36m    ║
+  ╚═════════════════════════════════════════════════════════════╝\x1b[0m
 `);
 }
 
@@ -111,7 +111,7 @@ function runScaffolding(targetInput) {
 
 printBanner();
 
-if (targetDirInput) {
+if (targetDirInput && targetDirInput.trim() && !targetDirInput.startsWith('-')) {
   runScaffolding(targetDirInput);
 } else {
   const rl = readline.createInterface({
@@ -119,9 +119,10 @@ if (targetDirInput) {
     output: process.stdout,
   });
 
-  rl.question('Project name (e.g. my-deneb-store): ', (answer) => {
+  console.log('⚡ Welcome to DENEB UI Template Creator!\n');
+  rl.question(' \x1b[36m?\x1b[0m \x1b[1mWhat is your template name?\x1b[0m \x1b[90m(e.g. my-store)\x1b[0m: ', (answer) => {
     rl.close();
-    const name = answer.trim() || 'deneb-template';
+    const name = answer.trim() || 'my-deneb-store';
     runScaffolding(name);
   });
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@deneb-ui/create-template",
-  "version": "2.0.0",
-  "description": "Scaffold a modern, pre-validated DENEB UI storefront template in seconds. Created by Chamika Gayashan (CEE G).",
+  "version": "2.0.3",
+  "description": "Scaffold a modern, pre-validated DENEB UI storefront template in seconds. Created by Chamika Gayashan & Induranga Kawishwara.",
   "bin": {
     "create-deneb-template": "bin/index.js",
     "create-deneb": "bin/index.js",
@@ -31,7 +31,7 @@
     "nextjs",
     "react"
   ],
-  "author": "Chamika Gayashan (CEE G)",
+  "author": "Chamika Gayashan & Induranga Kawishwara",
   "license": "MIT",
   "dependencies": {}
 }

package/template/package.json

@@ -6,11 +6,11 @@
     "dev": "next dev",
     "build": "next build",
     "lint": "eslint",
-    "lab": "fivora lab .",
-    "validate": "fivora validate .",
-    "package:template": "fivora package .",
-    "zip": "fivora zip .",
-    "update:fivora": "fivora update"
+    "lab": "deneb lab .",
+    "validate": "deneb validate .",
+    "package:template": "deneb package .",
+    "zip": "deneb zip .",
+    "update:deneb": "deneb update"
   },
   "dependencies": {
     "next": "15.5.23",
@@ -26,7 +26,10 @@
     "eslint": "9.39.5",
     "eslint-config-next": "15.5.23",
     "typescript": "5.8.3",
-    "@fivora/cli": "^1.0.0"
+    "@deneb-ui/cli": "^2.0.0",
+    "tailwindcss": "^3.4.17",
+    "postcss": "^8.4.49",
+    "autoprefixer": "^10.4.20"
   },
   "overrides": {
     "postcss": "8.5.26",

package/template/postcss.config.mjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+export default config;

package/template/src/app/globals.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 :root {
   color-scheme: light;
 }

package/template/src/app/page.tsx

@@ -118,23 +118,44 @@ export default function HomePage() {
       >
         <div className="dev-guide-header">
           <span className="dev-badge" data-preview-static="dev-guidance">
-            ⚡ Template Developer Quickstart
+            ⚡ DENEB UI &amp; Fivora Developer Guide
           </span>
           <h2 data-preview-static="dev-guidance">
-            Build, Test, and Package with Fivora
+            How DENEB UI Configures with the Fivora Live Editor
           </h2>
           <p data-preview-static="dev-guidance">
-            Run these commands directly in your template terminal:
+            DENEB UI components are visual-first React primitives engineered for live editing in the Fivora merchant platform:
           </p>
         </div>
 
+        <div className="grid grid-cols-1 md:grid-cols-3 gap-6 my-8 text-left max-w-5xl mx-auto">
+          <div className="p-6 bg-white rounded-2xl border border-slate-200 shadow-sm">
+            <h4 data-preview-static="dev-card-title" className="font-bold text-slate-900 mb-2">1. Live Field Markers</h4>
+            <p data-preview-static="dev-card-desc" className="text-sm text-slate-500 leading-relaxed">
+              Every editable string connects to <code data-preview-static="dev-code">site-data.json</code> via <code data-preview-static="dev-code">fieldPath=&quot;home.title&quot;</code>. Clicking in Fivora highlights the field in the sidebar.
+            </p>
+          </div>
+          <div className="p-6 bg-white rounded-2xl border border-slate-200 shadow-sm">
+            <h4 data-preview-static="dev-card-title" className="font-bold text-slate-900 mb-2">2. Auto-Balancing Grids</h4>
+            <p data-preview-static="dev-card-desc" className="text-sm text-slate-500 leading-relaxed">
+              Use <code data-preview-static="dev-code">&lt;EditableGrid&gt;</code> and <code data-preview-static="dev-code">&lt;EditableCard&gt;</code> from <code data-preview-static="dev-code">@deneb-ui/ui</code> to ensure card heights remain balanced regardless of merchant copy length.
+            </p>
+          </div>
+          <div className="p-6 bg-white rounded-2xl border border-slate-200 shadow-sm">
+            <h4 data-preview-static="dev-card-title" className="font-bold text-slate-900 mb-2">3. Add UI Components</h4>
+            <p data-preview-static="dev-card-desc" className="text-sm text-slate-500 leading-relaxed">
+              Install pre-built components into <code data-preview-static="dev-code">src/components/ui/</code> anytime using <code data-preview-static="dev-code">npx deneb add &lt;name&gt;</code> (e.g. product-card, contact-actions, dialog).
+            </p>
+          </div>
+        </div>
+
         <div className="dev-command-grid">
           <div className="dev-cmd-card">
             <div className="cmd-header">
               <span className="cmd-tag" data-preview-static="dev-tag">Development</span>
               <code data-preview-static="dev-command">npm run dev</code>
             </div>
-            <p data-preview-static="dev-description">Hot-reloading local development with Next.js &amp; React 19.</p>
+            <p data-preview-static="dev-description">Hot-reloading local development with Next.js &amp; Tailwind CSS.</p>
           </div>
 
           <div className="dev-cmd-card">
@@ -150,7 +171,7 @@ export default function HomePage() {
               <span className="cmd-tag" data-preview-static="dev-tag">Compliance</span>
               <code data-preview-static="dev-command">npm run validate</code>
             </div>
-            <p data-preview-static="dev-description">Runs fivora preflight contract tests &amp; empty states.</p>
+            <p data-preview-static="dev-description">Runs Fivora preflight contract tests &amp; empty states.</p>
           </div>
 
           <div className="dev-cmd-card">

package/template/src/components/SiteChrome.tsx

@@ -3,7 +3,7 @@
 import type { ReactNode } from 'react';
 import { usePathname } from 'next/navigation';
 import { useSiteData } from '@/lib/siteDataContext';
-import { Navbar, Footer, getThemeCssProperties } from '@deneb-ui/ui';
+import { Navbar, Footer, AnnouncementBar, FloatingContactWidget, getThemeCssProperties } from '@deneb-ui/ui';
 
 export default function SiteChrome({ children }: { children: ReactNode }) {
   const siteData = useSiteData();
@@ -14,9 +14,11 @@ export default function SiteChrome({ children }: { children: ReactNode }) {
 
   return (
     <div className="site-shell" style={themeStyle}>
+      <AnnouncementBar />
       <Navbar activeRoute={pathname} />
       <main>{children}</main>
       <Footer />
+      <FloatingContactWidget />
     </div>
   );
 }

package/template/tailwind.config.ts

@@ -0,0 +1,24 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+    './node_modules/@deneb-ui/ui/**/*.{js,ts,jsx,tsx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        brand: {
+          primary: 'var(--brand-primary, #2563eb)',
+          secondary: 'var(--brand-secondary, #0f172a)',
+          accent: 'var(--brand-accent, #14b8a6)',
+        },
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;