@questpie/admin 3.0.9 → 3.2.0

package/dist/augmentation.d.mts

@@ -205,6 +205,45 @@ interface RelationFieldAdminMeta extends BaseAdminMeta {
   allowEdit?: boolean;
   preload?: boolean;
   maxItems?: number;
+  /**
+   * Restrict which related records can be picked. Static `Record` is used
+   * as-is; a function or `{ handler, deps?, debounce? }` config stays on
+   * the server (introspection emits a `ReactivePropPlaceholder`) and is
+   * resolved on demand via `/admin/reactive` against current form data.
+   *
+   * @example Static
+   * ```ts
+   * f.relation("users").admin({ filter: { role: "admin" } })
+   * ```
+   *
+   * @example Reactive — depends on form state
+   * ```ts
+   * f.relation("users").admin({
+   *   filter: ({ data }) => ({ role: "admin", team: data.team }),
+   * })
+   * ```
+   */
+  filter?: Record<string, unknown> | ((ctx: {
+    data: Record<string, unknown>;
+    sibling: Record<string, unknown>;
+    prev: {
+      data: Record<string, unknown>;
+      sibling: Record<string, unknown>;
+    };
+    ctx: unknown;
+  }) => Record<string, unknown> | Promise<Record<string, unknown>>) | {
+    handler: (ctx: {
+      data: Record<string, unknown>;
+      sibling: Record<string, unknown>;
+      prev: {
+        data: Record<string, unknown>;
+        sibling: Record<string, unknown>;
+      };
+      ctx: unknown;
+    }) => Record<string, unknown> | Promise<Record<string, unknown>>;
+    deps?: string[];
+    debounce?: number;
+  };
   /**
    * List table cell rendering for relation values.
    * - "chip": default text chip

package/dist/client/builder/page/page.d.mts

@@ -20,5 +20,33 @@ interface PageDefinition<TName extends string = string> {
   /** Sort order within the navigation group (default: 0). */
   readonly order?: number;
 }
+/**
+ * Options accepted by the `page()` factory (everything except `name`).
+ */
+type PageOptions = {
+  component: MaybeLazyComponent;
+  showInNav?: boolean;
+  path?: string;
+  label?: I18nText;
+  icon?: IconComponent;
+  group?: string;
+  order?: number;
+};
+/**
+ * Create a custom page as a plain frozen object.
+ *
+ * @example
+ * ```ts
+ * // Generated by `questpie generate`:
+ * export default page("login", {
+ *   component: async () => ({
+ *     default: (await import("./login-page.js")).LoginPage,
+ *   }),
+ *   showInNav: false,
+ *   path: "/login",
+ * });
+ * ```
+ */
+declare function page<TName extends string>(name: TName, config: PageOptions): PageDefinition<TName>;
 //#endregion
-export { PageDefinition };
+export { PageDefinition, page };

package/dist/client/builder/types/field-types.d.mts

@@ -501,22 +501,18 @@ interface FieldReactiveConfig<TData = any> {
   compute?: FieldReactiveHandlerConfig<TData, any> | SerializedReactiveDepsConfig;
 }
 /**
- * Field layout item with optional reactive config
+ * Field layout item — single-field reference variant.
+ *
+ * On the wire this matches the server's `FormFieldLayoutItem` after
+ * introspection has serialized any function-valued `props.<key>` to a
+ * `ReactivePropPlaceholder`. Kept as `Record<string, unknown>` here because
+ * the client only ever consumes the post-serialization shape.
  */
-interface FieldLayoutItemWithReactive<TData = any> extends FieldReactiveConfig<TData> {
+interface FieldLayoutItemRef<TData = any> extends FieldReactiveConfig<TData> {
   field: string;
   className?: string;
-  /**
-   * Extra props forwarded to the field component. Use for component-specific
-   * configuration that doesn't have a dedicated layout key (e.g. relation
-   * field's `filter`, custom render functions).
-   *
-   * @example
-   * ```ts
-   * { field: f.counselorId, props: { filter: () => ({ role: "admin" }) } }
-   * ```
-   */
-  props?: Record<string, any>;
+  /** Forwarded to the field component. See server `FormFieldLayoutItem.props`. */
+  props?: Record<string, unknown>;
 }
 /**
  * Field layout item - can be a simple field name, field with config, section, or tabs
@@ -533,7 +529,7 @@ interface FieldLayoutItemWithReactive<TData = any> extends FieldReactiveConfig<T
  * ]
  * ```
  */
-type FieldLayoutItem<TData = any> = string | FieldLayoutItemWithReactive<TData> | SectionLayout<TData> | TabsLayout<TData>;
+type FieldLayoutItem<TData = any> = string | FieldLayoutItemRef<TData> | SectionLayout<TData> | TabsLayout<TData>;
 /**
  * Form sidebar configuration
  * Uses `fields` array (same structure as main form)

package/dist/client/components/fields/relation-picker.mjs

@@ -89,7 +89,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 		try {
 			const options = { limit: 50 };
 			if (search) options.search = search;
-			if (filter) options.where = filter({});
+			if (filter) options.where = filter;
 			const response_0 = await client.collections[targetCollection].find(options);
 			let docs;
 			if (response_0) if (response_0.docs) docs = response_0.docs;
@@ -244,7 +244,7 @@ function RelationPicker({ name, value, onChange, targetCollection, label, filter
 							{
 								limit: 50,
 								search: search_0,
-								where: filter ? filter({}) : void 0,
+								where: filter ?? void 0,
 								selectedIds
 							}
 						]),

package/dist/client/components/fields/relation-select.mjs

@@ -49,7 +49,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 				locale
 			};
 			if (search) options.search = search;
-			if (filter) options.where = filter({});
+			if (filter) options.where = filter;
 			const response = await client.collections[targetCollection].find(options);
 			let docs;
 			if (response) if (response.docs) docs = response.docs;
@@ -168,7 +168,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 							limit: 50,
 							locale,
 							search: search_0,
-							where: filter ? filter({}) : void 0
+							where: filter ?? void 0
 						}
 					]),
 					prefetchOnMount: true,
@@ -222,7 +222,7 @@ function RelationSelect({ name, value, onChange, targetCollection, label, filter
 						limit: 50,
 						locale,
 						search: search_1,
-						where: filter ? filter({}) : void 0
+						where: filter ?? void 0
 					}
 				]),
 				prefetchOnMount: true,

package/dist/client/hooks/use-audit-history.mjs

@@ -1,21 +1,14 @@
-import { selectClient, useAdminStore } from "../runtime/provider.mjs";
+import { selectBasePath, useAdminStore } from "../runtime/provider.mjs";
 import { c } from "react/compiler-runtime";
 import { useQuery } from "@tanstack/react-query";
 
 //#region src/client/hooks/use-audit-history.ts
 function useAuditFetcher(path) {
-	const $ = c(5);
-	const client = useAdminStore(selectClient);
+	const $ = c(3);
+	const basePath = useAdminStore(selectBasePath);
 	let t0;
-	if ($[0] !== client) {
-		t0 = client.getBasePath?.() ?? "";
-		$[0] = client;
-		$[1] = t0;
-	} else t0 = $[1];
-	const basePath = t0;
-	let t1;
-	if ($[2] !== basePath || $[3] !== path) {
-		t1 = async (signal) => {
+	if ($[0] !== basePath || $[1] !== path) {
+		t0 = async (signal) => {
 			const response = await fetch(`${basePath}${path}`, {
 				credentials: "include",
 				headers: { Accept: "application/json" },
@@ -25,11 +18,11 @@ function useAuditFetcher(path) {
 			const data = await response.json();
 			return Array.isArray(data) ? data : data?.docs ?? data ?? [];
 		};
-		$[2] = basePath;
-		$[3] = path;
-		$[4] = t1;
-	} else t1 = $[4];
-	return t1;
+		$[0] = basePath;
+		$[1] = path;
+		$[2] = t0;
+	} else t0 = $[2];
+	return t0;
 }
 function useGlobalAuditHistory(globalName, options, queryOptions) {
 	const $ = c(14);

package/dist/client/hooks/use-reactive-prop.mjs

@@ -0,0 +1,308 @@
+import { useAdminStore } from "../runtime/provider.mjs";
+import { c } from "react/compiler-runtime";
+import * as React from "react";
+import { useQuery } from "@tanstack/react-query";
+import { useFormContext, useWatch } from "react-hook-form";
+import { isReactivePropPlaceholder } from "questpie/client";
+
+//#region src/client/hooks/use-reactive-prop.ts
+/**
+* useReactiveProps — resolve `extraProps` placeholders against the live form.
+*
+* Field components (relation-select, relation-picker, …) accept user-supplied
+* config via the layout escape hatch:
+*
+*     v.collectionForm({
+*       fields: [
+*         { field: f.author, props: { filter: ({ data }) => ({ team: data.team }) } },
+*       ],
+*     })
+*
+* Functions never cross the wire — introspection serializes them to a
+* `ReactivePropPlaceholder` carrying just the dependency list. This hook is
+* called by `FieldRenderer` *before* it spreads `extraProps` into the field
+* component's props:
+*
+*  - Static JSON / `undefined` → returned synchronously, **no network**.
+*  - Placeholder shape `{ "~reactive": "prop", watch, debounce? }` → resolved
+*    by calling `/admin/reactive` (`type: "prop"`) with current `formData`.
+*
+* All placeholders inside a single `extraProps` record share **one** TanStack
+* Query — both for cache locality and to collapse N round-trips into one.
+* The query refetches only when any of the union of `watch` deps changes,
+* debounced by `max(placeholder.debounce)` (or the caller-supplied override,
+* default 100ms).
+*/
+/**
+* Stable hash of the watched dep values. Replacer keeps `undefined` slots so
+* `[1, undefined, 2]` ≠ `[1, 2]`.
+*/
+function hashDeps(values) {
+	return JSON.stringify(values, (_, v) => v === void 0 ? "__undef__" : v);
+}
+function useDebounced(value, delay) {
+	const $ = c(4);
+	const [debounced, setDebounced] = React.useState(value);
+	let t0;
+	let t1;
+	if ($[0] !== delay || $[1] !== value) {
+		t0 = () => {
+			if (delay <= 0) {
+				setDebounced(value);
+				return;
+			}
+			const timer = setTimeout(() => setDebounced(value), delay);
+			return () => clearTimeout(timer);
+		};
+		t1 = [value, delay];
+		$[0] = delay;
+		$[1] = value;
+		$[2] = t0;
+		$[3] = t1;
+	} else {
+		t0 = $[2];
+		t1 = $[3];
+	}
+	React.useEffect(t0, t1);
+	return debounced;
+}
+const EMPTY_PROPS = Object.freeze({});
+function useReactiveProps(t0) {
+	const $ = c(52);
+	const { entity, entityType: t1, field, props, enabled: t2, debounce: debounceOverride } = t0;
+	const entityType = t1 === void 0 ? "collection" : t1;
+	const enabled = t2 === void 0 ? true : t2;
+	let dbMax;
+	let dynamicOut;
+	let staticOut;
+	let watchSet;
+	if ($[0] !== props) {
+		staticOut = {};
+		dynamicOut = [];
+		watchSet = /* @__PURE__ */ new Set();
+		dbMax = 0;
+		if (props) for (const [key, value] of Object.entries(props)) if (isReactivePropPlaceholder(value)) {
+			dynamicOut.push({
+				key,
+				placeholder: value
+			});
+			for (const dep of value.watch) watchSet.add(dep);
+			if (typeof value.debounce === "number" && value.debounce > dbMax) dbMax = value.debounce;
+		} else staticOut[key] = value;
+		$[0] = props;
+		$[1] = dbMax;
+		$[2] = dynamicOut;
+		$[3] = staticOut;
+		$[4] = watchSet;
+	} else {
+		dbMax = $[1];
+		dynamicOut = $[2];
+		staticOut = $[3];
+		watchSet = $[4];
+	}
+	const t3 = dynamicOut.length === 0 ? props ?? EMPTY_PROPS : staticOut;
+	let t4;
+	if ($[5] !== watchSet) {
+		t4 = [...watchSet];
+		$[5] = watchSet;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== dbMax || $[8] !== dynamicOut || $[9] !== t3 || $[10] !== t4) {
+		t5 = {
+			staticProps: t3,
+			placeholders: dynamicOut,
+			watchUnion: t4,
+			debounceMax: dbMax
+		};
+		$[7] = dbMax;
+		$[8] = dynamicOut;
+		$[9] = t3;
+		$[10] = t4;
+		$[11] = t5;
+	} else t5 = $[11];
+	const { staticProps, placeholders, watchUnion, debounceMax } = t5;
+	const debounce = debounceOverride ?? (debounceMax > 0 ? debounceMax : 100);
+	const formContext = useFormContext();
+	const t6 = formContext?.control;
+	const t7 = watchUnion;
+	const t8 = placeholders.length === 0 || !formContext || watchUnion.length === 0;
+	let t9;
+	if ($[12] !== t6 || $[13] !== t7 || $[14] !== t8) {
+		t9 = {
+			control: t6,
+			name: t7,
+			disabled: t8
+		};
+		$[12] = t6;
+		$[13] = t7;
+		$[14] = t8;
+		$[15] = t9;
+	} else t9 = $[15];
+	const watchedRaw = useWatch(t9);
+	let t10;
+	bb0: {
+		if (placeholders.length === 0) {
+			let t11$2;
+			if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+				t11$2 = [];
+				$[16] = t11$2;
+			} else t11$2 = $[16];
+			t10 = t11$2;
+			break bb0;
+		}
+		if (watchUnion.length === 0) {
+			let t11$2;
+			if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
+				t11$2 = [];
+				$[17] = t11$2;
+			} else t11$2 = $[17];
+			t10 = t11$2;
+			break bb0;
+		}
+		let t11$1;
+		if ($[18] !== watchedRaw) {
+			t11$1 = Array.isArray(watchedRaw) ? watchedRaw : [watchedRaw];
+			$[18] = watchedRaw;
+			$[19] = t11$1;
+		} else t11$1 = $[19];
+		t10 = t11$1;
+	}
+	const debouncedDeps = useDebounced(t10, debounce);
+	let t11;
+	if ($[20] !== debouncedDeps) {
+		t11 = hashDeps(debouncedDeps);
+		$[20] = debouncedDeps;
+		$[21] = t11;
+	} else t11 = $[21];
+	const depHash = t11;
+	let t12;
+	if ($[22] !== placeholders) {
+		t12 = placeholders.map(_temp).sort();
+		$[22] = placeholders;
+		$[23] = t12;
+	} else t12 = $[23];
+	const placeholderKeys = t12;
+	const client = useAdminStore(_temp2);
+	const queryEnabled = enabled && placeholders.length > 0 && !!client;
+	let t13;
+	if ($[24] !== depHash || $[25] !== entity || $[26] !== entityType || $[27] !== field || $[28] !== placeholderKeys) {
+		t13 = [
+			"questpie",
+			"reactive-props",
+			entityType,
+			entity,
+			field,
+			placeholderKeys,
+			depHash
+		];
+		$[24] = depHash;
+		$[25] = entity;
+		$[26] = entityType;
+		$[27] = field;
+		$[28] = placeholderKeys;
+		$[29] = t13;
+	} else t13 = $[29];
+	let t14;
+	if ($[30] !== client || $[31] !== entity || $[32] !== entityType || $[33] !== field || $[34] !== formContext || $[35] !== placeholders) {
+		t14 = async () => {
+			if (!client || placeholders.length === 0) return {};
+			const formData = formContext?.getValues?.() ?? {};
+			const response = await client.routes.batchReactive({
+				collection: entity,
+				type: entityType,
+				formData,
+				requests: placeholders.map((t15$1) => {
+					const { key: key_0 } = t15$1;
+					return {
+						field,
+						type: "prop",
+						propPath: key_0
+					};
+				})
+			});
+			const out = {};
+			for (const r of response.results) {
+				if (r.field !== field || r.type !== "prop" || !r.propPath) continue;
+				if (r.error) throw new Error(`[${r.propPath}] ${r.error}`);
+				out[r.propPath] = r.value;
+			}
+			return out;
+		};
+		$[30] = client;
+		$[31] = entity;
+		$[32] = entityType;
+		$[33] = field;
+		$[34] = formContext;
+		$[35] = placeholders;
+		$[36] = t14;
+	} else t14 = $[36];
+	let t15;
+	if ($[37] !== queryEnabled || $[38] !== t13 || $[39] !== t14) {
+		t15 = {
+			queryKey: t13,
+			queryFn: t14,
+			enabled: queryEnabled,
+			placeholderData: _temp3,
+			staleTime: 3e4
+		};
+		$[37] = queryEnabled;
+		$[38] = t13;
+		$[39] = t14;
+		$[40] = t15;
+	} else t15 = $[40];
+	const query = useQuery(t15);
+	let t16;
+	bb1: {
+		if (placeholders.length === 0) {
+			t16 = staticProps;
+			break bb1;
+		}
+		let out_0;
+		if ($[41] !== placeholders || $[42] !== query.data || $[43] !== staticProps) {
+			out_0 = { ...staticProps };
+			let t17$1;
+			if ($[45] !== query.data) {
+				t17$1 = query.data ?? {};
+				$[45] = query.data;
+				$[46] = t17$1;
+			} else t17$1 = $[46];
+			const resolved = t17$1;
+			for (const { key: key_1 } of placeholders) out_0[key_1] = resolved[key_1];
+			$[41] = placeholders;
+			$[42] = query.data;
+			$[43] = staticProps;
+			$[44] = out_0;
+		} else out_0 = $[44];
+		t16 = out_0;
+	}
+	const merged = t16;
+	const t17 = query.error ?? null;
+	let t18;
+	if ($[47] !== merged || $[48] !== query.isFetching || $[49] !== query.isLoading || $[50] !== t17) {
+		t18 = {
+			props: merged,
+			isLoading: query.isLoading,
+			isFetching: query.isFetching,
+			error: t17
+		};
+		$[47] = merged;
+		$[48] = query.isFetching;
+		$[49] = query.isLoading;
+		$[50] = t17;
+		$[51] = t18;
+	} else t18 = $[51];
+	return t18;
+}
+function _temp3(prev) {
+	return prev;
+}
+function _temp2(s) {
+	return s.client;
+}
+function _temp(p) {
+	return p.key;
+}
+
+//#endregion
+export { useReactiveProps };

package/dist/client/hooks/use-transition-stage.mjs

@@ -1,4 +1,4 @@
-import { selectClient, useAdminStore } from "../runtime/provider.mjs";
+import { selectBasePath, useAdminStore } from "../runtime/provider.mjs";
 import { c } from "react/compiler-runtime";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 
@@ -9,8 +9,8 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 * Provides a mutation for transitioning collection/global records between
 * workflow stages. Supports optional scheduled transitions via `scheduledAt`.
 *
-* Uses direct fetch (same pattern as audit fetcher) because the generated
-* client SDK does not yet expose the `scheduledAt` parameter.
+* Uses direct fetch because the hook accepts runtime collection/global names
+* from admin metadata, while the generated client SDK is keyed by app types.
 *
 * @example
 * ```tsx
@@ -40,22 +40,15 @@ import { useMutation, useQueryClient } from "@tanstack/react-query";
 * @param options - Optional configuration (mode, mutationOptions)
 */
 function useTransitionStage(resourceName, options) {
-	const $ = c(14);
+	const $ = c(12);
 	const mode = options?.mode ?? "collection";
-	const client = useAdminStore(selectClient);
+	const basePath = useAdminStore(selectBasePath);
 	const queryClient = useQueryClient();
 	let t0;
-	if ($[0] !== client) {
-		t0 = client.getBasePath?.() ?? "";
-		$[0] = client;
-		$[1] = t0;
-	} else t0 = $[1];
-	const basePath = t0;
-	let t1;
-	if ($[2] !== basePath || $[3] !== mode || $[4] !== resourceName) {
-		t1 = async (params) => {
+	if ($[0] !== basePath || $[1] !== mode || $[2] !== resourceName) {
+		t0 = async (params) => {
 			const body = { stage: params.stage };
-			if (params.scheduledAt) body.scheduledAt = params.scheduledAt instanceof Date ? params.scheduledAt.toISOString() : params.scheduledAt;
+			if (params.scheduledAt !== void 0) body.scheduledAt = params.scheduledAt instanceof Date ? params.scheduledAt.toISOString() : params.scheduledAt;
 			const url = mode === "global" ? `${basePath}/globals/${resourceName}/transition` : `${basePath}/${resourceName}/${params.id}/transition`;
 			const response = await fetch(url, {
 				method: "POST",
@@ -72,14 +65,14 @@ function useTransitionStage(resourceName, options) {
 			}
 			return response.json();
 		};
-		$[2] = basePath;
-		$[3] = mode;
-		$[4] = resourceName;
-		$[5] = t1;
-	} else t1 = $[5];
-	let t2;
-	if ($[6] !== mode || $[7] !== queryClient || $[8] !== resourceName) {
-		t2 = () => {
+		$[0] = basePath;
+		$[1] = mode;
+		$[2] = resourceName;
+		$[3] = t0;
+	} else t0 = $[3];
+	let t1;
+	if ($[4] !== mode || $[5] !== queryClient || $[6] !== resourceName) {
+		t1 = () => {
 			if (mode === "collection") queryClient.invalidateQueries({ queryKey: ["questpie", "collections"] });
 			else queryClient.invalidateQueries({ queryKey: ["questpie", "globals"] });
 			queryClient.invalidateQueries({ queryKey: [
@@ -89,25 +82,25 @@ function useTransitionStage(resourceName, options) {
 				resourceName
 			] });
 		};
-		$[6] = mode;
-		$[7] = queryClient;
-		$[8] = resourceName;
-		$[9] = t2;
-	} else t2 = $[9];
-	const t3 = options?.mutationOptions;
-	let t4;
-	if ($[10] !== t1 || $[11] !== t2 || $[12] !== t3) {
-		t4 = {
-			mutationFn: t1,
-			onSuccess: t2,
-			...t3
+		$[4] = mode;
+		$[5] = queryClient;
+		$[6] = resourceName;
+		$[7] = t1;
+	} else t1 = $[7];
+	const t2 = options?.mutationOptions;
+	let t3;
+	if ($[8] !== t0 || $[9] !== t1 || $[10] !== t2) {
+		t3 = {
+			mutationFn: t0,
+			onSuccess: t1,
+			...t2
 		};
-		$[10] = t1;
-		$[11] = t2;
-		$[12] = t3;
-		$[13] = t4;
-	} else t4 = $[13];
-	return useMutation(t4);
+		$[8] = t0;
+		$[9] = t1;
+		$[10] = t2;
+		$[11] = t3;
+	} else t3 = $[11];
+	return useMutation(t3);
 }
 function _temp() {
 	return {};

package/dist/client/preview/block-scope-context.d.mts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import * as react_jsx_runtime24 from "react/jsx-runtime";
+import * as react_jsx_runtime22 from "react/jsx-runtime";
 
 //#region src/client/preview/block-scope-context.d.ts
 
@@ -35,7 +35,7 @@ declare function BlockScopeProvider({
   blockId,
   basePath,
   children
-}: BlockScopeProviderProps): react_jsx_runtime24.JSX.Element;
+}: BlockScopeProviderProps): react_jsx_runtime22.JSX.Element;
 /**
  * Get current block scope context.
  *

package/dist/client/preview/preview-banner.d.mts

@@ -1,4 +1,4 @@
-import * as react_jsx_runtime20 from "react/jsx-runtime";
+import * as react_jsx_runtime21 from "react/jsx-runtime";
 
 //#region src/client/preview/preview-banner.d.ts
 
@@ -40,6 +40,6 @@ declare function PreviewBanner({
   isPreviewMode,
   className,
   exitPreviewUrl
-}: PreviewBannerProps): react_jsx_runtime20.JSX.Element | null;
+}: PreviewBannerProps): react_jsx_runtime21.JSX.Element | null;
 //#endregion
 export { PreviewBanner, PreviewBannerProps };