@xwadex/fesd-next 0.3.4-7.21 → 0.3.4-7.23

package/dist/components/content-builders/content-builder-hooks.js

@@ -0,0 +1,129 @@
+"use client";
+import { useCallback, useEffect, useRef, useState } from "react";
+export function useBuilder({ builderProps }) {
+    const { config, defaultViewport = "1920" } = builderProps;
+    // const navigate = useNavigate()
+    const builderRef = useRef(null);
+    const resizeObserverRef = useRef(null);
+    const [viewport, setViewport] = useState({
+        view: defaultViewport, zoom: 1
+    });
+    const [blocksViews, setBlocksViews] = useState({ active: false });
+    const [panels, setPanels] = useState({
+        pageEditor: { x: 0, y: 0, z: 1, active: false },
+        contentEditor: { x: 0, y: 0, z: 1, active: false },
+    });
+    const setBuilderDragging = useCallback((state) => {
+        if (!builderRef?.current)
+            return;
+        builderRef.current.setAttribute("data-drag", JSON.stringify(state));
+    }, []);
+    const selectBuilderBlocks = useCallback(async () => {
+        setBuilderDragging(true);
+        return new Promise((resolve) => {
+            setBlocksViews({ active: true, callback: resolve });
+        });
+    }, []);
+    const setBuilderNewBlocks = useCallback((block) => {
+        setBuilderDragging(false);
+        blocksViews.callback?.(block);
+        requestAnimationFrame(() => {
+            setBlocksViews({ active: false });
+        });
+    }, [blocksViews]);
+    const setBuilderPanelsActive = useCallback((id, active) => {
+        if (!id)
+            return;
+        setPanels?.(prev => {
+            const next = ({ ...prev, [id]: { ...prev[id], active: active } });
+            return next;
+        });
+    }, []);
+    const setBuilderViewport = useCallback((viewport) => {
+        setViewport(prev => ({ ...prev, ...viewport }));
+    }, []);
+    const saveBuilderData = useCallback((data) => {
+        console.log("latest data", data);
+        // navigate({
+        //     to: "/test/puck/preview",
+        //     search: { datas: data },
+        //     viewTransition: true
+        // })
+    }, []);
+    // const resizeObserver = useEffectEvent(([entry]: any) => {
+    //     if (!entry) return
+    //     console.log(entry);
+    //     const scale = Math.min(1, entry.contentRect.width / 1920)
+    //     if (entry.contentRect.width <= 1920) {
+    //         console.log({ width: entry.contentRect.width, scale });
+    //     }
+    // })
+    // const resizeScaleBuilder = useEffectEvent((active: boolean) => {
+    //     if (!builderRef?.current) return
+    //     if (active && !resizeObserverRef?.current) {
+    //         resizeObserverRef.current = new ResizeObserver(resizeObserver)
+    //         return resizeObserverRef.current.observe(builderRef?.current)
+    //     }
+    //     if (!active && resizeObserverRef?.current) {
+    //         resizeObserverRef.current?.disconnect()
+    //         resizeObserverRef.current = null
+    //     }
+    // })
+    // useEffect(() => {
+    //     resizeScaleBuilder(true)
+    //     return () => resizeScaleBuilder(false)
+    // }, [builderRef?.current])
+    useEffect(() => {
+        const onKeyDown = (e) => {
+            const key = e.key?.toLowerCase();
+            const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+            // Puck 的 previewMode 切換熱鍵：cmd+i / ctrl+i
+            if (isCmdOrCtrl && key === "i") {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        window.addEventListener("keydown", onKeyDown, true); // <- capture
+        return () => window.removeEventListener("keydown", onKeyDown, true);
+    }, []);
+    return {
+        config,
+        builderRef,
+        viewport,
+        blocksViews,
+        panels,
+        selectBuilderBlocks,
+        setBuilderBlockView: setBlocksViews,
+        setBuilderPanels: setPanels,
+        setBuilderPanelsActive,
+        setBuilderViewport,
+        setBuilderDragging,
+        setBuilderNewBlocks,
+        saveBuilderData,
+    };
+}
+export const useBuilderIframe = ({ iframeDocument, callback, isPreviewKeyDown, }) => {
+    const killPreviewKeyModeDown = (action) => {
+        if (!iframeDocument || !isPreviewKeyDown)
+            return;
+        if (action == "add")
+            iframeDocument.addEventListener("keydown", cancelPreviewModeKeyDown, true);
+        else
+            document.removeEventListener("keydown", cancelPreviewModeKeyDown, true);
+    };
+    useEffect(() => {
+        if (!iframeDocument)
+            return;
+        requestAnimationFrame(() => { callback?.(iframeDocument); });
+        killPreviewKeyModeDown("add");
+        return () => killPreviewKeyModeDown("remove");
+    }, [iframeDocument]);
+};
+function cancelPreviewModeKeyDown(e) {
+    const key = e.key?.toLowerCase();
+    const isCmdOrCtrl = e.metaKey || e.ctrlKey;
+    if (isCmdOrCtrl && key === "i") {
+        e.preventDefault();
+        e.stopPropagation();
+    }
+}

package/dist/components/content-builders/content-builder-iframe.d.ts

@@ -0,0 +1,5 @@
+export interface BuilderIframeProps {
+    document?: Document;
+    children?: React.ReactNode;
+}
+export declare const BuilderIframe: import("react").MemoExoticComponent<({ document, children }: BuilderIframeProps) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/content-builders/content-builder-iframe.js

@@ -0,0 +1,15 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { useBuilderIframe } from "./content-builder-hooks";
+export const BuilderIframe = memo(({ document, children }) => {
+    useBuilderIframe({
+        callback: (document) => {
+            if (document)
+                document.body.style.overflowY = "auto";
+        },
+        iframeDocument: document,
+        isPreviewKeyDown: true
+    });
+    return _jsx(_Fragment, { children: children });
+});

package/dist/components/content-builders/content-builder-overlay.d.ts

@@ -0,0 +1 @@
+export declare const BuilderComponentOverlay: import("react").MemoExoticComponent<({ children, componentType, isSelected }: any) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/content-builders/content-builder-overlay.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useCallback } from "react";
+import { useBuilderContext } from "./content-builder-context";
+import { Plus } from "lucide-react";
+import { useBuilderPucksContext } from "./content-builder-pucks-context";
+import { cn } from "../../shadcns/index.js";
+export const BuilderComponentOverlay = memo(({ children, componentType, isSelected }) => {
+    const { setBuilderPanelsActive } = useBuilderContext();
+    const { insterBlock } = useBuilderPucksContext();
+    // TODO 要改為判斷哪些元件可以插入
+    const isinsterBlock = isSelected && (componentType == "BaseBlock" || componentType == "BaseBlockSue");
+    const addBeforeBlack = useCallback((e) => {
+        e?.stopPropagation();
+        insterBlock("before");
+    }, [insterBlock]);
+    const addAfterBlack = useCallback((e) => {
+        e?.stopPropagation();
+        insterBlock("after");
+    }, [insterBlock]);
+    return (_jsxs(_Fragment, { children: [isinsterBlock && _jsx("button", { onClick: addBeforeBlack, className: cn("border rounded-4xl bg-gray-900 text-white p-2 text-xs", "absolute -top-4 left-1/2 -translate-x-1/2", "cursor-pointer pointer-events-auto"), children: _jsx(Plus, { size: 15 }) }), _jsx("div", { className: "border-indigo-600 bg-indigo-600/5 border-2 h-full w-full", children: children }), isinsterBlock && _jsx("button", { onClick: addAfterBlack, className: cn("border rounded-4xl bg-gray-900 text-white p-2 text-xs", "absolute -bottom-4 left-1/2 -translate-x-1/2", "pointer-events-auto cursor-pointer"), children: _jsx(Plus, { size: 15 }) })] }));
+});

package/dist/components/content-builders/content-builder-panels.d.ts

@@ -0,0 +1,10 @@
+import type { DragEndEvent, DragStartEvent } from "@dnd-kit/core";
+declare const BuilderEditorPannel: import("react").MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;
+export interface PropsTypes {
+    children?: React.ReactNode;
+    dragContainer?: React.RefObject<HTMLDivElement | null>;
+    onDragStart?: (event: DragStartEvent) => void;
+    onDragEnd?: (event: DragEndEvent) => void;
+}
+declare const BuilderPanelsContext: React.FC<PropsTypes>;
+export { BuilderPanelsContext, BuilderEditorPannel, };

package/dist/components/content-builders/content-builder-panels.js

@@ -0,0 +1,165 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useCallback, useEffect, useEffectEvent, useRef } from "react";
+import { createPortal } from "react-dom";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+import { useSensors, useSensor, closestCenter, DndContext, KeyboardSensor, PointerSensor, useDndMonitor, useDraggable } from "@dnd-kit/core";
+import { BuilderFields } from "./content-builder-fields";
+import { useBuilderContext } from "./content-builder-context";
+import { usePuckSelectedItem } from "./content-builder-pucks-hooks";
+import { cn } from "../../shadcns/index.js";
+const DraggablePanel = memo((props) => {
+    const { id, children, defaultPos = {
+        align: "left",
+        offsetX: 0,
+        offsetY: 0
+    } } = props;
+    const { attributes, listeners, setNodeRef, transform, setActivatorNodeRef } = useDraggable({ id });
+    const { setBuilderPanelsActive, setBuilderPanels, panels, builderRef } = useBuilderContext();
+    const { x = 0, y = 0, z = 0, active = false } = panels?.[id] ?? {};
+    const draggableRef = useRef(null);
+    const initPositions = useEffectEvent(() => {
+        if (!draggableRef.current || !active)
+            return;
+        const position = { x: 0, y: 0 };
+        const { width: panelW, height: panelH } = draggableRef.current.getBoundingClientRect();
+        const { align, offsetX = 0, offsetY = 0 } = defaultPos;
+        const viewportW = document.documentElement.clientWidth;
+        const viewportH = document.documentElement.clientHeight;
+        if (align === "right" || align === "rightTop" || align === "rightBottom") {
+            position.x = viewportW - panelW - offsetX;
+        }
+        else if (align === "left" || align === "leftTop" || align === "leftBottom") {
+            position.x = offsetX;
+        }
+        else if (align === "center") {
+            position.x = Math.round((viewportW - panelW) / 2) + offsetX;
+        }
+        if (align === "top" || align === "leftTop" || align === "rightTop") {
+            position.y = offsetY;
+        }
+        else if (align === "bottom" || align === "leftBottom" || align === "rightBottom") {
+            position.y = viewportH - panelH - offsetY;
+        }
+        else if (align === "center") {
+            position.y = Math.round((viewportH - panelH) / 2) + offsetY;
+        }
+        draggableRef.current.style.left = position.x + "px";
+        draggableRef.current.style.top = position.y + "px";
+        setBuilderPanels?.((prev) => {
+            const prevPosition = prev[id];
+            const panelPosition = { ...prevPosition, ...position };
+            return { ...prev, [id]: panelPosition };
+        });
+    });
+    const dragEndPositions = useCallback((delta) => {
+        setBuilderPanels?.((prev) => {
+            const prevPosition = prev[id];
+            const panelPosition = {
+                ...prevPosition,
+                x: (delta?.x ?? 0) + prevPosition.x,
+                y: (delta?.y ?? 0) + prevPosition.y,
+                z: prevPosition.z,
+            };
+            return { ...prev, [id]: panelPosition };
+        });
+    }, [setBuilderPanels, id]);
+    const dragStartPositionsZ = useCallback(() => {
+        setBuilderPanels?.((prev) => {
+            const prevPosition = prev[id];
+            const panelsZ = Object.values(prev).map((pos) => pos.z);
+            const maxZ = Math.max(...panelsZ) + 1;
+            return { ...prev, [id]: { ...prevPosition, z: maxZ } };
+        });
+    }, [setBuilderPanels, id]);
+    const resizePositions = useCallback(() => {
+        setBuilderPanels?.((prev) => {
+            if (draggableRef?.current && builderRef?.current && prev[id]) {
+                const prevPosition = prev[id];
+                const panelRect = draggableRef.current.getBoundingClientRect();
+                const builderRect = builderRef.current.getBoundingClientRect();
+                const maxX = builderRect.width - panelRect.width;
+                const maxY = builderRect.height - panelRect.height;
+                if (prevPosition.x > maxX || prevPosition.y > maxY) {
+                    const x = Math.min(Math.max(prevPosition.x, 0), Math.max(0, maxX));
+                    const y = Math.min(Math.max(prevPosition.y, 0), Math.max(0, maxY));
+                    return { ...prev, [id]: { ...prevPosition, x, y } };
+                }
+            }
+            return prev;
+        });
+    }, [setBuilderPanels, id]);
+    useDndMonitor({
+        onDragStart: ({ active }) => {
+            if (active?.id !== id)
+                return;
+            dragStartPositionsZ();
+        },
+        onDragEnd: ({ delta, active }) => {
+            if (active?.id !== id)
+                return;
+            dragEndPositions(delta);
+        },
+    });
+    useEffect(() => {
+        if (!draggableRef?.current || !active)
+            return;
+        initPositions();
+        window.addEventListener("resize", resizePositions);
+        return () => window.removeEventListener("resize", resizePositions);
+    }, [resizePositions, active]);
+    // useEffect(() => {
+    //     setBuilderPanels?.(prev => {
+    //         const next = ({ ...prev, [id]: { ...prev[id], active: false } })
+    //         return next
+    //     })
+    // }, [selectedItem])
+    return (_jsx(_Fragment, { children: active && createPortal(_jsxs("div", { ref: (node) => {
+                setNodeRef(node);
+                draggableRef.current = node;
+            }, className: cn("fixed", "bg-white", "shadow-xl", "overflow-hidden", "rounded-md", "border"), style: {
+                zIndex: z,
+                left: x,
+                top: y,
+                transform: transform
+                    ? `translate3d(${transform.x}px, ${transform.y}px, 0)`
+                    : undefined
+            }, children: [_jsxs("div", { className: "flex flex-row justify-between", children: [_jsx("div", { ref: setActivatorNodeRef, className: cn("w-5", "h-5", "bg-red-600", "cursor-grab", "active:cursor-grabbing"), ...attributes, ...listeners }), _jsx("button", { className: cn("px-2", "py-1", "cursor-pointer"), onClick: () => setBuilderPanelsActive(id, false), children: "close" })] }), children] }), document.body) }));
+});
+const BuilderEditorPannel = memo(() => {
+    const selectedItem = usePuckSelectedItem();
+    const { config: { components } } = useBuilderContext();
+    const { type } = selectedItem ?? {};
+    const label = type ? components[type].label : type;
+    return (_jsx(_Fragment, { children: selectedItem && _jsx(DraggablePanel, { id: "contentEditor", defaultPos: {
+                offsetX: 40,
+                offsetY: 80,
+                align: "rightTop"
+            }, children: _jsxs("div", { className: cn("w-87.5", "min-h-87.5", "h-full", "overflow-y-auto", "max-h-187.5"), children: [_jsx("div", { className: "px-4 font-semibold text-md", children: label }), _jsx("div", { children: _jsx(BuilderFields, {}) })] }) }) }));
+});
+const BuilderPanelsContext = memo(({ children }) => {
+    const { builderRef, setBuilderDragging, } = useBuilderContext();
+    const sensors = useSensors(useSensor(PointerSensor), useSensor(KeyboardSensor, {
+        coordinateGetter: sortableKeyboardCoordinates,
+    }));
+    const dragModifiers = useCallback(({ transform, activeNodeRect }) => {
+        if (!activeNodeRect || !builderRef?.current)
+            return transform;
+        const containerRect = builderRef.current.getBoundingClientRect();
+        const boxWidth = activeNodeRect.width;
+        const boxHeight = activeNodeRect.height;
+        const originalLeft = activeNodeRect.left;
+        const originalTop = activeNodeRect.top;
+        const minX = containerRect.left - originalLeft;
+        const maxX = containerRect.right - (originalLeft + boxWidth);
+        const minY = containerRect.top - originalTop;
+        const maxY = containerRect.bottom - (originalTop + boxHeight);
+        return {
+            ...transform,
+            x: Math.min(Math.max(transform.x, minX), maxX),
+            y: Math.min(Math.max(transform.y, minY), maxY),
+        };
+    }, [builderRef]);
+    return (_jsx(DndContext, { sensors: sensors, collisionDetection: closestCenter, onDragStart: (e) => setBuilderDragging?.(true), onDragEnd: (e) => setBuilderDragging?.(false), modifiers: [dragModifiers], children: children }));
+});
+export { BuilderPanelsContext, BuilderEditorPannel, };

package/dist/components/content-builders/content-builder-preview.d.ts

@@ -0,0 +1,4 @@
+export declare const BuilderViewport: React.FC<React.ComponentProps<"div">>;
+export declare const BuilderPreview: import("react").MemoExoticComponent<(props: {
+    id?: string;
+}) => import("react/jsx-runtime").JSX.Element>;

package/dist/components/content-builders/content-builder-preview.js

@@ -0,0 +1,22 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { Puck } from "@puckeditor/core";
+import { useBuilderContext } from "./content-builder-context";
+import { useBuilderPucksContext } from "./content-builder-pucks-context";
+import { cn } from "../../shadcns/index.js";
+export const BuilderViewport = memo((props) => {
+    const { viewport } = useBuilderContext();
+    const { selectBlock } = useBuilderPucksContext();
+    const isScreenView = viewport.view == "screen" || viewport.view == "fullscreen";
+    const screenTransform = `scale(${viewport.zoom})`;
+    const scerrnHeight = viewport?.zoom && viewport.zoom < 1 ? `${100 * (1 / viewport.zoom)}%` : undefined;
+    return (_jsx("div", { "data-component": "builder-viewport", className: cn("w-full h-full flex justify-center items-start bg-gray-50! overflow-y-auto", isScreenView ? "p-0 pt-10" : "p-10"), style: {
+            background: `url("data:image/svg+xml,%3Csvg width='24' height='24' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='12' cy='12' r='1' fill='%239ca3af'/%3E%3C/svg%3E")`,
+        }, onClick: () => {
+            selectBlock(null);
+        }, children: _jsx("div", { className: cn("h-full duration-150 transition-[width]", viewport.view == "360" && "w-90", viewport.view == "768" && "w-3xl", viewport.view == "1400" && "w-350", viewport.view == "1920" && "w-480", isScreenView && "w-full"), children: _jsx("div", { className: cn("border w-full h-full shadow-2xl rounded bg-white verflow-hidden", "origin-top duration-150 transition-[transform_height] select-none"), style: { transform: screenTransform, minHeight: scerrnHeight }, ...props }) }) }));
+});
+export const BuilderPreview = memo((props) => {
+    return (_jsx(BuilderViewport, { children: _jsx(Puck.Preview, { ...props, "data-component": "builder-preview", id: "builders-preview" }) }));
+});

package/dist/components/content-builders/content-builder-pucks-context.d.ts

@@ -0,0 +1,13 @@
+export interface BuilderPucksContextValue {
+    setPreviewMode: (state: "edit" | "interactive" | ((previewMode: "edit" | "interactive") => typeof previewMode)) => void;
+    insterBlock: (to?: "before" | "after") => void;
+    orderBlock: (move: "up" | "down") => void;
+    selectBlock: (id?: string | null) => void;
+    unSelectBlock: () => void;
+    scrollToBlock: (id: string) => void;
+}
+export interface BuilderPucksContextProps {
+    children: React.ReactNode;
+}
+export declare const BuilderPucksContextProviders: import("react").MemoExoticComponent<({ children }: BuilderPucksContextProps) => import("react/jsx-runtime").JSX.Element>;
+export declare const useBuilderPucksContext: () => BuilderPucksContextValue;

package/dist/components/content-builders/content-builder-pucks-context.js

@@ -0,0 +1,17 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, memo, use } from "react";
+import { useBuilderPucks } from "./content-builder-pucks-hooks";
+import { useBuilderContext } from "./content-builder-context";
+const BuilderPucksContext = createContext(null);
+export const BuilderPucksContextProviders = memo(({ children }) => {
+    const { builderProps } = useBuilderContext();
+    const BuilderRoots = useBuilderPucks();
+    return _jsx(BuilderPucksContext, { value: BuilderRoots, children: children });
+});
+export const useBuilderPucksContext = () => {
+    const context = use(BuilderPucksContext);
+    if (!context)
+        throw new Error("BuilderPucksContext must be used inside BuilderPucksContextProviders");
+    return context;
+};

package/dist/components/content-builders/content-builder-pucks-hooks.d.ts

@@ -0,0 +1,17 @@
+import { createUsePuck } from "@puckeditor/core";
+import { scrollToBlock } from "./content-builder-helpers";
+import type { Config } from "@puckeditor/core";
+export declare const usePuck: ReturnType<typeof createUsePuck>;
+export declare const usePuckSelectedItem: () => import("@puckeditor/core").ComponentData<any, string, import("@puckeditor/core").DefaultComponents> | null;
+export declare const usePuckPreviewMode: () => "edit" | "interactive";
+export interface UseBuilderRootsOptions {
+    config: Config;
+}
+export declare function useBuilderPucks(): {
+    setPreviewMode: (state: "edit" | "interactive" | ((previewMode: "edit" | "interactive") => typeof previewMode)) => void;
+    selectBlock: (id?: string | null) => void;
+    unSelectBlock: () => void;
+    insterBlock: (inster?: "before" | "after") => Promise<void>;
+    orderBlock: (move: "up" | "down") => void;
+    scrollToBlock: typeof scrollToBlock;
+};

package/dist/components/content-builders/content-builder-pucks-hooks.js

@@ -0,0 +1,119 @@
+"use client";
+import { useCallback, useMemo } from "react";
+import { createUsePuck, useGetPuck } from "@puckeditor/core";
+import { createComponentId, scrollToBlock } from "./content-builder-helpers";
+import { useBuilderContext } from "./content-builder-context";
+export const usePuck = createUsePuck();
+export const usePuckSelectedItem = () => usePuck((api) => api.selectedItem);
+export const usePuckPreviewMode = () => usePuck((api) => api.appState.ui.previewMode);
+export function useBuilderPucks() {
+    const getPuck = useGetPuck();
+    const { selectBuilderBlocks, setBuilderPanels } = useBuilderContext();
+    const selectBlock = useCallback((id) => {
+        const { dispatch, getSelectorForId } = getPuck();
+        const selector = id ? getSelectorForId(id) : null;
+        dispatch({ type: "setUi", ui: { itemSelector: selector } });
+    }, []);
+    const unSelectBlock = useCallback(() => {
+        const { dispatch } = getPuck();
+        dispatch({ type: "setUi", ui: { itemSelector: undefined } });
+    }, []);
+    const onAfterCallback = useCallback((id) => {
+        selectBlock(id);
+        requestAnimationFrame(() => scrollToBlock(id));
+    }, []);
+    const insterBlock = useCallback(async (inster) => {
+        const { appState, dispatch, selectedItem, getParentById } = getPuck();
+        const blockType = await selectBuilderBlocks?.();
+        if (typeof blockType !== "string")
+            return;
+        const { id: itemId } = selectedItem?.props ?? {};
+        const itemParent = itemId
+            ? getParentById(itemId)
+            : { type: "root" };
+        if (itemParent?.type !== "root")
+            return;
+        const nextContent = [...appState.data.content];
+        const selectedIndex = nextContent.findIndex((item) => item.props.id == itemId);
+        const safeIndex = selectedIndex < 0 ? nextContent.length : selectedIndex;
+        const insertIndex = inster === "before" ? safeIndex : safeIndex + 1;
+        const blockId = createComponentId(blockType);
+        dispatch({
+            type: "insert",
+            componentType: blockType,
+            destinationIndex: insertIndex,
+            destinationZone: "root:default-zone",
+            id: blockId,
+        });
+        requestAnimationFrame(() => onAfterCallback(blockId));
+    }, [selectBuilderBlocks]);
+    const orderBlock = (move) => {
+        const { appState, dispatch, selectedItem, getParentById } = getPuck();
+        const { id: itemId } = selectedItem?.props ?? {};
+        const itemParent = itemId
+            ? getParentById(itemId)
+            : { type: "root" };
+        if (itemParent?.type !== "root")
+            return;
+        const nextContent = [...appState.data.content];
+        const selectedIndex = nextContent.findIndex((item) => item.props.id == itemId);
+        const maxIndex = nextContent.length - 1;
+        if (move === "up" && selectedIndex == 0)
+            return;
+        if (move === "down" && selectedIndex == maxIndex)
+            return;
+        const newIndex = selectedIndex + (move === "up" ? -1 : 1);
+        dispatch({
+            type: "reorder",
+            sourceIndex: selectedIndex,
+            destinationIndex: newIndex,
+            destinationZone: "root:default-zone",
+        });
+        requestAnimationFrame(() => onAfterCallback(itemId));
+    };
+    // const setComponentData = useCallback(({ propsKey, value }: any) => {
+    //     const { appState, dispatch, selectedItem, getParentById } = getPuck()
+    //     if (!selectedItem) return
+    //     const { id: itemId } = selectedItem.props
+    //     const { id: parentId } = getParentById(itemId)?.props ?? {}
+    //     const nextData = walkTree(appState.data, config,
+    //         (content, options) => parentId == options.parentId
+    //             ? content.map((child) => child.props.id == itemId
+    //                 ? setDeep(child, propsKey, value)
+    //                 : child)
+    //             : content
+    //     )
+    //     dispatch({ type: "setData", data: nextData })
+    // }, [config])
+    const setPreviewMode = (state) => {
+        const { appState, dispatch } = getPuck();
+        const ui = {
+            previewMode: typeof state == "function" ? state(appState.ui.previewMode) : state,
+            itemSelector: null
+        };
+        dispatch({ type: "setUi", ui });
+        requestAnimationFrame(() => {
+            setBuilderPanels((panels) => Object.keys(panels).reduce((init, key) => {
+                const nextValue = { ...panels[key], active: false };
+                return { ...init, [key]: nextValue };
+            }, {}));
+        });
+    };
+    const BuilderRoots = useMemo(() => ({
+        setPreviewMode,
+        selectBlock,
+        unSelectBlock,
+        insterBlock,
+        orderBlock,
+        scrollToBlock
+    }), [
+        getPuck,
+        setPreviewMode,
+        selectBlock,
+        unSelectBlock,
+        insterBlock,
+        orderBlock,
+        scrollToBlock
+    ]);
+    return BuilderRoots;
+}

package/dist/components/content-builders/content-builder-render.d.ts

@@ -0,0 +1,6 @@
+import { Config } from "@puckeditor/core";
+export interface BuilderRenderProps {
+    data: Record<string, undefined>;
+    config: Config;
+}
+export declare const BuilderRender: React.FC<BuilderRenderProps>;

package/dist/components/content-builders/content-builder-render.js

@@ -0,0 +1,6 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Render } from "@puckeditor/core";
+export const BuilderRender = (props) => {
+    return (_jsx(Render, { ...props }));
+};

package/dist/components/content-builders/content-builder.d.ts

@@ -0,0 +1,7 @@
+import type { PuckProps } from "./content-builder-builder";
+import type { BuildersViewport } from "./content-builder-hooks";
+export interface ContentBuilderProps extends PuckProps {
+    defaultViewport?: BuildersViewport["view"];
+}
+declare const ContentBuilder: React.FC<ContentBuilderProps>;
+export { ContentBuilder };

package/dist/components/content-builders/content-builder.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from "react";
+import { BuilderFunctionBar } from "./content-builder-functionbar";
+import { BuilderContextProviders } from "./content-builder-context";
+import { BuilderEditorPannel, BuilderPanelsContext } from "./content-builder-panels";
+import { Builder } from "./content-builder-builder";
+import { BuilderPreview } from "./content-builder-preview";
+import { BuilderPucksContextProviders } from "./content-builder-pucks-context";
+import { BuilderBlocksDialog } from "./content-builder-blocks-dialogs";
+const ContentBuilder = memo((props) => {
+    if (!props?.data || !props?.config)
+        return null;
+    // const {
+    //     data,
+    //     builderConfigs,
+    //     builderOverrides,
+    //     blacksConfigs,
+    //     blacksOverrides
+    // } = props
+    return (_jsx(BuilderContextProviders, { metadata: { build: true }, ...props, children: _jsx(Builder, { children: _jsxs(BuilderPucksContextProviders, { children: [_jsx(BuilderPanelsContext, { children: _jsx(BuilderEditorPannel, {}) }), _jsx(BuilderFunctionBar, {}), _jsx(BuilderPreview, {}), _jsx(BuilderBlocksDialog, {})] }) }) }));
+});
+ContentBuilder.displayName = "ContentBuilder";
+export { ContentBuilder };

package/dist/components/content-builders/fields/fields-tabs.d.ts

@@ -0,0 +1,5 @@
+export interface PropsTypes extends React.ComponentProps<"div"> {
+    value?: string;
+}
+declare const FieldsTabs: React.FC<PropsTypes>;
+export default FieldsTabs;

package/dist/components/content-builders/fields/fields-tabs.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AutoField, FieldLabel } from "@puckeditor/core";
+import { useState } from "react";
+const FieldsTabs = ({ onChange, value }) => {
+    const [tab, setTab] = useState("A");
+    return (_jsxs(FieldLabel, { label: "Title2", readOnly: true, children: [_jsxs("div", { className: "flex gap-2", children: [_jsx("button", { onClick: () => setTab("A"), className: "flex-1 p-2 border", children: "A" }), _jsx("button", { onClick: () => setTab("B"), className: "flex-1 p-2 border", children: "B" })] }), tab == "A" && _jsx("div", { children: _jsx(AutoField, { field: { type: "text" }, onChange: onChange, value: value ?? "wade", readOnly: true }) }), tab == "B" && _jsx("div", { children: "B" })] }));
+};
+FieldsTabs.displayName = "FieldsTabs";
+export default FieldsTabs;

package/dist/components/content-builders/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./content-builder";
+export * from "./content-builder-render";
+export * from "./initial-datas";
+export * from "./content-builder-hooks";
+export * from "./content-builder-configs";

package/dist/components/content-builders/index.js

@@ -0,0 +1,5 @@
+export * from "./content-builder";
+export * from "./content-builder-render";
+export * from "./initial-datas";
+export * from "./content-builder-hooks";
+export * from "./content-builder-configs";