@wrikka/solid-framework 0.0.0-stage → 0.15.0

package/src/app/modules/file-routes/presentation/page-tree.ts

@@ -0,0 +1,211 @@
+/**
+ * Page Tree
+ * Composes the matched route's subtree — loader resource (SSR inline /
+ * client fetch with hydration seeding), poll revalidation, validated
+ * search params, context provider chain, and the layout wrap
+ */
+
+import {
+	createComponent,
+	createMemo,
+	createResource,
+	type JSX,
+	onCleanup,
+} from "solid-js";
+import { isServer } from "solid-js/web";
+import type { HydrationPayload } from "#render/types";
+import type { FileRouteMatch } from "../domain";
+import {
+	LoaderDataContext,
+	LoaderRetryContext,
+	readHydrated,
+	runRouteLoader,
+} from "./loader-data";
+import type { AppLocation } from "./location";
+import { SearchContext } from "./location";
+import { RouteActionsContext, RouteMetaContext } from "./route-contexts";
+import type { RouteModules } from "./route-modules";
+import { peekModule, resolveModule, routeComponent } from "./route-modules";
+import { SlotContext } from "./slot";
+
+export interface PageTreeDeps {
+	modules: RouteModules;
+	location: AppLocation;
+	/** Current Request during SSR — provided by the routed server entry */
+	request: Request | undefined;
+	hydration: HydrationPayload | undefined;
+}
+
+export const createPageTree = (
+	deps: PageTreeDeps,
+	m: FileRouteMatch,
+): JSX.Element => {
+	const { location, request, hydration } = deps;
+	// Route `loader` export — SSR runs it inline (into the hydration
+	// payload); client navigation fetches /_server/loader.
+	// Hydration must not suspend: seed from the payload via
+	// ssrLoadFrom/initialValue, and skip the resource entirely when
+	// the module is already resolved and exports no loader
+	const resolved = peekModule(deps.modules, m.route.file);
+	const loaderData = (() => {
+		if (resolved && !resolved.loader) return undefined;
+		const path = location.pathname();
+		const hydrated = isServer ? undefined : readHydrated(path);
+		const [data, controls] = createResource(
+			// version() re-tracks so single-flight refresh() re-runs the
+			// loader — readHydrated then returns the flight payload
+			() => {
+				location.version();
+				// Loader chain — layout loaders run outermost→innermost,
+				// each receives the previous result as ctx.parent; the
+				// page loader's result becomes useLoaderData()
+				const files = [...m.route.layouts, m.route.file];
+				return files.reduce<Promise<unknown>>(
+					(parent, file) =>
+						parent.then((p) =>
+							resolveModule(deps.modules, file).then((mod) =>
+								runRouteLoader(
+									mod.loader as
+										| ((ctx: {
+												request: Request;
+												params: Record<string, string>;
+												parent?: unknown;
+										  }) => unknown)
+										| undefined,
+									file === m.route.file ? path : file,
+									m.params,
+									request,
+									hydration,
+									p,
+									file === m.route.file ? path : undefined,
+									mod.loaderCache as
+										| { ttl?: number; tags?: string[] }
+										| undefined,
+									mod.schema as
+										| {
+												params?: (raw: Record<string, string>) => unknown;
+												body?: (raw: unknown) => unknown;
+										  }
+										| undefined,
+								),
+							),
+						),
+					Promise.resolve(undefined),
+				);
+			},
+			{
+				initialValue: hydrated,
+				...(isServer ? {} : { ssrLoadFrom: "initial" as const }),
+			},
+		);
+		return { data, refetch: controls.refetch };
+	})();
+
+	// page({ poll }) — client-only interval revalidation of the
+	// loader chain (live dashboards without realtime setup)
+	const pollMs = (resolved as { poll?: number } | undefined)?.poll;
+	const pauseHidden =
+		(resolved as { pollPauseHidden?: boolean } | undefined)?.pollPauseHidden ??
+		false;
+	if (!isServer && pollMs && loaderData) {
+		const timer = setInterval(() => {
+			if (pauseHidden && document.hidden) return;
+			void loaderData.refetch();
+		}, pollMs);
+		onCleanup(() => clearInterval(timer));
+	}
+
+	// Validated search params — route `validateSearch` export parses
+	// `?query` into the route's typed shape (raw record otherwise)
+	const search = createMemo(() => {
+		const raw = Object.fromEntries(new URLSearchParams(location.search()));
+		const validate = resolved?.validateSearch as
+			| ((raw: Record<string, string>) => unknown)
+			| undefined;
+		return validate ? validate(raw) : raw;
+	});
+
+	// innermost = page; wrap layouts innermost → outermost
+	const slotName = () => m.route.slot;
+	let tree: JSX.Element = createComponent(LoaderDataContext.Provider, {
+		value: loaderData?.data,
+		get children() {
+			return createComponent(LoaderRetryContext.Provider, {
+				get value() {
+					return loaderData?.refetch;
+				},
+				get children() {
+					return createComponent(SearchContext.Provider, {
+						get value() {
+							return search();
+						},
+						get children() {
+							return createComponent(SlotContext.Provider, {
+								value: slotName,
+								get children() {
+									return createComponent(RouteMetaContext.Provider, {
+										value:
+											(resolved as { meta?: Record<string, unknown> })?.meta ??
+											{},
+										get children() {
+											return createComponent(RouteActionsContext.Provider, {
+												value:
+													(resolved as { actionNames?: string[] })
+														?.actionNames ?? [],
+												get children() {
+													return createComponent(
+														routeComponent(deps.modules, m.route.file),
+														{
+															params: m.params,
+															// `route()` components read `props.data()` —
+															// flat-export pages use useLoaderData()
+															get data() {
+																return loaderData?.data;
+															},
+															get search() {
+																return search();
+															},
+															// `@slot` parallel routes receive their slot name
+															...(m.route.slot ? { slot: m.route.slot } : {}),
+														},
+													);
+												},
+											});
+										},
+									});
+								},
+							});
+						},
+					});
+				},
+			});
+		},
+	});
+	// page({ layout: false }) — opt out of inherited _layout files
+	const layoutOptOut =
+		(peekModule(deps.modules, m.route.file) as { layout?: boolean })?.layout ===
+		false;
+	// page({ scroll: false }) — restore the saved position instead
+	// of scrolling to top (feeds, chat UIs)
+	const keepScroll =
+		(peekModule(deps.modules, m.route.file) as { scroll?: boolean })?.scroll ===
+		false;
+	if (keepScroll && !isServer) {
+		queueMicrotask(() => {
+			const y = location.savedScroll(location.pathname());
+			if (y !== undefined) window.scrollTo(0, y);
+		});
+	}
+	const layoutFiles = layoutOptOut ? [] : [...m.route.layouts].reverse();
+	for (const layoutFile of layoutFiles) {
+		const Layout = routeComponent(deps.modules, layoutFile);
+		const children = tree;
+		tree = createComponent(Layout, {
+			params: m.params,
+			get children() {
+				return children;
+			},
+		});
+	}
+	return tree;
+};

package/src/app/modules/file-routes/presentation/route-contexts.ts

@@ -0,0 +1,89 @@
+/**
+ * Route Contexts — the contexts FileRoutes provides around a match:
+ * nav items (`page({ meta: { nav } })`), route meta (`page({ meta })`),
+ * and named `page({ actions })` keys — plus the hooks that read them
+ */
+
+import { type Accessor, createContext, useContext } from "solid-js";
+import type { RouteManifest } from "../domain";
+import { peekModule, type RouteModules } from "./route-modules";
+
+/** Provided by FileRoutes around the matched page — `page({ meta })` */
+export const RouteMetaContext = createContext<Record<string, unknown>>({});
+
+/** Provided by FileRoutes — names of `page({ actions })` on the route */
+export const RouteActionsContext = createContext<string[]>([]);
+
+/** Provided by FileRoutes — routes whose module has `meta.nav` set */
+export const NavContext = createContext<
+	Accessor<
+		Array<{ path: string; meta: Record<string, unknown>; order?: number }>
+	>
+>(() => []);
+
+/** Nav routes — `page({ meta: { nav: "main", title: "Home" } })` */
+export const useNav = (): Array<{
+	path: string;
+	meta: Record<string, unknown>;
+	order?: number;
+}> => useContext(NavContext)();
+
+/** Nav grouped by `meta.nav.group` — `useNavTree()["docs"]` */
+export const useNavTree = (): Record<
+	string,
+	Array<{ path: string; meta: Record<string, unknown>; order?: number }>
+> => {
+	const items = useNav();
+	const groups: Record<
+		string,
+		Array<{ path: string; meta: Record<string, unknown>; order?: number }>
+	> = {};
+	for (const item of items) {
+		const g = String((item.meta.nav as Record<string, unknown>)?.group ?? "");
+		const list = groups[g] ?? [];
+		list.push(item);
+		groups[g] = list;
+	}
+	return groups;
+};
+
+/**
+ * Nav items — routes whose (loaded) module declares `meta.nav`,
+ * ordered by `page({ order })` (unordered last, then by path)
+ */
+export const computeNavItems = (
+	manifest: RouteManifest,
+	modules: RouteModules,
+): Accessor<
+	Array<{ path: string; meta: Record<string, unknown>; order?: number }>
+> => {
+	return () =>
+		manifest
+			.filter((r) => r.kind !== "api" && r.kind !== "content")
+			.map((r) => {
+				const mod = peekModule(modules, r.file) as
+					| {
+							meta?: Record<string, unknown>;
+							order?: number;
+					  }
+					| undefined;
+				return mod?.meta?.nav !== undefined
+					? { path: r.path, meta: mod.meta, order: mod.order }
+					: undefined;
+			})
+			.filter(
+				(
+					x,
+				): x is {
+					path: string;
+					meta: Record<string, unknown>;
+					order: number | undefined;
+				} => Boolean(x),
+			)
+			.sort(
+				(a, b) =>
+					(a.order ?? Number.MAX_SAFE_INTEGER) -
+						(b.order ?? Number.MAX_SAFE_INTEGER) ||
+					a.path.localeCompare(b.path),
+			);
+};

package/src/app/modules/file-routes/presentation/route-def.ts

@@ -0,0 +1,154 @@
+/**
+ * `page()` - single-export page definition (replaces the flat
+ * loader/loaderCache/schema/beforeLoad/default export set):
+ *
+ *   export default page({
+ *     params: (p) => ({ id: String(p.id) }),
+ *     search: (q) => ({ page: Number(q.page ?? 1) }),
+ *     cache: { ttl: 60, tags: ["users"] },
+ *     before: (ctx) => ctx.state.user ? undefined : redirect("/login"),
+ *     load: async ({ params }) => db.user(params.id),
+ *     head: ({ data }) => ({ title: data()?.name }),
+ *     component: ({ data, params }) => <p>{data()?.name}</p>,
+ *   });
+ *
+ * page() is an identity - FileRoutes normalizes the module so the
+ * runtime sees { default: component, loader, schema, ... } either way.
+ */
+
+import type { Component } from "solid-js";
+import type { HeadTag, SeoMetaInput } from "#head/types";
+import type { RouteActionContext } from "../domain/operations/actions";
+import type { LoaderContext } from "../domain/operations/loader";
+
+const ROUTE_DEF = "__sfRoute";
+
+export interface RouteComponentProps<D = unknown, Q = Record<string, string>> {
+	/** Loader result accessor - `data()` reactive */
+	data: () => D | undefined;
+	params: Record<string, string>;
+	/** Search params - parsed shape when `page({ search })` is set */
+	search: Q;
+	slot?: string;
+	[key: string]: unknown;
+}
+
+/** Per-route head input - `SeoMetaInput` sugar or raw HeadTag list */
+export type RouteHeadInput = SeoMetaInput | HeadTag[];
+
+export interface RouteHeadContext<D = unknown, Q = Record<string, string>> {
+	params: Record<string, string>;
+	search: Q;
+	data: () => D | undefined;
+}
+
+export interface RouteDef<D = unknown, Q = Record<string, string>> {
+	[ROUTE_DEF]: true;
+	/** Validate/transform route params before the loader runs */
+	params?: (raw: Record<string, string>) => Record<string, string>;
+	/** Validate the request body (non-GET/HEAD) before the loader runs */
+	body?: (raw: unknown) => unknown;
+	/** Parse/validate search params into the typed `Q` shape */
+	search?: (raw: Record<string, string>) => Q;
+	/** beforeLoad - may return a Response to short-circuit */
+	before?: (ctx: LoaderContext) => unknown | Response | Promise<unknown>;
+	/** Loader cache - `{ttl, tags}` enables tagged revalidation */
+	cache?: { ttl?: number; tags?: string[] };
+	/** The data loader - ctx: {request, params, parent, state} */
+	load?: (ctx: LoaderContext) => D | Promise<D>;
+	/** Per-route document head - meta/links, reactive on `data()` */
+	head?: (ctx: RouteHeadContext<D, Q>) => RouteHeadInput;
+	/**
+	 * Named form actions — POST dispatch picks `form.get("__action")`
+	 * (or "default" / the single key when unnamed)
+	 */
+	actions?: Record<
+		string,
+		(ctx: RouteActionContext) => unknown | Response | Promise<unknown>
+	>;
+	/** Static shell UI — Suspense/PPR fallback rendered instantly */
+	shell?: Component;
+	/** Error boundary UI (replaces error.tsx) — gets {error, reset} */
+	error?: Component<{ error: unknown; reset?: () => void }>;
+	/** Suspense fallback (replaces loading.tsx) */
+	loading?: Component;
+	/**
+	 * Re-run the loader on an interval — `poll: 5000` or
+	 * `poll: { every: 5000, pauseHidden: true }` (skips while tab hidden)
+	 */
+	poll?: number | { every: number; pauseHidden?: boolean };
+	/**
+	 * Route guards — run before `before`/`load`; return a Response
+	 * to short-circuit (redirect, 401) or nothing to continue
+	 */
+	guard?: Array<
+		(ctx: LoaderContext) => Response | undefined | Promise<Response | undefined>
+	>;
+	/** Shorthand for `cache: { ttl }` — `ttl: 30_000` */
+	ttl?: number;
+	/** view-transition-name applied to the route's root element */
+	transition?: string;
+	/** Loader freshness hint (ms) — consumers may skip refetch when fresh */
+	staleTime?: number;
+	/** PWA hint — route works offline (cache-first when offline) */
+	offline?: boolean;
+	/** `robots: "noindex"` → head robots meta without a head fn */
+	robots?: "index,follow" | "noindex" | "nofollow" | "none";
+	/** `<title>` shorthand — merged into head without writing a head fn */
+	title?: string;
+	/** `<meta name="description">` shorthand */
+	description?: string;
+	/** `<meta name="keywords">` shorthand */
+	keywords?: string;
+	/** Social image shorthand → `og:image` + `twitter:image` */
+	image?: string;
+	/** Canonical URL shorthand → `<link rel="canonical">` */
+	canonical?: string;
+	/** `layout: false` — opt out of inherited `_layout` wrapping */
+	layout?: false;
+	/**
+	 * Static redirect — `page({ redirect: "/new" })` short-circuits
+	 * every request with a 302 before guards/load run
+	 */
+	redirect?: string;
+	/**
+	 * `scroll: false` — keep scroll position when navigating to this
+	 * route (chat UIs, feeds)
+	 */
+	scroll?: false;
+	/** Sort key — `useNav()` orders items by it */
+	order?: number;
+	/** `scripts: false` — render without the hydration script (static page) */
+	scripts?: boolean;
+	/** Arbitrary route metadata — nav groups, icons; `useRoute().meta` */
+	meta?: Record<string, unknown>;
+	/** Per-route streaming opt-out (default follows route rules) */
+	streaming?: boolean;
+	/** Prerender this route at build time */
+	prerender?: boolean;
+	/** Static paths for dynamic params (SSG) */
+	staticParams?: () =>
+		| Record<string, string>[]
+		| Promise<Record<string, string>[]>;
+	component: Component<RouteComponentProps<D, Q>>;
+}
+
+export const page = <D = unknown, Q = Record<string, string>>(
+	def: Omit<RouteDef<D, Q>, typeof ROUTE_DEF>,
+): RouteDef<D, Q> =>
+	({
+		[ROUTE_DEF]: true,
+		...def,
+	}) as RouteDef<D, Q>;
+
+export const isRouteDef = (v: unknown): v is RouteDef =>
+	typeof v === "object" &&
+	v !== null &&
+	(v as Record<string, unknown>)[ROUTE_DEF] === true;
+
+/** `redirect("/login")` - 302 Response for `before`/loaders/actions */
+export const redirect = (path: string, status = 302): Response =>
+	new Response(null, { status, headers: { Location: path } });
+
+/** Typed path + href - `link("/users/:id", { id: "1" })` */
+export { link } from "../domain/operations/typed";

package/src/app/modules/file-routes/presentation/route-fallbacks.ts

@@ -0,0 +1,66 @@
+/**
+ * Route Fallbacks
+ * 404 and error view resolution — inline module exports (page({ error }))
+ * beat the error.tsx/not-found.tsx conventions, which beat props
+ */
+
+import { type Component, createComponent, type JSX } from "solid-js";
+import { isServer } from "solid-js/web";
+import { type FileRouteMatch, isNotFoundError } from "../domain";
+import {
+	DefaultNotFound,
+	lazyModule,
+	peekModule,
+	type RouteModules,
+} from "./route-modules";
+import type { RouteStatus } from "./status";
+
+export const DefaultError: Component<{ error: unknown }> = () => "Error";
+
+export interface RouteFallbackDeps {
+	modules: RouteModules;
+	status: RouteStatus | undefined;
+	/** 404 component used when no route matches */
+	notFound?: Component;
+}
+
+export const renderNotFoundView = (
+	deps: RouteFallbackDeps,
+	m: FileRouteMatch | null,
+): JSX.Element => {
+	if (deps.status) deps.status.status = 404;
+	const file = m?.route.notFound;
+	const Comp = file
+		? lazyModule(deps.modules, file)
+		: (deps.notFound ?? DefaultNotFound);
+	return createComponent(Comp, {});
+};
+
+export const renderErrorView = (
+	deps: RouteFallbackDeps,
+	m: FileRouteMatch | null,
+	error: unknown,
+	reset?: () => void,
+): JSX.Element => {
+	if (!isServer) console.error("[solid-framework] route error:", error);
+	if (deps.status) deps.status.status = isNotFoundError(error) ? 404 : 500;
+	// page({ error }) inline component beats the error.tsx convention
+	const inline =
+		!isNotFoundError(error) && m
+			? ((
+					peekModule(deps.modules, m.route.file) as
+						| { error?: Component }
+						| undefined
+				)?.error ?? undefined)
+			: undefined;
+	const file = isNotFoundError(error) ? m?.route.notFound : m?.route.error;
+	const Comp =
+		inline ??
+		(file
+			? lazyModule(deps.modules, file)
+			: isNotFoundError(error)
+				? (deps.notFound ?? DefaultNotFound)
+				: DefaultError);
+	// error.tsx convention receives `reset` — retry the boundary
+	return createComponent(Comp, { error, reset });
+};

package/src/app/modules/file-routes/presentation/route-modules.ts

@@ -0,0 +1,138 @@
+/**
+ * Route Module Registry
+ * Resolves route modules from the vite glob map (lazy or eager),
+ * normalizes them once, and caches the result — plus <Link prefetch>
+ * warming of route code and loader endpoints
+ */
+
+import { type Component, createComponent, lazy } from "solid-js";
+import { isServer } from "solid-js/web";
+import {
+	type I18nConfig,
+	stripLocale,
+} from "../../i18n/domain/operations/locale";
+import { matchFileRoute, type RouteManifest } from "../domain";
+import { normalizeRouteModule } from "./normalize-route";
+
+export interface RouteModule {
+	default?: Component<Record<string, unknown>>;
+	[key: string]: unknown;
+}
+
+export type RouteModules = Record<
+	string,
+	RouteModule | Promise<RouteModule> | (() => Promise<RouteModule>)
+>;
+
+export const DefaultNotFound: Component = () => "Not Found";
+
+const resolvedCache = new Map<string, RouteModule>();
+
+export const resolveModule = (
+	modules: RouteModules,
+	file: string,
+): Promise<RouteModule> => {
+	const cached = resolvedCache.get(file);
+	if (cached) return Promise.resolve(cached);
+	const entry = modules[file] ?? modules[`/${file}`];
+	if (!entry) return Promise.resolve({});
+	return Promise.resolve(typeof entry === "function" ? entry() : entry).then(
+		(mod) => {
+			const norm = normalizeRouteModule(mod as RouteModule);
+			resolvedCache.set(file, norm);
+			return norm;
+		},
+	);
+};
+
+/** Sync access for eager-glob or already-resolved (preloaded) modules */
+export const peekModule = (
+	modules: RouteModules,
+	file: string,
+): RouteModule | undefined => {
+	const cached = resolvedCache.get(file);
+	if (cached) return cached;
+	const entry = modules[file] ?? modules[`/${file}`];
+	if (!entry || typeof entry === "function" || entry instanceof Promise) {
+		return undefined;
+	}
+	const norm = normalizeRouteModule(entry as RouteModule);
+	resolvedCache.set(file, norm);
+	return norm;
+};
+
+export const lazyModule = (modules: RouteModules, file: string): Component =>
+	lazy(async () => {
+		const mod = await resolveModule(modules, file);
+		return { default: mod.default ?? DefaultNotFound };
+	});
+
+/**
+ * Route component — renders synchronously once the module is resolved
+ * (required for clean hydration: lazy() suspends and mismatches SSR),
+ * falls back to lazy() for not-yet-loaded modules (nav code-splitting)
+ */
+export const routeComponent = (
+	modules: RouteModules,
+	file: string,
+): Component => {
+	const mod = peekModule(modules, file);
+	if (mod) {
+		const Page = mod.default ?? DefaultNotFound;
+		return (p: Record<string, unknown>) =>
+			createComponent(Page as Component<Record<string, unknown>>, p);
+	}
+	return lazyModule(modules, file);
+};
+
+/**
+ * Warm the resolved-module cache for a path before render/hydrate —
+ * preloading makes routeComponent resolve synchronously so SSR and
+ * client hydration produce identical component depth (no mismatch)
+ */
+export const preloadFileRoute = async (
+	pathname: string,
+	manifest: RouteManifest,
+	modules: RouteModules,
+): Promise<void> => {
+	const m = matchFileRoute(pathname, manifest);
+	if (!m) return;
+	const files = [
+		m.route.file,
+		...m.route.layouts,
+		m.route.loading,
+		m.route.error,
+		m.route.notFound,
+	].filter((f): f is string => Boolean(f));
+	await Promise.all(files.map((file) => resolveModule(modules, file)));
+};
+
+/**
+ * Warm lazy route modules ahead of navigation — <Link prefetch>.
+ * "shell" warms code only; the other strategies also warm the
+ * loader endpoint so the data is hot on click
+ */
+export const createRoutePrefetch = (
+	manifest: RouteManifest,
+	modules: RouteModules,
+	i18n?: I18nConfig,
+): ((path: string, shellOnly?: boolean) => void) => {
+	return (path, shellOnly = false) => {
+		const unprefixed = i18n ? stripLocale(path, i18n).path : path;
+		const m = matchFileRoute(unprefixed, manifest);
+		if (!m) return;
+		void resolveModule(modules, m.route.file);
+		for (const layout of m.route.layouts) {
+			void resolveModule(modules, layout);
+		}
+		if (!shellOnly && !isServer) {
+			void resolveModule(modules, m.route.file).then((mod) => {
+				if ((mod as { loader?: unknown } | undefined)?.loader) {
+					void fetch(
+						`/_server/loader?path=${encodeURIComponent(unprefixed)}`,
+					).catch(() => {});
+				}
+			});
+		}
+	};
+};

package/src/app/modules/file-routes/presentation/slot.tsx

@@ -0,0 +1,43 @@
+/**
+ * Parallel-route slots — `@name` route dirs render inside the layout's
+ * `<Outlet name>` placeholder (Next.js `{modal}` layout-prop pattern):
+ *
+ *   // routes/layout.tsx
+ *   <div>{props.children}<Outlet name="modal" /></div>
+ *
+ *   // routes/@modal/photo.tsx renders into <Outlet name="modal">
+ *   // when the url matches — nothing when no @modal route matches
+ */
+
+import {
+	type Accessor,
+	createContext,
+	createMemo,
+	type JSX,
+	useContext,
+} from "solid-js";
+
+/** Current slot name inside a `@slot` route — `useSlot()` → "modal" */
+export const SlotContext = createContext<Accessor<string | undefined>>();
+export const useSlot = (): string | undefined => useContext(SlotContext)?.();
+
+/** Slot elements provided by <FileRoutes> — name → rendered subtree */
+export const SlotsContext = createContext<
+	Accessor<Record<string, JSX.Element>>
+>(() => ({}));
+
+export interface OutletProps {
+	/** Slot name — the `@name` route rendered here (required) */
+	name: string;
+	/** Rendered when no @name route matches the current url */
+	fallback?: JSX.Element;
+}
+
+/** Outlet — layout placeholder for a parallel `@name` route */
+export const Outlet = (props: OutletProps): JSX.Element => {
+	const slots = useContext(SlotsContext);
+	// Accessor return — Solid unwraps function children reactively
+	return createMemo(
+		() => slots()[props.name] ?? props.fallback ?? null,
+	) as unknown as JSX.Element;
+};