@questpie/admin 1.1.0 → 2.0.0

package/dist/client/runtime/translations-provider.mjs

@@ -0,0 +1,181 @@
+import { I18nProvider } from "../i18n/hooks.mjs";
+import { createSimpleI18n } from "../i18n/simple.mjs";
+import { selectClient, useAdminStore } from "./provider.mjs";
+import { DEFAULT_LOCALE } from "questpie/shared";
+import { useSuspenseQuery } from "@tanstack/react-query";
+import { Suspense, useCallback, useMemo, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/runtime/translations-provider.tsx
+/**
+* Translations Provider
+*
+* Fetches admin UI translations from the server and provides i18n context.
+* This enables single source of truth for all translations on the server.
+*
+* @example
+* ```tsx
+* // In AdminProvider
+* <TranslationsProvider initialLocale="en">
+*   {children}
+* </TranslationsProvider>
+* ```
+*/
+/** Cookie for UI locale (admin interface language) */
+const UI_LOCALE_COOKIE = "questpie_ui_locale";
+/** Cookie max age (1 year) */
+const LOCALE_COOKIE_MAX_AGE = 3600 * 24 * 365;
+function getCookie(name) {
+	if (typeof document === "undefined") return null;
+	const match = document.cookie.match(/* @__PURE__ */ new RegExp(`${name}=([^;]+)`));
+	return match ? match[1] : null;
+}
+function setCookie(name, value) {
+	if (typeof document === "undefined") return;
+	document.cookie = `${name}=${value}; path=/; max-age=${LOCALE_COOKIE_MAX_AGE}; SameSite=Lax`;
+}
+function getUiLocaleFromCookie() {
+	return getCookie(UI_LOCALE_COOKIE);
+}
+function setUiLocaleCookie(locale) {
+	setCookie(UI_LOCALE_COOKIE, locale);
+}
+/**
+* Query options for fetching admin UI translations.
+* Can be used with TanStack Query's prefetching in loaders.
+*
+* @example
+* ```ts
+* // In TanStack Start loader
+* export const Route = createFileRoute("/admin")({
+*   loader: async ({ context }) => {
+*     await context.queryClient.ensureQueryData(
+*       getAdminTranslationsQueryOptions(context.client, "en")
+*     );
+*   },
+* });
+* ```
+*/
+function getAdminTranslationsQueryOptions(client, locale) {
+	return {
+		queryKey: [
+			"cms",
+			"adminTranslations",
+			locale
+		],
+		queryFn: async () => {
+			try {
+				return await client.rpc.getAdminTranslations({ locale });
+			} catch {
+				return {
+					locale: DEFAULT_LOCALE,
+					messages: {},
+					fallbackLocale: DEFAULT_LOCALE
+				};
+			}
+		},
+		staleTime: Number.POSITIVE_INFINITY,
+		gcTime: Number.POSITIVE_INFINITY
+	};
+}
+/**
+* Query options for fetching available admin UI locales.
+*
+* @example
+* ```ts
+* // In TanStack Start loader
+* export const Route = createFileRoute("/admin")({
+*   loader: async ({ context }) => {
+*     await context.queryClient.ensureQueryData(
+*       getAdminLocalesQueryOptions(context.client)
+*     );
+*   },
+* });
+* ```
+*/
+function getAdminLocalesQueryOptions(client) {
+	return {
+		queryKey: ["cms", "adminLocales"],
+		queryFn: async () => {
+			try {
+				return await client.rpc.getAdminLocales({});
+			} catch {
+				return {
+					locales: [DEFAULT_LOCALE],
+					defaultLocale: DEFAULT_LOCALE
+				};
+			}
+		},
+		staleTime: Number.POSITIVE_INFINITY,
+		gcTime: Number.POSITIVE_INFINITY
+	};
+}
+function TranslationsInner({ initialLocale, children }) {
+	const client = useAdminStore(selectClient);
+	const [locale, setLocaleState] = useState(initialLocale);
+	const { data: localesData } = useSuspenseQuery(getAdminLocalesQueryOptions(client));
+	const { data: translationsData } = useSuspenseQuery(getAdminTranslationsQueryOptions(client, locale));
+	const setLocale = useCallback((newLocale) => {
+		setLocaleState(newLocale);
+		setUiLocaleCookie(newLocale);
+	}, []);
+	return /* @__PURE__ */ jsx(I18nProvider, {
+		adapter: useMemo(() => {
+			return createSimpleI18n({
+				locale: translationsData.locale,
+				locales: localesData.locales,
+				messages: { [translationsData.locale]: translationsData.messages },
+				fallbackLocale: translationsData.fallbackLocale,
+				onLocaleChange: setLocale
+			});
+		}, [
+			translationsData,
+			localesData.locales,
+			setLocale
+		]),
+		children
+	});
+}
+function LoadingFallback() {
+	return /* @__PURE__ */ jsx("div", {
+		className: "qp-flex qp-h-screen qp-w-screen qp-items-center qp-justify-center qp-bg-background",
+		children: /* @__PURE__ */ jsxs("div", {
+			className: "qp-flex qp-flex-col qp-items-center qp-gap-4",
+			children: [/* @__PURE__ */ jsx("div", { className: "qp-h-8 qp-w-8 qp-animate-spin qp-rounded-full qp-border-4 qp-border-primary qp-border-t-transparent" }), /* @__PURE__ */ jsx("span", {
+				className: "qp-text-sm qp-text-muted-foreground",
+				children: "Loading..."
+			})]
+		})
+	});
+}
+/**
+* Translations Provider
+*
+* Fetches admin UI translations from the server and provides i18n context.
+* Uses Suspense for loading state.
+*
+* @example
+* ```tsx
+* <AdminStoreContext.Provider value={store}>
+*   <TranslationsProvider initialLocale="en">
+*     <ContentLocalesProvider>
+*       {children}
+*     </ContentLocalesProvider>
+*   </TranslationsProvider>
+* </AdminStoreContext.Provider>
+* ```
+*/
+function TranslationsProvider({ initialLocale, children, fallback }) {
+	const resolvedLocale = initialLocale ?? getUiLocaleFromCookie() ?? DEFAULT_LOCALE;
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: fallback ?? /* @__PURE__ */ jsx(LoadingFallback, {}),
+		children: /* @__PURE__ */ jsx(TranslationsInner, {
+			initialLocale: resolvedLocale,
+			children
+		})
+	});
+}
+
+//#endregion
+export { TranslationsProvider, getAdminLocalesQueryOptions, getAdminTranslationsQueryOptions, getUiLocaleFromCookie, setUiLocaleCookie };
+//# sourceMappingURL=translations-provider.mjs.map

package/dist/client/runtime/translations-provider.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"translations-provider.mjs","names":[],"sources":["../../../src/client/runtime/translations-provider.tsx"],"sourcesContent":["/**\n * Translations Provider\n *\n * Fetches admin UI translations from the server and provides i18n context.\n * This enables single source of truth for all translations on the server.\n *\n * @example\n * ```tsx\n * // In AdminProvider\n * <TranslationsProvider initialLocale=\"en\">\n *   {children}\n * </TranslationsProvider>\n * ```\n */\n\nimport { useQuery, useSuspenseQuery } from \"@tanstack/react-query\";\nimport { DEFAULT_LOCALE } from \"questpie/shared\";\nimport {\n  type ReactElement,\n  type ReactNode,\n  Suspense,\n  useCallback,\n  useMemo,\n  useState,\n} from \"react\";\nimport { I18nProvider } from \"../i18n/hooks\";\nimport { createSimpleI18n, type SimpleMessages } from \"../i18n/simple\";\nimport { selectClient, useAdminStore } from \"./provider\";\n\n// ============================================================================\n// Constants\n// ============================================================================\n\n/** Cookie for UI locale (admin interface language) */\nconst UI_LOCALE_COOKIE = \"questpie_ui_locale\";\n/** Cookie max age (1 year) */\nconst LOCALE_COOKIE_MAX_AGE = 60 * 60 * 24 * 365;\n\n// ============================================================================\n// Cookie Helpers\n// ============================================================================\n\nfunction getCookie(name: string): string | null {\n  if (typeof document === \"undefined\") return null;\n  const match = document.cookie.match(new RegExp(`${name}=([^;]+)`));\n  return match ? match[1] : null;\n}\n\nfunction setCookie(name: string, value: string): void {\n  if (typeof document === \"undefined\") return;\n  // biome-ignore lint/suspicious/noDocumentCookie: this string is ok\n  document.cookie = `${name}=${value}; path=/; max-age=${LOCALE_COOKIE_MAX_AGE}; SameSite=Lax`;\n}\n\nexport function getUiLocaleFromCookie(): string | null {\n  return getCookie(UI_LOCALE_COOKIE);\n}\n\nexport function setUiLocaleCookie(locale: string): void {\n  setCookie(UI_LOCALE_COOKIE, locale);\n}\n\n// ============================================================================\n// Types\n// ============================================================================\n\nexport interface TranslationsProviderProps {\n  /** Initial UI locale */\n  initialLocale?: string;\n  /** Children to render */\n  children: ReactNode;\n  /** Fallback while loading translations */\n  fallback?: ReactNode;\n}\n\n// ============================================================================\n// Query Options\n// ============================================================================\n\n/**\n * Query options for fetching admin UI translations.\n * Can be used with TanStack Query's prefetching in loaders.\n *\n * @example\n * ```ts\n * // In TanStack Start loader\n * export const Route = createFileRoute(\"/admin\")({\n *   loader: async ({ context }) => {\n *     await context.queryClient.ensureQueryData(\n *       getAdminTranslationsQueryOptions(context.client, \"en\")\n *     );\n *   },\n * });\n * ```\n */\nexport function getAdminTranslationsQueryOptions(client: any, locale: string) {\n  return {\n    queryKey: [\"cms\", \"adminTranslations\", locale] as const,\n    queryFn: async () => {\n      try {\n        const result = await client.rpc.getAdminTranslations({ locale });\n        return result as {\n          locale: string;\n          messages: SimpleMessages;\n          fallbackLocale: string;\n        };\n      } catch {\n        // Fallback if function doesn't exist (older server)\n        return {\n          locale: DEFAULT_LOCALE,\n          messages: {} as SimpleMessages,\n          fallbackLocale: DEFAULT_LOCALE,\n        };\n      }\n    },\n    staleTime: Number.POSITIVE_INFINITY, // Cache forever\n    gcTime: Number.POSITIVE_INFINITY,\n  };\n}\n\n/**\n * Query options for fetching available admin UI locales.\n *\n * @example\n * ```ts\n * // In TanStack Start loader\n * export const Route = createFileRoute(\"/admin\")({\n *   loader: async ({ context }) => {\n *     await context.queryClient.ensureQueryData(\n *       getAdminLocalesQueryOptions(context.client)\n *     );\n *   },\n * });\n * ```\n */\nexport function getAdminLocalesQueryOptions(client: any) {\n  return {\n    queryKey: [\"cms\", \"adminLocales\"] as const,\n    queryFn: async () => {\n      try {\n        const result = await client.rpc.getAdminLocales({});\n        return result as {\n          locales: string[];\n          defaultLocale: string;\n        };\n      } catch {\n        // Fallback if function doesn't exist\n        return {\n          locales: [DEFAULT_LOCALE],\n          defaultLocale: DEFAULT_LOCALE,\n        };\n      }\n    },\n    staleTime: Number.POSITIVE_INFINITY,\n    gcTime: Number.POSITIVE_INFINITY,\n  };\n}\n\n// ============================================================================\n// Inner Provider (with Suspense)\n// ============================================================================\n\ninterface TranslationsInnerProps {\n  initialLocale: string;\n  children: ReactNode;\n}\n\nfunction TranslationsInner({\n  initialLocale,\n  children,\n}: TranslationsInnerProps): ReactElement {\n  const client = useAdminStore(selectClient);\n  const [locale, setLocaleState] = useState(initialLocale);\n\n  // Fetch available locales\n  const { data: localesData } = useSuspenseQuery(\n    getAdminLocalesQueryOptions(client),\n  );\n\n  // Fetch translations for current locale\n  const { data: translationsData } = useSuspenseQuery(\n    getAdminTranslationsQueryOptions(client, locale),\n  );\n\n  // Handle locale change\n  const setLocale = useCallback((newLocale: string) => {\n    setLocaleState(newLocale);\n    setUiLocaleCookie(newLocale);\n  }, []);\n\n  // Create i18n adapter\n  const i18nAdapter = useMemo(() => {\n    return createSimpleI18n({\n      locale: translationsData.locale,\n      locales: localesData.locales,\n      messages: { [translationsData.locale]: translationsData.messages },\n      fallbackLocale: translationsData.fallbackLocale,\n      onLocaleChange: setLocale,\n    });\n  }, [translationsData, localesData.locales, setLocale]);\n\n  return <I18nProvider adapter={i18nAdapter}>{children}</I18nProvider>;\n}\n\n// ============================================================================\n// Loading Fallback\n// ============================================================================\n\nfunction LoadingFallback(): ReactElement {\n  return (\n    <div className=\"qp-flex qp-h-screen qp-w-screen qp-items-center qp-justify-center qp-bg-background\">\n      <div className=\"qp-flex qp-flex-col qp-items-center qp-gap-4\">\n        <div className=\"qp-h-8 qp-w-8 qp-animate-spin qp-rounded-full qp-border-4 qp-border-primary qp-border-t-transparent\" />\n        <span className=\"qp-text-sm qp-text-muted-foreground\">Loading...</span>\n      </div>\n    </div>\n  );\n}\n\n// ============================================================================\n// Provider Component\n// ============================================================================\n\n/**\n * Translations Provider\n *\n * Fetches admin UI translations from the server and provides i18n context.\n * Uses Suspense for loading state.\n *\n * @example\n * ```tsx\n * <AdminStoreContext.Provider value={store}>\n *   <TranslationsProvider initialLocale=\"en\">\n *     <ContentLocalesProvider>\n *       {children}\n *     </ContentLocalesProvider>\n *   </TranslationsProvider>\n * </AdminStoreContext.Provider>\n * ```\n */\nexport function TranslationsProvider({\n  initialLocale,\n  children,\n  fallback,\n}: TranslationsProviderProps): ReactElement {\n  const resolvedLocale =\n    initialLocale ?? getUiLocaleFromCookie() ?? DEFAULT_LOCALE;\n\n  return (\n    <Suspense fallback={fallback ?? <LoadingFallback />}>\n      <TranslationsInner initialLocale={resolvedLocale}>\n        {children}\n      </TranslationsInner>\n    </Suspense>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAkCA,MAAM,mBAAmB;;AAEzB,MAAM,wBAAwB,OAAU,KAAK;AAM7C,SAAS,UAAU,MAA6B;AAC9C,KAAI,OAAO,aAAa,YAAa,QAAO;CAC5C,MAAM,QAAQ,SAAS,OAAO,sBAAM,IAAI,OAAO,GAAG,KAAK,UAAU,CAAC;AAClE,QAAO,QAAQ,MAAM,KAAK;;AAG5B,SAAS,UAAU,MAAc,OAAqB;AACpD,KAAI,OAAO,aAAa,YAAa;AAErC,UAAS,SAAS,GAAG,KAAK,GAAG,MAAM,oBAAoB,sBAAsB;;AAG/E,SAAgB,wBAAuC;AACrD,QAAO,UAAU,iBAAiB;;AAGpC,SAAgB,kBAAkB,QAAsB;AACtD,WAAU,kBAAkB,OAAO;;;;;;;;;;;;;;;;;;AAoCrC,SAAgB,iCAAiC,QAAa,QAAgB;AAC5E,QAAO;EACL,UAAU;GAAC;GAAO;GAAqB;GAAO;EAC9C,SAAS,YAAY;AACnB,OAAI;AAEF,WADe,MAAM,OAAO,IAAI,qBAAqB,EAAE,QAAQ,CAAC;WAM1D;AAEN,WAAO;KACL,QAAQ;KACR,UAAU,EAAE;KACZ,gBAAgB;KACjB;;;EAGL,WAAW,OAAO;EAClB,QAAQ,OAAO;EAChB;;;;;;;;;;;;;;;;;AAkBH,SAAgB,4BAA4B,QAAa;AACvD,QAAO;EACL,UAAU,CAAC,OAAO,eAAe;EACjC,SAAS,YAAY;AACnB,OAAI;AAEF,WADe,MAAM,OAAO,IAAI,gBAAgB,EAAE,CAAC;WAK7C;AAEN,WAAO;KACL,SAAS,CAAC,eAAe;KACzB,eAAe;KAChB;;;EAGL,WAAW,OAAO;EAClB,QAAQ,OAAO;EAChB;;AAYH,SAAS,kBAAkB,EACzB,eACA,YACuC;CACvC,MAAM,SAAS,cAAc,aAAa;CAC1C,MAAM,CAAC,QAAQ,kBAAkB,SAAS,cAAc;CAGxD,MAAM,EAAE,MAAM,gBAAgB,iBAC5B,4BAA4B,OAAO,CACpC;CAGD,MAAM,EAAE,MAAM,qBAAqB,iBACjC,iCAAiC,QAAQ,OAAO,CACjD;CAGD,MAAM,YAAY,aAAa,cAAsB;AACnD,iBAAe,UAAU;AACzB,oBAAkB,UAAU;IAC3B,EAAE,CAAC;AAaN,QAAO,oBAAC;EAAa,SAVD,cAAc;AAChC,UAAO,iBAAiB;IACtB,QAAQ,iBAAiB;IACzB,SAAS,YAAY;IACrB,UAAU,GAAG,iBAAiB,SAAS,iBAAiB,UAAU;IAClE,gBAAgB,iBAAiB;IACjC,gBAAgB;IACjB,CAAC;KACD;GAAC;GAAkB,YAAY;GAAS;GAAU,CAAC;EAEV;GAAwB;;AAOtE,SAAS,kBAAgC;AACvC,QACE,oBAAC;EAAI,WAAU;YACb,qBAAC;GAAI,WAAU;cACb,oBAAC,SAAI,WAAU,wGAAwG,EACvH,oBAAC;IAAK,WAAU;cAAsC;KAAiB;IACnE;GACF;;;;;;;;;;;;;;;;;;;AAyBV,SAAgB,qBAAqB,EACnC,eACA,UACA,YAC0C;CAC1C,MAAM,iBACJ,iBAAiB,uBAAuB,IAAI;AAE9C,QACE,oBAAC;EAAS,UAAU,YAAY,oBAAC,oBAAkB;YACjD,oBAAC;GAAkB,eAAe;GAC/B;IACiB;GACX"}

package/dist/client/scope/index.d.mts

@@ -0,0 +1,3 @@
+import { ScopeContextValue, ScopeOption, ScopePickerProps, ScopeProviderProps } from "./types.mjs";
+import { ScopePicker } from "./picker.mjs";
+import { ScopeProvider, createScopedFetch, useScope, useScopeSafe, useScopedFetch } from "./provider.mjs";

package/dist/client/scope/picker.d.mts

@@ -0,0 +1,54 @@
+import { ScopePickerProps } from "./types.mjs";
+import * as react_jsx_runtime30 from "react/jsx-runtime";
+
+//#region src/client/scope/picker.d.ts
+
+/**
+ * Scope Picker Component
+ *
+ * Renders a dropdown for selecting the current scope.
+ * Integrates with ScopeProvider to manage the selected scope.
+ *
+ * @example
+ * ```tsx
+ * // Fetch options from a collection
+ * <ScopePicker
+ *   collection="properties"
+ *   labelField="name"
+ *   placeholder="Select property..."
+ *   allowClear
+ * />
+ *
+ * // Use static options
+ * <ScopePicker
+ *   options={[
+ *     { value: 'org_1', label: 'Organization 1' },
+ *     { value: 'org_2', label: 'Organization 2' },
+ *   ]}
+ * />
+ *
+ * // Use async options loader
+ * <ScopePicker
+ *   loadOptions={async () => {
+ *     const response = await fetch('/api/my-scopes');
+ *     return response.json();
+ *   }}
+ * />
+ * ```
+ */
+declare function ScopePicker({
+  collection,
+  labelField,
+  valueField,
+  options: staticOptions,
+  loadOptions,
+  placeholder,
+  label,
+  allowClear,
+  clearText,
+  className,
+  compact
+}: ScopePickerProps): react_jsx_runtime30.JSX.Element;
+//#endregion
+export { ScopePicker };
+//# sourceMappingURL=picker.d.mts.map

package/dist/client/scope/picker.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.d.mts","names":[],"sources":["../../../src/client/scope/picker.tsx"],"sourcesContent":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;iBAwDgB,WAAA;;;;WAIN;;;;;;;;GAQP,mBAAgB,mBAAA,CAAA,GAAA,CAAA"}

package/dist/client/scope/picker.mjs

@@ -0,0 +1,161 @@
+import { cn } from "../lib/utils.mjs";
+import { useAdminStore } from "../runtime/provider.mjs";
+import { Skeleton } from "../components/ui/skeleton.mjs";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../components/ui/select.mjs";
+import { useScope } from "./provider.mjs";
+import { Icon } from "@iconify/react";
+import { useQuery } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/client/scope/picker.tsx
+/**
+* Scope Picker Component
+*
+* A dropdown picker for selecting the current scope in multi-tenant apps.
+* Can fetch options from a collection or use static options.
+*/
+/**
+* Scope Picker Component
+*
+* Renders a dropdown for selecting the current scope.
+* Integrates with ScopeProvider to manage the selected scope.
+*
+* @example
+* ```tsx
+* // Fetch options from a collection
+* <ScopePicker
+*   collection="properties"
+*   labelField="name"
+*   placeholder="Select property..."
+*   allowClear
+* />
+*
+* // Use static options
+* <ScopePicker
+*   options={[
+*     { value: 'org_1', label: 'Organization 1' },
+*     { value: 'org_2', label: 'Organization 2' },
+*   ]}
+* />
+*
+* // Use async options loader
+* <ScopePicker
+*   loadOptions={async () => {
+*     const response = await fetch('/api/my-scopes');
+*     return response.json();
+*   }}
+* />
+* ```
+*/
+function ScopePicker({ collection, labelField = "name", valueField = "id", options: staticOptions, loadOptions, placeholder = "Select...", label, allowClear = false, clearText = "All", className, compact = false }) {
+	const { scopeId, setScope, isLoading: scopeLoading } = useScope();
+	const client = useAdminStore((s) => s.client);
+	const { data: collectionData, isLoading: collectionLoading, error: collectionError } = useQuery({
+		queryKey: [
+			"scope-picker",
+			collection,
+			labelField,
+			valueField
+		],
+		queryFn: async () => {
+			if (!collection || !client) return null;
+			return (await client.collections[collection].find({
+				limit: 100,
+				columns: {
+					[valueField]: true,
+					[labelField]: true
+				}
+			})).docs.map((doc) => ({
+				value: String(doc[valueField]),
+				label: String(doc[labelField] ?? doc[valueField])
+			}));
+		},
+		enabled: !!collection && !!client,
+		staleTime: 6e4
+	});
+	const { data: asyncOptions, isLoading: asyncLoading, error: asyncError } = useQuery({
+		queryKey: ["scope-picker-async", loadOptions?.toString()],
+		queryFn: loadOptions,
+		enabled: !!loadOptions,
+		staleTime: 6e4
+	});
+	const options = useMemo(() => {
+		if (staticOptions) return staticOptions;
+		if (collectionData) return collectionData;
+		if (asyncOptions) return asyncOptions;
+		return [];
+	}, [
+		staticOptions,
+		collectionData,
+		asyncOptions
+	]);
+	const isLoading = scopeLoading || collectionLoading || asyncLoading;
+	const error = collectionError || asyncError;
+	const handleValueChange = useCallback((value) => {
+		if (!value || value === "__clear__") setScope(null);
+		else setScope(value);
+	}, [setScope]);
+	const selectedLabel = useMemo(() => {
+		if (!scopeId) return null;
+		return options.find((opt) => opt.value === scopeId)?.label ?? scopeId;
+	}, [scopeId, options]);
+	if (isLoading) return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1.5", className),
+		children: [label && !compact && /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-16" }), /* @__PURE__ */ jsx(Skeleton, { className: cn("h-9 w-full", compact && "h-8") })]
+	});
+	if (error) return /* @__PURE__ */ jsx("div", {
+		className: cn("text-xs text-destructive", className),
+		children: "Failed to load options"
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("space-y-1.5", className),
+		children: [label && !compact && /* @__PURE__ */ jsx("span", {
+			className: "text-xs font-medium text-muted-foreground",
+			children: label
+		}), /* @__PURE__ */ jsxs(Select, {
+			value: scopeId ?? "__clear__",
+			onValueChange: (value) => handleValueChange(value),
+			children: [/* @__PURE__ */ jsx(SelectTrigger, {
+				className: cn("w-full", compact && "h-8 text-xs", !scopeId && "text-muted-foreground"),
+				children: /* @__PURE__ */ jsx(SelectValue, {
+					placeholder,
+					children: scopeId ? selectedLabel : allowClear ? clearText : placeholder
+				})
+			}), /* @__PURE__ */ jsxs(SelectContent, { children: [
+				allowClear && /* @__PURE__ */ jsx(SelectItem, {
+					value: "__clear__",
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [/* @__PURE__ */ jsx(Icon, {
+							icon: "ph:globe",
+							className: "size-4 text-muted-foreground"
+						}), clearText]
+					})
+				}),
+				options.map((option) => /* @__PURE__ */ jsx(SelectItem, {
+					value: option.value,
+					children: /* @__PURE__ */ jsxs("span", {
+						className: "flex items-center gap-2",
+						children: [
+							option.icon,
+							/* @__PURE__ */ jsx("span", { children: option.label }),
+							option.description && /* @__PURE__ */ jsx("span", {
+								className: "text-muted-foreground text-xs",
+								children: option.description
+							})
+						]
+					})
+				}, option.value)),
+				options.length === 0 && /* @__PURE__ */ jsx("div", {
+					className: "px-2 py-1.5 text-xs text-muted-foreground",
+					children: "No options available"
+				})
+			] })]
+		})]
+	});
+}
+
+//#endregion
+export { ScopePicker };
+//# sourceMappingURL=picker.mjs.map

package/dist/client/scope/picker.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"picker.mjs","names":[],"sources":["../../../src/client/scope/picker.tsx"],"sourcesContent":["/**\n * Scope Picker Component\n *\n * A dropdown picker for selecting the current scope in multi-tenant apps.\n * Can fetch options from a collection or use static options.\n */\n\nimport { Icon } from \"@iconify/react\";\nimport { useQuery } from \"@tanstack/react-query\";\nimport { useCallback, useMemo } from \"react\";\nimport {\n\tSelect,\n\tSelectContent,\n\tSelectItem,\n\tSelectTrigger,\n\tSelectValue,\n} from \"../components/ui/select\";\nimport { Skeleton } from \"../components/ui/skeleton\";\nimport { cn } from \"../lib/utils\";\nimport { useAdminStore } from \"../runtime/provider.js\";\nimport { useScope } from \"./provider\";\nimport type { ScopeOption, ScopePickerProps } from \"./types\";\n\n/**\n * Scope Picker Component\n *\n * Renders a dropdown for selecting the current scope.\n * Integrates with ScopeProvider to manage the selected scope.\n *\n * @example\n * ```tsx\n * // Fetch options from a collection\n * <ScopePicker\n *   collection=\"properties\"\n *   labelField=\"name\"\n *   placeholder=\"Select property...\"\n *   allowClear\n * />\n *\n * // Use static options\n * <ScopePicker\n *   options={[\n *     { value: 'org_1', label: 'Organization 1' },\n *     { value: 'org_2', label: 'Organization 2' },\n *   ]}\n * />\n *\n * // Use async options loader\n * <ScopePicker\n *   loadOptions={async () => {\n *     const response = await fetch('/api/my-scopes');\n *     return response.json();\n *   }}\n * />\n * ```\n */\nexport function ScopePicker({\n\tcollection,\n\tlabelField = \"name\",\n\tvalueField = \"id\",\n\toptions: staticOptions,\n\tloadOptions,\n\tplaceholder = \"Select...\",\n\tlabel,\n\tallowClear = false,\n\tclearText = \"All\",\n\tclassName,\n\tcompact = false,\n}: ScopePickerProps) {\n\tconst { scopeId, setScope, isLoading: scopeLoading } = useScope();\n\tconst client = useAdminStore((s) => s.client);\n\n\t// Fetch options from collection\n\tconst {\n\t\tdata: collectionData,\n\t\tisLoading: collectionLoading,\n\t\terror: collectionError,\n\t} = useQuery({\n\t\tqueryKey: [\"scope-picker\", collection, labelField, valueField],\n\t\tqueryFn: async () => {\n\t\t\tif (!collection || !client) return null;\n\n\t\t\tconst result = await (client.collections as any)[collection].find({\n\t\t\t\tlimit: 100,\n\t\t\t\tcolumns: {\n\t\t\t\t\t[valueField]: true,\n\t\t\t\t\t[labelField]: true,\n\t\t\t\t},\n\t\t\t});\n\n\t\t\treturn result.docs.map((doc: any) => ({\n\t\t\t\tvalue: String(doc[valueField]),\n\t\t\t\tlabel: String(doc[labelField] ?? doc[valueField]),\n\t\t\t}));\n\t\t},\n\t\tenabled: !!collection && !!client,\n\t\tstaleTime: 60000, // 1 minute\n\t});\n\n\t// Fetch options from async loader\n\tconst {\n\t\tdata: asyncOptions,\n\t\tisLoading: asyncLoading,\n\t\terror: asyncError,\n\t} = useQuery({\n\t\tqueryKey: [\"scope-picker-async\", loadOptions?.toString()],\n\t\tqueryFn: loadOptions!,\n\t\tenabled: !!loadOptions,\n\t\tstaleTime: 60000,\n\t});\n\n\t// Combine options from all sources\n\tconst options = useMemo((): ScopeOption[] => {\n\t\tif (staticOptions) return staticOptions;\n\t\tif (collectionData) return collectionData;\n\t\tif (asyncOptions) return asyncOptions;\n\t\treturn [];\n\t}, [staticOptions, collectionData, asyncOptions]);\n\n\tconst isLoading = scopeLoading || collectionLoading || asyncLoading;\n\tconst error = collectionError || asyncError;\n\n\t// Handle selection change\n\tconst handleValueChange = useCallback(\n\t\t(value: string | null) => {\n\t\t\tif (!value || value === \"__clear__\") {\n\t\t\t\tsetScope(null);\n\t\t\t} else {\n\t\t\t\tsetScope(value);\n\t\t\t}\n\t\t},\n\t\t[setScope],\n\t);\n\n\t// Get current selection label\n\tconst selectedLabel = useMemo(() => {\n\t\tif (!scopeId) return null;\n\t\tconst option = options.find((opt) => opt.value === scopeId);\n\t\treturn option?.label ?? scopeId;\n\t}, [scopeId, options]);\n\n\tif (isLoading) {\n\t\treturn (\n\t\t\t<div className={cn(\"space-y-1.5\", className)}>\n\t\t\t\t{label && !compact && <Skeleton className=\"h-3 w-16\" />}\n\t\t\t\t<Skeleton className={cn(\"h-9 w-full\", compact && \"h-8\")} />\n\t\t\t</div>\n\t\t);\n\t}\n\n\tif (error) {\n\t\treturn (\n\t\t\t<div className={cn(\"text-xs text-destructive\", className)}>\n\t\t\t\tFailed to load options\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn (\n\t\t<div className={cn(\"space-y-1.5\", className)}>\n\t\t\t{label && !compact && (\n\t\t\t\t<span className=\"text-xs font-medium text-muted-foreground\">\n\t\t\t\t\t{label}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t\t<Select\n\t\t\t\tvalue={scopeId ?? \"__clear__\"}\n\t\t\t\tonValueChange={(value) => handleValueChange(value)}\n\t\t\t>\n\t\t\t\t<SelectTrigger\n\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\"w-full\",\n\t\t\t\t\t\tcompact && \"h-8 text-xs\",\n\t\t\t\t\t\t!scopeId && \"text-muted-foreground\",\n\t\t\t\t\t)}\n\t\t\t\t>\n\t\t\t\t\t<SelectValue placeholder={placeholder}>\n\t\t\t\t\t\t{scopeId ? selectedLabel : allowClear ? clearText : placeholder}\n\t\t\t\t\t</SelectValue>\n\t\t\t\t</SelectTrigger>\n\t\t\t\t<SelectContent>\n\t\t\t\t\t{allowClear && (\n\t\t\t\t\t\t<SelectItem value=\"__clear__\">\n\t\t\t\t\t\t\t<span className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t<Icon\n\t\t\t\t\t\t\t\t\ticon=\"ph:globe\"\n\t\t\t\t\t\t\t\t\tclassName=\"size-4 text-muted-foreground\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{clearText}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t)}\n\t\t\t\t\t{options.map((option) => (\n\t\t\t\t\t\t<SelectItem key={option.value} value={option.value}>\n\t\t\t\t\t\t\t<span className=\"flex items-center gap-2\">\n\t\t\t\t\t\t\t\t{option.icon}\n\t\t\t\t\t\t\t\t<span>{option.label}</span>\n\t\t\t\t\t\t\t\t{option.description && (\n\t\t\t\t\t\t\t\t\t<span className=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t\t\t\t\t{option.description}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t</SelectItem>\n\t\t\t\t\t))}\n\t\t\t\t\t{options.length === 0 && (\n\t\t\t\t\t\t<div className=\"px-2 py-1.5 text-xs text-muted-foreground\">\n\t\t\t\t\t\t\tNo options available\n\t\t\t\t\t\t</div>\n\t\t\t\t\t)}\n\t\t\t\t</SelectContent>\n\t\t\t</Select>\n\t\t</div>\n\t);\n}\n"],"mappings":"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"}

package/dist/client/scope/provider.d.mts

@@ -0,0 +1,104 @@
+import { ScopeContextValue, ScopeProviderProps } from "./types.mjs";
+import * as react_jsx_runtime31 from "react/jsx-runtime";
+
+//#region src/client/scope/provider.d.ts
+
+/**
+ * Fetch function type (browser-compatible, avoids Bun-specific types)
+ */
+type FetchFn = (input: RequestInfo | URL, init?: RequestInit) => Promise<Response>;
+/**
+ * Provider component for scope selection.
+ *
+ * Wrap your admin app with this provider to enable scope-based filtering.
+ *
+ * @example
+ * ```tsx
+ * <ScopeProvider
+ *   headerName="x-selected-property"
+ *   storageKey="admin-property"
+ * >
+ *   <AdminProvider {...props}>
+ *     {children}
+ *   </AdminProvider>
+ * </ScopeProvider>
+ * ```
+ */
+declare function ScopeProvider({
+  children,
+  headerName,
+  storageKey,
+  defaultScope
+}: ScopeProviderProps): react_jsx_runtime31.JSX.Element;
+/**
+ * Hook to access the current scope context.
+ *
+ * @throws Error if used outside of ScopeProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { scopeId, setScope, clearScope } = useScope();
+ *
+ *   return (
+ *     <div>
+ *       Current scope: {scopeId ?? 'None'}
+ *       <button onClick={() => setScope('org_123')}>
+ *         Switch to Org 123
+ *       </button>
+ *       <button onClick={clearScope}>Clear</button>
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare function useScope(): ScopeContextValue;
+/**
+ * Hook to check if we're inside a ScopeProvider.
+ * Returns null if not inside a provider (doesn't throw).
+ */
+declare function useScopeSafe(): ScopeContextValue | null;
+/**
+ * Hook to create a fetch wrapper that automatically injects the scope header.
+ *
+ * Use this when creating the QuestpieClient to ensure all API calls
+ * include the selected scope.
+ *
+ * @example
+ * ```tsx
+ * function AdminWithScopedClient() {
+ *   const scopedFetch = useScopedFetch();
+ *
+ *   const client = useMemo(() =>
+ *     createClient<typeof cms>({
+ *       baseURL: '/api',
+ *       fetch: scopedFetch,
+ *     }),
+ *     [scopedFetch]
+ *   );
+ *
+ *   return <AdminProvider client={client} {...rest} />;
+ * }
+ * ```
+ */
+declare function useScopedFetch(): FetchFn;
+/**
+ * Creates a fetch function that injects scope headers.
+ * Use this outside of React components.
+ *
+ * @example
+ * ```ts
+ * let currentScopeId: string | null = null;
+ *
+ * const scopedFetch = createScopedFetch(
+ *   'x-selected-property',
+ *   () => currentScopeId
+ * );
+ *
+ * const client = createClient({ fetch: scopedFetch, ... });
+ * ```
+ */
+declare function createScopedFetch(headerName: string, getScopeId: () => string | null): FetchFn;
+//#endregion
+export { ScopeProvider, createScopedFetch, useScope, useScopeSafe, useScopedFetch };
+//# sourceMappingURL=provider.d.mts.map

package/dist/client/scope/provider.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.mts","names":[],"sources":["../../../src/client/scope/provider.tsx"],"sourcesContent":[],"mappings":";;;;;;;;KAmBK,OAAA,GAGO,CAAA,KAAA,EAFJ,WAEI,GAFU,GAEV,EAAA,IAAA,CAAA,EADJ,WACI,EAAA,GAAP,OAAO,CAAC,QAAD,CAAA;AAqBZ;;;;;;;;AAmFA;AAYA;AA2BA;AA+BA;;;;;;iBAzJgB,aAAA;;;;;GAKb,qBAAkB,mBAAA,CAAA,GAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;iBA8EL,QAAA,CAAA,GAAY;;;;;iBAYZ,YAAA,CAAA,GAAgB;;;;;;;;;;;;;;;;;;;;;;;;iBA2BhB,cAAA,CAAA,GAAkB;;;;;;;;;;;;;;;;;iBA+BlB,iBAAA,uDAGb"}