@questpie/admin 1.1.0 → 2.0.0

package/dist/client/components/actions/header-actions.mjs

@@ -0,0 +1,117 @@
+"use client";
+
+import { useResolveText } from "../../i18n/hooks.mjs";
+import { selectAuthClient, useAdminStore } from "../../runtime/provider.mjs";
+import { resolveIconElement } from "../component-renderer.mjs";
+import { Button } from "../ui/button.mjs";
+import { ActionButton } from "./action-button.mjs";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from "../ui/dropdown-menu.mjs";
+import { Icon } from "@iconify/react";
+import { useQueryClient } from "@tanstack/react-query";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/actions/header-actions.tsx
+/**
+* Header Actions
+*
+* Renders action buttons for the collection header area.
+* Primary actions are shown as buttons, secondary in a dropdown menu.
+*/
+/**
+* HeaderActions - Renders action buttons in the header area
+*
+* Primary actions are shown as buttons.
+* Secondary actions are shown in a dropdown menu.
+*
+* @example
+* ```tsx
+* <HeaderActions
+*   actions={{
+*     primary: [createAction],
+*     secondary: [exportAction, importAction],
+*   }}
+*   collection="posts"
+*   helpers={actionHelpers}
+*   onOpenDialog={(action) => setDialogAction(action)}
+* />
+* ```
+*/
+function HeaderActions({ actions, collection, helpers, onOpenDialog }) {
+	const resolveText = useResolveText();
+	const authClient = useAdminStore(selectAuthClient);
+	const queryClient = useQueryClient();
+	const actionQueryClient = React$1.useMemo(() => ({
+		invalidateQueries: (filters) => queryClient.invalidateQueries(filters),
+		refetchQueries: (filters) => queryClient.refetchQueries(filters),
+		resetQueries: (filters) => queryClient.resetQueries(filters)
+	}), [queryClient]);
+	const ctx = React$1.useMemo(() => ({
+		collection,
+		helpers,
+		queryClient: actionQueryClient,
+		authClient
+	}), [
+		collection,
+		helpers,
+		actionQueryClient,
+		authClient
+	]);
+	const filterVisible = React$1.useCallback((actionList) => {
+		if (!actionList) return [];
+		return actionList.filter((action) => {
+			if (action.visible === void 0) return true;
+			if (typeof action.visible === "function") return action.visible(ctx);
+			return action.visible;
+		});
+	}, [ctx]);
+	const visiblePrimary = React$1.useMemo(() => filterVisible(actions.primary), [actions.primary, filterVisible]);
+	const visibleSecondary = React$1.useMemo(() => filterVisible(actions.secondary), [actions.secondary, filterVisible]);
+	const regularSecondary = visibleSecondary.filter((a) => a.variant !== "destructive");
+	const destructiveSecondary = visibleSecondary.filter((a) => a.variant === "destructive");
+	if (visiblePrimary.length === 0 && visibleSecondary.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: "flex items-center gap-2",
+		children: [visiblePrimary.map((action) => /* @__PURE__ */ jsx(ActionButton, {
+			action,
+			collection,
+			helpers,
+			onOpenDialog
+		}, action.id)), visibleSecondary.length > 0 && /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "outline",
+				size: "icon",
+				className: "size-9"
+			}),
+			children: [/* @__PURE__ */ jsx(Icon, {
+				icon: "ph:dots-three-vertical",
+				className: "size-4"
+			}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "More actions"
+			})]
+		}), /* @__PURE__ */ jsxs(DropdownMenuContent, {
+			align: "end",
+			children: [
+				regularSecondary.map((action) => {
+					return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						onClick: () => onOpenDialog?.(action),
+						children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
+					}, action.id);
+				}),
+				regularSecondary.length > 0 && destructiveSecondary.length > 0 && /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+				destructiveSecondary.map((action) => {
+					return /* @__PURE__ */ jsxs(DropdownMenuItem, {
+						variant: "destructive",
+						onClick: () => onOpenDialog?.(action),
+						children: [resolveIconElement(action.icon, { className: "mr-2 size-4" }), resolveText(action.label)]
+					}, action.id);
+				})
+			]
+		})] })]
+	});
+}
+
+//#endregion
+export { HeaderActions };
+//# sourceMappingURL=header-actions.mjs.map

package/dist/client/components/actions/header-actions.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"header-actions.mjs","names":["actionQueryClient: ActionQueryClient","React","ctx: ActionContext<TItem>"],"sources":["../../../../src/client/components/actions/header-actions.tsx"],"sourcesContent":["/**\n * Header Actions\n *\n * Renders action buttons for the collection header area.\n * Primary actions are shown as buttons, secondary in a dropdown menu.\n */\n\n\"use client\";\n\nimport { Icon } from \"@iconify/react\";\nimport { useQueryClient } from \"@tanstack/react-query\";\nimport * as React from \"react\";\nimport type {\n  ActionContext,\n  ActionDefinition,\n  ActionHelpers,\n  ActionQueryClient,\n  HeaderActionsConfig,\n} from \"../../builder/types/action-types\";\nimport { resolveIconElement } from \"../../components/component-renderer\";\nimport { useResolveText } from \"../../i18n/hooks\";\nimport { selectAuthClient, useAdminStore } from \"../../runtime/provider\";\nimport { Button } from \"../ui/button\";\nimport {\n  DropdownMenu,\n  DropdownMenuContent,\n  DropdownMenuItem,\n  DropdownMenuSeparator,\n  DropdownMenuTrigger,\n} from \"../ui/dropdown-menu\";\nimport { ActionButton } from \"./action-button\";\n\nexport interface HeaderActionsProps<TItem = any> {\n  /** Header actions config with primary/secondary */\n  actions: HeaderActionsConfig<TItem>;\n  /** Collection name */\n  collection: string;\n  /** Action helpers */\n  helpers: ActionHelpers;\n  /** Callback when action dialog should open */\n  onOpenDialog?: (action: ActionDefinition<TItem>) => void;\n}\n\n/**\n * HeaderActions - Renders action buttons in the header area\n *\n * Primary actions are shown as buttons.\n * Secondary actions are shown in a dropdown menu.\n *\n * @example\n * ```tsx\n * <HeaderActions\n *   actions={{\n *     primary: [createAction],\n *     secondary: [exportAction, importAction],\n *   }}\n *   collection=\"posts\"\n *   helpers={actionHelpers}\n *   onOpenDialog={(action) => setDialogAction(action)}\n * />\n * ```\n */\nexport function HeaderActions<TItem = any>({\n  actions,\n  collection,\n  helpers,\n  onOpenDialog,\n}: HeaderActionsProps<TItem>): React.ReactElement | null {\n  const resolveText = useResolveText();\n  const authClient = useAdminStore(selectAuthClient);\n  const queryClient = useQueryClient();\n\n  // Wrapped query client for action context\n  const actionQueryClient: ActionQueryClient = React.useMemo(\n    () => ({\n      invalidateQueries: (filters) => queryClient.invalidateQueries(filters),\n      refetchQueries: (filters) => queryClient.refetchQueries(filters),\n      resetQueries: (filters) => queryClient.resetQueries(filters),\n    }),\n    [queryClient],\n  );\n\n  // Build action context for visibility checks\n  const ctx: ActionContext<TItem> = React.useMemo(\n    () => ({\n      collection,\n      helpers,\n      queryClient: actionQueryClient,\n      authClient,\n    }),\n    [collection, helpers, actionQueryClient, authClient],\n  );\n\n  // Filter visible actions\n  const filterVisible = React.useCallback(\n    (actionList: ActionDefinition<TItem>[] | undefined) => {\n      if (!actionList) return [];\n      return actionList.filter((action) => {\n        if (action.visible === undefined) return true;\n        if (typeof action.visible === \"function\") {\n          return action.visible(ctx);\n        }\n        return action.visible;\n      });\n    },\n    [ctx],\n  );\n\n  const visiblePrimary = React.useMemo(\n    () => filterVisible(actions.primary),\n    [actions.primary, filterVisible],\n  );\n\n  const visibleSecondary = React.useMemo(\n    () => filterVisible(actions.secondary),\n    [actions.secondary, filterVisible],\n  );\n\n  // Group secondary actions by variant (destructive at the end)\n  const regularSecondary = visibleSecondary.filter(\n    (a) => a.variant !== \"destructive\",\n  );\n  const destructiveSecondary = visibleSecondary.filter(\n    (a) => a.variant === \"destructive\",\n  );\n\n  if (visiblePrimary.length === 0 && visibleSecondary.length === 0) {\n    return null;\n  }\n\n  return (\n    <div className=\"flex items-center gap-2\">\n      {/* Primary actions as buttons */}\n      {visiblePrimary.map((action) => (\n        <ActionButton\n          key={action.id}\n          action={action}\n          collection={collection}\n          helpers={helpers}\n          onOpenDialog={onOpenDialog}\n        />\n      ))}\n\n      {/* Secondary actions in dropdown */}\n      {visibleSecondary.length > 0 && (\n        <DropdownMenu>\n          <DropdownMenuTrigger\n            render={<Button variant=\"outline\" size=\"icon\" className=\"size-9\" />}\n          >\n            <Icon icon=\"ph:dots-three-vertical\" className=\"size-4\" />\n            <span className=\"sr-only\">More actions</span>\n          </DropdownMenuTrigger>\n          <DropdownMenuContent align=\"end\">\n            {regularSecondary.map((action) => {\n              const iconElement = resolveIconElement(action.icon, {\n                className: \"mr-2 size-4\",\n              });\n              return (\n                <DropdownMenuItem\n                  key={action.id}\n                  onClick={() => onOpenDialog?.(action)}\n                >\n                  {iconElement}\n                  {resolveText(action.label)}\n                </DropdownMenuItem>\n              );\n            })}\n\n            {regularSecondary.length > 0 && destructiveSecondary.length > 0 && (\n              <DropdownMenuSeparator />\n            )}\n\n            {destructiveSecondary.map((action) => {\n              const iconElement = resolveIconElement(action.icon, {\n                className: \"mr-2 size-4\",\n              });\n              return (\n                <DropdownMenuItem\n                  key={action.id}\n                  variant=\"destructive\"\n                  onClick={() => onOpenDialog?.(action)}\n                >\n                  {iconElement}\n                  {resolveText(action.label)}\n                </DropdownMenuItem>\n              );\n            })}\n          </DropdownMenuContent>\n        </DropdownMenu>\n      )}\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,SAAgB,cAA2B,EACzC,SACA,YACA,SACA,gBACuD;CACvD,MAAM,cAAc,gBAAgB;CACpC,MAAM,aAAa,cAAc,iBAAiB;CAClD,MAAM,cAAc,gBAAgB;CAGpC,MAAMA,oBAAuCC,QAAM,eAC1C;EACL,oBAAoB,YAAY,YAAY,kBAAkB,QAAQ;EACtE,iBAAiB,YAAY,YAAY,eAAe,QAAQ;EAChE,eAAe,YAAY,YAAY,aAAa,QAAQ;EAC7D,GACD,CAAC,YAAY,CACd;CAGD,MAAMC,MAA4BD,QAAM,eAC/B;EACL;EACA;EACA,aAAa;EACb;EACD,GACD;EAAC;EAAY;EAAS;EAAmB;EAAW,CACrD;CAGD,MAAM,gBAAgBA,QAAM,aACzB,eAAsD;AACrD,MAAI,CAAC,WAAY,QAAO,EAAE;AAC1B,SAAO,WAAW,QAAQ,WAAW;AACnC,OAAI,OAAO,YAAY,OAAW,QAAO;AACzC,OAAI,OAAO,OAAO,YAAY,WAC5B,QAAO,OAAO,QAAQ,IAAI;AAE5B,UAAO,OAAO;IACd;IAEJ,CAAC,IAAI,CACN;CAED,MAAM,iBAAiBA,QAAM,cACrB,cAAc,QAAQ,QAAQ,EACpC,CAAC,QAAQ,SAAS,cAAc,CACjC;CAED,MAAM,mBAAmBA,QAAM,cACvB,cAAc,QAAQ,UAAU,EACtC,CAAC,QAAQ,WAAW,cAAc,CACnC;CAGD,MAAM,mBAAmB,iBAAiB,QACvC,MAAM,EAAE,YAAY,cACtB;CACD,MAAM,uBAAuB,iBAAiB,QAC3C,MAAM,EAAE,YAAY,cACtB;AAED,KAAI,eAAe,WAAW,KAAK,iBAAiB,WAAW,EAC7D,QAAO;AAGT,QACE,qBAAC;EAAI,WAAU;aAEZ,eAAe,KAAK,WACnB,oBAAC;GAES;GACI;GACH;GACK;KAJT,OAAO,GAKZ,CACF,EAGD,iBAAiB,SAAS,KACzB,qBAAC,2BACC,qBAAC;GACC,QAAQ,oBAAC;IAAO,SAAQ;IAAU,MAAK;IAAO,WAAU;KAAW;cAEnE,oBAAC;IAAK,MAAK;IAAyB,WAAU;KAAW,EACzD,oBAAC;IAAK,WAAU;cAAU;KAAmB;IACzB,EACtB,qBAAC;GAAoB,OAAM;;IACxB,iBAAiB,KAAK,WAAW;AAIhC,YACE,qBAAC;MAEC,eAAe,eAAe,OAAO;iBANrB,mBAAmB,OAAO,MAAM,EAClD,WAAW,eACZ,CAAC,EAOG,YAAY,OAAO,MAAM;QAJrB,OAAO,GAKK;MAErB;IAED,iBAAiB,SAAS,KAAK,qBAAqB,SAAS,KAC5D,oBAAC,0BAAwB;IAG1B,qBAAqB,KAAK,WAAW;AAIpC,YACE,qBAAC;MAEC,SAAQ;MACR,eAAe,eAAe,OAAO;iBAPrB,mBAAmB,OAAO,MAAM,EAClD,WAAW,eACZ,CAAC,EAQG,YAAY,OAAO,MAAM;QALrB,OAAO,GAMK;MAErB;;IACkB,IACT;GAEb"}

package/dist/client/components/actions/index.d.mts

@@ -0,0 +1,4 @@
+import "./action-button.mjs";
+import "./action-dialog.mjs";
+import "./confirmation-dialog.mjs";
+import "./header-actions.mjs";

package/dist/client/components/admin-link.d.mts

@@ -0,0 +1,67 @@
+import { CollectionNames, GlobalNames } from "../builder/index.mjs";
+import * as React$1 from "react";
+import * as react_jsx_runtime14 from "react/jsx-runtime";
+import { Questpie } from "questpie";
+
+//#region src/client/components/admin-link.d.ts
+
+interface AdminLinkProps<TApp extends Questpie<any>> extends Omit<React$1.AnchorHTMLAttributes<HTMLAnchorElement>, "href"> {
+  /** Link to dashboard */
+  to?: "dashboard";
+  /** Link to collection */
+  collection?: CollectionNames<TApp>;
+  /** Collection action */
+  action?: "list" | "create" | "edit";
+  /** Item ID for edit action */
+  id?: string;
+  /** Link to global */
+  global?: GlobalNames<TApp>;
+  /** Link to custom page by ID */
+  pageId?: string;
+  /** Custom href (overrides other props) */
+  href?: string;
+  /** Whether to use the navigate function instead of native anchor */
+  useNavigate?: boolean;
+  /** Children */
+  children: React$1.ReactNode;
+}
+/**
+ * Type-safe link component for admin navigation
+ *
+ * @example
+ * ```tsx
+ * // Link to dashboard
+ * <AdminLink to="dashboard">Dashboard</AdminLink>
+ *
+ * // Link to collection list
+ * <AdminLink collection="posts">View Posts</AdminLink>
+ *
+ * // Link to create new item
+ * <AdminLink collection="posts" action="create">New Post</AdminLink>
+ *
+ * // Link to edit item
+ * <AdminLink collection="posts" action="edit" id="123">Edit Post</AdminLink>
+ *
+ * // Link to global
+ * <AdminLink global="siteSettings">Site Settings</AdminLink>
+ *
+ * // Link to custom page
+ * <AdminLink pageId="analytics">Analytics</AdminLink>
+ * ```
+ */
+declare function AdminLink<TApp extends Questpie<any>>({
+  to,
+  collection,
+  action,
+  id,
+  global,
+  pageId,
+  href: customHref,
+  useNavigate,
+  children,
+  onClick,
+  ...rest
+}: AdminLinkProps<TApp>): react_jsx_runtime14.JSX.Element;
+//#endregion
+export { AdminLink, AdminLinkProps };
+//# sourceMappingURL=admin-link.d.mts.map

package/dist/client/components/admin-link.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-link.d.mts","names":[],"sources":["../../../src/client/components/admin-link.tsx"],"sourcesContent":[],"mappings":";;;;;;;AAqBE,UADe,cACT,CAAA,aADqC,QACrC,CAAA,GAAA,CAAA,CAAA,SAD4D,IAC5D,CAAN,OAAA,CAAM,oBAAA,CAAqB,iBAArB,CAAA,EAAA,MAAA,CAAA,CAAA;EAMuB;EAAhB,EAAA,CAAA,EAAA,WAAA;EAMQ;EAAZ,UAAA,CAAA,EANI,eAMJ,CANoB,IAMpB,CAAA;EAQC;EArBwD,MAAA,CAAA,EAAA,MAAA,GAAA,QAAA,GAAA,MAAA;EAAI;EAoDxD,EAAA,CAAA,EAAA,MAAA;EAAuB;EACrC,MAAA,CAAA,EAxCS,WAwCT,CAxCqB,IAwCrB,CAAA;EACA;EACA,MAAA,CAAA,EAAA,MAAA;EACA;EACA,IAAA,CAAA,EAAA,MAAA;EACA;EACM,WAAA,CAAA,EAAA,OAAA;EACN;EACA,QAAA,EAxCU,OAAA,CAAM,SAwChB;;;;;;;;;;;;;;;;;;;;;;;;;;iBATc,uBAAuB;;;;;;;QAO/B;;;;;GAKL,eAAe,QAAK,mBAAA,CAAA,GAAA,CAAA"}

package/dist/client/components/admin-link.mjs

@@ -0,0 +1,92 @@
+import { getAdminLinkHref, useAdminRoutes } from "../hooks/use-admin-routes.mjs";
+import * as React$1 from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/client/components/admin-link.tsx
+/**
+* AdminLink Component
+*
+* A type-safe link component for navigating within the admin UI.
+* Automatically generates correct URLs based on collection, global, or page targets.
+*/
+/**
+* Type-safe link component for admin navigation
+*
+* @example
+* ```tsx
+* // Link to dashboard
+* <AdminLink to="dashboard">Dashboard</AdminLink>
+*
+* // Link to collection list
+* <AdminLink collection="posts">View Posts</AdminLink>
+*
+* // Link to create new item
+* <AdminLink collection="posts" action="create">New Post</AdminLink>
+*
+* // Link to edit item
+* <AdminLink collection="posts" action="edit" id="123">Edit Post</AdminLink>
+*
+* // Link to global
+* <AdminLink global="siteSettings">Site Settings</AdminLink>
+*
+* // Link to custom page
+* <AdminLink pageId="analytics">Analytics</AdminLink>
+* ```
+*/
+function AdminLink({ to, collection, action, id, global, pageId, href: customHref, useNavigate = false, children, onClick, ...rest }) {
+	const { routes } = useAdminRoutes();
+	const href = React$1.useMemo(() => {
+		if (customHref) return customHref;
+		return getAdminLinkHref(routes, {
+			to,
+			collection,
+			action,
+			id,
+			global,
+			pageId
+		});
+	}, [
+		customHref,
+		to,
+		collection,
+		action,
+		id,
+		global,
+		pageId,
+		routes
+	]);
+	return /* @__PURE__ */ jsx("a", {
+		href,
+		onClick: React$1.useCallback((e) => {
+			if (onClick) onClick(e);
+			if (useNavigate && !e.defaultPrevented) {
+				e.preventDefault();
+				if (typeof window !== "undefined") {
+					window.history.pushState({}, "", href);
+					window.dispatchEvent(new PopStateEvent("popstate"));
+				}
+			}
+		}, [
+			onClick,
+			useNavigate,
+			href
+		]),
+		...rest,
+		children
+	});
+}
+/**
+* Link to edit an item in a collection
+*/
+function CollectionEditLink({ collection, id, ...rest }) {
+	return /* @__PURE__ */ jsx(AdminLink, {
+		collection,
+		action: "edit",
+		id,
+		...rest
+	});
+}
+
+//#endregion
+export { AdminLink, CollectionEditLink };
+//# sourceMappingURL=admin-link.mjs.map

package/dist/client/components/admin-link.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"admin-link.mjs","names":["React"],"sources":["../../../src/client/components/admin-link.tsx"],"sourcesContent":["/**\n * AdminLink Component\n *\n * A type-safe link component for navigating within the admin UI.\n * Automatically generates correct URLs based on collection, global, or page targets.\n */\n\nimport * as React from \"react\";\nimport type { Questpie } from \"questpie\";\nimport {\n  useAdminRoutes,\n  getAdminLinkHref,\n  type AdminLinkProps as AdminLinkTargetProps,\n} from \"../hooks/use-admin-routes\";\nimport type { CollectionNames, GlobalNames } from \"../builder\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AdminLinkProps<TApp extends Questpie<any>> extends Omit<\n  React.AnchorHTMLAttributes<HTMLAnchorElement>,\n  \"href\"\n> {\n  /** Link to dashboard */\n  to?: \"dashboard\";\n  /** Link to collection */\n  collection?: CollectionNames<TApp>;\n  /** Collection action */\n  action?: \"list\" | \"create\" | \"edit\";\n  /** Item ID for edit action */\n  id?: string;\n  /** Link to global */\n  global?: GlobalNames<TApp>;\n  /** Link to custom page by ID */\n  pageId?: string;\n  /** Custom href (overrides other props) */\n  href?: string;\n  /** Whether to use the navigate function instead of native anchor */\n  useNavigate?: boolean;\n  /** Children */\n  children: React.ReactNode;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Type-safe link component for admin navigation\n *\n * @example\n * ```tsx\n * // Link to dashboard\n * <AdminLink to=\"dashboard\">Dashboard</AdminLink>\n *\n * // Link to collection list\n * <AdminLink collection=\"posts\">View Posts</AdminLink>\n *\n * // Link to create new item\n * <AdminLink collection=\"posts\" action=\"create\">New Post</AdminLink>\n *\n * // Link to edit item\n * <AdminLink collection=\"posts\" action=\"edit\" id=\"123\">Edit Post</AdminLink>\n *\n * // Link to global\n * <AdminLink global=\"siteSettings\">Site Settings</AdminLink>\n *\n * // Link to custom page\n * <AdminLink pageId=\"analytics\">Analytics</AdminLink>\n * ```\n */\nexport function AdminLink<TApp extends Questpie<any>>({\n  to,\n  collection,\n  action,\n  id,\n  global,\n  pageId,\n  href: customHref,\n  useNavigate = false,\n  children,\n  onClick,\n  ...rest\n}: AdminLinkProps<TApp>) {\n  const { routes } = useAdminRoutes<TApp>();\n\n  // Determine the href\n  const href = React.useMemo(() => {\n    if (customHref) return customHref;\n\n    const targetProps: AdminLinkTargetProps<TApp> = {\n      to,\n      collection,\n      action,\n      id,\n      global,\n      pageId,\n    };\n\n    return getAdminLinkHref(routes, targetProps);\n  }, [customHref, to, collection, action, id, global, pageId, routes]);\n\n  // Handle click for navigate mode\n  const handleClick = React.useCallback(\n    (e: React.MouseEvent<HTMLAnchorElement>) => {\n      if (onClick) {\n        onClick(e);\n      }\n\n      if (useNavigate && !e.defaultPrevented) {\n        e.preventDefault();\n        // Navigate will be called via routes context\n        if (typeof window !== \"undefined\") {\n          window.history.pushState({}, \"\", href);\n          window.dispatchEvent(new PopStateEvent(\"popstate\"));\n        }\n      }\n    },\n    [onClick, useNavigate, href],\n  );\n\n  return (\n    <a href={href} onClick={handleClick} {...rest}>\n      {children}\n    </a>\n  );\n}\n\n// ============================================================================\n// Convenience Components\n// ============================================================================\n\n/**\n * Link to a collection list\n */\nexport function CollectionLink<TApp extends Questpie<any>>({\n  collection,\n  ...rest\n}: Omit<AdminLinkProps<TApp>, \"to\" | \"global\" | \"pageId\" | \"action\" | \"id\"> & {\n  collection: CollectionNames<TApp>;\n}) {\n  return <AdminLink<TApp> collection={collection} action=\"list\" {...rest} />;\n}\n\n/**\n * Link to create a new item in a collection\n */\nexport function CollectionCreateLink<TApp extends Questpie<any>>({\n  collection,\n  ...rest\n}: Omit<AdminLinkProps<TApp>, \"to\" | \"global\" | \"pageId\" | \"action\" | \"id\"> & {\n  collection: CollectionNames<TApp>;\n}) {\n  return <AdminLink<TApp> collection={collection} action=\"create\" {...rest} />;\n}\n\n/**\n * Link to edit an item in a collection\n */\nexport function CollectionEditLink<TApp extends Questpie<any>>({\n  collection,\n  id,\n  ...rest\n}: Omit<AdminLinkProps<TApp>, \"to\" | \"global\" | \"pageId\" | \"action\"> & {\n  collection: CollectionNames<TApp>;\n  id: string;\n}) {\n  return (\n    <AdminLink<TApp> collection={collection} action=\"edit\" id={id} {...rest} />\n  );\n}\n\n/**\n * Link to a global settings page\n */\nexport function GlobalLink<TApp extends Questpie<any>>({\n  global,\n  ...rest\n}: Omit<\n  AdminLinkProps<TApp>,\n  \"to\" | \"collection\" | \"pageId\" | \"action\" | \"id\"\n> & {\n  global: GlobalNames<TApp>;\n}) {\n  return <AdminLink<TApp> global={global} {...rest} />;\n}\n\n/**\n * Link to dashboard\n */\nexport function DashboardLink<TApp extends Questpie<any>>(\n  props: Omit<\n    AdminLinkProps<TApp>,\n    \"to\" | \"collection\" | \"global\" | \"pageId\" | \"action\" | \"id\"\n  >,\n) {\n  return <AdminLink<TApp> to=\"dashboard\" {...props} />;\n}\n\nexport default AdminLink;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwEA,SAAgB,UAAsC,EACpD,IACA,YACA,QACA,IACA,QACA,QACA,MAAM,YACN,cAAc,OACd,UACA,SACA,GAAG,QACoB;CACvB,MAAM,EAAE,WAAW,gBAAsB;CAGzC,MAAM,OAAOA,QAAM,cAAc;AAC/B,MAAI,WAAY,QAAO;AAWvB,SAAO,iBAAiB,QATwB;GAC9C;GACA;GACA;GACA;GACA;GACA;GACD,CAE2C;IAC3C;EAAC;EAAY;EAAI;EAAY;EAAQ;EAAI;EAAQ;EAAQ;EAAO,CAAC;AAqBpE,QACE,oBAAC;EAAQ;EAAM,SAnBGA,QAAM,aACvB,MAA2C;AAC1C,OAAI,QACF,SAAQ,EAAE;AAGZ,OAAI,eAAe,CAAC,EAAE,kBAAkB;AACtC,MAAE,gBAAgB;AAElB,QAAI,OAAO,WAAW,aAAa;AACjC,YAAO,QAAQ,UAAU,EAAE,EAAE,IAAI,KAAK;AACtC,YAAO,cAAc,IAAI,cAAc,WAAW,CAAC;;;KAIzD;GAAC;GAAS;GAAa;GAAK,CAC7B;EAGsC,GAAI;EACtC;GACC;;;;;AAmCR,SAAgB,mBAA+C,EAC7D,YACA,IACA,GAAG,QAIF;AACD,QACE,oBAAC;EAA4B;EAAY,QAAO;EAAW;EAAI,GAAI;GAAQ"}

package/dist/client/components/auth/auth-guard.d.mts

@@ -0,0 +1,51 @@
+import * as React$1 from "react";
+
+//#region src/client/components/auth/auth-guard.d.ts
+
+interface AuthGuardProps {
+  /**
+   * Content to render when authenticated
+   */
+  children: React$1.ReactNode;
+  /**
+   * Fallback to show while checking session
+   * @default <AuthLoading />
+   */
+  loadingFallback?: React$1.ReactNode;
+  /**
+   * Path to redirect to when not authenticated
+   * @default "{basePath}/login"
+   */
+  loginPath?: string;
+  /**
+   * Custom component to show when unauthorized (instead of redirect)
+   */
+  unauthorizedFallback?: React$1.ReactNode;
+  /**
+   * Required role for access
+   * @default "admin"
+   */
+  requiredRole?: string;
+  /**
+   * Disable the auth guard (render children directly)
+   * Useful for public pages within the admin layout
+   */
+  disabled?: boolean;
+}
+/**
+ * Auth Guard Component
+ *
+ * Protects content by checking authentication state and user role.
+ * Uses Better Auth's useSession() hook internally.
+ */
+declare function AuthGuard({
+  children,
+  loadingFallback,
+  loginPath,
+  unauthorizedFallback,
+  requiredRole,
+  disabled
+}: AuthGuardProps): React$1.ReactElement;
+//#endregion
+export { AuthGuard, AuthGuardProps };
+//# sourceMappingURL=auth-guard.d.mts.map

package/dist/client/components/auth/auth-guard.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-guard.d.mts","names":[],"sources":["../../../../src/client/components/auth/auth-guard.tsx"],"sourcesContent":[],"mappings":";;;;AAiFG,UArDc,cAAA,CAqDd;EAAiB;;;YAjDR,OAAA,CAAM;;;;;oBAME,OAAA,CAAM;;;;;;;;;yBAWD,OAAA,CAAM;;;;;;;;;;;;;;;;;;iBAyBf,SAAA;;;;;;;GAOb,iBAAiB,OAAA,CAAM"}

package/dist/client/components/auth/auth-guard.mjs

@@ -0,0 +1,60 @@
+import { selectBasePath, selectNavigate, useAdminStore } from "../../runtime/provider.mjs";
+import { useAuthClientSafe } from "../../hooks/use-auth.mjs";
+import { AuthLoading } from "./auth-loading.mjs";
+import * as React$1 from "react";
+import { Fragment, jsx } from "react/jsx-runtime";
+
+//#region src/client/components/auth/auth-guard.tsx
+/**
+* Auth Guard Component
+*
+* Wraps protected content and handles authentication state.
+* Shows loading state while checking session, redirects to login
+* if not authenticated or missing required role.
+*
+* @example
+* ```tsx
+* <AuthGuard loginPath="/admin/login" requiredRole="admin">
+*   <ProtectedContent />
+* </AuthGuard>
+* ```
+*/
+/**
+* Auth Guard Component
+*
+* Protects content by checking authentication state and user role.
+* Uses Better Auth's useSession() hook internally.
+*/
+function AuthGuard({ children, loadingFallback, loginPath, unauthorizedFallback, requiredRole = "admin", disabled = false }) {
+	const authClient = useAuthClientSafe();
+	const basePath = useAdminStore(selectBasePath);
+	const navigate = useAdminStore(selectNavigate);
+	const authEnabled = !disabled && authClient !== null;
+	const sessionResult = authClient?.useSession();
+	const session = authEnabled ? sessionResult?.data : null;
+	const isPending = authEnabled ? sessionResult?.isPending ?? false : false;
+	const resolvedLoginPath = loginPath ?? `${basePath}/login`;
+	const shouldRedirect = authEnabled && !isPending && (!session || session.user?.role !== requiredRole);
+	React$1.useEffect(() => {
+		if (shouldRedirect && !unauthorizedFallback) {
+			const currentPath = typeof window !== "undefined" ? window.location.pathname : "";
+			navigate(currentPath ? `${resolvedLoginPath}?redirect=${encodeURIComponent(currentPath)}` : resolvedLoginPath);
+		}
+	}, [
+		shouldRedirect,
+		unauthorizedFallback,
+		resolvedLoginPath,
+		navigate
+	]);
+	if (!authEnabled) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (isPending) return /* @__PURE__ */ jsx(Fragment, { children: loadingFallback ?? /* @__PURE__ */ jsx(AuthLoading, {}) });
+	if (!session || session.user?.role !== requiredRole) {
+		if (unauthorizedFallback) return /* @__PURE__ */ jsx(Fragment, { children: unauthorizedFallback });
+		return /* @__PURE__ */ jsx(Fragment, { children: loadingFallback ?? /* @__PURE__ */ jsx(AuthLoading, {}) });
+	}
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+
+//#endregion
+export { AuthGuard };
+//# sourceMappingURL=auth-guard.mjs.map

package/dist/client/components/auth/auth-guard.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-guard.mjs","names":[],"sources":["../../../../src/client/components/auth/auth-guard.tsx"],"sourcesContent":["/**\n * Auth Guard Component\n *\n * Wraps protected content and handles authentication state.\n * Shows loading state while checking session, redirects to login\n * if not authenticated or missing required role.\n *\n * @example\n * ```tsx\n * <AuthGuard loginPath=\"/admin/login\" requiredRole=\"admin\">\n *   <ProtectedContent />\n * </AuthGuard>\n * ```\n */\n\nimport * as React from \"react\";\nimport { useAuthClientSafe } from \"../../hooks/use-auth\";\nimport {\n  selectBasePath,\n  selectNavigate,\n  useAdminStore,\n} from \"../../runtime/provider\";\nimport { AuthLoading } from \"./auth-loading\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AuthGuardProps {\n  /**\n   * Content to render when authenticated\n   */\n  children: React.ReactNode;\n\n  /**\n   * Fallback to show while checking session\n   * @default <AuthLoading />\n   */\n  loadingFallback?: React.ReactNode;\n\n  /**\n   * Path to redirect to when not authenticated\n   * @default \"{basePath}/login\"\n   */\n  loginPath?: string;\n\n  /**\n   * Custom component to show when unauthorized (instead of redirect)\n   */\n  unauthorizedFallback?: React.ReactNode;\n\n  /**\n   * Required role for access\n   * @default \"admin\"\n   */\n  requiredRole?: string;\n\n  /**\n   * Disable the auth guard (render children directly)\n   * Useful for public pages within the admin layout\n   */\n  disabled?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Auth Guard Component\n *\n * Protects content by checking authentication state and user role.\n * Uses Better Auth's useSession() hook internally.\n */\nexport function AuthGuard({\n  children,\n  loadingFallback,\n  loginPath,\n  unauthorizedFallback,\n  requiredRole = \"admin\",\n  disabled = false,\n}: AuthGuardProps): React.ReactElement {\n  const authClient = useAuthClientSafe();\n  const basePath = useAdminStore(selectBasePath);\n  const navigate = useAdminStore(selectNavigate);\n\n  // Determine if auth is enabled (not disabled and has auth client)\n  const authEnabled = !disabled && authClient !== null;\n\n  // Use Better Auth's session hook - always call to follow Rules of Hooks\n  // When authClient is null, we use a stable mock that returns no session\n  const sessionResult = authClient?.useSession();\n  const session = authEnabled ? sessionResult?.data : null;\n  const isPending = authEnabled ? (sessionResult?.isPending ?? false) : false;\n\n  // Handle redirect after render (useEffect for side effects)\n  const resolvedLoginPath = loginPath ?? `${basePath}/login`;\n  const shouldRedirect =\n    authEnabled &&\n    !isPending &&\n    (!session || session.user?.role !== requiredRole);\n\n  React.useEffect(() => {\n    if (shouldRedirect && !unauthorizedFallback) {\n      // Store current path for redirect after login\n      const currentPath =\n        typeof window !== \"undefined\" ? window.location.pathname : \"\";\n      const redirectUrl = currentPath\n        ? `${resolvedLoginPath}?redirect=${encodeURIComponent(currentPath)}`\n        : resolvedLoginPath;\n      navigate(redirectUrl);\n    }\n  }, [shouldRedirect, unauthorizedFallback, resolvedLoginPath, navigate]);\n\n  // If disabled or no auth client, render children directly\n  if (!authEnabled) {\n    return <>{children}</>;\n  }\n\n  // Loading state\n  if (isPending) {\n    return <>{loadingFallback ?? <AuthLoading />}</>;\n  }\n\n  // Not authenticated or wrong role\n  if (!session || session.user?.role !== requiredRole) {\n    // Show unauthorized fallback if provided\n    if (unauthorizedFallback) {\n      return <>{unauthorizedFallback}</>;\n    }\n\n    // Otherwise show loading while redirect happens\n    return <>{loadingFallback ?? <AuthLoading />}</>;\n  }\n\n  // Authenticated with correct role - render children\n  return <>{children}</>;\n}\n\nexport default AuthGuard;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA0EA,SAAgB,UAAU,EACxB,UACA,iBACA,WACA,sBACA,eAAe,SACf,WAAW,SAC0B;CACrC,MAAM,aAAa,mBAAmB;CACtC,MAAM,WAAW,cAAc,eAAe;CAC9C,MAAM,WAAW,cAAc,eAAe;CAG9C,MAAM,cAAc,CAAC,YAAY,eAAe;CAIhD,MAAM,gBAAgB,YAAY,YAAY;CAC9C,MAAM,UAAU,cAAc,eAAe,OAAO;CACpD,MAAM,YAAY,cAAe,eAAe,aAAa,QAAS;CAGtE,MAAM,oBAAoB,aAAa,GAAG,SAAS;CACnD,MAAM,iBACJ,eACA,CAAC,cACA,CAAC,WAAW,QAAQ,MAAM,SAAS;AAEtC,SAAM,gBAAgB;AACpB,MAAI,kBAAkB,CAAC,sBAAsB;GAE3C,MAAM,cACJ,OAAO,WAAW,cAAc,OAAO,SAAS,WAAW;AAI7D,YAHoB,cAChB,GAAG,kBAAkB,YAAY,mBAAmB,YAAY,KAChE,kBACiB;;IAEtB;EAAC;EAAgB;EAAsB;EAAmB;EAAS,CAAC;AAGvE,KAAI,CAAC,YACH,QAAO,gCAAG,WAAY;AAIxB,KAAI,UACF,QAAO,0CAAG,mBAAmB,oBAAC,gBAAc,GAAI;AAIlD,KAAI,CAAC,WAAW,QAAQ,MAAM,SAAS,cAAc;AAEnD,MAAI,qBACF,QAAO,0CAAG,uBAAwB;AAIpC,SAAO,0CAAG,mBAAmB,oBAAC,gBAAc,GAAI;;AAIlD,QAAO,gCAAG,WAAY"}

package/dist/client/components/auth/auth-loading.d.mts

@@ -0,0 +1,36 @@
+import * as React$1 from "react";
+
+//#region src/client/components/auth/auth-loading.d.ts
+
+interface AuthLoadingProps {
+  /**
+   * Custom class name for the container
+   */
+  className?: string;
+  /**
+   * Loading message to display
+   * @default "Loading..."
+   */
+  message?: string;
+  /**
+   * Show the loading message
+   * @default true
+   */
+  showMessage?: boolean;
+}
+/**
+ * Full-page loading state for authentication
+ *
+ * @example
+ * ```tsx
+ * <AuthLoading message="Checking authentication..." />
+ * ```
+ */
+declare function AuthLoading({
+  className,
+  message,
+  showMessage
+}: AuthLoadingProps): React$1.ReactElement;
+//#endregion
+export { AuthLoading, AuthLoadingProps };
+//# sourceMappingURL=auth-loading.d.mts.map

package/dist/client/components/auth/auth-loading.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-loading.d.mts","names":[],"sources":["../../../../src/client/components/auth/auth-loading.tsx"],"sourcesContent":[],"mappings":";;;;AAiDE,UAlCe,gBAAA,CAkCf;EACC;;;;;;;;;;;;;;;;;;;;;;;iBAJa,WAAA;;;;GAIb,mBAAmB,OAAA,CAAM"}

package/dist/client/components/auth/auth-loading.mjs

@@ -0,0 +1,27 @@
+import { cn } from "../../lib/utils.mjs";
+import { Spinner } from "../ui/spinner.mjs";
+import "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/components/auth/auth-loading.tsx
+/**
+* Full-page loading state for authentication
+*
+* @example
+* ```tsx
+* <AuthLoading message="Checking authentication..." />
+* ```
+*/
+function AuthLoading({ className, message = "Loading...", showMessage = true }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-h-screen flex-col items-center justify-center gap-4", className),
+		children: [/* @__PURE__ */ jsx(Spinner, { className: "size-8 text-primary" }), showMessage && /* @__PURE__ */ jsx("p", {
+			className: "text-sm text-muted-foreground",
+			children: message
+		})]
+	});
+}
+
+//#endregion
+export { AuthLoading };
+//# sourceMappingURL=auth-loading.mjs.map

package/dist/client/components/auth/auth-loading.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"auth-loading.mjs","names":[],"sources":["../../../../src/client/components/auth/auth-loading.tsx"],"sourcesContent":["/**\n * Auth Loading Component\n *\n * Full-page loading state shown while checking authentication.\n * Used as the default loadingFallback in AuthGuard.\n */\n\nimport * as React from \"react\";\nimport { cn } from \"../../lib/utils\";\nimport { Spinner } from \"../ui/spinner\";\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface AuthLoadingProps {\n  /**\n   * Custom class name for the container\n   */\n  className?: string;\n\n  /**\n   * Loading message to display\n   * @default \"Loading...\"\n   */\n  message?: string;\n\n  /**\n   * Show the loading message\n   * @default true\n   */\n  showMessage?: boolean;\n}\n\n// ============================================================================\n// Component\n// ============================================================================\n\n/**\n * Full-page loading state for authentication\n *\n * @example\n * ```tsx\n * <AuthLoading message=\"Checking authentication...\" />\n * ```\n */\nexport function AuthLoading({\n  className,\n  message = \"Loading...\",\n  showMessage = true,\n}: AuthLoadingProps): React.ReactElement {\n  return (\n    <div\n      className={cn(\n        \"flex min-h-screen flex-col items-center justify-center gap-4\",\n        className,\n      )}\n    >\n      <Spinner className=\"size-8 text-primary\" />\n      {showMessage && (\n        <p className=\"text-sm text-muted-foreground\">{message}</p>\n      )}\n    </div>\n  );\n}\n\nexport default AuthLoading;\n"],"mappings":";;;;;;;;;;;;;;AA8CA,SAAgB,YAAY,EAC1B,WACA,UAAU,cACV,cAAc,QACyB;AACvC,QACE,qBAAC;EACC,WAAW,GACT,gEACA,UACD;aAED,oBAAC,WAAQ,WAAU,wBAAwB,EAC1C,eACC,oBAAC;GAAE,WAAU;aAAiC;IAAY;GAExD"}

package/dist/client/components/auth/index.d.mts

@@ -0,0 +1,2 @@
+import { AuthGuard, AuthGuardProps } from "./auth-guard.mjs";
+import { AuthLoading, AuthLoadingProps } from "./auth-loading.mjs";

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

@@ -0,0 +1,90 @@
+"use client";
+
+import { useBlockEditor, useBlockEditorActions } from "./block-editor-context.mjs";
+import { BlockIcon } from "./block-type-icon.mjs";
+import { findBlockById, findBlockPosition } from "./utils/tree-utils.mjs";
+import { BlockTree } from "./block-tree.mjs";
+import { Icon } from "@iconify/react";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { DndContext, DragOverlay, KeyboardSensor, PointerSensor, closestCenter, useSensor, useSensors } from "@dnd-kit/core";
+import { sortableKeyboardCoordinates } from "@dnd-kit/sortable";
+
+//#region src/client/components/blocks/block-canvas.tsx
+/**
+* Block Canvas
+*
+* Main canvas area for displaying and editing the block tree.
+* Supports drag-and-drop reordering and inline field editing.
+*/
+function BlockCanvas() {
+	const { state } = useBlockEditor();
+	const actions = useBlockEditorActions();
+	const [activeId, setActiveId] = React$1.useState(null);
+	const sensors = useSensors(useSensor(PointerSensor, { activationConstraint: { distance: 8 } }), useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates }));
+	const handleDragStart = (event) => {
+		setActiveId(event.active.id);
+	};
+	const handleDragEnd = (event) => {
+		const { active, over } = event;
+		setActiveId(null);
+		if (!over || active.id === over.id) return;
+		const draggedId = active.id;
+		const overId = over.id;
+		const activePosition = findBlockPosition(state.content._tree, draggedId);
+		const overPosition = findBlockPosition(state.content._tree, overId);
+		if (!activePosition || !overPosition) return;
+		if (activePosition.parentId !== overPosition.parentId) return;
+		actions.moveBlock(draggedId, activePosition.parentId, activePosition.index, overPosition.index);
+	};
+	const handleDragCancel = () => {
+		setActiveId(null);
+	};
+	const activeBlock = activeId ? findBlockById(state.content._tree, activeId) : null;
+	const activeBlockSchema = activeBlock ? state.blocks[activeBlock.type] : null;
+	return /* @__PURE__ */ jsxs(DndContext, {
+		sensors,
+		collisionDetection: closestCenter,
+		onDragStart: handleDragStart,
+		onDragEnd: handleDragEnd,
+		onDragCancel: handleDragCancel,
+		children: [/* @__PURE__ */ jsx(BlockTree, {
+			blocks: state.content._tree,
+			level: 0,
+			parentId: null
+		}), /* @__PURE__ */ jsx(DragOverlay, { children: activeBlock && /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center gap-2 rounded-md border bg-background p-2 shadow-lg",
+			children: [
+				/* @__PURE__ */ jsx(Icon, {
+					icon: "ph:dots-six-vertical",
+					className: "h-4 w-4 text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx(BlockIcon, {
+					icon: activeBlockSchema?.admin?.icon,
+					size: 16,
+					className: "text-muted-foreground"
+				}),
+				/* @__PURE__ */ jsx("span", {
+					className: "text-sm font-medium",
+					children: getBlockLabel(activeBlockSchema, activeBlock.type)
+				})
+			]
+		}) })]
+	});
+}
+function getBlockLabel(blockSchema, type) {
+	if (!blockSchema) return type.charAt(0).toUpperCase() + type.slice(1);
+	const label = blockSchema.admin?.label;
+	if (!label) return type.charAt(0).toUpperCase() + type.slice(1);
+	if (typeof label === "string") return label;
+	if (typeof label === "object" && label !== null) {
+		if ("en" in label && typeof label.en === "string") return label.en;
+		const first = Object.values(label)[0];
+		if (typeof first === "string") return first;
+	}
+	return type.charAt(0).toUpperCase() + type.slice(1);
+}
+
+//#endregion
+export { BlockCanvas };
+//# sourceMappingURL=block-canvas.mjs.map

package/dist/client/components/blocks/block-canvas.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"block-canvas.mjs","names":["React"],"sources":["../../../../src/client/components/blocks/block-canvas.tsx"],"sourcesContent":["/**\n * Block Canvas\n *\n * Main canvas area for displaying and editing the block tree.\n * Supports drag-and-drop reordering and inline field editing.\n */\n\n\"use client\";\n\nimport {\n\tclosestCenter,\n\tDndContext,\n\ttype DragEndEvent,\n\tDragOverlay,\n\ttype DragStartEvent,\n\tKeyboardSensor,\n\tPointerSensor,\n\tuseSensor,\n\tuseSensors,\n} from \"@dnd-kit/core\";\nimport { sortableKeyboardCoordinates } from \"@dnd-kit/sortable\";\nimport { Icon } from \"@iconify/react\";\nimport * as React from \"react\";\nimport {\n\tuseBlockEditor,\n\tuseBlockEditorActions,\n} from \"./block-editor-context.js\";\nimport { BlockTree } from \"./block-tree.js\";\nimport { BlockIcon } from \"./block-type-icon.js\";\nimport { findBlockById, findBlockPosition } from \"./utils/tree-utils.js\";\n\n// ============================================================================\n// Component\n// ============================================================================\n\nexport function BlockCanvas() {\n\tconst { state } = useBlockEditor();\n\tconst actions = useBlockEditorActions();\n\tconst [activeId, setActiveId] = React.useState<string | null>(null);\n\n\t// Configure drag sensors with keyboard support\n\tconst sensors = useSensors(\n\t\tuseSensor(PointerSensor, {\n\t\t\tactivationConstraint: {\n\t\t\t\tdistance: 8, // Require 8px of movement before starting drag\n\t\t\t},\n\t\t}),\n\t\tuseSensor(KeyboardSensor, {\n\t\t\tcoordinateGetter: sortableKeyboardCoordinates,\n\t\t}),\n\t);\n\n\t// Handle drag start - track active item for overlay\n\tconst handleDragStart = (event: DragStartEvent) => {\n\t\tsetActiveId(event.active.id as string);\n\t};\n\n\t// Handle drag end - reorder within same parent only\n\tconst handleDragEnd = (event: DragEndEvent) => {\n\t\tconst { active, over } = event;\n\t\tsetActiveId(null);\n\n\t\tif (!over || active.id === over.id) {\n\t\t\treturn;\n\t\t}\n\n\t\tconst draggedId = active.id as string;\n\t\tconst overId = over.id as string;\n\n\t\t// Find positions of both blocks\n\t\tconst activePosition = findBlockPosition(state.content._tree, draggedId);\n\t\tconst overPosition = findBlockPosition(state.content._tree, overId);\n\n\t\tif (!activePosition || !overPosition) {\n\t\t\treturn;\n\t\t}\n\n\t\t// Only allow reordering within the same parent\n\t\tif (activePosition.parentId !== overPosition.parentId) {\n\t\t\treturn;\n\t\t}\n\n\t\tactions.moveBlock(\n\t\t\tdraggedId,\n\t\t\tactivePosition.parentId,\n\t\t\tactivePosition.index,\n\t\t\toverPosition.index,\n\t\t);\n\t};\n\n\t// Handle drag cancel - reset state\n\tconst handleDragCancel = () => {\n\t\tsetActiveId(null);\n\t};\n\n\t// Get active block for overlay\n\tconst activeBlock = activeId\n\t\t? findBlockById(state.content._tree, activeId)\n\t\t: null;\n\tconst activeBlockSchema = activeBlock ? state.blocks[activeBlock.type] : null;\n\n\treturn (\n\t\t<DndContext\n\t\t\tsensors={sensors}\n\t\t\tcollisionDetection={closestCenter}\n\t\t\tonDragStart={handleDragStart}\n\t\t\tonDragEnd={handleDragEnd}\n\t\t\tonDragCancel={handleDragCancel}\n\t\t>\n\t\t\t<BlockTree blocks={state.content._tree} level={0} parentId={null} />\n\n\t\t\t{/* Drag overlay - shows what's being dragged */}\n\t\t\t<DragOverlay>\n\t\t\t\t{activeBlock && (\n\t\t\t\t\t<div className=\"flex items-center gap-2 rounded-md border bg-background p-2 shadow-lg\">\n\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\ticon=\"ph:dots-six-vertical\"\n\t\t\t\t\t\t\tclassName=\"h-4 w-4 text-muted-foreground\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<BlockIcon\n\t\t\t\t\t\t\ticon={activeBlockSchema?.admin?.icon}\n\t\t\t\t\t\t\tsize={16}\n\t\t\t\t\t\t\tclassName=\"text-muted-foreground\"\n\t\t\t\t\t\t/>\n\t\t\t\t\t\t<span className=\"text-sm font-medium\">\n\t\t\t\t\t\t\t{getBlockLabel(activeBlockSchema, activeBlock.type)}\n\t\t\t\t\t\t</span>\n\t\t\t\t\t</div>\n\t\t\t\t)}\n\t\t\t</DragOverlay>\n\t\t</DndContext>\n\t);\n}\n\n// ============================================================================\n// Helpers\n// ============================================================================\n\nimport type { BlockSchema } from \"#questpie/admin/server\";\n\nfunction getBlockLabel(\n\tblockSchema: BlockSchema | null | undefined,\n\ttype: string,\n): string {\n\tif (!blockSchema) {\n\t\treturn type.charAt(0).toUpperCase() + type.slice(1);\n\t}\n\n\tconst label = blockSchema.admin?.label;\n\n\tif (!label) {\n\t\treturn type.charAt(0).toUpperCase() + type.slice(1);\n\t}\n\n\tif (typeof label === \"string\") return label;\n\n\tif (typeof label === \"object\" && label !== null) {\n\t\tif (\"en\" in label && typeof label.en === \"string\") return label.en;\n\t\tconst first = Object.values(label)[0];\n\t\tif (typeof first === \"string\") return first;\n\t}\n\n\treturn type.charAt(0).toUpperCase() + type.slice(1);\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,cAAc;CAC7B,MAAM,EAAE,UAAU,gBAAgB;CAClC,MAAM,UAAU,uBAAuB;CACvC,MAAM,CAAC,UAAU,eAAeA,QAAM,SAAwB,KAAK;CAGnE,MAAM,UAAU,WACf,UAAU,eAAe,EACxB,sBAAsB,EACrB,UAAU,GACV,EACD,CAAC,EACF,UAAU,gBAAgB,EACzB,kBAAkB,6BAClB,CAAC,CACF;CAGD,MAAM,mBAAmB,UAA0B;AAClD,cAAY,MAAM,OAAO,GAAa;;CAIvC,MAAM,iBAAiB,UAAwB;EAC9C,MAAM,EAAE,QAAQ,SAAS;AACzB,cAAY,KAAK;AAEjB,MAAI,CAAC,QAAQ,OAAO,OAAO,KAAK,GAC/B;EAGD,MAAM,YAAY,OAAO;EACzB,MAAM,SAAS,KAAK;EAGpB,MAAM,iBAAiB,kBAAkB,MAAM,QAAQ,OAAO,UAAU;EACxE,MAAM,eAAe,kBAAkB,MAAM,QAAQ,OAAO,OAAO;AAEnE,MAAI,CAAC,kBAAkB,CAAC,aACvB;AAID,MAAI,eAAe,aAAa,aAAa,SAC5C;AAGD,UAAQ,UACP,WACA,eAAe,UACf,eAAe,OACf,aAAa,MACb;;CAIF,MAAM,yBAAyB;AAC9B,cAAY,KAAK;;CAIlB,MAAM,cAAc,WACjB,cAAc,MAAM,QAAQ,OAAO,SAAS,GAC5C;CACH,MAAM,oBAAoB,cAAc,MAAM,OAAO,YAAY,QAAQ;AAEzE,QACC,qBAAC;EACS;EACT,oBAAoB;EACpB,aAAa;EACb,WAAW;EACX,cAAc;aAEd,oBAAC;GAAU,QAAQ,MAAM,QAAQ;GAAO,OAAO;GAAG,UAAU;IAAQ,EAGpE,oBAAC,yBACC,eACA,qBAAC;GAAI,WAAU;;IACd,oBAAC;KACA,MAAK;KACL,WAAU;MACT;IACF,oBAAC;KACA,MAAM,mBAAmB,OAAO;KAChC,MAAM;KACN,WAAU;MACT;IACF,oBAAC;KAAK,WAAU;eACd,cAAc,mBAAmB,YAAY,KAAK;MAC7C;;IACF,GAEM;GACF;;AAUf,SAAS,cACR,aACA,MACS;AACT,KAAI,CAAC,YACJ,QAAO,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE;CAGpD,MAAM,QAAQ,YAAY,OAAO;AAEjC,KAAI,CAAC,MACJ,QAAO,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE;AAGpD,KAAI,OAAO,UAAU,SAAU,QAAO;AAEtC,KAAI,OAAO,UAAU,YAAY,UAAU,MAAM;AAChD,MAAI,QAAQ,SAAS,OAAO,MAAM,OAAO,SAAU,QAAO,MAAM;EAChE,MAAM,QAAQ,OAAO,OAAO,MAAM,CAAC;AACnC,MAAI,OAAO,UAAU,SAAU,QAAO;;AAGvC,QAAO,KAAK,OAAO,EAAE,CAAC,aAAa,GAAG,KAAK,MAAM,EAAE"}