toiljs 0.0.15 → 0.0.16

package/build/client/dev/devtools.js

@@ -0,0 +1,442 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useEffect, useState, useSyncExternalStore } from 'react';
+import { getErrorLog, subscribeErrors } from './error-overlay.js';
+import { isNavigationPending, navigate, setTransitions, setViewTransitions, subscribeLocation, subscribePending, } from '../navigation/navigation.js';
+import { clearLoaderData, inspectLoaderCache, loaderKey, revalidate, subscribeLoaderCache, } from '../routing/loader.js';
+import { matchRoute } from '../routing/match.js';
+import { getPages } from '../search/search.js';
+const DOCS_BASE = 'https://toil.org/docs';
+function ToilLogo({ size = 16 }) {
+    return (_jsxs("svg", { width: size, height: size, viewBox: "0 0 500 500", "aria-hidden": "true", style: { display: 'block', flex: '0 0 auto' }, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "toilDtA", x1: "43.27", y1: "43.27", x2: "467.12", y2: "467.12", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: "0", stopColor: "#6990ff" }), _jsx("stop", { offset: ".28", stopColor: "#521be0" }), _jsx("stop", { offset: ".66", stopColor: "#6900f4" }), _jsx("stop", { offset: "1", stopColor: "#7f00f6" })] }), _jsxs("linearGradient", { id: "toilDtB", x1: "149.99", y1: "355.49", x2: "149.99", y2: "0", gradientUnits: "userSpaceOnUse", children: [_jsx("stop", { offset: ".15", stopColor: "#6990ff", stopOpacity: ".6" }), _jsx("stop", { offset: ".55", stopColor: "#531ae1" })] })] }), _jsx("rect", { width: "500", height: "500", rx: "130", ry: "130", fill: "url(#toilDtA)" }), _jsx("path", { d: "M299.98,0L0,355.49v-225.49C0,58.2,58.2,0,130,0h169.98Z", fill: "url(#toilDtB)" }), _jsx("path", { d: "M106.17,111.11h285.24c9.9,0,16.7,9.96,13.09,19.18l-17.98,45.96c-2.11,5.39-7.31,8.94-13.09,8.94h-74.65c-7.76,0-14.06,6.29-14.06,14.06v214.94c0,7.76-6.29,14.06-14.06,14.06h-45.96c-7.76,0-14.06-6.29-14.06-14.06v-217.25c0-7.76-6.29-14.06-14.06-14.06h-73.66c-5.82,0-11.04-3.59-13.12-9.02l-16.76-43.64c-3.54-9.21,3.26-19.1,13.12-19.1Z", fill: "#fff" })] }));
+}
+function ClaudeLogo({ size = 16 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 92 65", "aria-hidden": "true", style: { display: 'block', flex: '0 0 auto' }, children: _jsx("path", { fill: "#d97757", d: "M66.5 0H52.4L78 65h14.1L66.5 0zM25.6 0L0 65h14.4l5.2-13.6h26.8L51.6 65H66L40.4 0H25.6zm-1.2 39.3l8.8-22.8 8.8 22.8H24.4z" }) }));
+}
+function ChatGptLogo({ size = 16 }) {
+    return (_jsx("svg", { width: size, height: size, viewBox: "0 0 24 24", "aria-hidden": "true", style: { display: 'block', flex: '0 0 auto' }, children: _jsx("path", { fill: "#10a37f", d: "M22.2819 9.8211a5.9847 5.9847 0 0 0-.5157-4.9108 6.0462 6.0462 0 0 0-6.5098-2.9A6.0651 6.0651 0 0 0 4.9807 4.1818a5.9847 5.9847 0 0 0-3.9977 2.9 6.0462 6.0462 0 0 0 .7427 7.0966 5.98 5.98 0 0 0 .511 4.9107 6.051 6.051 0 0 0 6.5146 2.9001A5.9847 5.9847 0 0 0 13.2599 24a6.0557 6.0557 0 0 0 5.7718-4.2058 5.9894 5.9894 0 0 0 3.9977-2.9001 6.0557 6.0557 0 0 0-.7475-7.0729zm-9.022 12.6081a4.4755 4.4755 0 0 1-2.8764-1.0408l.1419-.0804 4.7783-2.7582a.7948.7948 0 0 0 .3927-.6813v-6.7369l2.02 1.1686a.071.071 0 0 1 .038.052v5.5826a4.504 4.504 0 0 1-4.4945 4.4944zm-9.6607-4.1254a4.4708 4.4708 0 0 1-.5346-3.0137l.142.0852 4.783 2.7582a.7712.7712 0 0 0 .7806 0l5.8428-3.3685v2.3324a.0804.0804 0 0 1-.0332.0615L9.74 19.9502a4.4992 4.4992 0 0 1-6.1408-1.6464zM2.3408 7.8956a4.485 4.485 0 0 1 2.3655-1.9728V11.6a.7664.7664 0 0 0 .3879.6765l5.8144 3.3543-2.0201 1.1685a.0757.0757 0 0 1-.071 0l-4.8303-2.7865A4.504 4.504 0 0 1 2.3408 7.872zm16.5963 3.8558L13.1038 8.364 15.1192 7.2a.0757.0757 0 0 1 .071 0l4.8303 2.7913a4.4944 4.4944 0 0 1-.6765 8.1042v-5.6772a.79.79 0 0 0-.407-.667zm2.0107-3.0231l-.142-.0852-4.7735-2.7818a.7759.7759 0 0 0-.7854 0L9.409 9.2297V6.8974a.0662.0662 0 0 1 .0284-.0615l4.8303-2.7866a4.4992 4.4992 0 0 1 6.6802 4.66zM8.3065 12.863l-2.02-1.1638a.0804.0804 0 0 1-.038-.0567V6.0742a4.4992 4.4992 0 0 1 7.3757-3.4537l-.142.0805L8.704 5.459a.7948.7948 0 0 0-.3927.6813zm1.0976-2.3654l2.602-1.4998 2.6069 1.4998v2.9994l-2.5974 1.4997-2.6067-1.4997z" }) }));
+}
+const PREFS_KEY = 'toil.devtools';
+const defaultPrefs = { open: false, tab: 'route', side: 'left' };
+function loadPrefs() {
+    try {
+        const raw = localStorage.getItem(PREFS_KEY);
+        return raw ? { ...defaultPrefs, ...JSON.parse(raw) } : defaultPrefs;
+    }
+    catch {
+        return defaultPrefs;
+    }
+}
+let prefs = typeof localStorage !== 'undefined' ? loadPrefs() : defaultPrefs;
+const prefListeners = new Set();
+function setPrefs(next) {
+    prefs = { ...prefs, ...next };
+    try {
+        localStorage.setItem(PREFS_KEY, JSON.stringify(prefs));
+    }
+    catch {
+    }
+    for (const l of prefListeners)
+        l();
+}
+function usePrefs() {
+    return useSyncExternalStore((l) => {
+        prefListeners.add(l);
+        return () => prefListeners.delete(l);
+    }, () => prefs, () => defaultPrefs);
+}
+function useCurrentUrl() {
+    return useSyncExternalStore(subscribeLocation, () => window.location.pathname + window.location.search, () => '/');
+}
+function usePending() {
+    return useSyncExternalStore(subscribePending, isNavigationPending, () => false);
+}
+function useErrors() {
+    return useSyncExternalStore(subscribeErrors, getErrorLog, () => getErrorLog());
+}
+function useLoaderCache() {
+    return useSyncExternalStore(subscribeLoaderCache, inspectLoaderCache, inspectLoaderCache);
+}
+function safeJson(value) {
+    try {
+        return JSON.stringify(value, null, 2) ?? String(value);
+    }
+    catch {
+        return String(value);
+    }
+}
+function readHead() {
+    const metas = [];
+    const links = [];
+    if (typeof document === 'undefined')
+        return { metas, links };
+    document.head.querySelectorAll('meta').forEach((m) => {
+        const name = m.getAttribute('name') ?? m.getAttribute('property');
+        const content = m.getAttribute('content');
+        if (name && content)
+            metas.push({ name, content });
+    });
+    document.head.querySelectorAll('link[rel]').forEach((l) => {
+        links.push({ rel: l.getAttribute('rel') ?? '', href: l.getAttribute('href') ?? '' });
+    });
+    return { metas, links };
+}
+const STYLE_ID = 'toil-devtools-style';
+const CSS = `
+.toil-dt{position:fixed;bottom:12px;z-index:2147483646;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e7e9f0}
+.toil-dt.left{left:12px}.toil-dt.right{right:12px}
+.toil-dt-badge{display:flex;align-items:center;gap:7px;background:#15151c;border:1px solid #2c2c38;border-radius:999px;padding:5px 11px 5px 8px;cursor:pointer;box-shadow:0 4px 16px rgba(0,0,0,.35);user-select:none}
+.toil-dt-badge:hover{border-color:#3a3a48}
+.toil-dt-dot{width:8px;height:8px;border-radius:50%;background:#22e3ab;box-shadow:0 0 6px #22e3ab}
+.toil-dt-dot.pending{background:#f7b93e;box-shadow:0 0 6px #f7b93e;animation:toil-dt-pulse 1s infinite}
+.toil-dt-dot.error{background:#ef4444;box-shadow:0 0 6px #ef4444}
+@keyframes toil-dt-pulse{0%,100%{opacity:1}50%{opacity:.4}}
+.toil-dt-logo{font-weight:700;background:linear-gradient(90deg,#2563ff,#7c3aed,#22e3ab);-webkit-background-clip:text;background-clip:text;color:transparent}
+.toil-dt-panel{width:380px;max-width:calc(100vw - 24px);max-height:min(70vh,560px);background:#101016;border:1px solid #2c2c38;border-radius:12px;box-shadow:0 16px 56px rgba(0,0,0,.55);display:flex;flex-direction:column;overflow:hidden}
+.toil-dt-tabs{display:flex;border-bottom:1px solid #23232e;flex:0 0 auto}
+.toil-dt-tab{flex:1;padding:8px 4px;background:none;border:0;color:#8b90a4;font:inherit;cursor:pointer;border-bottom:2px solid transparent}
+.toil-dt-tab.active{color:#e7e9f0;border-bottom-color:#2563ff}
+.toil-dt-tab:hover{color:#c8cee0}
+.toil-dt-body{padding:12px 14px;overflow:auto}
+.toil-dt-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid #23232e;flex:0 0 auto}
+.toil-dt-x{background:none;border:0;color:#8b90a4;cursor:pointer;font:inherit;font-size:14px}
+.toil-dt-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid #1b1b24}
+.toil-dt-k{color:#8b90a4}
+.toil-dt-v{color:#e7e9f0;text-align:right;word-break:break-all}
+.toil-dt-tag{display:inline-block;padding:1px 6px;border-radius:5px;background:#23232e;color:#a8b0c8;margin:1px 3px 1px 0;font-size:11px}
+.toil-dt-rt{display:flex;align-items:center;gap:6px;padding:3px 0}
+.toil-dt-rt a{color:#7aa2ff;text-decoration:none;cursor:pointer}.toil-dt-rt a:hover{text-decoration:underline}
+.toil-dt-rt .dyn{color:#c8cee0;cursor:default}
+.toil-dt-edit{margin-left:auto;background:none;border:0;color:#5b6178;cursor:pointer;font:inherit}.toil-dt-edit:hover{color:#7aa2ff}
+.toil-dt-sec{margin:0 0 6px;color:#6b7088;text-transform:uppercase;letter-spacing:.05em;font-size:10px}
+.toil-dt-sw{display:flex;align-items:center;justify-content:space-between;padding:5px 0}
+.toil-dt-btn{font:inherit;color:#e7e9f0;background:#23232e;border:1px solid #33333f;border-radius:6px;padding:3px 9px;cursor:pointer}
+.toil-dt-btn:hover{border-color:#454556}
+.toil-dt-err{padding:6px 0;border-bottom:1px solid #1b1b24}
+.toil-dt-err .msg{color:#ff8a8a;word-break:break-word}
+.toil-dt-empty{color:#6b7088;padding:8px 0}
+.toil-dt-pre{background:#0a0a0e;border:1px solid #1b1b24;border-radius:6px;padding:8px;max-height:200px;overflow:auto;white-space:pre-wrap;word-break:break-word;color:#c8cee0;margin:6px 0 0;font-size:11px}
+.toil-dt-chk{display:flex;gap:8px;align-items:center;padding:3px 0}
+.toil-dt-ok{color:#22e3ab}.toil-dt-bad{color:#ef4444}
+.toil-dt-og{display:flex;gap:8px;border:1px solid #23232e;border-radius:8px;overflow:hidden;background:#0d0d13}
+.toil-dt-og-img{width:72px;height:72px;object-fit:cover;flex:0 0 auto}
+.toil-dt-og-body{padding:6px 8px;min-width:0}
+.toil-dt-og-title{color:#e7e9f0;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
+.toil-dt-og-desc{color:#8b90a4;font-size:11px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
+.toil-dt-ta{width:100%;box-sizing:border-box;background:#0a0a0e;border:1px solid #23232e;border-radius:6px;color:#e7e9f0;font:inherit;padding:7px 8px;resize:vertical;min-height:54px}
+.toil-dt-ta:focus{outline:none;border-color:#2563ff}
+.toil-dt-ai-btns{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
+.toil-dt-ai-btn{display:flex;align-items:center;gap:6px;font:inherit;color:#e7e9f0;background:#23232e;border:1px solid #33333f;border-radius:6px;padding:5px 10px;cursor:pointer}
+.toil-dt-ai-btn:hover{border-color:#454556}
+.toil-dt-doc{display:block;color:#7aa2ff;text-decoration:none;padding:3px 0}.toil-dt-doc:hover{text-decoration:underline}
+.toil-dt-pal-wrap{position:fixed;inset:0;z-index:2147483647;display:flex;align-items:flex-start;justify-content:center;background:rgba(0,0,0,.45);padding-top:14vh}
+.toil-dt-pal{width:440px;max-width:calc(100vw - 24px);background:#101016;border:1px solid #2c2c38;border-radius:12px;box-shadow:0 16px 56px rgba(0,0,0,.6);overflow:hidden;font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#e7e9f0}
+.toil-dt-pal input{width:100%;box-sizing:border-box;background:none;border:0;border-bottom:1px solid #23232e;color:#e7e9f0;font:inherit;padding:11px 14px}
+.toil-dt-pal input:focus{outline:none}
+.toil-dt-pal-list{max-height:340px;overflow:auto;padding:4px}
+.toil-dt-pal-item{display:flex;gap:8px;align-items:center;padding:7px 10px;border-radius:6px;cursor:pointer;color:#c8cee0}
+.toil-dt-pal-item.sel{background:#1c1c26;color:#e7e9f0}
+.toil-dt-pal-kind{color:#6b7088;font-size:11px;margin-left:auto}
+`;
+function injectStyles() {
+    if (typeof document === 'undefined' || document.getElementById(STYLE_ID))
+        return;
+    const el = document.createElement('style');
+    el.id = STYLE_ID;
+    el.textContent = CSS;
+    document.head.appendChild(el);
+}
+function isDynamic(pattern) {
+    return /[:*]/.test(pattern);
+}
+function openInEditor(file) {
+    void fetch(`/__toil/open?file=${encodeURIComponent(file)}`).catch(() => undefined);
+}
+function Row({ k, children }) {
+    return (_jsxs("div", { className: "toil-dt-row", children: [_jsx("span", { className: "toil-dt-k", children: k }), _jsx("span", { className: "toil-dt-v", children: children })] }));
+}
+function RouteTab({ routes, slots, info, }) {
+    const url = useCurrentUrl();
+    const pending = usePending();
+    const pathname = url.split('?')[0];
+    const search = url.slice(pathname.length);
+    let matched = null;
+    for (const r of routes) {
+        const params = matchRoute(r.pattern, pathname);
+        if (params) {
+            matched = { route: r, params };
+            break;
+        }
+    }
+    const activeSlots = [];
+    for (const [name, defs] of Object.entries(slots)) {
+        if (defs.some((d) => matchRoute(d.pattern, pathname)))
+            activeSlots.push(name);
+    }
+    const has = (r) => [
+        r.loading ? 'loading' : '',
+        r.errorComponent ? 'error' : '',
+        r.templates?.length ? 'template' : '',
+        r.layouts?.length ? `${String(r.layouts.length)} layout` : '',
+    ]
+        .filter(Boolean)
+        .join(', ') || 'none';
+    return (_jsxs("div", { className: "toil-dt-body", children: [_jsx(Row, { k: "path", children: pathname || '/' }), _jsx(Row, { k: "match", children: matched ? matched.route.pattern : 'no match (404)' }), search && _jsx(Row, { k: "query", children: search }), matched && Object.keys(matched.params).length > 0 && (_jsx(Row, { k: "params", children: JSON.stringify(matched.params) })), matched && _jsx(Row, { k: "boundaries", children: has(matched.route) }), _jsx(Row, { k: "slots", children: activeSlots.length ? activeSlots.join(', ') : 'none' }), _jsx(Row, { k: "navigating", children: pending ? 'yes' : 'no' }), _jsxs("p", { className: "toil-dt-sec", style: { marginTop: 12 }, children: ["Routes (", routes.length, ")"] }), routes.map((r) => {
+                const file = info?.routes[r.pattern];
+                return (_jsxs("div", { className: "toil-dt-rt", children: [isDynamic(r.pattern) ? (_jsx("span", { className: "dyn", children: r.pattern })) : (_jsx("a", { onClick: () => {
+                                navigate(r.pattern);
+                            }, children: r.pattern })), file && (_jsx("button", { className: "toil-dt-edit", title: `open ${file}`, onClick: () => {
+                                openInEditor(file);
+                            }, children: "edit" }))] }, r.pattern));
+            })] }));
+}
+function DataTab() {
+    const url = useCurrentUrl();
+    const entries = useLoaderCache();
+    const pathname = url.split('?')[0];
+    const key = loaderKey(pathname, url.slice(pathname.length));
+    const entry = entries.find((e) => e.key === key);
+    return (_jsxs("div", { className: "toil-dt-body", children: [!entry && _jsx("p", { className: "toil-dt-empty", children: "No cached loader data for this route." }), entry && (_jsxs(_Fragment, { children: [_jsx(Row, { k: "status", children: entry.status }), _jsx(Row, { k: "has loader", children: entry.hasLoader ? 'yes' : 'no' }), _jsx(Row, { k: "revalidate", children: entry.revalidate === false ? 'never' : `${String(entry.revalidate)}s` }), _jsx(Row, { k: "loaded", children: entry.loadedAt ? new Date(entry.loadedAt).toLocaleTimeString() : '-' }), entry.hasLoader ? (_jsxs(_Fragment, { children: [_jsxs("div", { style: { margin: '8px 0' }, children: [_jsx("button", { className: "toil-dt-btn", onClick: () => {
+                                            revalidate();
+                                        }, children: "Revalidate" }), ' ', _jsx("button", { className: "toil-dt-btn", onClick: () => {
+                                            clearLoaderData();
+                                        }, children: "Clear cache" })] }), entry.data === undefined ? (_jsx("p", { className: "toil-dt-empty", children: "Loader returned no data." })) : (_jsx("pre", { className: "toil-dt-pre", children: safeJson(entry.data) }))] })) : (_jsx("p", { className: "toil-dt-empty", children: "This route has no loader, so there is no data to inspect." }))] })), _jsxs("p", { className: "toil-dt-sec", style: { marginTop: 12 }, children: ["Cache (", entries.length, ")"] }), entries.map((e) => (_jsx(Row, { k: e.key, children: e.status }, e.key)))] }));
+}
+function Check({ ok, label }) {
+    return (_jsxs("div", { className: "toil-dt-chk", children: [_jsx("span", { className: ok ? 'toil-dt-ok' : 'toil-dt-bad', children: ok ? '✓' : '✗' }), _jsx("span", { children: label })] }));
+}
+function HeadTab() {
+    useCurrentUrl();
+    const title = typeof document !== 'undefined' ? document.title : '';
+    const { metas, links } = readHead();
+    const meta = (n) => metas.find((m) => m.name === n)?.content;
+    const og = {
+        title: meta('og:title') ?? title,
+        description: meta('og:description') ?? meta('description'),
+        image: meta('og:image'),
+    };
+    const pages = getPages();
+    const described = pages.filter((p) => p.metadata.description !== undefined).length;
+    return (_jsxs("div", { className: "toil-dt-body", children: [_jsx(Row, { k: "title", children: title || '(none)' }), _jsx("p", { className: "toil-dt-sec", style: { marginTop: 10 }, children: "OpenGraph preview" }), _jsxs("div", { className: "toil-dt-og", children: [og.image && (_jsx("img", { src: og.image, alt: "", className: "toil-dt-og-img" })), _jsxs("div", { className: "toil-dt-og-body", children: [_jsx("div", { className: "toil-dt-og-title", children: og.title || '(no title)' }), _jsx("div", { className: "toil-dt-og-desc", children: og.description ?? '(no description)' })] })] }), _jsx("p", { className: "toil-dt-sec", style: { marginTop: 10 }, children: "SEO checklist" }), _jsx(Check, { ok: Boolean(title), label: "Has a title" }), _jsx(Check, { ok: meta('description') !== undefined, label: "Has a meta description" }), _jsx(Check, { ok: og.image !== undefined, label: "Has an og:image" }), _jsx(Check, { ok: links.some((l) => l.rel === 'canonical'), label: "Has a canonical link" }), _jsx(Check, { ok: pages.length === 0 || described === pages.length, label: `Pages with a description: ${String(described)}/${String(pages.length)}` }), _jsxs("p", { className: "toil-dt-sec", style: { marginTop: 10 }, children: ["Meta (", metas.length, ")"] }), metas.map((m, i) => (_jsx(Row, { k: m.name, children: m.content }, `${m.name}:${String(i)}`)))] }));
+}
+function BuildTab({ info }) {
+    return (_jsxs("div", { className: "toil-dt-body", children: [!info && _jsx("p", { className: "toil-dt-empty", children: "Loading dev info..." }), info && (_jsxs(_Fragment, { children: [_jsx(Row, { k: "toiljs", children: info.toiljs }), _jsx(Row, { k: "vite", children: info.vite }), _jsx(Row, { k: "react", children: info.react }), _jsx(Row, { k: "dev server", children: `localhost:${String(info.port)}` }), _jsx("p", { className: "toil-dt-sec", style: { marginTop: 12 }, children: "Config" }), Object.entries(info.flags).map(([k, v]) => (_jsx(Row, { k: k, children: v ? 'on' : 'off' }, k))), _jsx(Row, { k: "ai", children: info.ai ? 'configured' : 'hand-off only' })] }))] }));
+}
+function ErrorsTab() {
+    const errors = useErrors();
+    if (errors.length === 0)
+        return _jsx("p", { className: "toil-dt-empty toil-dt-body", children: "No errors captured." });
+    return (_jsx("div", { className: "toil-dt-body", children: [...errors].reverse().map((e, i) => (_jsxs("div", { className: "toil-dt-err", children: [_jsxs("div", { className: "msg", children: [e.error.name, ": ", e.error.message] }), _jsxs("div", { className: "toil-dt-k", children: [e.source, ", ", new Date(e.time).toLocaleTimeString()] })] }, `${String(e.time)}:${String(i)}`))) }));
+}
+function buildAiContext() {
+    if (typeof window === 'undefined')
+        return '';
+    const where = window.location.pathname + window.location.search;
+    const title = document.title;
+    const desc = readHead().metas.find((m) => m.name === 'description')?.content;
+    const lines = [
+        'I am working on a toiljs app (React with file-based routing, backend in toilscript/WASM).',
+        `Current page: ${where}`,
+    ];
+    if (title)
+        lines.push(`Page title: ${title}`);
+    if (desc)
+        lines.push(`Meta description: ${desc}`);
+    return lines.join('\n');
+}
+const DOC_LINKS = [
+    { label: 'Routing and file conventions', slug: 'routing' },
+    { label: 'Loaders and data', slug: 'loaders' },
+    { label: 'Metadata and SEO', slug: 'metadata' },
+    { label: 'Parallel routes and slots', slug: 'slots' },
+];
+function AiTab({ info }) {
+    useCurrentUrl();
+    const [question, setQuestion] = useState('');
+    const [answer, setAnswer] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const configured = info?.ai === true;
+    const prompt = () => {
+        const q = question.trim() || 'Explain this page and suggest improvements.';
+        return `${buildAiContext()}\n\nQuestion: ${q}`;
+    };
+    const handOff = (base) => {
+        window.open(`${base}${encodeURIComponent(prompt())}`, '_blank', 'noopener');
+    };
+    const copy = () => {
+        void navigator.clipboard.writeText(prompt()).catch(() => undefined);
+    };
+    const askInline = () => {
+        setBusy(true);
+        setAnswer(null);
+        void fetch('/__toil/ai', {
+            method: 'POST',
+            headers: { 'content-type': 'application/json' },
+            body: JSON.stringify({ prompt: prompt() }),
+        })
+            .then((r) => r.ok
+            ? r.json()
+            : Promise.reject(new Error(`HTTP ${String(r.status)}`)))
+            .then((d) => {
+            setAnswer(d.text ?? '(empty response)');
+        })
+            .catch((e) => {
+            setAnswer(`Error: ${e instanceof Error ? e.message : String(e)}`);
+        })
+            .finally(() => {
+            setBusy(false);
+        });
+    };
+    return (_jsxs("div", { className: "toil-dt-body", children: [_jsx("p", { className: "toil-dt-sec", children: "Ask about this page" }), _jsx("textarea", { className: "toil-dt-ta", placeholder: "Ask about the current route, or leave blank for a summary...", value: question, onChange: (e) => {
+                    setQuestion(e.target.value);
+                } }), _jsxs("div", { className: "toil-dt-ai-btns", children: [_jsxs("button", { className: "toil-dt-ai-btn", onClick: () => {
+                            handOff('https://claude.ai/new?q=');
+                        }, children: [_jsx(ClaudeLogo, { size: 14 }), " Claude"] }), _jsxs("button", { className: "toil-dt-ai-btn", onClick: () => {
+                            handOff('https://chatgpt.com/?q=');
+                        }, children: [_jsx(ChatGptLogo, { size: 14 }), " ChatGPT"] }), _jsx("button", { className: "toil-dt-ai-btn", onClick: copy, children: "Copy" }), configured && (_jsx("button", { className: "toil-dt-ai-btn", disabled: busy, onClick: askInline, children: busy ? 'Asking...' : 'Ask inline' }))] }), !configured && (_jsxs("p", { className: "toil-dt-k", children: ["Inline answers are off. Set ", _jsx("span", { className: "toil-dt-tag", children: "devtools.ai" }), " in your config to proxy a provider; the API key stays server-side."] })), answer !== null && _jsx("pre", { className: "toil-dt-pre", children: answer }), _jsx("p", { className: "toil-dt-sec", style: { marginTop: 12 }, children: "Quick docs" }), DOC_LINKS.map((d) => (_jsx("a", { className: "toil-dt-doc", href: `${DOCS_BASE}/${d.slug}`, target: "_blank", rel: "noreferrer", children: d.label }, d.slug)))] }));
+}
+function Palette({ routes, onClose }) {
+    const [q, setQ] = useState('');
+    const [sel, setSel] = useState(0);
+    const items = [];
+    for (const r of routes) {
+        if (!isDynamic(r.pattern)) {
+            items.push({
+                label: r.pattern,
+                kind: 'route',
+                run: () => {
+                    navigate(r.pattern);
+                    onClose();
+                },
+            });
+        }
+    }
+    items.push({
+        label: 'Revalidate current route',
+        kind: 'action',
+        run: () => {
+            revalidate();
+            onClose();
+        },
+    }, {
+        label: 'Clear loader cache',
+        kind: 'action',
+        run: () => {
+            clearLoaderData();
+            onClose();
+        },
+    }, {
+        label: 'Ask AI about this page',
+        kind: 'action',
+        run: () => {
+            setPrefs({ open: true, tab: 'ai' });
+            onClose();
+        },
+    }, {
+        label: 'Open preferences',
+        kind: 'action',
+        run: () => {
+            setPrefs({ open: true, tab: 'prefs' });
+            onClose();
+        },
+    });
+    const needle = q.toLowerCase();
+    const filtered = items.filter((it) => it.label.toLowerCase().includes(needle));
+    const clamped = Math.min(sel, Math.max(0, filtered.length - 1));
+    return (_jsx("div", { className: "toil-dt-pal-wrap", onClick: onClose, children: _jsxs("div", { className: "toil-dt-pal", onClick: (e) => {
+                e.stopPropagation();
+            }, children: [_jsx("input", { autoFocus: true, placeholder: "Go to a route or run an action...", value: q, onChange: (e) => {
+                        setQ(e.target.value);
+                        setSel(0);
+                    }, onKeyDown: (e) => {
+                        if (e.key === 'ArrowDown') {
+                            e.preventDefault();
+                            setSel((s) => Math.min(s + 1, filtered.length - 1));
+                        }
+                        else if (e.key === 'ArrowUp') {
+                            e.preventDefault();
+                            setSel((s) => Math.max(s - 1, 0));
+                        }
+                        else if (e.key === 'Enter') {
+                            e.preventDefault();
+                            filtered[clamped]?.run();
+                        }
+                        else if (e.key === 'Escape') {
+                            onClose();
+                        }
+                    } }), _jsxs("div", { className: "toil-dt-pal-list", children: [filtered.length === 0 && _jsx("div", { className: "toil-dt-pal-item", children: "No matches" }), filtered.map((it, i) => (_jsxs("div", { className: `toil-dt-pal-item ${i === clamped ? 'sel' : ''}`, onMouseEnter: () => {
+                                setSel(i);
+                            }, onClick: it.run, children: [_jsx("span", { children: it.label }), _jsx("span", { className: "toil-dt-pal-kind", children: it.kind })] }, `${it.kind}:${it.label}`)))] })] }) }));
+}
+function PrefsTab() {
+    const p = usePrefs();
+    const [flags, setFlags] = useState({ viewTransitions: false, transitions: false });
+    const toggle = (key) => {
+        const next = !flags[key];
+        setFlags((f) => ({ ...f, [key]: next }));
+        if (key === 'viewTransitions')
+            setViewTransitions(next);
+        else
+            setTransitions(next);
+    };
+    return (_jsxs("div", { className: "toil-dt-body", children: [_jsxs("div", { className: "toil-dt-sw", children: [_jsx("span", { children: "View transitions" }), _jsx("button", { className: "toil-dt-btn", onClick: () => {
+                            toggle('viewTransitions');
+                        }, children: flags.viewTransitions ? 'on' : 'off' })] }), _jsxs("div", { className: "toil-dt-sw", children: [_jsx("span", { children: "Loader transition" }), _jsx("button", { className: "toil-dt-btn", onClick: () => {
+                            toggle('transitions');
+                        }, children: flags.transitions ? 'on' : 'off' })] }), _jsxs("div", { className: "toil-dt-sw", children: [_jsx("span", { children: "Toolbar side" }), _jsx("button", { className: "toil-dt-btn", onClick: () => {
+                            setPrefs({ side: p.side === 'left' ? 'right' : 'left' });
+                        }, children: p.side })] })] }));
+}
+const TABS = [
+    { id: 'route', label: 'Route' },
+    { id: 'data', label: 'Data' },
+    { id: 'head', label: 'Head' },
+    { id: 'build', label: 'Build' },
+    { id: 'errors', label: 'Errors' },
+    { id: 'ai', label: 'AI' },
+    { id: 'prefs', label: 'Prefs' },
+];
+export function DevToolbar({ routes, slots, }) {
+    const p = usePrefs();
+    const pending = usePending();
+    const errors = useErrors();
+    const [info, setInfo] = useState(null);
+    const [palette, setPalette] = useState(false);
+    useEffect(() => {
+        injectStyles();
+        void fetch('/__toil/devinfo')
+            .then((r) => (r.ok ? r.json() : null))
+            .then((data) => {
+            if (data)
+                setInfo(data);
+        })
+            .catch(() => undefined);
+    }, []);
+    useEffect(() => {
+        const onKey = (e) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
+                e.preventDefault();
+                setPalette((v) => !v);
+            }
+        };
+        window.addEventListener('keydown', onKey);
+        return () => {
+            window.removeEventListener('keydown', onKey);
+        };
+    }, []);
+    if (info && !info.enabled)
+        return null;
+    const dotClass = errors.length > 0 ? 'error' : pending ? 'pending' : '';
+    const pal = palette ? (_jsx(Palette, { routes: routes, onClose: () => {
+            setPalette(false);
+        } })) : null;
+    if (!p.open) {
+        return (_jsxs(_Fragment, { children: [_jsx("div", { className: `toil-dt ${p.side}`, children: _jsxs("div", { className: "toil-dt-badge", onClick: () => {
+                            setPrefs({ open: true });
+                        }, title: "toiljs devtools (cmd+K)", children: [_jsx(ToilLogo, { size: 16 }), _jsx("span", { className: `toil-dt-dot ${dotClass}` })] }) }), pal] }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx("div", { className: `toil-dt ${p.side}`, children: _jsxs("div", { className: "toil-dt-panel", children: [_jsxs("div", { className: "toil-dt-head", children: [_jsxs("span", { style: { display: 'flex', alignItems: 'center', gap: 6 }, children: [_jsx(ToilLogo, { size: 14 }), _jsx("span", { className: "toil-dt-logo", children: "toiljs" }), " devtools", _jsx("span", { className: `toil-dt-dot ${dotClass}` })] }), _jsx("button", { className: "toil-dt-x", onClick: () => {
+                                        setPrefs({ open: false });
+                                    }, children: "\u2715" })] }), _jsx("div", { className: "toil-dt-tabs", children: TABS.map((t) => (_jsxs("button", { className: `toil-dt-tab ${p.tab === t.id ? 'active' : ''}`, onClick: () => {
+                                    setPrefs({ tab: t.id });
+                                }, children: [t.label, t.id === 'errors' && errors.length > 0 ? ` (${String(errors.length)})` : ''] }, t.id))) }), p.tab === 'route' && _jsx(RouteTab, { routes: routes, slots: slots, info: info }), p.tab === 'data' && _jsx(DataTab, {}), p.tab === 'head' && _jsx(HeadTab, {}), p.tab === 'build' && _jsx(BuildTab, { info: info }), p.tab === 'errors' && _jsx(ErrorsTab, {}), p.tab === 'ai' && _jsx(AiTab, { info: info }), p.tab === 'prefs' && _jsx(PrefsTab, {})] }) }), pal] }));
+}

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

@@ -1,4 +1,13 @@
 import { Component, type ErrorInfo, type ReactNode } from 'react';
+export interface DevError {
+    readonly error: Error;
+    readonly componentStack?: string;
+    readonly source: 'render' | 'window' | 'unhandledrejection';
+    readonly time: number;
+}
+declare function subscribe(listener: () => void): () => void;
+export declare function getErrorLog(): readonly DevError[];
+export declare const subscribeErrors: typeof subscribe;
 export declare function isDevMode(): boolean;
 export declare function initDevErrorOverlay(): void;
 interface BoundaryProps {

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

@@ -2,12 +2,17 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 import { Component, useSyncExternalStore, } from 'react';
 let current = null;
 const listeners = new Set();
+let errorLog = [];
+const MAX_LOG = 50;
 function emit() {
     for (const listener of listeners)
         listener();
 }
 function setDevError(next) {
     current = next;
+    if (next) {
+        errorLog = [...errorLog, next].slice(-MAX_LOG);
+    }
     emit();
 }
 function subscribe(listener) {
@@ -16,6 +21,10 @@ function subscribe(listener) {
         listeners.delete(listener);
     };
 }
+export function getErrorLog() {
+    return errorLog;
+}
+export const subscribeErrors = subscribe;
 export function isDevMode() {
     try {
         return Boolean(import.meta.env?.DEV);
@@ -30,13 +39,14 @@ export function initDevErrorOverlay() {
         return;
     windowBound = true;
     window.addEventListener('error', (event) => {
-        if (event.error instanceof Error)
-            setDevError({ error: event.error, source: 'window' });
+        if (event.error instanceof Error) {
+            setDevError({ error: event.error, source: 'window', time: Date.now() });
+        }
     });
     window.addEventListener('unhandledrejection', (event) => {
         const reason = event.reason;
         const error = reason instanceof Error ? reason : new Error(String(reason));
-        setDevError({ error, source: 'unhandledrejection' });
+        setDevError({ error, source: 'unhandledrejection', time: Date.now() });
     });
 }
 export class DevErrorBoundary extends Component {
@@ -46,7 +56,12 @@ export class DevErrorBoundary extends Component {
         return { crashed: true };
     }
     componentDidCatch(error, info) {
-        setDevError({ error, componentStack: info.componentStack ?? undefined, source: 'render' });
+        setDevError({
+            error,
+            componentStack: info.componentStack ?? undefined,
+            source: 'render',
+            time: Date.now(),
+        });
     }
     componentDidMount() {
         this.unsubscribe = subscribe(() => {

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

@@ -8,4 +8,5 @@ declare global {
     }
 }
 export declare function prefetch(href: string): void;
+export declare function prefetchData(href: string): void;
 export declare function startPrefetcher(routes: RouteDef[]): void;

package/build/client/navigation/prefetch.js

@@ -1,6 +1,8 @@
+import { prefetchRouteData } from '../routing/loader.js';
 import { matchRoute } from '../routing/match.js';
 let routeTable = [];
 const warmed = new WeakSet();
+const dataWarmed = new Set();
 let io = null;
 let mo = null;
 function routeForHref(href) {
@@ -32,6 +34,29 @@ export function prefetch(href) {
     if (route)
         warm(route);
 }
+export function prefetchData(href) {
+    let url;
+    try {
+        url = new URL(href, window.location.href);
+    }
+    catch {
+        return;
+    }
+    if (url.origin !== window.location.origin)
+        return;
+    const key = url.pathname + url.search;
+    if (dataWarmed.has(key))
+        return;
+    for (const route of routeTable) {
+        const params = matchRoute(route.pattern, url.pathname);
+        if (params) {
+            dataWarmed.add(key);
+            warm(route);
+            prefetchRouteData(route, params, url.pathname, url.search);
+            return;
+        }
+    }
+}
 function isPrefetchable(a) {
     if (a.target && a.target !== '_self')
         return false;
@@ -89,6 +114,16 @@ export function startPrefetcher(routes) {
             }
         }
     });
+    const onIntent = (event) => {
+        const target = event.target;
+        if (!(target instanceof Element))
+            return;
+        const a = target.closest('a[href]');
+        if (a instanceof HTMLAnchorElement && isPrefetchable(a) && a.href)
+            prefetchData(a.href);
+    };
+    document.addEventListener('pointerover', onIntent, { passive: true });
+    document.addEventListener('focusin', onIntent);
     const begin = () => {
         scan(document);
         mo?.observe(document.body, { childList: true, subtree: true });

package/build/client/routing/Router.js

@@ -21,7 +21,7 @@ function renderMatched(matched, params, pathname, epoch, keyPrefix) {
     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));
+    let content = (_jsx(Suspense, { fallback: fallback, children: _jsx(RoutePage, { route: matched, params: params, dataKey: dataKey, epoch: epoch }, dataKey) }, matched.loading ? `${dataKey}:${String(epoch)}` : undefined));
     const templates = matched.templates ?? [];
     for (let i = templates.length - 1; i >= 0; i--) {
         const Template = nestedLayout(templates[i]);

package/build/client/routing/hooks.js

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useMemo, useReducer, useSyncExternalStore } from 'react';
+import { startTransition, 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,7 +32,11 @@ export function useRouter() {
 }
 function useLocationSubscription() {
     const [, forceUpdate] = useReducer((n) => n + 1, 0);
-    useEffect(() => subscribeLocation(forceUpdate), []);
+    useEffect(() => subscribeLocation(() => {
+        startTransition(() => {
+            forceUpdate();
+        });
+    }), []);
 }
 export function useLocation() {
     useLocationSubscription();

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

@@ -16,7 +16,30 @@ interface RouteData {
     data: unknown;
     head?: HeadSpec;
 }
+interface Entry {
+    status: 'pending' | 'done' | 'error';
+    promise: Promise<void>;
+    value?: RouteData;
+    error?: unknown;
+    loadedAt: number;
+    revalidate: Revalidate;
+    epoch: number;
+    hasLoader: boolean;
+    prefetched: boolean;
+}
+export declare function subscribeLoaderCache(listener: () => void): () => void;
+export interface LoaderCacheSnapshot {
+    readonly key: string;
+    readonly status: Entry['status'];
+    readonly hasLoader: boolean;
+    readonly revalidate: Revalidate;
+    readonly loadedAt: number;
+    readonly epoch: number;
+    readonly data: unknown;
+}
+export declare function inspectLoaderCache(): LoaderCacheSnapshot[];
 export declare function loaderKey(pathname: string, search: string): string;
+export declare function prefetchRouteData(route: RouteDef, params: RouteParams, pathname: string, search: string): void;
 export declare function readRouteData(route: RouteDef, params: RouteParams, key: string, epoch: number): RouteData;
 export declare function clearLoaderData(): void;
 export declare function invalidateLoaderData(href?: string): void;