@questpie/admin 1.1.1 → 3.0.0

package/dist/client/components/blocks/block-tree.mjs

@@ -0,0 +1,103 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { BlockInsertButton } from "./block-insert-button.mjs";
+import { BlockItem } from "./block-item.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { SortableContext, verticalListSortingStrategy } from "@dnd-kit/sortable";
+
+//#region src/client/components/blocks/block-tree.tsx
+/**
+* Block Tree
+*
+* Renders a list of blocks with drag-and-drop support and rail visual for hierarchy.
+*/
+function areBlockTreePropsEqual(prev, next) {
+	return prev.blocks === next.blocks && prev.level === next.level && prev.parentId === next.parentId && prev.className === next.className;
+}
+const BlockTree = React.memo(function BlockTree$1(t0) {
+	const $ = c(22);
+	const { blocks, level, parentId, className } = t0;
+	let t1;
+	if ($[0] !== blocks) {
+		t1 = blocks.map(_temp);
+		$[0] = blocks;
+		$[1] = t1;
+	} else t1 = $[1];
+	const blockIds = t1;
+	const isRoot = level === 0;
+	let t2;
+	if ($[2] !== className) {
+		t2 = cn("space-y-2", className);
+		$[2] = className;
+		$[3] = t2;
+	} else t2 = $[3];
+	let t3;
+	if ($[4] !== blocks || $[5] !== level || $[6] !== parentId) {
+		let t4$1;
+		if ($[8] !== level || $[9] !== parentId) {
+			t4$1 = (block, index) => /* @__PURE__ */ jsx(BlockItem, {
+				block,
+				level,
+				index,
+				parentId
+			}, block.id);
+			$[8] = level;
+			$[9] = parentId;
+			$[10] = t4$1;
+		} else t4$1 = $[10];
+		t3 = blocks.map(t4$1);
+		$[4] = blocks;
+		$[5] = level;
+		$[6] = parentId;
+		$[7] = t3;
+	} else t3 = $[7];
+	let t4;
+	if ($[11] !== blockIds || $[12] !== t3) {
+		t4 = /* @__PURE__ */ jsx(SortableContext, {
+			items: blockIds,
+			strategy: verticalListSortingStrategy,
+			children: t3
+		});
+		$[11] = blockIds;
+		$[12] = t3;
+		$[13] = t4;
+	} else t4 = $[13];
+	let t5;
+	if ($[14] !== blocks.length || $[15] !== isRoot || $[16] !== parentId) {
+		t5 = isRoot && /* @__PURE__ */ jsx("div", {
+			className: "mt-4",
+			children: /* @__PURE__ */ jsx(BlockInsertButton, {
+				position: {
+					parentId,
+					index: blocks.length
+				},
+				variant: "default"
+			})
+		});
+		$[14] = blocks.length;
+		$[15] = isRoot;
+		$[16] = parentId;
+		$[17] = t5;
+	} else t5 = $[17];
+	let t6;
+	if ($[18] !== t2 || $[19] !== t4 || $[20] !== t5) {
+		t6 = /* @__PURE__ */ jsxs("div", {
+			className: t2,
+			children: [t4, t5]
+		});
+		$[18] = t2;
+		$[19] = t4;
+		$[20] = t5;
+		$[21] = t6;
+	} else t6 = $[21];
+	return t6;
+}, areBlockTreePropsEqual);
+function _temp(b) {
+	return b.id;
+}
+
+//#endregion
+export { BlockTree };

package/dist/client/components/blocks/block-type-icon.mjs

@@ -0,0 +1,95 @@
+"use client";
+
+import { cn } from "../../lib/utils.mjs";
+import { ComponentRenderer } from "../component-renderer.mjs";
+import { useBlockDefinition } from "./block-editor-context.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/blocks/block-type-icon.tsx
+/**
+* Block Type Icon
+*
+* Displays the icon for a block type using component references.
+*/
+const DEFAULT_BLOCK_ICON_REFERENCE = {
+	type: "icon",
+	props: { name: "ph:cube" }
+};
+const BlockTypeIcon = React.memo(function BlockTypeIcon$1(t0) {
+	const $ = c(4);
+	const { type, className, size: t1 } = t0;
+	const size = t1 === void 0 ? 16 : t1;
+	const iconRef = useBlockDefinition(type)?.admin?.icon;
+	let t2;
+	if ($[0] !== className || $[1] !== iconRef || $[2] !== size) {
+		t2 = /* @__PURE__ */ jsx(BlockIcon, {
+			icon: iconRef,
+			className,
+			size
+		});
+		$[0] = className;
+		$[1] = iconRef;
+		$[2] = size;
+		$[3] = t2;
+	} else t2 = $[3];
+	return t2;
+});
+/**
+* Standalone icon component that doesn't require context.
+* Useful for rendering icons outside the editor.
+* Shows a default cube icon if no icon is provided.
+*/
+const BlockIcon = React.memo(function BlockIcon$1(t0) {
+	const $ = c(10);
+	const { icon, className, size: t1 } = t0;
+	const size = t1 === void 0 ? 16 : t1;
+	let t2;
+	if ($[0] !== icon) {
+		t2 = normalizeIconReference(icon);
+		$[0] = icon;
+		$[1] = t2;
+	} else t2 = $[1];
+	const finalReference = t2 ?? DEFAULT_BLOCK_ICON_REFERENCE;
+	let t3;
+	if ($[2] !== className) {
+		t3 = cn("shrink-0", className);
+		$[2] = className;
+		$[3] = t3;
+	} else t3 = $[3];
+	const mergedClassName = t3;
+	let t4;
+	if ($[4] !== mergedClassName || $[5] !== size) {
+		t4 = {
+			className: mergedClassName,
+			size
+		};
+		$[4] = mergedClassName;
+		$[5] = size;
+		$[6] = t4;
+	} else t4 = $[6];
+	const additionalProps = t4;
+	let t5;
+	if ($[7] !== additionalProps || $[8] !== finalReference) {
+		t5 = /* @__PURE__ */ jsx(ComponentRenderer, {
+			reference: finalReference,
+			additionalProps
+		});
+		$[7] = additionalProps;
+		$[8] = finalReference;
+		$[9] = t5;
+	} else t5 = $[9];
+	return t5;
+});
+function normalizeIconReference(icon) {
+	if (!icon) return void 0;
+	if (typeof icon === "string") return {
+		type: "icon",
+		props: { name: icon }
+	};
+	return icon;
+}
+
+//#endregion
+export { BlockIcon, BlockTypeIcon };

package/dist/client/components/blocks/utils/tree-utils.mjs

@@ -0,0 +1,185 @@
+import { arrayMove } from "@dnd-kit/sortable";
+
+//#region src/client/components/blocks/utils/tree-utils.ts
+/**
+* Block Tree Utilities
+*
+* Functions for manipulating the block tree structure.
+* All functions are pure and return new objects.
+*/
+/**
+* Find a block by ID in the tree.
+*/
+function findBlockById(tree, id) {
+	for (const node of tree) {
+		if (node.id === id) return node;
+		const found = findBlockById(node.children, id);
+		if (found) return found;
+	}
+	return null;
+}
+/**
+* Find a block's position (parent and index) in the tree.
+*/
+function findBlockPosition(tree, id, parentId = null) {
+	for (let i = 0; i < tree.length; i++) {
+		const node = tree[i];
+		if (node.id === id) return {
+			parentId,
+			index: i
+		};
+		const found = findBlockPosition(node.children, id, node.id);
+		if (found) return found;
+	}
+	return null;
+}
+/**
+* Insert a block at the specified position.
+*/
+function insertBlockInTree(tree, block, position) {
+	if (position.parentId === null) {
+		const newTree = [...tree];
+		newTree.splice(position.index, 0, block);
+		return newTree;
+	}
+	return tree.map((node) => {
+		if (node.id === position.parentId) {
+			const newChildren = [...node.children];
+			newChildren.splice(position.index, 0, block);
+			return {
+				...node,
+				children: newChildren
+			};
+		}
+		return {
+			...node,
+			children: insertBlockInTree(node.children, block, position)
+		};
+	});
+}
+/**
+* Remove a block and all its children from the tree.
+* Returns the new tree and list of removed block IDs.
+*/
+function removeBlockFromTree(tree, id) {
+	const removedIds = [];
+	function collectIds(node) {
+		removedIds.push(node.id);
+		node.children.forEach(collectIds);
+	}
+	function remove(nodes) {
+		return nodes.filter((node) => {
+			if (node.id === id) {
+				collectIds(node);
+				return false;
+			}
+			return true;
+		}).map((node) => ({
+			...node,
+			children: remove(node.children)
+		}));
+	}
+	return {
+		newTree: remove(tree),
+		removedIds
+	};
+}
+/**
+* Reorder a block within the same parent using arrayMove.
+* Used for DnD reordering — avoids remove+insert index shifting issues.
+*/
+function reorderBlockInTree(tree, parentId, fromIndex, toIndex) {
+	if (parentId === null) return arrayMove(tree, fromIndex, toIndex);
+	return tree.map((node) => {
+		if (node.id === parentId) return {
+			...node,
+			children: arrayMove(node.children, fromIndex, toIndex)
+		};
+		return {
+			...node,
+			children: reorderBlockInTree(node.children, parentId, fromIndex, toIndex)
+		};
+	});
+}
+/**
+* Duplicate a block and all its children.
+* Returns the new tree, list of new IDs, and new values.
+*/
+function duplicateBlockInTree(tree, values, blockId) {
+	const block = findBlockById(tree, blockId);
+	if (!block) return {
+		newTree: tree,
+		newIds: [],
+		newValues: {}
+	};
+	const newIds = [];
+	const newValues = {};
+	function cloneNode(node) {
+		const newId = crypto.randomUUID();
+		newIds.push(newId);
+		newValues[newId] = { ...values[node.id] };
+		return {
+			id: newId,
+			type: node.type,
+			children: node.children.map(cloneNode)
+		};
+	}
+	const clonedBlock = cloneNode(block);
+	const position = findBlockPosition(tree, blockId);
+	if (!position) return {
+		newTree: tree,
+		newIds: [],
+		newValues: {}
+	};
+	return {
+		newTree: insertBlockInTree(tree, clonedBlock, {
+			parentId: position.parentId,
+			index: position.index + 1
+		}),
+		newIds,
+		newValues
+	};
+}
+/**
+* Get all block IDs in the tree (flattened).
+*/
+function getAllBlockIds(tree) {
+	const ids = [];
+	function collect(nodes) {
+		for (const node of nodes) {
+			ids.push(node.id);
+			collect(node.children);
+		}
+	}
+	collect(tree);
+	return ids;
+}
+/**
+* Count total blocks in the tree.
+*/
+function countBlocks(tree) {
+	let count = 0;
+	function traverse(nodes) {
+		for (const node of nodes) {
+			count++;
+			traverse(node.children);
+		}
+	}
+	traverse(tree);
+	return count;
+}
+/**
+* Get default values for block fields.
+*/
+function getDefaultValues(fields) {
+	if (!fields) return {};
+	const values = {};
+	for (const [key, field] of Object.entries(fields)) {
+		const defaultValue = field["~options"]?.defaultValue;
+		if (defaultValue !== void 0) values[key] = defaultValue;
+	}
+	return values;
+}
+
+//#endregion
+export { countBlocks, duplicateBlockInTree, findBlockById, findBlockPosition, getAllBlockIds, getDefaultValues, insertBlockInTree, removeBlockFromTree, reorderBlockInTree };

package/dist/client/components/component-renderer.d.mts

@@ -0,0 +1,114 @@
+import { ComponentReference } from "../../server/augmentation/common.mjs";
+import "../../server/augmentation.mjs";
+import * as React from "react";
+
+//#region src/client/components/component-renderer.d.ts
+
+/**
+ * Props for IconifyIcon component
+ */
+interface IconifyIconProps {
+  /** Iconify icon name (e.g., "ph:users", "mdi:home") */
+  name: string;
+  /** Icon size */
+  size?: number | string;
+  /** Additional class name */
+  className?: string;
+  /** Icon color */
+  color?: string;
+}
+/**
+ * Iconify-based icon component.
+ * Renders icons from any Iconify icon set (Phosphor, Material Design, etc.)
+ *
+ * @example
+ * ```tsx
+ * <IconifyIcon name="ph:users" size={24} />
+ * <IconifyIcon name="mdi:home" className="text-blue-500" />
+ * ```
+ */
+declare const IconifyIcon: React.NamedExoticComponent<IconifyIconProps>;
+/**
+ * Props for Badge component
+ */
+interface BadgeProps {
+  /** Badge text */
+  text: string;
+  /** Badge color variant */
+  color?: "default" | "primary" | "secondary" | "destructive" | "success" | "warning";
+  /** Additional class name */
+  className?: string;
+}
+/**
+ * Badge component for status indicators
+ */
+declare function Badge({
+  text,
+  color,
+  className
+}: BadgeProps): React.ReactElement;
+/**
+ * Component renderer registry type
+ */
+type ComponentRendererRegistry = Record<string, React.ComponentType<any>>;
+/**
+ * Props for ComponentRenderer
+ */
+interface ComponentRendererProps {
+  /** Server-defined component reference */
+  reference: ComponentReference | null | undefined;
+  /** Component registry override (defaults to admin context registry) */
+  registry?: ComponentRendererRegistry;
+  /** Fallback to render if component type not found */
+  fallback?: React.ReactNode;
+  /** Additional props to pass to the component */
+  additionalProps?: Record<string, unknown>;
+}
+/**
+ * Renders a server-defined component reference.
+ *
+ * Looks up the component type in the registry and renders it with the provided props.
+ * Falls back gracefully if the component type is not found.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ComponentRenderer reference={{ type: "icon", props: { name: "ph:users" } }} />
+ *
+ * // With custom registry
+ * <ComponentRenderer
+ *   reference={{ type: "custom", props: { value: 42 } }}
+ *   registry={{ custom: MyCustomComponent }}
+ * />
+ *
+ * // With fallback
+ * <ComponentRenderer
+ *   reference={{ type: "unknown", props: {} }}
+ *   fallback={<span>?</span>}
+ * />
+ * ```
+ */
+declare const ComponentRenderer: React.NamedExoticComponent<ComponentRendererProps>;
+/**
+ * Check if a value is a component reference
+ */
+declare function isComponentReference(value: unknown): value is ComponentReference;
+/**
+ * Resolve an icon to a React element.
+ * Handles both ComponentReference objects and direct React components.
+ *
+ * @param icon - Icon to resolve (ComponentReference, React component, or undefined)
+ * @param props - Additional props to pass to the icon
+ * @returns React element or null
+ */
+declare function resolveIconElement(icon: ComponentReference | React.ComponentType<any> | string | undefined | null, props?: Record<string, unknown>, registry?: ComponentRendererRegistry): React.ReactNode;
+/**
+ * Create a render function for icons.
+ * Useful for rendering icons in table cells or list items.
+ *
+ * @param registry - Custom component registry
+ * @returns Function that renders an icon from a ComponentReference
+ */
+declare function createIconRenderer(registry?: ComponentRendererRegistry): (icon: ComponentReference | React.ComponentType<any> | string | undefined | null, props?: Record<string, unknown>) => React.ReactNode;
+//#endregion
+export { Badge, BadgeProps, ComponentRenderer, ComponentRendererProps, ComponentRendererRegistry, IconifyIcon, IconifyIconProps, createIconRenderer, isComponentReference, resolveIconElement };