@deneb-ui/create-template 2.0.70 → 2.0.72

package/bin/index.js

@@ -54,11 +54,121 @@ function copyFolderSync(src, dest) {
   }
 }
 
-function runScaffolding(targetInput) {
+const THEME_PRESETS = {
+  dual: {
+    key: 'dual',
+    name: 'Dual-Mode (Light + Dark Switcher) [Recommended]',
+    theme: {
+      primaryColor: '#016a7e',
+      secondaryColor: '#0a1931',
+      accentColor: '#00adb5',
+      backgroundColor: '#ffffff',
+      textColor: '#0f172a',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+      dark: {
+        backgroundColor: '#090d16',
+        cardBackgroundColor: '#131b2e',
+        textColor: '#f8fafc',
+        borderColor: 'rgba(255, 255, 255, 0.12)',
+        primaryColor: '#00adb5',
+      },
+    },
+  },
+  light: {
+    key: 'light',
+    name: 'Modern Clean (Pure Light Commerce)',
+    theme: {
+      primaryColor: '#2563eb',
+      secondaryColor: '#1e293b',
+      accentColor: '#3b82f6',
+      backgroundColor: '#ffffff',
+      cardBackgroundColor: '#ffffff',
+      textColor: '#0f172a',
+      borderColor: '#e2e8f0',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+  dark: {
+    key: 'dark',
+    name: 'Luxury Obsidian (Pure Dark Theme)',
+    theme: {
+      primaryColor: '#6366f1',
+      secondaryColor: '#0f172a',
+      accentColor: '#818cf8',
+      backgroundColor: '#090d16',
+      cardBackgroundColor: '#131b2e',
+      textColor: '#f8fafc',
+      borderColor: 'rgba(255, 255, 255, 0.12)',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+  emerald: {
+    key: 'emerald',
+    name: 'Emerald Luxury (Deep Green & Gold)',
+    theme: {
+      primaryColor: '#10b981',
+      secondaryColor: '#064e3b',
+      accentColor: '#d97706',
+      backgroundColor: '#061a14',
+      cardBackgroundColor: '#0c2e24',
+      textColor: '#f0fdf4',
+      borderColor: 'rgba(16, 185, 129, 0.2)',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+  cyberpunk: {
+    key: 'cyberpunk',
+    name: 'Cyberpunk Neon (Futuristic Dark)',
+    theme: {
+      primaryColor: '#ec4899',
+      secondaryColor: '#18181b',
+      accentColor: '#06b6d4',
+      backgroundColor: '#09090b',
+      cardBackgroundColor: '#18181b',
+      textColor: '#fafafa',
+      borderColor: 'rgba(236, 72, 153, 0.3)',
+      headingFont: 'Inter',
+      bodyFont: 'Inter',
+      baseSize: '16px',
+      heroMinHeight: '72vh',
+      sectionPadding: '5rem',
+    },
+  },
+};
+
+function resolveThemePreset(input) {
+  if (!input) return THEME_PRESETS.dual;
+  const clean = input.trim().toLowerCase();
+  if (clean === '1' || clean === 'dual') return THEME_PRESETS.dual;
+  if (clean === '2' || clean === 'light') return THEME_PRESETS.light;
+  if (clean === '3' || clean === 'dark') return THEME_PRESETS.dark;
+  if (clean === '4' || clean === 'emerald') return THEME_PRESETS.emerald;
+  if (clean === '5' || clean === 'cyberpunk') return THEME_PRESETS.cyberpunk;
+  return THEME_PRESETS[clean] || THEME_PRESETS.dual;
+}
+
+function runScaffolding(targetInput, chosenThemeKey = 'dual') {
   const targetPath = path.resolve(process.cwd(), targetInput.trim());
   const folderName = path.basename(targetPath);
   const sanitizedPkgName = folderName.toLowerCase().replace(/[^a-z0-9_-]/g, '-');
   const templateDir = path.resolve(__dirname, '..', 'template');
+  const selectedPreset = resolveThemePreset(chosenThemeKey);
 
   if (!fs.existsSync(templateDir)) {
     console.error(`\n\x1b[31mError:\x1b[0m Template directory not found at ${templateDir}`);
@@ -71,6 +181,7 @@ function runScaffolding(targetInput) {
   }
 
   console.log(`\n\x1b[32mCreating DENEB template in:\x1b[0m ${targetPath}...\n`);
+  console.log(`  \x1b[36m🎨 Starter Theme Style:\x1b[0m ${selectedPreset.name}`);
   copyFolderSync(templateDir, targetPath);
 
   // Restore .gitignore if preserved as _gitignore
@@ -91,8 +202,29 @@ function runScaffolding(targetInput) {
     }
   }
 
+  // Inject selected theme into site-data.json
+  const siteDataPath = path.join(targetPath, 'src', 'data', 'site-data.json');
+  if (fs.existsSync(siteDataPath)) {
+    try {
+      const siteData = JSON.parse(fs.readFileSync(siteDataPath, 'utf8'));
+      if (siteData.template && siteData.template.structure) {
+        siteData.template.structure.theme = {
+          ...(siteData.template.structure.theme || {}),
+          ...selectedPreset.theme,
+        };
+      }
+      siteData.theme = {
+        ...(siteData.theme || {}),
+        ...selectedPreset.theme,
+      };
+      fs.writeFileSync(siteDataPath, JSON.stringify(siteData, null, 2) + '\n');
+    } catch {
+      // ignore
+    }
+  }
+
   console.log(`\x1b[32m✔ Template structure created!\x1b[0m`);
-  console.log(`  \x1b[90m- Pre-configured @deneb-ui/ui (Visual editing & smart template components)\x1b[0m`);
+  console.log(`  \x1b[90m- Pre-configured @deneb-ui/ui (ThemeStyles, ThemeToggle & 28+ Editable Components)\x1b[0m`);
   console.log(`  \x1b[90m- Pre-configured @deneb-ui/cli (lab, validate, zip tools)\x1b[0m\n`);
 
   const skipInstall = process.argv.includes('--skip-install');
@@ -135,7 +267,7 @@ function runScaffolding(targetInput) {
   console.log(`\x1b[32m══════════════════════════════════════════════════════════════════════════════\x1b[0m\n`);
   console.log(`Your storefront template is pre-configured with:`);
   console.log(`  \x1b[36m⚡ Next.js 15 App Router\x1b[0m (React 19 + Static Export support)`);
-  console.log(`  \x1b[36m🎨 Tailwind CSS\x1b[0m (Pre-configured tailwind.config.ts & tokens)`);
+  console.log(`  \x1b[36m🎨 Dynamic Theming Engine\x1b[0m (ThemeStyles + ThemeToggle + Zero-FOUC)`);
   console.log(`  \x1b[36m💎 @deneb-ui/ui\x1b[0m (28+ Visual-First Editable Components)`);
   console.log(`  \x1b[36m🛠️ @deneb-ui/cli\x1b[0m (Visual Lab, Preflight Validator & Packager)`);
   console.log(`  \x1b[36m📋 Fivora Manifest\x1b[0m (Version 2 Contract Compliant)\n`);
@@ -163,8 +295,44 @@ function runScaffolding(targetInput) {
 
 printBanner();
 
-if (targetDirInput && targetDirInput.trim() && !targetDirInput.startsWith('-')) {
-  runScaffolding(targetDirInput);
+// Extract CLI flags like --theme=dark or --theme=dual
+let cliTheme = null;
+const themeArg = args.find((a) => a.startsWith('--theme='));
+if (themeArg) {
+  cliTheme = themeArg.split('=')[1];
+}
+
+const positionalTarget = args.find((a) => !a.startsWith('-'));
+const isNonInteractive =
+  !process.stdin.isTTY ||
+  Boolean(process.env.CI) ||
+  args.includes('--yes') ||
+  args.includes('-y') ||
+  args.includes('--non-interactive') ||
+  args.includes('--skip-install');
+
+if (positionalTarget && positionalTarget.trim()) {
+  if (cliTheme || isNonInteractive) {
+    runScaffolding(positionalTarget, cliTheme || 'dual');
+  } else {
+    const rl = readline.createInterface({
+      input: process.stdin,
+      output: process.stdout,
+    });
+    console.log('⚡ Template Theme Selection:\n');
+    console.log('  \x1b[36m1)\x1b[0m Dual-Mode \x1b[90m(Light + Dark Switcher pre-installed)\x1b[0m \x1b[32m[Recommended]\x1b[0m');
+    console.log('  \x1b[36m2)\x1b[0m Modern Clean \x1b[90m(Pure Light commerce)\x1b[0m');
+    console.log('  \x1b[36m3)\x1b[0m Luxury Obsidian \x1b[90m(Pure Dark theme)\x1b[0m');
+    console.log('  \x1b[36m4)\x1b[0m Emerald Luxury \x1b[90m(Deep Green & Gold)\x1b[0m');
+    console.log('  \x1b[36m5)\x1b[0m Cyberpunk Neon \x1b[90m(Futuristic Dark)\x1b[0m\n');
+
+    rl.question(' \x1b[36m?\x1b[0m \x1b[1mSelect starter theme (1-5, default 1):\x1b[0m ', (themeAns) => {
+      rl.close();
+      runScaffolding(positionalTarget, themeAns.trim() || 'dual');
+    });
+  }
+} else if (isNonInteractive) {
+  runScaffolding('my-deneb-store', cliTheme || 'dual');
 } else {
   const rl = readline.createInterface({
     input: process.stdin,
@@ -173,8 +341,24 @@ if (targetDirInput && targetDirInput.trim() && !targetDirInput.startsWith('-'))
 
   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() || 'my-deneb-store';
-    runScaffolding(name);
+    
+    if (cliTheme) {
+      rl.close();
+      runScaffolding(name, cliTheme);
+      return;
+    }
+
+    console.log('\n \x1b[36m?\x1b[0m \x1b[1mSelect starter theme style:\x1b[0m');
+    console.log('  \x1b[36m1)\x1b[0m Dual-Mode \x1b[90m(Light + Dark Switcher pre-installed)\x1b[0m \x1b[32m[Recommended]\x1b[0m');
+    console.log('  \x1b[36m2)\x1b[0m Modern Clean \x1b[90m(Pure Light commerce)\x1b[0m');
+    console.log('  \x1b[36m3)\x1b[0m Luxury Obsidian \x1b[90m(Pure Dark theme)\x1b[0m');
+    console.log('  \x1b[36m4)\x1b[0m Emerald Luxury \x1b[90m(Deep Green & Gold)\x1b[0m');
+    console.log('  \x1b[36m5)\x1b[0m Cyberpunk Neon \x1b[90m(Futuristic Dark)\x1b[0m\n');
+
+    rl.question('  \x1b[1mEnter choice (1-5, default 1):\x1b[0m ', (themeAns) => {
+      rl.close();
+      runScaffolding(name, themeAns.trim() || 'dual');
+    });
   });
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@deneb-ui/create-template",
-  "version": "2.0.70",
+  "version": "2.0.72",
   "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

@@ -5,34 +5,12 @@
     "contractVersion": 1,
     "mode": "strict",
     "controlOnlyPaths": [
-      "__fivoraIntake.tone",
-      "__fivoraIntake.outputLanguage",
-      "__fivoraIntake.businessSummary",
-      "__fivoraIntake.additionalBusinessDetails",
-      "__fivoraIntake.referenceWebsiteUrl",
-      "additionalPages[*].id",
-      "additionalPages[*].route",
-      "common.currency",
-      "common.whatsappNumber",
-      "common.whatsapp",
-      "common.email",
-      "common.address",
-      "common.contactNumber",
-      "common.openingHours",
-      "common.newsletterTitle",
-      "common.newsletterDescription",
-      "contact.contactNumber",
-      "contact.googleMapLink",
-      "contact.whatsapp",
       "products[*].id",
       "products[*].isAvailable",
-      "products[*].measurement",
-      "products[*].unit",
-      "testimonials[*].id",
-      "categories[*].slug",
       "services[*].id",
       "products[*].currency",
-      "about.collageImages[*].id"
+      "about.collageImages[*].id",
+      "contact.whatsapp"
     ]
   },
   "siteDataFile": "src/data/site-data.json",
@@ -424,12 +402,23 @@
             "key": "submitLabel",
             "type": "text",
             "label": "Submit button"
+          },
+          {
+            "key": "directMessageText",
+            "type": "text",
+            "label": "Direct message label"
+          },
+          {
+            "key": "whatsapp",
+            "type": "tel",
+            "label": "WhatsApp"
           }
         ]
       },
       {
         "id": "products",
         "path": "products",
+        "pageKey": "home",
         "type": "list",
         "label": "Products",
         "minItems": 0,

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

package/template/scripts/merge-platform-contract.js

@@ -56,7 +56,6 @@ const PLATFORM_PATHS = [
   // Contact fields used as action links (href attributes)
   'contact.contactNumber',
   'contact.googleMapLink',
-  'contact.whatsapp',
   // Product system fields
   'products[*].id',
   'products[*].isAvailable',
@@ -65,6 +64,9 @@ const PLATFORM_PATHS = [
   // List item system keys
   'testimonials[*].id',
   'categories[*].slug',
+  'services[*].id',
+  'products[*].currency',
+  'about.collageImages[*].id',
 ];
 
 const manifestPath = path.resolve(__dirname, '..', 'fivora-template.json');
@@ -76,12 +78,87 @@ if (!fs.existsSync(manifestPath)) {
 const manifest = JSON.parse(fs.readFileSync(manifestPath, 'utf8'));
 if (!manifest.visualEditing) manifest.visualEditing = {};
 
+const siteDataPath = path.resolve(__dirname, '..', manifest.siteDataFile || 'src/data/site-data.json');
+let siteData = {};
+if (fs.existsSync(siteDataPath)) {
+  try {
+    siteData = JSON.parse(fs.readFileSync(siteDataPath, 'utf8'));
+  } catch {}
+}
+
+function pathExistsInContent(content, p) {
+  if (!content || typeof content !== 'object') return false;
+  const segments = p.split('.');
+  let current = [content];
+  for (const seg of segments) {
+    const isList = seg.endsWith('[*]');
+    const key = isList ? seg.slice(0, -3) : seg;
+    const next = [];
+    for (const item of current) {
+      if (!item || typeof item !== 'object') continue;
+      const val = item[key];
+      if (val === undefined) continue;
+      if (isList) {
+        if (Array.isArray(val)) {
+          next.push(...val);
+        }
+      } else {
+        next.push(val);
+      }
+    }
+    if (next.length === 0) return false;
+    current = next;
+  }
+  return true;
+}
+
+function pathExistsInSchema(schema, p) {
+  if (!schema || !Array.isArray(schema.sections)) return false;
+  const canonical = p.replace(/\[\d+\]/g, '[*]');
+
+  function checkNode(node, currentPath) {
+    if (currentPath === canonical) return true;
+    if (node.type === 'object' && Array.isArray(node.fields)) {
+      for (const field of node.fields) {
+        if (checkNode(field, `${currentPath}.${field.key}`)) return true;
+      }
+    }
+    if (node.type === 'list') {
+      const itemPath = `${currentPath}[*]`;
+      if (itemPath === canonical) return true;
+      if (node.itemField && itemPath === canonical) return true;
+      if (Array.isArray(node.fields)) {
+        for (const field of node.fields) {
+          if (checkNode(field, `${itemPath}.${field.key}`)) return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  for (const section of schema.sections) {
+    if (checkNode(section, section.path)) return true;
+  }
+  return false;
+}
+
+function isKnownPath(p) {
+  return (
+    pathExistsInContent(siteData.content, p) ||
+    pathExistsInContent(siteData, p) ||
+    pathExistsInSchema(manifest.editorSchema, p)
+  );
+}
+
 const existing = Array.isArray(manifest.visualEditing.controlOnlyPaths)
-  ? manifest.visualEditing.controlOnlyPaths : [];
+  ? manifest.visualEditing.controlOnlyPaths.filter(isKnownPath)
+  : [];
 
-const merged = [...new Set([...PLATFORM_PATHS, ...existing])];
-const added = merged.length - existing.length;
+const relevantPlatformPaths = PLATFORM_PATHS.filter(isKnownPath);
+const merged = [...new Set([...relevantPlatformPaths, ...existing])];
 manifest.visualEditing.controlOnlyPaths = merged;
 
 fs.writeFileSync(manifestPath, JSON.stringify(manifest, null, 2) + '\n');
-console.log(`merge-platform-contract: +${added} platform paths merged (${merged.length} total)`);
+console.log(`merge-platform-contract: ${merged.length} platform paths retained`);
+
+

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

@@ -1,8 +1,7 @@
 'use client';
 
-import { HeritageCollage } from '@deneb-ui/ui';
+import { EditableText, EditableImage } from '@deneb-ui/ui';
 import { contentObject, contentText, contentList, useSiteData } from '@/lib/siteDataContext';
-import { withBasePath } from '@/lib/utils';
 
 export default function AboutPage() {
   const siteData = useSiteData();
@@ -13,30 +12,117 @@ export default function AboutPage() {
     <div data-preview-page-key="about_us">
       <section className="page-section split" data-design-section="about">
         <div className="split-copy">
-          <h1 className="section-title" data-preview-field-path="about.heading">{contentText(about.heading)}</h1>
-          <p data-preview-field-path="about.body">{contentText(about.body)}</p>
+          <EditableText
+            variant="h1"
+            size="4xl"
+            weight="bold"
+            color="heading"
+            className="section-title"
+            data-preview-field-path="about.heading"
+            defaultValue={contentText(about.heading)}
+          />
+          <EditableText
+            variant="lead"
+            color="muted"
+            data-preview-field-path="about.body"
+            defaultValue={contentText(about.body)}
+          />
         </div>
-        <img
+        <EditableImage
           className="split-image"
-          src={withBasePath(contentText(about.imageUrl) || '/placeholder.svg')}
-          alt=""
+          src={contentText(about.imageUrl) || '/placeholder.svg'}
+          alt="About DENEB-UI"
           data-preview-field-path="about.imageUrl"
+          radius="xl"
+          fit="cover"
         />
       </section>
 
       <section className="page-section" data-design-section="about-heritage">
-        <HeritageCollage
-          collageHeading={contentText(about.collageHeading)}
-          collageDescription={contentText(about.collageDescription)}
-          historyHeading={contentText(about.historyHeading)}
-          history={contentText(about.history)}
-          images={collageImages}
-          collageHeadingPath="about.collageHeading"
-          collageDescriptionPath="about.collageDescription"
-          historyHeadingPath="about.historyHeading"
-          historyPath="about.history"
-          listPath="about.collageImages"
-        />
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', gap: '2rem', alignItems: 'start' }}>
+          <div>
+            <EditableText
+              variant="h2"
+              size="2xl"
+              weight="bold"
+              color="heading"
+              data-preview-field-path="about.collageHeading"
+              defaultValue={contentText(about.collageHeading)}
+            />
+            <EditableText
+              variant="p"
+              color="muted"
+              data-preview-field-path="about.collageDescription"
+              defaultValue={contentText(about.collageDescription)}
+              style={{ marginTop: '0.5rem', marginBottom: '1.5rem' }}
+            />
+            <EditableText
+              variant="h3"
+              size="xl"
+              weight="bold"
+              color="heading"
+              data-preview-field-path="about.historyHeading"
+              defaultValue={contentText(about.historyHeading)}
+            />
+            <EditableText
+              variant="p"
+              color="muted"
+              data-preview-field-path="about.history"
+              defaultValue={contentText(about.history)}
+              style={{ marginTop: '0.5rem' }}
+            />
+          </div>
+
+          <div
+            data-preview-list-path="about.collageImages"
+            style={{
+              display: 'grid',
+              gridTemplateColumns: 'repeat(2, 1fr)',
+              gap: '0.75rem',
+            }}
+          >
+            {collageImages.map((item, index) => (
+              <figure
+                key={item.id || index}
+                data-preview-item-path={`about.collageImages[${index}]`}
+                style={{
+                  position: 'relative',
+                  overflow: 'hidden',
+                  borderRadius: '1rem',
+                  border: '1px solid var(--color-border, #e2e8f0)',
+                  margin: 0,
+                  minHeight: '140px',
+                  background: 'var(--color-secondary, #f1f5f9)',
+                }}
+              >
+                <img
+                  src={item.image || '/placeholder.svg'}
+                  alt={item.caption || ''}
+                  data-preview-field-path={`about.collageImages[${index}].image`}
+                  style={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
+                />
+                {item.caption && (
+                  <figcaption
+                    style={{
+                      position: 'absolute',
+                      insetInline: 0,
+                      bottom: 0,
+                      padding: '0.75rem 1rem',
+                      background: 'linear-gradient(transparent, rgba(15,23,42,0.85))',
+                      color: '#fff',
+                      fontSize: '0.8125rem',
+                      fontWeight: 600,
+                    }}
+                  >
+                    <span data-preview-field-path={`about.collageImages[${index}].caption`}>
+                      {item.caption}
+                    </span>
+                  </figcaption>
+                )}
+              </figure>
+            ))}
+          </div>
+        </div>
       </section>
     </div>
   );