toiljs 0.0.8 → 0.0.9

package/build/client/dev/error-overlay.d.ts

@@ -0,0 +1,20 @@
+import { Component, type ErrorInfo, type ReactNode } from 'react';
+export declare function isDevMode(): boolean;
+export declare function initDevErrorOverlay(): void;
+interface BoundaryProps {
+    readonly children: ReactNode;
+}
+interface BoundaryState {
+    readonly crashed: boolean;
+}
+export declare class DevErrorBoundary extends Component<BoundaryProps, BoundaryState> {
+    state: BoundaryState;
+    private unsubscribe;
+    static getDerivedStateFromError(): BoundaryState;
+    componentDidCatch(error: Error, info: ErrorInfo): void;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    render(): ReactNode;
+}
+export declare function DevErrorOverlay(): ReactNode;
+export {};

package/build/client/dev/error-overlay.js

@@ -0,0 +1,123 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Component, useSyncExternalStore, } from 'react';
+let current = null;
+const listeners = new Set();
+function emit() {
+    for (const listener of listeners)
+        listener();
+}
+function setDevError(next) {
+    current = next;
+    emit();
+}
+function subscribe(listener) {
+    listeners.add(listener);
+    return () => {
+        listeners.delete(listener);
+    };
+}
+export function isDevMode() {
+    try {
+        return Boolean(import.meta.env?.DEV);
+    }
+    catch {
+        return false;
+    }
+}
+let windowBound = false;
+export function initDevErrorOverlay() {
+    if (windowBound || typeof window === 'undefined')
+        return;
+    windowBound = true;
+    window.addEventListener('error', (event) => {
+        if (event.error instanceof Error)
+            setDevError({ error: event.error, source: 'window' });
+    });
+    window.addEventListener('unhandledrejection', (event) => {
+        const reason = event.reason;
+        const error = reason instanceof Error ? reason : new Error(String(reason));
+        setDevError({ error, source: 'unhandledrejection' });
+    });
+}
+export class DevErrorBoundary extends Component {
+    state = { crashed: false };
+    unsubscribe;
+    static getDerivedStateFromError() {
+        return { crashed: true };
+    }
+    componentDidCatch(error, info) {
+        setDevError({ error, componentStack: info.componentStack ?? undefined, source: 'render' });
+    }
+    componentDidMount() {
+        this.unsubscribe = subscribe(() => {
+            if (current === null && this.state.crashed)
+                this.setState({ crashed: false });
+        });
+    }
+    componentWillUnmount() {
+        this.unsubscribe?.();
+    }
+    render() {
+        return this.state.crashed ? null : this.props.children;
+    }
+}
+const overlayStyle = {
+    position: 'fixed',
+    inset: 0,
+    zIndex: 2147483647,
+    background: 'rgba(8, 8, 12, 0.88)',
+    color: '#f5f6fa',
+    font: '13px/1.6 ui-monospace, SFMono-Regular, Menlo, monospace',
+    padding: '2rem',
+    overflow: 'auto',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+};
+const panelStyle = {
+    maxWidth: 900,
+    width: '100%',
+    background: '#15151c',
+    border: '1px solid #ef4444',
+    borderRadius: 10,
+    padding: '1.25rem 1.5rem',
+    boxShadow: '0 12px 48px rgba(0,0,0,0.5)',
+};
+const titleStyle = {
+    margin: 0,
+    color: '#ff6b6b',
+    fontSize: '1rem',
+    fontWeight: 700,
+    wordBreak: 'break-word',
+};
+const preStyle = {
+    whiteSpace: 'pre-wrap',
+    wordBreak: 'break-word',
+    margin: '0.75rem 0 0',
+    color: '#c8cee0',
+};
+const buttonStyle = {
+    font: 'inherit',
+    color: '#f5f6fa',
+    background: '#2a2a36',
+    border: '1px solid #3a3a48',
+    borderRadius: 6,
+    padding: '0.4em 1em',
+    cursor: 'pointer',
+    marginRight: '0.5rem',
+};
+const SOURCE_LABEL = {
+    render: 'Render error',
+    window: 'Uncaught error',
+    unhandledrejection: 'Unhandled promise rejection',
+};
+export function DevErrorOverlay() {
+    const devError = useSyncExternalStore(subscribe, () => current, () => null);
+    if (!devError)
+        return null;
+    return (_jsx("div", { style: overlayStyle, role: "alert", children: _jsxs("div", { style: panelStyle, children: [_jsxs("p", { style: titleStyle, children: [SOURCE_LABEL[devError.source], ", ", devError.error.name, ": ", devError.error.message] }), devError.error.stack !== undefined && _jsx("pre", { style: preStyle, children: devError.error.stack }), devError.componentStack !== undefined && (_jsx("pre", { style: { ...preStyle, color: '#8b9ab4' }, children: devError.componentStack })), _jsxs("div", { style: { marginTop: '1.25rem' }, children: [_jsx("button", { type: "button", style: buttonStyle, onClick: () => {
+                                setDevError(null);
+                            }, children: "Dismiss" }), _jsx("button", { type: "button", style: buttonStyle, onClick: () => {
+                                window.location.reload();
+                            }, children: "Reload" })] })] }) }));
+}

package/build/client/head/head.d.ts

@@ -24,3 +24,5 @@ export declare function mergeHead(specs: readonly HeadSpec[]): ResolvedHead;
 export declare function useHead(spec: HeadSpec): void;
 export declare function useTitle(title: string): void;
 export declare function Head(props: HeadSpec): null;
+export declare function setRouteHead(spec: HeadSpec | null): void;
+export declare function useRouteHead(spec: HeadSpec | undefined): void;

package/build/client/head/head.js

@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect, useLayoutEffect } from 'react';
 function metaKey(m) {
     if (m.name !== undefined)
         return `name:${m.name}`;
@@ -30,6 +30,7 @@ const entries = new Map();
 let order = [];
 let seq = 0;
 let baseTitle = null;
+let routeHead = null;
 function setAttrs(el, attrs) {
     el.setAttribute('data-toil-head', '');
     for (const [key, value] of Object.entries(attrs)) {
@@ -42,7 +43,8 @@ function apply() {
         return;
     if (baseTitle === null)
         baseTitle = document.title;
-    const resolved = mergeHead(order.map((id) => entries.get(id)).filter((s) => !!s));
+    const specs = [routeHead, ...order.map((id) => entries.get(id))];
+    const resolved = mergeHead(specs.filter((s) => !!s));
     document.title = resolved.title ?? baseTitle;
     for (const stale of document.head.querySelectorAll('[data-toil-head]'))
         stale.remove();
@@ -85,3 +87,16 @@ export function Head(props) {
     useHead(props);
     return null;
 }
+export function setRouteHead(spec) {
+    routeHead = spec;
+    apply();
+}
+export function useRouteHead(spec) {
+    const json = spec ? JSON.stringify(spec) : '';
+    useLayoutEffect(() => {
+        setRouteHead(json ? JSON.parse(json) : null);
+        return () => {
+            setRouteHead(null);
+        };
+    }, [json]);
+}

package/build/client/head/metadata.d.ts

@@ -0,0 +1,29 @@
+import type { HeadSpec, LinkTag, MetaTag } from './head.js';
+import type { RouteParams } from '../routing/match.js';
+export interface OpenGraph {
+    readonly title?: string;
+    readonly description?: string;
+    readonly type?: string;
+    readonly url?: string;
+    readonly image?: string;
+    readonly siteName?: string;
+}
+export interface Metadata {
+    readonly title?: string;
+    readonly titleTemplate?: string;
+    readonly description?: string;
+    readonly keywords?: string | readonly string[];
+    readonly canonical?: string;
+    readonly robots?: string;
+    readonly themeColor?: string;
+    readonly openGraph?: OpenGraph;
+    readonly meta?: readonly MetaTag[];
+    readonly link?: readonly LinkTag[];
+}
+export interface GenerateMetadataArgs<T = unknown> {
+    readonly params: RouteParams;
+    readonly searchParams: URLSearchParams;
+    readonly data: T;
+}
+export type GenerateMetadata<T = unknown> = (args: GenerateMetadataArgs<T>) => Metadata | Promise<Metadata>;
+export declare function resolveMetadata(metadata: Metadata): HeadSpec;

package/build/client/head/metadata.js

@@ -0,0 +1,38 @@
+export function resolveMetadata(metadata) {
+    const meta = [];
+    if (metadata.description !== undefined) {
+        meta.push({ name: 'description', content: metadata.description });
+    }
+    if (metadata.keywords !== undefined) {
+        const content = typeof metadata.keywords === 'string' ? metadata.keywords : metadata.keywords.join(', ');
+        meta.push({ name: 'keywords', content });
+    }
+    if (metadata.robots !== undefined)
+        meta.push({ name: 'robots', content: metadata.robots });
+    if (metadata.themeColor !== undefined) {
+        meta.push({ name: 'theme-color', content: metadata.themeColor });
+    }
+    const og = metadata.openGraph;
+    if (og) {
+        const pairs = [
+            ['og:title', og.title],
+            ['og:description', og.description],
+            ['og:type', og.type],
+            ['og:url', og.url],
+            ['og:image', og.image],
+            ['og:site_name', og.siteName],
+        ];
+        for (const [property, content] of pairs) {
+            if (content !== undefined)
+                meta.push({ property, content });
+        }
+    }
+    if (metadata.meta)
+        meta.push(...metadata.meta);
+    const link = [];
+    if (metadata.canonical !== undefined)
+        link.push({ rel: 'canonical', href: metadata.canonical });
+    if (metadata.link)
+        link.push(...metadata.link);
+    return { title: metadata.title, titleTemplate: metadata.titleTemplate, meta, link };
+}

package/build/client/index.d.ts

@@ -4,7 +4,7 @@ export { Link } from './navigation/Link.js';
 export type { LinkProps } from './navigation/Link.js';
 export { NavLink, matchActive } from './navigation/NavLink.js';
 export type { NavLinkProps, NavLinkState } from './navigation/NavLink.js';
-export { navigate, back, forward, refresh } from './navigation/navigation.js';
+export { navigate, back, forward, refresh, setViewTransitions } from './navigation/navigation.js';
 export type { NavigateOptions } from './navigation/navigation.js';
 export { useParams, useNavigate, useLocation, usePathname, useSearchParams, useRouter, useNavigationPending, } from './routing/hooks.js';
 export type { RouterInstance } from './routing/hooks.js';
@@ -20,9 +20,13 @@ export { connectChannel, useChannel, resolveChannelUrl } from './channel/channel
 export type { Channel, ChannelOptions, ChannelHook, ChannelData } from './channel/channel.js';
 export { useHead, useTitle, Head, mergeHead } from './head/head.js';
 export type { HeadSpec, MetaTag, LinkTag, ResolvedHead } from './head/head.js';
+export { resolveMetadata } from './head/metadata.js';
+export type { Metadata, GenerateMetadata, GenerateMetadataArgs, OpenGraph } from './head/metadata.js';
 export { Image } from './components/Image.js';
 export type { ImageProps } from './components/Image.js';
 export { Script } from './components/Script.js';
 export type { ScriptProps, ScriptStrategy } from './components/Script.js';
 export { Form } from './components/Form.js';
 export type { FormProps } from './components/Form.js';
+export { Slot } from './components/Slot.js';
+export type { SlotProps } from './components/Slot.js';

package/build/client/index.js

@@ -2,7 +2,7 @@ export { mount } from './routing/mount.js';
 export { Router } from './routing/Router.js';
 export { Link } from './navigation/Link.js';
 export { NavLink, matchActive } from './navigation/NavLink.js';
-export { navigate, back, forward, refresh } from './navigation/navigation.js';
+export { navigate, back, forward, refresh, setViewTransitions } from './navigation/navigation.js';
 export { useParams, useNavigate, useLocation, usePathname, useSearchParams, useRouter, useNavigationPending, } from './routing/hooks.js';
 export { useLoaderData, revalidate, invalidateLoaderData } from './routing/loader.js';
 export { useAction } from './routing/action.js';
@@ -10,6 +10,8 @@ export { prefetch } from './navigation/prefetch.js';
 export { matchRoute } from './routing/match.js';
 export { connectChannel, useChannel, resolveChannelUrl } from './channel/channel.js';
 export { useHead, useTitle, Head, mergeHead } from './head/head.js';
+export { resolveMetadata } from './head/metadata.js';
 export { Image } from './components/Image.js';
 export { Script } from './components/Script.js';
 export { Form } from './components/Form.js';
+export { Slot } from './components/Slot.js';

package/build/client/navigation/navigation.d.ts

@@ -1,4 +1,7 @@
 import type { Href } from '../types.js';
+export declare function setViewTransitions(enabled: boolean): void;
+export declare function isSoftNavigation(): boolean;
+export declare function previousPathname(): string;
 export declare function settleNavigation(): void;
 export declare function isNavigationPending(): boolean;
 export declare function navigationEpoch(): number;

package/build/client/navigation/navigation.js

@@ -1,16 +1,54 @@
+import { startTransition } from 'react';
+import { flushSync } from 'react-dom';
 import { enableManualScrollRestoration, planScroll, rememberScroll, } from './scroll.js';
 const listeners = new Set();
 let popstateBound = false;
+let viewTransitions = false;
+export function setViewTransitions(enabled) {
+    viewTransitions = enabled;
+}
+function shouldViewTransition() {
+    if (!viewTransitions || typeof document === 'undefined' || typeof window === 'undefined') {
+        return false;
+    }
+    if (typeof document.startViewTransition !== 'function')
+        return false;
+    return !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+}
 let keyCounter = 0;
 let currentKey = 'initial';
 function nextKey() {
     keyCounter += 1;
     return `t${String(keyCounter)}`;
 }
-function notify() {
+function runListeners() {
     for (const listener of listeners)
         listener();
 }
+function notify() {
+    if (shouldViewTransition()) {
+        document.startViewTransition?.(() => {
+            flushSync(runListeners);
+        });
+    }
+    else {
+        startTransition(runListeners);
+    }
+}
+let softNav = false;
+let currentPath = typeof window === 'undefined' ? '/' : window.location.pathname;
+let previousPath = currentPath;
+function recordTransition(soft) {
+    previousPath = currentPath;
+    currentPath = typeof window === 'undefined' ? '/' : window.location.pathname;
+    softNav = soft;
+}
+export function isSoftNavigation() {
+    return softNav;
+}
+export function previousPathname() {
+    return previousPath;
+}
 let startedTick = 0;
 let committedTick = 0;
 const pendingListeners = new Set();
@@ -68,6 +106,7 @@ export function navigate(href, options) {
         currentKey = nextKey();
         window.history.pushState({ __toilKey: currentKey }, '', href);
     }
+    recordTransition(true);
     planScroll({ hash, toTop: options?.scroll !== false });
     notify();
 }
@@ -78,6 +117,7 @@ export function forward() {
     window.history.forward();
 }
 export function refresh() {
+    beginNavigation();
     notify();
 }
 function handlePopState(event) {
@@ -85,6 +125,7 @@ function handlePopState(event) {
     rememberScroll(currentKey);
     const state = event.state;
     currentKey = state?.__toilKey ?? 'initial';
+    recordTransition(true);
     planScroll({ restoreKey: currentKey, hash: window.location.hash, toTop: false });
     notify();
 }

package/build/client/routing/Router.d.ts

@@ -5,4 +5,5 @@ export declare function Router(props: {
     layout?: LayoutLoader;
     notFound?: NotFoundLoader;
     globalError?: ErrorComponentLoader;
+    slots?: Record<string, RouteDef[]>;
 }): ReactNode;

package/build/client/routing/Router.js

@@ -5,58 +5,80 @@ import { useLocation } from './hooks.js';
 import { errorComponent, loadingComponent, nestedLayout, resolveLayout, resolveNotFound, } from './lazy.js';
 import { loaderKey, LoaderDataContext, readRouteData } from './loader.js';
 import { matchRoute } from './match.js';
+import { useRouteHead } from '../head/head.js';
 import { ParamsContext } from './params-context.js';
-import { navigationEpoch, settleNavigation } from '../navigation/navigation.js';
+import { SlotContext } from './slot-context.js';
+import { isSoftNavigation, navigationEpoch, previousPathname, settleNavigation, } from '../navigation/navigation.js';
 import { applyScroll } from '../navigation/scroll.js';
 function RoutePage(props) {
-    const { Component, data } = readRouteData(props.route, props.params, props.dataKey, props.epoch);
+    const { Component, data, head } = readRouteData(props.route, props.params, props.dataKey, props.epoch);
+    useRouteHead(head);
     return _jsx(LoaderDataContext.Provider, { value: data, children: createElement(Component) });
 }
+function renderMatched(matched, params, pathname, epoch, keyPrefix) {
+    const search = typeof window === 'undefined' ? '' : window.location.search;
+    const dataKey = keyPrefix + loaderKey(pathname, search);
+    const fallback = matched.loading
+        ? createElement(Suspense, { fallback: null }, createElement(loadingComponent(matched.loading)))
+        : null;
+    let content = (_jsx(Suspense, { fallback: fallback, children: _jsx(RoutePage, { route: matched, params: params, dataKey: dataKey, epoch: epoch }) }, matched.loading ? `${dataKey}:${String(epoch)}` : undefined));
+    const templates = matched.templates ?? [];
+    for (let i = templates.length - 1; i >= 0; i--) {
+        const Template = nestedLayout(templates[i]);
+        content = (_jsx(Suspense, { fallback: null, children: _jsx(Template, { children: content }) }, `${keyPrefix}${pathname}:${String(i)}`));
+    }
+    const chain = matched.layouts ?? [];
+    for (let i = chain.length - 1; i >= 0; i--) {
+        const NestedLayout = nestedLayout(chain[i]);
+        content = (_jsx(Suspense, { fallback: null, children: _jsx(NestedLayout, { children: content }) }));
+    }
+    if (matched.errorComponent) {
+        content = _jsx(ErrorBoundary, { fallback: errorComponent(matched.errorComponent), children: content });
+    }
+    return content;
+}
+function match(routes, pathname, allowIntercept = true) {
+    for (const route of routes) {
+        if (route.intercept && !allowIntercept)
+            continue;
+        const params = matchRoute(route.pattern, pathname);
+        if (params)
+            return { route, params };
+    }
+    return null;
+}
 export function Router(props) {
-    const { routes, layout = null, notFound = null, globalError = null } = props;
+    const { routes, layout = null, notFound = null, globalError = null, slots = {} } = props;
     const pathname = useLocation();
     useLayoutEffect(() => {
         applyScroll();
         settleNavigation();
     });
-    let matched;
-    let params = {};
-    for (const route of routes) {
-        const result = matchRoute(route.pattern, pathname);
-        if (result) {
-            matched = route;
-            params = result;
-            break;
-        }
+    const epoch = navigationEpoch();
+    const soft = isSoftNavigation();
+    const slotElements = {};
+    let intercepting = false;
+    for (const [name, defs] of Object.entries(slots)) {
+        const slotMatch = match(defs, pathname, soft);
+        if (!slotMatch)
+            continue;
+        if (slotMatch.route.intercept)
+            intercepting = true;
+        slotElements[name] = (_jsx(ParamsContext.Provider, { value: slotMatch.params, children: renderMatched(slotMatch.route, slotMatch.params, pathname, epoch, `@${name} `) }));
     }
+    const mainPath = intercepting ? previousPathname() : pathname;
+    const matched = match(routes, mainPath);
+    const params = matched?.params ?? {};
     let content;
     if (matched) {
-        const fallback = matched.loading
-            ? createElement(Suspense, { fallback: null }, createElement(loadingComponent(matched.loading)))
-            : null;
-        const search = typeof window === 'undefined' ? '' : window.location.search;
-        const dataKey = loaderKey(pathname, search);
-        content = (_jsx(Suspense, { fallback: fallback, children: _jsx(RoutePage, { route: matched, params: params, dataKey: dataKey, epoch: navigationEpoch() }) }, matched.loading ? dataKey : undefined));
-        const templates = matched.templates ?? [];
-        for (let i = templates.length - 1; i >= 0; i--) {
-            const Template = nestedLayout(templates[i]);
-            content = (_jsx(Suspense, { fallback: null, children: _jsx(Template, { children: content }) }, `${pathname}:${String(i)}`));
-        }
-        const chain = matched.layouts ?? [];
-        for (let i = chain.length - 1; i >= 0; i--) {
-            const NestedLayout = nestedLayout(chain[i]);
-            content = (_jsx(Suspense, { fallback: null, children: _jsx(NestedLayout, { children: content }) }));
-        }
-        if (matched.errorComponent) {
-            content = (_jsx(ErrorBoundary, { fallback: errorComponent(matched.errorComponent), children: content }));
-        }
+        content = renderMatched(matched.route, matched.params, mainPath, epoch, '');
     }
     else if (notFound) {
         const NotFound = resolveNotFound(notFound);
         content = (_jsx(Suspense, { fallback: null, children: _jsx(NotFound, {}) }));
     }
     else {
-        content = _jsx("div", { style: { padding: 24, fontFamily: 'system-ui' }, children: "404 \u2014 Not found" });
+        content = _jsx("div", { style: { padding: 24, fontFamily: 'system-ui' }, children: "404, Not found" });
     }
     if (layout) {
         const Layout = resolveLayout(layout);
@@ -65,5 +87,5 @@ export function Router(props) {
     if (globalError) {
         content = _jsx(ErrorBoundary, { fallback: errorComponent(globalError), children: content });
     }
-    return _jsx(ParamsContext.Provider, { value: params, children: content });
+    return (_jsx(ParamsContext.Provider, { value: params, children: _jsx(SlotContext.Provider, { value: slotElements, children: content }) }));
 }

package/build/client/routing/hooks.js

@@ -1,4 +1,4 @@
-import { startTransition, useContext, useEffect, useMemo, useReducer, useSyncExternalStore, } from 'react';
+import { useContext, useEffect, useMemo, useReducer, useSyncExternalStore } from 'react';
 import { back, forward, isNavigationPending, navigate, refresh, subscribeLocation, subscribePending, } from '../navigation/navigation.js';
 import { clearLoaderData, revalidate as revalidateData } from './loader.js';
 import { ParamsContext } from './params-context.js';
@@ -32,11 +32,7 @@ export function useRouter() {
 }
 function useLocationSubscription() {
     const [, forceUpdate] = useReducer((n) => n + 1, 0);
-    useEffect(() => subscribeLocation(() => {
-        startTransition(() => {
-            forceUpdate();
-        });
-    }), []);
+    useEffect(() => subscribeLocation(forceUpdate), []);
 }
 export function useLocation() {
     useLocationSubscription();

package/build/client/routing/loader.d.ts

@@ -1,4 +1,5 @@
 import { type ComponentType } from 'react';
+import type { HeadSpec } from '../head/head.js';
 import type { RouteDef } from '../types.js';
 import type { RouteParams } from './match.js';
 export interface LoaderArgs {
@@ -11,6 +12,7 @@ export type LoaderData<T> = T extends (...args: never[]) => infer R ? Awaited<R>
 interface RouteData {
     Component: ComponentType;
     data: unknown;
+    head?: HeadSpec;
 }
 export declare function loaderKey(pathname: string, search: string): string;
 export declare function readRouteData(route: RouteDef, params: RouteParams, key: string, epoch: number): RouteData;

package/build/client/routing/loader.js

@@ -1,4 +1,5 @@
 import { createContext, useContext } from 'react';
+import { resolveMetadata } from '../head/metadata.js';
 import { refresh as rerender } from '../navigation/navigation.js';
 const cache = new Map();
 const MAX_ENTRIES = 32;
@@ -9,8 +10,15 @@ async function loadRoute(route, params) {
     const mod = await route.load();
     const searchParams = new URLSearchParams(typeof window === 'undefined' ? '' : window.location.search);
     const data = mod.loader ? await mod.loader({ params, searchParams }) : undefined;
+    let head;
+    if (mod.generateMetadata) {
+        head = resolveMetadata(await mod.generateMetadata({ params, searchParams, data }));
+    }
+    else if (mod.metadata) {
+        head = resolveMetadata(mod.metadata);
+    }
     return {
-        data: { Component: mod.default, data },
+        data: { Component: mod.default, data, head },
         revalidate: mod.revalidate ?? 0,
         hasLoader: mod.loader != null,
     };

package/build/client/routing/mount.d.ts

@@ -1,2 +1,2 @@
 import type { ErrorComponentLoader, LayoutLoader, NotFoundLoader, RouteDef } from '../types.js';
-export declare function mount(routes: RouteDef[], layout?: LayoutLoader, notFound?: NotFoundLoader, globalError?: ErrorComponentLoader): void;
+export declare function mount(routes: RouteDef[], layout?: LayoutLoader, notFound?: NotFoundLoader, globalError?: ErrorComponentLoader, slots?: Record<string, RouteDef[]>): void;

package/build/client/routing/mount.js

@@ -1,13 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { createRoot } from 'react-dom/client';
+import { DevErrorBoundary, DevErrorOverlay, initDevErrorOverlay, isDevMode, } from '../dev/error-overlay.js';
 import { initNavigation } from '../navigation/navigation.js';
 import { startPrefetcher } from '../navigation/prefetch.js';
 import { Router } from './Router.js';
-export function mount(routes, layout = null, notFound = null, globalError = null) {
+export function mount(routes, layout = null, notFound = null, globalError = null, slots = {}) {
     const el = document.getElementById('root');
     if (!el)
         throw new Error('toil: #root element not found');
     initNavigation();
-    createRoot(el).render(_jsx(Router, { routes: routes, layout: layout, notFound: notFound, globalError: globalError }));
-    startPrefetcher(routes);
+    const app = (_jsx(Router, { routes: routes, layout: layout, notFound: notFound, globalError: globalError, slots: slots }));
+    if (isDevMode()) {
+        initDevErrorOverlay();
+        createRoot(el).render(_jsxs(_Fragment, { children: [_jsx(DevErrorBoundary, { children: app }), _jsx(DevErrorOverlay, {})] }));
+    }
+    else {
+        createRoot(el).render(app);
+    }
+    startPrefetcher([...routes, ...Object.values(slots).flat()]);
 }

package/build/client/routing/slot-context.d.ts

@@ -0,0 +1,2 @@
+import { type ReactNode } from 'react';
+export declare const SlotContext: import("react").Context<Record<string, ReactNode>>;

package/build/client/routing/slot-context.js

@@ -0,0 +1,2 @@
+import { createContext } from 'react';
+export const SlotContext = createContext({});

package/build/client/types.d.ts

@@ -30,6 +30,7 @@ export interface RouteDef {
     readonly errorComponent?: () => Promise<{
         default: ComponentType<RouteErrorProps>;
     }>;
+    readonly intercept?: boolean;
 }
 export type LayoutLoader = LayoutComponentLoader | null;
 export type NotFoundLoader = (() => Promise<{