@questpie/admin 1.1.1 → 2.0.0

package/dist/client/components/blocks/block-editor-context.mjs

@@ -0,0 +1,58 @@
+"use client";
+
+import * as React$1 from "react";
+
+//#region src/client/components/blocks/block-editor-context.tsx
+/**
+* Block Editor Context
+*
+* Context and hooks for the block editor state management.
+*/
+const BlockEditorContext = React$1.createContext(null);
+/**
+* Hook to access block editor state and actions.
+* Must be used within BlockEditorProvider.
+*/
+function useBlockEditor() {
+	const ctx = React$1.useContext(BlockEditorContext);
+	if (!ctx) throw new Error("useBlockEditor must be used within BlockEditorProvider");
+	return ctx;
+}
+/**
+* Hook to access only block editor state.
+*/
+function useBlockEditorState() {
+	return useBlockEditor().state;
+}
+/**
+* Hook to access only block editor actions.
+*/
+function useBlockEditorActions() {
+	return useBlockEditor().actions;
+}
+/**
+* Hook to check if a block is expanded.
+*/
+function useIsBlockExpanded(blockId) {
+	const { state } = useBlockEditor();
+	return state.expandedBlockIds.has(blockId);
+}
+/**
+* Hook to get a block schema by type.
+*/
+function useBlockSchema(blockType) {
+	const { state } = useBlockEditor();
+	return state.blocks[blockType];
+}
+/**
+* Hook to get the selected block's schema.
+* @deprecated Use useBlockSchema instead
+*/
+function useBlockDefinition(blockType) {
+	return useBlockSchema(blockType);
+}
+const BlockEditorContextProvider = BlockEditorContext.Provider;
+
+//#endregion
+export { BlockEditorContextProvider, useBlockDefinition, useBlockEditor, useBlockEditorActions, useBlockEditorState, useBlockSchema, useIsBlockExpanded };
+//# sourceMappingURL=block-editor-context.mjs.map

package/dist/client/components/blocks/block-editor-context.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-editor-context.mjs","names":["React"],"sources":["../../../../src/client/components/blocks/block-editor-context.tsx"],"sourcesContent":["/**\n * Block Editor Context\n *\n * Context and hooks for the block editor state management.\n */\n\n\"use client\";\n\nimport * as React from \"react\";\nimport type { BlockSchema } from \"#questpie/admin/server\";\nimport type { BlockContent } from \"../../blocks/types.js\";\nimport type { InsertPosition } from \"./utils/tree-utils.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\n/**\n * Block editor state.\n */\nexport type BlockEditorState = {\n\t/** Block content (tree + values) */\n\tcontent: BlockContent;\n\t/** Currently selected block ID */\n\tselectedBlockId: string | null;\n\t/** Expanded block IDs (for nested blocks) */\n\texpandedBlockIds: Set<string>;\n\t/** Is block library open */\n\tisLibraryOpen: boolean;\n\t/** Insert position when adding new block */\n\tinsertPosition: InsertPosition | null;\n\t/** Registered block definitions (from server introspection) */\n\tblocks: Record<string, BlockSchema>;\n\t/** Allowed block types for this field */\n\tallowedBlocks: string[] | null;\n\t/** Current locale for editing */\n\tlocale: string;\n};\n\n/**\n * Block editor actions.\n */\nexport type BlockEditorActions = {\n\t// Selection\n\tselectBlock: (id: string | null) => void;\n\ttoggleExpanded: (id: string) => void;\n\texpandAll: () => void;\n\tcollapseAll: () => void;\n\n\t// CRUD\n\taddBlock: (type: string, position: InsertPosition) => void;\n\tremoveBlock: (id: string) => void;\n\tduplicateBlock: (id: string) => void;\n\n\t// Reorder\n\tmoveBlock: (\n\t\tid: string,\n\t\tparentId: string | null,\n\t\tfromIndex: number,\n\t\ttoIndex: number,\n\t) => void;\n\n\t// Values\n\tupdateBlockValues: (id: string, values: Record<string, unknown>) => void;\n\n\t// Library\n\topenLibrary: (position: InsertPosition) => void;\n\tcloseLibrary: () => void;\n};\n\n/**\n * Block editor context value.\n */\nexport type BlockEditorContextValue = {\n\tstate: BlockEditorState;\n\tactions: BlockEditorActions;\n};\n\n// ============================================================================\n// Context\n// ============================================================================\n\nconst BlockEditorContext = React.createContext<BlockEditorContextValue | null>(\n\tnull,\n);\n\n/**\n * Hook to access block editor state and actions.\n * Must be used within BlockEditorProvider.\n */\nexport function useBlockEditor(): BlockEditorContextValue {\n\tconst ctx = React.useContext(BlockEditorContext);\n\tif (!ctx) {\n\t\tthrow new Error(\"useBlockEditor must be used within BlockEditorProvider\");\n\t}\n\treturn ctx;\n}\n\n/**\n * Hook to access only block editor state.\n */\nexport function useBlockEditorState(): BlockEditorState {\n\treturn useBlockEditor().state;\n}\n\n/**\n * Hook to access only block editor actions.\n */\nexport function useBlockEditorActions(): BlockEditorActions {\n\treturn useBlockEditor().actions;\n}\n\n/**\n * Hook to check if a block is selected.\n */\nexport function useIsBlockSelected(blockId: string): boolean {\n\tconst { state } = useBlockEditor();\n\treturn state.selectedBlockId === blockId;\n}\n\n/**\n * Hook to check if a block is expanded.\n */\nexport function useIsBlockExpanded(blockId: string): boolean {\n\tconst { state } = useBlockEditor();\n\treturn state.expandedBlockIds.has(blockId);\n}\n\n/**\n * Hook to get a block schema by type.\n */\nexport function useBlockSchema(blockType: string): BlockSchema | undefined {\n\tconst { state } = useBlockEditor();\n\treturn state.blocks[blockType];\n}\n\n/**\n * Hook to get the selected block's schema.\n * @deprecated Use useBlockSchema instead\n */\nexport function useBlockDefinition(blockType: string): BlockSchema | undefined {\n\treturn useBlockSchema(blockType);\n}\n\n/**\n * Hook to get the selected block's schema.\n */\nexport function useSelectedBlockSchema(): BlockSchema | undefined {\n\tconst { state } = useBlockEditor();\n\tif (!state.selectedBlockId) return undefined;\n\n\tconst blockNode = findBlockNodeById(\n\t\tstate.content._tree,\n\t\tstate.selectedBlockId,\n\t);\n\tif (!blockNode) return undefined;\n\n\treturn state.blocks[blockNode.type];\n}\n\n/**\n * Hook to get the selected block's definition.\n * @deprecated Use useSelectedBlockSchema instead\n */\nexport function useSelectedBlockDefinition(): BlockSchema | undefined {\n\treturn useSelectedBlockSchema();\n}\n\n/**\n * Hook to get the selected block's values.\n */\nexport function useSelectedBlockValues(): Record<string, unknown> | undefined {\n\tconst { state } = useBlockEditor();\n\tif (!state.selectedBlockId) return undefined;\n\treturn state.content._values[state.selectedBlockId];\n}\n\n// ============================================================================\n// Provider Component\n// ============================================================================\n\nexport const BlockEditorContextProvider = BlockEditorContext.Provider;\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nimport type { BlockNode } from \"../../blocks/types.js\";\n\nfunction findBlockNodeById(\n\ttree: BlockNode[],\n\tid: string,\n): BlockNode | undefined {\n\tfor (const node of tree) {\n\t\tif (node.id === id) return node;\n\t\tconst found = findBlockNodeById(node.children, id);\n\t\tif (found) return found;\n\t}\n\treturn undefined;\n}\n"],"mappings":";;;;;;;;;;AAkFA,MAAM,qBAAqBA,QAAM,cAChC,KACA;;;;;AAMD,SAAgB,iBAA0C;CACzD,MAAM,MAAMA,QAAM,WAAW,mBAAmB;AAChD,KAAI,CAAC,IACJ,OAAM,IAAI,MAAM,yDAAyD;AAE1E,QAAO;;;;;AAMR,SAAgB,sBAAwC;AACvD,QAAO,gBAAgB,CAAC;;;;;AAMzB,SAAgB,wBAA4C;AAC3D,QAAO,gBAAgB,CAAC;;;;;AAczB,SAAgB,mBAAmB,SAA0B;CAC5D,MAAM,EAAE,UAAU,gBAAgB;AAClC,QAAO,MAAM,iBAAiB,IAAI,QAAQ;;;;;AAM3C,SAAgB,eAAe,WAA4C;CAC1E,MAAM,EAAE,UAAU,gBAAgB;AAClC,QAAO,MAAM,OAAO;;;;;;AAOrB,SAAgB,mBAAmB,WAA4C;AAC9E,QAAO,eAAe,UAAU;;AAwCjC,MAAa,6BAA6B,mBAAmB"}

package/dist/client/components/blocks/block-editor-layout.mjs

@@ -0,0 +1,82 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { useBlockEditor, useBlockEditorActions } from "./block-editor-context.mjs";
+import { BlockCanvas } from "./block-canvas.mjs";
+import { BlockLibrarySidebar } from "./block-library-sidebar.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/blocks/block-editor-layout.tsx
+/**
+* Block Editor Layout
+*
+* Main layout for the block editor with inline editable blocks.
+* Uses a scrollable container with FAB for adding blocks.
+*/
+function BlockEditorLayout({ className, minHeight = 500 }) {
+	const { state } = useBlockEditor();
+	const actions = useBlockEditorActions();
+	const [sidebarOpen, setSidebarOpen] = React$1.useState(false);
+	const handleOpenSidebar = () => {
+		actions.openLibrary({
+			parentId: null,
+			index: state.content._tree.length
+		});
+		setSidebarOpen(true);
+	};
+	const handleCloseSidebar = () => {
+		setSidebarOpen(false);
+		actions.closeLibrary();
+	};
+	React$1.useEffect(() => {
+		if (state.isLibraryOpen && !sidebarOpen) setSidebarOpen(true);
+	}, [state.isLibraryOpen, sidebarOpen]);
+	const hasBlocks = state.content._tree.length > 0;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("relative flex flex-col", className),
+		style: { minHeight },
+		children: [
+			/* @__PURE__ */ jsx(BlockCanvas, {}),
+			!hasBlocks && /* @__PURE__ */ jsxs("div", {
+				className: "py-8 text-center",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "text-muted-foreground",
+					children: [
+						/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:stack",
+							className: "mx-auto h-12 w-12 text-muted-foreground/30 mb-4"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-sm font-medium",
+							children: "No blocks yet"
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: "text-xs text-muted-foreground mt-1",
+							children: "Add your first block to get started"
+						})
+					]
+				}), /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					size: "sm",
+					className: "mt-4",
+					onClick: handleOpenSidebar,
+					children: [/* @__PURE__ */ jsx(Icon, {
+						icon: "ph:plus",
+						className: "mr-2 h-4 w-4"
+					}), "Add block"]
+				})]
+			}),
+			/* @__PURE__ */ jsx(BlockLibrarySidebar, {
+				open: sidebarOpen,
+				onClose: handleCloseSidebar
+			})
+		]
+	});
+}
+
+//#endregion
+export { BlockEditorLayout };
+//# sourceMappingURL=block-editor-layout.mjs.map

package/dist/client/components/blocks/block-editor-layout.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-editor-layout.mjs","names":["React"],"sources":["../../../../src/client/components/blocks/block-editor-layout.tsx"],"sourcesContent":["/**\n * Block Editor Layout\n *\n * Main layout for the block editor with inline editable blocks.\n * Uses a scrollable container with FAB for adding blocks.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { Button } from \"../ui/button.js\";\nimport { BlockCanvas } from \"./block-canvas.js\";\nimport {\n\tuseBlockEditor,\n\tuseBlockEditorActions,\n} from \"./block-editor-context.js\";\nimport { BlockLibrarySidebar } from \"./block-library-sidebar.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type BlockEditorLayoutProps = {\n\t/** Custom class name */\n\tclassName?: string;\n\t/** Minimum height for the editor */\n\tminHeight?: number;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function BlockEditorLayout({\n\tclassName,\n\tminHeight = 500,\n}: BlockEditorLayoutProps) {\n\tconst { state } = useBlockEditor();\n\tconst actions = useBlockEditorActions();\n\tconst [sidebarOpen, setSidebarOpen] = React.useState(false);\n\n\t// Open sidebar with insert position at end of root\n\tconst handleOpenSidebar = () => {\n\t\tactions.openLibrary({ parentId: null, index: state.content._tree.length });\n\t\tsetSidebarOpen(true);\n\t};\n\n\t// Handle sidebar close\n\tconst handleCloseSidebar = () => {\n\t\tsetSidebarOpen(false);\n\t\tactions.closeLibrary();\n\t};\n\n\t// Sync sidebar state with context\n\tReact.useEffect(() => {\n\t\tif (state.isLibraryOpen && !sidebarOpen) {\n\t\t\tsetSidebarOpen(true);\n\t\t}\n\t}, [state.isLibraryOpen, sidebarOpen]);\n\n\tconst hasBlocks = state.content._tree.length > 0;\n\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\"relative flex flex-col\", className)}\n\t\t\tstyle={{ minHeight }}\n\t\t>\n\t\t\t{/* Main content area */}\n\t\t\t\t<BlockCanvas />\n\n\t\t\t\t{/* Empty state hint */}\n\t\t\t\t{!hasBlocks && (\n\t\t\t\t\t<div className=\"py-8 text-center\">\n\t\t\t\t\t\t<div className=\"text-muted-foreground\">\n\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\ticon=\"ph:stack\"\n\t\t\t\t\t\t\t\tclassName=\"mx-auto h-12 w-12 text-muted-foreground/30 mb-4\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<p className=\"text-sm font-medium\">No blocks yet</p>\n\t\t\t\t\t\t\t<p className=\"text-xs text-muted-foreground mt-1\">\n\t\t\t\t\t\t\t\tAdd your first block to get started\n\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\tclassName=\"mt-4\"\n\t\t\t\t\t\t\tonClick={handleOpenSidebar}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<Icon icon=\"ph:plus\" className=\"mr-2 h-4 w-4\" />\n\t\t\t\t\t\t\tAdd block\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\n\n\t\t\t{/* Block Library Sidebar */}\n\t\t\t<BlockLibrarySidebar open={sidebarOpen} onClose={handleCloseSidebar} />\n\t\t</div>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAmCA,SAAgB,kBAAkB,EACjC,WACA,YAAY,OACc;CAC1B,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,UAAU,uBAAuB;CACvC,MAAM,CAAC,aAAa,kBAAkBA,QAAM,SAAS,MAAM;CAG3D,MAAM,0BAA0B;AAC/B,UAAQ,YAAY;GAAE,UAAU;GAAM,OAAO,MAAM,QAAQ,MAAM;GAAQ,CAAC;AAC1E,iBAAe,KAAK;;CAIrB,MAAM,2BAA2B;AAChC,iBAAe,MAAM;AACrB,UAAQ,cAAc;;AAIvB,SAAM,gBAAgB;AACrB,MAAI,MAAM,iBAAiB,CAAC,YAC3B,gBAAe,KAAK;IAEnB,CAAC,MAAM,eAAe,YAAY,CAAC;CAEtC,MAAM,YAAY,MAAM,QAAQ,MAAM,SAAS;AAE/C,QACC,qBAAC;EACA,WAAW,GAAG,0BAA0B,UAAU;EAClD,OAAO,EAAE,WAAW;;GAGnB,oBAAC,gBAAc;GAGd,CAAC,aACD,qBAAC;IAAI,WAAU;eACd,qBAAC;KAAI,WAAU;;MACd,oBAAC;OACA,MAAK;OACL,WAAU;QACT;MACF,oBAAC;OAAE,WAAU;iBAAsB;QAAiB;MACpD,oBAAC;OAAE,WAAU;iBAAqC;QAE9C;;MACC,EACN,qBAAC;KACA,SAAQ;KACR,MAAK;KACL,WAAU;KACV,SAAS;gBAET,oBAAC;MAAK,MAAK;MAAU,WAAU;OAAiB;MAExC;KACJ;GAKR,oBAAC;IAAoB,MAAM;IAAa,SAAS;KAAsB;;GAClE"}

package/dist/client/components/blocks/block-editor-provider.mjs

@@ -0,0 +1,155 @@
+"use client";
+
+import { BlockEditorContextProvider } from "./block-editor-context.mjs";
+import { duplicateBlockInTree, getAllBlockIds, getDefaultValues, insertBlockInTree, removeBlockFromTree, reorderBlockInTree } from "./utils/tree-utils.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/blocks/block-editor-provider.tsx
+/**
+* Block Editor Provider
+*
+* Provides state and actions for the block editor.
+*/
+function BlockEditorProvider({ value, onChange, blocks, allowedBlocks, locale = "en", children }) {
+	const [selectedBlockId, setSelectedBlockId] = React$1.useState(null);
+	const [expandedBlockIds, setExpandedBlockIds] = React$1.useState(() => /* @__PURE__ */ new Set());
+	const [isLibraryOpen, setIsLibraryOpen] = React$1.useState(false);
+	const [insertPosition, setInsertPosition] = React$1.useState(null);
+	const actions = React$1.useMemo(() => ({
+		selectBlock: (id) => {
+			setSelectedBlockId(id);
+			if (id !== null) {
+				setIsLibraryOpen(false);
+				setInsertPosition(null);
+			}
+		},
+		toggleExpanded: (id) => {
+			setExpandedBlockIds((prev) => {
+				const next = new Set(prev);
+				if (next.has(id)) next.delete(id);
+				else next.add(id);
+				return next;
+			});
+		},
+		expandAll: () => {
+			const allIds = getAllBlockIds(value._tree);
+			setExpandedBlockIds(new Set(allIds));
+		},
+		collapseAll: () => {
+			setExpandedBlockIds(/* @__PURE__ */ new Set());
+		},
+		addBlock: (type, position) => {
+			const blockDef = blocks[type];
+			if (!blockDef) {
+				if (process.env.NODE_ENV !== "production") console.warn(`Block type "${type}" not found`);
+				return;
+			}
+			const newBlock = {
+				id: crypto.randomUUID(),
+				type,
+				children: []
+			};
+			const newValues = getDefaultValues(blockDef.fields);
+			onChange({
+				_tree: insertBlockInTree(value._tree, newBlock, position),
+				_values: {
+					...value._values,
+					[newBlock.id]: newValues
+				}
+			});
+			setSelectedBlockId(newBlock.id);
+			setIsLibraryOpen(false);
+			setInsertPosition(null);
+			if (position.parentId) setExpandedBlockIds((prev) => new Set([...prev, position.parentId]));
+		},
+		removeBlock: (id) => {
+			const { newTree, removedIds } = removeBlockFromTree(value._tree, id);
+			const newValues = { ...value._values };
+			for (const removedId of removedIds) delete newValues[removedId];
+			onChange({
+				_tree: newTree,
+				_values: newValues
+			});
+			if (selectedBlockId === id || removedIds.includes(selectedBlockId)) setSelectedBlockId(null);
+			setExpandedBlockIds((prev) => {
+				const next = new Set(prev);
+				for (const removedId of removedIds) next.delete(removedId);
+				return next;
+			});
+		},
+		duplicateBlock: (id) => {
+			const { newTree, newIds, newValues } = duplicateBlockInTree(value._tree, value._values, id);
+			onChange({
+				_tree: newTree,
+				_values: {
+					...value._values,
+					...newValues
+				}
+			});
+			if (newIds.length > 0) setSelectedBlockId(newIds[0]);
+		},
+		moveBlock: (_id, parentId, fromIndex, toIndex) => {
+			onChange({
+				...value,
+				_tree: reorderBlockInTree(value._tree, parentId, fromIndex, toIndex)
+			});
+		},
+		updateBlockValues: (id, newValues) => {
+			onChange({
+				...value,
+				_values: {
+					...value._values,
+					[id]: {
+						...value._values[id],
+						...newValues
+					}
+				}
+			});
+		},
+		openLibrary: (position) => {
+			setInsertPosition(position);
+			setIsLibraryOpen(true);
+			setSelectedBlockId(null);
+		},
+		closeLibrary: () => {
+			setIsLibraryOpen(false);
+			setInsertPosition(null);
+		}
+	}), [
+		value,
+		onChange,
+		blocks,
+		selectedBlockId
+	]);
+	const state = React$1.useMemo(() => ({
+		content: value,
+		selectedBlockId,
+		expandedBlockIds,
+		isLibraryOpen,
+		insertPosition,
+		blocks,
+		allowedBlocks: allowedBlocks || null,
+		locale
+	}), [
+		value,
+		selectedBlockId,
+		expandedBlockIds,
+		isLibraryOpen,
+		insertPosition,
+		blocks,
+		allowedBlocks,
+		locale
+	]);
+	return /* @__PURE__ */ jsx(BlockEditorContextProvider, {
+		value: React$1.useMemo(() => ({
+			state,
+			actions
+		}), [state, actions]),
+		children
+	});
+}
+
+//#endregion
+export { BlockEditorProvider };
+//# sourceMappingURL=block-editor-provider.mjs.map

package/dist/client/components/blocks/block-editor-provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-editor-provider.mjs","names":["React","actions: BlockEditorActions","newBlock: BlockNode","state: BlockEditorState"],"sources":["../../../../src/client/components/blocks/block-editor-provider.tsx"],"sourcesContent":["/**\n * Block Editor Provider\n *\n * Provides state and actions for the block editor.\n */\n\n\"use client\";\n\nimport * as React from \"react\";\nimport type { BlockSchema } from \"#questpie/admin/server\";\nimport type { BlockContent, BlockNode } from \"../../blocks/types.js\";\nimport {\n\ttype BlockEditorActions,\n\tBlockEditorContextProvider,\n\ttype BlockEditorState,\n} from \"./block-editor-context.js\";\nimport {\n\tduplicateBlockInTree,\n\tfindBlockById,\n\tgetAllBlockIds,\n\tgetDefaultValues,\n\ttype InsertPosition,\n\tinsertBlockInTree,\n\treorderBlockInTree,\n\tremoveBlockFromTree,\n} from \"./utils/tree-utils.js\";\n\n// ============================================================================\n// Props\n// ============================================================================\n\nexport type BlockEditorProviderProps = {\n\t/** Initial/controlled content */\n\tvalue: BlockContent;\n\t/** Change handler */\n\tonChange: (content: BlockContent) => void;\n\t/** Registered blocks (from server introspection) */\n\tblocks: Record<string, BlockSchema>;\n\t/** Allowed block types (optional filter) */\n\tallowedBlocks?: string[];\n\t/** Current locale */\n\tlocale?: string;\n\t/** Children */\n\tchildren: React.ReactNode;\n};\n\n// ============================================================================\n// Provider Component\n// ============================================================================\n\nexport function BlockEditorProvider({\n\tvalue,\n\tonChange,\n\tblocks,\n\tallowedBlocks,\n\tlocale = \"en\",\n\tchildren,\n}: BlockEditorProviderProps) {\n\t// Selection state\n\tconst [selectedBlockId, setSelectedBlockId] = React.useState<string | null>(\n\t\tnull,\n\t);\n\n\t// Expanded blocks state\n\tconst [expandedBlockIds, setExpandedBlockIds] = React.useState<Set<string>>(\n\t\t() => new Set(),\n\t);\n\n\t// Library state\n\tconst [isLibraryOpen, setIsLibraryOpen] = React.useState(false);\n\tconst [insertPosition, setInsertPosition] =\n\t\tReact.useState<InsertPosition | null>(null);\n\n\t// Actions\n\tconst actions: BlockEditorActions = React.useMemo(\n\t\t() => ({\n\t\t\t// Selection\n\t\t\tselectBlock: (id) => {\n\t\t\t\tsetSelectedBlockId(id);\n\t\t\t\t// Close library when selecting a block\n\t\t\t\tif (id !== null) {\n\t\t\t\t\tsetIsLibraryOpen(false);\n\t\t\t\t\tsetInsertPosition(null);\n\t\t\t\t}\n\t\t\t},\n\n\t\t\ttoggleExpanded: (id) => {\n\t\t\t\tsetExpandedBlockIds((prev) => {\n\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\tif (next.has(id)) {\n\t\t\t\t\t\tnext.delete(id);\n\t\t\t\t\t} else {\n\t\t\t\t\t\tnext.add(id);\n\t\t\t\t\t}\n\t\t\t\t\treturn next;\n\t\t\t\t});\n\t\t\t},\n\n\t\t\texpandAll: () => {\n\t\t\t\tconst allIds = getAllBlockIds(value._tree);\n\t\t\t\tsetExpandedBlockIds(new Set(allIds));\n\t\t\t},\n\n\t\t\tcollapseAll: () => {\n\t\t\t\tsetExpandedBlockIds(new Set());\n\t\t\t},\n\n\t\t\t// CRUD\n\t\t\taddBlock: (type, position) => {\n\t\t\t\tconst blockDef = blocks[type];\n\t\t\t\tif (!blockDef) {\n\t\t\t\t\tif (process.env.NODE_ENV !== \"production\") {\n\t\t\t\t\t\tconsole.warn(`Block type \"${type}\" not found`);\n\t\t\t\t\t}\n\t\t\t\t\treturn;\n\t\t\t\t}\n\n\t\t\t\tconst newBlock: BlockNode = {\n\t\t\t\t\tid: crypto.randomUUID(),\n\t\t\t\t\ttype,\n\t\t\t\t\tchildren: [],\n\t\t\t\t};\n\n\t\t\t\tconst newValues = getDefaultValues(\n\t\t\t\t\tblockDef.fields as Record<\n\t\t\t\t\t\tstring,\n\t\t\t\t\t\t{ \"~options\"?: { defaultValue?: unknown } }\n\t\t\t\t\t>,\n\t\t\t\t);\n\n\t\t\t\tonChange({\n\t\t\t\t\t_tree: insertBlockInTree(value._tree, newBlock, position),\n\t\t\t\t\t_values: { ...value._values, [newBlock.id]: newValues },\n\t\t\t\t});\n\n\t\t\t\t// Select the new block and close library\n\t\t\t\tsetSelectedBlockId(newBlock.id);\n\t\t\t\tsetIsLibraryOpen(false);\n\t\t\t\tsetInsertPosition(null);\n\n\t\t\t\t// Expand parent if inserting as child\n\t\t\t\tif (position.parentId) {\n\t\t\t\t\tsetExpandedBlockIds((prev) => new Set([...prev, position.parentId!]));\n\t\t\t\t}\n\t\t\t},\n\n\t\t\tremoveBlock: (id) => {\n\t\t\t\tconst { newTree, removedIds } = removeBlockFromTree(value._tree, id);\n\t\t\t\tconst newValues = { ...value._values };\n\t\t\t\tfor (const removedId of removedIds) {\n\t\t\t\t\tdelete newValues[removedId];\n\t\t\t\t}\n\n\t\t\t\tonChange({ _tree: newTree, _values: newValues });\n\n\t\t\t\t// Clear selection if removed block was selected\n\t\t\t\tif (selectedBlockId === id || removedIds.includes(selectedBlockId!)) {\n\t\t\t\t\tsetSelectedBlockId(null);\n\t\t\t\t}\n\n\t\t\t\t// Clear from expanded\n\t\t\t\tsetExpandedBlockIds((prev) => {\n\t\t\t\t\tconst next = new Set(prev);\n\t\t\t\t\tfor (const removedId of removedIds) {\n\t\t\t\t\t\tnext.delete(removedId);\n\t\t\t\t\t}\n\t\t\t\t\treturn next;\n\t\t\t\t});\n\t\t\t},\n\n\t\t\tduplicateBlock: (id) => {\n\t\t\t\tconst { newTree, newIds, newValues } = duplicateBlockInTree(\n\t\t\t\t\tvalue._tree,\n\t\t\t\t\tvalue._values,\n\t\t\t\t\tid,\n\t\t\t\t);\n\n\t\t\t\tonChange({\n\t\t\t\t\t_tree: newTree,\n\t\t\t\t\t_values: { ...value._values, ...newValues },\n\t\t\t\t});\n\n\t\t\t\t// Select the first duplicated block\n\t\t\t\tif (newIds.length > 0) {\n\t\t\t\t\tsetSelectedBlockId(newIds[0]);\n\t\t\t\t}\n\t\t\t},\n\n\t\t\t// Reorder (same-parent only, uses arrayMove for correct index handling)\n\t\t\tmoveBlock: (_id, parentId, fromIndex, toIndex) => {\n\t\t\t\tonChange({\n\t\t\t\t\t...value,\n\t\t\t\t\t_tree: reorderBlockInTree(value._tree, parentId, fromIndex, toIndex),\n\t\t\t\t});\n\t\t\t},\n\n\t\t\t// Values\n\t\t\tupdateBlockValues: (id, newValues) => {\n\t\t\t\tonChange({\n\t\t\t\t\t...value,\n\t\t\t\t\t_values: {\n\t\t\t\t\t\t...value._values,\n\t\t\t\t\t\t[id]: { ...value._values[id], ...newValues },\n\t\t\t\t\t},\n\t\t\t\t});\n\t\t\t},\n\n\t\t\t// Library\n\t\t\topenLibrary: (position) => {\n\t\t\t\tsetInsertPosition(position);\n\t\t\t\tsetIsLibraryOpen(true);\n\t\t\t\tsetSelectedBlockId(null);\n\t\t\t},\n\n\t\t\tcloseLibrary: () => {\n\t\t\t\tsetIsLibraryOpen(false);\n\t\t\t\tsetInsertPosition(null);\n\t\t\t},\n\t\t}),\n\t\t[value, onChange, blocks, selectedBlockId],\n\t);\n\n\t// State object\n\tconst state: BlockEditorState = React.useMemo(\n\t\t() => ({\n\t\t\tcontent: value,\n\t\t\tselectedBlockId,\n\t\t\texpandedBlockIds,\n\t\t\tisLibraryOpen,\n\t\t\tinsertPosition,\n\t\t\tblocks,\n\t\t\tallowedBlocks: allowedBlocks || null,\n\t\t\tlocale,\n\t\t}),\n\t\t[\n\t\t\tvalue,\n\t\t\tselectedBlockId,\n\t\t\texpandedBlockIds,\n\t\t\tisLibraryOpen,\n\t\t\tinsertPosition,\n\t\t\tblocks,\n\t\t\tallowedBlocks,\n\t\t\tlocale,\n\t\t],\n\t);\n\n\t// Context value\n\tconst contextValue = React.useMemo(\n\t\t() => ({ state, actions }),\n\t\t[state, actions],\n\t);\n\n\treturn (\n\t\t<BlockEditorContextProvider value={contextValue}>\n\t\t\t{children}\n\t\t</BlockEditorContextProvider>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/components/blocks/block-fields-renderer.mjs

@@ -0,0 +1,70 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { selectAdmin, useAdminStore } from "../../runtime/provider.mjs";
+import { buildFieldDefinitionsFromMetadata } from "../../utils/build-field-definitions-from-schema.mjs";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/blocks/block-fields-renderer.tsx
+/**
+* Block Fields Renderer
+*
+* Renders form fields for a block inline (inside the block card).
+* Uses registered field components from the admin config.
+*/
+function BlockFieldsRenderer({ blockId, blockSchema }) {
+	const admin = useAdminStore(selectAdmin);
+	const blockFields = React$1.useMemo(() => {
+		if (!blockSchema?.fields || !admin) return {};
+		return buildFieldDefinitionsFromMetadata(blockSchema.fields, admin.getFields());
+	}, [blockSchema?.fields, admin]);
+	if (Object.keys(blockFields).length === 0) return /* @__PURE__ */ jsx("div", {
+		className: "text-center text-sm text-muted-foreground py-4",
+		children: "This block has no editable fields."
+	});
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-4",
+		children: Object.entries(blockFields).map(([fieldName, fieldDef]) => /* @__PURE__ */ jsx(BlockField, {
+			name: fieldName,
+			blockId,
+			definition: fieldDef
+		}, `${blockId}:${fieldName}`))
+	});
+}
+function BlockField({ name, blockId, definition }) {
+	const resolveText = useResolveText();
+	const options = definition["~options"] || {};
+	const fieldType = definition.name;
+	const label = resolveText(options.label, name);
+	const description = resolveText(options.description, "");
+	const placeholder = resolveText(options.placeholder, "");
+	const scopedName = `content._values.${blockId}.${name}`;
+	const FieldComponent = definition.field?.component;
+	if (!FieldComponent) return /* @__PURE__ */ jsxs("div", {
+		className: "text-sm text-destructive",
+		children: ["No component registered for field type: ", fieldType]
+	});
+	return /* @__PURE__ */ jsx(FieldComponent, {
+		name: scopedName,
+		label,
+		description,
+		placeholder,
+		required: options.required ?? false,
+		disabled: options.disabled ?? false,
+		readOnly: options.readOnly ?? false,
+		localized: options.localized ?? false,
+		...stripUiOptions(options)
+	});
+}
+/**
+* Strip UI-specific options that shouldn't be passed to field components
+*/
+function stripUiOptions(options) {
+	const { label: _label, description: _description, placeholder: _placeholder, required: _required, disabled: _disabled, readOnly: _readOnly, hidden: _hidden, visible: _visible, localized: _localized, locale: _locale, compute: _compute, onChange: _onChange, ...rest } = options;
+	return rest;
+}
+
+//#endregion
+export { BlockFieldsRenderer };
+//# sourceMappingURL=block-fields-renderer.mjs.map

package/dist/client/components/blocks/block-fields-renderer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-fields-renderer.mjs","names":["React"],"sources":["../../../../src/client/components/blocks/block-fields-renderer.tsx"],"sourcesContent":["/**\n * Block Fields Renderer\n *\n * Renders form fields for a block inline (inside the block card).\n * Uses registered field components from the admin config.\n */\n\n\"use client\";\n\nimport * as React from \"react\";\nimport type { BlockSchema } from \"#questpie/admin/server\";\nimport type { FieldDefinition } from \"../../builder/field/field.js\";\nimport { useResolveText } from \"../../i18n/hooks.js\";\nimport { selectAdmin, useAdminStore } from \"../../runtime/index.js\";\nimport { buildFieldDefinitionsFromMetadata } from \"../../utils/build-field-definitions-from-schema.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type BlockFieldsRendererProps = {\n\t/** Block ID for scoping field names */\n\tblockId: string;\n\t/** Block schema containing field definitions */\n\tblockSchema: BlockSchema;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function BlockFieldsRenderer({\n\tblockId,\n\tblockSchema,\n}: BlockFieldsRendererProps) {\n\tconst admin = useAdminStore(selectAdmin);\n\n\t// Convert block field metadata to field definitions with component references\n\tconst blockFields = React.useMemo(() => {\n\t\tif (!blockSchema?.fields || !admin) return {};\n\t\treturn buildFieldDefinitionsFromMetadata(\n\t\t\tblockSchema.fields as Record<\n\t\t\t\tstring,\n\t\t\t\t{ metadata?: unknown; name?: string }\n\t\t\t>,\n\t\t\tadmin.getFields() as any,\n\t\t);\n\t}, [blockSchema?.fields, admin]);\n\n\tif (Object.keys(blockFields).length === 0) {\n\t\treturn (\n\t\t\t<div className=\"text-center text-sm text-muted-foreground py-4\">\n\t\t\t\tThis block has no editable fields.\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className=\"space-y-4\">\n\t\t\t{Object.entries(blockFields).map(([fieldName, fieldDef]) => (\n\t\t\t\t<BlockField\n\t\t\t\t\t// Include blockId in key to ensure fresh Controller instances per block\n\t\t\t\t\tkey={`${blockId}:${fieldName}`}\n\t\t\t\t\tname={fieldName}\n\t\t\t\t\tblockId={blockId}\n\t\t\t\t\tdefinition={fieldDef}\n\t\t\t\t/>\n\t\t\t))}\n\t\t</div>\n\t);\n}\n\n// ============================================================================\n// Individual Field\n// ============================================================================\n\ntype BlockFieldProps = {\n\tname: string;\n\tblockId: string;\n\tdefinition: FieldDefinition;\n};\n\nfunction BlockField({ name, blockId, definition }: BlockFieldProps) {\n\tconst resolveText = useResolveText();\n\tconst options = (definition as any)[\"~options\"] || {};\n\tconst fieldType = definition.name;\n\n\t// Resolve i18n texts\n\tconst label = resolveText(options.label, name);\n\tconst description = resolveText(options.description, \"\");\n\tconst placeholder = resolveText(options.placeholder, \"\");\n\n\t// Scope the field name to the block's values in the parent form\n\t// This ensures block fields don't conflict with collection-level fields\n\tconst scopedName = `content._values.${blockId}.${name}`;\n\n\t// Check if field has a registered component\n\tconst FieldComponent = definition.field?.component as\n\t\t| React.ComponentType<any>\n\t\t| undefined;\n\n\t// All fields should have a registered component (registry-first)\n\tif (!FieldComponent) {\n\t\treturn (\n\t\t\t<div className=\"text-sm text-destructive\">\n\t\t\t\tNo component registered for field type: {fieldType}\n\t\t\t</div>\n\t\t);\n\t}\n\n\tconst componentProps = {\n\t\tname: scopedName,\n\t\tlabel,\n\t\tdescription,\n\t\tplaceholder,\n\t\trequired: options.required ?? false,\n\t\tdisabled: options.disabled ?? false,\n\t\treadOnly: options.readOnly ?? false,\n\t\tlocalized: options.localized ?? false,\n\t\t...stripUiOptions(options),\n\t};\n\n\treturn <FieldComponent {...componentProps} />;\n}\n\n// ============================================================================\n// Utilities\n// ============================================================================\n\n/**\n * Strip UI-specific options that shouldn't be passed to field components\n */\nfunction stripUiOptions(options: Record<string, any>) {\n\tconst {\n\t\tlabel: _label,\n\t\tdescription: _description,\n\t\tplaceholder: _placeholder,\n\t\trequired: _required,\n\t\tdisabled: _disabled,\n\t\treadOnly: _readOnly,\n\t\thidden: _hidden,\n\t\tvisible: _visible,\n\t\tlocalized: _localized,\n\t\tlocale: _locale,\n\t\tcompute: _compute,\n\t\tonChange: _onChange,\n\t\t...rest\n\t} = options;\n\treturn rest;\n}\n"],"mappings":";;;;;;;;;;;;;;;AA+BA,SAAgB,oBAAoB,EACnC,SACA,eAC4B;CAC5B,MAAM,QAAQ,cAAc,YAAY;CAGxC,MAAM,cAAcA,QAAM,cAAc;AACvC,MAAI,CAAC,aAAa,UAAU,CAAC,MAAO,QAAO,EAAE;AAC7C,SAAO,kCACN,YAAY,QAIZ,MAAM,WAAW,CACjB;IACC,CAAC,aAAa,QAAQ,MAAM,CAAC;AAEhC,KAAI,OAAO,KAAK,YAAY,CAAC,WAAW,EACvC,QACC,oBAAC;EAAI,WAAU;YAAiD;GAE1D;AAIR,QACC,oBAAC;EAAI,WAAU;YACb,OAAO,QAAQ,YAAY,CAAC,KAAK,CAAC,WAAW,cAC7C,oBAAC;GAGA,MAAM;GACG;GACT,YAAY;KAHP,GAAG,QAAQ,GAAG,YAIlB,CACD;GACG;;AAcR,SAAS,WAAW,EAAE,MAAM,SAAS,cAA+B;CACnE,MAAM,cAAc,gBAAgB;CACpC,MAAM,UAAW,WAAmB,eAAe,EAAE;CACrD,MAAM,YAAY,WAAW;CAG7B,MAAM,QAAQ,YAAY,QAAQ,OAAO,KAAK;CAC9C,MAAM,cAAc,YAAY,QAAQ,aAAa,GAAG;CACxD,MAAM,cAAc,YAAY,QAAQ,aAAa,GAAG;CAIxD,MAAM,aAAa,mBAAmB,QAAQ,GAAG;CAGjD,MAAM,iBAAiB,WAAW,OAAO;AAKzC,KAAI,CAAC,eACJ,QACC,qBAAC;EAAI,WAAU;aAA2B,4CACA;GACpC;AAgBR,QAAO,oBAAC;EAXP,MAAM;EACN;EACA;EACA;EACA,UAAU,QAAQ,YAAY;EAC9B,UAAU,QAAQ,YAAY;EAC9B,UAAU,QAAQ,YAAY;EAC9B,WAAW,QAAQ,aAAa;EAChC,GAAG,eAAe,QAAQ;GAGkB;;;;;AAU9C,SAAS,eAAe,SAA8B;CACrD,MAAM,EACL,OAAO,QACP,aAAa,cACb,aAAa,cACb,UAAU,WACV,UAAU,WACV,UAAU,WACV,QAAQ,SACR,SAAS,UACT,WAAW,YACX,QAAQ,SACR,SAAS,UACT,UAAU,WACV,GAAG,SACA;AACJ,QAAO"}

package/dist/client/components/blocks/block-insert-button.mjs

@@ -0,0 +1,72 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { Button } from "../ui/button.mjs";
+import { useBlockEditorActions } from "./block-editor-context.mjs";
+import { Icon } from "@iconify/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/blocks/block-insert-button.tsx
+/**
+* Block Insert Button
+*
+* Button to add new blocks at a specific position.
+* Opens the block library sidebar.
+*/
+function BlockInsertButton({ position, compact = false, variant = "default", parentLabel, className }) {
+	const { openLibrary } = useBlockEditorActions();
+	const handleOpen = () => {
+		openLibrary(position);
+	};
+	if (variant === "compact" || compact) return /* @__PURE__ */ jsxs("div", {
+		className: cn("group relative w-full cursor-pointer -my-0.5 z-10", "h-2 sm:h-1.5", className),
+		role: "button",
+		tabIndex: 0,
+		onClick: handleOpen,
+		onKeyDown: (e) => {
+			if (e.key === "Enter" || e.key === " ") {
+				e.preventDefault();
+				handleOpen();
+			}
+		},
+		children: [/* @__PURE__ */ jsx("div", { className: "absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 bg-primary/40 transition-colors sm:bg-transparent sm:group-hover:bg-primary" }), /* @__PURE__ */ jsx("div", {
+			className: "pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-center opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "pointer-events-auto flex items-center gap-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground shadow-sm cursor-pointer",
+				children: [/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:plus-bold",
+					width: 10,
+					height: 10
+				}), /* @__PURE__ */ jsx("span", { children: "Add" })]
+			})
+		})]
+	});
+	if (variant === "rail") return /* @__PURE__ */ jsxs("button", {
+		type: "button",
+		className: cn("group flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors relative", className),
+		onClick: handleOpen,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "flex items-center justify-center w-5 h-5 rounded-full border border-border bg-background text-muted-foreground group-hover:border-foreground group-hover:text-foreground transition-all relative z-10",
+			children: /* @__PURE__ */ jsx(Icon, {
+				icon: "ph:plus",
+				className: "w-3 h-3"
+			})
+		}), /* @__PURE__ */ jsx("span", {
+			className: "truncate",
+			children: parentLabel ? `Add to ${parentLabel}` : "Add block"
+		})]
+	});
+	return /* @__PURE__ */ jsxs(Button, {
+		variant: "outline",
+		className: cn("w-full border-dashed", className),
+		onClick: handleOpen,
+		children: [/* @__PURE__ */ jsx(Icon, {
+			icon: "ph:plus",
+			className: "mr-2 h-4 w-4"
+		}), "Add block"]
+	});
+}
+
+//#endregion
+export { BlockInsertButton };
+//# sourceMappingURL=block-insert-button.mjs.map

package/dist/client/components/blocks/block-insert-button.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-insert-button.mjs","names":[],"sources":["../../../../src/client/components/blocks/block-insert-button.tsx"],"sourcesContent":["/**\n * Block Insert Button\n *\n * Button to add new blocks at a specific position.\n * Opens the block library sidebar.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport { cn } from \"../../lib/utils.js\";\nimport { Button } from \"../ui/button.js\";\nimport { useBlockEditorActions } from \"./block-editor-context.js\";\nimport type { InsertPosition } from \"./utils/tree-utils.js\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport type BlockInsertButtonProps = {\n\t/** Position where the block will be inserted */\n\tposition: InsertPosition;\n\t/** Compact style (shows on hover between blocks) */\n\tcompact?: boolean;\n\t/** Rail variant for nested blocks (shows \"Add to X\" label) */\n\tvariant?: \"default\" | \"compact\" | \"rail\";\n\t/** Parent block label (for rail variant) */\n\tparentLabel?: string;\n\t/** Custom class name */\n\tclassName?: string;\n};\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function \tBlockInsertButton({\n\tposition,\n\tcompact = false,\n\tvariant = \"default\",\n\tparentLabel,\n\tclassName,\n}: BlockInsertButtonProps) {\n\tconst { openLibrary } = useBlockEditorActions();\n\n\tconst handleOpen = () => {\n\t\topenLibrary(position);\n\t};\n\n\t// Compact variant - thin hover line with add badge\n\tif (variant === \"compact\" || compact) {\n\t\treturn (\n\t\t\t<div\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group relative w-full cursor-pointer -my-0.5 z-10\",\n\t\t\t\t\t\"h-2 sm:h-1.5\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\trole=\"button\"\n\t\t\t\ttabIndex={0}\n\t\t\t\tonClick={handleOpen}\n\t\t\t\tonKeyDown={(e) => {\n\t\t\t\t\tif (e.key === \"Enter\" || e.key === \" \") {\n\t\t\t\t\t\te.preventDefault();\n\t\t\t\t\t\thandleOpen();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{/* Hover indicator line */}\n\t\t\t\t<div className=\"absolute inset-x-0 top-1/2 h-0.5 -translate-y-1/2 bg-primary/40 transition-colors sm:bg-transparent sm:group-hover:bg-primary\" />\n\n\t\t\t\t{/* Add button that appears on hover */}\n\t\t\t\t<div className=\"pointer-events-none absolute inset-x-0 top-1/2 flex -translate-y-1/2 items-center justify-center opacity-100 transition-opacity sm:opacity-0 sm:group-hover:opacity-100\">\n\t\t\t\t\t<div className=\"pointer-events-auto flex items-center gap-1 rounded-full bg-primary px-2 py-0.5 text-xs text-primary-foreground shadow-sm cursor-pointer\">\n\t\t\t\t\t\t<Icon icon=\"ph:plus-bold\" width={10} height={10} />\n\t\t\t\t\t\t<span>Add</span>\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\t// Rail variant - for nested blocks with icon and label\n\tif (variant === \"rail\") {\n\t\treturn (\n\t\t\t<button\n\t\t\t\ttype=\"button\"\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"group flex items-center gap-2 text-xs font-medium text-muted-foreground hover:text-foreground transition-colors relative\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tonClick={handleOpen}\n\t\t\t>\n\n\t\t\t\t{/* Add button */}\n\t\t\t\t<div className=\"flex items-center justify-center w-5 h-5 rounded-full border border-border bg-background text-muted-foreground group-hover:border-foreground group-hover:text-foreground transition-all relative z-10\">\n\t\t\t\t\t<Icon icon=\"ph:plus\" className=\"w-3 h-3\" />\n\t\t\t\t</div>\n\n\t\t\t\t{/* Label */}\n\t\t\t\t<span className=\"truncate\">\n\t\t\t\t\t{parentLabel ? `Add to ${parentLabel}` : \"Add block\"}\n\t\t\t\t</span>\n\t\t\t</button>\n\t\t);\n\t}\n\n\t// Default variant - full button\n\treturn (\n\t\t<Button\n\t\t\tvariant=\"outline\"\n\t\t\tclassName={cn(\"w-full border-dashed\", className)}\n\t\t\tonClick={handleOpen}\n\t\t>\n\t\t\t<Icon icon=\"ph:plus\" className=\"mr-2 h-4 w-4\" />\n\t\t\tAdd block\n\t\t</Button>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;;;AAoCA,SAAiB,kBAAkB,EAClC,UACA,UAAU,OACV,UAAU,WACV,aACA,aAC0B;CAC1B,MAAM,EAAE,gBAAgB,uBAAuB;CAE/C,MAAM,mBAAmB;AACxB,cAAY,SAAS;;AAItB,KAAI,YAAY,aAAa,QAC5B,QACC,qBAAC;EACA,WAAW,GACV,qDACA,gBACA,UACA;EACD,MAAK;EACL,UAAU;EACV,SAAS;EACT,YAAY,MAAM;AACjB,OAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,KAAK;AACvC,MAAE,gBAAgB;AAClB,gBAAY;;;aAKd,oBAAC,SAAI,WAAU,kIAAkI,EAGjJ,oBAAC;GAAI,WAAU;aACd,qBAAC;IAAI,WAAU;eACd,oBAAC;KAAK,MAAK;KAAe,OAAO;KAAI,QAAQ;MAAM,EACnD,oBAAC,oBAAK,QAAU;KACX;IACD;GACD;AAKR,KAAI,YAAY,OACf,QACC,qBAAC;EACA,MAAK;EACL,WAAW,GACV,4HACA,UACA;EACD,SAAS;aAIT,oBAAC;GAAI,WAAU;aACd,oBAAC;IAAK,MAAK;IAAU,WAAU;KAAY;IACtC,EAGN,oBAAC;GAAK,WAAU;aACd,cAAc,UAAU,gBAAgB;IACnC;GACC;AAKX,QACC,qBAAC;EACA,SAAQ;EACR,WAAW,GAAG,wBAAwB,UAAU;EAChD,SAAS;aAET,oBAAC;GAAK,MAAK;GAAU,WAAU;IAAiB;GAExC"}