@chuvenger/devdock 0.4.1 → 0.6.0

package/dist/react-router.js

@@ -1,7 +1,7 @@
-import { DevDock } from './chunk-P4ZUS4GB.js';
+import { DevDock } from './chunk-3MVFATRN.js';
 import { isDevPath, isMatcher, dedupeByPath, toPredicate } from './chunk-NRBOZ6H5.js';
-import './chunk-WVRXVSEL.js';
-import { useContext, useMemo } from 'react';
+import './chunk-NXZNFF34.js';
+import { useContext, useMemo, useState, useEffect, useRef } from 'react';
 import { UNSAFE_DataRouterContext, useNavigate } from 'react-router';
 import { jsx } from 'react/jsx-runtime';
 
@@ -36,23 +36,116 @@ function walk(routes, parent, staticRoutes, inherited) {
   }
   return out;
 }
+var NO_ROUTES = [];
+var NO_HANDLES = /* @__PURE__ */ new Map();
+function lazyHandleOf(route) {
+  const lazy = route.lazy;
+  if (typeof lazy === "function") return async () => (await lazy())?.handle;
+  return typeof lazy?.handle === "function" ? lazy.handle : void 0;
+}
+async function readLazyHandle(route) {
+  try {
+    return await lazyHandleOf(route)?.();
+  } catch {
+    return void 0;
+  }
+}
+function collectLazy(routes, out = []) {
+  for (const r of routes) {
+    if (r.handle == null && lazyHandleOf(r) != null) out.push(r);
+    if (r.children?.length) collectLazy(r.children, out);
+  }
+  return out;
+}
+function signature(routes, out = []) {
+  for (const r of routes) {
+    const h = r.handle;
+    out.push(
+      `${r.path ?? ""}|${r.index ? 1 : 0}|${h?.dev}|${h?.devLabel}|${h?.devGroup}|${h?.hidden}|${lazyHandleOf(r) ? 1 : 0}`
+    );
+    if (r.children?.length) signature(r.children, out);
+  }
+  return out;
+}
+function useRouteTree(router) {
+  const routes = router?.routes ?? NO_ROUTES;
+  const [sig, setSig] = useState(() => signature(routes).join("\n"));
+  useEffect(() => {
+    if (!router?.subscribe) return;
+    const check = () => {
+      const next = signature(router.routes ?? NO_ROUTES).join("\n");
+      setSig((prev) => prev === next ? prev : next);
+    };
+    check();
+    return router.subscribe(check);
+  }, [router]);
+  return [routes, sig];
+}
+function useLazyHandles(routes, sig, enabled) {
+  const [handles, setHandles] = useState(NO_HANDLES);
+  const started = useRef(
+    /* @__PURE__ */ new WeakMap()
+  );
+  useEffect(() => {
+    if (!enabled) return;
+    const targets = collectLazy(routes);
+    if (targets.length === 0) return;
+    let cancelled = false;
+    void Promise.all(
+      targets.map((route) => {
+        let pending = started.current.get(route);
+        if (!pending) {
+          pending = readLazyHandle(route);
+          started.current.set(route, pending);
+        }
+        return pending.then((handle) => [route, handle]);
+      })
+    ).then((resolved) => {
+      if (cancelled) return;
+      const found = resolved.filter(
+        (entry) => entry[1] != null
+      );
+      setHandles(
+        (prev) => found.some(([route, handle]) => prev.get(route) !== handle) ? new Map([...prev, ...found]) : prev
+      );
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [routes, sig, enabled]);
+  return handles;
+}
+function mergeHandles(routes, handles) {
+  let changed = false;
+  const merged = routes.map((r) => {
+    const handle = r.handle ?? handles.get(r);
+    const children = r.children ? mergeHandles(r.children, handles) : r.children;
+    if (handle === r.handle && children === r.children) return r;
+    changed = true;
+    return { ...r, handle, children };
+  });
+  return changed ? merged : routes;
+}
 function useDetectedRoutes(options = {}) {
   const opts = isMatcher(options) ? { match: options } : options;
-  const { match, staticRoutes } = opts;
+  const { match, staticRoutes, loadHandles } = opts;
   const ctx = useContext(UNSAFE_DataRouterContext);
-  const routes = ctx?.router?.routes ?? [];
+  const [routes, sig] = useRouteTree(ctx?.router);
+  const handles = useLazyHandles(routes, sig, loadHandles === true);
   return useMemo(() => {
-    const deduped = dedupeByPath(flattenRoutes(routes, "", { staticRoutes }));
+    const tree = handles.size > 0 ? mergeHandles(routes, handles) : routes;
+    const deduped = dedupeByPath(flattenRoutes(tree, "", { staticRoutes }));
     return match ? deduped.filter(toPredicate(match)) : deduped;
-  }, [routes, match, staticRoutes]);
+  }, [routes, sig, handles, match, staticRoutes]);
 }
 function ReactRouterDevDock({
   match,
   staticRoutes,
+  loadHandles,
   ...props
 }) {
   const navigate = useNavigate();
-  const detected = useDetectedRoutes({ match, staticRoutes });
+  const detected = useDetectedRoutes({ match, staticRoutes, loadHandles });
   const routes = useMemo(
     () => [...detected, ...props.routes ?? []],
     [detected, props.routes]

package/dist/react-router.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/react/react-router.tsx"],"names":["DataRouterContext"],"mappings":"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","file":"react-router.js","sourcesContent":["import { useContext, useMemo } from \"react\";\nimport {\n  useNavigate,\n  // UNSAFE_DataRouterContext is the supported way to reach the active\n  // router instance (and its full route tree) for data routers. Imported\n  // from `react-router` (not `react-router-dom`) so this works on v6, v7\n  // and v8 — v8 dropped the `react-router-dom` package entirely.\n  UNSAFE_DataRouterContext as DataRouterContext,\n} from \"react-router\";\nimport { DevDock, type DevDockProps } from \"./DevDock\";\nimport type { DevRoute } from \"../core/types\";\nimport {\n  dedupeByPath,\n  isDevPath,\n  isMatcher,\n  toPredicate,\n  type RouteMatcher,\n} from \"../core/match\";\n\nexport type { RouteMatcher };\n\n/** Minimal shape of a react-router route object we care about. */\ninterface RRRoute {\n  path?: string;\n  index?: boolean;\n  children?: RRRoute[];\n  handle?: {\n    dev?: boolean;\n    devLabel?: string;\n    devGroup?: string;\n    hidden?: boolean;\n  } & Record<string, unknown>;\n}\n\nfunction joinPath(parent: string, child: string): string {\n  if (child.startsWith(\"/\")) return child;\n  if (!child) return parent || \"/\";\n  const base = parent.endsWith(\"/\") ? parent.slice(0, -1) : parent;\n  return `${base}/${child}`;\n}\n\n/** Opt-in markers that make a route a dev destination. */\nfunction isDevMarked(handle: RRRoute[\"handle\"]): boolean {\n  return (\n    handle?.dev === true || handle?.devLabel != null || handle?.devGroup != null\n  );\n}\n\nexport interface DetectOptions {\n  /**\n   * Only keep routes that match. A glob string (`*` = any characters), a\n   * `RegExp`, or a predicate.\n   */\n  match?: RouteMatcher;\n  /**\n   * Also list the app's ordinary static routes, not just the dev ones.\n   * Default: `false`.\n   */\n  staticRoutes?: boolean;\n}\n\n/** State handed down to descendants of a dev-marked route. */\ninterface Inherited {\n  dev: boolean;\n  group?: string;\n}\n\n/**\n * Flatten a react-router route tree into navigable {@link DevRoute}s.\n *\n * Only dev destinations are returned: routes under `/dev`, routes marked with\n * `handle.dev`, `handle.devLabel` or `handle.devGroup`, and everything nested\n * under them. Pass `{ staticRoutes: true }` to list every static route instead.\n *\n * Dynamic (`:param`) and splat (`*`) segments are skipped since they can't be\n * navigated to without arguments. Mark a route with `handle.hidden` to exclude\n * it, or `handle.devLabel` to rename it.\n */\nexport function flattenRoutes(\n  routes: RRRoute[],\n  parent = \"\",\n  options: Pick<DetectOptions, \"staticRoutes\"> = {},\n): DevRoute[] {\n  return walk(routes, parent, options.staticRoutes === true, { dev: false });\n}\n\nfunction walk(\n  routes: RRRoute[],\n  parent: string,\n  staticRoutes: boolean,\n  inherited: Inherited,\n): DevRoute[] {\n  const out: DevRoute[] = [];\n  for (const r of routes) {\n    const full = r.index ? parent : joinPath(parent, r.path ?? \"\");\n    // A dev route makes its whole subtree dev, so marking a section's layout\n    // route is enough to surface the pages inside it. The `/dev` check reads\n    // the joined path, which also catches flat routes like `dev/inspector`.\n    const dev = inherited.dev || isDevMarked(r.handle) || isDevPath(full);\n    const group = r.handle?.devGroup ?? inherited.group;\n    const navigable =\n      !r.index &&\n      r.path != null &&\n      !full.includes(\":\") &&\n      !full.includes(\"*\") &&\n      r.handle?.hidden !== true &&\n      (dev || staticRoutes);\n    if (navigable) {\n      out.push({\n        path: full || \"/\",\n        label: r.handle?.devLabel ?? (full || \"/\"),\n        group,\n      });\n    }\n    if (r.children?.length)\n      out.push(...walk(r.children, full, staticRoutes, { dev, group }));\n  }\n  return out;\n}\n\n/**\n * Read the dev routes off the active react-router data router — anything under\n * `/dev` or marked with `handle.dev` / `devLabel` / `devGroup`, plus their\n * children.\n * Pass `{ staticRoutes: true }` to include the app's ordinary routes too, and\n * `{ match }` to scope the results. A bare matcher is accepted as shorthand.\n */\nexport function useDetectedRoutes(\n  options: DetectOptions | RouteMatcher = {},\n): DevRoute[] {\n  const opts: DetectOptions = isMatcher(options) ? { match: options } : options;\n  const { match, staticRoutes } = opts;\n  const ctx = useContext(DataRouterContext);\n  const routes = (ctx?.router?.routes ?? []) as RRRoute[];\n  return useMemo(() => {\n    const deduped = dedupeByPath(flattenRoutes(routes, \"\", { staticRoutes }));\n    return match ? deduped.filter(toPredicate(match)) : deduped;\n  }, [routes, match, staticRoutes]);\n}\n\nexport interface ReactRouterDevDockProps extends DevDockProps {\n  /**\n   * Only auto-detect routes that match. A glob string (`*` = any characters,\n   * e.g. `\"/dev/*\"`), a `RegExp`, or a predicate. Manual `routes` are always\n   * included regardless of this filter.\n   */\n  match?: RouteMatcher;\n  /**\n   * List the app's ordinary static routes alongside the dev ones.\n   * Off by default, so the dock only shows what you opted in.\n   */\n  staticRoutes?: boolean;\n}\n\n/**\n * Drop-in {@link DevDock} for react-router apps: navigates via the SPA router\n * and auto-detects the dev routes from the active data router. Any `routes`\n * you pass are appended to the detected ones.\n */\nexport function ReactRouterDevDock({\n  match,\n  staticRoutes,\n  ...props\n}: ReactRouterDevDockProps) {\n  const navigate = useNavigate();\n  const detected = useDetectedRoutes({ match, staticRoutes });\n  const routes = useMemo(\n    () => [...detected, ...(props.routes ?? [])],\n    [detected, props.routes],\n  );\n  return (\n    <DevDock\n      {...props}\n      routes={routes}\n      onNavigate={props.onNavigate ?? ((path) => navigate(path))}\n    />\n  );\n}\n"]}
+{"version":3,"sources":["../src/react/react-router.tsx"],"names":["DataRouterContext"],"mappings":"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","file":"react-router.js","sourcesContent":["import { useContext, useEffect, useMemo, useRef, useState } from \"react\";\nimport {\n  useNavigate,\n  // UNSAFE_DataRouterContext is the supported way to reach the active\n  // router instance (and its full route tree) for data routers. Imported\n  // from `react-router` (not `react-router-dom`) so this works on v6, v7\n  // and v8 — v8 dropped the `react-router-dom` package entirely.\n  UNSAFE_DataRouterContext as DataRouterContext,\n} from \"react-router\";\nimport { DevDock, type DevDockProps } from \"./DevDock\";\nimport type { DevRoute } from \"../core/types\";\nimport {\n  dedupeByPath,\n  isDevPath,\n  isMatcher,\n  toPredicate,\n  type RouteMatcher,\n} from \"../core/match\";\n\nexport type { RouteMatcher };\n\n/** The `handle` fields the dock reads off a route. */\ninterface DevHandle {\n  dev?: boolean;\n  devLabel?: string;\n  devGroup?: string;\n  hidden?: boolean;\n  /** Whatever else the app puts on `handle`; the dock ignores it. */\n  [key: string]: unknown;\n}\n\n/** `handle` loader for one route property, as lazy route objects expose it. */\ntype LazyProperty<T> = () => Promise<T | undefined>;\n\n/** Minimal shape of a react-router route object we care about. */\ninterface RRRoute {\n  path?: string;\n  index?: boolean;\n  children?: RRRoute[];\n  handle?: DevHandle;\n  /**\n   * Set while the route's module is still unloaded. Two shapes exist: a\n   * function resolving to the module, whose exports are the route's properties\n   * (`lazy: () => import(\"./route\")`, v6.19+), and an object with one loader\n   * per property (v7.5+, and what framework mode builds for every route).\n   * `handle` rides along in both.\n   */\n  lazy?:\n    LazyProperty<{ handle?: DevHandle }> | { handle?: LazyProperty<DevHandle> };\n}\n\n/** The slice of the data router the adapter uses, across v6/v7/v8. */\ninterface RRRouter {\n  routes?: RRRoute[];\n  subscribe?: (listener: () => void) => () => void;\n}\n\nfunction joinPath(parent: string, child: string): string {\n  if (child.startsWith(\"/\")) return child;\n  if (!child) return parent || \"/\";\n  const base = parent.endsWith(\"/\") ? parent.slice(0, -1) : parent;\n  return `${base}/${child}`;\n}\n\n/** Opt-in markers that make a route a dev destination. */\nfunction isDevMarked(handle: RRRoute[\"handle\"]): boolean {\n  return (\n    handle?.dev === true || handle?.devLabel != null || handle?.devGroup != null\n  );\n}\n\nexport interface DetectOptions {\n  /**\n   * Only keep routes that match. A glob string (`*` = any characters), a\n   * `RegExp`, or a predicate.\n   */\n  match?: RouteMatcher;\n  /**\n   * Also list the app's ordinary static routes, not just the dev ones.\n   * Default: `false`.\n   */\n  staticRoutes?: boolean;\n  /**\n   * Import lazy route modules to read their `handle`.\n   *\n   * In framework mode (`app/routes.ts`) every route is lazy, so `handle` is\n   * not on the route object the router exposes — it lives in the route module\n   * and only reaches the route once that module loads, i.e. once you visit the\n   * page. Without this, framework-mode routes are detected by the `/dev/*`\n   * path convention alone and `handle.dev` / `devLabel` / `devGroup` /\n   * `hidden` are silently ignored.\n   *\n   * Opt-in because reading a handle up front means importing the module up\n   * front — dev only, but that is still every lazy route's module, and any\n   * import side effects with it. Default: `false`.\n   */\n  loadHandles?: boolean;\n}\n\n/** State handed down to descendants of a dev-marked route. */\ninterface Inherited {\n  dev: boolean;\n  group?: string;\n}\n\n/**\n * Flatten a react-router route tree into navigable {@link DevRoute}s.\n *\n * Only dev destinations are returned: routes under `/dev`, routes marked with\n * `handle.dev`, `handle.devLabel` or `handle.devGroup`, and everything nested\n * under them. Pass `{ staticRoutes: true }` to list every static route instead.\n *\n * Dynamic (`:param`) and splat (`*`) segments are skipped since they can't be\n * navigated to without arguments. Mark a route with `handle.hidden` to exclude\n * it, or `handle.devLabel` to rename it.\n *\n * Reads `handle` straight off each route object, so a tree whose routes are\n * still lazy has no handles to read — see {@link DetectOptions.loadHandles}.\n */\nexport function flattenRoutes(\n  routes: RRRoute[],\n  parent = \"\",\n  options: Pick<DetectOptions, \"staticRoutes\"> = {},\n): DevRoute[] {\n  return walk(routes, parent, options.staticRoutes === true, { dev: false });\n}\n\nfunction walk(\n  routes: RRRoute[],\n  parent: string,\n  staticRoutes: boolean,\n  inherited: Inherited,\n): DevRoute[] {\n  const out: DevRoute[] = [];\n  for (const r of routes) {\n    const full = r.index ? parent : joinPath(parent, r.path ?? \"\");\n    // A dev route makes its whole subtree dev, so marking a section's layout\n    // route is enough to surface the pages inside it. The `/dev` check reads\n    // the joined path, which also catches flat routes like `dev/inspector`.\n    const dev = inherited.dev || isDevMarked(r.handle) || isDevPath(full);\n    const group = r.handle?.devGroup ?? inherited.group;\n    const navigable =\n      !r.index &&\n      r.path != null &&\n      !full.includes(\":\") &&\n      !full.includes(\"*\") &&\n      r.handle?.hidden !== true &&\n      (dev || staticRoutes);\n    if (navigable) {\n      out.push({\n        path: full || \"/\",\n        label: r.handle?.devLabel ?? (full || \"/\"),\n        group,\n      });\n    }\n    if (r.children?.length)\n      out.push(...walk(r.children, full, staticRoutes, { dev, group }));\n  }\n  return out;\n}\n\n// ---- lazy handles ---------------------------------------------------------\n\nconst NO_ROUTES: RRRoute[] = [];\nconst NO_HANDLES: ReadonlyMap<RRRoute, DevHandle> = new Map();\n\n/** The route's `handle` loader, whichever `lazy` shape it uses. */\nfunction lazyHandleOf(route: RRRoute): LazyProperty<DevHandle> | undefined {\n  const lazy = route.lazy;\n  if (typeof lazy === \"function\") return async () => (await lazy())?.handle;\n  return typeof lazy?.handle === \"function\" ? lazy.handle : undefined;\n}\n\nasync function readLazyHandle(route: RRRoute): Promise<DevHandle | undefined> {\n  try {\n    return await lazyHandleOf(route)?.();\n  } catch {\n    // A route module that won't load is the app's problem, not the dock's.\n    // Fall back to listing the route by path.\n    return undefined;\n  }\n}\n\nfunction collectLazy(routes: RRRoute[], out: RRRoute[] = []): RRRoute[] {\n  for (const r of routes) {\n    // A `handle` already on the route is the router's own resolved value.\n    if (r.handle == null && lazyHandleOf(r) != null) out.push(r);\n    if (r.children?.length) collectLazy(r.children, out);\n  }\n  return out;\n}\n\n/**\n * Everything the dock reads out of the route tree, as a comparable string.\n *\n * Neither the tree's identity nor its contents are a reliable change signal on\n * their own: the router resolves `lazy` by mutating route objects in place, and\n * patches discovered branches into the arrays it already handed out. Only some\n * versions swap the top-level array. So compare what we actually read.\n */\nfunction signature(routes: RRRoute[], out: string[] = []): string[] {\n  for (const r of routes) {\n    const h = r.handle;\n    out.push(\n      `${r.path ?? \"\"}|${r.index ? 1 : 0}|${h?.dev}|${h?.devLabel}` +\n        `|${h?.devGroup}|${h?.hidden}|${lazyHandleOf(r) ? 1 : 0}`,\n    );\n    if (r.children?.length) signature(r.children, out);\n  }\n  return out;\n}\n\n/**\n * The router's route tree, plus a signature that changes whenever the tree\n * does. Routes arrive late in framework mode — `lazy` modules resolve on\n * navigation and lazy route discovery patches whole branches in as links\n * render — and both land as a router state update.\n */\nfunction useRouteTree(router: RRRouter | undefined): [RRRoute[], string] {\n  const routes = router?.routes ?? NO_ROUTES;\n  const [sig, setSig] = useState(() => signature(routes).join(\"\\n\"));\n  useEffect(() => {\n    if (!router?.subscribe) return;\n    const check = () => {\n      const next = signature(router.routes ?? NO_ROUTES).join(\"\\n\");\n      setSig((prev) => (prev === next ? prev : next));\n    };\n    // The tree can have moved between render and effect.\n    check();\n    return router.subscribe(check);\n  }, [router]);\n  return [routes, sig];\n}\n\n/** Handles read out of lazy route modules, keyed by route object. */\nfunction useLazyHandles(\n  routes: RRRoute[],\n  sig: string,\n  enabled: boolean,\n): ReadonlyMap<RRRoute, DevHandle> {\n  const [handles, setHandles] = useState(NO_HANDLES);\n  // Promises, not values, and keyed by the route objects the router reuses: a\n  // module is imported once no matter how often the effect re-runs, and an\n  // effect that was cleaned up mid-flight (StrictMode's double invoke) can\n  // re-await the same work instead of dropping it.\n  const started = useRef(\n    new WeakMap<RRRoute, Promise<DevHandle | undefined>>(),\n  );\n  useEffect(() => {\n    if (!enabled) return;\n    const targets = collectLazy(routes);\n    if (targets.length === 0) return;\n    let cancelled = false;\n    void Promise.all(\n      targets.map((route) => {\n        let pending = started.current.get(route);\n        if (!pending) {\n          pending = readLazyHandle(route);\n          started.current.set(route, pending);\n        }\n        return pending.then((handle) => [route, handle] as const);\n      }),\n    ).then((resolved) => {\n      if (cancelled) return;\n      const found = resolved.filter(\n        (entry): entry is [RRRoute, DevHandle] => entry[1] != null,\n      );\n      setHandles((prev) =>\n        found.some(([route, handle]) => prev.get(route) !== handle)\n          ? new Map([...prev, ...found])\n          : prev,\n      );\n    });\n    return () => {\n      cancelled = true;\n    };\n  }, [routes, sig, enabled]);\n  return handles;\n}\n\n/**\n * The tree with lazily-read handles filled in. A copy rather than a mutation:\n * assigning `route.handle` ourselves makes the router warn about a \"static\n * property\" and skip its own resolution of the lazy one.\n */\nfunction mergeHandles(\n  routes: RRRoute[],\n  handles: ReadonlyMap<RRRoute, DevHandle>,\n): RRRoute[] {\n  let changed = false;\n  const merged = routes.map((r) => {\n    const handle = r.handle ?? handles.get(r);\n    const children = r.children\n      ? mergeHandles(r.children, handles)\n      : r.children;\n    if (handle === r.handle && children === r.children) return r;\n    changed = true;\n    return { ...r, handle, children };\n  });\n  return changed ? merged : routes;\n}\n\n/**\n * Read the dev routes off the active react-router data router — anything under\n * `/dev` or marked with `handle.dev` / `devLabel` / `devGroup`, plus their\n * children.\n * Pass `{ staticRoutes: true }` to include the app's ordinary routes too,\n * `{ match }` to scope the results, and `{ loadHandles: true }` to read\n * `handle` from routes whose module hasn't loaded yet (framework mode). A bare\n * matcher is accepted as shorthand.\n *\n * Re-reads the tree as the router grows it, so routes that are discovered or\n * resolved after the first render show up on their own.\n */\nexport function useDetectedRoutes(\n  options: DetectOptions | RouteMatcher = {},\n): DevRoute[] {\n  const opts: DetectOptions = isMatcher(options) ? { match: options } : options;\n  const { match, staticRoutes, loadHandles } = opts;\n  const ctx = useContext(DataRouterContext);\n  const [routes, sig] = useRouteTree(ctx?.router as RRRouter | undefined);\n  const handles = useLazyHandles(routes, sig, loadHandles === true);\n  // `sig` is a dep because the tree is mutated in place (see useRouteTree).\n  return useMemo(() => {\n    const tree = handles.size > 0 ? mergeHandles(routes, handles) : routes;\n    const deduped = dedupeByPath(flattenRoutes(tree, \"\", { staticRoutes }));\n    return match ? deduped.filter(toPredicate(match)) : deduped;\n  }, [routes, sig, handles, match, staticRoutes]);\n}\n\nexport interface ReactRouterDevDockProps extends DevDockProps {\n  /**\n   * Only auto-detect routes that match. A glob string (`*` = any characters,\n   * e.g. `\"/dev/*\"`), a `RegExp`, or a predicate. Manual `routes` are always\n   * included regardless of this filter.\n   */\n  match?: RouteMatcher;\n  /**\n   * List the app's ordinary static routes alongside the dev ones.\n   * Off by default, so the dock only shows what you opted in.\n   */\n  staticRoutes?: boolean;\n  /**\n   * Import lazy route modules so their `handle` is visible. Needed for\n   * `handle.dev` / `devLabel` / `devGroup` / `hidden` in React Router\n   * framework mode. See {@link DetectOptions.loadHandles}.\n   */\n  loadHandles?: boolean;\n}\n\n/**\n * Drop-in {@link DevDock} for react-router apps: navigates via the SPA router\n * and auto-detects the dev routes from the active data router. Any `routes`\n * you pass are appended to the detected ones.\n */\nexport function ReactRouterDevDock({\n  match,\n  staticRoutes,\n  loadHandles,\n  ...props\n}: ReactRouterDevDockProps) {\n  const navigate = useNavigate();\n  const detected = useDetectedRoutes({ match, staticRoutes, loadHandles });\n  const routes = useMemo(\n    () => [...detected, ...(props.routes ?? [])],\n    [detected, props.routes],\n  );\n  return (\n    <DevDock\n      {...props}\n      routes={routes}\n      onNavigate={props.onNavigate ?? ((path) => navigate(path))}\n    />\n  );\n}\n"]}

package/dist/react.cjs

@@ -1,6 +1,8 @@
 'use strict';
 
 var react = require('react');
+var reactDom = require('react-dom');
+var jsxRuntime = require('react/jsx-runtime');
 
 // src/react/DevDock.tsx
 
@@ -58,6 +60,27 @@ function el(tag, styles, props) {
   if (props) Object.assign(node, props);
   return node;
 }
+function sectionHeading(text) {
+  return el(
+    "div",
+    {
+      padding: "6px 8px 2px",
+      fontSize: "10px",
+      fontWeight: "700",
+      letterSpacing: "0.6px",
+      textTransform: "uppercase",
+      color: "#6b7280"
+    },
+    { textContent: text }
+  );
+}
+function viewLabel(text) {
+  return el(
+    "div",
+    { padding: "4px 8px 0", fontSize: "11px", color: "#8b909c" },
+    { textContent: text }
+  );
+}
 function cornerStyle(position) {
   const gap = "16px";
   switch (position) {
@@ -81,6 +104,15 @@ function panelAnchor(position) {
   };
 }
 var FONT = "ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif";
+function keyViews(views) {
+  const used = /* @__PURE__ */ new Set();
+  return views.map((view, i) => {
+    let key = view.id ?? `#${i}`;
+    while (used.has(key)) key = `${key}#${i}`;
+    used.add(key);
+    return { view, key };
+  });
+}
 function createDevDock(initial = {}) {
   if (typeof document === "undefined") {
     return { update() {
@@ -94,9 +126,12 @@ function createDevDock(initial = {}) {
   let mounted = false;
   const host = el("div");
   host.setAttribute("data-devdock", "");
-  const useShadow = (initial.shadow ?? true) && typeof host.attachShadow === "function";
+  const shadowMode = initial.shadow ?? true;
+  const useShadow = shadowMode !== false && typeof host.attachShadow === "function";
   const shadowRoot = useShadow ? host.attachShadow({ mode: "open" }) : null;
   const mountPoint = shadowRoot ?? host;
+  const styleSlot = shadowRoot && shadowMode === "inherit" ? el("div", { display: "contents" }) : null;
+  if (styleSlot) mountPoint.appendChild(styleSlot);
   const root = el("div", { fontFamily: FONT });
   mountPoint.appendChild(root);
   const panel = el("div", {
@@ -135,8 +170,19 @@ function createDevDock(initial = {}) {
   });
   input.placeholder = "Filter\u2026";
   inputWrap.appendChild(input);
-  const list = el("div", { overflowY: "auto", padding: "0 6px 8px" });
-  panel.append(heading, inputWrap, list);
+  const list = el("div", { padding: "0 6px 8px" });
+  list.setAttribute("data-devdock-list", "");
+  const viewsBefore = el("div");
+  viewsBefore.setAttribute("data-devdock-views", "before");
+  const viewsAfter = el("div");
+  viewsAfter.setAttribute("data-devdock-views", "after");
+  const body = el("div", {
+    overflowY: "auto",
+    display: "flex",
+    flexDirection: "column"
+  });
+  body.append(viewsBefore, list, viewsAfter);
+  panel.append(heading, inputWrap, body);
   const button = el("button", {
     display: "inline-flex",
     alignItems: "center",
@@ -177,20 +223,35 @@ function createDevDock(initial = {}) {
   const buildItems = () => {
     const out = [];
     (opts.routes ?? []).forEach((r, i) => {
+      const key = `route:${r.path}:${i}`;
+      const label = r.label ?? r.path;
       out.push({
         kind: "route",
-        key: `route:${r.path}:${i}`,
-        label: r.label ?? r.path,
+        key,
+        label,
         group: r.group ?? "Routes",
+        sig: [key, r.group ?? "Routes", label, r.path].join("\0"),
         route: r
       });
     });
     (opts.commands ?? []).forEach((c, i) => {
+      const live = typeof c.label === "function";
+      const label = typeof c.label === "function" ? c.label() : c.label;
+      const checked = c.checked ? c.checked() === true : null;
+      const key = `cmd:${c.id ?? (live ? "" : label)}:${i}`;
+      const group = c.group ?? "Commands";
       out.push({
         kind: "command",
-        key: `cmd:${c.id ?? c.label}:${i}`,
-        label: c.label,
-        group: c.group ?? "Commands",
+        key,
+        label,
+        group,
+        sig: [
+          key,
+          group,
+          live ? "\0live" : label,
+          checked === null ? "" : "\0checkable"
+        ].join("\0"),
+        checked,
         command: c
       });
     });
@@ -218,9 +279,17 @@ function createDevDock(initial = {}) {
   };
   let rows = [];
   let rowsSig = null;
-  const itemSig = (it) => [it.key, it.group, it.label, it.kind === "route" ? it.route.path : ""].join(
-    "\0"
-  );
+  const itemSig = (it) => it.sig;
+  const paintRow = (row) => {
+    const it = row.item;
+    if (row.labelSpan.textContent !== it.label)
+      row.labelSpan.textContent = it.label;
+    if (row.checkSpan && it.kind === "command") {
+      const on = it.checked === true;
+      row.checkSpan.textContent = on ? "\u2713" : "";
+      row.node.setAttribute("aria-checked", String(on));
+    }
+  };
   const paintActive = () => {
     rows.forEach((row, idx) => {
       const isActive = idx === active;
@@ -242,7 +311,9 @@ function createDevDock(initial = {}) {
     if (sig === rowsSig) {
       filtered.forEach((it, idx) => {
         const row = rows[idx];
-        if (row) row.item = it;
+        if (!row) return;
+        row.item = it;
+        paintRow(row);
       });
       paintActive();
       return;
@@ -268,20 +339,7 @@ function createDevDock(initial = {}) {
     }
     for (const [groupName, groupItems] of groups) {
       const section = el("div", { marginTop: "6px" });
-      section.appendChild(
-        el(
-          "div",
-          {
-            padding: "6px 8px 2px",
-            fontSize: "10px",
-            fontWeight: "700",
-            letterSpacing: "0.6px",
-            textTransform: "uppercase",
-            color: "#6b7280"
-          },
-          { textContent: groupName }
-        )
-      );
+      section.appendChild(sectionHeading(groupName));
       for (const it of groupItems) {
         const idx = filtered.indexOf(it);
         const row = el("button", {
@@ -300,15 +358,11 @@ function createDevDock(initial = {}) {
           cursor: "pointer"
         });
         row.type = "button";
-        const labelSpan = el(
-          "span",
-          {
-            overflow: "hidden",
-            textOverflow: "ellipsis",
-            whiteSpace: "nowrap"
-          },
-          { textContent: it.label }
-        );
+        const labelSpan = el("span", {
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap"
+        });
         row.appendChild(labelSpan);
         let pathSpan = null;
         if (it.kind === "route" && it.route.path !== it.label) {
@@ -324,8 +378,20 @@ function createDevDock(initial = {}) {
           );
           row.appendChild(pathSpan);
         }
-        const rec = { item: it, node: row, pathSpan };
+        let checkSpan = null;
+        if (it.kind === "command" && it.checked !== null) {
+          row.setAttribute("role", "checkbox");
+          checkSpan = el("span", {
+            flexShrink: "0",
+            width: "12px",
+            textAlign: "center",
+            color: "#22c55e"
+          });
+          row.appendChild(checkSpan);
+        }
+        const rec = { item: it, node: row, labelSpan, pathSpan, checkSpan };
         rows[idx] = rec;
+        paintRow(rec);
         row.addEventListener("mouseenter", () => setActive(idx));
         row.addEventListener("click", () => void runItem(rec.item));
         section.appendChild(row);
@@ -334,6 +400,120 @@ function createDevDock(initial = {}) {
     }
     paintActive();
   };
+  const mountedViews = /* @__PURE__ */ new Map();
+  let viewsSig = null;
+  const viewOrder = (v) => v.order === "after" ? "after" : "before";
+  const unmountViews = () => {
+    for (const mv of mountedViews.values()) {
+      mv.teardown?.();
+      mv.host.remove();
+    }
+    mountedViews.clear();
+    viewsBefore.replaceChildren();
+    viewsAfter.replaceChildren();
+    viewsSig = null;
+  };
+  const renderViews = () => {
+    const keyed = keyViews(opts.views ?? []);
+    const sig = keyed.map(
+      ({ view, key }) => [key, viewOrder(view), view.group ?? "", view.label ?? ""].join(
+        "\0"
+      )
+    ).join("\n");
+    if (sig === viewsSig) return;
+    viewsSig = sig;
+    const live = new Set(keyed.map(({ key }) => key));
+    for (const [key, mv] of mountedViews) {
+      if (live.has(key)) continue;
+      mv.teardown?.();
+      mv.host.remove();
+      mountedViews.delete(key);
+    }
+    viewsBefore.replaceChildren();
+    viewsAfter.replaceChildren();
+    const pending = [];
+    for (const placement of ["before", "after"]) {
+      const container = placement === "before" ? viewsBefore : viewsAfter;
+      const here = keyed.filter(({ view }) => viewOrder(view) === placement);
+      const sections = /* @__PURE__ */ new Map();
+      for (const entry of here) {
+        const groupKey = entry.view.group ?? `\0${entry.key}`;
+        const section = sections.get(groupKey);
+        if (section) section.items.push(entry);
+        else
+          sections.set(groupKey, {
+            heading: entry.view.group ?? entry.view.label,
+            items: [entry]
+          });
+      }
+      for (const section of sections.values()) {
+        const wrap = el("div", { marginTop: "6px" });
+        if (section.heading) wrap.appendChild(sectionHeading(section.heading));
+        for (const { view, key } of section.items) {
+          if (view.group != null && view.label)
+            wrap.appendChild(viewLabel(view.label));
+          const existing = mountedViews.get(key);
+          if (existing) {
+            wrap.appendChild(existing.host);
+            continue;
+          }
+          const viewHost = el("div", { padding: "2px 8px 6px" });
+          viewHost.setAttribute("data-devdock-view", view.id ?? "");
+          wrap.appendChild(viewHost);
+          pending.push({ view, key, host: viewHost });
+        }
+        container.appendChild(wrap);
+      }
+    }
+    for (const { view, key, host: viewHost } of pending) {
+      const mv = { host: viewHost };
+      mountedViews.set(key, mv);
+      const teardown = view.mount(viewHost);
+      if (typeof teardown === "function") mv.teardown = teardown;
+    }
+  };
+  let clonesSig = null;
+  const syncStyles = () => {
+    if (!styleSlot || !shadowRoot) return;
+    const adopted = document.adoptedStyleSheets;
+    if (Array.isArray(adopted)) {
+      try {
+        const sr = shadowRoot;
+        sr.adoptedStyleSheets = [...adopted];
+      } catch {
+      }
+    }
+    const sheets = [
+      ...document.querySelectorAll('style, link[rel~="stylesheet" i]')
+    ];
+    const sig = sheets.map((n) => `${n.tagName}\0${n.getAttribute("href") ?? n.textContent}`).join("\n");
+    if (sig === clonesSig) return;
+    clonesSig = sig;
+    styleSlot.replaceChildren(...sheets.map((n) => n.cloneNode(true)));
+  };
+  let styleObserver = null;
+  let syncQueued = false;
+  const watchStyles = () => {
+    if (!styleSlot || styleObserver || !document.head || typeof MutationObserver === "undefined")
+      return;
+    styleObserver = new MutationObserver(() => {
+      if (syncQueued) return;
+      syncQueued = true;
+      queueMicrotask(() => {
+        syncQueued = false;
+        syncStyles();
+      });
+    });
+    styleObserver.observe(document.head, {
+      childList: true,
+      subtree: true,
+      characterData: true
+    });
+  };
+  const unwatchStyles = () => {
+    styleObserver?.disconnect();
+    styleObserver = null;
+  };
   const renderShell = () => {
     const position = opts.position ?? "bottom-right";
     const zIndex = opts.zIndex ?? 2147483e3;
@@ -363,9 +543,12 @@ function createDevDock(initial = {}) {
       panel.isConnected || root.insertBefore(panel, button);
       renderShell();
       renderList();
+      syncStyles();
+      renderViews();
       requestAnimationFrame(() => input.focus());
-    } else if (panel.isConnected) {
-      panel.remove();
+    } else {
+      unmountViews();
+      if (panel.isConnected) panel.remove();
     }
     renderShell();
   }
@@ -412,11 +595,14 @@ function createDevDock(initial = {}) {
     if (mounted) return;
     (opts.container ?? document.body).appendChild(host);
     addListeners();
+    syncStyles();
+    watchStyles();
     mounted = true;
   };
   const unmount = () => {
     if (!mounted) return;
     removeListeners();
+    unwatchStyles();
     host.remove();
     mounted = false;
   };
@@ -428,7 +614,10 @@ function createDevDock(initial = {}) {
       if (enabled()) {
         mount();
         renderShell();
-        if (open) renderList();
+        if (open) {
+          renderList();
+          renderViews();
+        }
       } else {
         setOpen(false);
         unmount();
@@ -440,24 +629,56 @@ function createDevDock(initial = {}) {
     }
   };
 }
-
-// src/react/DevDock.tsx
-function DevDock(props) {
+var NO_VIEWS = [];
+function DevDock({ views = NO_VIEWS, ...options }) {
   const instance = react.useRef(null);
-  const latest = react.useRef(props);
-  latest.current = props;
+  const [hosts, setHosts] = react.useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const alive = react.useRef(true);
+  const keyed = react.useMemo(() => keyViews(views), [views]);
+  const coreViews = react.useMemo(
+    () => keyed.map(({ key, view }) => ({
+      id: key,
+      label: view.label,
+      group: view.group,
+      order: view.order,
+      mount: (host) => {
+        setHosts((prev) => new Map(prev).set(key, host));
+        return () => {
+          if (!alive.current) return;
+          setHosts((prev) => {
+            const next = new Map(prev);
+            next.delete(key);
+            return next;
+          });
+        };
+      }
+    })),
+    [keyed]
+  );
+  const latest = react.useRef({ options, coreViews });
+  latest.current = { options, coreViews };
   react.useEffect(() => {
-    const inst = createDevDock(latest.current);
+    alive.current = true;
+    const inst = createDevDock({
+      ...latest.current.options,
+      views: latest.current.coreViews
+    });
     instance.current = inst;
     return () => {
+      alive.current = false;
       inst.destroy();
       instance.current = null;
     };
   }, []);
   react.useEffect(() => {
-    instance.current?.update(props);
+    instance.current?.update({ ...options, views: coreViews });
   });
-  return null;
+  return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: keyed.map(({ key, view }) => {
+    const host = hosts.get(key);
+    return host ? reactDom.createPortal(view.render(), host, key) : null;
+  }) });
 }
 
 exports.DevDock = DevDock;