@xwadex/fesd-next 0.3.4-7.20 → 0.3.4-7.22

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

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Expand, Eye, LaptopMinimal, Maximize, Minus, Monitor, Plus, Shrink, Smartphone, Tablet } from "lucide-react";
+import { useBuilderContext } from "./content-builder-context";
+import { useBuilderPucksContext } from "./content-builder-pucks-context";
+import { getPuckPreviewMode } from "./content-builder-pucks-hooks";
+import { cn } from "../../shadcns/index.js";
+export const BuilderFunctionBar = () => {
+    const { viewport, setBuilderViewport } = useBuilderContext();
+    const { insterBlock, setPreviewMode } = useBuilderPucksContext();
+    const previewMode = getPuckPreviewMode();
+    return (_jsxs("div", { className: cn("absolute", "w-full", "h-10", "flex", "justify-between", "items-center", "gap-5", "px-5", "**: select-none"), style: { display: "flex", gap: 8 }, children: [_jsx("div", { className: "flex-1 flex", children: _jsxs("button", { className: cn("cursor-pointer flex flex-rows gap-1 items-center font-semibold text-md"), onClick: () => {
+                        if (previewMode == "interactive")
+                            return;
+                        insterBlock();
+                    }, children: [_jsx(Plus, { size: 18 }), _jsx("div", { children: "Add Block" })] }) }), _jsxs("div", { className: "flex-1 flex gap-5 justify-center", children: [_jsx("button", { className: "cursor-pointer", onClick: () => setBuilderViewport({ view: "360" }), children: _jsx(Smartphone, { size: 15, strokeWidth: 2.5 }) }), _jsx("button", { className: "cursor-pointer", onClick: () => setBuilderViewport({ view: "768" }), children: _jsx(Tablet, { size: 15, strokeWidth: 2.5 }) }), _jsx("button", { className: "cursor-pointer", onClick: () => setBuilderViewport({ view: "1400" }), children: _jsx(LaptopMinimal, { size: 17, strokeWidth: 2.2 }) }), _jsx("button", { className: "cursor-pointer", onClick: () => setBuilderViewport({ view: "1920" }), children: _jsx(Monitor, { size: 16, strokeWidth: 2.2 }) }), _jsx("button", { className: "cursor-pointer", onClick: () => setBuilderViewport({ view: "screen", zoom: 1 }), children: _jsx(Maximize, { size: 16, strokeWidth: 2.6 }) }), _jsx("button", { className: "cursor-pointer", onClick: () => setBuilderViewport({
+                            view: viewport.view == "fullscreen" ? "screen" : "fullscreen",
+                            zoom: 1
+                        }), children: viewport.view == "fullscreen"
+                            ? _jsx(Shrink, { size: 15, strokeWidth: 1.7 })
+                            : _jsx(Expand, { size: 15, strokeWidth: 1.7 }) }), _jsxs("div", { className: "flex gap-2 justify-center items-center", children: [_jsx("button", { onClick: () => setBuilderViewport({ zoom: Math.max(0.5, (viewport?.zoom ?? 1) - 0.1) }), children: _jsx(Minus, { size: 15, strokeWidth: 1.7 }) }), _jsx("button", { onClick: () => setBuilderViewport({ zoom: Math.min(1, (viewport?.zoom ?? 1) + 0.1) }), children: _jsx(Plus, { size: 15, strokeWidth: 1.7 }) }), _jsx("button", { className: "font-semibold text-xs", onClick: () => setBuilderViewport({ zoom: 1 }), children: `${Math.floor((viewport?.zoom ?? 1) * 100)}%` })] })] }), _jsx("div", { className: "flex-1 flex justify-end", children: _jsxs("button", { className: "cursor-pointer flex flex-rows gap-1 items-center font-semibold text-md", onClick: () => {
+                        setPreviewMode(previewMode == "edit" ? "interactive" : "edit");
+                        setBuilderViewport({ view: previewMode == "edit" ? "fullscreen" : "1920", zoom: 1 });
+                    }, children: [_jsx("div", { children: previewMode == "edit" ? "Preview" : "Build" }), _jsx(Eye, { size: 18 })] }) })] }));
+};

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

@@ -0,0 +1,14 @@
+export declare function scrollToBlock(id: string): void;
+export declare function createComponentId(type: string): string;
+export declare function createSlotsId(props: any): void;
+export declare function createComponentProps(config: any): {
+    type: any;
+    props: any;
+};
+export declare const getSlotsKey: (zone?: string) => {
+    parentId?: undefined;
+    slotName?: undefined;
+} | {
+    parentId: string;
+    slotName: string;
+};

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

@@ -0,0 +1,45 @@
+"use client";
+export function scrollToBlock(id) {
+    const iframe = document.querySelector(`#preview-frame`);
+    if (!iframe)
+        return;
+    const iframeBody = (iframe.contentDocument)?.body;
+    const el = iframeBody?.querySelector(`[data-puck-component="${id}"]`);
+    el?.scrollIntoView({ behavior: "smooth", block: "center" });
+}
+export function createComponentId(type) {
+    const now = new Date();
+    const date = now.getFullYear().toString() +
+        String(now.getMonth() + 1).padStart(2, "0") +
+        String(now.getDate()).padStart(2, "0");
+    const time = String(now.getHours()).padStart(2, "0") +
+        String(now.getMinutes()).padStart(2, "0") +
+        String(now.getSeconds()).padStart(2, "0");
+    const random = Math.random().toString(36).slice(2, 8);
+    return `${type}-${date}-${time}-${random}`;
+}
+export function createSlotsId(props) {
+    if (!props)
+        return;
+    for (const [key, value] of Object.entries(props)) {
+        if (key.startsWith("slot") && Array.isArray(value))
+            value.forEach((item) => {
+                if (!item?.type || !item?.props)
+                    return;
+                item.props["id"] = createComponentId(item.type);
+                createSlotsId(item.props);
+            });
+    }
+}
+export function createComponentProps(config) {
+    const { defaultProps: props, label } = config;
+    props["id"] = createComponentId(label);
+    createSlotsId(props);
+    return { type: label, props };
+}
+export const getSlotsKey = (zone) => {
+    if (!zone)
+        return {};
+    const [parentId, slotName] = zone.split(":");
+    return { parentId, slotName };
+};

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

@@ -0,0 +1,32 @@
+import { ContentBuilderProps } from "./content-builder";
+export interface BlocksViews {
+    active: boolean;
+    callback?: (value: string | boolean) => void;
+}
+export interface BuildersViewport {
+    view?: "360" | "768" | "1400" | "1920" | "screen" | "fullscreen";
+    zoom?: number;
+}
+export type BuildersPanels = Record<string, {
+    x?: number;
+    y?: number;
+    z?: number;
+    active?: boolean;
+}>;
+export interface ContentBuilderOptions {
+    builderProps: ContentBuilderProps;
+}
+export declare function useContentBuilder({ builderProps }: ContentBuilderOptions): {
+    builderRef: import("react").RefObject<HTMLDivElement | null>;
+    viewport: BuildersViewport;
+    blocksViews: BlocksViews;
+    panels: BuildersPanels;
+    selectBuilderBlocks: () => Promise<string | boolean>;
+    setBuilderBlockView: import("react").Dispatch<import("react").SetStateAction<BlocksViews>>;
+    setBuilderPanels: import("react").Dispatch<import("react").SetStateAction<BuildersPanels>>;
+    setBuilderPanelsActive: (id: string, active?: boolean) => void;
+    setBuilderViewport: (viewport: BuildersViewport) => void;
+    setBuilderDragging: (state: boolean) => void;
+    setBuilderNewBlocks: (block: string | boolean) => void;
+    saveBuilderData: (data: any) => void;
+};

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

@@ -0,0 +1,65 @@
+"use client";
+import { useCallback, useRef, useState } from "react";
+export function useContentBuilder({ builderProps }) {
+    const { defaultViewport } = builderProps;
+    const builderRef = useRef(null);
+    const [viewport, setViewport] = useState({
+        view: defaultViewport ?? "1920", 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
+        // })
+    }, []);
+    return {
+        builderRef,
+        viewport,
+        blocksViews,
+        panels,
+        selectBuilderBlocks,
+        setBuilderBlockView: setBlocksViews,
+        setBuilderPanels: setPanels,
+        setBuilderPanelsActive,
+        setBuilderViewport,
+        setBuilderDragging,
+        setBuilderNewBlocks,
+        saveBuilderData,
+    };
+}

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

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

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

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

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

@@ -0,0 +1,84 @@
+export declare const initialData: {
+    root: {
+        props: {
+            title: string;
+            description: string;
+        };
+    };
+    content: ({
+        type: string;
+        props: {
+            slotMediaBlock: {
+                type: string;
+                props: {
+                    id: string;
+                    imgs: string;
+                    alt: string;
+                    products: number[];
+                };
+            }[];
+            slotTextBlock: {
+                type: string;
+                props: {
+                    id: string;
+                    title: string;
+                    subTitle: string;
+                    description: string;
+                    titleOptions: {
+                        content2: string;
+                        tage2: string;
+                        color2: string;
+                        align2: string;
+                    };
+                };
+            }[];
+            options: {
+                textAlign: string;
+                textAlign2: string;
+            };
+            background: {
+                isImage: string;
+            };
+            id: string;
+        };
+    } | {
+        type: string;
+        props: {
+            slotMediaBlock: {
+                type: string;
+                props: {
+                    id: string;
+                    imgs: string;
+                    alt: string;
+                };
+            }[];
+            slotTextBlock: {
+                type: string;
+                props: {
+                    id: string;
+                    title: string;
+                    subTitle: string;
+                    description: string;
+                    titleOptions: {
+                        content2: string;
+                        age2: string;
+                        color2: string;
+                        align2: string;
+                    };
+                };
+            }[];
+            options: {
+                textAlign: string;
+                textAlign2: string;
+            };
+            background: {
+                isImage: string;
+            };
+            id: string;
+        };
+    })[];
+    zones: {};
+    ex: {
+        "slotMediaBlock.products": number[];
+    };
+};

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

@@ -0,0 +1,135 @@
+export const initialData = {
+    root: {
+        props: {
+            title: "Hello, world",
+            description: "Lorem ipsum",
+        }
+    },
+    content: [
+        {
+            type: "BaseBlock",
+            props: {
+                slotMediaBlock: [
+                    {
+                        type: "MediaContent",
+                        props: {
+                            id: "MediaContent-168337f3-0b6f-43d8-8850-6f402eedcb65",
+                            imgs: "/01.png",
+                            alt: "alt",
+                            products: [1, 2, 3, 4, 5, 6]
+                        }
+                    }
+                ],
+                slotTextBlock: [
+                    {
+                        type: "TextContent",
+                        props: {
+                            id: "TextContent-5679409f-98c3-40b5-8a80-ab322f90695f",
+                            title: "Content that adapts to your layout",
+                            subTitle: "Designed for clarity and consistency",
+                            description: "This section supports flexible content placement and alignment across different screen sizes.",
+                            titleOptions: {
+                                content2: "Content that adapts to your layout",
+                                tage2: "h3",
+                                color2: "",
+                                align2: "left"
+                            }
+                        }
+                    }
+                ],
+                options: {
+                    textAlign: "left",
+                    textAlign2: "top"
+                },
+                background: {
+                    isImage: "no"
+                },
+                id: "BaseBlock-aff75e04-815f-4014-97df-83f886fb5f76"
+            }
+        },
+        {
+            type: "BaseBlock",
+            props: {
+                slotMediaBlock: [
+                    {
+                        type: "MediaContent",
+                        props: {
+                            id: "MediaContent-d8dd3ec5-7b3d-487d-81d8-56468tf517be",
+                            imgs: "/01.png",
+                            alt: "alt"
+                        }
+                    }
+                ],
+                slotTextBlock: [
+                    {
+                        type: "TextContent",
+                        props: {
+                            id: "TextContent-0c983fb1-559e-4c82-8830-4e1b3tda07d4",
+                            title: "Content that adapts to your layout",
+                            subTitle: "Designed for clarity and consistency",
+                            description: "This section supports flexible content placement and alignment across different screen sizes.",
+                            titleOptions: {
+                                content2: "Content that adapts to your layout",
+                                age2: "h3",
+                                color2: "",
+                                align2: "left"
+                            }
+                        }
+                    }
+                ],
+                options: {
+                    textAlign: "right",
+                    textAlign2: "top"
+                },
+                background: {
+                    isImage: "no"
+                },
+                id: "BaseBlock-494258fc-5ee2-4403-9788-acb88t4205d8"
+            }
+        },
+        {
+            type: "BaseBlock",
+            props: {
+                slotMediaBlock: [
+                    {
+                        type: "MediaContent",
+                        props: {
+                            id: "MediaContent-d8dd3ec5-7b3d-487d-81d8-56468bf517be",
+                            imgs: "/01.png",
+                            alt: "alt"
+                        }
+                    }
+                ],
+                slotTextBlock: [
+                    {
+                        type: "TextContent",
+                        props: {
+                            id: "TextContent-0c983fb1-559e-4c82-8830-4e1b3ada07d4",
+                            title: "Content that adapts to your layout",
+                            subTitle: "Designed for clarity and consistency",
+                            description: "This section supports flexible content placement and alignment across different screen sizes.",
+                            titleOptions: {
+                                content2: "Content that adapts to your layout",
+                                age2: "h3",
+                                color2: "",
+                                align2: "left"
+                            }
+                        }
+                    }
+                ],
+                options: {
+                    textAlign: "left",
+                    textAlign2: "top"
+                },
+                background: {
+                    isImage: "no"
+                },
+                id: "BaseBlock-494258fc-5ee2-4403-9788-acb8824205d8"
+            }
+        },
+    ],
+    zones: {},
+    ex: {
+        "slotMediaBlock.products": [1, 2, 3, 4, 5, 6]
+    }
+};

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,21 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } 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();
+    const isinsterBlock = isSelected && componentType == "BaseBlock";
+    return (_jsxs(_Fragment, { children: [isinsterBlock && _jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    insterBlock("before");
+                    // setBuilderPanelsActive("blocksSelector", true)
+                }, className: cn("border rounded-4xl bg-indigo-700 text-white p-2 text-xs", "absolute -top-4 left-1/2", "cursor-pointer pointer-events-auto"), children: _jsx(Plus, { size: 15 }) }), _jsx("div", { className: "border-indigo-600 bg-indigo-600/5 border h-full w-full", children: children }), isinsterBlock && _jsx("button", { onClick: (e) => {
+                    e.stopPropagation();
+                    insterBlock("after");
+                    // setBuilderPanelsActive("blocksSelector", true)
+                }, className: cn("border rounded-4xl bg-indigo-700 text-white p-2 text-xs", "absolute -bottom-4 left-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,162 @@
+"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 { getPuckSelectedItem } 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 = getPuckSelectedItem();
+    return (_jsx(_Fragment, { children: selectedItem && _jsx(DraggablePanel, { id: "contentEditor", defaultPos: {
+                offsetX: 40,
+                offsetY: 80,
+                align: "rightTop"
+            }, children: _jsx("div", { className: cn("w-87.5", "min-h-87.5", "h-full", "overflow-y-auto", "max-h-187.5"), 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,20 @@
+"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-100 overflow-y-auto", isScreenView ? "p-0 pt-10" : "p-10"), 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, height: 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,12 @@
+export interface BuilderPucksContextValue {
+    setPreviewMode: (state: "edit" | "interactive" | ((previewMode: "edit" | "interactive") => typeof previewMode)) => void;
+    setComponentData: ({ propsKey, value }: any) => void;
+    insterBlock: (to?: "before" | "after") => void;
+    selectBlock: (id?: string | null) => 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;