@chelone/vue 0.0.0-stage → 0.1.0

package/dist/admin/auth-gate.js

@@ -0,0 +1,86 @@
+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";
+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
+    )
+  };
+}
+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 NEXT_PATHNAME_KEY = "nextPathname";
+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 };
+}
+export {
+  useAuthGate,
+  useAuthenticated,
+  useHandleAuthCallback
+};

package/dist/admin/custom-routes.d.ts

@@ -0,0 +1,18 @@
+import type { Component } from "vue";
+import type { RouteRecordRaw } from "vue-router";
+/** An extra route `<Admin>` mounts under its basename (`<Admin :custom-routes>`). */
+export interface CustomRoute {
+    /** The path relative to the admin basename. */
+    path: string;
+    component: Component;
+    name?: string;
+    /**
+     * Render the route alone, outside the layout and the auth gate (a terms page,
+     * a public landing). Without it the route renders inside the layout, behind the gate.
+     */
+    noLayout?: boolean;
+}
+/** The route meta key `<AdminShell>` reads to render a match outside the layout. */
+export declare const NO_LAYOUT_META = "chelone:noLayout";
+/** The vue-router record for a custom route, under `basename`. */
+export declare function toRouteRecord(route: CustomRoute, basename: string): RouteRecordRaw;

package/dist/admin/custom-routes.js

@@ -0,0 +1,14 @@
+import { joinBasename } from "@chelone/core";
+const NO_LAYOUT_META = "chelone:noLayout";
+function toRouteRecord(route, basename) {
+  return {
+    path: joinBasename(`/${route.path}`, basename),
+    name: route.name,
+    component: route.component,
+    meta: route.noLayout ? { [NO_LAYOUT_META]: true } : {}
+  };
+}
+export {
+  NO_LAYOUT_META,
+  toRouteRecord
+};

package/dist/admin/default-error-fallback.vue.d.ts

@@ -0,0 +1,11 @@
+/** Props for {@link DefaultErrorFallback}, and the scope of the `#error` slot. */
+export interface ErrorFallbackProps {
+    /** The thrown error. */
+    error: Error;
+    /** Vue's description of where the error was thrown (a lifecycle or render hook name). */
+    info: string;
+    /** Clear the error and render the wrapped view again. */
+    reset: () => void;
+}
+declare const _default: import("vue").DefineComponent<ErrorFallbackProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ErrorFallbackProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/admin/default-error-fallback.vue.js

@@ -0,0 +1,28 @@
+import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString } from "vue";
+const _hoisted_1 = {
+  role: "alert",
+  "data-chelone": "error-boundary"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "default-error-fallback",
+  props: {
+    error: {},
+    info: {},
+    reset: { type: Function }
+  },
+  setup(__props) {
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1, [
+        _cache[1] || (_cache[1] = createElementVNode("h1", null, "Something went wrong.", -1)),
+        createElementVNode("p", null, toDisplayString(__props.error.message), 1),
+        createElementVNode("button", {
+          type: "button",
+          onClick: _cache[0] || (_cache[0] = ($event) => __props.reset())
+        }, "Try again")
+      ]);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/admin/default-error-fallback2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./default-error-fallback.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/admin/has-dashboard.d.ts

@@ -0,0 +1,17 @@
+/**
+ * The `HasDashboard` seam — the Vue twin of `@chelone/react`'s
+ * `admin/has-dashboard.ts` (`HasDashboardContext` + `useHasDashboard`). `<Admin>`
+ * provides whether a `#dashboard` slot was given so any descendant (the sidebar
+ * `<Menu>`) can render a "Dashboard" entry ONLY when a dashboard exists.
+ *
+ * Vue idiom: React's `createContext`/`useContext` become a typed provide/inject
+ * pair. The inject default is `false`, so a `<Menu>` mounted without an `<Admin>`
+ * (or without a dashboard) simply omits the dashboard item — never throwing.
+ */
+import { type InjectionKey } from "vue";
+/** The provide/inject key carrying whether the app registered a dashboard. */
+export declare const HasDashboardKey: InjectionKey<boolean>;
+/** Provide the dashboard flag for the subtree. `<Admin>` calls this in `setup`. */
+export declare function provideHasDashboard(value: boolean): void;
+/** Read whether the app has a dashboard (drives the conditional menu entry). */
+export declare function useHasDashboard(): boolean;

package/dist/admin/has-dashboard.js

@@ -0,0 +1,15 @@
+import { provide, inject } from "vue";
+const HasDashboardKey = /* @__PURE__ */ Symbol(
+  "chelone-has-dashboard"
+);
+function provideHasDashboard(value) {
+  provide(HasDashboardKey, value);
+}
+function useHasDashboard() {
+  return inject(HasDashboardKey, false);
+}
+export {
+  HasDashboardKey,
+  provideHasDashboard,
+  useHasDashboard
+};

package/dist/admin/navigate-to-first-resource.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/admin/navigate-to-first-resource.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent, computed, watchEffect } from "vue";
+import { useMenuAccess } from "../components/admin/layout/use-menu-access.js";
+import { useResourceRegistry } from "./resource-registry.js";
+import { useNavigate, useCreatePath } from "../router/nav-composables.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "navigate-to-first-resource",
+  setup(__props) {
+    const registry = useResourceRegistry();
+    const navigate = useNavigate();
+    const createPath = useCreatePath();
+    const firstListable = computed(
+      () => Object.values(registry.definitions).find((d) => d.list != null)
+    );
+    const { canAccess, isPending } = useMenuAccess(
+      () => ({ action: "list", resource: firstListable.value?.name ?? "" }),
+      () => firstListable.value != null
+    );
+    watchEffect(
+      () => {
+        const first = firstListable.value;
+        if (first == null || isPending.value || !canAccess.value) return;
+        navigate(createPath({ resource: first.name, type: "list" }), {
+          replace: true
+        });
+      },
+      { flush: "post" }
+    );
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/admin/navigate-to-first-resource2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./navigate-to-first-resource.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/admin/resource-registry.d.ts

@@ -0,0 +1,108 @@
+/**
+ * The runtime resource registry for `@chelone/vue` — the Vue twin of the React
+ * adapter's registry seam (`packages/react/src/resource/registry-hooks.tsx`).
+ * Where React wraps core's vanilla `createResourceRegistry` in a
+ * `useSyncExternalStore`, the Vue adapter models the registry as a *reactive
+ * map* (D3): `<Resource>` children `register` themselves into it on `setup` and
+ * `unregister` on scope disposal, and `<Admin>`'s `watchEffect` rebuilds the
+ * vue-router route table whenever the map's key set changes. Vue's own
+ * reactivity graph replaces the external-store subscription — no bridge needed
+ * because the registry IS reactive.
+ *
+ * The stored `ResourceDefinition` deliberately holds the ACTUAL view components
+ * (`list`/`edit`/`create`/`show`) rather than boolean `has*` route flags: the
+ * Vue router needs the component to mount a route, so the registry doubles as
+ * the source of route records. This differs from core's `ResourceDefinition`
+ * (name + `has*` flags) — a Vue-adapter-local shape, matching how React's
+ * `<Resource>` also carries the view components as props.
+ */
+import { type Component, type ComputedRef, type InjectionKey, type MaybeRefOrGetter } from "vue";
+/**
+ * A registered resource: its name (the registry key + route base) plus the view
+ * components to mount under `/{name}` (list), `/{name}/create`, `/{name}/:id`
+ * (edit), `/{name}/:id/show`. `icon` / `recordRepresentation` are carried for
+ * the menu / breadcrumb surface (later phases).
+ */
+export interface ResourceDefinition {
+    /** The resource name — the registry key and the route base (`/{name}`). */
+    name: string;
+    /** The list view. Presence adds the `/{name}` route. */
+    list?: Component;
+    /** The create view. Presence adds the `/{name}/create` route. */
+    create?: Component;
+    /** The edit view. Presence adds the `/{name}/:id` route. */
+    edit?: Component;
+    /** The show view. Presence adds the `/{name}/:id/show` route. */
+    show?: Component;
+    /** The menu / breadcrumb icon (a Vue component). */
+    icon?: Component;
+    /** How a record renders as a label (field name, function, or component). */
+    recordRepresentation?: unknown;
+}
+/** The reactive resource registry contract `<Admin>` provides and `<Resource>` mutates. */
+export interface ResourceRegistry {
+    /**
+     * The live map of registered resources (resource-name → definition). A
+     * `shallowReactive` object: adding / deleting a key triggers dependents
+     * (`<Admin>`'s route-build `watchEffect`), while the definition VALUES stay
+     * raw so Vue never deep-proxies a component definition.
+     */
+    readonly definitions: Record<string, ResourceDefinition>;
+    /** Register (or replace) a resource under its `name`. */
+    register(definition: ResourceDefinition): void;
+    /** Remove a resource by `name`. Absent name → no-op. */
+    unregister(name: string): void;
+}
+/**
+ * The provide/inject key for the reactive registry. `<Admin>` provides it in
+ * `setup`; `<Resource>` reads it via {@link useResourceRegistry} to
+ * self-register. A typed `InjectionKey` keeps both sites cast-free.
+ */
+export declare const ResourceRegistryKey: InjectionKey<ResourceRegistry>;
+/**
+ * Create a fresh reactive registry. `<Admin>` owns one per instance. The backing
+ * store is a `shallowReactive` map: key add/remove is tracked (so the route
+ * builder re-runs), but the stored definitions — which hold Vue components — are
+ * NOT deep-proxied (proxying a component definition is both wasteful and a
+ * documented Vue footgun).
+ */
+export declare function createResourceRegistry(): ResourceRegistry;
+/**
+ * Read the ambient resource registry. Throws when used outside `<Admin>` — a
+ * `<Resource>` (or any registry consumer) rendered without a provider is a
+ * misuse that must fail loudly (parity with the React twin's
+ * `useResourceRegistry`).
+ */
+export declare function useResourceRegistry(): ResourceRegistry;
+/**
+ * Read the whole reactive definition map (resource-name → definition). A
+ * template or computed that reads it re-runs when a `<Resource>` registers or
+ * unregisters.
+ */
+export declare function useResourceDefinitions(): ResourceRegistry["definitions"];
+/** Options `useResourceDefinition` accepts to target / override a definition. */
+export interface UseResourceDefinitionOptions {
+    /** Target a specific resource; defaults to the ambient `<Resource>`. */
+    resource?: string;
+    hasList?: boolean;
+    hasCreate?: boolean;
+    hasEdit?: boolean;
+    hasShow?: boolean;
+    recordRepresentation?: unknown;
+}
+/** A resource's definition with the four `has*` view flags resolved. */
+export type ResourceDefinitionView = Partial<ResourceDefinition> & {
+    hasList: boolean;
+    hasCreate: boolean;
+    hasEdit: boolean;
+    hasShow: boolean;
+};
+/**
+ * The definition of one resource — the `resource` option or else the ambient
+ * one — with `hasList` / `hasCreate` / `hasEdit` / `hasShow` true when the
+ * resource registered that view component (parity: ra-core's
+ * `useResourceDefinition`, whose flags the Vue registry derives from the view
+ * components it stores). An explicit option wins over the registry entry; an
+ * unregistered resource yields all-false flags plus any override.
+ */
+export declare function useResourceDefinition(options?: MaybeRefOrGetter<UseResourceDefinitionOptions | undefined>): ComputedRef<ResourceDefinitionView>;

package/dist/admin/resource-registry.js

@@ -0,0 +1,55 @@
+import { shallowReactive, inject, computed, toValue } from "vue";
+import { useResourceContext } from "../resource-context.js";
+const ResourceRegistryKey = /* @__PURE__ */ Symbol(
+  "chelone-resource-registry"
+);
+function createResourceRegistry() {
+  const definitions = shallowReactive({});
+  return {
+    definitions,
+    register(definition) {
+      definitions[definition.name] = definition;
+    },
+    unregister(name) {
+      delete definitions[name];
+    }
+  };
+}
+function useResourceRegistry() {
+  const registry = inject(ResourceRegistryKey, null);
+  if (!registry) {
+    throw new Error(
+      "useResourceRegistry: no registry found. Render <Resource> inside <Admin>."
+    );
+  }
+  return registry;
+}
+function useResourceDefinitions() {
+  return useResourceRegistry().definitions;
+}
+function useResourceDefinition(options) {
+  const definitions = useResourceDefinitions();
+  const ambient = useResourceContext();
+  return computed(() => {
+    const opts = toValue(options);
+    const resource = opts?.resource ?? ambient;
+    const base = resource ? definitions[resource] : void 0;
+    return {
+      ...base,
+      hasList: opts?.hasList ?? base?.list != null,
+      hasCreate: opts?.hasCreate ?? base?.create != null,
+      hasEdit: opts?.hasEdit ?? base?.edit != null,
+      hasShow: opts?.hasShow ?? base?.show != null,
+      ...opts?.recordRepresentation !== void 0 && {
+        recordRepresentation: opts.recordRepresentation
+      }
+    };
+  });
+}
+export {
+  ResourceRegistryKey,
+  createResourceRegistry,
+  useResourceDefinition,
+  useResourceDefinitions,
+  useResourceRegistry
+};

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

@@ -0,0 +1,20 @@
+import { type ResourceDefinition } from "./resource-registry.js";
+/** Props for {@link Resource}. */
+export interface ResourceProps {
+    /** The resource name — the registry key and the route base (`/{name}`). */
+    name: string;
+    /** The list view (adds the `/{name}` route). */
+    list?: ResourceDefinition["list"];
+    /** The create view (adds the `/{name}/create` route). */
+    create?: ResourceDefinition["create"];
+    /** The edit view (adds the `/{name}/:id` route). */
+    edit?: ResourceDefinition["edit"];
+    /** The show view (adds the `/{name}/:id/show` route). */
+    show?: ResourceDefinition["show"];
+    /** The menu / breadcrumb icon. */
+    icon?: ResourceDefinition["icon"];
+    /** How a record renders as a label. */
+    recordRepresentation?: ResourceDefinition["recordRepresentation"];
+}
+declare const _default: import("vue").DefineComponent<ResourceProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ResourceProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/admin/resource.vue.js

@@ -0,0 +1,35 @@
+import { defineComponent, onScopeDispose } from "vue";
+import { useResourceRegistry } from "./resource-registry.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "resource",
+  props: {
+    name: {},
+    list: {},
+    create: {},
+    edit: {},
+    show: {},
+    icon: {},
+    recordRepresentation: {}
+  },
+  setup(__props) {
+    const props = __props;
+    const registry = useResourceRegistry();
+    const { name } = props;
+    registry.register({
+      name,
+      list: props.list,
+      create: props.create,
+      edit: props.edit,
+      show: props.show,
+      icon: props.icon,
+      recordRepresentation: props.recordRepresentation
+    });
+    onScopeDispose(() => registry.unregister(name));
+    return (_ctx, _cache) => {
+      return null;
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/admin/resource2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./resource.vue.js";
+export {
+  _sfc_main as default
+};

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

@@ -0,0 +1,15 @@
+import { type ErrorFallbackProps } from "./default-error-fallback.vue.js";
+type __VLS_Slots = {
+    /** The wrapped tree. */
+    default?: () => unknown;
+    /** Replaces the default fallback. */
+    error?: (props: ErrorFallbackProps) => unknown;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/admin/shell-error-boundary.vue.js

@@ -0,0 +1,60 @@
+import { defineComponent, shallowRef, onErrorCaptured, watch, renderSlot, createVNode } from "vue";
+import { useLocation } from "../router/nav-composables.js";
+import _sfc_main$1 from "./default-error-fallback.vue.js";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "shell-error-boundary",
+  setup(__props) {
+    const captured = shallowRef(null);
+    const CAPTURED_SOURCES = /* @__PURE__ */ new Set([
+      "setup function",
+      "render function",
+      "beforeCreate hook",
+      "created hook",
+      "beforeMount hook",
+      "mounted hook",
+      "beforeUpdate hook",
+      "updated",
+      "0",
+      "1",
+      "bc",
+      "c",
+      "bm",
+      "m",
+      "bu",
+      "u"
+    ]);
+    function isCapturedSource(info) {
+      return CAPTURED_SOURCES.has(info.split("#runtime-").pop() ?? info);
+    }
+    onErrorCaptured((error, _instance, info) => {
+      if (captured.value || !isCapturedSource(info)) return;
+      captured.value = {
+        error: error instanceof Error ? error : new Error(String(error)),
+        info
+      };
+      return false;
+    });
+    function reset() {
+      captured.value = null;
+    }
+    const location = useLocation();
+    watch(() => location.value.pathname, reset);
+    return (_ctx, _cache) => {
+      return captured.value ? renderSlot(_ctx.$slots, "error", {
+        key: 0,
+        error: captured.value.error,
+        info: captured.value.info,
+        reset
+      }, () => [
+        createVNode(_sfc_main$1, {
+          error: captured.value.error,
+          info: captured.value.info,
+          reset
+        }, null, 8, ["error", "info"])
+      ]) : renderSlot(_ctx.$slots, "default", { key: 1 });
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/admin/shell-error-boundary2.vue.js

@@ -0,0 +1,4 @@
+import _sfc_main from "./shell-error-boundary.vue.js";
+export {
+  _sfc_main as default
+};

package/dist/admin/slot-routes.d.ts

@@ -0,0 +1,13 @@
+import { type Slots } from "vue";
+import { type Router } from "vue-router";
+/** The route meta key marking the `#catchAll` route, which matches any path. */
+export declare const CATCH_ALL_META = "chelone:catchAll";
+/**
+ * Routes for the page slots that are given, under `basename`. `sync` adds the
+ * route of a slot that has appeared and removes that of one that has gone, so
+ * call it on each update: `useSlots()` is not reactive.
+ */
+export declare function createSlotRoutes(router: Router, slots: Slots, basename: string): {
+    sync: () => boolean;
+    dispose: () => void;
+};

package/dist/admin/slot-routes.js

@@ -0,0 +1,68 @@
+import { joinBasename } from "@chelone/core";
+import { markRaw, defineComponent } from "vue";
+import { useRoute } from "vue-router";
+import { toRouteRecord } from "./custom-routes.js";
+const CATCH_ALL_META = "chelone:catchAll";
+const PAGE_SLOTS = [
+  { name: "authCallback", path: "/auth-callback", noLayout: true },
+  { name: "authenticationError", path: "/authentication-error" },
+  { name: "accessDenied", path: "/access-denied" },
+  { name: "catchAll", path: "/:pathMatch(.*)*" }
+];
+function slotPage(slots, name) {
+  return markRaw(defineComponent({ setup: () => () => slots[name]?.() }));
+}
+function catchAllPage(slots, basename) {
+  const indexPath = joinBasename("/", basename).toLowerCase();
+  return markRaw(
+    defineComponent({
+      setup() {
+        const route = useRoute();
+        return () => {
+          const path = route.path.toLowerCase();
+          return path === indexPath || path === `${indexPath}/` ? null : slots.catchAll?.();
+        };
+      }
+    })
+  );
+}
+function createSlotRoutes(router, slots, basename) {
+  const removers = /* @__PURE__ */ new Map();
+  function sync() {
+    let changed = false;
+    for (const { name, path, noLayout } of PAGE_SLOTS) {
+      const given = slots[name] != null;
+      if (!given) {
+        if (removers.has(name)) {
+          removers.get(name)?.();
+          removers.delete(name);
+          changed = true;
+        }
+      } else if (!removers.has(name)) {
+        const route = {
+          path,
+          noLayout,
+          component: name === "catchAll" ? catchAllPage(slots, basename) : slotPage(slots, name)
+        };
+        const record = toRouteRecord(route, basename);
+        removers.set(
+          name,
+          router.addRoute(
+            name === "catchAll" ? { ...record, meta: { ...record.meta, [CATCH_ALL_META]: true } } : record
+          )
+        );
+        changed = true;
+      }
+    }
+    return changed;
+  }
+  function dispose() {
+    for (const remove of removers.values()) remove();
+    removers.clear();
+  }
+  return { sync, dispose };
+}
+export {
+  CATCH_ALL_META,
+  createSlotRoutes
+};