payload-section-builder 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Bram den Elzen
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,129 @@
-# Temporary Holding Version
+# payload-section-builder
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Visual section builder for [Payload CMS](https://payloadcms.com). Editors click a section in the
+live preview to edit it in the sidebar, and rearrange sections without leaving the preview.
+
+> Status: phase 0 prototype. Selecting a section and moving it up or down work end to end.
+> The section library, drag and drop and per-page-type rules follow in the next phases.
+
+## How it works
+
+```
+Payload admin (edit view)                     Preview iframe (your frontend)
+┌──────────────────────────┐   live data     ┌──────────────────────────────┐
+│ Document form            │ ──────────────▶ │ Sections with data attributes│
+│ SectionBridge (UI field) │ ◀────────────── │ Overlay: outlines, toolbar    │
+└──────────────────────────┘   edit intents  └──────────────────────────────┘
+```
+
+- The **bridge** is mounted inside the document form as a UI field (it stores nothing). It applies
+  intents from the preview to the form with Payload's own form API, so drafts, validation and
+  autosave keep working.
+- The **overlay** is framework-free. It only switches on inside the live preview after the admin
+  answers a handshake, so production pages are never affected.
+- Messages carry a `source` and protocol `version`, and both sides check the origin.
+
+## Usage
+
+**Full guide for client projects: [docs/client-setup.md](docs/client-setup.md)** (install, your own sections, preview route, styling, troubleshooting).
+
+
+```ts
+// payload.config.ts
+import { sectionBuilder } from 'payload-section-builder'
+
+export default buildConfig({
+  plugins: [
+    sectionBuilder({
+      collections: {
+        pages: { field: 'layout' }, // a top-level blocks field
+      },
+    }),
+  ],
+})
+```
+
+```tsx
+// Preview page (React)
+import { sectionAttributes, SectionOverlay } from 'payload-section-builder/react'
+
+{data.layout?.map((section, index) => (
+  <section key={section.id} {...sectionAttributes(index, section.blockType)}>…</section>
+))}
+<SectionOverlay adminOrigin={process.env.NEXT_PUBLIC_SERVER_URL!} />
+```
+
+Not using React? Call `initSectionOverlay({ adminOrigin })` from `payload-section-builder/overlay`.
+
+## Your sections, your styling
+
+The plugin ships **no sections and no site styles**. Each client project owns both:
+
+- **Sections** are ordinary Payload blocks in your own config. Use any fields you like.
+- **Rendering** is your own components with your own CSS, Tailwind or anything else.
+- **The only contract** is one spread on each section's root element: `{...sectionAttributes(index, block.blockType)}`.
+  This adds two `data-` attributes and changes nothing visually.
+
+The plugin only handles the editing bridge between the preview and the admin. The one thing it draws is
+the editor chrome (hover outline, selection outline, label and toolbar), and only inside the live preview.
+To match your brand, override its CSS variables:
+
+```css
+:root {
+  --psb-accent: #0f766e;
+  --psb-accent-soft: rgba(15, 118, 110, .2);
+  --psb-toolbar-bg: #111;
+  --psb-font: 500 13px/1 'Inter', sans-serif;
+}
+```
+
+You can also turn the default chrome styles off and style the `.psb-box`, `.psb-hover`, `.psb-selected`,
+`.psb-label` and `.psb-toolbar` classes yourself: `<SectionOverlay adminOrigin={url} injectStyles={false} />`.
+
+The sections in `dev/` exist only to exercise the plugin in the playground. They are not published.
+
+## Entry points
+
+| Import | Contents |
+| --- | --- |
+| `payload-section-builder` | `sectionBuilder()` plugin, `sectionAttributes()` |
+| `payload-section-builder/client` | `SectionBridge` admin component (referenced by the plugin) |
+| `payload-section-builder/overlay` | Framework-free `initSectionOverlay()` |
+| `payload-section-builder/react` | `<SectionOverlay />`, `sectionAttributes()` |
+
+## Development
+
+The `dev/` folder is a Payload + Next.js playground on SQLite (`dev/dev.db`, gitignored). It seeds a
+user (`dev@payloadcms.com` / `test`) and a Home page with four sections.
+
+Playground routes:
+
+| Route | Shows |
+| --- | --- |
+| `/` | The published page with slug `home` (`/home` redirects here) |
+| `/[slug]` | Any other published page. Draft-only pages return 404 in production; in development they show a "not published yet" message. |
+| `/preview/[id]` | Live preview, by document id, including unpublished drafts. Payload only shows the Live Preview button after a page has been saved once. |
+
+```bash
+pnpm install
+pnpm dev              # http://localhost:3000/admin, open Pages > Home > Live Preview
+pnpm typecheck
+pnpm test:int         # plugin config tests (vitest)
+pnpm test:e2e         # select and move a section in the browser (Playwright)
+pnpm build            # outputs dist/
+```
+
+## Publishing
+
+```bash
+npm version patch     # or minor; commit and tag
+npm publish           # the prepare script builds dist first
+```
+
+`exports` already point at `dist`, so `npm publish` and `pnpm publish` produce the same package.
+Check what will ship with `npm pack --dry-run`: every entry point needs a `.js` and a `.d.ts` file
+in `dist/`.
+
+## License
+
+MIT

package/dist/admin/SectionBridge.d.ts

@@ -0,0 +1,9 @@
+export type SectionBridgeProps = {
+    fieldPath: string;
+    previewOrigin?: string;
+};
+/**
+ * Lives inside the document form. Receives intents from the preview overlay and
+ * applies them to the form, so drafts, validation and autosave keep working as usual.
+ */
+export declare const SectionBridge: ({ fieldPath, previewOrigin }: SectionBridgeProps) => null;

package/dist/admin/SectionBridge.js

@@ -0,0 +1,139 @@
+'use client';
+import { useForm, useFormFields, useLivePreviewContext } from '@payloadcms/ui';
+import { useCallback, useEffect, useRef } from 'react';
+import { isEnvelope, wrap } from '../protocol.js';
+const rowElementID = (path, index)=>`${path.split('.').join('-')}-row-${index}`;
+/**
+ * Lives inside the document form. Receives intents from the preview overlay and
+ * applies them to the form, so drafts, validation and autosave keep working as usual.
+ */ export const SectionBridge = ({ fieldPath, previewOrigin })=>{
+    const { dispatchFields, moveFieldRow } = useForm();
+    const rows = useFormFields(([fields])=>fields[fieldPath]?.rows);
+    const { iframeRef, loadedURL, popupRef, previewWindowType } = useLivePreviewContext();
+    const rowsRef = useRef([]);
+    rowsRef.current = rows ?? [];
+    const targetOrigin = previewOrigin ?? (loadedURL ? new URL(loadedURL).origin : undefined);
+    const getPreviewWindow = useCallback(()=>{
+        if (previewWindowType === 'popup') {
+            return popupRef?.current;
+        }
+        return iframeRef.current?.contentWindow;
+    }, [
+        iframeRef,
+        popupRef,
+        previewWindowType
+    ]);
+    const send = useCallback((message)=>{
+        const target = getPreviewWindow();
+        if (target && targetOrigin) {
+            target.postMessage(wrap(message), targetOrigin);
+        }
+    }, [
+        getPreviewWindow,
+        targetOrigin
+    ]);
+    const selectRow = useCallback((index)=>{
+        const current = rowsRef.current;
+        if (index < 0 || index >= current.length) {
+            return;
+        }
+        // Collapse every other section so the sidebar only shows the selected one.
+        dispatchFields({
+            type: 'SET_ALL_ROWS_COLLAPSED',
+            path: fieldPath,
+            updatedRows: current.map((row, i)=>({
+                    ...row,
+                    collapsed: i !== index
+                }))
+        });
+        requestAnimationFrame(()=>{
+            const element = document.getElementById(rowElementID(fieldPath, index));
+            element?.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+            const firstInput = element?.querySelector('.blocks-field__row input, .blocks-field__row textarea, input, textarea');
+            firstInput?.focus({
+                preventScroll: true
+            });
+        });
+    }, [
+        dispatchFields,
+        fieldPath
+    ]);
+    useEffect(()=>{
+        const onMessage = (event)=>{
+            if (!isEnvelope(event.data)) {
+                return;
+            }
+            if (targetOrigin && event.origin !== targetOrigin) {
+                return;
+            }
+            if (event.source !== getPreviewWindow()) {
+                return;
+            }
+            const message = event.data;
+            switch(message.type){
+                case 'move-block':
+                    {
+                        const count = rowsRef.current.length;
+                        const { from, to } = message;
+                        if (from === to || from < 0 || to < 0 || from >= count || to >= count) {
+                            return;
+                        }
+                        moveFieldRow({
+                            moveFromIndex: from,
+                            moveToIndex: to,
+                            path: fieldPath
+                        });
+                        send({
+                            type: 'selection-changed',
+                            index: to
+                        });
+                        break;
+                    }
+                case 'overlay-hello':
+                    {
+                        send({
+                            type: 'editor-ready',
+                            blockCount: rowsRef.current.length
+                        });
+                        break;
+                    }
+                case 'select-block':
+                    {
+                        selectRow(message.index);
+                        send({
+                            type: 'selection-changed',
+                            index: message.index
+                        });
+                        break;
+                    }
+            }
+        };
+        window.addEventListener('message', onMessage);
+        return ()=>window.removeEventListener('message', onMessage);
+    }, [
+        fieldPath,
+        getPreviewWindow,
+        moveFieldRow,
+        selectRow,
+        send,
+        targetOrigin
+    ]);
+    // Announce ourselves whenever a (new) preview page finishes loading.
+    useEffect(()=>{
+        if (loadedURL) {
+            send({
+                type: 'editor-ready',
+                blockCount: rowsRef.current.length
+            });
+        }
+    }, [
+        loadedURL,
+        send
+    ]);
+    return null;
+};
+
+//# sourceMappingURL=SectionBridge.js.map

package/dist/admin/SectionBridge.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/admin/SectionBridge.tsx"],"sourcesContent":["'use client'\n\nimport type { Row } from 'payload'\n\nimport { useForm, useFormFields, useLivePreviewContext } from '@payloadcms/ui'\nimport { useCallback, useEffect, useRef } from 'react'\n\nimport type { AdminToPreviewMessage, PreviewToAdminMessage } from '../protocol.js'\n\nimport { isEnvelope, wrap } from '../protocol.js'\n\nexport type SectionBridgeProps = {\n  fieldPath: string\n  previewOrigin?: string\n}\n\nconst rowElementID = (path: string, index: number) => `${path.split('.').join('-')}-row-${index}`\n\n/**\n * Lives inside the document form. Receives intents from the preview overlay and\n * applies them to the form, so drafts, validation and autosave keep working as usual.\n */\nexport const SectionBridge = ({ fieldPath, previewOrigin }: SectionBridgeProps) => {\n  const { dispatchFields, moveFieldRow } = useForm()\n  const rows = useFormFields(([fields]) => fields[fieldPath]?.rows) as Row[] | undefined\n  const { iframeRef, loadedURL, popupRef, previewWindowType } = useLivePreviewContext()\n\n  const rowsRef = useRef<Row[]>([])\n  rowsRef.current = rows ?? []\n\n  const targetOrigin = previewOrigin ?? (loadedURL ? new URL(loadedURL).origin : undefined)\n\n  const getPreviewWindow = useCallback((): null | Window | undefined => {\n    if (previewWindowType === 'popup') {\n      return popupRef?.current\n    }\n    return iframeRef.current?.contentWindow\n  }, [iframeRef, popupRef, previewWindowType])\n\n  const send = useCallback(\n    (message: AdminToPreviewMessage) => {\n      const target = getPreviewWindow()\n      if (target && targetOrigin) {\n        target.postMessage(wrap(message), targetOrigin)\n      }\n    },\n    [getPreviewWindow, targetOrigin],\n  )\n\n  const selectRow = useCallback(\n    (index: number) => {\n      const current = rowsRef.current\n      if (index < 0 || index >= current.length) {\n        return\n      }\n\n      // Collapse every other section so the sidebar only shows the selected one.\n      dispatchFields({\n        type: 'SET_ALL_ROWS_COLLAPSED',\n        path: fieldPath,\n        updatedRows: current.map((row, i) => ({ ...row, collapsed: i !== index })),\n      })\n\n      requestAnimationFrame(() => {\n        const element = document.getElementById(rowElementID(fieldPath, index))\n        element?.scrollIntoView({ behavior: 'smooth', block: 'start' })\n        const firstInput = element?.querySelector<HTMLElement>(\n          '.blocks-field__row input, .blocks-field__row textarea, input, textarea',\n        )\n        firstInput?.focus({ preventScroll: true })\n      })\n    },\n    [dispatchFields, fieldPath],\n  )\n\n  useEffect(() => {\n    const onMessage = (event: MessageEvent) => {\n      if (!isEnvelope(event.data)) {\n        return\n      }\n      if (targetOrigin && event.origin !== targetOrigin) {\n        return\n      }\n      if (event.source !== getPreviewWindow()) {\n        return\n      }\n\n      const message = event.data as unknown as PreviewToAdminMessage\n\n      switch (message.type) {\n        case 'move-block': {\n          const count = rowsRef.current.length\n          const { from, to } = message\n          if (from === to || from < 0 || to < 0 || from >= count || to >= count) {\n            return\n          }\n          moveFieldRow({ moveFromIndex: from, moveToIndex: to, path: fieldPath })\n          send({ type: 'selection-changed', index: to })\n          break\n        }\n        case 'overlay-hello': {\n          send({ type: 'editor-ready', blockCount: rowsRef.current.length })\n          break\n        }\n        case 'select-block': {\n          selectRow(message.index)\n          send({ type: 'selection-changed', index: message.index })\n          break\n        }\n      }\n    }\n\n    window.addEventListener('message', onMessage)\n    return () => window.removeEventListener('message', onMessage)\n  }, [fieldPath, getPreviewWindow, moveFieldRow, selectRow, send, targetOrigin])\n\n  // Announce ourselves whenever a (new) preview page finishes loading.\n  useEffect(() => {\n    if (loadedURL) {\n      send({ type: 'editor-ready', blockCount: rowsRef.current.length })\n    }\n  }, [loadedURL, send])\n\n  return null\n}\n"],"names":["useForm","useFormFields","useLivePreviewContext","useCallback","useEffect","useRef","isEnvelope","wrap","rowElementID","path","index","split","join","SectionBridge","fieldPath","previewOrigin","dispatchFields","moveFieldRow","rows","fields","iframeRef","loadedURL","popupRef","previewWindowType","rowsRef","current","targetOrigin","URL","origin","undefined","getPreviewWindow","contentWindow","send","message","target","postMessage","selectRow","length","type","updatedRows","map","row","i","collapsed","requestAnimationFrame","element","document","getElementById","scrollIntoView","behavior","block","firstInput","querySelector","focus","preventScroll","onMessage","event","data","source","count","from","to","moveFromIndex","moveToIndex","blockCount","window","addEventListener","removeEventListener"],"mappings":"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"}

package/dist/exports/client.d.ts

@@ -0,0 +1 @@
+export { SectionBridge } from '../admin/SectionBridge.js';

package/dist/exports/client.js

@@ -0,0 +1,3 @@
+export { SectionBridge } from '../admin/SectionBridge.js';
+
+//# sourceMappingURL=client.js.map

package/dist/exports/client.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/client.ts"],"sourcesContent":["export { SectionBridge } from '../admin/SectionBridge.js'\n"],"names":["SectionBridge"],"mappings":"AAAA,SAASA,aAAa,QAAQ,4BAA2B"}

package/dist/exports/overlay.d.ts

@@ -0,0 +1,2 @@
+export { initSectionOverlay, type SectionOverlayOptions } from '../overlay/index.js';
+export { sectionAttributes } from '../protocol.js';

package/dist/exports/overlay.js

@@ -0,0 +1,4 @@
+export { initSectionOverlay } from '../overlay/index.js';
+export { sectionAttributes } from '../protocol.js';
+
+//# sourceMappingURL=overlay.js.map

package/dist/exports/overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/overlay.ts"],"sourcesContent":["export { initSectionOverlay, type SectionOverlayOptions } from '../overlay/index.js'\nexport { sectionAttributes } from '../protocol.js'\n"],"names":["initSectionOverlay","sectionAttributes"],"mappings":"AAAA,SAASA,kBAAkB,QAAoC,sBAAqB;AACpF,SAASC,iBAAiB,QAAQ,iBAAgB"}

package/dist/exports/react.d.ts

@@ -0,0 +1,2 @@
+export { SectionOverlay, type SectionOverlayProps } from '../react/SectionOverlay.js';
+export { sectionAttributes } from '../protocol.js';

package/dist/exports/react.js

@@ -0,0 +1,4 @@
+export { SectionOverlay } from '../react/SectionOverlay.js';
+export { sectionAttributes } from '../protocol.js';
+
+//# sourceMappingURL=react.js.map

package/dist/exports/react.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/exports/react.ts"],"sourcesContent":["export { SectionOverlay, type SectionOverlayProps } from '../react/SectionOverlay.js'\nexport { sectionAttributes } from '../protocol.js'\n"],"names":["SectionOverlay","sectionAttributes"],"mappings":"AAAA,SAASA,cAAc,QAAkC,6BAA4B;AACrF,SAASC,iBAAiB,QAAQ,iBAAgB"}

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+import type { CollectionSlug, Config } from 'payload';
+export type SectionBuilderCollectionOptions = {
+    /** Name of the top-level blocks field that holds the sections, e.g. `layout`. */
+    field: string;
+};
+export type SectionBuilderConfig = {
+    /**
+     * Collections that get the visual section builder, and which blocks field it drives.
+     * Known slugs autocomplete; any string is accepted so the config still type-checks
+     * before `payload generate:types` has picked up a newly added collection.
+     */
+    collections: Partial<Record<CollectionSlug, SectionBuilderCollectionOptions>> & Record<string, SectionBuilderCollectionOptions | undefined>;
+    /** Turns the editor off without changing the schema. */
+    disabled?: boolean;
+    /**
+     * Origin of the preview frontend, e.g. `https://www.client.com`. Messages are only
+     * accepted from and sent to this origin. Defaults to the origin of the loaded preview URL.
+     */
+    previewOrigin?: string;
+};
+export { sectionAttributes } from './protocol.js';
+export declare const BRIDGE_FIELD_NAME = "_sectionBuilderBridge";
+export declare const sectionBuilder: (options: SectionBuilderConfig) => (config: Config) => Config;

package/dist/index.js

@@ -0,0 +1,40 @@
+export { sectionAttributes } from './protocol.js';
+export const BRIDGE_FIELD_NAME = '_sectionBuilderBridge';
+export const sectionBuilder = (options)=>(config)=>{
+        if (options.disabled) {
+            return config;
+        }
+        for (const [slug, collectionOptions] of Object.entries(options.collections)){
+            if (!collectionOptions) {
+                continue;
+            }
+            const collection = config.collections?.find((c)=>c.slug === slug);
+            if (!collection) {
+                throw new Error(`[section-builder] Collection "${slug}" was not found in the Payload config.`);
+            }
+            const blocksField = collection.fields.find((field)=>'name' in field && field.name === collectionOptions.field);
+            if (!blocksField || blocksField.type !== 'blocks') {
+                throw new Error(`[section-builder] "${slug}.${collectionOptions.field}" must be a top-level blocks field.`);
+            }
+            // A UI field stores nothing; it only mounts the bridge inside the document form,
+            // where it can reach the form state and the live preview window.
+            collection.fields.push({
+                name: BRIDGE_FIELD_NAME,
+                type: 'ui',
+                admin: {
+                    components: {
+                        Field: {
+                            clientProps: {
+                                fieldPath: collectionOptions.field,
+                                previewOrigin: options.previewOrigin
+                            },
+                            path: 'payload-section-builder/client#SectionBridge'
+                        }
+                    }
+                }
+            });
+        }
+        return config;
+    };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.ts"],"sourcesContent":["import type { CollectionSlug, Config } from 'payload'\n\nexport type SectionBuilderCollectionOptions = {\n  /** Name of the top-level blocks field that holds the sections, e.g. `layout`. */\n  field: string\n}\n\nexport type SectionBuilderConfig = {\n  /**\n   * Collections that get the visual section builder, and which blocks field it drives.\n   * Known slugs autocomplete; any string is accepted so the config still type-checks\n   * before `payload generate:types` has picked up a newly added collection.\n   */\n  collections: Partial<Record<CollectionSlug, SectionBuilderCollectionOptions>> &\n    Record<string, SectionBuilderCollectionOptions | undefined>\n  /** Turns the editor off without changing the schema. */\n  disabled?: boolean\n  /**\n   * Origin of the preview frontend, e.g. `https://www.client.com`. Messages are only\n   * accepted from and sent to this origin. Defaults to the origin of the loaded preview URL.\n   */\n  previewOrigin?: string\n}\n\nexport { sectionAttributes } from './protocol.js'\n\nexport const BRIDGE_FIELD_NAME = '_sectionBuilderBridge'\n\nexport const sectionBuilder =\n  (options: SectionBuilderConfig) =>\n  (config: Config): Config => {\n    if (options.disabled) {\n      return config\n    }\n\n    for (const [slug, collectionOptions] of Object.entries(options.collections)) {\n      if (!collectionOptions) {\n        continue\n      }\n\n      const collection = config.collections?.find((c) => c.slug === slug)\n\n      if (!collection) {\n        throw new Error(`[section-builder] Collection \"${slug}\" was not found in the Payload config.`)\n      }\n\n      const blocksField = collection.fields.find(\n        (field) => 'name' in field && field.name === collectionOptions.field,\n      )\n\n      if (!blocksField || blocksField.type !== 'blocks') {\n        throw new Error(\n          `[section-builder] \"${slug}.${collectionOptions.field}\" must be a top-level blocks field.`,\n        )\n      }\n\n      // A UI field stores nothing; it only mounts the bridge inside the document form,\n      // where it can reach the form state and the live preview window.\n      collection.fields.push({\n        name: BRIDGE_FIELD_NAME,\n        type: 'ui',\n        admin: {\n          components: {\n            Field: {\n              clientProps: {\n                fieldPath: collectionOptions.field,\n                previewOrigin: options.previewOrigin,\n              },\n              path: 'payload-section-builder/client#SectionBridge',\n            },\n          },\n        },\n      })\n    }\n\n    return config\n  }\n"],"names":["sectionAttributes","BRIDGE_FIELD_NAME","sectionBuilder","options","config","disabled","slug","collectionOptions","Object","entries","collections","collection","find","c","Error","blocksField","fields","field","name","type","push","admin","components","Field","clientProps","fieldPath","previewOrigin","path"],"mappings":"AAwBA,SAASA,iBAAiB,QAAQ,gBAAe;AAEjD,OAAO,MAAMC,oBAAoB,wBAAuB;AAExD,OAAO,MAAMC,iBACX,CAACC,UACD,CAACC;QACC,IAAID,QAAQE,QAAQ,EAAE;YACpB,OAAOD;QACT;QAEA,KAAK,MAAM,CAACE,MAAMC,kBAAkB,IAAIC,OAAOC,OAAO,CAACN,QAAQO,WAAW,EAAG;YAC3E,IAAI,CAACH,mBAAmB;gBACtB;YACF;YAEA,MAAMI,aAAaP,OAAOM,WAAW,EAAEE,KAAK,CAACC,IAAMA,EAAEP,IAAI,KAAKA;YAE9D,IAAI,CAACK,YAAY;gBACf,MAAM,IAAIG,MAAM,CAAC,8BAA8B,EAAER,KAAK,sCAAsC,CAAC;YAC/F;YAEA,MAAMS,cAAcJ,WAAWK,MAAM,CAACJ,IAAI,CACxC,CAACK,QAAU,UAAUA,SAASA,MAAMC,IAAI,KAAKX,kBAAkBU,KAAK;YAGtE,IAAI,CAACF,eAAeA,YAAYI,IAAI,KAAK,UAAU;gBACjD,MAAM,IAAIL,MACR,CAAC,mBAAmB,EAAER,KAAK,CAAC,EAAEC,kBAAkBU,KAAK,CAAC,mCAAmC,CAAC;YAE9F;YAEA,iFAAiF;YACjF,iEAAiE;YACjEN,WAAWK,MAAM,CAACI,IAAI,CAAC;gBACrBF,MAAMjB;gBACNkB,MAAM;gBACNE,OAAO;oBACLC,YAAY;wBACVC,OAAO;4BACLC,aAAa;gCACXC,WAAWlB,kBAAkBU,KAAK;gCAClCS,eAAevB,QAAQuB,aAAa;4BACtC;4BACAC,MAAM;wBACR;oBACF;gBACF;YACF;QACF;QAEA,OAAOvB;IACT,EAAC"}

package/dist/overlay/index.d.ts

@@ -0,0 +1,16 @@
+export type SectionOverlayOptions = {
+    /** Origin of the Payload admin, e.g. `https://cms.client.com`. Required for security. */
+    adminOrigin: string;
+    /**
+     * Inject the default editor chrome styles. Set to `false` to style the `.psb-*`
+     * classes yourself. Default: `true`.
+     */
+    injectStyles?: boolean;
+};
+/**
+ * Framework-free overlay for the preview page. Does nothing unless the page is
+ * inside the Payload live preview AND the admin has answered the handshake.
+ * Returns a cleanup function.
+ */
+export declare function initSectionOverlay({ adminOrigin, injectStyles, }: SectionOverlayOptions): () => void;
+export { sectionAttributes } from '../protocol.js';

package/dist/overlay/index.js

@@ -0,0 +1,191 @@
+import { isEnvelope, SECTION_INDEX_ATTR, SECTION_TYPE_ATTR, wrap } from '../protocol.js';
+const STYLE_ID = 'payload-section-builder-overlay-style';
+/**
+ * Editor chrome only (outlines, label, toolbar), never your site's sections.
+ * Colours and fonts are CSS variables, so a client project can restyle the chrome
+ * without touching the plugin, or pass `injectStyles: false` and style the
+ * `.psb-*` classes itself.
+ */ const CSS = `
+:root {
+  --psb-accent: #3b5bdb;
+  --psb-accent-soft: rgba(59, 91, 219, .18);
+  --psb-on-accent: #fff;
+  --psb-toolbar-bg: #1c2333;
+  --psb-toolbar-fg: #fff;
+  --psb-focus: #91a7ff;
+  --psb-font: 500 13px/1 system-ui, sans-serif;
+  --psb-z: 2147483000;
+}
+.psb-box { position: fixed; pointer-events: none; z-index: var(--psb-z); border-radius: 4px; transition: opacity .12s; }
+.psb-hover { outline: 2px dashed var(--psb-accent); outline-offset: -2px; }
+.psb-selected { outline: 2px solid var(--psb-accent); outline-offset: -2px; box-shadow: 0 0 0 4px var(--psb-accent-soft); }
+.psb-label { position: absolute; top: 0; left: 0; transform: translateY(-100%); background: var(--psb-accent);
+  color: var(--psb-on-accent); font: var(--psb-font); font-weight: 600; padding: 5px 8px; border-radius: 4px 4px 0 0; white-space: nowrap; }
+.psb-toolbar { position: fixed; z-index: calc(var(--psb-z) + 1); display: flex; gap: 2px; background: var(--psb-toolbar-bg);
+  border-radius: 6px; padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }
+.psb-toolbar button { all: unset; cursor: pointer; color: var(--psb-toolbar-fg); font: var(--psb-font); padding: 6px 9px; border-radius: 4px; }
+.psb-toolbar button:hover { background: rgba(255,255,255,.14); }
+.psb-toolbar button:focus-visible { outline: 2px solid var(--psb-focus); }
+.psb-toolbar button[disabled] { opacity: .35; cursor: default; }
+`;
+const humanize = (blockType)=>blockType.replace(/[-_]/g, ' ').replace(/^\w/, (c)=>c.toUpperCase());
+/**
+ * Framework-free overlay for the preview page. Does nothing unless the page is
+ * inside the Payload live preview AND the admin has answered the handshake.
+ * Returns a cleanup function.
+ */ export function initSectionOverlay({ adminOrigin, injectStyles = true }) {
+    if (typeof window === 'undefined' || window.parent === window) {
+        return ()=>{};
+    }
+    const parentWindow = window.parent;
+    let active = false;
+    let blockCount = 0;
+    let hovered = null;
+    let selected = null;
+    let frame = 0;
+    const post = (message)=>parentWindow.postMessage(wrap(message), adminOrigin);
+    const style = document.createElement('style');
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    const hoverBox = document.createElement('div');
+    hoverBox.className = 'psb-box psb-hover';
+    const hoverLabel = document.createElement('div');
+    hoverLabel.className = 'psb-label';
+    hoverBox.append(hoverLabel);
+    const selectedBox = document.createElement('div');
+    selectedBox.className = 'psb-box psb-selected';
+    const toolbar = document.createElement('div');
+    toolbar.className = 'psb-toolbar';
+    toolbar.setAttribute('role', 'toolbar');
+    toolbar.setAttribute('aria-label', 'Section actions');
+    const upButton = document.createElement('button');
+    upButton.type = 'button';
+    upButton.textContent = '↑ Move up';
+    const downButton = document.createElement('button');
+    downButton.type = 'button';
+    downButton.textContent = '↓ Move down';
+    toolbar.append(upButton, downButton);
+    const sectionAt = (index)=>document.querySelector(`[${SECTION_INDEX_ATTR}="${index}"]`);
+    const sectionFrom = (target)=>target instanceof Element ? target.closest(`[${SECTION_INDEX_ATTR}]`) : null;
+    const indexOf = (element)=>Number(element.getAttribute(SECTION_INDEX_ATTR));
+    const place = (box, element)=>{
+        if (!element) {
+            box.style.opacity = '0';
+            return;
+        }
+        const rect = element.getBoundingClientRect();
+        box.style.opacity = '1';
+        box.style.top = `${rect.top}px`;
+        box.style.left = `${rect.left}px`;
+        box.style.width = `${rect.width}px`;
+        box.style.height = `${rect.height}px`;
+    };
+    const render = ()=>{
+        const selectedElement = selected === null ? null : sectionAt(selected);
+        place(hoverBox, hovered && hovered !== selectedElement ? hovered : null);
+        place(selectedBox, selectedElement);
+        if (selectedElement && selected !== null) {
+            const rect = selectedElement.getBoundingClientRect();
+            toolbar.style.display = 'flex';
+            toolbar.style.top = `${Math.max(rect.top + 8, 8)}px`;
+            toolbar.style.left = `${Math.max(rect.right - toolbar.offsetWidth - 8, 8)}px`;
+            upButton.disabled = selected === 0;
+            downButton.disabled = selected >= blockCount - 1;
+        } else {
+            toolbar.style.display = 'none';
+        }
+        frame = requestAnimationFrame(render);
+    };
+    const activate = ()=>{
+        if (active) {
+            return;
+        }
+        active = true;
+        document.documentElement.dataset.sectionBuilder = 'on';
+        if (injectStyles && !document.getElementById(STYLE_ID)) {
+            document.head.append(style);
+        }
+        document.body.append(hoverBox, selectedBox, toolbar);
+        frame = requestAnimationFrame(render);
+    };
+    const onMessage = (event)=>{
+        if (event.origin !== adminOrigin || event.source !== parentWindow || !isEnvelope(event.data)) {
+            return;
+        }
+        const message = event.data;
+        if (message.type === 'editor-ready') {
+            blockCount = message.blockCount;
+            activate();
+        } else if (message.type === 'selection-changed') {
+            selected = message.index;
+        }
+    };
+    const onPointerOver = (event)=>{
+        if (active) {
+            hovered = sectionFrom(event.target);
+            if (hovered) {
+                hoverLabel.textContent = humanize(hovered.getAttribute(SECTION_TYPE_ATTR) ?? 'Section');
+            }
+        }
+    };
+    const onPointerLeave = ()=>{
+        hovered = null;
+    };
+    const onClick = (event)=>{
+        if (!active || toolbar.contains(event.target)) {
+            return;
+        }
+        const section = sectionFrom(event.target);
+        if (!section) {
+            return;
+        }
+        // Editing mode: clicks select sections instead of following links.
+        event.preventDefault();
+        event.stopPropagation();
+        selected = indexOf(section);
+        post({
+            type: 'select-block',
+            index: selected
+        });
+    };
+    const move = (delta)=>{
+        if (selected === null) {
+            return;
+        }
+        const to = selected + delta;
+        if (to < 0 || to >= blockCount) {
+            return;
+        }
+        post({
+            type: 'move-block',
+            from: selected,
+            to
+        });
+        selected = to; // optimistic; the admin confirms with selection-changed
+    };
+    upButton.addEventListener('click', ()=>move(-1));
+    downButton.addEventListener('click', ()=>move(1));
+    window.addEventListener('message', onMessage);
+    document.addEventListener('pointerover', onPointerOver);
+    document.documentElement.addEventListener('pointerleave', onPointerLeave);
+    document.addEventListener('click', onClick, true);
+    // Ask the admin to identify itself; it answers with editor-ready.
+    post({
+        type: 'overlay-hello'
+    });
+    return ()=>{
+        cancelAnimationFrame(frame);
+        window.removeEventListener('message', onMessage);
+        document.removeEventListener('pointerover', onPointerOver);
+        document.documentElement.removeEventListener('pointerleave', onPointerLeave);
+        document.removeEventListener('click', onClick, true);
+        hoverBox.remove();
+        selectedBox.remove();
+        toolbar.remove();
+        style.remove();
+        delete document.documentElement.dataset.sectionBuilder;
+    };
+}
+export { sectionAttributes } from '../protocol.js';
+
+//# sourceMappingURL=index.js.map

package/dist/overlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/overlay/index.ts"],"sourcesContent":["import type { AdminToPreviewMessage, PreviewToAdminMessage } from '../protocol.js'\n\nimport { isEnvelope, SECTION_INDEX_ATTR, SECTION_TYPE_ATTR, wrap } from '../protocol.js'\n\nexport type SectionOverlayOptions = {\n  /** Origin of the Payload admin, e.g. `https://cms.client.com`. Required for security. */\n  adminOrigin: string\n  /**\n   * Inject the default editor chrome styles. Set to `false` to style the `.psb-*`\n   * classes yourself. Default: `true`.\n   */\n  injectStyles?: boolean\n}\n\nconst STYLE_ID = 'payload-section-builder-overlay-style'\n\n/**\n * Editor chrome only (outlines, label, toolbar), never your site's sections.\n * Colours and fonts are CSS variables, so a client project can restyle the chrome\n * without touching the plugin, or pass `injectStyles: false` and style the\n * `.psb-*` classes itself.\n */\nconst CSS = `\n:root {\n  --psb-accent: #3b5bdb;\n  --psb-accent-soft: rgba(59, 91, 219, .18);\n  --psb-on-accent: #fff;\n  --psb-toolbar-bg: #1c2333;\n  --psb-toolbar-fg: #fff;\n  --psb-focus: #91a7ff;\n  --psb-font: 500 13px/1 system-ui, sans-serif;\n  --psb-z: 2147483000;\n}\n.psb-box { position: fixed; pointer-events: none; z-index: var(--psb-z); border-radius: 4px; transition: opacity .12s; }\n.psb-hover { outline: 2px dashed var(--psb-accent); outline-offset: -2px; }\n.psb-selected { outline: 2px solid var(--psb-accent); outline-offset: -2px; box-shadow: 0 0 0 4px var(--psb-accent-soft); }\n.psb-label { position: absolute; top: 0; left: 0; transform: translateY(-100%); background: var(--psb-accent);\n  color: var(--psb-on-accent); font: var(--psb-font); font-weight: 600; padding: 5px 8px; border-radius: 4px 4px 0 0; white-space: nowrap; }\n.psb-toolbar { position: fixed; z-index: calc(var(--psb-z) + 1); display: flex; gap: 2px; background: var(--psb-toolbar-bg);\n  border-radius: 6px; padding: 3px; box-shadow: 0 4px 14px rgba(0,0,0,.25); }\n.psb-toolbar button { all: unset; cursor: pointer; color: var(--psb-toolbar-fg); font: var(--psb-font); padding: 6px 9px; border-radius: 4px; }\n.psb-toolbar button:hover { background: rgba(255,255,255,.14); }\n.psb-toolbar button:focus-visible { outline: 2px solid var(--psb-focus); }\n.psb-toolbar button[disabled] { opacity: .35; cursor: default; }\n`\n\nconst humanize = (blockType: string) =>\n  blockType.replace(/[-_]/g, ' ').replace(/^\\w/, (c) => c.toUpperCase())\n\n/**\n * Framework-free overlay for the preview page. Does nothing unless the page is\n * inside the Payload live preview AND the admin has answered the handshake.\n * Returns a cleanup function.\n */\nexport function initSectionOverlay({\n  adminOrigin,\n  injectStyles = true,\n}: SectionOverlayOptions): () => void {\n  if (typeof window === 'undefined' || window.parent === window) {\n    return () => {}\n  }\n\n  const parentWindow = window.parent\n  let active = false\n  let blockCount = 0\n  let hovered: HTMLElement | null = null\n  let selected: null | number = null\n  let frame = 0\n\n  const post = (message: PreviewToAdminMessage) => parentWindow.postMessage(wrap(message), adminOrigin)\n\n  const style = document.createElement('style')\n  style.id = STYLE_ID\n  style.textContent = CSS\n\n  const hoverBox = document.createElement('div')\n  hoverBox.className = 'psb-box psb-hover'\n  const hoverLabel = document.createElement('div')\n  hoverLabel.className = 'psb-label'\n  hoverBox.append(hoverLabel)\n\n  const selectedBox = document.createElement('div')\n  selectedBox.className = 'psb-box psb-selected'\n\n  const toolbar = document.createElement('div')\n  toolbar.className = 'psb-toolbar'\n  toolbar.setAttribute('role', 'toolbar')\n  toolbar.setAttribute('aria-label', 'Section actions')\n  const upButton = document.createElement('button')\n  upButton.type = 'button'\n  upButton.textContent = '↑ Move up'\n  const downButton = document.createElement('button')\n  downButton.type = 'button'\n  downButton.textContent = '↓ Move down'\n  toolbar.append(upButton, downButton)\n\n  const sectionAt = (index: number) =>\n    document.querySelector<HTMLElement>(`[${SECTION_INDEX_ATTR}=\"${index}\"]`)\n\n  const sectionFrom = (target: EventTarget | null) =>\n    target instanceof Element ? target.closest<HTMLElement>(`[${SECTION_INDEX_ATTR}]`) : null\n\n  const indexOf = (element: HTMLElement) => Number(element.getAttribute(SECTION_INDEX_ATTR))\n\n  const place = (box: HTMLElement, element: HTMLElement | null) => {\n    if (!element) {\n      box.style.opacity = '0'\n      return\n    }\n    const rect = element.getBoundingClientRect()\n    box.style.opacity = '1'\n    box.style.top = `${rect.top}px`\n    box.style.left = `${rect.left}px`\n    box.style.width = `${rect.width}px`\n    box.style.height = `${rect.height}px`\n  }\n\n  const render = () => {\n    const selectedElement = selected === null ? null : sectionAt(selected)\n    place(hoverBox, hovered && hovered !== selectedElement ? hovered : null)\n    place(selectedBox, selectedElement)\n\n    if (selectedElement && selected !== null) {\n      const rect = selectedElement.getBoundingClientRect()\n      toolbar.style.display = 'flex'\n      toolbar.style.top = `${Math.max(rect.top + 8, 8)}px`\n      toolbar.style.left = `${Math.max(rect.right - toolbar.offsetWidth - 8, 8)}px`\n      upButton.disabled = selected === 0\n      downButton.disabled = selected >= blockCount - 1\n    } else {\n      toolbar.style.display = 'none'\n    }\n\n    frame = requestAnimationFrame(render)\n  }\n\n  const activate = () => {\n    if (active) {\n      return\n    }\n    active = true\n    document.documentElement.dataset.sectionBuilder = 'on'\n    if (injectStyles && !document.getElementById(STYLE_ID)) {\n      document.head.append(style)\n    }\n    document.body.append(hoverBox, selectedBox, toolbar)\n    frame = requestAnimationFrame(render)\n  }\n\n  const onMessage = (event: MessageEvent) => {\n    if (event.origin !== adminOrigin || event.source !== parentWindow || !isEnvelope(event.data)) {\n      return\n    }\n    const message = event.data as unknown as AdminToPreviewMessage\n    if (message.type === 'editor-ready') {\n      blockCount = message.blockCount\n      activate()\n    } else if (message.type === 'selection-changed') {\n      selected = message.index\n    }\n  }\n\n  const onPointerOver = (event: PointerEvent) => {\n    if (active) {\n      hovered = sectionFrom(event.target)\n      if (hovered) {\n        hoverLabel.textContent = humanize(hovered.getAttribute(SECTION_TYPE_ATTR) ?? 'Section')\n      }\n    }\n  }\n\n  const onPointerLeave = () => {\n    hovered = null\n  }\n\n  const onClick = (event: MouseEvent) => {\n    if (!active || toolbar.contains(event.target as Node)) {\n      return\n    }\n    const section = sectionFrom(event.target)\n    if (!section) {\n      return\n    }\n    // Editing mode: clicks select sections instead of following links.\n    event.preventDefault()\n    event.stopPropagation()\n    selected = indexOf(section)\n    post({ type: 'select-block', index: selected })\n  }\n\n  const move = (delta: -1 | 1) => {\n    if (selected === null) {\n      return\n    }\n    const to = selected + delta\n    if (to < 0 || to >= blockCount) {\n      return\n    }\n    post({ type: 'move-block', from: selected, to })\n    selected = to // optimistic; the admin confirms with selection-changed\n  }\n\n  upButton.addEventListener('click', () => move(-1))\n  downButton.addEventListener('click', () => move(1))\n\n  window.addEventListener('message', onMessage)\n  document.addEventListener('pointerover', onPointerOver)\n  document.documentElement.addEventListener('pointerleave', onPointerLeave)\n  document.addEventListener('click', onClick, true)\n\n  // Ask the admin to identify itself; it answers with editor-ready.\n  post({ type: 'overlay-hello' })\n\n  return () => {\n    cancelAnimationFrame(frame)\n    window.removeEventListener('message', onMessage)\n    document.removeEventListener('pointerover', onPointerOver)\n    document.documentElement.removeEventListener('pointerleave', onPointerLeave)\n    document.removeEventListener('click', onClick, true)\n    hoverBox.remove()\n    selectedBox.remove()\n    toolbar.remove()\n    style.remove()\n    delete document.documentElement.dataset.sectionBuilder\n  }\n}\n\nexport { sectionAttributes } from '../protocol.js'\n"],"names":["isEnvelope","SECTION_INDEX_ATTR","SECTION_TYPE_ATTR","wrap","STYLE_ID","CSS","humanize","blockType","replace","c","toUpperCase","initSectionOverlay","adminOrigin","injectStyles","window","parent","parentWindow","active","blockCount","hovered","selected","frame","post","message","postMessage","style","document","createElement","id","textContent","hoverBox","className","hoverLabel","append","selectedBox","toolbar","setAttribute","upButton","type","downButton","sectionAt","index","querySelector","sectionFrom","target","Element","closest","indexOf","element","Number","getAttribute","place","box","opacity","rect","getBoundingClientRect","top","left","width","height","render","selectedElement","display","Math","max","right","offsetWidth","disabled","requestAnimationFrame","activate","documentElement","dataset","sectionBuilder","getElementById","head","body","onMessage","event","origin","source","data","onPointerOver","onPointerLeave","onClick","contains","section","preventDefault","stopPropagation","move","delta","to","from","addEventListener","cancelAnimationFrame","removeEventListener","remove","sectionAttributes"],"mappings":"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"}

package/dist/protocol.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Messages exchanged between the Payload admin (the "bridge") and the
+ * live preview window (the "overlay"). Every message carries `source` and
+ * `version` so older client installs keep working when the protocol changes.
+ */
+export declare const MESSAGE_SOURCE = "payload-section-builder";
+export declare const PROTOCOL_VERSION = 1;
+/** Data attributes the frontend puts on each rendered section. */
+export declare const SECTION_INDEX_ATTR = "data-section-index";
+export declare const SECTION_TYPE_ATTR = "data-section-type";
+export type PreviewToAdminMessage = {
+    index: number;
+    type: 'select-block';
+} | {
+    from: number;
+    to: number;
+    type: 'move-block';
+} | {
+    type: 'overlay-hello';
+};
+export type AdminToPreviewMessage = {
+    blockCount: number;
+    type: 'editor-ready';
+} | {
+    index: null | number;
+    type: 'selection-changed';
+};
+export type Envelope<T> = {
+    source: typeof MESSAGE_SOURCE;
+    version: number;
+} & T;
+export declare const wrap: <T extends object>(message: T) => Envelope<T>;
+export declare const isEnvelope: (data: unknown) => data is Envelope<{
+    type: string;
+}>;
+/**
+ * Spread onto the root element of each rendered section:
+ * `<section {...sectionAttributes(index, block.blockType)}>`
+ */
+export declare const sectionAttributes: (index: number, blockType: string) => {
+    "data-section-index": number;
+    "data-section-type": string;
+};

package/dist/protocol.js

@@ -0,0 +1,23 @@
+/**
+ * Messages exchanged between the Payload admin (the "bridge") and the
+ * live preview window (the "overlay"). Every message carries `source` and
+ * `version` so older client installs keep working when the protocol changes.
+ */ export const MESSAGE_SOURCE = 'payload-section-builder';
+export const PROTOCOL_VERSION = 1;
+/** Data attributes the frontend puts on each rendered section. */ export const SECTION_INDEX_ATTR = 'data-section-index';
+export const SECTION_TYPE_ATTR = 'data-section-type';
+export const wrap = (message)=>({
+        ...message,
+        source: MESSAGE_SOURCE,
+        version: PROTOCOL_VERSION
+    });
+export const isEnvelope = (data)=>typeof data === 'object' && data !== null && data.source === MESSAGE_SOURCE && typeof data.type === 'string';
+/**
+ * Spread onto the root element of each rendered section:
+ * `<section {...sectionAttributes(index, block.blockType)}>`
+ */ export const sectionAttributes = (index, blockType)=>({
+        [SECTION_INDEX_ATTR]: index,
+        [SECTION_TYPE_ATTR]: blockType
+    });
+
+//# sourceMappingURL=protocol.js.map

package/dist/protocol.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/protocol.ts"],"sourcesContent":["/**\n * Messages exchanged between the Payload admin (the \"bridge\") and the\n * live preview window (the \"overlay\"). Every message carries `source` and\n * `version` so older client installs keep working when the protocol changes.\n */\nexport const MESSAGE_SOURCE = 'payload-section-builder'\nexport const PROTOCOL_VERSION = 1\n\n/** Data attributes the frontend puts on each rendered section. */\nexport const SECTION_INDEX_ATTR = 'data-section-index'\nexport const SECTION_TYPE_ATTR = 'data-section-type'\n\nexport type PreviewToAdminMessage =\n  | { index: number; type: 'select-block' }\n  | { from: number; to: number; type: 'move-block' }\n  | { type: 'overlay-hello' }\n\nexport type AdminToPreviewMessage =\n  | { blockCount: number; type: 'editor-ready' }\n  | { index: null | number; type: 'selection-changed' }\n\nexport type Envelope<T> = { source: typeof MESSAGE_SOURCE; version: number } & T\n\nexport const wrap = <T extends object>(message: T): Envelope<T> => ({\n  ...message,\n  source: MESSAGE_SOURCE,\n  version: PROTOCOL_VERSION,\n})\n\nexport const isEnvelope = (data: unknown): data is Envelope<{ type: string }> =>\n  typeof data === 'object' &&\n  data !== null &&\n  (data as { source?: unknown }).source === MESSAGE_SOURCE &&\n  typeof (data as { type?: unknown }).type === 'string'\n\n/**\n * Spread onto the root element of each rendered section:\n * `<section {...sectionAttributes(index, block.blockType)}>`\n */\nexport const sectionAttributes = (index: number, blockType: string) => ({\n  [SECTION_INDEX_ATTR]: index,\n  [SECTION_TYPE_ATTR]: blockType,\n})\n"],"names":["MESSAGE_SOURCE","PROTOCOL_VERSION","SECTION_INDEX_ATTR","SECTION_TYPE_ATTR","wrap","message","source","version","isEnvelope","data","type","sectionAttributes","index","blockType"],"mappings":"AAAA;;;;CAIC,GACD,OAAO,MAAMA,iBAAiB,0BAAyB;AACvD,OAAO,MAAMC,mBAAmB,EAAC;AAEjC,gEAAgE,GAChE,OAAO,MAAMC,qBAAqB,qBAAoB;AACtD,OAAO,MAAMC,oBAAoB,oBAAmB;AAapD,OAAO,MAAMC,OAAO,CAAmBC,UAA6B,CAAA;QAClE,GAAGA,OAAO;QACVC,QAAQN;QACRO,SAASN;IACX,CAAA,EAAE;AAEF,OAAO,MAAMO,aAAa,CAACC,OACzB,OAAOA,SAAS,YAChBA,SAAS,QACT,AAACA,KAA8BH,MAAM,KAAKN,kBAC1C,OAAO,AAACS,KAA4BC,IAAI,KAAK,SAAQ;AAEvD;;;CAGC,GACD,OAAO,MAAMC,oBAAoB,CAACC,OAAeC,YAAuB,CAAA;QACtE,CAACX,mBAAmB,EAAEU;QACtB,CAACT,kBAAkB,EAAEU;IACvB,CAAA,EAAE"}

package/dist/react/SectionOverlay.d.ts

@@ -0,0 +1,8 @@
+export type SectionOverlayProps = {
+    /** Origin of the Payload admin, e.g. `process.env.NEXT_PUBLIC_SERVER_URL`. */
+    adminOrigin: string;
+    /** Inject the default editor chrome styles. Default: `true`. */
+    injectStyles?: boolean;
+};
+/** Mount once on preview pages. Renders nothing outside the Payload live preview. */
+export declare const SectionOverlay: ({ adminOrigin, injectStyles }: SectionOverlayProps) => null;

package/dist/react/SectionOverlay.js

@@ -0,0 +1,15 @@
+'use client';
+import { useEffect } from 'react';
+import { initSectionOverlay } from '../overlay/index.js';
+/** Mount once on preview pages. Renders nothing outside the Payload live preview. */ export const SectionOverlay = ({ adminOrigin, injectStyles })=>{
+    useEffect(()=>initSectionOverlay({
+            adminOrigin,
+            injectStyles
+        }), [
+        adminOrigin,
+        injectStyles
+    ]);
+    return null;
+};
+
+//# sourceMappingURL=SectionOverlay.js.map

package/dist/react/SectionOverlay.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/react/SectionOverlay.tsx"],"sourcesContent":["'use client'\n\nimport { useEffect } from 'react'\n\nimport { initSectionOverlay } from '../overlay/index.js'\n\nexport type SectionOverlayProps = {\n  /** Origin of the Payload admin, e.g. `process.env.NEXT_PUBLIC_SERVER_URL`. */\n  adminOrigin: string\n  /** Inject the default editor chrome styles. Default: `true`. */\n  injectStyles?: boolean\n}\n\n/** Mount once on preview pages. Renders nothing outside the Payload live preview. */\nexport const SectionOverlay = ({ adminOrigin, injectStyles }: SectionOverlayProps) => {\n  useEffect(() => initSectionOverlay({ adminOrigin, injectStyles }), [adminOrigin, injectStyles])\n  return null\n}\n"],"names":["useEffect","initSectionOverlay","SectionOverlay","adminOrigin","injectStyles"],"mappings":"AAAA;AAEA,SAASA,SAAS,QAAQ,QAAO;AAEjC,SAASC,kBAAkB,QAAQ,sBAAqB;AASxD,mFAAmF,GACnF,OAAO,MAAMC,iBAAiB,CAAC,EAAEC,WAAW,EAAEC,YAAY,EAAuB;IAC/EJ,UAAU,IAAMC,mBAAmB;YAAEE;YAAaC;QAAa,IAAI;QAACD;QAAaC;KAAa;IAC9F,OAAO;AACT,EAAC"}

package/package.json

@@ -1,6 +1,121 @@
 {
   "name": "payload-section-builder",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "description": "Visual section builder for Payload CMS: select, edit and rearrange page sections from the live preview.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "psb-source": "./src/index.ts",
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./client": {
+      "psb-source": "./src/exports/client.ts",
+      "import": "./dist/exports/client.js",
+      "types": "./dist/exports/client.d.ts",
+      "default": "./dist/exports/client.js"
+    },
+    "./overlay": {
+      "psb-source": "./src/exports/overlay.ts",
+      "import": "./dist/exports/overlay.js",
+      "types": "./dist/exports/overlay.d.ts",
+      "default": "./dist/exports/overlay.js"
+    },
+    "./react": {
+      "psb-source": "./src/exports/react.ts",
+      "import": "./dist/exports/react.js",
+      "types": "./dist/exports/react.d.ts",
+      "default": "./dist/exports/react.js"
+    }
+  },
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "pnpm clean && pnpm copyfiles && pnpm build:types && pnpm build:swc",
+    "build:swc": "swc ./src -d ./dist --config-file .swcrc --strip-leading-paths",
+    "build:types": "tsc --outDir dist --rootDir ./src",
+    "clean": "rimraf {dist,*.tsbuildinfo}",
+    "copyfiles": "copyfiles -u 1 \"src/**/*.{html,css,scss,ttf,woff,woff2,eot,svg,jpg,png,json}\" dist/",
+    "dev": "next dev dev --turbo",
+    "dev:generate-importmap": "pnpm dev:payload generate:importmap",
+    "dev:generate-types": "pnpm dev:payload generate:types",
+    "dev:payload": "cross-env NODE_OPTIONS=--conditions=psb-source PAYLOAD_CONFIG_PATH=./dev/payload.config.ts payload",
+    "generate:importmap": "pnpm dev:generate-importmap",
+    "generate:types": "pnpm dev:generate-types",
+    "lint": "eslint",
+    "lint:fix": "eslint ./src --fix",
+    "prepare": "pnpm build",
+    "test": "pnpm test:int && pnpm test:e2e",
+    "test:e2e": "playwright test",
+    "test:int": "vitest",
+    "typecheck": "tsc --noEmit -p dev/tsconfig.json"
+  },
+  "devDependencies": {
+    "@eslint/eslintrc": "^3.2.0",
+    "@payloadcms/db-sqlite": "3.93.0",
+    "@payloadcms/eslint-config": "3.28.0",
+    "@payloadcms/live-preview-react": "3.93.0",
+    "@payloadcms/next": "3.93.0",
+    "@payloadcms/richtext-lexical": "3.93.0",
+    "@payloadcms/ui": "3.93.0",
+    "@playwright/test": "1.63.0",
+    "@swc-node/register": "1.10.9",
+    "@swc/cli": "0.6.0",
+    "@types/node": "22.19.9",
+    "@types/react": "19.2.14",
+    "@types/react-dom": "19.2.3",
+    "copyfiles": "2.4.1",
+    "cross-env": "^7.0.3",
+    "eslint": "^9.23.0",
+    "eslint-config-next": "16.3.3",
+    "graphql": "^16.8.1",
+    "next": "16.3.3",
+    "open": "^10.1.0",
+    "payload": "3.93.0",
+    "prettier": "^3.4.2",
+    "qs-esm": "8.0.1",
+    "react": "19.2.6",
+    "react-dom": "19.2.6",
+    "rimraf": "3.0.2",
+    "sharp": "0.35.4",
+    "sort-package-json": "^2.10.0",
+    "typescript": "5.7.3",
+    "vite-tsconfig-paths": "6.0.5",
+    "vitest": "4.0.18"
+  },
+  "peerDependencies": {
+    "payload": "^3.93.0",
+    "@payloadcms/ui": "^3.93.0",
+    "react": "^19.0.0"
+  },
+  "engines": {
+    "node": "^22.23.4 || >=24.22.1",
+    "pnpm": "^9 || ^10 || ^11"
+  },
+  "packageManager": "pnpm@10.28.0",
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "sharp",
+      "esbuild",
+      "unrs-resolver"
+    ]
+  },
+  "registry": "https://registry.npmjs.org/",
+  "dependencies": {},
+  "keywords": [
+    "payload",
+    "payload-plugin",
+    "page-builder",
+    "live-preview",
+    "visual-editing"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bramdenelzen/payload-section-builder.git"
+  }
+}