@blocklify/preview 0.2.0 → 0.2.2

package/README.md

@@ -72,3 +72,20 @@ const blockMap = createStarterBlockMap({
 ```
 
 Use `blockMap` with `BlocklifyPreview` on `/preview`, and `BlocklifyEntryView` for the public page.
+
+## Live preview
+
+`BlocklifyPreview` listens for draft content from the Blocklify editor. In that iframe, each block gets a dashed outline. Clicking a block focuses it in the editor. A drag handle reorders body blocks and nested `columns` / `items` cells, and the editor saves that order.
+
+Spread `BlocklifyEditable` on the root element of each block component. For a columns or page block, call `renderNestedBlocks` when it is passed so the cells can be reordered:
+
+```tsx
+export function Columns({ block, BlocklifyEditable = {}, blockPath = [], renderNestedBlocks }: BlocklifyBlockProps) {
+  const items = Array.isArray(block.columns) ? block.columns : [];
+  return (
+    <section {...BlocklifyEditable}>
+      {renderNestedBlocks ? renderNestedBlocks(items, blockPath, "columns") : null}
+    </section>
+  );
+}
+```

package/dist/block-path.d.ts

@@ -0,0 +1,40 @@
+export type BlockPathSegment = {
+    field: string;
+    index: number;
+};
+export type BlockPath = BlockPathSegment[];
+export declare const DEFAULT_SORTABLE_BLOCKS_FIELDS: readonly ["body", "blocks", "columns", "items"];
+export declare function getPathKey(path: BlockPath): string;
+export declare function getSortableId(block: {
+    type: string;
+    _uid?: string;
+}, blockPath: BlockPath): string;
+export declare function isSortableBlocksField(fieldName: string, sortableFields: ReadonlySet<string>): boolean;
+export declare function toBlockPathSegment(parentPath: BlockPath, fieldName: string, index: number): BlockPath;
+export declare function createSortableFieldsSet(fields?: readonly string[]): ReadonlySet<string>;
+export declare function getSortableContextId(parentPath: BlockPath, fieldName: string): string;
+export declare function getBlocksFieldNameFromPath(path: BlockPath): string;
+export declare function getBlocksListKey(blockPath: BlockPath): string;
+export declare function isSameBlocksList(sourcePath: BlockPath, destinationPath: BlockPath): boolean;
+export declare function adjustDestinationPathAfterRemoval(sourcePath: BlockPath, destinationPath: BlockPath): BlockPath;
+export declare function isGridSortableField(fieldName: string): boolean;
+export declare function isNestedSortableContainer(type: string): boolean;
+export declare function isRootOnlyBlockType(type: string): boolean;
+export declare function canMoveBlockToDestination(blockType: string | undefined, sourcePath: BlockPath, destinationPath: BlockPath): boolean;
+export declare function isNestedGridDropPath(path: BlockPath): boolean;
+/** True when the destination path is inside the block being dragged. */
+export declare function isDropIntoOwnNestedField(sourcePath: BlockPath, destinationPath: BlockPath): boolean;
+export declare function isPathInsideBlock(path: BlockPath, blockPath: BlockPath): boolean;
+export declare function isVirtualPreviewBlock(block: {
+    _uid?: string;
+}): boolean;
+/**
+ * Move a block inside draft content.
+ * Same-list inserts at the hovered index after removal (arrayMove).
+ * Cross-list shifts ancestor indexes that sat after the removed source.
+ * Returns null when the path or uid does not match.
+ */
+export declare function moveBlockInContent(content: Record<string, unknown>, sourcePath: BlockPath, destinationPath: BlockPath): {
+    next: Record<string, unknown>;
+    movedUid: string;
+} | null;

package/dist/block-path.js

@@ -0,0 +1,169 @@
+export const DEFAULT_SORTABLE_BLOCKS_FIELDS = ["body", "blocks", "columns", "items"];
+export function getPathKey(path) {
+    if (path.length === 0)
+        return "root";
+    return path.map((segment) => `${segment.field}:${segment.index}`).join("/");
+}
+export function getSortableId(block, blockPath) {
+    if (block._uid)
+        return block._uid;
+    if (blockPath.length === 0)
+        return `orphan:${block.type}`;
+    const parentPath = blockPath.slice(0, -1);
+    const leaf = blockPath[blockPath.length - 1];
+    return `${getPathKey(parentPath)}:${leaf.field}:${leaf.index}`;
+}
+export function isSortableBlocksField(fieldName, sortableFields) {
+    return sortableFields.has(fieldName);
+}
+export function toBlockPathSegment(parentPath, fieldName, index) {
+    return [...parentPath, { field: fieldName, index }];
+}
+export function createSortableFieldsSet(fields) {
+    return new Set(fields ?? DEFAULT_SORTABLE_BLOCKS_FIELDS);
+}
+export function getSortableContextId(parentPath, fieldName) {
+    return `${getPathKey(parentPath)}:${fieldName}`;
+}
+export function getBlocksFieldNameFromPath(path) {
+    if (path.length === 0)
+        return "body";
+    return path[path.length - 1].field;
+}
+function getListKeyForSegment(path, segmentIndex) {
+    const segment = path[segmentIndex];
+    const parentPath = path.slice(0, segmentIndex);
+    return getSortableContextId(parentPath, segment.field);
+}
+export function getBlocksListKey(blockPath) {
+    if (blockPath.length === 0) {
+        return getSortableContextId([], "body");
+    }
+    const leaf = blockPath[blockPath.length - 1];
+    const parentPath = blockPath.slice(0, -1);
+    return getSortableContextId(parentPath, leaf.field);
+}
+export function isSameBlocksList(sourcePath, destinationPath) {
+    return getBlocksListKey(sourcePath) === getBlocksListKey(destinationPath);
+}
+export function adjustDestinationPathAfterRemoval(sourcePath, destinationPath) {
+    const sourceListKey = getBlocksListKey(sourcePath);
+    const sourceIndex = sourcePath[sourcePath.length - 1].index;
+    return destinationPath.map((segment, segmentIndex) => {
+        const listKey = getListKeyForSegment(destinationPath, segmentIndex);
+        if (listKey === sourceListKey && segment.index > sourceIndex) {
+            return { ...segment, index: segment.index - 1 };
+        }
+        return segment;
+    });
+}
+export function isGridSortableField(fieldName) {
+    return fieldName === "columns" || fieldName === "items";
+}
+const NESTED_SORTABLE_CONTAINER_TYPES = new Set(["columns", "page"]);
+/** Block types that stay on the page body and are not dropped into columns or items. */
+const ROOT_ONLY_BLOCK_TYPES = new Set(["hero", "columns", "page"]);
+export function isNestedSortableContainer(type) {
+    return NESTED_SORTABLE_CONTAINER_TYPES.has(type.toLowerCase());
+}
+export function isRootOnlyBlockType(type) {
+    return ROOT_ONLY_BLOCK_TYPES.has(type.toLowerCase());
+}
+export function canMoveBlockToDestination(blockType, sourcePath, destinationPath) {
+    const sourceField = getBlocksFieldNameFromPath(sourcePath);
+    if (isGridSortableField(sourceField)) {
+        return isSameBlocksList(sourcePath, destinationPath);
+    }
+    if (!blockType)
+        return true;
+    const destField = getBlocksFieldNameFromPath(destinationPath);
+    if (!isGridSortableField(destField))
+        return true;
+    return !isRootOnlyBlockType(blockType);
+}
+export function isNestedGridDropPath(path) {
+    if (path.length === 0)
+        return false;
+    return isGridSortableField(path[path.length - 1].field);
+}
+/** True when the destination path is inside the block being dragged. */
+export function isDropIntoOwnNestedField(sourcePath, destinationPath) {
+    if (destinationPath.length <= sourcePath.length)
+        return false;
+    for (let i = 0; i < sourcePath.length; i += 1) {
+        if (sourcePath[i].field !== destinationPath[i].field ||
+            sourcePath[i].index !== destinationPath[i].index) {
+            return false;
+        }
+    }
+    return true;
+}
+export function isPathInsideBlock(path, blockPath) {
+    if (path.length <= blockPath.length)
+        return false;
+    for (let i = 0; i < blockPath.length; i += 1) {
+        if (path[i].field !== blockPath[i].field || path[i].index !== blockPath[i].index) {
+            return false;
+        }
+    }
+    return true;
+}
+export function isVirtualPreviewBlock(block) {
+    return typeof block._uid === "string" && block._uid.startsWith("virtual-");
+}
+function getParentArray(content, path) {
+    if (path.length === 0)
+        return null;
+    let current = content;
+    for (let i = 0; i < path.length - 1; i += 1) {
+        const segment = path[i];
+        if (!current || typeof current !== "object")
+            return null;
+        const container = current[segment.field];
+        if (!Array.isArray(container) || segment.index < 0 || segment.index >= container.length) {
+            return null;
+        }
+        current = container[segment.index];
+    }
+    if (!current || typeof current !== "object")
+        return null;
+    const leaf = path[path.length - 1];
+    const parentArray = current[leaf.field];
+    return Array.isArray(parentArray)
+        ? parentArray
+        : null;
+}
+/**
+ * Move a block inside draft content.
+ * Same-list inserts at the hovered index after removal (arrayMove).
+ * Cross-list shifts ancestor indexes that sat after the removed source.
+ * Returns null when the path or uid does not match.
+ */
+export function moveBlockInContent(content, sourcePath, destinationPath) {
+    if (sourcePath.length === 0 || destinationPath.length === 0)
+        return null;
+    const next = structuredClone(content);
+    const sourceParent = getParentArray(next, sourcePath);
+    if (!sourceParent)
+        return null;
+    const sourceLeaf = sourcePath[sourcePath.length - 1];
+    const sourceBlock = sourceParent[sourceLeaf.index];
+    if (!sourceBlock || typeof sourceBlock !== "object")
+        return null;
+    const movedUid = sourceBlock._uid;
+    if (typeof movedUid !== "string" || movedUid === "")
+        return null;
+    const [movedBlock] = sourceParent.splice(sourceLeaf.index, 1);
+    if (!movedBlock)
+        return null;
+    const effectiveDestination = isSameBlocksList(sourcePath, destinationPath)
+        ? destinationPath
+        : adjustDestinationPathAfterRemoval(sourcePath, destinationPath);
+    const targetParent = getParentArray(next, effectiveDestination);
+    if (!targetParent)
+        return null;
+    const targetLeaf = effectiveDestination[effectiveDestination.length - 1];
+    const clampedIndex = Math.max(0, Math.min(targetLeaf.index, targetParent.length));
+    targetParent.splice(clampedIndex, 0, movedBlock);
+    return { next, movedUid };
+}

package/dist/index.d.ts

@@ -9,6 +9,6 @@
  * } from "@blocklify/preview";
  */
 export { createBlocklifyClient, type BlocklifyClientConfig, type BlocklifyComponent, type BlocklifyEntry, type BlocklifySiteAsset, type BlocklifySiteSettings, } from "./client.js";
-export { BlocklifyEditable, BlocklifyPreview, BlocklifyPreviewRenderer, BLOCKLIFY_PEER_FOCUS, BLOCKLIFY_PREVIEW_STYLES, BLOCKLIFY_SCROLL_TO_BLOCK, getDataBlokC, PREVIEW_EDITABLE_CSS, useBlocklifyPreview, type BlocklifyBlock, type BlocklifyBlockProps, type BlocklifyPreviewProps, type BlockMap, type DataBlokCPayload, } from "./preview.js";
+export { BlocklifyEditable, BlocklifyPreview, BlocklifyPreviewRenderer, BLOCKLIFY_PEER_FOCUS, BLOCKLIFY_PREVIEW_STYLES, BLOCKLIFY_SCROLL_TO_BLOCK, getDataBlokC, isPreviewEditable, PREVIEW_EDITABLE_CSS, useBlocklifyPreview, type BlocklifyBlock, type BlocklifyBlockProps, type BlocklifyPreviewProps, type BlockMap, type BlockPath, type BlockPathSegment, type BlockReorderPayload, type DataBlokCPayload, type RenderNestedBlocks, } from "./preview.js";
 export { default } from "./preview.js";
 export { BlocklifyEntryView, blocklifyAssetUrl, createStarterBlockMap, starterBlockMap, type StarterBlockMapOptions, } from "./starter.js";

package/dist/index.js

@@ -9,6 +9,6 @@
  * } from "@blocklify/preview";
  */
 export { createBlocklifyClient, } from "./client.js";
-export { BlocklifyEditable, BlocklifyPreview, BlocklifyPreviewRenderer, BLOCKLIFY_PEER_FOCUS, BLOCKLIFY_PREVIEW_STYLES, BLOCKLIFY_SCROLL_TO_BLOCK, getDataBlokC, PREVIEW_EDITABLE_CSS, useBlocklifyPreview, } from "./preview.js";
+export { BlocklifyEditable, BlocklifyPreview, BlocklifyPreviewRenderer, BLOCKLIFY_PEER_FOCUS, BLOCKLIFY_PREVIEW_STYLES, BLOCKLIFY_SCROLL_TO_BLOCK, getDataBlokC, isPreviewEditable, PREVIEW_EDITABLE_CSS, useBlocklifyPreview, } from "./preview.js";
 export { default } from "./preview.js";
 export { BlocklifyEntryView, blocklifyAssetUrl, createStarterBlockMap, starterBlockMap, } from "./starter.js";

package/dist/preview-styles.d.ts

@@ -0,0 +1,8 @@
+/** Class toggled on a block root to replay the focus blink. */
+export declare const PREVIEW_FOCUS_BLINK_CLASS = "blocklify-preview-focus-blink";
+export declare const PREVIEW_FOCUS_BLINK_MS = 400;
+/**
+ * Editable outline, click blink, and drag-handle styles for the preview iframe.
+ * The admin sends this string to the iframe (`blocklify-preview-styles`). Themes do not import a CSS file.
+ */
+export declare const PREVIEW_EDITABLE_CSS = "\n[data-blocklify-iframe-editable],\n[data-blok-uid] {\n    cursor: pointer;\n    outline: 1px dashed color-mix(in srgb, var(--primary-800, #7a9618) 56%, transparent);\n    outline-offset: 0;\n    transition: outline-color 0.15s, box-shadow 0.2s ease;\n}\n[data-blocklify-iframe-editable]:hover,\n[data-blok-uid]:hover {\n    outline-color: var(--primary-800, #7a9618);\n}\n@keyframes blocklify-preview-focus-blink {\n    0% {\n        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-800, #7a9618) 50%, transparent);\n        outline-color: color-mix(in srgb, var(--primary-800, #7a9618) 95%, transparent);\n    }\n    50% {\n        box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary, #e8fc9f) 45%, transparent);\n        outline-color: var(--primary-800, #7a9618);\n    }\n    100% {\n        box-shadow: none;\n        outline-color: color-mix(in srgb, var(--brand-mid, #2d5248) 55%, transparent);\n    }\n}\n.blocklify-preview-focus-blink {\n    animation: blocklify-preview-focus-blink 0.4s ease;\n}\n@media (prefers-reduced-motion: reduce) {\n    .blocklify-preview-focus-blink {\n        animation: none;\n    }\n}\n.blocklify-editable--nested-interactive {\n    pointer-events: none;\n}\n.blocklify-editable--nested-interactive > * {\n    pointer-events: auto;\n}\n.blocklify-preview-non-interactive a,\n.blocklify-preview-non-interactive button:not(.blocklify-drag-handle) {\n    pointer-events: none;\n    cursor: default;\n}\n.blocklify-sortable-row {\n    position: relative;\n    min-width: 0;\n    width: 100%;\n}\n.blocklify-sortable-row--dragging {\n    opacity: 0.5;\n    z-index: 20;\n}\n.blocklify-sortable-row--dragging > .blocklify-sortable-row__content {\n    pointer-events: none;\n}\n.blocklify-sortable-row--horizontal {\n    touch-action: pan-y;\n}\n.blocklify-sortable-drop-zone {\n    min-height: 0;\n}\n.blocklify-sortable-drop-zone--grid {\n    display: contents;\n}\n.blocklify-sortable-row__content {\n    position: relative;\n    z-index: 0;\n    min-width: 0;\n    width: 100%;\n    height: 100%;\n}\n.blocklify-sortable-row__content .blocklify-drag-handle {\n    z-index: 30;\n}\n.blocklify-sortable-row > .blocklify-drag-handle {\n    z-index: 40;\n}\n.blocklify-sortable-row > .blocklify-drag-handle--container {\n    z-index: 45;\n}\n.blocklify-drag-handle {\n    position: absolute;\n    top: 0.5rem;\n    left: 0.5rem;\n    z-index: 10;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    touch-action: none;\n    height: 1.75rem;\n    width: 1.75rem;\n    padding: 0;\n    cursor: grab;\n    border-radius: 0.5rem;\n    border: 1px solid color-mix(in srgb, var(--brand-mid, #2d5248) 14%, transparent);\n    background: color-mix(in srgb, #ffffff 92%, var(--primary, #e8fc9f));\n    color: color-mix(in srgb, var(--brand-mid, #2d5248) 72%, transparent);\n    line-height: 0;\n    box-shadow:\n        0 1px 2px color-mix(in srgb, var(--brand-darker, #0f2320) 10%, transparent),\n        0 0 0 1px color-mix(in srgb, #ffffff 70%, transparent) inset;\n    opacity: 0;\n    pointer-events: none;\n    transition:\n        opacity 0.15s ease,\n        transform 0.15s ease,\n        color 0.15s ease,\n        background-color 0.15s ease,\n        border-color 0.15s ease,\n        box-shadow 0.15s ease;\n}\n.blocklify-drag-handle__icon {\n    display: block;\n    flex-shrink: 0;\n}\n.blocklify-sortable-row:hover > .blocklify-drag-handle,\n.blocklify-sortable-row:focus-within > .blocklify-drag-handle,\n.blocklify-sortable-row--dragging > .blocklify-drag-handle,\n.blocklify-drag-handle:focus-visible {\n    opacity: 1;\n    pointer-events: auto;\n}\n.blocklify-sortable-row:hover > .blocklify-drag-handle {\n    transform: scale(1.02);\n}\n.blocklify-drag-handle:hover {\n    color: var(--brand-mid, #2d5248);\n    background: var(--primary, #e8fc9f);\n    border-color: color-mix(in srgb, var(--primary-800, #7a9618) 35%, transparent);\n    box-shadow:\n        0 2px 8px color-mix(in srgb, var(--brand-darker, #0f2320) 14%, transparent),\n        0 0 0 1px color-mix(in srgb, #ffffff 80%, transparent) inset;\n}\n.blocklify-drag-handle:focus-visible {\n    outline: 2px solid var(--primary-800, #7a9618);\n    outline-offset: 2px;\n}\n.blocklify-drag-handle:active,\n.blocklify-sortable-row--dragging > .blocklify-drag-handle {\n    cursor: grabbing;\n    color: var(--brand-dark, #1c3530);\n    background: var(--primary-600, #ccee50);\n    transform: scale(0.98);\n}\nhtml.dark .blocklify-drag-handle {\n    border-color: color-mix(in srgb, var(--primary, #e8fc9f) 18%, transparent);\n    background: color-mix(in srgb, var(--surface, #161a19) 88%, var(--brand-mid, #2d5248));\n    color: color-mix(in srgb, var(--primary, #e8fc9f) 78%, transparent);\n    box-shadow:\n        0 1px 3px color-mix(in srgb, #000000 35%, transparent),\n        0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent) inset;\n}\nhtml.dark .blocklify-drag-handle:hover {\n    color: var(--brand-darker, #0f2320);\n    background: var(--primary, #e8fc9f);\n    border-color: color-mix(in srgb, var(--primary, #e8fc9f) 55%, transparent);\n}\nhtml.dark .blocklify-drag-handle:active,\nhtml.dark .blocklify-sortable-row--dragging > .blocklify-drag-handle {\n    color: var(--brand-darker, #0f2320);\n    background: var(--primary-600, #ccee50);\n}\n@media (hover: none) {\n    .blocklify-drag-handle {\n        opacity: 0.85;\n        pointer-events: auto;\n    }\n}\n.blocklify-drag-overlay {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n    max-width: 16rem;\n    padding: 0.5rem 0.75rem;\n    border-radius: 0.5rem;\n    border: 1px solid var(--border, #d4d4d8);\n    background: var(--surface, #ffffff);\n    color: var(--text, #18181b);\n    box-shadow:\n        0 10px 28px color-mix(in srgb, var(--brand-darker, #0f2320) 18%, transparent),\n        0 0 0 1px color-mix(in srgb, var(--primary, #e8fc9f) 35%, transparent);\n    cursor: grabbing;\n    pointer-events: none;\n}\n.blocklify-drag-overlay__grip {\n    flex-shrink: 0;\n    color: var(--text-muted, #52525b);\n}\n.blocklify-drag-overlay__label {\n    min-width: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: 0.875rem;\n    font-weight: 500;\n    line-height: 1.25;\n}\nhtml.dark .blocklify-drag-overlay {\n    border-color: var(--border, #2c3330);\n    background: var(--surface, #161a19);\n    color: var(--text, #f4f5f4);\n}\n";

package/dist/preview-styles.js

@@ -0,0 +1,212 @@
+/** Class toggled on a block root to replay the focus blink. */
+export const PREVIEW_FOCUS_BLINK_CLASS = "blocklify-preview-focus-blink";
+export const PREVIEW_FOCUS_BLINK_MS = 400;
+/**
+ * Editable outline, click blink, and drag-handle styles for the preview iframe.
+ * The admin sends this string to the iframe (`blocklify-preview-styles`). Themes do not import a CSS file.
+ */
+export const PREVIEW_EDITABLE_CSS = `
+[data-blocklify-iframe-editable],
+[data-blok-uid] {
+    cursor: pointer;
+    outline: 1px dashed color-mix(in srgb, var(--primary-800, #7a9618) 56%, transparent);
+    outline-offset: 0;
+    transition: outline-color 0.15s, box-shadow 0.2s ease;
+}
+[data-blocklify-iframe-editable]:hover,
+[data-blok-uid]:hover {
+    outline-color: var(--primary-800, #7a9618);
+}
+@keyframes blocklify-preview-focus-blink {
+    0% {
+        box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary-800, #7a9618) 50%, transparent);
+        outline-color: color-mix(in srgb, var(--primary-800, #7a9618) 95%, transparent);
+    }
+    50% {
+        box-shadow: 0 0 0 6px color-mix(in srgb, var(--primary, #e8fc9f) 45%, transparent);
+        outline-color: var(--primary-800, #7a9618);
+    }
+    100% {
+        box-shadow: none;
+        outline-color: color-mix(in srgb, var(--brand-mid, #2d5248) 55%, transparent);
+    }
+}
+.${PREVIEW_FOCUS_BLINK_CLASS} {
+    animation: blocklify-preview-focus-blink 0.4s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+    .${PREVIEW_FOCUS_BLINK_CLASS} {
+        animation: none;
+    }
+}
+.blocklify-editable--nested-interactive {
+    pointer-events: none;
+}
+.blocklify-editable--nested-interactive > * {
+    pointer-events: auto;
+}
+.blocklify-preview-non-interactive a,
+.blocklify-preview-non-interactive button:not(.blocklify-drag-handle) {
+    pointer-events: none;
+    cursor: default;
+}
+.blocklify-sortable-row {
+    position: relative;
+    min-width: 0;
+    width: 100%;
+}
+.blocklify-sortable-row--dragging {
+    opacity: 0.5;
+    z-index: 20;
+}
+.blocklify-sortable-row--dragging > .blocklify-sortable-row__content {
+    pointer-events: none;
+}
+.blocklify-sortable-row--horizontal {
+    touch-action: pan-y;
+}
+.blocklify-sortable-drop-zone {
+    min-height: 0;
+}
+.blocklify-sortable-drop-zone--grid {
+    display: contents;
+}
+.blocklify-sortable-row__content {
+    position: relative;
+    z-index: 0;
+    min-width: 0;
+    width: 100%;
+    height: 100%;
+}
+.blocklify-sortable-row__content .blocklify-drag-handle {
+    z-index: 30;
+}
+.blocklify-sortable-row > .blocklify-drag-handle {
+    z-index: 40;
+}
+.blocklify-sortable-row > .blocklify-drag-handle--container {
+    z-index: 45;
+}
+.blocklify-drag-handle {
+    position: absolute;
+    top: 0.5rem;
+    left: 0.5rem;
+    z-index: 10;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    touch-action: none;
+    height: 1.75rem;
+    width: 1.75rem;
+    padding: 0;
+    cursor: grab;
+    border-radius: 0.5rem;
+    border: 1px solid color-mix(in srgb, var(--brand-mid, #2d5248) 14%, transparent);
+    background: color-mix(in srgb, #ffffff 92%, var(--primary, #e8fc9f));
+    color: color-mix(in srgb, var(--brand-mid, #2d5248) 72%, transparent);
+    line-height: 0;
+    box-shadow:
+        0 1px 2px color-mix(in srgb, var(--brand-darker, #0f2320) 10%, transparent),
+        0 0 0 1px color-mix(in srgb, #ffffff 70%, transparent) inset;
+    opacity: 0;
+    pointer-events: none;
+    transition:
+        opacity 0.15s ease,
+        transform 0.15s ease,
+        color 0.15s ease,
+        background-color 0.15s ease,
+        border-color 0.15s ease,
+        box-shadow 0.15s ease;
+}
+.blocklify-drag-handle__icon {
+    display: block;
+    flex-shrink: 0;
+}
+.blocklify-sortable-row:hover > .blocklify-drag-handle,
+.blocklify-sortable-row:focus-within > .blocklify-drag-handle,
+.blocklify-sortable-row--dragging > .blocklify-drag-handle,
+.blocklify-drag-handle:focus-visible {
+    opacity: 1;
+    pointer-events: auto;
+}
+.blocklify-sortable-row:hover > .blocklify-drag-handle {
+    transform: scale(1.02);
+}
+.blocklify-drag-handle:hover {
+    color: var(--brand-mid, #2d5248);
+    background: var(--primary, #e8fc9f);
+    border-color: color-mix(in srgb, var(--primary-800, #7a9618) 35%, transparent);
+    box-shadow:
+        0 2px 8px color-mix(in srgb, var(--brand-darker, #0f2320) 14%, transparent),
+        0 0 0 1px color-mix(in srgb, #ffffff 80%, transparent) inset;
+}
+.blocklify-drag-handle:focus-visible {
+    outline: 2px solid var(--primary-800, #7a9618);
+    outline-offset: 2px;
+}
+.blocklify-drag-handle:active,
+.blocklify-sortable-row--dragging > .blocklify-drag-handle {
+    cursor: grabbing;
+    color: var(--brand-dark, #1c3530);
+    background: var(--primary-600, #ccee50);
+    transform: scale(0.98);
+}
+html.dark .blocklify-drag-handle {
+    border-color: color-mix(in srgb, var(--primary, #e8fc9f) 18%, transparent);
+    background: color-mix(in srgb, var(--surface, #161a19) 88%, var(--brand-mid, #2d5248));
+    color: color-mix(in srgb, var(--primary, #e8fc9f) 78%, transparent);
+    box-shadow:
+        0 1px 3px color-mix(in srgb, #000000 35%, transparent),
+        0 0 0 1px color-mix(in srgb, #ffffff 6%, transparent) inset;
+}
+html.dark .blocklify-drag-handle:hover {
+    color: var(--brand-darker, #0f2320);
+    background: var(--primary, #e8fc9f);
+    border-color: color-mix(in srgb, var(--primary, #e8fc9f) 55%, transparent);
+}
+html.dark .blocklify-drag-handle:active,
+html.dark .blocklify-sortable-row--dragging > .blocklify-drag-handle {
+    color: var(--brand-darker, #0f2320);
+    background: var(--primary-600, #ccee50);
+}
+@media (hover: none) {
+    .blocklify-drag-handle {
+        opacity: 0.85;
+        pointer-events: auto;
+    }
+}
+.blocklify-drag-overlay {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    max-width: 16rem;
+    padding: 0.5rem 0.75rem;
+    border-radius: 0.5rem;
+    border: 1px solid var(--border, #d4d4d8);
+    background: var(--surface, #ffffff);
+    color: var(--text, #18181b);
+    box-shadow:
+        0 10px 28px color-mix(in srgb, var(--brand-darker, #0f2320) 18%, transparent),
+        0 0 0 1px color-mix(in srgb, var(--primary, #e8fc9f) 35%, transparent);
+    cursor: grabbing;
+    pointer-events: none;
+}
+.blocklify-drag-overlay__grip {
+    flex-shrink: 0;
+    color: var(--text-muted, #52525b);
+}
+.blocklify-drag-overlay__label {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25;
+}
+html.dark .blocklify-drag-overlay {
+    border-color: var(--border, #2c3330);
+    background: var(--surface, #161a19);
+    color: var(--text, #f4f5f4);
+}
+`;

package/dist/preview.d.ts

@@ -1,23 +1,11 @@
-import React from "react";
+import type { BlocklifyBlock, BlockMap, BlockReorderPayload } from "./types.js";
+export type { BlocklifyBlock, BlocklifyBlockProps, BlockMap, BlockReorderPayload, RenderNestedBlocks, } from "./types.js";
+export type { BlockPath, BlockPathSegment } from "./block-path.js";
 /**
- * Blocklify live-preview connector. Editable wrapper styles (border, hover) are defined here (PREVIEW_EDITABLE_CSS)
- * and sent from the admin to the iframe via postMessage (blocklify-preview-styles). The other app only needs
- * to use this lib and listen for that message; it will receive and inject the same styles so no duplication.
+ * Blocklify live-preview connector.
+ * Editable outlines and drag handles are defined in PREVIEW_EDITABLE_CSS and sent from the admin
+ * to the iframe via postMessage (`blocklify-preview-styles`).
  */
-/** Block shape sent by Blocklify (draft content or API). Your block components receive this. */
-export type BlocklifyBlock = {
-    type: string;
-    _uid?: string;
-    [k: string]: unknown;
-};
-/** Props passed to block components: block, optional BlocklifyEditable (spread on root in iframe), optional blockMap (for nested blocks). */
-export type BlocklifyBlockProps = {
-    block: BlocklifyBlock;
-    BlocklifyEditable?: Record<string, unknown>;
-    blockMap?: BlockMap;
-};
-/** Map block type string → component that receives { block, BlocklifyEditable? }. Spread BlocklifyEditable on the root element for click-to-focus in the preview iframe. */
-export type BlockMap = Record<string, React.ComponentType<BlocklifyBlockProps>>;
 /** Storyblok-style payload for data-blok-c (JSON string). */
 export type DataBlokCPayload = {
     name: string;
@@ -33,11 +21,11 @@ export declare function getDataBlokC(block: BlocklifyBlock, options?: {
     spaceId?: string;
     blockId?: string;
 }): string;
+/** True when `BlocklifyEditable` props are the preview click-to-focus props, not an empty object. */
+export declare function isPreviewEditable(editable: Record<string, unknown> | undefined): boolean;
 /**
- * Returns props to spread on the root element of a block so it becomes clickable in the preview iframe (like Storyblok’s storyblokEditable).
- * Sets data-blok-c (Storyblok-style JSON: name, uid, space?, id?) and data-blok-uid for compatibility.
- * Only returns non-empty when in iframe with onBlockClick; otherwise returns {} so components work unchanged outside preview.
- * Use in the preview renderer; components just spread the BlocklifyEditable prop they receive.
+ * Returns props to spread on the root element of a block so it becomes clickable in the preview iframe.
+ * Sets data-blok-c and data-blok-uid. Only returns props when `onBlockClick` is set.
  * Clicks send the block's _uid so the editor can open the form for the correct block.
  */
 export declare function BlocklifyEditable(block: BlocklifyBlock, index: number, onBlockClick: ((uid: string) => void) | undefined, options?: {
@@ -50,16 +38,17 @@ export declare const BLOCKLIFY_PREVIEW_STYLES = "blocklify-preview-styles";
 export declare const BLOCKLIFY_PEER_FOCUS = "blocklify-peer-focus";
 /** Message type the admin sends to scroll a block into view in the preview iframe (e.g. when focusing a field in the editor). */
 export declare const BLOCKLIFY_SCROLL_TO_BLOCK = "blocklify-scroll-to-block";
-/** Single source of truth for editable block styling in the preview iframe. Sent by the admin via postMessage so the other app doesn’t need to duplicate it. */
-export declare const PREVIEW_EDITABLE_CSS = "\n:root {\n    --radius: 0.5rem;\n}\n[data-blocklify-iframe-editable],\n[data-blok-uid] {\n    cursor: pointer !important;\n    border: 2px solid #2563eb !important;\n    border-radius: var(--radius) !important;\n    padding: 6px !important;\n    margin-bottom: 10px !important;\n    box-sizing: border-box !important;\n    transition: border-color 0.2s ease, background-color 0.2s ease !important;\n    position: relative !important;\n    min-height: 24px !important;\n}\n[data-blocklify-iframe-editable]:hover,\n[data-blok-uid]:hover {\n    border-color: #1d4ed8 !important;\n    background-color: rgba(37, 99, 235, 0.06) !important;\n}\n@keyframes blocklify-preview-focus-blink {\n    0% {\n        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);\n        border-color: #2563eb !important;\n    }\n    35% {\n        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.45);\n        border-color: #1d4ed8 !important;\n    }\n    100% {\n        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);\n        border-color: #2563eb !important;\n    }\n}\n.blocklify-preview-focus-blink {\n    animation: blocklify-preview-focus-blink 0.55s ease-out 1 !important;\n}\n@media (prefers-reduced-motion: reduce) {\n    .blocklify-preview-focus-blink {\n        animation: none !important;\n    }\n}\n";
+export { PREVIEW_EDITABLE_CSS } from "./preview-styles.js";
 /**
  * Hook that connects your preview page to the Blocklify admin iframe:
  * - Listens for draft content via postMessage (type: "blocklify-draft").
  * - Sends block clicks back to the editor (type: "blocklify-block-click").
- * Use this when your preview page is loaded inside the Blocklify admin iframe.
+ * - `applyBlockReorder` updates the local draft immediately; the sortable renderer posts the reorder.
  */
 export declare function useBlocklifyPreview(blocksFieldName?: string): {
     blocks: BlocklifyBlock[];
+    /** Full draft content object from the editor, including fields outside `blocksFieldName`. */
+    content: Record<string, unknown> | null;
     isInIframe: boolean;
     onBlockClick: (uid: string) => void;
     showEmptyMessage: boolean;
@@ -67,11 +56,15 @@ export declare function useBlocklifyPreview(blocksFieldName?: string): {
     spaceId: string | null;
     /** Use this when rendering editable wrappers: parent-sent CSS or PREVIEW_EDITABLE_CSS. */
     editableCss: string;
-    /** Peer-focused blocks: uid → { name, color }. Inject as colored borders to show who is editing what. */
+    /** Peer-focused blocks: uid → { name, color }. */
     peerFocusedBlocks: Record<string, {
         name: string;
         color: string;
     }>;
+    /** CSS that paints peer outlines. Empty when nobody else is focused. */
+    peerFocusCss: string;
+    /** Apply a drag reorder to the local draft. The sortable tree posts `blocklify-block-reorder` after this. */
+    applyBlockReorder: (payload: BlockReorderPayload) => string | null;
 };
 type BlocklifyPreviewRendererProps = {
     blocks: BlocklifyBlock[];
@@ -83,12 +76,22 @@ type BlocklifyPreviewRendererProps = {
     editableCss?: string;
     /** Optional: pass to each component so nested blocks (e.g. Page, Grid) can render. */
     blockMapForNested?: BlockMap;
+    /** Field these blocks live on. Default "body". Nested columns use their own field name. */
+    blocksFieldName?: string;
+    /** Drag handles and reorder. Defaults to on when `onBlockClick` is set. */
+    sortable?: boolean;
+    /** Fields whose arrays can be reordered. Default: body, blocks, columns, items. */
+    sortableBlocksFields?: readonly string[];
+    /** Updates local draft content and returns the moved uid. */
+    onBlockReorder?: (payload: BlockReorderPayload) => string | null;
+    /** Inject PREVIEW_EDITABLE_CSS. Set false when a parent already injected it. */
+    injectStyles?: boolean;
 };
 /**
- * Renders blocks using your blockMap. Passes BlocklifyEditable (from BlocklifyEditable()) so components can spread it on their root for click-to-focus in the iframe.
- * Styles are injected from editableCss (sent by admin via postMessage). No wrapper div – components apply {...BlocklifyEditable} themselves.
+ * Renders blocks using your blockMap. Passes BlocklifyEditable so components can spread it on their root.
+ * In the preview iframe, wraps sortable lists with drag handles and posts `blocklify-block-reorder`.
  */
-export declare function BlocklifyPreviewRenderer({ blocks, blockMap, onBlockClick, spaceId, editableCss, blockMapForNested, }: BlocklifyPreviewRendererProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlocklifyPreviewRenderer({ blocks, blockMap, onBlockClick, spaceId, editableCss, blockMapForNested, blocksFieldName, sortable, sortableBlocksFields, onBlockReorder, injectStyles, }: BlocklifyPreviewRendererProps): import("react/jsx-runtime").JSX.Element;
 export type BlocklifyPreviewProps = {
     /** Map of block type → component that receives { block }. Define your blocks in your app and pass this. */
     blockMap: BlockMap;
@@ -98,14 +101,16 @@ export type BlocklifyPreviewProps = {
     emptyMessage?: string;
     /** Optional className for the root wrapper. */
     className?: string;
+    /** Fields whose arrays can be reordered. Default: body, blocks, columns, items. */
+    sortableBlocksFields?: readonly string[];
 };
 /**
  * Preview connector for Blocklify. Use this on your frontend’s preview page (e.g. /preview).
  * You only need to define your block components and a blockMap; this component handles:
  * - Receiving draft content from the Blocklify admin via postMessage
  * - Sending block clicks back to the editor
- * - Empty state message and editable borders when embedded in the admin iframe
+ * - Dashed outlines, a click blink, and drag-and-drop reorder when embedded in the admin iframe
  */
-export declare function BlocklifyPreview({ blockMap, blocksFieldName, emptyMessage, className, }: BlocklifyPreviewProps): import("react/jsx-runtime").JSX.Element;
+export declare function BlocklifyPreview({ blockMap, blocksFieldName, emptyMessage, className, sortableBlocksFields, }: BlocklifyPreviewProps): import("react/jsx-runtime").JSX.Element;
 /** Default export so both "import BlocklifyPreview from '...'" and "import { BlocklifyPreview } from '...'" work. */
 export default BlocklifyPreview;

package/dist/preview.js

@@ -1,6 +1,9 @@
 "use client";
 import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
-import { useCallback, useEffect, useState, useSyncExternalStore } from "react";
+import React, { useCallback, useEffect, useRef, useState, useSyncExternalStore } from "react";
+import { moveBlockInContent, toBlockPathSegment } from "./block-path.js";
+import { PREVIEW_EDITABLE_CSS, PREVIEW_FOCUS_BLINK_CLASS, PREVIEW_FOCUS_BLINK_MS } from "./preview-styles.js";
+import { PreviewSortableTree } from "./sortable-preview.js";
 /**
  * Builds the value for the data-blok-c attribute (Storyblok-style JSON string).
  * Use when you need to set data-blok-c yourself; otherwise BlocklifyEditable includes it.
@@ -17,11 +20,21 @@ export function getDataBlokC(block, options) {
     };
     return JSON.stringify(payload);
 }
+/** True when `BlocklifyEditable` props are the preview click-to-focus props, not an empty object. */
+export function isPreviewEditable(editable) {
+    return editable != null && Object.keys(editable).length > 0;
+}
+function pulsePreviewBlock(el) {
+    el.classList.remove(PREVIEW_FOCUS_BLINK_CLASS);
+    void el.offsetWidth;
+    el.classList.add(PREVIEW_FOCUS_BLINK_CLASS);
+    window.setTimeout(() => {
+        el.classList.remove(PREVIEW_FOCUS_BLINK_CLASS);
+    }, PREVIEW_FOCUS_BLINK_MS);
+}
 /**
- * Returns props to spread on the root element of a block so it becomes clickable in the preview iframe (like Storyblok’s storyblokEditable).
- * Sets data-blok-c (Storyblok-style JSON: name, uid, space?, id?) and data-blok-uid for compatibility.
- * Only returns non-empty when in iframe with onBlockClick; otherwise returns {} so components work unchanged outside preview.
- * Use in the preview renderer; components just spread the BlocklifyEditable prop they receive.
+ * Returns props to spread on the root element of a block so it becomes clickable in the preview iframe.
+ * Sets data-blok-c and data-blok-uid. Only returns props when `onBlockClick` is set.
  * Clicks send the block's _uid so the editor can open the form for the correct block.
  */
 export function BlocklifyEditable(block, index, onBlockClick, options) {
@@ -36,14 +49,17 @@ export function BlocklifyEditable(block, index, onBlockClick, options) {
         tabIndex: 0,
         title: "Click to focus in editor",
         "aria-label": `Edit block ${index + 1}, ${block.type}`,
-        onClick: (e) => {
-            e.preventDefault();
-            e.stopPropagation();
+        onClick: (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.currentTarget instanceof HTMLElement) {
+                pulsePreviewBlock(event.currentTarget);
+            }
             onBlockClick(uid);
         },
-        onKeyDown: (e) => {
-            if (e.key === "Enter" || e.key === " ") {
-                e.preventDefault();
+        onKeyDown: (event) => {
+            if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
                 onBlockClick(uid);
             }
         },
@@ -57,16 +73,6 @@ export const BLOCKLIFY_PREVIEW_STYLES = "blocklify-preview-styles";
 export const BLOCKLIFY_PEER_FOCUS = "blocklify-peer-focus";
 /** Message type the admin sends to scroll a block into view in the preview iframe (e.g. when focusing a field in the editor). */
 export const BLOCKLIFY_SCROLL_TO_BLOCK = "blocklify-scroll-to-block";
-const PREVIEW_FOCUS_BLINK_CLASS = "blocklify-preview-focus-blink";
-const PREVIEW_FOCUS_BLINK_MS = 550;
-function pulsePreviewBlock(el) {
-    el.classList.remove(PREVIEW_FOCUS_BLINK_CLASS);
-    void el.offsetWidth;
-    el.classList.add(PREVIEW_FOCUS_BLINK_CLASS);
-    window.setTimeout(() => {
-        el.classList.remove(PREVIEW_FOCUS_BLINK_CLASS);
-    }, PREVIEW_FOCUS_BLINK_MS);
-}
 function scrollPreviewBlockIntoView(uid) {
     if (typeof document === "undefined" || !uid)
         return;
@@ -75,56 +81,27 @@ function scrollPreviewBlockIntoView(uid) {
         document.querySelector(`[data-blocklify-uid="${escaped}"]`);
     if (!(el instanceof HTMLElement))
         return;
+    let parent = el.parentElement;
+    while (parent) {
+        const style = window.getComputedStyle(parent);
+        const overflowY = style.overflowY;
+        const canScrollY = (overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") &&
+            parent.scrollHeight > parent.clientHeight + 1;
+        if (canScrollY) {
+            const parentRect = parent.getBoundingClientRect();
+            const elRect = el.getBoundingClientRect();
+            const delta = elRect.top - parentRect.top - parent.clientHeight / 2 + elRect.height / 2;
+            parent.scrollBy({ top: delta, behavior: "smooth" });
+            pulsePreviewBlock(el);
+            return;
+        }
+        parent = parent.parentElement;
+    }
     el.scrollIntoView({ behavior: "smooth", block: "center", inline: "nearest" });
     pulsePreviewBlock(el);
 }
-/** Single source of truth for editable block styling in the preview iframe. Sent by the admin via postMessage so the other app doesn’t need to duplicate it. */
-export const PREVIEW_EDITABLE_CSS = `
-:root {
-    --radius: 0.5rem;
-}
-[data-blocklify-iframe-editable],
-[data-blok-uid] {
-    cursor: pointer !important;
-    border: 2px solid #2563eb !important;
-    border-radius: var(--radius) !important;
-    padding: 6px !important;
-    margin-bottom: 10px !important;
-    box-sizing: border-box !important;
-    transition: border-color 0.2s ease, background-color 0.2s ease !important;
-    position: relative !important;
-    min-height: 24px !important;
-}
-[data-blocklify-iframe-editable]:hover,
-[data-blok-uid]:hover {
-    border-color: #1d4ed8 !important;
-    background-color: rgba(37, 99, 235, 0.06) !important;
-}
-@keyframes blocklify-preview-focus-blink {
-    0% {
-        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
-        border-color: #2563eb !important;
-    }
-    35% {
-        box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.45);
-        border-color: #1d4ed8 !important;
-    }
-    100% {
-        box-shadow: 0 0 0 0 rgba(37, 99, 235, 0);
-        border-color: #2563eb !important;
-    }
-}
-.${PREVIEW_FOCUS_BLINK_CLASS} {
-    animation: blocklify-preview-focus-blink 0.55s ease-out 1 !important;
-}
-@media (prefers-reduced-motion: reduce) {
-    .${PREVIEW_FOCUS_BLINK_CLASS} {
-        animation: none !important;
-    }
-}
-`;
+export { PREVIEW_EDITABLE_CSS } from "./preview-styles.js";
 function subscribeIsInIframe() {
-    // iframe embedding does not change for the lifetime of the page.
     return () => { };
 }
 function getIsInIframeSnapshot() {
@@ -133,31 +110,49 @@ function getIsInIframeSnapshot() {
 function getIsInIframeServerSnapshot() {
     return false;
 }
+function blocksFromContent(content, blocksFieldName) {
+    const rawBlocks = content?.[blocksFieldName];
+    return Array.isArray(rawBlocks)
+        ? rawBlocks.filter((block) => block != null && typeof block === "object" && typeof block.type === "string")
+        : [];
+}
+function peerFocusCssFor(peers) {
+    return Object.entries(peers)
+        .map(([uid, { color }]) => {
+        const safeUid = uid.replace(/\\/g, "\\\\").replace(/"/g, '\\"');
+        return `[data-blok-uid="${safeUid}"], [data-blocklify-uid="${safeUid}"] { outline-color: ${color} !important; box-shadow: 0 0 0 2px ${color} !important; }`;
+    })
+        .join("\n");
+}
 /**
  * Hook that connects your preview page to the Blocklify admin iframe:
  * - Listens for draft content via postMessage (type: "blocklify-draft").
  * - Sends block clicks back to the editor (type: "blocklify-block-click").
- * Use this when your preview page is loaded inside the Blocklify admin iframe.
+ * - `applyBlockReorder` updates the local draft immediately; the sortable renderer posts the reorder.
  */
 export function useBlocklifyPreview(blocksFieldName = "body") {
     const [draftContent, setDraftContent] = useState(null);
+    const draftRef = useRef(null);
     /** CSS for editable wrappers: from parent (postMessage) or fallback to PREVIEW_EDITABLE_CSS. */
     const [receivedEditableCss, setReceivedEditableCss] = useState(null);
     const [peerFocusedBlocks, setPeerFocusedBlocks] = useState({});
     const isInIframe = useSyncExternalStore(subscribeIsInIframe, getIsInIframeSnapshot, getIsInIframeServerSnapshot);
     const [spaceId, setSpaceId] = useState(null);
+    const setDraft = useCallback((content) => {
+        draftRef.current = content;
+        setDraftContent(content);
+    }, []);
     useEffect(() => {
         if (!isInIframe)
             return;
         const onMessage = (event) => {
             if (event.data?.type === BLOCKLIFY_DRAFT && event.data.content != null) {
-                setDraftContent(event.data.content);
+                setDraft(event.data.content);
                 setSpaceId(typeof event.data.spaceId === "string" && event.data.spaceId.trim() !== ""
                     ? event.data.spaceId
                     : null);
             }
-            if (event.data?.type === BLOCKLIFY_PREVIEW_STYLES &&
-                typeof event.data.css === "string") {
+            if (event.data?.type === BLOCKLIFY_PREVIEW_STYLES && typeof event.data.css === "string") {
                 setReceivedEditableCss(event.data.css);
             }
             if (event.data?.type === BLOCKLIFY_PEER_FOCUS && event.data.peers != null) {
@@ -166,7 +161,6 @@ export function useBlocklifyPreview(blocksFieldName = "body") {
             if (event.data?.type === BLOCKLIFY_SCROLL_TO_BLOCK &&
                 typeof event.data.uid === "string" &&
                 event.data.uid.trim() !== "") {
-                // Wait a frame so draft content / DOM from a concurrent update can settle.
                 requestAnimationFrame(() => {
                     scrollPreviewBlockIntoView(event.data.uid);
                 });
@@ -174,21 +168,29 @@ export function useBlocklifyPreview(blocksFieldName = "body") {
         };
         window.addEventListener("message", onMessage);
         return () => window.removeEventListener("message", onMessage);
-    }, [isInIframe]);
+    }, [isInIframe, setDraft]);
     const onBlockClick = useCallback((uid) => {
         if (typeof window === "undefined" || window === window.parent)
             return;
         window.parent.postMessage({ type: BLOCKLIFY_BLOCK_CLICK, uid, blocksFieldName }, "*");
     }, [blocksFieldName]);
-    const rawBlocks = draftContent?.[blocksFieldName];
-    const blocks = Array.isArray(rawBlocks)
-        ? rawBlocks.filter((b) => b != null &&
-            typeof b === "object" &&
-            typeof b.type === "string")
-        : [];
+    const applyBlockReorder = useCallback((payload) => {
+        const current = draftRef.current;
+        if (!current)
+            return null;
+        const moved = moveBlockInContent(current, payload.sourcePath, payload.destinationPath);
+        if (!moved || moved.movedUid !== payload.movedUid)
+            return null;
+        draftRef.current = moved.next;
+        setDraftContent(moved.next);
+        return moved.movedUid;
+    }, []);
+    const blocks = blocksFromContent(draftContent, blocksFieldName);
     const showEmptyMessage = isInIframe && blocks.length === 0 && draftContent === null;
     return {
         blocks,
+        /** Full draft content object from the editor, including fields outside `blocksFieldName`. */
+        content: draftContent,
         isInIframe,
         onBlockClick,
         showEmptyMessage,
@@ -196,10 +198,20 @@ export function useBlocklifyPreview(blocksFieldName = "body") {
         spaceId,
         /** Use this when rendering editable wrappers: parent-sent CSS or PREVIEW_EDITABLE_CSS. */
         editableCss: receivedEditableCss ?? PREVIEW_EDITABLE_CSS,
-        /** Peer-focused blocks: uid → { name, color }. Inject as colored borders to show who is editing what. */
+        /** Peer-focused blocks: uid → { name, color }. */
         peerFocusedBlocks,
+        /** CSS that paints peer outlines. Empty when nobody else is focused. */
+        peerFocusCss: peerFocusCssFor(peerFocusedBlocks),
+        /** Apply a drag reorder to the local draft. The sortable tree posts `blocklify-block-reorder` after this. */
+        applyBlockReorder,
     };
 }
+const EMPTY_BLOCK_MAP = {};
+function resolveComponent(blockMap, type) {
+    return (blockMap[type] ??
+        (type.endsWith("_block") ? blockMap[type.slice(0, -6)] : undefined) ??
+        UnknownBlockFallback);
+}
 /** Fallback when a block type has no component in the blockMap – never pass undefined to React. */
 function UnknownBlockFallback({ block, BlocklifyEditable = {}, }) {
     return (_jsxs("section", { style: {
@@ -212,45 +224,42 @@ function UnknownBlockFallback({ block, BlocklifyEditable = {}, }) {
             fontSize: "0.875rem",
         }, ...BlocklifyEditable, children: [_jsxs("strong", { style: { color: "#475569" }, children: ["Block type \"", block.type, "\" not found."] }), _jsx("p", { style: { margin: "0.5rem 0 0", lineHeight: 1.5 }, children: "Add a component for this block type to your project's blockMap (e.g. in your preview page) to render it here." })] }));
 }
+function PlainBlockList({ blocks, parentPath, fieldName, renderBlock, }) {
+    const renderNestedBlocks = useCallback((nestedBlocks, nestedParentPath, nestedFieldName) => (_jsx(PlainBlockList, { blocks: nestedBlocks, parentPath: nestedParentPath, fieldName: nestedFieldName, renderBlock: renderBlock })), [renderBlock]);
+    return (_jsx(_Fragment, { children: blocks.map((block, index) => {
+            const blockPath = toBlockPathSegment(parentPath, fieldName, index);
+            const key = block._uid ?? `${block.type}-${index}`;
+            return (_jsx(React.Fragment, { children: renderBlock({ block, blockPath, blockIndex: index, renderNestedBlocks }) }, key));
+        }) }));
+}
 /**
- * Renders blocks using your blockMap. Passes BlocklifyEditable (from BlocklifyEditable()) so components can spread it on their root for click-to-focus in the iframe.
- * Styles are injected from editableCss (sent by admin via postMessage). No wrapper div – components apply {...BlocklifyEditable} themselves.
+ * Renders blocks using your blockMap. Passes BlocklifyEditable so components can spread it on their root.
+ * In the preview iframe, wraps sortable lists with drag handles and posts `blocklify-block-reorder`.
  */
-export function BlocklifyPreviewRenderer({ blocks, blockMap, onBlockClick, spaceId, editableCss = PREVIEW_EDITABLE_CSS, blockMapForNested, }) {
-    const safeBlockMap = blockMap ?? {};
+export function BlocklifyPreviewRenderer({ blocks, blockMap, onBlockClick, spaceId, editableCss = PREVIEW_EDITABLE_CSS, blockMapForNested, blocksFieldName = "body", sortable, sortableBlocksFields, onBlockReorder, injectStyles = true, }) {
+    const safeBlockMap = blockMap ?? EMPTY_BLOCK_MAP;
     const nestedMap = blockMapForNested ?? safeBlockMap;
-    const resolveComponent = (type) => safeBlockMap[type] ??
-        (type.endsWith("_block") ? safeBlockMap[type.slice(0, -6)] : undefined) ??
-        UnknownBlockFallback;
-    return (_jsxs(_Fragment, { children: [_jsx("style", { id: "blocklify-preview-editable-styles", dangerouslySetInnerHTML: { __html: editableCss } }), blocks.map((block, i) => {
-                const Component = resolveComponent(block.type);
-                const key = block._uid ?? i;
-                const blocklifyEditable = BlocklifyEditable(block, i, onBlockClick, {
-                    spaceId: spaceId ?? undefined,
-                    blockId: block.id,
-                });
-                return (_jsx(Component, { block: block, BlocklifyEditable: blocklifyEditable, ...(nestedMap && { blockMap: nestedMap }) }, key));
-            })] }));
+    const enableSort = sortable ?? Boolean(onBlockClick);
+    const renderBlock = useCallback(({ block, blockPath, blockIndex, renderNestedBlocks }) => {
+        const Component = resolveComponent(safeBlockMap, block.type);
+        const blocklifyEditable = BlocklifyEditable(block, blockIndex, onBlockClick, {
+            spaceId: spaceId ?? undefined,
+            blockId: block.id,
+        });
+        return (_jsx(Component, { block: block, BlocklifyEditable: blocklifyEditable, blockMap: nestedMap, blockIndex: blockIndex, blockPath: blockPath, renderNestedBlocks: renderNestedBlocks }));
+    }, [nestedMap, onBlockClick, safeBlockMap, spaceId]);
+    return (_jsxs(_Fragment, { children: [injectStyles ? (_jsx("style", { id: "blocklify-preview-editable-styles", dangerouslySetInnerHTML: { __html: editableCss } })) : null, enableSort ? (_jsx(PreviewSortableTree, { blocks: blocks, fieldName: blocksFieldName, sortableBlocksFields: sortableBlocksFields, renderBlock: renderBlock, onBlockReorder: onBlockReorder })) : (_jsx(PlainBlockList, { blocks: blocks, parentPath: [], fieldName: blocksFieldName, renderBlock: renderBlock }))] }));
 }
 /**
  * Preview connector for Blocklify. Use this on your frontend’s preview page (e.g. /preview).
  * You only need to define your block components and a blockMap; this component handles:
  * - Receiving draft content from the Blocklify admin via postMessage
  * - Sending block clicks back to the editor
- * - Empty state message and editable borders when embedded in the admin iframe
+ * - Dashed outlines, a click blink, and drag-and-drop reorder when embedded in the admin iframe
  */
-export function BlocklifyPreview({ blockMap, blocksFieldName = "body", emptyMessage = "Waiting for content from editor…", className, }) {
-    const { blocks, isInIframe, onBlockClick, showEmptyMessage, spaceId, editableCss, peerFocusedBlocks } = useBlocklifyPreview(blocksFieldName);
-    const peerFocusCss = Object.entries(peerFocusedBlocks)
-        .map(([uid, { color }]) => `[data-blok-uid="${uid}"] { border-color: ${color} !important; box-shadow: 0 0 0 2px ${color} !important; }`)
-        .join("\n");
-    return (_jsxs("div", { className: className ?? "min-h-screen bg-surface text-text blocklify-preview-non-interactive", children: [_jsx("style", { children: `
-                .blocklify-preview-non-interactive a,
-                .blocklify-preview-non-interactive button {
-                    pointer-events: none;
-                    cursor: default;
-                }
-            ` }), peerFocusCss && (_jsx("style", { id: "blocklify-peer-focus-styles", children: peerFocusCss })), showEmptyMessage && (_jsx("div", { className: "flex min-h-screen items-center justify-center", children: _jsx("p", { className: "text-sm text-text-muted", children: emptyMessage }) })), _jsx(BlocklifyPreviewRenderer, { blocks: blocks, blockMap: blockMap, onBlockClick: isInIframe ? onBlockClick : undefined, spaceId: spaceId, editableCss: editableCss, blockMapForNested: blockMap })] }));
+export function BlocklifyPreview({ blockMap, blocksFieldName = "body", emptyMessage = "Waiting for content from editor…", className, sortableBlocksFields, }) {
+    const { blocks, isInIframe, onBlockClick, showEmptyMessage, spaceId, editableCss, peerFocusCss, applyBlockReorder, } = useBlocklifyPreview(blocksFieldName);
+    return (_jsxs("div", { className: className ?? "min-h-screen bg-surface text-text blocklify-preview-non-interactive", children: [peerFocusCss ? _jsx("style", { id: "blocklify-peer-focus-styles", children: peerFocusCss }) : null, showEmptyMessage && (_jsx("div", { className: "flex min-h-screen items-center justify-center", children: _jsx("p", { className: "text-sm text-text-muted", children: emptyMessage }) })), _jsx(BlocklifyPreviewRenderer, { blocks: blocks, blockMap: blockMap, onBlockClick: isInIframe ? onBlockClick : undefined, spaceId: spaceId, editableCss: editableCss, blockMapForNested: blockMap, blocksFieldName: blocksFieldName, sortable: isInIframe, sortableBlocksFields: sortableBlocksFields, onBlockReorder: applyBlockReorder })] }));
 }
 /** Default export so both "import BlocklifyPreview from '...'" and "import { BlocklifyPreview } from '...'" work. */
 export default BlocklifyPreview;

package/dist/sortable-preview.d.ts

@@ -0,0 +1,17 @@
+import { type ReactNode } from "react";
+import { type BlockPath } from "./block-path.js";
+import type { BlocklifyBlock, BlockReorderPayload, RenderNestedBlocks } from "./types.js";
+export type RenderSortableBlock = (args: {
+    block: BlocklifyBlock;
+    blockPath: BlockPath;
+    blockIndex: number;
+    renderNestedBlocks: RenderNestedBlocks;
+}) => ReactNode;
+export declare function PreviewSortableTree({ blocks, fieldName, sortableBlocksFields, renderBlock, onBlockReorder, }: {
+    blocks: BlocklifyBlock[];
+    fieldName: string;
+    sortableBlocksFields?: readonly string[];
+    renderBlock: RenderSortableBlock;
+    /** Updates local draft content. Return the moved uid when the move was applied. */
+    onBlockReorder?: (payload: BlockReorderPayload) => string | null;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/sortable-preview.js

@@ -0,0 +1,213 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useRef, useState } from "react";
+import { closestCenter, DndContext, DragOverlay, PointerSensor, useDroppable, useSensor, useSensors, } from "@dnd-kit/core";
+import { SortableContext, horizontalListSortingStrategy, useSortable, verticalListSortingStrategy, } from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
+import { canMoveBlockToDestination, createSortableFieldsSet, getBlocksFieldNameFromPath, getBlocksListKey, getPathKey, getSortableContextId, getSortableId, isGridSortableField, isNestedGridDropPath, isNestedSortableContainer, isPathInsideBlock, isDropIntoOwnNestedField, isSameBlocksList, isSortableBlocksField, isVirtualPreviewBlock, toBlockPathSegment, } from "./block-path.js";
+const BLOCKLIFY_BLOCK_REORDER = "blocklify-block-reorder";
+const restrictToHorizontalAxis = ({ transform }) => ({
+    ...transform,
+    y: 0,
+});
+function getSortableStrategy(fieldName) {
+    return isGridSortableField(fieldName) ? horizontalListSortingStrategy : verticalListSortingStrategy;
+}
+/**
+ * Column children only collide with siblings. Body blocks ignore nested cells
+ * so they reorder around a columns block instead of dropping into it.
+ */
+const previewCollisionDetection = (args) => {
+    const collisions = closestCenter(args);
+    const activePath = args.active.data.current?.path;
+    if (activePath && isGridSortableField(getBlocksFieldNameFromPath(activePath))) {
+        const sourceListKey = getBlocksListKey(activePath);
+        return collisions.filter((collision) => {
+            const container = args.droppableContainers.find((entry) => entry.id === collision.id);
+            const path = container?.data.current?.path;
+            if (!path?.length)
+                return false;
+            return getBlocksListKey(path) === sourceListKey;
+        });
+    }
+    return collisions.filter((collision) => {
+        const container = args.droppableContainers.find((entry) => entry.id === collision.id);
+        const path = container?.data.current?.path;
+        if (!path?.length)
+            return true;
+        if (isNestedGridDropPath(path))
+            return false;
+        if (activePath && isPathInsideBlock(path, activePath))
+            return false;
+        return true;
+    });
+};
+function emitBlockReorder(payload) {
+    if (typeof window === "undefined" || window === window.parent)
+        return;
+    window.parent.postMessage({ type: BLOCKLIFY_BLOCK_REORDER, ...payload }, "*");
+}
+function GripIcon({ className }) {
+    return (_jsxs("svg", { className: className, width: "14", height: "14", viewBox: "0 0 14 14", fill: "currentColor", "aria-hidden": true, children: [_jsx("circle", { cx: "4.5", cy: "3", r: "1.15" }), _jsx("circle", { cx: "9.5", cy: "3", r: "1.15" }), _jsx("circle", { cx: "4.5", cy: "7", r: "1.15" }), _jsx("circle", { cx: "9.5", cy: "7", r: "1.15" }), _jsx("circle", { cx: "4.5", cy: "11", r: "1.15" }), _jsx("circle", { cx: "9.5", cy: "11", r: "1.15" })] }));
+}
+function blockLabel(block) {
+    const raw = block.type.replace(/_/g, " ");
+    return raw.charAt(0).toUpperCase() + raw.slice(1);
+}
+function BlockDragOverlayCard({ block }) {
+    return (_jsxs("div", { className: "blocklify-drag-overlay", children: [_jsx(GripIcon, { className: "blocklify-drag-overlay__grip" }), _jsx("span", { className: "blocklify-drag-overlay__label", children: blockLabel(block) })] }));
+}
+function SortableListDropZone({ parentPath, fieldName, itemCount, gridLayout = false, children, }) {
+    const listId = getSortableContextId(parentPath, fieldName);
+    const { setNodeRef } = useDroppable({
+        id: `${listId}:drop-zone`,
+        data: {
+            path: toBlockPathSegment(parentPath, fieldName, itemCount),
+        },
+    });
+    return (_jsx("div", { ref: setNodeRef, className: gridLayout
+            ? "blocklify-sortable-drop-zone blocklify-sortable-drop-zone--grid"
+            : "blocklify-sortable-drop-zone", children: children }));
+}
+function PreviewSortableBlock({ block, blockPath, blockIndex, lockHorizontal = false, renderBlock, renderNestedBlocks, }) {
+    const sortableId = getSortableId(block, blockPath);
+    const { attributes, listeners, setNodeRef, setActivatorNodeRef, transform, transition, isDragging } = useSortable({
+        id: sortableId,
+        data: { path: blockPath, block },
+    });
+    const lockedTransform = transform && lockHorizontal ? { ...transform, y: 0 } : transform;
+    const style = lockedTransform
+        ? { transform: CSS.Transform.toString(lockedTransform), transition }
+        : undefined;
+    const isContainer = isNestedSortableContainer(block.type);
+    return (_jsxs("div", { ref: setNodeRef, style: style, className: [
+            "blocklify-sortable-row",
+            isDragging ? "blocklify-sortable-row--dragging" : null,
+            lockHorizontal ? "blocklify-sortable-row--horizontal" : null,
+        ]
+            .filter(Boolean)
+            .join(" "), children: [_jsx("button", { ref: setActivatorNodeRef, type: "button", className: isContainer
+                    ? "blocklify-drag-handle blocklify-drag-handle--container"
+                    : "blocklify-drag-handle", ...listeners, ...attributes, "aria-label": isContainer ? "Drag to reorder columns" : "Drag to reorder", title: isContainer ? "Drag to reorder columns" : "Drag to reorder", children: _jsx(GripIcon, { className: "blocklify-drag-handle__icon" }) }), _jsx("div", { className: "blocklify-sortable-row__content", children: renderBlock({ block, blockPath, blockIndex, renderNestedBlocks }) })] }));
+}
+function renderBlockList(blocks, parentPath, fieldName, sortableFields, renderBlock, renderNestedBlocks) {
+    const pathKey = getPathKey(parentPath);
+    const sortable = isSortableBlocksField(fieldName, sortableFields);
+    if (!sortable) {
+        return (_jsx(_Fragment, { children: blocks.map((block, index) => {
+                const blockPath = toBlockPathSegment(parentPath, fieldName, index);
+                const key = block._uid ?? `${pathKey}:${fieldName}:${index}`;
+                return (_jsx("div", { children: renderBlock({ block, blockPath, blockIndex: index, renderNestedBlocks }) }, key));
+            }) }));
+    }
+    const sortableItems = blocks
+        .map((block, index) => ({ block, path: toBlockPathSegment(parentPath, fieldName, index) }))
+        .filter(({ block }) => !isVirtualPreviewBlock(block))
+        .map(({ block, path }) => getSortableId(block, path));
+    const gridLayout = isGridSortableField(fieldName);
+    const renderedBlocks = blocks.map((block, index) => {
+        const blockPath = toBlockPathSegment(parentPath, fieldName, index);
+        const key = block._uid ?? `${pathKey}:${fieldName}:${index}`;
+        if (isVirtualPreviewBlock(block)) {
+            return (_jsx("div", { children: renderBlock({ block, blockPath, blockIndex: index, renderNestedBlocks }) }, key));
+        }
+        return (_jsx(PreviewSortableBlock, { block: block, blockPath: blockPath, blockIndex: index, lockHorizontal: gridLayout, renderBlock: renderBlock, renderNestedBlocks: renderNestedBlocks }, key));
+    });
+    return (_jsx(SortableListDropZone, { parentPath: parentPath, fieldName: fieldName, itemCount: sortableItems.length, gridLayout: gridLayout, children: _jsx(SortableContext, { id: getSortableContextId(parentPath, fieldName), items: sortableItems, strategy: getSortableStrategy(fieldName), children: renderedBlocks }) }));
+}
+function resolveDropFromEvent(event) {
+    const activePath = event.active.data.current?.path;
+    let overPath = event.over?.data.current?.path;
+    const activeBlock = event.active.data.current?.block;
+    if (!event.over || !activePath || !overPath)
+        return null;
+    if (activePath.length === 0 || overPath.length === 0)
+        return null;
+    const sourceInGrid = isGridSortableField(getBlocksFieldNameFromPath(activePath));
+    if (sourceInGrid) {
+        if (!isSameBlocksList(activePath, overPath))
+            return null;
+        if (isDropIntoOwnNestedField(activePath, overPath))
+            return null;
+        return { sourcePath: activePath, destinationPath: overPath };
+    }
+    if (isNestedGridDropPath(overPath)) {
+        const lifted = overPath.slice(0, -1);
+        if (lifted.length === 0)
+            return null;
+        overPath = lifted;
+    }
+    if (!canMoveBlockToDestination(activeBlock?.type, activePath, overPath))
+        return null;
+    if (isDropIntoOwnNestedField(activePath, overPath))
+        return null;
+    return { sourcePath: activePath, destinationPath: overPath };
+}
+export function PreviewSortableTree({ blocks, fieldName, sortableBlocksFields, renderBlock, onBlockReorder, }) {
+    const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }));
+    const sortableFields = useMemo(() => createSortableFieldsSet(sortableBlocksFields), [sortableBlocksFields]);
+    const lastCrossContainerMove = useRef(null);
+    const [activeBlock, setActiveBlock] = useState(null);
+    const [lockHorizontal, setLockHorizontal] = useState(false);
+    const renderNestedBlocks = useCallback(function renderNestedBlocks(nestedBlocks, parentPath, nestedFieldName) {
+        return renderBlockList(nestedBlocks, parentPath, nestedFieldName, sortableFields, renderBlock, renderNestedBlocks);
+    }, [renderBlock, sortableFields]);
+    const handleDragStart = useCallback((event) => {
+        const block = event.active.data.current?.block;
+        const path = event.active.data.current?.path;
+        setActiveBlock(block ?? null);
+        setLockHorizontal(!!path && isGridSortableField(getBlocksFieldNameFromPath(path)));
+    }, []);
+    const clearActive = useCallback(() => {
+        setActiveBlock(null);
+        setLockHorizontal(false);
+    }, []);
+    const handleDragOver = useCallback((event) => {
+        const resolved = resolveDropFromEvent(event);
+        if (!resolved || !onBlockReorder)
+            return;
+        const { sourcePath, destinationPath } = resolved;
+        if (isSameBlocksList(sourcePath, destinationPath)) {
+            lastCrossContainerMove.current = null;
+            return;
+        }
+        const moveKey = `${getBlocksListKey(sourcePath)}->${getBlocksListKey(destinationPath)}:${destinationPath
+            .map((segment) => `${segment.field}:${segment.index}`)
+            .join("/")}`;
+        if (lastCrossContainerMove.current === moveKey)
+            return;
+        const movedUid = onBlockReorder({
+            blocksFieldName: getBlocksFieldNameFromPath(sourcePath),
+            movedUid: event.active.data.current?.block?._uid ?? "",
+            sourcePath,
+            destinationPath,
+        });
+        if (movedUid)
+            lastCrossContainerMove.current = moveKey;
+    }, [onBlockReorder]);
+    const handleDragEnd = useCallback((event) => {
+        clearActive();
+        lastCrossContainerMove.current = null;
+        const resolved = resolveDropFromEvent(event);
+        if (!resolved || !onBlockReorder)
+            return;
+        const { sourcePath, destinationPath } = resolved;
+        const sourceLeaf = sourcePath[sourcePath.length - 1];
+        const destLeaf = destinationPath[destinationPath.length - 1];
+        if (isSameBlocksList(sourcePath, destinationPath) && sourceLeaf.index === destLeaf.index) {
+            return;
+        }
+        const activeBlockData = event.active.data.current?.block;
+        const payload = {
+            blocksFieldName: getBlocksFieldNameFromPath(sourcePath),
+            movedUid: activeBlockData?._uid ?? "",
+            sourcePath,
+            destinationPath,
+        };
+        const movedUid = onBlockReorder(payload);
+        if (!movedUid)
+            return;
+        emitBlockReorder({ ...payload, movedUid });
+    }, [clearActive, onBlockReorder]);
+    return (_jsxs(DndContext, { sensors: sensors, collisionDetection: previewCollisionDetection, modifiers: lockHorizontal ? [restrictToHorizontalAxis] : undefined, onDragStart: handleDragStart, onDragOver: handleDragOver, onDragEnd: handleDragEnd, onDragCancel: clearActive, children: [renderBlockList(blocks, [], fieldName, sortableFields, renderBlock, renderNestedBlocks), _jsx(DragOverlay, { dropAnimation: null, children: activeBlock ? _jsx(BlockDragOverlayCard, { block: activeBlock }) : null })] }));
+}

package/dist/types.d.ts

@@ -0,0 +1,31 @@
+import type { ComponentType, ReactNode } from "react";
+import type { BlockPath } from "./block-path.js";
+/** Block shape sent by Blocklify (draft content or API). Your block components receive this. */
+export type BlocklifyBlock = {
+    type: string;
+    _uid?: string;
+    [k: string]: unknown;
+};
+export type RenderNestedBlocks = (nestedBlocks: BlocklifyBlock[], parentPath: BlockPath, fieldName: string) => ReactNode;
+/**
+ * Props passed to block components.
+ * Spread `BlocklifyEditable` on the root element for click-to-focus in the preview iframe.
+ * `renderNestedBlocks` is set while preview drag-and-drop is active so columns and pages can reorder children.
+ */
+export type BlocklifyBlockProps = {
+    block: BlocklifyBlock;
+    BlocklifyEditable?: Record<string, unknown>;
+    blockMap?: BlockMap;
+    blockIndex?: number;
+    blockPath?: BlockPath;
+    renderNestedBlocks?: RenderNestedBlocks;
+};
+/** Map block type string → component that receives `{ block, BlocklifyEditable? }`. */
+export type BlockMap = Record<string, ComponentType<BlocklifyBlockProps>>;
+/** Payload posted to the editor as `blocklify-block-reorder`. */
+export type BlockReorderPayload = {
+    blocksFieldName: string;
+    movedUid: string;
+    sourcePath: BlockPath;
+    destinationPath: BlockPath;
+};

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@blocklify/preview",
-    "version": "0.2.0",
+    "version": "0.2.2",
     "description": "Blocklify frontend SDK: Content API client and live-preview React helpers for theme blocks.",
     "license": "MIT",
     "type": "module",
@@ -35,8 +35,7 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/BodhiMooij/blocklify.git",
-        "directory": "packages/preview"
+        "url": "git+https://github.com/BodhiMooij/blocklify-preview.git"
     },
     "scripts": {
         "build": "tsc -p tsconfig.json",
@@ -54,6 +53,11 @@
             "optional": false
         }
     },
+    "dependencies": {
+        "@dnd-kit/core": "^6.3.1",
+        "@dnd-kit/sortable": "^10.0.0",
+        "@dnd-kit/utilities": "^3.2.2"
+    },
     "devDependencies": {
         "@types/react": "19.2.14",
         "@types/react-dom": "19.2.3",