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

package/dist/components/content-builders/blocks/headers-block.js

@@ -0,0 +1,49 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useCallback } from "react";
+import { cn } from "../../../shadcns/index.js";
+import { useGetPuck } from "@puckeditor/core";
+import { usePuck } from "../content-builder-pucks-hooks";
+export const HeaderBlock = (props) => {
+    const data = usePuck((api) => api.appState.data);
+    const getPuck = useGetPuck();
+    const sortBlockToTop = useCallback(() => {
+        const { appState, dispatch, getSelectorForId } = getPuck();
+        const headerBlock = data.content.reduce((init, block, index) => block.type == "HeaderBlock" ? { index, block } : init, {});
+        const { index, block } = headerBlock ?? {};
+        if (index === 0)
+            return;
+        dispatch({
+            type: "reorder",
+            sourceIndex: index,
+            destinationIndex: 0,
+            destinationZone: "root:default-zone",
+        });
+        requestAnimationFrame(() => {
+            dispatch({ type: "setUi", ui: { itemSelector: null } });
+        });
+    }, [data]);
+    useEffect(() => {
+        sortBlockToTop();
+    }, [data]);
+    return (_jsx("header", { className: "pt-10", children: _jsxs("div", { className: "px-10 py-2 flex justify-between border-b fixed left-0 top-0 w-full z-90 bg-white h-fit", children: [_jsx("div", { className: "text-xl font-semibold flex-1", children: "LOGO" }), _jsxs("div", { className: "flex-1 flex gap-10 justify-center items-center", children: [_jsx("div", { className: "text-md font-semibold", children: "ABOTU" }), _jsx("div", { className: "text-md font-semibold", children: "PRODUCTS" }), _jsx("div", { className: "text-md font-semibold", children: "SOLUTIONS" }), _jsx("div", { className: "text-md font-semibold", children: "SUPPORT" })] }), _jsx("div", { className: cn("text-2xl font-semibold flex-1 flex justify-end items-center", "[&_span]:w-8", "[&_span]:h-0.5", "[&_span]:bg-black"), children: _jsxs("div", { className: cn("flex flex-col gap-1"), children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) })] }) }));
+};
+export const HeaderBlockConfigs = {
+    label: "HeaderBlock",
+    permissions: {
+        drag: false,
+        duplicate: false,
+        delete: false,
+        // edit: false,
+        insert: false,
+        // editor: false,
+    },
+    fields: {
+        title: {
+            label: "Title",
+            type: "text",
+            contentEditable: true
+        },
+    },
+    render: HeaderBlock
+};

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

@@ -0,0 +1,4 @@
+export * from "./roots";
+export * from "./base-block";
+export * from "./media-content";
+export * from "./headers-block";

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

@@ -0,0 +1,4 @@
+export * from "./roots";
+export * from "./base-block";
+export * from "./media-content";
+export * from "./headers-block";

package/dist/components/content-builders/blocks/media-content.d.ts

@@ -0,0 +1,7 @@
+import { ComponentConfig, PuckComponent } from "@puckeditor/core";
+export interface MediaContentProps {
+    imgs?: string;
+    alt?: string;
+}
+export declare const MediaContent: PuckComponent<MediaContentProps>;
+export declare const MediaContentConfigs: ComponentConfig;

package/dist/components/content-builders/blocks/media-content.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const MediaContent = ({ alt, imgs, }) => {
+    return (_jsx("div", { "data-component": "media-content", children: _jsx("figure", { className: "flex flex-col gap-3 items-center [&_img]:max-w-full w-full", children: _jsx("div", { className: "bg-gray-100 w-full", children: _jsx("img", { src: String(imgs), className: "w-full!" }) }) }) }));
+};
+export const MediaContentConfigs = {
+    label: "Media Content",
+    permissions: {
+        delete: false,
+        drag: false,
+        insert: false,
+        duplicate: false
+    },
+    fields: {
+        imgs: { type: "text" },
+        alt: { type: "text", contentEditable: true },
+    },
+    defaultProps: {
+        imgs: "/01.png",
+        alt: "alt"
+    },
+    render: MediaContent
+};

package/dist/components/content-builders/blocks/root-header.d.ts

@@ -0,0 +1,11 @@
+export interface Button {
+    label?: string;
+    link?: string;
+    linkBlank?: boolean;
+    labelColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+}
+export interface RootHeaderEditorProps extends React.ComponentProps<"div"> {
+}
+export declare const RootHeaderEditor: React.FC<RootHeaderEditorProps>;

package/dist/components/content-builders/blocks/root-header.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useBuilderPucksContext } from "../content-builder-pucks-context";
+import { usePuckPreviewMode } from "../content-builder-pucks-hooks";
+export const RootHeaderEditor = ({ children }) => {
+    const { insterBlock, selectBlock } = useBuilderPucksContext();
+    const previewMode = usePuckPreviewMode();
+    return (_jsx(_Fragment, { children: previewMode == "edit" && _jsx("div", { onClick: (e) => {
+                e.stopPropagation();
+                selectBlock(null);
+                requestAnimationFrame(() => {
+                    insterBlock();
+                });
+            }, className: "inset-0 absolute border-2 border-indigo-600 left-0 top-0 opacity-0 bg-indigo-600/5 hover:opacity-100 duration-300 hover:cursor-pointer" }) }));
+};

package/dist/components/content-builders/blocks/roots.d.ts

@@ -0,0 +1,8 @@
+import type { RootConfig } from "@puckeditor/core";
+export interface RootsProps {
+    title?: string;
+    description?: string;
+    children?: React.ReactNode;
+    metadata?: Record<string, any>;
+}
+export declare const BuilderRootsConfigs: RootConfig;

package/dist/components/content-builders/blocks/roots.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+import { RootHeaderEditor } from "./root-header";
+const Roots = ({ puck, editMode, children, title, description, metadata, ...props }) => {
+    const { build } = metadata ?? {};
+    console.log("root", props);
+    return (_jsxs(_Fragment, { children: [_jsxs("header", { className: "px-10 py-2 flex justify-between border-b fixed left-0 w-full z-90 bg-white", children: [_jsx("div", { className: "text-xl font-semibold flex-1", children: "LOGO" }), _jsxs("div", { className: "flex-1 flex gap-10 justify-center items-center", children: [_jsx("div", { className: "text-md font-semibold", children: "ABOTU" }), _jsx("div", { className: "text-md font-semibold", children: "PRODUCTS" }), _jsx("div", { className: "text-md font-semibold", children: "SOLUTIONS" }), _jsx("div", { className: "text-md font-semibold", children: "SUPPORT" })] }), _jsx("div", { className: cn("text-2xl font-semibold flex-1 flex justify-end items-center", "[&_span]:w-8", "[&_span]:h-0.5", "[&_span]:bg-black"), children: _jsxs("div", { className: cn("flex flex-col gap-1"), children: [_jsx("span", {}), _jsx("span", {}), _jsx("span", {})] }) }), build && _jsx(RootHeaderEditor, {})] }), _jsx("main", { className: cn("pt-11.5", "flex", "flex-col", "z-1", "*:data-puck-dropzone:min-h-100!"), children: children }), _jsx("footer", { className: cn("px-10 py-2"), children: description })] }));
+};
+export const BuilderRootsConfigs = {
+    label: "Page Content",
+    fields: {
+        title: { type: "text" },
+        description: { type: "textarea" },
+    },
+    resolveData: async ({ props }, { metadata }) => {
+        return { props: { ...props, metadata } };
+    },
+    defaultProps: {
+        title: "Hello, world",
+        description: "Lorem ipsum",
+    },
+    render: Roots
+};

package/dist/components/content-builders/blocks/text-content.d.ts

@@ -0,0 +1,20 @@
+import { ComponentConfig, PuckComponent } from "@puckeditor/core";
+export interface Button {
+    label?: string;
+    link?: string;
+    linkBlank?: boolean;
+    labelColor?: string;
+    bgColor?: string;
+    borderColor?: string;
+}
+export interface TextContentProps {
+    title?: string;
+    description?: string;
+    subTitle?: string;
+    buttons?: Button[];
+    imgs?: string;
+    options?: any;
+    titleOptions?: any;
+}
+export declare const TextContent: PuckComponent<TextContentProps>;
+export declare const TextContentConfigs: ComponentConfig;

package/dist/components/content-builders/blocks/text-content.js

@@ -0,0 +1,190 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../../../shadcns/index.js";
+export const TextContent = ({ title, description, subTitle, buttons, titleOptions, ...props }) => {
+    const { tage2 } = titleOptions || {};
+    const TitleComponent = tage2 ?? "h3";
+    return (_jsx("div", { "data-component": "text-content", className: cn("flex", "justify-center", "p-5"), children: _jsxs("div", { className: cn("flex flex-col gap-10", "justify-start items-start"), children: [_jsxs("hgroup", { "data-component": "text-content-hgroup", className: "flex flex-col gap-3", children: [_jsx(TitleComponent, { "data-component": "text-content-title", className: "text-3xl font-semibold", children: title }), _jsx("p", { "data-component": "text-content-subTitle", className: "text-base font-medium", children: subTitle })] }), _jsx("p", { "data-component": "text-content-description", className: "", children: description }), buttons && buttons?.length > 0 && _jsx("div", { "data-component": "text-content-buttonGroup", className: "flex gap-0.5", children: buttons.map((bt, index) => (_jsx("button", { "data-component": "text-content-button", className: "p-3 border rounded", children: bt.label }, index))) })] }) }));
+};
+export const TextContentConfigs = {
+    label: "Text Content",
+    permissions: {
+        // delete: false,
+        // drag: true,
+        insert: true,
+    },
+    // resolvePermissions: async (data, { permissions }) => {
+    //     console.log("resolvePermissions", data.props);
+    //     if (data.props?.lockDelete) {
+    //         return {
+    //             ...permissions,
+    //             delete: false,
+    //             // 建議順便鎖，避免用拖拉/複製繞過「必須至少一個」
+    //             drag: false,
+    //             duplicate: false,
+    //         };
+    //     }
+    //     return permissions;
+    // },
+    // resolveData: async ({ props }, { changed, parent }) => {
+    //     console.log("resolvePermissions", props);
+    //     // const isInRoot = !parent?.type || parent.type.startsWith("root");
+    //     // if (isInRoot) {
+    //     //     console.log("isInRoot", isInRoot);
+    //     //     return {}
+    //     // }
+    //     if (changed.buttons && props?.buttons?.length) {
+    //         const defaultButtons = props.buttons.map((
+    //             button: Record<string, string>,
+    //             index: number
+    //         ) => {
+    //             if (button?.label == "") button.label = `Unnamed ${Number(index) + 1}`
+    //             if (!button?.linkTarget) button["linkTarget"] = "yes"
+    //             return button
+    //         })
+    //         console.log("defaultButtons", defaultButtons);
+    //         return { ...props, buttons: defaultButtons }
+    //     }
+    //     return { props }
+    // },
+    fields: {
+        // title2: {
+        //     label: "Title2",
+        //     type: "custom",
+        //     render: ({ onChange, value }) => {
+        //         const [tab, setTab] = useState("A")
+        //         return (
+        //             <FieldLabel label="Title2" readOnly>
+        //                 <div className="flex gap-2">
+        //                     <button
+        //                         onClick={() => setTab("A")}
+        //                         className="flex-1 p-2 border">A</button>
+        //                     <button
+        //                         onClick={() => setTab("B")}
+        //                         className="flex-1 p-2 border">B</button>
+        //                 </div>
+        //                 {tab == "A" && <div>
+        //                     <AutoField
+        //                         field={{ type: "text" }}
+        //                         onChange={onChange}
+        //                         value={value ?? "wade"}
+        //                         readOnly
+        //                     />
+        //                 </div>}
+        //                 {tab == "B" && <div>
+        //                     B
+        //                 </div>}
+        //             </FieldLabel>
+        //         )
+        //     }
+        // },
+        title: {
+            label: "Title",
+            type: "text",
+            contentEditable: true
+        },
+        subTitle: {
+            label: "Sub Title",
+            type: "text",
+            contentEditable: true
+        },
+        description: {
+            label: "Description",
+            type: "textarea",
+            contentEditable: true
+        },
+        buttons: {
+            label: "Buttons",
+            type: "array",
+            arrayFields: {
+                label: {
+                    label: "Label",
+                    type: "text",
+                    contentEditable: true,
+                    placeholder: "ex: learn more"
+                },
+                link: {
+                    label: "Link",
+                    type: "text",
+                    placeholder: "ex: http://www.abc.com"
+                },
+                linkTarget: {
+                    label: "Link Blank",
+                    type: "radio",
+                    options: [
+                        { label: "Yes", value: "yes" },
+                        { label: "No", value: "no" },
+                    ],
+                },
+                labelColor: {
+                    label: "Label Color",
+                    type: "text",
+                    placeholder: "ex: #000000"
+                },
+                backgroundColor: {
+                    label: "Background Color",
+                    type: "text",
+                    placeholder: "ex: #000000"
+                },
+                borderColor: {
+                    label: "Border Color",
+                    type: "text",
+                    placeholder: "ex: #000000"
+                },
+            },
+            defaultItemProps: (index) => ({
+                label: `Unnamed ${index + 1}`,
+            }),
+            getItemSummary: (item, index) => {
+                return item?.label || `Unnamed ${Number(index) + 1}`;
+            },
+        },
+        titleOptions: {
+            label: "Title",
+            type: "object",
+            objectFields: {
+                content2: {
+                    label: "Content",
+                    type: "text"
+                },
+                tage2: {
+                    label: "Tag",
+                    type: "radio",
+                    options: [
+                        { label: "H1", value: "h1" },
+                        { label: "H2", value: "h2" },
+                        { label: "H3", value: "h3" },
+                        { label: "H4", value: "h4" },
+                        { label: "H5", value: "h5" },
+                        { label: "H6", value: "h6" }
+                    ]
+                },
+                color2: {
+                    label: "Color",
+                    type: "text"
+                },
+                align2: {
+                    label: "Align",
+                    type: "radio",
+                    options: [
+                        { label: "Left", value: "left" },
+                        { label: "Center", value: "center" },
+                        { label: "Right", value: "right" }
+                    ],
+                },
+            },
+        },
+    },
+    defaultProps: {
+        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"
+        },
+    },
+    render: TextContent
+};

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

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

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

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { memo, useMemo } from "react";
+import { ArrowDown, ArrowUp, CornerLeftUp, Edit, Plus } from "lucide-react";
+import { ActionBar, useGetPuck } from "@puckeditor/core";
+import { useBuilderContext } from "./content-builder-context";
+import { useBuilderPucksContext } from "./content-builder-pucks-context";
+import { usePuckSelectedItem } from "./content-builder-pucks-hooks";
+export const BuilderActionBar = memo(({ children, label }) => {
+    const getPuck = useGetPuck();
+    const selectedItem = usePuckSelectedItem();
+    const { setBuilderPanelsActive } = useBuilderContext();
+    const { selectBlock, insterBlock, orderBlock } = useBuilderPucksContext();
+    const parentItem = useMemo(() => {
+        const { getParentById } = getPuck();
+        const { id: itemId } = selectedItem?.props ?? {};
+        return itemId ? getParentById(itemId) : null;
+    }, [selectedItem]);
+    const isParentRoot = parentItem?.type == "root";
+    const isOrder = useMemo(() => {
+        const { appState } = getPuck();
+        const { id: itemId } = selectedItem?.props ?? {};
+        const nextContent = [...appState.data.content];
+        const selectedIndex = nextContent.findIndex((item) => item.props.id == itemId);
+        const maxIndex = nextContent.length - 1;
+        return {
+            up: selectedIndex > 0,
+            down: selectedIndex < maxIndex
+        };
+    }, [selectedItem]);
+    const selectItemParent = () => {
+        const { id: itemId } = parentItem?.props ?? {};
+        if (isParentRoot || !itemId)
+            return;
+        selectBlock(itemId);
+    };
+    return (_jsx(_Fragment, { children: selectedItem && _jsx("div", { className: "relative *:h-8.5 flex justify-end flex-col pt-1.5", children: _jsxs("div", { className: "bg-gray-900 rounded flex flex-rows items-end text-white leading-none border shadow-2xl", children: [_jsxs(ActionBar.Group, { children: [!isParentRoot && _jsx(ActionBar.Action, { label: `Select ${parentItem?.type}`, onClick: (e) => {
+                                    e.stopPropagation();
+                                    selectItemParent();
+                                }, children: _jsx(CornerLeftUp, { size: 15 }) }), _jsx(ActionBar.Label, { label: label })] }), _jsxs(ActionBar.Group, { children: [isParentRoot && _jsx(ActionBar.Action, { label: "Moving Up", disabled: !isOrder.up, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!selectedItem?.props)
+                                        return;
+                                    orderBlock("up");
+                                }, children: _jsx(ArrowUp, { size: 16 }) }), isParentRoot && _jsx(ActionBar.Action, { label: "Moving Down", disabled: !isOrder.down, onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!selectedItem?.props)
+                                        return;
+                                    orderBlock("down");
+                                }, children: _jsx(ArrowDown, { size: 16 }) })] }), _jsxs(ActionBar.Group, { children: [isParentRoot && _jsx(ActionBar.Action, { label: "Inster Block", onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!selectedItem?.props)
+                                        return;
+                                    insterBlock("after");
+                                }, children: _jsx(Plus, { size: 18 }) }), _jsx(ActionBar.Action, { label: "Edit", onClick: (e) => {
+                                    e.stopPropagation();
+                                    if (!selectedItem?.props)
+                                        return;
+                                    setBuilderPanelsActive("contentEditor", true);
+                                }, children: _jsx(Edit, { size: 16 }) }), children] })] }) }) }));
+});
+function getPuck() {
+    throw new Error("Function not implemented.");
+}

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

@@ -0,0 +1,4 @@
+interface BuilderBlocksProps extends React.ComponentProps<"div"> {
+}
+export declare const BuilderBlocksDialog: React.FC<BuilderBlocksProps>;
+export {};

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

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, } from "../../shadcns/index.js";
+import { useBuilderContext } from "./content-builder-context";
+import { cn } from "../../shadcns/index.js";
+import { Tabs, TabsContent, TabsList } from "../../shadcns/index.js";
+import { X } from "lucide-react";
+import { initialData } from "./initial-datas";
+import { blacksConfigs } from "./content-builder-configs";
+import { useEffect } from "react";
+import { BuilderBlocks } from "./content-builder-blocks";
+export const BuilderBlocksDialog = () => {
+    const { config, blocksViews, setBuilderNewBlocks, builderProps, setBuilderDragging } = useBuilderContext();
+    const { components, categories } = builderProps.config ?? {};
+    const { other, ...restCategories } = categories ?? {};
+    useEffect(() => {
+        if (blocksViews?.active)
+            setBuilderDragging(blocksViews.active);
+        return () => { setBuilderDragging(false); };
+    }, [blocksViews.active]);
+    return (_jsx(AlertDialog, { open: blocksViews.active, onOpenChange: setBuilderNewBlocks, children: _jsx(AlertDialogContent, { className: cn("w-full!", "max-w-360!", "h-[90dvh]!", "p-0", "rounded-sm", "gap-0", "shadow-2xl"), children: _jsxs("div", { className: cn("relative overflow-hidden h-full w-full"), children: [_jsx("div", { className: cn("absolute right-0 top-0 z-10"), children: _jsx(AlertDialogCancel, { className: cn("border-none shadow-none hover:bg-transparent"), children: _jsx(X, { size: 17 }) }) }), _jsx("div", { className: "h-full flex flex-rows gap-15 overflow-hidden", children: _jsxs(Tabs, { defaultValue: "overview", className: cn("flex-1 flex"), children: [_jsxs("div", { className: "w-70 p-10 space-y-10", children: [_jsx("div", { className: cn("text-xl font-semibold"), children: "Blocks View" }), _jsx(TabsList, { className: cn("flex flex-col justify-start items-start rounded-none bg-transparent p-0 m-0 w-full"), children: categories && Object.keys(categories).map((key, index) => {
+                                                const { title, components } = categories[key];
+                                                return (_jsx("div", { children: "tabs" })
+                                                // <TabsTrigger
+                                                // 	key={index}
+                                                // 	value={title ?? ""}
+                                                // 	render={({ className, ...props }: any) =>
+                                                // 		<div
+                                                // 			className={cn(
+                                                // 				"w-full",
+                                                // 				"px-2",
+                                                // 				"py-1.5",
+                                                // 				"data-active:text-white",
+                                                // 				"data-active:bg-black",
+                                                // 				"duration-200"
+                                                // 			)}
+                                                // 			{...props}
+                                                // 		>
+                                                // 			{title}
+                                                // 		</div>
+                                                // 	}
+                                                // />
+                                                );
+                                            }) })] }), _jsxs("div", { className: cn("w-6xl", "overflow-hidden"), children: [_jsx(TabsContent, { value: "Base", className: cn("h-full"), children: _jsx(BuilderBlocks, { data: initialData, config: blacksConfigs, category: "Base" }) }), _jsx(TabsContent, { value: "Base2", className: cn("h-full"), children: "reports" }), _jsx(TabsContent, { value: "Base3", className: cn("h-full"), children: "settings" })] })] }) })] }) }) }));
+};

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

@@ -0,0 +1,15 @@
+import type { PuckComponent, PuckContext, RootConfig } from "@puckeditor/core";
+import type { PuckProps } from "./content-builder-builder";
+export interface BlocksComponentProps extends React.ComponentProps<"div"> {
+    puck: PuckContext;
+    name: string;
+}
+export declare const BuilderBlocksComponent: React.FC<BlocksComponentProps>;
+export declare const BuilderBlocks: React.FC<PuckProps & {
+    category?: string;
+}>;
+export interface BuilderBlocksRootsProps {
+    children?: React.ReactNode;
+}
+export declare const BuilderBlocksRoots: PuckComponent<BuilderBlocksRootsProps>;
+export declare const BuilderBlocksRootsConfigs: RootConfig;

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

@@ -0,0 +1,40 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useEffect, useRef } from "react";
+import { Puck } from "@puckeditor/core";
+import { cn } from "../../shadcns/index.js";
+import { useBuilderContext } from "./content-builder-context";
+import { BuilderIframe } from "./content-builder-iframe";
+export const BuilderBlocksComponent = memo(({ children, name, puck }) => {
+    const { metadata } = puck;
+    const isBlockview = !!metadata?.blockview;
+    const { setBuilderNewBlocks } = useBuilderContext();
+    const ref = useRef(null);
+    const resizeRef = useRef(null);
+    useEffect(() => {
+        if (!ref?.current || !resizeRef?.current)
+            return;
+        const { width, height } = ref.current.getBoundingClientRect();
+    }, [ref?.current]);
+    return (_jsx(_Fragment, { children: isBlockview
+            ? _jsx("div", { "data-component": "builder-blocks-component", ref: resizeRef, className: cn("**:pointer-events-none", "**:select-none", "my-15", "first:mt-0", "last:mb-0", "border", "rounded-sm", "overflow-hidden", "duration-200", "hover:border-indigo-600", "hover:shadow-xl"), onClick: () => {
+                    name && setBuilderNewBlocks(name);
+                }, children: _jsx("div", { ref: ref, className: cn("w-screen", "origin-top-left"), style: { zoom: "0.372" }, children: children }) })
+            : children }));
+});
+export const BuilderBlocks = memo(({ category = "Block Category", ...props }) => {
+    if (!props?.data || !props?.config)
+        return null;
+    return (_jsx("div", { className: cn("w-360", "h-full", "overflow-hidden", "rounded"), children: _jsx(Puck, { ui: { previewMode: "interactive" }, overrides: { iframe: BuilderIframe }, metadata: { blockview: true, blockCategory: category }, height: "100%", ...props, children: _jsx(Puck.Preview, { "data-component": "builder-blocks-preview", id: "builders-blocks-preview" }) }) }));
+});
+export const BuilderBlocksRoots = ({ children, puck, ...props }) => {
+    const { metadata } = puck;
+    return (_jsxs("div", { "data-component": "builder-blocks-roots", className: cn("py-10", "space-y-11", "*:w-6xl", "*:pr-10", "*:nth-2:columns-2", "*:nth-2:gap-10"), children: [_jsx("div", { className: "text-base font-semibold", children: metadata?.blockCategory ?? "Block Category" }), children] }));
+};
+export const BuilderBlocksRootsConfigs = {
+    label: "Builder Blocks",
+    resolveData: async ({ props }, { metadata }) => {
+        return { props: { ...props, metadata } };
+    },
+    render: BuilderBlocksRoots
+};

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

@@ -0,0 +1,13 @@
+import type { ComponentData, Config, RootData } from "@puckeditor/core";
+export interface PuckProps {
+    data: {
+        root: RootData;
+        content: ComponentData[];
+    };
+    metadata?: Record<string, any>;
+    overrides?: Record<string, any>;
+    config: Config;
+    height?: string;
+}
+export declare const BuilderRoots: React.FC<React.ComponentProps<"div">>;
+export declare const Builder: React.FC<React.ComponentProps<"div">>;

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

@@ -0,0 +1,17 @@
+"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 { cn } from "../../shadcns/index.js";
+export const BuilderRoots = memo((props) => {
+    const { builderRef, viewport } = useBuilderContext();
+    const isFullScreen = viewport.view == "fullscreen";
+    return (_jsx("div", { ref: builderRef, "data-component": "builder-roots", className: cn("w-full h-full relative", "data-[drag=true]:pointer-events-none!", isFullScreen && ["fixed top-0 w-screen h-screen"]), ...props }));
+});
+export const Builder = memo(({ children, ...props }) => {
+    const { builderProps } = useBuilderContext();
+    // TODO 在這裡預設放入config設定
+    const { height = "100%", ...puckProps } = builderProps;
+    return (_jsx(BuilderRoots, { ...props, children: _jsx(Puck, { height: height, ...puckProps, children: children }) }));
+});