@nextbridgehq/payload-block-builder 0.1.7 → 0.1.9

package/README.md

@@ -1,38 +1,84 @@
 # Payload Block Builder
 
-Developed and open-sourced by [Nextbridge](https://nextbridge.com). This plugin was built to solve a real problem we kept running into: content editors needing to manage flexible page layouts without requiring a developer for every change.
+[![npm version](https://img.shields.io/npm/v/@nextbridgehq/payload-block-builder.svg)](https://www.npmjs.com/package/@nextbridgehq/payload-block-builder)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+[![Payload CMS](https://img.shields.io/badge/Payload-v3-blue.svg)](https://payloadcms.com)
+
+> A visual block builder plugin for Payload CMS v3. Design content blocks through a drag-and-drop UI, store schemas in your database, and let editors build pages without waiting on a developer.
+
+Developed and open-sourced by [Nextbridge](https://nextbridge.com).
+
+## Screenshots
+
+![Block Builder canvas](https://raw.githubusercontent.com/nextbridgehq/block-builder/main/docs/screenshots/canvas.png)
+![Schema builder field](https://raw.githubusercontent.com/nextbridgehq/block-builder/main/docs/screenshots/schema-builder.png)
+![DB Layout tab on a collection](https://raw.githubusercontent.com/nextbridgehq/block-builder/main/docs/screenshots/db-layout-tab.png)
 
 ---
 
-A visual block builder plugin for Payload v3. Design your content blocks through a drag-and-drop UI, store the schemas in your database, and let editors build pages without waiting on a developer every time something needs to change.
+## 🎯 The Problem
 
-## Use cases
+Content editors need to manage flexible page layouts — but every new block type or layout change requires a developer to update code, redeploy, and migrate. This creates bottlenecks, slows down marketing teams, and turns simple content tasks into engineering tickets.
 
-- **Dynamic landing pages:** Let editors compose pages from a library of blocks (hero, features, testimonials, CTA) without any code changes.
-- **Multi-tenant platforms:** Each tenant can have its own block definitions without touching shared config or triggering redeployments.
-- **Marketing teams:** Give marketing full control to create, update, and reorder blocks on any page, any time.
-- **Evolving content schemas:** Roll out new block versions without breaking content that was built against older ones.
-- **Headless frontends:** Fetch structured block data from the Payload API and render it with any framework.
+## 💡 The Solution
 
-## Quick start
+Payload Block Builder moves block schema definitions from code into your database. Editors design blocks visually, publish them instantly, and use them across any collection — all without touching code or triggering deployments.
 
-### Option A — Automatic setup (recommended)
+---
+
+## ✨ Features
+
+- **Visual drag-and-drop block designer** — No code required to create new block types
+- **Database-stored schemas** — Block definitions live in your DB, not your codebase
+- **Version snapshots** — Every publish creates an immutable version; existing content never breaks
+- **Collection integration** — Adds a "DB Layout" tab to any collection with one line of config
+- **13 field types** — text, textarea, number, email, date, checkbox, select, radio, upload, relationship, json, and more
+- **Multi-tenant ready** — Each tenant can have its own block definitions without shared config changes
+- **Framework agnostic frontend** — Fetch structured JSON and render with React, Vue, Svelte, or anything else
+- **Automatic init command** — Get up and running in under 2 minutes
+- **Works with all Payload databases** — PostgreSQL, SQLite, MongoDB — no database-specific code
+
+---
 
-Install the package and run the init command from your project root:
+## 📋 Compatibility
+
+| Requirement | Version |
+|---|---|
+| Payload CMS | v3.x |
+| Node.js | ≥ 18 |
+| Next.js | ≥ 14 |
+
+### Database Support
+
+| Database | Adapter |
+|---|---|
+| PostgreSQL / Supabase / Neon | `@payloadcms/db-postgres` |
+| SQLite / Turso / LibSQL | `@payloadcms/db-sqlite` |
+| MongoDB | `@payloadcms/db-mongodb` |
+
+---
+
+## 🚀 Quick Start
+
+### Option A — Automatic Setup (Recommended)
 
 ```bash
+# Install
 pnpm add @nextbridgehq/payload-block-builder
 # or: npm install @nextbridgehq/payload-block-builder
 
+# Initialize
 npx payload-block-builder init
 ```
 
 The init command automatically:
 
-- Creates `src/app/block-builder/page.tsx` — the builder UI page
-- Creates `src/app/block-builder/layout.tsx` — standalone layout with `<html>` and `<body>` tags
-- Updates `src/app/(payload)/custom.scss` — injects admin field styles
-- Updates `payload.config.ts` — adds the `dynamicBlocksPlugin` import and config
+| What it does | File |
+|---|---|
+| Creates the builder UI page | `src/app/block-builder/page.tsx` |
+| Creates a standalone layout | `src/app/block-builder/layout.tsx` |
+| Injects admin field styles | `src/app/(payload)/custom.scss` |
+| Adds plugin config | `payload.config.ts` |
 
 Then regenerate the import map and start your dev server:
 
@@ -41,9 +87,10 @@ pnpm generate:importmap
 pnpm dev
 ```
 
-Visit `http://localhost:3000/block-builder` and you're ready to build.
+Visit `https://your-domain.com/block-builder` and you're ready to build.
 
-> **PostgreSQL users:** Payload will automatically push the new schema tables on first startup in dev mode. If you are using migrations in production, run:
+> **PostgreSQL users:** Payload will automatically push new schema tables on first startup in dev mode. For production migrations:
+>
 > ```bash
 > pnpm payload migrate:create --name=add_block_builder
 > pnpm payload migrate
@@ -51,7 +98,8 @@ Visit `http://localhost:3000/block-builder` and you're ready to build.
 
 ---
 
-### Option B — Manual setup
+<details>
+<summary><strong>Option B — Manual Setup</strong></summary>
 
 **1. Install:**
 
@@ -77,11 +125,19 @@ export default buildConfig({
 
 ```tsx
 import React from 'react'
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getPayload } from 'payload'
+import config from '@payload-config'
 import '@nextbridgehq/payload-block-builder/builder.css'
 
 export const metadata = { title: 'Block Builder' }
 
-export default function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+export default async function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+  const payload = await getPayload({ config })
+  const { user } = await payload.auth({ headers: await headers() })
+  if (!user) redirect('/admin/login')
+
   return (
     <html lang="en">
       <body style={{ margin: 0, padding: 0, height: '100vh', overflow: 'hidden' }}>
@@ -118,19 +174,28 @@ pnpm generate:importmap
 pnpm dev
 ```
 
+</details>
+
 ---
 
-## Plugin options
+## ⚙️ Configuration Options
 
 ```ts
 dynamicBlocksPlugin({
-  enabled?: boolean      // Disable without removing. Default: true
-  collections?: string[] // Collection slugs that get the DB Layout tab. Default: []
-  fieldName?: string     // Name of the layout array field. Default: 'dbLayout'
-  tabLabel?: string      // Label shown on the tab in the admin UI. Default: 'DB Layout'
+  enabled?: boolean,       // Disable without removing. Default: true
+  collections?: string[],  // Collection slugs that get the DB Layout tab. Default: []
+  fieldName?: string,      // Name of the layout array field. Default: 'dbLayout'
+  tabLabel?: string,       // Label shown on the tab in the admin UI. Default: 'DB Layout'
 })
 ```
 
+| Option | Type | Default | Description |
+|---|---|---|---|
+| `enabled` | `boolean` | `true` | Toggle the plugin on/off without removing it from config |
+| `collections` | `string[]` | `[]` | Collection slugs that receive the DB Layout tab |
+| `fieldName` | `string` | `'dbLayout'` | The field name for the layout array stored on documents |
+| `tabLabel` | `string` | `'DB Layout'` | Label displayed on the tab in the Payload admin UI |
+
 The `--collections` flag is also supported in the init command:
 
 ```bash
@@ -139,17 +204,17 @@ npx payload-block-builder init --collections=pages,posts
 
 ---
 
-## Usage
+## 📖 Usage
 
-### Creating a block
+### Creating a Block
 
 1. Open `/block-builder` in your browser.
 2. Click "Add Block" and give it a name and slug.
 3. Drag fields from the panel on the right onto the canvas.
 4. Configure each field (label, name, required, options, etc.).
-5. Click Publish. The block schema is saved to your database and a version snapshot is created.
+5. Click Publish — the block schema is saved to your database and a version snapshot is created.
 
-### Using blocks in a collection
+### Using Blocks in a Collection
 
 Any collection listed in the `collections` option gets a new "DB Layout" tab in the Payload admin. Editors can:
 
@@ -159,33 +224,179 @@ Any collection listed in the `collections` option gets a new "DB Layout" tab in
 4. Reorder, hide, or add anchor IDs to individual block instances.
 5. Save the document as normal.
 
-### Reading block data on the frontend
+### Reading Block Data on the Frontend
 
 ```ts
 const res = await fetch('/api/pages/my-page?depth=2')
 const page = await res.json()
 
 for (const block of page.dbLayout) {
-  const type = block.blockDefinition.slug  // e.g. "hero"
-  const fields = block.data               // { heading: '...', image: '...', ... }
+  const type = block.blockDefinition.slug   // e.g. "hero"
+  const fields = block.data                 // { heading: '...', image: '...', ... }
   const isHidden = block.hidden
+  const anchor = block.anchorId
+}
+```
+
+### Example: React Component Map
+
+```tsx
+const blockComponents = {
+  hero: HeroBlock,
+  features: FeaturesBlock,
+  testimonials: TestimonialsBlock,
+  cta: CTABlock,
+}
+
+function PageRenderer({ blocks }) {
+  return (
+    <>
+      {blocks
+        .filter((block) => !block.hidden)
+        .map((block, i) => {
+          const Component = blockComponents[block.blockDefinition.slug]
+          if (!Component) return null
+          return (
+
+
+
+          )
+        })}
+    </>
+  )
+}
+```
+
+> **Note:** The inner JSX of the `return (` in the React Component Map example is intentionally left blank in this snippet — fill in with your `<section>` / `<Component>` rendering as appropriate for your app.
+
+---
+
+## 🧩 Supported Field Types
+
+| Type | Description | Admin UI |
+|---|---|---|
+| `text` | Single-line text input | Standard text field |
+| `textarea` | Multi-line text input | Expandable textarea |
+| `number` | Numeric input | Number field with validation |
+| `email` | Email address | Email field with validation |
+| `date` | Date picker | Calendar date picker |
+| `checkbox` | Boolean toggle | Checkbox input |
+| `select` | Dropdown with custom options | Select dropdown |
+| `radio` | Radio button group | Radio buttons |
+| `upload` | File/image picker | Media library picker |
+| `relationship` | Document picker from any collection | Relationship field |
+| `json` | Raw JSON data | JSON editor |
+
+---
+
+## 🏗️ Architecture
+
+```
+┌─────────────────────────────────────────────────────┐
+│                   Block Builder UI                  │
+│            /block-builder (drag & drop)             │
+└──────────────────────────┬──────────────────────────┘
+                           │ Publish
+                           ▼
+┌─────────────────────────────────────────────────────┐
+│            block-definitions collection             │
+│          (name, slug, field definitions)            │
+└──────────────────────────┬──────────────────────────┘
+                           │ Snapshot
+                           ▼
+┌─────────────────────────────────────────────────────┐
+│        block-definition-versions collection         │
+│      (immutable schema snapshots per publish)       │
+└──────────────────────────┬──────────────────────────┘
+                           │ Referenced by
+                           ▼
+┌─────────────────────────────────────────────────────┐
+│           Your Collection (e.g. "pages")            │
+│   dbLayout: [{ blockDefinition, version, data }]    │
+└─────────────────────────────────────────────────────┘
+```
+
+Key design decisions:
+
+- Block definitions are stored in a `block-definitions` collection. Each document is a named block type with a slug and a list of field definitions.
+- Versions are stored in a `block-definition-versions` collection. Every publish creates an immutable snapshot.
+- Documents in opted-in collections store a reference to the exact block version they were built against — updating a block schema later does not break existing content.
+- The DB Layout tab is injected automatically into each collection you list. It renders a dynamic array field where editors pick a block and version.
+- Four internal API endpoints power the builder UI and admin field components. You do not need to call them directly.
+
+---
+
+## 🔧 Advanced Usage
+
+### Using `dbLayoutField` Directly
+
+If you prefer not to use the plugin's `collections` option, you can add the layout tab manually to any collection:
+
+```ts
+import { dbLayoutField } from '@nextbridgehq/payload-block-builder'
+
+export const Pages: CollectionConfig = {
+  slug: 'pages',
+  fields: [
+    {
+      type: 'tabs',
+      tabs: [
+        { label: 'Content', fields: [/* your fields */] },
+        dbLayoutField(),                           // fieldName='dbLayout', tab label='DB Layout'
+        dbLayoutField('heroBlocks', 'Hero'),       // custom field name and tab label
+      ],
+    },
+  ],
 }
 ```
 
-Render each block type however you like — a switch statement or a component map both work well.
+---
+
+## 📦 CSS Imports Reference
+
+| Import path | Purpose |
+|---|---|
+| `@nextbridgehq/payload-block-builder/builder.css` | Block Builder UI page styles |
+| `@nextbridgehq/payload-block-builder/block-data-field.css` | DB Layout field styles in admin |
+| `@nextbridgehq/payload-block-builder/schema-builder-field.css` | Schema Builder field styles in admin |
+
+---
+
+## 🗺️ Use Cases
+
+| Use Case | How It Helps |
+|---|---|
+| Dynamic landing pages | Editors compose pages from a library of blocks (hero, features, testimonials, CTA) without code changes |
+| Multi-tenant platforms | Each tenant gets its own block definitions without touching shared config or triggering redeployments |
+| Marketing teams | Full control to create, update, and reorder blocks on any page, any time |
+| Evolving content schemas | Roll out new block versions without breaking content built against older ones |
+| Headless frontends | Fetch structured block data from the Payload API and render with any framework |
 
 ---
 
-## How it works
+## 🤝 Contributing
 
-- **Block definitions** are stored in a `block-definitions` collection. Each document is a named block type with a slug and a list of field definitions.
-- **Versions** are stored in a `block-definition-versions` collection. Every time you publish a block, a snapshot of its schema is saved as a new version.
-- **Documents** in opted-in collections store a reference to the exact block version they were built against, so updating a block schema later does not break existing content.
-- **The DB Layout tab** is injected automatically into each collection you list. It renders a dynamic array field where editors pick a block and version, and the field UI adjusts to match.
-- **Four internal API endpoints** power the builder UI and the admin field components. You do not need to call them directly.
+Contributions are welcome! Please see our Contributing Guide for details.
+
+- Fork the repository
+- Create your feature branch (`git checkout -b feature/amazing-feature`)
+- Commit your changes (`git commit -m 'Add amazing feature'`)
+- Push to the branch (`git push origin feature/amazing-feature`)
+- Open a Pull Request
 
 ---
 
-## License
+## 📄 License
 
 MIT © [Nextbridge](https://nextbridge.com)
+
+---
+
+## 🔗 Links
+
+- [npm Package](https://www.npmjs.com/package/@nextbridgehq/payload-block-builder)
+- [GitHub Repository](https://github.com/nextbridgehq/block-builder)
+- [Report a Bug](https://github.com/nextbridgehq/block-builder/issues)
+- [Payload CMS](https://payloadcms.com)
+
+Built with ❤️ by Nextbridge

package/dist/bin/init.js

@@ -1,5 +1,4 @@
 #!/usr/bin/env node
-#!/usr/bin/env node
 
 // src/bin/init.ts
 import fs from "fs";
@@ -13,13 +12,21 @@ export default function BlockBuilderPage() {
 }
 `;
 var LAYOUT_CONTENT = `import React from 'react'
+import { headers } from 'next/headers'
+import { redirect } from 'next/navigation'
+import { getPayload } from 'payload'
+import config from '@payload-config'
 import '@nextbridgehq/payload-block-builder/builder.css'
 
 export const metadata = {
   title: 'Block Builder',
 }
 
-export default function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+export default async function BlockBuilderLayout({ children }: { children: React.ReactNode }) {
+  const payload = await getPayload({ config })
+  const { user } = await payload.auth({ headers: await headers() })
+  if (!user) redirect('/admin/login')
+
   return (
     <html lang="en">
       <body style={{ margin: 0, padding: 0, height: '100vh', overflow: 'hidden' }}>
@@ -76,7 +83,7 @@ function addImport(content) {
   while ((m = lastFromRegex.exec(content)) !== null) lastMatch = m;
   if (!lastMatch) return newImport + "\n" + content;
   const insertPos = lastMatch.index + lastMatch[0].length;
-  return content.slice(0, insertPos) + "\n" + newImport + content.slice(insertPos);
+  return content.slice(0, insertPos) + "\n" + newImport + "\n" + content.slice(insertPos);
 }
 function insertIntoPluginsArray(content, collectionsArg) {
   const pluginsMatch = /\bplugins\s*:\s*\[/.exec(content);
@@ -84,13 +91,19 @@ function insertIntoPluginsArray(content, collectionsArg) {
   const openPos = content.indexOf("[", pluginsMatch.index);
   const closePos = findClosingBracket(content, openPos);
   if (closePos === -1) return null;
+  const beforePlugins = content.slice(0, pluginsMatch.index);
+  const pluginsLineStart = beforePlugins.lastIndexOf("\n") + 1;
+  const outerIndent = content.slice(pluginsLineStart, pluginsMatch.index).match(/^([ \t]*)/)?.[1] ?? "  ";
+  const entryIndent = outerIndent + "  ";
   const beforeClose = content.slice(0, closePos);
   const prevNL = beforeClose.lastIndexOf("\n");
-  const closingIndent = beforeClose.slice(prevNL + 1).match(/^([ \t]*)/)?.[1] ?? "  ";
-  const entryIndent = closingIndent + "  ";
-  const newLine = `${entryIndent}dynamicBlocksPlugin({ collections: [${collectionsArg}] }),
-`;
-  return content.slice(0, prevNL + 1) + newLine + content.slice(prevNL + 1);
+  const isSingleLine = prevNL < openPos;
+  const newEntry = `${entryIndent}dynamicBlocksPlugin({ collections: [${collectionsArg}] }),`;
+  if (isSingleLine) {
+    return content.slice(0, openPos + 1) + "\n" + newEntry + "\n" + outerIndent + content.slice(closePos);
+  } else {
+    return content.slice(0, prevNL + 1) + newEntry + "\n" + content.slice(prevNL + 1);
+  }
 }
 function injectPluginsBlock(content, collectionsArg) {
   const collMatch = /\bcollections\s*:\s*\[/.exec(content);
@@ -110,7 +123,13 @@ ${outerIndent}],`;
   return content.slice(0, afterCollLine) + "\n" + pluginsBlock + content.slice(afterCollLine);
 }
 function modifyPayloadConfig(configPath, collectionsArg) {
-  let content = fs.readFileSync(configPath, "utf8");
+  let content;
+  try {
+    content = fs.readFileSync(configPath, "utf8");
+  } catch (err) {
+    console.error(`Error: Could not read ${configPath}: ${err.message}`);
+    process.exit(1);
+  }
   if (content.includes("dynamicBlocksPlugin")) {
     console.log(`Skipped: dynamicBlocksPlugin already present in ${configPath}`);
     return;
@@ -119,8 +138,16 @@ function modifyPayloadConfig(configPath, collectionsArg) {
   const noComments = content.replace(/\/\/[^\n]*/g, "");
   const hasPluginsArray = /\bplugins\s*:\s*\[/.test(noComments);
   const hasPluginsShorthand = /^\s*plugins\s*,/m.test(noComments);
+  function writeConfig(data) {
+    try {
+      fs.writeFileSync(configPath, data, "utf8");
+    } catch (err) {
+      console.error(`Error: Could not write ${configPath}: ${err.message}`);
+      process.exit(1);
+    }
+  }
   if (hasPluginsShorthand && !hasPluginsArray) {
-    fs.writeFileSync(configPath, content, "utf8");
+    writeConfig(content);
     console.log(`Updated: ${configPath} (added import)`);
     console.log(`  Note: 'plugins' is imported from another file.`);
     console.log(`  Add dynamicBlocksPlugin({ collections: ['pages'] }) to that file manually.`);
@@ -133,13 +160,13 @@ function modifyPayloadConfig(configPath, collectionsArg) {
     result = injectPluginsBlock(content, collectionsArg);
   }
   if (result === null) {
-    fs.writeFileSync(configPath, content, "utf8");
+    writeConfig(content);
     console.log(`Updated: ${configPath} (added import only)`);
     console.log(`  Could not auto-detect plugins array. Add manually:`);
     console.log(`  plugins: [ dynamicBlocksPlugin({ collections: [${collectionsArg}] }) ]`);
     return;
   }
-  fs.writeFileSync(configPath, result, "utf8");
+  writeConfig(result);
   console.log(`Updated: ${configPath} (added dynamicBlocksPlugin)`);
 }
 function printNextSteps(dbAdapter) {
@@ -165,7 +192,14 @@ function printNextSteps(dbAdapter) {
 function main() {
   const args = process.argv.slice(2);
   const collectionsFlag = args.find((a) => a.startsWith("--collections="));
-  const collectionsValue = collectionsFlag ? collectionsFlag.replace("--collections=", "").split(",").map((s) => s.trim()) : ["pages"];
+  const rawCollections = collectionsFlag ? collectionsFlag.replace("--collections=", "").split(",").map((s) => s.trim()) : ["pages"];
+  const invalidSlugs = rawCollections.filter((c) => !/^[a-z0-9_-]+$/i.test(c));
+  if (invalidSlugs.length > 0) {
+    console.error(`Error: Invalid collection slug(s): ${invalidSlugs.join(", ")}`);
+    console.error("Collection slugs may only contain letters, numbers, hyphens, and underscores.");
+    process.exit(1);
+  }
+  const collectionsValue = rawCollections;
   const collectionsArg = collectionsValue.map((c) => `'${c}'`).join(", ");
   const appDir = findAppDir();
   if (!appDir) {
@@ -173,32 +207,52 @@ function main() {
     process.exit(1);
   }
   const builderDir = path.join(appDir, "block-builder");
-  if (!fs.existsSync(builderDir)) {
-    fs.mkdirSync(builderDir, { recursive: true });
+  try {
+    if (!fs.existsSync(builderDir)) {
+      fs.mkdirSync(builderDir, { recursive: true });
+    }
+  } catch (err) {
+    console.error(`Error: Could not create directory ${builderDir}: ${err.message}`);
+    process.exit(1);
   }
   const pagePath = path.join(builderDir, "page.tsx");
   const layoutPath = path.join(builderDir, "layout.tsx");
   if (fs.existsSync(pagePath)) {
     console.log(`Skipped: ${pagePath} already exists`);
   } else {
-    fs.writeFileSync(pagePath, PAGE_CONTENT);
-    console.log(`Created: ${pagePath}`);
+    try {
+      fs.writeFileSync(pagePath, PAGE_CONTENT);
+      console.log(`Created: ${pagePath}`);
+    } catch (err) {
+      console.error(`Error: Could not write ${pagePath}: ${err.message}`);
+      process.exit(1);
+    }
   }
   if (fs.existsSync(layoutPath)) {
     console.log(`Skipped: ${layoutPath} already exists`);
   } else {
-    fs.writeFileSync(layoutPath, LAYOUT_CONTENT);
-    console.log(`Created: ${layoutPath}`);
+    try {
+      fs.writeFileSync(layoutPath, LAYOUT_CONTENT);
+      console.log(`Created: ${layoutPath}`);
+    } catch (err) {
+      console.error(`Error: Could not write ${layoutPath}: ${err.message}`);
+      process.exit(1);
+    }
   }
   const payloadRouteDir = path.join(appDir, "(payload)");
   const customScssPath = path.join(payloadRouteDir, "custom.scss");
   if (fs.existsSync(customScssPath)) {
-    const existing = fs.readFileSync(customScssPath, "utf8");
-    if (!existing.includes("@nextbridgehq/payload-block-builder")) {
-      fs.appendFileSync(customScssPath, "\n" + CUSTOM_SCSS_IMPORTS);
-      console.log(`Updated: ${customScssPath} (added admin field styles)`);
-    } else {
-      console.log(`Skipped: ${customScssPath} already has block-builder imports`);
+    try {
+      const existing = fs.readFileSync(customScssPath, "utf8");
+      if (!existing.includes("@nextbridgehq/payload-block-builder")) {
+        fs.appendFileSync(customScssPath, "\n" + CUSTOM_SCSS_IMPORTS);
+        console.log(`Updated: ${customScssPath} (added admin field styles)`);
+      } else {
+        console.log(`Skipped: ${customScssPath} already has block-builder imports`);
+      }
+    } catch (err) {
+      console.error(`Error: Could not update ${customScssPath}: ${err.message}`);
+      process.exit(1);
     }
   }
   const configPath = findPayloadConfig();