@chelone/vue 0.5.0 → 0.7.0

package/README.md

@@ -13,7 +13,12 @@ Each entry below needs the peer dependencies listed beside it, and only that ent
 | Entry | Optional peers |
 | --- | --- |
 | `@chelone/vue/monaco` | `monaco-editor`, `@guolao/vue-monaco-editor` |
+| `@chelone/vue/charts` | `@unovis/vue`, `@unovis/ts` |
+| `@chelone/vue/kanban` | `@dnd-kit/vue`, `@dnd-kit/dom` (needs Vue 3.5) |
+| `@chelone/vue/inspector` | `@dnd-kit/vue` (needs Vue 3.5) |
 | `@chelone/vue/mdx-editor` | `@milkdown/crepe`, `@milkdown/kit` |
+| `@chelone/vue/rich-text-input` | `@tiptap/core`, `@tiptap/pm`, `@tiptap/vue-3`, `@tiptap/starter-kit`, `@tiptap/extensions`, `@tiptap/extension-image`, `@tiptap/extension-text-style`, `@tiptap/extension-code-block`, `@tiptap/extension-code-block-lowlight`, `lowlight`, `highlight.js`, `dompurify` |
+| `@chelone/vue/block-editor` | `@tiptap/core`, `@tiptap/pm`, `@tiptap/vue-3`, `@tiptap/starter-kit`, `@tiptap/extensions`, `@tiptap/suggestion`, `@dnd-kit/vue`, `@dnd-kit/dom` (needs Vue 3.5), `@unovis/vue`, `@unovis/ts` |
 | `@chelone/vue/csv-import` | `papaparse` |
 | `@chelone/vue/maps` | `maplibre-gl` |
 | `@chelone/vue/maps/draw` | `maplibre-gl`, `terra-draw`, `terra-draw-maplibre-gl-adapter`, `@turf/difference`, `@turf/simplify` |

package/dist/admin/admin-shell.js

@@ -0,0 +1,4 @@
+import admin_shell_vue_vue_type_script_setup_true_lang_default from "./admin-shell.vue_vue_type_script_setup_true_lang.js";
+// src/admin/admin-shell.vue
+var admin_shell_default = admin_shell_vue_vue_type_script_setup_true_lang_default;
+export { admin_shell_default as default };

package/dist/admin/admin-shell.vue.d.ts

@@ -1,3 +1,4 @@
+import { type VNode } from "vue";
 import type { ErrorFallbackProps } from "./default-error-fallback.vue.js";
 type __VLS_Props = {
     requireAuth: boolean;
@@ -5,20 +6,21 @@ type __VLS_Props = {
 };
 type __VLS_Slots = {
     /** Override the default shell chrome (wins over the route view). */
-    layout?: () => unknown;
+    layout?: () => VNode[];
     /** The index/dashboard content (rendered before the route view at the index path only). */
-    dashboard?: () => unknown;
+    dashboard?: () => VNode[];
     /** The unauthenticated login screen (default `<LoginPage>`). */
-    login?: () => unknown;
+    login?: () => VNode[];
     /** Replaces the spinner shown while the `requireAuth` check is pending. */
-    loading?: () => unknown;
+    loading?: () => VNode[];
     /** Rendered alone when no resource is registered and no custom route is given. */
-    ready?: () => unknown;
+    ready?: () => VNode[];
     /** Replaces the default fallback shown when the layout branch throws. */
-    error?: (props: ErrorFallbackProps) => unknown;
+    error?: (props: ErrorFallbackProps) => VNode[];
 };
-declare const __VLS_component: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
-declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
 export default _default;
 type __VLS_WithSlots<T, S> = T & {
     new (): {

package/dist/admin/admin-shell.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,94 @@
+import layout_default from "../components/admin/layout/layout.js";
+import theme_provider_default from "../components/admin/layout/theme-provider.js";
+import login_page_default from "../components/admin/auth/login-page.js";
+import spinner_default from "../components/ui/spinner.js";
+import { useBasename } from "../router/adapter.js";
+import { useWatchDataErrors } from "../auth/permissions-hooks.js";
+import { useAuthGate } from "./auth-gate.js";
+import { NO_LAYOUT_META } from "./custom-routes.js";
+import navigate_to_first_resource_default from "./navigate-to-first-resource.js";
+import { useResourceDefinitions } from "./resource-registry.js";
+import shell_error_boundary_default from "./shell-error-boundary.js";
+import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createVNode, defineComponent, guardReactiveProps, normalizeProps, openBlock, renderSlot, resolveComponent, unref, useSlots, withCtx } from "vue";
+import { joinBasename } from "@chelone/core";
+import { START_LOCATION, useRoute, useRouter } from "vue-router";
+// src/admin/admin-shell.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = { class: "flex min-h-screen flex-col justify-center items-center" };
+var admin_shell_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "admin-shell",
+	props: {
+		requireAuth: { type: Boolean },
+		hasCustomRoutes: { type: Boolean }
+	},
+	setup(__props) {
+		/**
+		* `<AdminShell>` — the internal chrome + auth-gate wrapper `<Admin>` renders
+		* INSIDE its own provided context (the Chelone context + vue-query client), so
+		* the auth composables it calls can `inject` them. `<Admin>`'s own `setup`
+		* cannot call `useAuthGate` directly — a component's `provide` is visible only
+		* to descendants, not to its own `inject` calls — so the gate lives here.
+		*
+		* No-flash gate: when `<Admin requireAuth>` gates, this renders the loading
+		* spinner WHILE the auth check is pending and the `#login` slot (default
+		* `<LoginPage>`) when unauthenticated — the protected `<Layout>` + `<router-view>`
+		* never mount during the pending/unauthenticated window. When `requireAuth` is
+		* false (the default) the gate short-circuits to authenticated and this renders
+		* exactly the prior default chrome, so the ungated app is unchanged.
+		*
+		* `ThemeProvider` wraps only the DEFAULT branches (loading / login / layout
+		* fallback / noLayout route); a caller-provided `#layout` slot stays bare, preserving the prior
+		* `<Admin>` behavior where an override owned its own theming.
+		*/
+		const props = __props;
+		const gate = useAuthGate(props.requireAuth);
+		const slots = useSlots();
+		const route = useRoute();
+		const router = useRouter();
+		const isNoLayout = computed(() => route.meta[NO_LAYOUT_META] === true);
+		const definitions = useResourceDefinitions();
+		const showReady = () => slots.ready != null && !props.hasCustomRoutes && Object.keys(definitions).length === 0;
+		const indexPath = joinBasename("/", useBasename()).toLowerCase();
+		const isIndex = computed(() => {
+			const path = route.path.toLowerCase();
+			return router.currentRoute.value !== START_LOCATION && (path === indexPath || path === `${indexPath}/`);
+		});
+		useWatchDataErrors();
+		return (_ctx, _cache) => {
+			const _component_router_view = resolveComponent("router-view");
+			return showReady() ? (openBlock(), createBlock(theme_provider_default, { key: 0 }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "ready")]),
+				_: 3
+			})) : isNoLayout.value ? (openBlock(), createBlock(shell_error_boundary_default, { key: 1 }, createSlots({
+				default: withCtx(() => [createVNode(theme_provider_default, null, {
+					default: withCtx(() => [createVNode(_component_router_view)]),
+					_: 1
+				})]),
+				_: 2
+			}, [unref(slots).error ? {
+				name: "error",
+				fn: withCtx((errorProps) => [renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(errorProps)))]),
+				key: "0"
+			} : void 0]), 1024)) : __props.requireAuth && unref(gate).isPending.value ? (openBlock(), createBlock(theme_provider_default, { key: 2 }, {
+				default: withCtx(() => [renderSlot(_ctx.$slots, "loading", {}, () => [createElementVNode("div", _hoisted_1, [createVNode(spinner_default, { class: "size-9" })])])]),
+				_: 3
+			})) : __props.requireAuth && !unref(gate).authenticated.value ? renderSlot(_ctx.$slots, "login", {}, () => [createVNode(theme_provider_default, null, {
+				default: withCtx(() => [createVNode(login_page_default)]),
+				_: 1
+			})], void 0, 3) : (openBlock(), createElementBlock(Fragment, { key: 4 }, [isIndex.value && !unref(slots).dashboard ? (openBlock(), createBlock(navigate_to_first_resource_default, { key: 0 })) : createCommentVNode("", true), createVNode(shell_error_boundary_default, null, createSlots({
+				default: withCtx(() => [renderSlot(_ctx.$slots, "layout", {}, () => [createVNode(theme_provider_default, null, {
+					default: withCtx(() => [createVNode(layout_default, null, {
+						default: withCtx(() => [isIndex.value ? renderSlot(_ctx.$slots, "dashboard", {}, void 0, void 0, 0) : createCommentVNode("", true), createVNode(_component_router_view)]),
+						_: 3
+					})]),
+					_: 3
+				})])]),
+				_: 2
+			}, [unref(slots).error ? {
+				name: "error",
+				fn: withCtx((errorProps) => [renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(errorProps)))]),
+				key: "0"
+			} : void 0]), 1024)], 64));
+		};
+	}
+});
+export { admin_shell_vue_vue_type_script_setup_true_lang_default as default };

package/dist/admin/admin.js

@@ -0,0 +1,4 @@
+import admin_vue_vue_type_script_setup_true_lang_default from "./admin.vue_vue_type_script_setup_true_lang.js";
+// src/admin/admin.vue
+var admin_default = admin_vue_vue_type_script_setup_true_lang_default;
+export { admin_default as default };

package/dist/admin/admin.vue.d.ts

@@ -32,6 +32,7 @@
  */
 import { type AnyCheloneI18n, type AuthProvider, type CheloneStore, type DataProvider, type NotificationStore, type ResourceMap } from "@chelone/core";
 import { QueryClient } from "@tanstack/vue-query";
+import { type VNode } from "vue";
 import type { ErrorFallbackProps } from "./default-error-fallback.vue.js";
 import { type CustomRoute } from "./custom-routes.js";
 import { type ResourceDefinition } from "./resource-registry.js";
@@ -88,39 +89,44 @@ export interface AdminProps<TResources extends ResourceMap = ResourceMap> {
      */
     requireAuth?: boolean;
 }
-declare const _default: <TResources extends ResourceMap = ResourceMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & AdminProps<TResources> & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <TResources extends ResourceMap = ResourceMap>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<AdminProps<TResources>> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
         /** The resource markers (`<Resource>`) — always rendered so they register. */
-        default?: () => unknown;
+        default?: () => VNode[];
         /** Override the default shell chrome (wins over the route view). */
-        layout?: () => unknown;
+        layout?: () => VNode[];
         /** The index/dashboard content (rendered before the route view by default). */
-        dashboard?: () => unknown;
+        dashboard?: () => VNode[];
         /** The unauthenticated login screen (`requireAuth`) — default `<LoginPage>`. */
-        login?: () => unknown;
+        login?: () => VNode[];
         /** Replaces the spinner shown while the `requireAuth` check is pending. */
-        loading?: () => unknown;
+        loading?: () => VNode[];
         /** Rendered alone when no resource is registered and no `customRoutes` are given. */
-        ready?: () => unknown;
+        ready?: () => VNode[];
         /** Replaces the default fallback shown when a route view throws. */
-        error?: (props: ErrorFallbackProps) => unknown;
+        error?: (props: ErrorFallbackProps) => VNode[];
         /** Mounted at `/auth-callback`, outside the layout and the auth gate. */
-        authCallback?: () => unknown;
+        authCallback?: () => VNode[];
         /** Mounted at `/authentication-error`, inside the layout. */
-        authenticationError?: () => unknown;
+        authenticationError?: () => VNode[];
         /** Mounted at `/access-denied`, inside the layout. */
-        accessDenied?: () => unknown;
+        accessDenied?: () => VNode[];
         /** Mounted for any path no other route owns, inside the layout. */
-        catchAll?: () => unknown;
+        catchAll?: () => VNode[];
     };
     emit: {};
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
-export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/admin/admin.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,217 @@
+import { BasenameKey } from "../router/adapter.js";
+import admin_shell_default from "./admin-shell.js";
+import { provideCheloneContext } from "../context.js";
+import { toRouteRecord } from "./custom-routes.js";
+import { createSlotRoutes } from "./slot-routes.js";
+import { provideVueRouterAdapter } from "../router/vue-router-adapter.js";
+import { provideHasDashboard } from "./has-dashboard.js";
+import { ResourceRegistryKey, createResourceRegistry } from "./resource-registry.js";
+import { Fragment, createElementBlock, createSlots, createVNode, defineComponent, guardReactiveProps, normalizeProps, onBeforeUpdate, onScopeDispose, openBlock, provide, renderSlot, useSlots, watchEffect, withCtx } from "vue";
+import { createI18n, englishMessages, joinBasename } from "@chelone/core";
+import { QueryClient, VUE_QUERY_CLIENT } from "@tanstack/vue-query";
+import { START_LOCATION, useRouter } from "vue-router";
+// src/admin/admin.vue?vue&type=script&setup=true&lang.ts
+var admin_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent({
+	__name: "admin",
+	props: {
+		dataProvider: {},
+		queryClient: {},
+		basename: {},
+		authProvider: {},
+		i18n: {},
+		store: {},
+		notifications: {},
+		registry: {},
+		resources: {},
+		customRoutes: {},
+		requireAuth: { type: Boolean }
+	},
+	setup(__props) {
+		/**
+		* `<Admin>` — the children-composable façade (D3), the Vue twin of
+		* `@chelone/react`'s `<Admin>` (`packages/react/src/admin/admin.tsx` +
+		* `admin-context.tsx`). Provider config = props; page overrides = named slots;
+		* resources = composed `<Resource>` children (or the `:resources` escape hatch).
+		*
+		* It owns four seams, each the Vue idiom of a React provider:
+		* 1. **The reactive registry.** Creates one `ResourceRegistry` and `provide`s it
+		*    so child `<Resource>`s self-register (the Vue mirror of React's
+		*    `<ResourceRegistryProvider>` + register-on-mount effect).
+		* 2. **The Chelone context.** `provide`s the same value React's `CheloneProvider`
+		*    builds (dataProvider / queryClient / store / i18n / auth / notifications) so
+		*    every data/i18n composable below reads it — "reuse core's context
+		*    construction, same as React's `<Admin>`".
+		* 3. **The query client.** Resolves (or creates) a vue-query `QueryClient`,
+		*    `mount`s it, and `provide`s it under vue-query's own key — the analog of
+		*    React's `<QueryClientProvider>`.
+		* 4. **The router adapter + reactive route build.** Installs the vue-router
+		*    adapter and, via a `watchEffect` over the registry, adds/removes vue-router
+		*    route records (`/{name}`, `/{name}/create/:pathMatch(.*)*`,
+		*    `/{name}/:id/:pathMatch(.*)*`, `/{name}/:id/show/:pathMatch(.*)*`) as resources register/unregister — the reactive analog
+		*    of React's declarative `<AdminRoutes>` resource route table. vue-router
+		*    ranks by specificity, so a static `create` or `show` route naturally beats
+		*    the `:id` edit route without a hand-maintained declaration order. The
+		*    edit, create and show routes take a trailing catch-all so a `<TabbedForm>`
+		*    or `<TabbedShowLayout>` tab can live in the URL.
+		*
+		* Named slots `#layout` / `#dashboard` override the default shell; `#login` is
+		* reserved for the auth gate (a later V1 wave). The `#layout` slot, when given,
+		* WINS over the default chrome (its fallback is the route view). The default
+		* slot always renders — that is where `<Resource>` markers live and register.
+		*/
+		const props = __props;
+		const basename = (props.basename ?? "").replace(/\/+$/, "");
+		provide(BasenameKey, basename);
+		const slots = useSlots();
+		const registry = createResourceRegistry();
+		provide(ResourceRegistryKey, registry);
+		if (props.resources) for (const definition of props.resources) registry.register(definition);
+		provideHasDashboard(slots.dashboard != null);
+		const queryClient = props.queryClient ?? new QueryClient();
+		queryClient.mount();
+		provide(VUE_QUERY_CLIENT, queryClient);
+		onScopeDispose(() => queryClient.unmount());
+		provideCheloneContext({
+			dataProvider: props.dataProvider,
+			queryClient,
+			authProvider: props.authProvider,
+			i18n: props.i18n ?? createI18n({
+				locale: "en",
+				messages: { en: englishMessages }
+			}),
+			store: props.store,
+			notifications: props.notifications,
+			resources: props.registry
+		});
+		provideVueRouterAdapter();
+		const router = useRouter();
+		/** Per-resource route removers (`router.addRoute` returns an unregister fn). */
+		const routeRemovers = /* @__PURE__ */ new Map();
+		/** Build the (up to four) route records for one resource; return their removers. */
+		function addResourceRoutes(name, definition) {
+			const removers = [];
+			if (definition.create) removers.push(router.addRoute({
+				path: joinBasename(`/${name}/create/:pathMatch(.*)*`, basename),
+				name: `chelone-${name}-create`,
+				component: definition.create
+			}));
+			if (definition.show) removers.push(router.addRoute({
+				path: joinBasename(`/${name}/:id/show/:pathMatch(.*)*`, basename),
+				name: `chelone-${name}-show`,
+				component: definition.show
+			}));
+			if (definition.edit) removers.push(router.addRoute({
+				path: joinBasename(`/${name}/:id/:pathMatch(.*)*`, basename),
+				name: `chelone-${name}-edit`,
+				component: definition.edit
+			}));
+			if (definition.list) removers.push(router.addRoute({
+				path: joinBasename(`/${name}`, basename),
+				name: `chelone-${name}-list`,
+				component: definition.list
+			}));
+			return removers;
+		}
+		/** True while a re-resolve is waiting on `router.isReady()`, so one replace serves all callers. */
+		let resolving = false;
+		/**
+		* vue-router resolves its first location when the app installs it, before any
+		* resource route exists, so a deep link matches nothing. Once the router is
+		* ready, replace an unmatched location with itself so it resolves against the
+		* routes added since. A failed first navigation rejects `isReady()` and is left alone.
+		*/
+		async function resolveWaitingLocation() {
+			if (resolving) return;
+			resolving = true;
+			try {
+				await router.isReady();
+			} catch {
+				return;
+			} finally {
+				resolving = false;
+			}
+			const current = router.currentRoute.value;
+			const indexPath = joinBasename("/", basename).toLowerCase();
+			const currentPath = current.path.toLowerCase();
+			if (current.matched.every((record) => record.meta["chelone:catchAll"] === true) && currentPath !== indexPath && currentPath !== `${indexPath}/`) router.replace(current.fullPath);
+		}
+		/**
+		* A slot route added or removed can change what the current location matches:
+		* a removed record stays in `currentRoute` and would keep mounting a page that
+		* renders nothing. Replace the location with itself when it now resolves to a
+		* different record. Before the first navigation settles there is nothing to redo.
+		*/
+		function resolveCurrentLocationAgain() {
+			const current = router.currentRoute.value;
+			if (current === START_LOCATION) return;
+			if (router.resolve(current.fullPath).matched.at(-1) !== current.matched.at(-1)) router.replace(current.fullPath);
+		}
+		for (const route of props.customRoutes ?? []) onScopeDispose(router.addRoute(toRouteRecord(route, basename)));
+		const slotRoutes = createSlotRoutes(router, slots, basename);
+		onScopeDispose(slotRoutes.dispose);
+		const hasSlotRoutes = slotRoutes.sync();
+		onBeforeUpdate(() => {
+			if (slotRoutes.sync()) resolveCurrentLocationAgain();
+		});
+		if (props.customRoutes?.length || hasSlotRoutes) resolveWaitingLocation();
+		watchEffect(() => {
+			const { definitions } = registry;
+			const names = new Set(Object.keys(definitions));
+			for (const [name, removers] of routeRemovers) if (!names.has(name)) {
+				for (const remove of removers) remove();
+				routeRemovers.delete(name);
+			}
+			let added = false;
+			for (const name of names) {
+				if (routeRemovers.has(name)) continue;
+				const definition = definitions[name];
+				if (!definition) continue;
+				routeRemovers.set(name, addResourceRoutes(name, definition));
+				added = true;
+			}
+			if (added) resolveWaitingLocation();
+		});
+		onScopeDispose(() => {
+			for (const removers of routeRemovers.values()) for (const remove of removers) remove();
+			routeRemovers.clear();
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [renderSlot(_ctx.$slots, "default"), createVNode(admin_shell_default, {
+				"require-auth": props.requireAuth ?? false,
+				"has-custom-routes": !!props.customRoutes?.length
+			}, createSlots({ _: 2 }, [
+				_ctx.$slots.layout ? {
+					name: "layout",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "layout")]),
+					key: "0"
+				} : void 0,
+				_ctx.$slots.dashboard ? {
+					name: "dashboard",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "dashboard")]),
+					key: "1"
+				} : void 0,
+				_ctx.$slots.login ? {
+					name: "login",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "login")]),
+					key: "2"
+				} : void 0,
+				_ctx.$slots.loading ? {
+					name: "loading",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "loading")]),
+					key: "3"
+				} : void 0,
+				_ctx.$slots.ready ? {
+					name: "ready",
+					fn: withCtx(() => [renderSlot(_ctx.$slots, "ready")]),
+					key: "4"
+				} : void 0,
+				_ctx.$slots.error ? {
+					name: "error",
+					fn: withCtx((errorProps) => [renderSlot(_ctx.$slots, "error", normalizeProps(guardReactiveProps(errorProps)))]),
+					key: "5"
+				} : void 0
+			]), 1032, ["require-auth", "has-custom-routes"])], 64);
+		};
+	}
+});
+export { admin_vue_vue_type_script_setup_true_lang_default as default };

package/dist/admin/auth-gate.d.ts

@@ -65,7 +65,7 @@ export interface HandleAuthCallbackResult {
     /** True once the callback has resolved and the redirect has been issued. */
     settled: Ref<boolean>;
     /** The error, if `handleCallback` rejected. */
-    error: Ref<unknown>;
+    error: Ref<Error | null>;
 }
 /**
  * Resolve an OAuth auth-callback redirect. On mount, call the provider's

package/dist/admin/auth-gate.js

@@ -1,86 +1,118 @@
+import { useCheloneContext } from "../context.js";
+import { useLocation, useRedirect } from "../router/nav-composables.js";
+import { computed, watch } from "vue";
 import { authStateQueryOptions } from "@chelone/core";
 import { useQuery } from "@tanstack/vue-query";
-import { computed, watch } from "vue";
-import { useCheloneContext } from "../context.js";
-import { useRedirect, useLocation } from "../router/nav-composables.js";
+// src/admin/auth-gate.ts
+/**
+* The headless auth pieces the routing engine gates on — the Vue twin of
+* `@chelone/react`'s `admin/auth-gate.tsx`:
+*
+* - `useAuthGate(requireAuth)` — the no-flash gate state. Reuses the P3 auth
+*   query (`authStateQueryOptions` via `useCheloneAuthProvider`) but adds the two
+*   shell-specific concerns the raw `useAuthState()` does not: the `enabled`
+*   gating (`requireAuth` — no query when the shell doesn't gate) and the
+*   NO-AUTHPROVIDER shortcut (`authProvider == null` → frozen authenticated, so
+*   appless demos never gate). `<Admin requireAuth>` renders the login page WHILE
+*   `isPending`, so protected content NEVER mounts during the pending-auth
+*   window — that is the no-flash guarantee (not render-then-hide).
+*
+* - `useAuthenticated` — a per-page gate. Fires the auth check for a subtree and,
+*   on failure, logs out (default) or renders nothing; `logoutOnFailure`
+*   defaults `true`.
+*
+* - `useHandleAuthCallback` — the OAuth redirect resolver: call the provider's
+*   `handleCallback`, then redirect to `data.redirectTo` ELSE the stored
+*   `nextPathname` ELSE `location.state.nextPathname` ELSE `'/'`.
+*
+* Idiom translation from the React twin: React re-derives the gate values each
+* render; Vue returns `ComputedRef`s off the vue-query result refs so the shell
+* template re-renders reactively as the auth check settles. The one-shot
+* side-effects (logout / callback redirect) run in `watch(..., { immediate })`
+* instead of `useEffect`.
+*/
+/**
+* The no-flash gate state. Composition over the P3 auth query, adding the two
+* shell concerns:
+*
+* 1. `enabled: requireAuth` — when the shell does not gate (`requireAuth` false)
+*    the query never fires and the gate is instantly "authenticated, not
+*    pending" (an ungated shell shows its content immediately).
+* 2. the no-authProvider shortcut — with no `authProvider` the gate is frozen
+*    `{ isPending: false, authenticated: true }` (appless demos never gate),
+*    regardless of `requireAuth`.
+*
+* `requireAuth` is read once at setup (a mount-stable `<Admin>` prop), mirroring
+* how the React twin reads a stable prop per render.
+*/
 function useAuthGate(requireAuth) {
-  const { authProvider } = useCheloneContext();
-  const hasProvider = authProvider != null;
-  const enabled = requireAuth && hasProvider;
-  const { data, isPending, fetchStatus } = useQuery({
-    ...authStateQueryOptions(
-      authProvider ?? {}
-    ),
-    enabled
-  });
-  return {
-    // No provider, or the shell does not gate → always authenticated, never
-    // pending (the no-authProvider / ungated shortcut). This must win over the
-    // query's own `isPending` (vue-query reports `isPending: true` for a
-    // disabled-and-never-fetched query — `fetchStatus === 'idle'`).
-    isPending: computed(
-      () => enabled ? isPending.value && fetchStatus.value !== "idle" : false
-    ),
-    authenticated: computed(
-      () => enabled ? data.value?.authenticated === true : true
-    )
-  };
+	const { authProvider } = useCheloneContext();
+	const enabled = requireAuth && authProvider != null;
+	const { data, isPending, fetchStatus } = useQuery({
+		...authStateQueryOptions(authProvider),
+		enabled
+	});
+	return {
+		isPending: computed(() => enabled ? isPending.value && fetchStatus.value !== "idle" : false),
+		authenticated: computed(() => enabled ? data.value?.authenticated === true : true)
+	};
 }
+/**
+* A per-page auth gate. Fires the auth check for the current subtree; on failure
+* it logs out (default `logoutOnFailure: true`) so the shell returns to the
+* login flow. Returns the same reactive `{ isPending, authenticated }` gate
+* state, so a caller can hold rendering until resolved.
+*/
 function useAuthenticated(options = {}) {
-  const { enabled = true, logoutOnFailure = true } = options;
-  const gate = useAuthGate(enabled);
-  const { authProvider } = useCheloneContext();
-  watch(
-    [gate.isPending, gate.authenticated],
-    ([pending, authenticated]) => {
-      if (!enabled) return;
-      if (pending) return;
-      if (!authenticated && logoutOnFailure) {
-        void authProvider?.logout(void 0);
-      }
-    },
-    { immediate: true }
-  );
-  return gate;
+	const { enabled = true, logoutOnFailure = true } = options;
+	const gate = useAuthGate(enabled);
+	const { authProvider } = useCheloneContext();
+	watch([gate.isPending, gate.authenticated], ([pending, authenticated]) => {
+		if (!enabled) return;
+		if (pending) return;
+		if (!authenticated && logoutOnFailure) authProvider?.logout(void 0);
+	}, { immediate: true });
+	return gate;
 }
-const NEXT_PATHNAME_KEY = "nextPathname";
+/** The Store key the login flow stashes the post-login target under. */
+var NEXT_PATHNAME_KEY = "nextPathname";
+/**
+* Resolve an OAuth auth-callback redirect. On mount, call the provider's
+* `handleCallback`; on success, redirect to the FIRST available of:
+* `data.redirectTo` → the stored `nextPathname` (Store) → `location.state
+* .nextPathname` → `'/'`. Rejections surface via the returned `error`.
+*
+* The redirect fires once (a `watch` on the settled query, guarded by a latch),
+* so a re-render does not re-navigate. Uses `useRedirect` (absolute-http targets
+* are honored, so a provider may redirect off-site).
+*/
 function useHandleAuthCallback() {
-  const { authProvider, store } = useCheloneContext();
-  const redirect = useRedirect();
-  const location = useLocation();
-  const { data, isSuccess, error } = useQuery({
-    queryKey: ["auth", "handleCallback"],
-    queryFn: async () => {
-      if (!authProvider?.handleCallback) {
-        throw new Error(
-          "useHandleAuthCallback: the authProvider does not implement handleCallback."
-        );
-      }
-      return await authProvider.handleCallback() ?? void 0;
-    },
-    // Auth callback is a one-shot side-effecting resolve; never retry/refetch.
-    retry: false,
-    refetchOnWindowFocus: false,
-    staleTime: Number.POSITIVE_INFINITY
-  });
-  let fired = false;
-  watch(
-    isSuccess,
-    (success) => {
-      if (!success || fired) return;
-      fired = true;
-      const fromData = data.value?.redirectTo;
-      const fromStore = store?.getItem(NEXT_PATHNAME_KEY);
-      const fromState = location.value.state?.nextPathname;
-      const target = fromData ?? fromStore ?? fromState ?? "/";
-      redirect(() => target);
-    },
-    { immediate: true }
-  );
-  return { settled: isSuccess, error };
+	const { authProvider, store } = useCheloneContext();
+	const redirect = useRedirect();
+	const location = useLocation();
+	const { data, isSuccess, error } = useQuery({
+		queryKey: ["auth", "handleCallback"],
+		queryFn: async () => {
+			if (!authProvider?.handleCallback) throw new Error("useHandleAuthCallback: the authProvider does not implement handleCallback.");
+			return await authProvider.handleCallback() ?? void 0;
+		},
+		retry: false,
+		refetchOnWindowFocus: false,
+		staleTime: Number.POSITIVE_INFINITY
+	});
+	let fired = false;
+	watch(isSuccess, (success) => {
+		if (!success || fired) return;
+		fired = true;
+		const fromData = data.value?.redirectTo;
+		const fromStore = store?.getItem(NEXT_PATHNAME_KEY);
+		const fromState = location.value.state?.nextPathname;
+		const target = fromData ?? fromStore ?? fromState ?? "/";
+		redirect(() => target);
+	}, { immediate: true });
+	return {
+		settled: isSuccess,
+		error
+	};
 }
-export {
-  useAuthGate,
-  useAuthenticated,
-  useHandleAuthCallback
-};
+export { useAuthGate, useAuthenticated, useHandleAuthCallback };