@real-router/solid 0.11.1 → 0.12.0

package/src/components/RouteView/components.tsx

@@ -30,50 +30,56 @@ export interface NotFoundMarker {
 
 export type RouteViewMarker = MatchMarker | SelfMarker | NotFoundMarker;
 
-export function Match(props: MatchProps): JSX.Element {
-  const result: MatchMarker = {
-    $$type: MATCH_MARKER,
-    segment: props.segment,
-    exact: props.exact ?? false,
-    fallback: props.fallback,
+// §8.1 audit fix (LOW #8) — three marker factories share the
+// `$$type + children getter` skeleton plus a small per-marker payload.
+// `createMarker` keeps the shared shape in one place; each public factory
+// (Match/Self/NotFound) only provides what differs.
+//
+// The `children` getter (not a plain field) is intentional: it lets the
+// marker capture Solid's reactive `props.children` lazily, so swapping the
+// marker content in a parent component re-evaluates at render time without
+// pulling stale references.
+//
+// Marker objects are identified by `$$type` Symbol in RouteView/helpers.tsx,
+// not rendered as JSX. The `as unknown as JSX.Element` cast is required at
+// the call site because `JSX.Element` does not include arbitrary marker
+// shapes.
+function createMarker<M extends RouteViewMarker>(
+  type: M["$$type"],
+  getChildren: () => JSX.Element,
+  extras?: Omit<M, "$$type" | "children">,
+): JSX.Element {
+  const result = {
+    $$type: type,
+    ...extras,
     get children(): JSX.Element {
-      return props.children;
+      return getChildren();
     },
   };
 
-  // Marker object is identified by $$type Symbol in RouteView/helpers.tsx,
-  // not rendered as JSX. Cast required because JSX.Element does not include
-  // arbitrary marker shapes.
   return result as unknown as JSX.Element;
 }
 
+export function Match(props: MatchProps): JSX.Element {
+  return createMarker<MatchMarker>(MATCH_MARKER, () => props.children, {
+    segment: props.segment,
+    exact: props.exact ?? false,
+    fallback: props.fallback,
+  });
+}
+
 Match.displayName = "RouteView.Match";
 
 export function Self(props: SelfProps): JSX.Element {
-  const result: SelfMarker = {
-    $$type: SELF_MARKER,
+  return createMarker<SelfMarker>(SELF_MARKER, () => props.children, {
     fallback: props.fallback,
-    get children(): JSX.Element {
-      return props.children;
-    },
-  };
-
-  // See Match for the marker-pattern rationale.
-  return result as unknown as JSX.Element;
+  });
 }
 
 Self.displayName = "RouteView.Self";
 
 export function NotFound(props: NotFoundProps): JSX.Element {
-  const result: NotFoundMarker = {
-    $$type: NOT_FOUND_MARKER,
-    get children(): JSX.Element {
-      return props.children;
-    },
-  };
-
-  // See Match for the marker-pattern rationale.
-  return result as unknown as JSX.Element;
+  return createMarker<NotFoundMarker>(NOT_FOUND_MARKER, () => props.children);
 }
 
 NotFound.displayName = "RouteView.NotFound";

package/src/components/ServerOnly.tsx

@@ -0,0 +1,20 @@
+import { Show } from "solid-js";
+
+import { createMountedSignal } from "../utils/createMountedSignal";
+
+import type { JSX } from "solid-js";
+
+export interface ServerOnlyProps {
+  readonly children: JSX.Element;
+  readonly fallback?: JSX.Element;
+}
+
+export function ServerOnly(props: ServerOnlyProps): JSX.Element {
+  const mounted = createMountedSignal();
+
+  return (
+    <Show when={mounted()} fallback={props.children}>
+      {props.fallback}
+    </Show>
+  );
+}

package/src/components/Streamed.tsx

@@ -0,0 +1,23 @@
+import { Suspense } from "solid-js";
+
+import type { JSX } from "solid-js";
+
+export interface StreamedProps {
+  /** Shown while any descendant `<Await>` / `createResource` suspends. */
+  readonly fallback: JSX.Element;
+  readonly children: JSX.Element;
+}
+
+/**
+ * Cross-adapter alias for Solid's `<Suspense fallback={…}>`. Symmetric naming
+ * with the React/Preact/Svelte/Vue/Angular `<Streamed>` components — pick
+ * `<Streamed>` for cross-framework consistency, or use Solid's native
+ * `<Suspense>` directly when team conventions prefer that.
+ *
+ * Solid's `<Suspense>` is a built-in primitive; out-of-order resolution +
+ * splice scripts during `renderToStream` are part of the runtime. See
+ * Solid's SSR docs for the wire-format details.
+ */
+export function Streamed(props: StreamedProps): JSX.Element {
+  return <Suspense fallback={props.fallback}>{props.children}</Suspense>;
+}

package/src/constants.ts

@@ -1,9 +1,27 @@
 /**
- * Stable empty object for default params
+ * Stable empty object for default params.
+ *
+ * `Object.freeze` makes mutation throw under ESM strict mode — this guards
+ * against accidental writes that would corrupt the shared default across
+ * every Link without explicit params.
+ *
+ * §8.1 audit note (LOW #19): consumers cast `EMPTY_PARAMS as P` at usage
+ * sites (e.g. `Link.tsx`, `directives/link.tsx`). The cast is required for
+ * type compatibility with the generic `P extends Params` and DOES technically
+ * widen the `Readonly<{}>` type, but the underlying object stays frozen at
+ * runtime — any attempt to mutate fails at the JS engine level regardless
+ * of TS-level visibility. The frozen sentinel is also used by Link's
+ * fast-path identity check (`props.routeParams === undefined` after the
+ * §8.1 audit fix); changing this object's identity would silently break
+ * that path.
  */
 export const EMPTY_PARAMS = Object.freeze({});
 
 /**
- * Stable empty options object
+ * Stable empty options object.
+ *
+ * Same freeze/cast guarantees as `EMPTY_PARAMS` — the sentinel is shared
+ * across all default `routeOptions` consumers (`Link`, `use:link`) to
+ * avoid per-render `{}` allocations.
  */
 export const EMPTY_OPTIONS = Object.freeze({});

package/src/context.ts

@@ -1,4 +1,4 @@
-import { createContext } from "solid-js";
+import { createContext, useContext } from "solid-js";
 
 import type { RouteState } from "./types";
 import type { Router, Navigator } from "@real-router/core";
@@ -13,3 +13,23 @@ export interface RouterContextValue {
 export const RouterContext = createContext<RouterContextValue | null>(null);
 
 export const RouteContext = createContext<Accessor<RouteState> | null>(null);
+
+/**
+ * Read the required RouterContext or throw a labelled error. Internal helper
+ * — consolidates 4 copies of the same `useContext + null-check + throw`
+ * block across the public hooks/components/directives. The `consumerName`
+ * parameter keeps each callsite's error message specific (so the consumer
+ * sees "useRouter must be used within a RouterProvider", not a generic
+ * "context missing" message).
+ */
+export function useRequiredRouterContext(
+  consumerName: string,
+): RouterContextValue {
+  const ctx = useContext(RouterContext);
+
+  if (!ctx) {
+    throw new Error(`${consumerName} must be used within a RouterProvider`);
+  }
+
+  return ctx;
+}

package/src/createSignalFromSource.ts

@@ -6,8 +6,42 @@ import type { Accessor } from "solid-js";
 export function createSignalFromSource<T>(
   source: RouterSource<T>,
 ): Accessor<T> {
-  const [value, setValue] = createSignal<T>(source.getSnapshot());
+  // Mini-sprint E.5 (audit-5 §4.2 #7) — defensive init-phase snapshot
+  // reads. A throwing `getSnapshot()` during construction would
+  // propagate up through `createSignal<T>(...)` (or the post-subscribe
+  // re-sync below) into the reactive owner, tearing down the entire
+  // RouterProvider subtree (and any siblings sharing the owner). Catch
+  // + log + fall back to `undefined` (initial) or skip-update (post-
+  // subscribe re-sync) so the accessor still constructs; the next
+  // emit refreshes the value.
+  //
+  // Post-init emit-time throws are NOT wrapped — they bubble to Solid's
+  // `<ErrorBoundary>` (or surface as unhandled errors in dev) so
+  // genuine source bugs aren't silently masked.
+  let initial: T;
 
+  try {
+    initial = source.getSnapshot();
+  } catch (error) {
+    console.error(
+      "[real-router] createSignalFromSource: initial getSnapshot threw — accessor defaulting to undefined.",
+      error,
+    );
+    initial = undefined as T;
+  }
+
+  const [value, setValue] = createSignal<T>(initial);
+
+  // `sync` is a stable reference (defined once at outer scope) so the
+  // subscribe callback below does not re-allocate it per emit. Solid's
+  // `setValue(fn)` treats fn as an updater `(prev) => next`; our updater
+  // ignores `prev` and reads the latest snapshot fresh, which gives a
+  // function-form micro-allocation cost (one extra fn call per emit) BUT
+  // a much smaller TS surface than the `setValue(value)` direct form —
+  // that overload is typed `Exclude<T, Function>`, requiring per-call
+  // `as Exclude<T, (...args: never[]) => unknown>` casts for generic T.
+  // The micro-opt is not worth the cast complexity.
+  // See §8.2 audit note.
   const sync = (): T => source.getSnapshot();
 
   const unsubscribe = source.subscribe(() => {
@@ -15,10 +49,19 @@ export function createSignalFromSource<T>(
   });
 
   // Re-read after subscribe: lazy sources reconcile their snapshot in
-  // onFirstSubscribe (when reused after disconnect via cache). Listener is not
-  // notified for that internal update, so we must sync the signal manually.
-  // No-op when snapshot is unchanged (signal equality check).
-  setValue(sync);
+  // onFirstSubscribe (when reused after disconnect via cache). Listener
+  // is not notified for that internal update, so we must sync manually.
+  // No-op when snapshot is unchanged (signal equality check). Wrapped
+  // because this is still init-phase: a throw here ALSO tears down the
+  // owner, same as the initial read above.
+  try {
+    setValue(sync);
+  } catch (error) {
+    console.error(
+      "[real-router] createSignalFromSource: post-subscribe getSnapshot threw — accessor retains initial value.",
+      error,
+    );
+  }
 
   onCleanup(() => {
     unsubscribe();

package/src/createStoreFromSource.ts

@@ -3,15 +3,62 @@ import { createStore, reconcile } from "solid-js/store";
 
 import type { RouterSource } from "@real-router/sources";
 
+/**
+ * Bridges a `RouterSource<T>` into a Solid store (`createStore` + `reconcile`).
+ *
+ * Unlike `createSignalFromSource` (whole-value replacement via `===`), this
+ * bridge uses `reconcile` on every emit so **unchanged nested paths retain
+ * their object identity**. Components that read only `state.route.name` will
+ * not re-run when `state.route.params` changes — granular reactivity without
+ * manual memoisation.
+ *
+ * **Ownership**: calls `onCleanup` — must be called inside a reactive owner
+ * (component body or `createRoot`). Same contract as `createSignalFromSource`.
+ *
+ * **Lazy-source re-sync**: after `source.subscribe()`, a cached lazy source
+ * may reconcile its snapshot in `onFirstSubscribe`. The listener is not
+ * notified for that internal update, so we re-read immediately after
+ * subscribing (`setState(reconcile(source.getSnapshot()))`) — mirrors the
+ * same pattern in `createSignalFromSource`. `reconcile` is a no-op when the
+ * snapshot is structurally unchanged, so there is no spurious reactivity cost.
+ */
 export function createStoreFromSource<T extends object>(
   source: RouterSource<T>,
 ): T {
-  const [state, setState] = createStore<T>({ ...source.getSnapshot() });
+  const initialSnapshot = source.getSnapshot();
+  const [state, setState] = createStore<T>({ ...initialSnapshot });
+
+  // Track the last reconciled snapshot reference to short-circuit redundant
+  // `reconcile` calls. Cached lazy sources (e.g. `createRouteNodeSource`)
+  // stabilize their snapshot — the same reference flows through multiple
+  // emits when nothing in the node's slice changed. `reconcile` itself
+  // handles identity (no-ops on structurally-equal input), but a reference
+  // check is cheaper than the structural walk and avoids the function call
+  // entirely on every navigation × N store consumers (§8b H10 audit fix).
+  let lastSnapshot: T = initialSnapshot;
 
   const unsubscribe = source.subscribe(() => {
-    setState(reconcile(source.getSnapshot()));
+    const nextSnapshot = source.getSnapshot();
+
+    if (nextSnapshot === lastSnapshot) {
+      return;
+    }
+
+    lastSnapshot = nextSnapshot;
+    setState(reconcile(nextSnapshot));
   });
 
+  // Re-read after subscribe: lazy sources reconcile their snapshot in
+  // onFirstSubscribe (when reused after disconnect via cache). The listener
+  // is not notified for that internal update, so we must reconcile manually.
+  // Guarded by the same reference check so a no-op stays free.
+  const afterSubscribe = source.getSnapshot();
+
+  if (afterSubscribe !== lastSnapshot) {
+    lastSnapshot = afterSubscribe;
+    setState(reconcile(afterSubscribe));
+  }
+
   onCleanup(unsubscribe);
 
   return state;

package/src/directives/link.tsx

@@ -24,30 +24,38 @@ export function link<P extends Params = Params>(
   const router = useRouter();
   const options = accessor();
 
+  // audit-2026-05-17 §8a cleanup — single instanceof probe, single EMPTY_PARAMS
+  // default. Previously evaluated three times for the <a>-only branches and
+  // twice for routeParams. The directive accessor is read once at init
+  // (documented "use:link Options Are Captured Once"), so both lookups are
+  // stable and worth hoisting.
+  const anchor = element instanceof HTMLAnchorElement ? element : null;
+  const resolvedRouteParams = (options.routeParams ?? EMPTY_PARAMS) as P;
+  const resolvedRouteOptions = options.routeOptions ?? EMPTY_OPTIONS;
+
   // Set href on <a> elements
-  if (element instanceof HTMLAnchorElement) {
-    const href = buildHref(
-      router,
-      options.routeName,
-      options.routeParams ?? (EMPTY_PARAMS as P),
-    );
+  if (anchor) {
+    const href = buildHref(router, options.routeName, resolvedRouteParams);
 
     if (href === undefined) {
-      element.removeAttribute("href");
+      anchor.removeAttribute("href");
     } else {
-      element.href = href;
+      anchor.href = href;
     }
   }
 
   applyLinkA11y(element);
 
-  // Active class tracking (reactive)
+  // Active class tracking: only `isActive` is reactive (createEffect toggles
+  // the class on each emit). The `options` object itself is captured ONCE at
+  // init (see gotcha "use:link Options Are Captured Once") — changing
+  // `activeClassName` / `routeName` / `routeParams` later has no effect.
   if (options.activeClassName) {
     const activeClassName = options.activeClassName;
     const activeSource = createActiveRouteSource(
       router,
       options.routeName,
-      options.routeParams ?? (EMPTY_PARAMS as P),
+      resolvedRouteParams,
       {
         strict: options.activeStrict ?? false,
         ignoreQueryParams: options.ignoreQueryParams ?? true,
@@ -65,16 +73,33 @@ export function link<P extends Params = Params>(
     if (!shouldNavigate(evt)) {
       return;
     }
-    if (element instanceof HTMLAnchorElement) {
+
+    // Mini-sprint E.2 (audit-5 §4.2 #2) — respect upstream
+    // preventDefault. `<Link>` checks `local.onClick(evt); if
+    // (evt.defaultPrevented) return;` because it owns the React-style
+    // onClick prop. The directive has no equivalent prop, but the
+    // consumer may register their OWN click listener on the same
+    // element (DOM event order is "addEventListener queue, in
+    // registration order"). If their listener called preventDefault
+    // to opt-out of navigation, the directive must honour that.
+    if (evt.defaultPrevented) {
+      return;
+    }
+
+    // Symmetric with <Link> (#P0.6 audit): on an <a target="_blank"> the
+    // browser opens the URL in a new tab/window natively. Intercepting the
+    // click via preventDefault + router.navigate would suppress the new
+    // tab and silently keep the user on the current page.
+    if (anchor?.target === "_blank") {
+      return;
+    }
+
+    if (anchor) {
       evt.preventDefault();
     }
 
     router
-      .navigate(
-        options.routeName,
-        options.routeParams ?? (EMPTY_PARAMS as P),
-        options.routeOptions ?? EMPTY_OPTIONS,
-      )
+      .navigate(options.routeName, resolvedRouteParams, resolvedRouteOptions)
       .catch(() => {});
   }
 

package/src/hooks/useDeferred.tsx

@@ -0,0 +1,36 @@
+import { useRoute } from "./useRoute";
+
+import type { Accessor } from "solid-js";
+
+interface DeferredContext {
+  ssrDataDeferred?: Record<string, Promise<unknown>>;
+}
+
+const NEVER_PROMISE = new Promise<never>(() => {
+  // Intentionally never resolves — surfaces a forever-pending Suspense boundary
+  // when a key is requested that the loader never declared.
+});
+
+/**
+ * Read a deferred promise published by `defer({ deferred: { <key>: Promise } })`
+ * inside an SSR data loader.
+ *
+ * Returns a Solid `Accessor<Promise<T>>` so the value tracks the active route
+ * — re-reading on navigation picks up the new state's deferred map. Wrap with
+ * `<Await name="key">{(value) => …}</Await>` (this package), which builds on
+ * `createResource` + `<Suspense>` for native Solid streaming.
+ *
+ * Returns a forever-pending promise when the key is missing — surfaces
+ * loader/consumer key drift as a visible Suspense fallback rather than a
+ * silent runtime error.
+ */
+export function useDeferred<T = unknown>(key: string): Accessor<Promise<T>> {
+  const routeAccessor = useRoute();
+
+  return () => {
+    const context = routeAccessor().route.context as DeferredContext;
+    const deferred = context.ssrDataDeferred;
+
+    return (deferred?.[key] ?? NEVER_PROMISE) as Promise<T>;
+  };
+}

package/src/hooks/useNavigator.tsx

@@ -1,15 +1,6 @@
-import { useContext } from "solid-js";
-
-import { RouterContext } from "../context";
+import { useRequiredRouterContext } from "../context";
 
 import type { Navigator } from "@real-router/core";
 
-export const useNavigator = (): Navigator => {
-  const ctx = useContext(RouterContext);
-
-  if (!ctx) {
-    throw new Error("useNavigator must be used within a RouterProvider");
-  }
-
-  return ctx.navigator;
-};
+export const useNavigator = (): Navigator =>
+  useRequiredRouterContext("useNavigator").navigator;

package/src/hooks/useRouteUtils.tsx

@@ -3,10 +3,48 @@ import { getRouteUtils } from "@real-router/route-utils";
 
 import { useRouter } from "./useRouter";
 
+import type { Router } from "@real-router/core";
 import type { RouteUtils } from "@real-router/route-utils";
 
+// §8.1 audit fix (MED) — cache the `RouteUtils` per (router, tree) so N
+// components calling `useRouteUtils()` against the same router share ONE
+// chain through `getPluginApi(router).getTree()` + `getRouteUtils(tree)`.
+//
+// Why two-level (router + tree) and not just router:
+//   `getRouteUtils` is WeakMap-cached by tree root, BUT a RouteUtils
+//   instance is built FROM the tree at construction time — its internal
+//   `getChain`/`getSiblings` caches are pre-computed Object.freeze'd arrays
+//   (see `@real-router/route-utils` CLAUDE.md). If the router replaces its
+//   tree (e.g. `routesApi.replace([...])`), the old RouteUtils is stale.
+//   Caching only by router would serve the stale instance.
+//
+// Storing `{ tree, utils }` per router lets us detect tree replacement and
+// recompute. In the steady state (no tree mutation), this is a cheap
+// reference compare; under tree replacement, the cache self-heals on the
+// next call.
+//
+// WeakMap keys on the router — entries are released automatically when the
+// router is garbage-collected.
+interface CachedEntry {
+  tree: unknown;
+  utils: RouteUtils;
+}
+
+const routeUtilsCache = new WeakMap<Router, CachedEntry>();
+
 export const useRouteUtils = (): RouteUtils => {
   const router = useRouter();
+  const tree = getPluginApi(router).getTree();
+
+  const cached = routeUtilsCache.get(router);
+
+  if (cached?.tree === tree) {
+    return cached.utils;
+  }
+
+  const utils = getRouteUtils(tree);
+
+  routeUtilsCache.set(router, { tree, utils });
 
-  return getRouteUtils(getPluginApi(router).getTree());
+  return utils;
 };

package/src/hooks/useRouter.tsx

@@ -1,15 +1,6 @@
-import { useContext } from "solid-js";
-
-import { RouterContext } from "../context";
+import { useRequiredRouterContext } from "../context";
 
 import type { Router } from "@real-router/core";
 
-export const useRouter = (): Router => {
-  const ctx = useContext(RouterContext);
-
-  if (!ctx) {
-    throw new Error("useRouter must be used within a RouterProvider");
-  }
-
-  return ctx.router;
-};
+export const useRouter = (): Router =>
+  useRequiredRouterContext("useRouter").router;

package/src/index.tsx

@@ -30,6 +30,8 @@ export { RouterProvider } from "./RouterProvider";
 
 export { RouterContext, RouteContext } from "./context";
 
+export type { RouterContextValue } from "./context";
+
 export { createSignalFromSource } from "./createSignalFromSource";
 
 export { createStoreFromSource } from "./createStoreFromSource";

package/src/ssr.tsx

@@ -0,0 +1,39 @@
+// SSR-feature entry — Solid 1.7+
+//
+// Server-side and SSR-aware components/hooks. Mirror of `@real-router/react/ssr`
+// — same exports, Solid-native idioms (Accessor returns, createResource-backed
+// Await, native Suspense for Streamed).
+
+// Components
+export { ClientOnly } from "./components/ClientOnly";
+
+export { ServerOnly } from "./components/ServerOnly";
+
+export { Await } from "./components/Await";
+
+export { Streamed } from "./components/Streamed";
+
+export { HttpStatusCode } from "./components/HttpStatusCode";
+
+export { HttpStatusProvider } from "./components/HttpStatusProvider";
+
+// Hooks
+export { useDeferred } from "./hooks/useDeferred";
+
+// Utilities
+export { createHttpStatusSink } from "./utils/createHttpStatusSink";
+
+// Types
+export type { ClientOnlyProps } from "./components/ClientOnly";
+
+export type { ServerOnlyProps } from "./components/ServerOnly";
+
+export type { AwaitProps } from "./components/Await";
+
+export type { StreamedProps } from "./components/Streamed";
+
+export type { HttpStatusCodeProps } from "./components/HttpStatusCode";
+
+export type { HttpStatusProviderProps } from "./components/HttpStatusProvider";
+
+export type { HttpStatusSink } from "./utils/createHttpStatusSink";

package/src/utils/createHttpStatusSink.ts

@@ -0,0 +1,31 @@
+/**
+ * Render-scoped HTTP status sink. Created per request on the server, passed to
+ * `<HttpStatusProvider sink={...}>`, and read after `renderToString` /
+ * `renderToStream` to apply the value to the HTTP response.
+ *
+ * Last write wins: if the rendered tree mounts more than one
+ * `<HttpStatusCode />`, the value reflects the last component that ran during
+ * the render pass.
+ *
+ * No-op on the client — `<HttpStatusCode />` reads the optional context and
+ * skips the write when no provider is mounted, so the same component tree can
+ * be hydrated without changing behaviour.
+ *
+ * Constraints:
+ * - **Per-request only.** Don't share a sink across requests; the rendered
+ *   tree mutates `code` in place. Module-level singletons leak status
+ *   between concurrent requests.
+ * - **Don't `Object.freeze` the sink.** The component writes to `.code`;
+ *   freezing makes the assignment throw under ESM strict mode.
+ * - **Hydration symmetry:** mount `<HttpStatusProvider>` on both server and
+ *   client (with a throwaway client sink). Solid emits `data-hk` markers
+ *   per component boundary; an extra provider on one side desyncs the
+ *   counter and breaks the hydration walker.
+ */
+export interface HttpStatusSink {
+  code: number | undefined;
+}
+
+export function createHttpStatusSink(): HttpStatusSink {
+  return { code: undefined };
+}

package/src/utils/createMountedSignal.ts

@@ -0,0 +1,26 @@
+import { createSignal, onMount } from "solid-js";
+
+import type { Accessor } from "solid-js";
+
+/**
+ * Returns a boolean accessor that is `false` during initial render (SSR
+ * and the first client paint) and flips to `true` once the component
+ * has mounted in the browser.
+ *
+ * Solid guarantees that `onMount` does NOT fire during `renderToString` /
+ * `renderToStream`, so the accessor stays `false` server-side — this is
+ * the building block for SSR boundary components (`<ClientOnly>` /
+ * `<ServerOnly>`).
+ *
+ * Consolidates the identical `createSignal(false) + onMount(setMounted)`
+ * pattern across the two boundary components (§8a Q15).
+ */
+export function createMountedSignal(): Accessor<boolean> {
+  const [mounted, setMounted] = createSignal(false);
+
+  onMount(() => {
+    setMounted(true);
+  });
+
+  return mounted;
+}