create-nextblock 0.2.37 → 0.2.39

package/bin/create-nextblock.js

@@ -17,7 +17,6 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 const TEMPLATE_DIR = resolve(__dirname, '../templates/nextblock-template');
 const REPO_ROOT = resolve(__dirname, '../../..');
-const require = createRequire(import.meta.url);
 const EDITOR_UTILS_SOURCE_DIR = resolve(REPO_ROOT, 'libs/editor/src/lib/utils');
 const IS_WINDOWS = process.platform === 'win32';
 
@@ -199,7 +198,7 @@ async function runSetupWizard(projectDir, projectName) {
   if (process.stdin.isTTY) {
     try {
       process.stdin.setRawMode(false);
-    } catch (_) {
+    } catch {
       // ignore
     }
     process.stdin.setEncoding('utf8');
@@ -235,11 +234,12 @@ async function runSetupWizard(projectDir, projectName) {
   clack.note('Please go to your Supabase project dashboard to get the following secrets.');
   const supabaseKeys = await clack.group(
     {
-      dbPassword: () =>
-        clack.password({
+      postgresUrl: () =>
+        clack.text({
           message:
-            'What is your Database Password? (Supabase: Database > Database Settings > Reset database password | Vercel: POSTGRES_PASSWORD)',
-          validate: (val) => (!val ? 'Password is required' : undefined),
+            'What is your Connection String? (Supabase: Project Dashboard > Connect (Top Left) > Connection String > URI | Vercel: POSTGRES_URL)',
+          placeholder: 'postgresql://...',
+          validate: (val) => (!val ? 'Connection string is required' : undefined),
         }),
       anonKey: () =>
         clack.password({
@@ -261,12 +261,25 @@ async function runSetupWizard(projectDir, projectName) {
   const revalidationToken = crypto.randomBytes(32).toString('hex');
   const supabaseUrl = `https://${projectId}.supabase.co`;
 
-  const dbHost = `db.${projectId}.supabase.co`;
-  const dbUser = 'postgres';
-  const dbPassword = supabaseKeys.dbPassword;
-  const dbName = 'postgres';
+  const postgresUrl = supabaseKeys.postgresUrl;
+  let dbPassword = '';
+  try {
+    const parsedUrl = new URL(postgresUrl);
+    dbPassword = parsedUrl.password;
+  } catch {
+    // Fallback if URL parsing fails, though validation above checks for non-empty
+  }
 
-  const postgresUrl = `postgresql://${dbUser}:${dbPassword}@${dbHost}:5432/${dbName}`;
+  if (!dbPassword) {
+    const passwordPrompt = await clack.password({
+      message: 'Could not extract password from URL. What is your Database Password?',
+      validate: (val) => (!val ? 'Password is required' : undefined),
+    });
+    if (clack.isCancel(passwordPrompt)) {
+      handleWizardCancel('Setup cancelled.');
+    }
+    dbPassword = passwordPrompt;
+  }
 
   const envPath = resolve(projectPath, '.env');
   const appendEnvBlock = async (label, lines) => {
@@ -313,8 +326,9 @@ async function runSetupWizard(projectDir, projectName) {
   }
 
   clack.note('Setting up your database...');
+
   const dbPushSpinner = clack.spinner();
-  dbPushSpinner.start('Pushing database schema... (~10-15 minutes, please keep this terminal open)');
+  dbPushSpinner.start('Pushing database schema...');
   try {
     process.env.POSTGRES_URL = postgresUrl;
     const migrationsDir = resolve(projectPath, 'supabase', 'migrations');
@@ -331,7 +345,31 @@ async function runSetupWizard(projectDir, projectName) {
         `No migrations found in ${migrationsDir}; skipping db push. Ensure @nextblock-cms/db includes supabase/migrations.`,
       );
     } else {
-      await execa('npx', ['supabase', 'db', 'push'], { stdio: 'inherit', cwd: projectPath });
+      const supabaseBin = await getSupabaseBinary(projectPath);
+      const command = supabaseBin === 'npx' ? 'npx' : supabaseBin;
+
+      // 1. Link the project explicitly (matches monorepo behavior)
+      const linkArgs = supabaseBin === 'npx' ? ['supabase', 'link'] : ['link'];
+      linkArgs.push('--project-ref', projectId);
+      linkArgs.push('--password', dbPassword);
+      
+      await execa(command, linkArgs, {
+        stdio: 'inherit',
+        cwd: projectPath,
+      });
+
+      // 2. Push the schema using the linked state
+      const pushArgs = supabaseBin === 'npx' ? ['supabase', 'db', 'push'] : ['db', 'push'];
+      pushArgs.push('--include-all');
+
+      await execa(command, pushArgs, {
+        stdio: 'inherit',
+        cwd: projectPath,
+        env: {
+          ...process.env,
+          SUPABASE_DB_PASSWORD: dbPassword,
+        },
+      });
       dbPushSpinner.stop('Database schema pushed successfully!');
     }
   } catch (error) {
@@ -1350,8 +1388,12 @@ function runCommand(command, args, options = {}) {
 
 async function runSupabaseCli(args, options = {}) {
   const { cwd } = options;
+  const supabaseBin = await getSupabaseBinary(cwd);
+  const command = supabaseBin === 'npx' ? 'npx' : supabaseBin;
+  const cmdArgs = supabaseBin === 'npx' ? ['supabase', ...args] : args;
+
   return new Promise((resolve, reject) => {
-    const child = spawn('npx', ['supabase', ...args], {
+    const child = spawn(command, cmdArgs, {
       cwd,
       shell: IS_WINDOWS,
       stdio: 'inherit',
@@ -1371,6 +1413,16 @@ async function runSupabaseCli(args, options = {}) {
   });
 }
 
+async function getSupabaseBinary(projectDir) {
+  const binDir = resolve(projectDir, 'node_modules', '.bin');
+  const ext = IS_WINDOWS ? '.cmd' : '';
+  const binaryPath = resolve(binDir, `supabase${ext}`);
+  if (await fs.pathExists(binaryPath)) {
+    return binaryPath;
+  }
+  return 'npx';
+}
+
 function buildNextConfigContent(editorUtilNames) {
   const aliasLines = [];
 

package/package.json

@@ -1,30 +1,30 @@
-{
-  "name": "create-nextblock",
-  "version": "0.2.37",
-  "description": "",
-  "main": "index.js",
-  "bin": {
-    "create-nextblock": "./bin/create-nextblock.js"
-  },
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "sync-template": "node ./scripts/sync-template.js",
-    "prepack": "npm run sync-template"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "module",
-  "dependencies": {
-    "@clack/prompts": "^0.8.1",
-    "@nextblock-cms/db": "latest",
-    "chalk": "^5.6.2",
-    "commander": "^14.0.1",
-    "execa": "^9.3.0",
-    "fs-extra": "^11.3.2",
-    "inquirer": "^12.10.0",
-    "open": "^10.1.0",
-    "ora": "^8.0.1",
-    "picocolors": "^1.1.1"
-  }
-}
+{
+  "name": "create-nextblock",
+  "version": "0.2.39",
+  "description": "",
+  "main": "index.js",
+  "bin": {
+    "create-nextblock": "./bin/create-nextblock.js"
+  },
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "sync-template": "node ./scripts/sync-template.js",
+    "prepack": "npm run sync-template"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "type": "module",
+  "dependencies": {
+    "@clack/prompts": "^0.8.1",
+    "@nextblock-cms/db": "latest",
+    "chalk": "^5.6.2",
+    "commander": "^14.0.1",
+    "execa": "^9.3.0",
+    "fs-extra": "^11.3.2",
+    "inquirer": "^12.10.0",
+    "open": "^10.1.0",
+    "ora": "^8.0.1",
+    "picocolors": "^1.1.1"
+  }
+}

package/templates/nextblock-template/app/cms/blocks/components/BlockEditorArea.tsx

@@ -104,7 +104,7 @@ export default function BlockEditorArea({ parentId, parentType, initialBlocks, l
       lastSavedBlocks.current = blocks;
     } else {
       // On failure, revert the UI to the last known good state
-      alert("Failed to save changes. Reverting.");
+      alert(`Failed to save changes: ${result.error}. Reverting.`);
       setBlocks(lastSavedBlocks.current);
     }
   }, [parentId, parentType, blocks]);

package/templates/nextblock-template/app/cms/blocks/components/SectionConfigPanel.tsx

@@ -1,4 +1,3 @@
-// app/cms/blocks/components/SectionConfigPanel.tsx
 "use client";
 
 import React from 'react';
@@ -112,6 +111,25 @@ export default function SectionConfigPanel({ content, onChange }: SectionConfigP
               </SelectContent>
             </Select>
           </div>
+
+          {/* Vertical Alignment */}
+          <div className="space-y-2">
+            <Label htmlFor="vertical-alignment">Vertical Alignment</Label>
+            <Select 
+              value={content.vertical_alignment || 'start'} 
+              onValueChange={(value: any) => onChange({ ...content, vertical_alignment: value })}
+            >
+              <SelectTrigger id="vertical-alignment">
+                <SelectValue placeholder="Select alignment" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="start">Top</SelectItem>
+                <SelectItem value="center">Center</SelectItem>
+                <SelectItem value="end">Bottom</SelectItem>
+                <SelectItem value="stretch">Stretch</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
         </div>
 
         {/* Background Configuration */}

package/templates/nextblock-template/app/cms/blocks/editors/SectionBlockEditor.tsx

@@ -52,6 +52,7 @@ export default function SectionBlockEditor({
       responsive_columns: { mobile: 1, tablet: 2, desktop: 3 },
       column_gap: "md",
       padding: { top: "md", bottom: "md" },
+      vertical_alignment: "start",
       column_blocks: [],
     };
 
@@ -62,6 +63,7 @@ export default function SectionBlockEditor({
         content.responsive_columns ?? defaults.responsive_columns,
       column_gap: content.column_gap ?? defaults.column_gap,
       padding: content.padding ?? defaults.padding,
+      vertical_alignment: content.vertical_alignment ?? defaults.vertical_alignment,
       column_blocks: content.column_blocks ?? defaults.column_blocks,
     };
   }, [content]);

package/templates/nextblock-template/app/force-styles.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+/**
+ * This component is never rendered but ensures that specific Tailwind classes
+ * used in the database seeds (SQL files) are generated in the CSS bundle.
+ * 
+ * We are using this as a fallback because Tailwind's scanning of SQL files
+ * in the libs directory is proving unreliable on Windows.
+ */
+export default function ForceStyles() {
+  return (
+    <div className="hidden">
+      {/* Spacing & Layout */}
+      <div className="mt-10 p-8 p-10 p-12 gap-4"></div>
+      <div className="grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-8"></div>
+      
+      {/* Text colors used in blocks */}
+      <div className="text-slate-200 text-slate-300 text-slate-400 text-slate-600 text-slate-900"></div>
+      <div className="dark:text-slate-200 dark:text-slate-400 dark:text-white"></div>
+      <div className="text-sm font-semibold text-center text-white"></div>
+      
+      {/* Backgrounds and Borders */}
+      <div className="bg-white/5 bg-white/10 border-white/10 border-white/20"></div>
+      <div className="bg-slate-50 hover:bg-slate-100 dark:bg-white/5 dark:hover:bg-white/10"></div>
+      
+      {/* Gradients */}
+      <div className="bg-gradient-to-r bg-gradient-to-br from-blue-400 to-cyan-400"></div>
+      <div className="from-blue-500/10 to-purple-500/10"></div>
+    </div>
+  );
+}

package/templates/nextblock-template/app/globals.css

@@ -1,436 +1,14 @@
-@config "../../../../tailwind.config.js";
-@import "tailwindcss/preflight";
-@import "tailwindcss/theme";
-@import "tailwindcss/utilities";
-/*─────────────────────────────────────────────────────────────────────────────
-  globals.css — complete rewrite
-─────────────────────────────────────────────────────────────────────────────*/
-/*─────────────────────────────────────────────────────────────────────────────
-  1. Critical CSS Resets (formerly in <style id="critical-css">)
-─────────────────────────────────────────────────────────────────────────────*/
-@layer base {
-  *, ::before, ::after {
-    box-sizing: border-box;
-    border-width: 0;
-    border-style: solid;
-    border-color: hsl(var(--border));
-  }
-  ::before, ::after {
-    --tw-content: "";
-  }
-
-  html, :host {
-    line-height: 1.5;
-    -webkit-text-size-adjust: 100%;
-    -moz-tab-size: 4;
-    tab-size: 4;
-    font-family:
-      ui-sans-serif,
-      system-ui,
-      sans-serif,
-      "Apple Color Emoji",
-      "Segoe UI Emoji",
-      "Segoe UI Symbol",
-      "Noto Color Emoji";
-    font-feature-settings: normal;
-    font-variation-settings: normal;
-    -webkit-tap-highlight-color: transparent;
-  }
-
-  body {
-    margin: 0;
-    line-height: inherit;
-  }
-
-  hr {
-    height: 0;
-    color: inherit;
-    border-top-width: 1px;
-  }
-
-  abbr:where([title]) {
-    -webkit-text-decoration: underline dotted;
-    text-decoration: underline dotted;
-  }
-
-  h1, h2, h3, h4, h5, h6 {
-    font-size: inherit;
-    font-weight: inherit;
-    margin: 0;
-  }
-
-  a {
-    color: inherit;
-    text-decoration: inherit;
-  }
-
-  b, strong {
-    font-weight: bolder;
-  }
-
-  code, kbd, pre, samp {
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      "Liberation Mono",
-      "Courier New",
-      monospace;
-    font-feature-settings: normal;
-    font-variation-settings: normal;
-    font-size: 1em;
-  }
-
-  small {
-    font-size: 80%;
-  }
-
-  sub, sup {
-    font-size: 75%;
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-  }
-  sub { bottom: -0.25em; }
-  sup { top: -0.5em; }
-
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-  }
-
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    font-family: inherit;
-    font-feature-settings: inherit;
-    font-variation-settings: inherit;
-    font-size: 100%;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-    color: inherit;
-    margin: 0;
-    padding: 0;
-  }
-  button, select {
-    text-transform: none;
-  }
-  button,
-  input[type="button"],
-  input[type="reset"],
-  input[type="submit"] {
-    -webkit-appearance: button;
-    background-color: transparent;
-    background-image: none;
-  }
-
-  :-moz-focusring { outline: auto; }
-  :-moz-ui-invalid { box-shadow: none; }
-  progress { vertical-align: baseline; }
-  ::-webkit-inner-spin-button,
-  ::-webkit-outer-spin-button {
-    height: auto;
-  }
-  [type="search"] {
-    -webkit-appearance: textfield;
-    outline-offset: -2px;
-  }
-  ::-webkit-search-decoration {
-    -webkit-appearance: none;
-  }
-  ::-webkit-file-upload-button {
-    -webkit-appearance: button;
-    font: inherit;
-  }
-
-  summary { display: list-item; }
-  blockquote, dd, dl, figure, p, pre { margin: 0; }
-  fieldset { margin: 0; padding: 0; }
-  legend { padding: 0; }
-  menu, ol, ul { list-style: none; margin: 0; padding: 0; }
-  dialog { padding: 0; }
-  textarea { resize: vertical; }
-
-  input::-moz-placeholder,
-  textarea::-moz-placeholder {
-    opacity: 1;
-    color: hsl(var(--muted-foreground));
-  }
-  input::placeholder,
-  textarea::placeholder {
-    opacity: 1;
-    color: hsl(var(--muted-foreground));
-  }
-
-  [role="button"], button { cursor: pointer; }
-  :disabled { cursor: default; }
-
-  audio,
-  canvas,
-  embed,
-  iframe,
-  img,
-  object,
-  svg,
-  video {
-    display: block;
-    vertical-align: middle;
-  }
-  img, video {
-    max-width: 100%;
-    height: auto;
-  }
-  [hidden] { display: none; }
-
-  /*───────────────────────────────────────────────────────────────────────────
-    2. Project-specific base styles (Tailwind-powered)
-  ───────────────────────────────────────────────────────────────────────────*/
-  /* Apply your border color everywhere */
-  * {
-    border-color: hsl(var(--border));
-  }
-
-  /* Body background & text */
-  body {
-    background-color: hsl(var(--background));
-    color: hsl(var(--foreground));
-  }
-
-  /* Semantic headings */
-  ul,
-  ol {
-    padding-left: 1.5rem;
-    margin-bottom: 1rem;
-  }
-  li {
-    margin-bottom: 0.25rem;
-  }
-  blockquote {
-    padding: 1rem;
-    font-style: italic;
-    border-left-width: 4px;
-    border-left-style: solid;
-    border-left-color: hsl(var(--border));
-    background-color: hsl(var(--muted));
-    color: hsl(var(--muted-foreground));
-    margin-bottom: 1rem;
-  }
-  code {
-    background-color: hsl(var(--muted));
-    color: hsl(var(--muted-foreground));
-    padding: 0.25rem 0.25rem;
-    padding-top: 0.125rem;
-    padding-bottom: 0.125rem;
-    border-radius: 0.125rem;
-    font-family:
-      ui-monospace,
-      SFMono-Regular,
-      Menlo,
-      Monaco,
-      Consolas,
-      'Liberation Mono',
-      'Courier New',
-      monospace;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-  }
-  pre {
-    background-color: hsl(var(--muted));
-    padding: 1rem;
-    border-radius: 0.375rem;
-    overflow-x: auto;
-    margin-bottom: 1rem;
-  }
-
-  table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-bottom: 1rem;
-  }
-  thead {
-    background-color: hsl(var(--muted));
-  }
-  th,
-  td {
-    border: 1px solid hsl(var(--border));
-    padding: 0.5rem;
-    text-align: left;
-  }
-  th {
-    font-weight: 600;
-  }
-  hr {
-    border-top: 1px solid hsl(var(--border));
-    margin: 2rem 0;
-  }
-}
-
-/* Image alignment preserved from editor output */
-@layer components {
-  img[data-align='left'] {
-    display: block;
-    margin-left: 0;
-    margin-right: auto;
-  }
-  img[data-align='right'] {
-    display: block;
-    margin-left: auto;
-    margin-right: 0;
-  }
-  img[data-align='center'] {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
-  }
-}
+@config "../../../../tailwind.config.js";
+@import 'tailwindcss/preflight';
+@import 'tailwindcss/theme';
+@import 'tailwindcss/utilities';
 
 /*─────────────────────────────────────────────────────────────────────────────
-  3. Theme color variables
+  globals.css — modularized
 ─────────────────────────────────────────────────────────────────────────────*/
-:root {
-  --background: 220 20% 98%;
-  --foreground: 215 30% 15%;
-  --card: 0 0% 100%;
-  --card-foreground: 215 30% 15%;
-  --popover: 0 0% 100%;
-  --popover-foreground: 215 30% 15%;
 
-  --primary: 215 45% 30%;
-  --primary-foreground: 0 0% 100%;
-
-  --secondary: 215 45% 45%;
-  --secondary-foreground: 0 0% 100%;
-
-  --muted: 220 30% 94%;
-  --muted-foreground: 215 25% 45%;
-
-  --accent: 190 70% 50%;
-  --accent-foreground: 210 40% 98%;
-
-  --destructive: 0 70% 42%;
-  --destructive-foreground: 0 0% 98%;
-
-  --warning: 38 92% 50%;
-  --warning-foreground: 48 96% 98%;
-
-  --border: 220 20% 88%;
-  --input: 220 20% 88%;
-  --ring: 200 80% 60%;
-
-  --radius: 0.5rem;
-
-  --chart-1: 217 70% 50%;
-  --chart-2: 190 60% 45%;
-  --chart-3: 215 35% 40%;
-  --chart-4: 220 15% 70%;
-  --chart-5: 200 50% 65%;
-}
-
-.dark {
-  --background: 220 25% 10%;
-  --foreground: 220 15% 90%;
-  --card: 220 20% 14%;
-  --card-foreground: 220 15% 90%;
-  --popover: 220 20% 14%;
-  --popover-foreground: 220 15% 90%;
-
-  --primary: 210 90% 65%;
-  --primary-foreground: 220 20% 10%;
-
-  --secondary: 215 50% 45%;
-  --secondary-foreground: 220 15% 90%;
-
-  --muted: 220 15% 18%;
-  --muted-foreground: 220 10% 65%;
-
-  --accent: 195 80% 55%;
-  --accent-foreground: 220 25% 10%;
-
-  --destructive: 0 65% 42%;
-  --destructive-foreground: 0 0% 98%;
-
-  --warning: 38 92% 50%;
-  --warning-foreground: 48 96% 98%;
-
-  --border: 220 15% 25%;
-  --input: 220 15% 25%;
-  --ring: 195 90% 60%;
-
-  --chart-1: 210 80% 60%;
-  --chart-2: 195 70% 50%;
-  --chart-3: 215 40% 50%;
-  --chart-4: 220 10% 55%;
-  --chart-5: 200 60% 70%;
-}
-
-/*─────────────────────────────────────────────────────────────────────────────
-  4. Explicit heading sizes & spacing
-─────────────────────────────────────────────────────────────────────────────*/
-h1 {
-  font-size: 3.5rem;
-  line-height: 1;
-  font-weight: 700;
-  margin: 1.5rem 0 1rem;
-}
-h2 {
-  font-size: 2.5rem;
-  line-height: 1;
-  font-weight: 700;
-  margin: 1.25rem 0 0.75rem;
-}
-h3 {
-  font-size: 2.25rem;
-  line-height: 2.5rem;
-  font-weight: 700;
-  margin: 1rem 0 0.75rem;
-}
-h4 {
-  font-size: 1.5rem;
-  line-height: 2rem;
-  font-weight: 700;
-  margin: 0.75rem 0 0.5rem;
-}
-h5 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 600;
-  margin: 0.5rem 0 0.5rem;
-}
-h6 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-  font-weight: 600;
-  margin: 0.5rem 0 0.5rem;
-}
-
-/*─────────────────────────────────────────────────────────────────────────────
-  5. Shimmer loading animation
-─────────────────────────────────────────────────────────────────────────────*/
-@keyframes shimmer {
-  100% {
-    transform: translateX(100%);
-  }
-}
-.shimmer::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  transform: translateX(-100%);
-  background-image: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, 0)   0,
-    rgba(255, 255, 255, 0.2) 20%,
-    rgba(255, 255, 255, 0.5) 60%,
-    rgba(255, 255, 255, 0)
-  );
-  animation: shimmer 2s infinite;
-}
+@import './base.css';
+@import './components.css';
+@import './theme.css';
+@import './typography.css';
+@import './animations.css';

package/templates/nextblock-template/app/layout.tsx

@@ -147,13 +147,10 @@ export default async function RootLayout({
         <title>{metadata.title as string}</title>
         <meta name="description" content={metadata.description as string} />
         <link rel="preconnect" href="https://ppcppwsfnrptznvbxnsz.supabase.co" />
-        <link rel="preconnect" href="https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev" crossOrigin="anonymous" />
         <link rel="dns-prefetch" href="https://ppcppwsfnrptznvbxnsz.supabase.co" />
-        <link rel="dns-prefetch" href="https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev" />
         <link rel="dns-prefetch" href="https://aws-0-us-east-1.pooler.supabase.com" />
         <link rel="dns-prefetch" href="https://db.ppcppwsfnrptznvbxnsz.supabase.co" />
         <link rel="dns-prefetch" href="https://realtime.supabase.com" />
-        <link rel="preload" as="image" href="https://pub-a31e3f1a87d144898aeb489a8221f92e.r2.dev/hero-bg.jpg" fetchPriority="high" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
       </head>
       <body className="bg-background text-foreground min-h-screen flex flex-col">

package/templates/nextblock-template/components/ResponsiveNav.tsx

@@ -261,7 +261,11 @@ export default function ResponsiveNav({
           >
             {logo && logo.media ? (
               <Image
-                src={`${R2_BASE_URL}/${logo.media.object_key}`}
+                src={
+                  logo.media.object_key.startsWith('/') || logo.media.object_key.startsWith('http')
+                    ? logo.media.object_key
+                    : `${R2_BASE_URL}/${logo.media.object_key}`
+                }
                 alt={logo.media.alt_text || siteTitle || 'Nextblock'}
                 width={logo.media.width || 100}
                 height={logo.media.height || 32}

package/templates/nextblock-template/components/blocks/renderers/HeroBlockRenderer.tsx

@@ -68,6 +68,14 @@ const paddingClasses = {
   xl: 'py-12'
 };
 
+// Vertical alignment classes
+const verticalAlignmentClasses = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch'
+};
+
 // Background style generator
 function generateBackgroundStyles(background: SectionBlockContent['background']) {
   const styles: React.CSSProperties = {};
@@ -207,6 +215,7 @@ const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
   const gapClass = gapClasses[content.column_gap] || gapClasses.md;
   const paddingTopClass = paddingClasses[content.padding.top] || paddingClasses.md;
   const paddingBottomClass = paddingClasses[content.padding.bottom] || paddingClasses.md;
+  const alignmentClass = content.vertical_alignment ? verticalAlignmentClasses[content.vertical_alignment] : 'items-start';
 
   const imageProps = backgroundImage?.blur_data_url
     ? {
@@ -243,7 +252,7 @@ const HeroBlockRenderer: React.FC<SectionBlockRendererProps> = ({
         />
       )}
       <div className={`${containerClass} relative`}>
-        <div className={`grid ${gridClass} ${gapClass}`}>
+        <div className={`grid ${gridClass} ${gapClass} ${alignmentClass}`}>
           {content.column_blocks.map((columnBlocks, columnIndex) => (
             <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
               {(Array.isArray(columnBlocks) ? columnBlocks : []).map((block, blockIndex) => (

package/templates/nextblock-template/components/blocks/renderers/SectionBlockRenderer.tsx

@@ -46,6 +46,14 @@ const paddingClasses = {
   xl: 'py-12'
 };
 
+// Vertical alignment classes
+const verticalAlignmentClasses = {
+  start: 'items-start',
+  center: 'items-center',
+  end: 'items-end',
+  stretch: 'items-stretch'
+};
+
 // Background style generator
 function generateBackgroundStyles(background: SectionBlockContent['background']) {
   const styles: React.CSSProperties = {};
@@ -161,6 +169,7 @@ const SectionBlockRenderer: React.FC<SectionBlockRendererProps> = ({
   const gapClass = gapClasses[content.column_gap] || gapClasses.md;
   const paddingTopClass = paddingClasses[content.padding.top] || paddingClasses.md;
   const paddingBottomClass = paddingClasses[content.padding.bottom] || paddingClasses.md;
+  const alignmentClass = content.vertical_alignment ? verticalAlignmentClasses[content.vertical_alignment] : 'items-start';
 
   return (
     <section
@@ -168,7 +177,7 @@ const SectionBlockRenderer: React.FC<SectionBlockRendererProps> = ({
       style={styles}
     >
       <div className={containerClass}>
-        <div className={`grid ${gridClass} ${gapClass}`}>
+        <div className={`grid ${gridClass} ${gapClass} ${alignmentClass}`}>
           {content.column_blocks.map((columnBlocks, columnIndex) => (
             <div key={`column-${columnIndex}`} className="min-h-0 space-y-4">
               {(Array.isArray(columnBlocks) ? columnBlocks : []).map((block, blockIndex) => (

package/templates/nextblock-template/lib/blocks/blockRegistry.ts

@@ -146,6 +146,8 @@ export interface SectionBlockContent {
     top: 'none' | 'sm' | 'md' | 'lg' | 'xl';
     bottom: 'none' | 'sm' | 'md' | 'lg' | 'xl';
   };
+  /** Vertical alignment of columns */
+  vertical_alignment?: 'start' | 'center' | 'end' | 'stretch';
   /** Array of blocks within columns - 2D array where each index represents a column */
   column_blocks: Array<Array<{
     block_type: BlockType;
@@ -621,6 +623,7 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
       background: { type: "none" },
       responsive_columns: { mobile: 1, tablet: 2, desktop: 3 },
       column_gap: "md",
+      vertical_alignment: "start",
       padding: { top: "md", bottom: "md" },
       column_blocks: [
         [{ block_type: "text", content: { html_content: "<p>Column 1</p>" } }],
@@ -669,6 +672,16 @@ export const blockRegistry: Record<BlockType, BlockDefinition> = {
         description: 'Section padding configuration',
         default: { top: 'md', bottom: 'md' },
       },
+      vertical_alignment: {
+        type: 'union',
+        required: false,
+        description: 'Vertical alignment of columns',
+        default: 'start',
+        unionValues: ['start', 'center', 'end', 'stretch'] as const,
+        constraints: {
+          enum: ['start', 'center', 'end', 'stretch'] as const,
+        },
+      },
       column_blocks: {
         type: 'array',
         required: true,

package/templates/nextblock-template/package.json

@@ -1,54 +1,54 @@
-{
-  "name": "@nextblock-cms/template",
-  "version": "0.2.15",
-  "private": true,
-  "scripts": {
-    "dev": "next dev",
-    "build": "next build",
-    "start": "next start",
-    "lint": "next lint"
-  },
-  "dependencies": {
-    "@aws-sdk/client-s3": "^3.920.0",
-    "@aws-sdk/s3-request-presigner": "^3.920.0",
-    "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/sortable": "^10.0.0",
-    "@dnd-kit/utilities": "^3.2.2",
-    "@supabase/ssr": "^0.6.1",
-    "@supabase/supabase-js": "^2.47.2",
-    "@tiptap/react": "^3.3.0",
-    "date-fns": "^3.6.0",
-    "dotenv": "^16.5.0",
-    "fast-json-patch": "^3.1.1",
-    "html-react-parser": "^5.2.6",
-    "js-cookie": "^3.0.5",
-    "lodash.debounce": "^4.0.8",
-    "lucide-react": "^0.534.0",
-    "next": "^15.5.4",
-    "nodemailer": "^7.0.4",
-    "plaiceholder": "^3.0.0",
-    "react": "19.0.0",
-    "react-dom": "19.0.0",
-    "react-hot-toast": "^2.4.1",
-    "sharp": "^0.34.2",
-    "uuid": "^10.0.0",
-    "zod": "^3.25.76",
-    "@nextblock-cms/ui": "workspace:*",
-    "@nextblock-cms/utils": "workspace:*",
-    "@nextblock-cms/db": "workspace:*",
-    "@nextblock-cms/editor": "workspace:*",
-    "@nextblock-cms/sdk": "workspace:*"
-  },
-  "devDependencies": {
-    "@types/node": "22.10.2",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "19.0.2",
-    "autoprefixer": "^10.4.13",
-    "eslint": "^9.8.0",
-    "eslint-config-next": "^15.5.4",
-    "postcss": "^8.4.38",
-    "tailwindcss": "^3.4.3",
-    "typescript": "~5.8.2",
-    "typescript-eslint": "^8.0.0"
-  }
-}
+{
+  "name": "@nextblock-cms/template",
+  "version": "0.2.17",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@aws-sdk/client-s3": "^3.920.0",
+    "@aws-sdk/s3-request-presigner": "^3.920.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@supabase/ssr": "^0.6.1",
+    "@supabase/supabase-js": "^2.47.2",
+    "@tiptap/react": "^3.3.0",
+    "date-fns": "^3.6.0",
+    "dotenv": "^16.5.0",
+    "fast-json-patch": "^3.1.1",
+    "html-react-parser": "^5.2.6",
+    "js-cookie": "^3.0.5",
+    "lodash.debounce": "^4.0.8",
+    "lucide-react": "^0.534.0",
+    "next": "^15.5.4",
+    "nodemailer": "^7.0.4",
+    "plaiceholder": "^3.0.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0",
+    "react-hot-toast": "^2.4.1",
+    "sharp": "^0.34.2",
+    "uuid": "^10.0.0",
+    "zod": "^3.25.76",
+    "@nextblock-cms/ui": "workspace:*",
+    "@nextblock-cms/utils": "workspace:*",
+    "@nextblock-cms/db": "workspace:*",
+    "@nextblock-cms/editor": "workspace:*",
+    "@nextblock-cms/sdk": "workspace:*"
+  },
+  "devDependencies": {
+    "@types/node": "22.10.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "19.0.2",
+    "autoprefixer": "^10.4.13",
+    "eslint": "^9.8.0",
+    "eslint-config-next": "^15.5.4",
+    "postcss": "^8.4.38",
+    "tailwindcss": "^3.4.3",
+    "typescript": "~5.8.2",
+    "typescript-eslint": "^8.0.0"
+  }
+}

package/templates/nextblock-template/tailwind.config.js

@@ -14,7 +14,7 @@ module.exports = {
     const libsDir = join(__dirname, '../../libs');
     if (existsSync(libsDir)) {
       projectGlobs.push(
-        join(libsDir, '**/*.{ts,tsx,js,jsx,md,mdx,html}')
+        join(libsDir, '**/*.{ts,tsx,js,jsx,md,mdx,html,sql}')
       );
     }
     return projectGlobs;

package/templates/nextblock-template/tsconfig.json

@@ -37,7 +37,8 @@
     "**/*.jsx",
     "next-env.d.ts",
     ".next/types/**/*.ts",
-    "../../dist/apps/nextblock/.next/types/**/*.ts"
+    "../../dist/apps/nextblock/.next/types/**/*.ts",
+    "../../tailwind.config.js"
   ],
   "exclude": [
     "node_modules",
@@ -59,4 +60,4 @@
       "path": "../../libs/utils/tsconfig.json"
     }
   ]
-}
+}