@storybook/tanstack-react 10.5.0-alpha.2 → 10.5.0-alpha.4

package/dist/_browser-chunks/{chunk-73EPJ7AY.js → chunk-SNKUITN7.js}

@@ -172,12 +172,17 @@ function resolveTree(Story, context) {
     let tree = duplicateRouteTree(syntheticRoot2, { overrides: routeOverrides }), leaf = tree.byId.get(routerParameterRoute.id) ?? tree.root;
     return injectStoryComponent(leaf, Story, routeOverrides, leaf.id), { tree, leaf };
   }
-  let plainOptions = routerParameterRoute ?? {}, syntheticRoot = createRootRoute(
+  let plainOptions = routerParameterRoute ?? {}, {
+    path: plainRoutePath,
+    id: plainRouteId,
+    ...plainRouteRest
+  } = plainOptions, syntheticRouteId = plainRoutePath ? void 0 : plainRouteId ?? "storybook-story", syntheticRoot = createRootRoute(
     routeOverrides?.__root__ ?? {}
   ), syntheticChild = createRoute2({
     component: () => React.createElement(Story, null),
-    id: "storybook-story",
-    ...plainOptions,
+    id: syntheticRouteId,
+    path: plainRoutePath,
+    ...plainRouteRest,
     getParentRoute: () => syntheticRoot
   });
   return syntheticRoot.addChildren([syntheticChild]), injectStoryComponent(syntheticChild, Story, routeOverrides, syntheticChild.id), {

package/dist/export-mocks/react-router.d.ts

@@ -325,7 +325,6 @@ declare const useLoaderDeps: Mock<typeof useLoaderDeps$1>;
 declare const useRouteContext: Mock<typeof useRouteContext$1>;
 declare const useCanGoBack: Mock<typeof useCanGoBack$1>;
 declare const useLinkProps: Mock<typeof useLinkProps$1>;
-declare const Outlet: () => null;
 declare const Navigate: typeof Navigate$1;
 declare const Link: ({ to, children, ...props }: {
     to: string;
@@ -341,4 +340,4 @@ declare const Link: ({ to, children, ...props }: {
  */
 declare function createFileRoute(path: string): (options: any) => _tanstack_react_router.Route<unknown, _tanstack_router_core.AnyRoute, "/", "/" | `/${any}/`, string, "/" | `/${any}/`, undefined, _tanstack_router_core.ResolveParams<"/">, _tanstack_router_core.AnyContext, _tanstack_router_core.AnyContext, _tanstack_router_core.AnyContext, {}, undefined, unknown, unknown, unknown, unknown, undefined>;
 
-export { Link, Navigate, Outlet, createFileRoute, useBlocker, useCanGoBack, useLinkProps, useLoaderData, useLoaderDeps, useLocation, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch };
+export { Link, Navigate, createFileRoute, useBlocker, useCanGoBack, useLinkProps, useLoaderData, useLoaderDeps, useLocation, useNavigate, useParams, useRouteContext, useRouter, useRouterState, useSearch };

package/dist/export-mocks/react-router.js

@@ -27,7 +27,7 @@ var useNavigate = fn(_useNavigate).mockName("@tanstack/react-router::useNavigate
   "@tanstack/react-router::useRouterState"
 ), useLoaderData = fn(_useLoaderData).mockName("@tanstack/react-router::useLoaderData"), useLoaderDeps = fn(_useLoaderDeps).mockName("@tanstack/react-router::useLoaderDeps"), useRouteContext = fn(_useRouteContext).mockName(
   "@tanstack/react-router::useRouteContext"
-), useCanGoBack = fn(_useCanGoBack).mockName("@tanstack/react-router::useCanGoBack"), useLinkProps = fn(_useLinkProps).mockName("@tanstack/react-router::useLinkProps"), Outlet = () => null, Navigate = ({ to, href }) => (useEffect(() => {
+), useCanGoBack = fn(_useCanGoBack).mockName("@tanstack/react-router::useCanGoBack"), useLinkProps = fn(_useLinkProps).mockName("@tanstack/react-router::useLinkProps"), Navigate = ({ to, href }) => (useEffect(() => {
   onNavigate({ to: to || href });
 }, [to, href]), null), Link = ({
   to,
@@ -62,7 +62,6 @@ function createFileRoute(path) {
 export {
   Link,
   Navigate,
-  Outlet,
   createFileRoute,
   useBlocker,
   useCanGoBack,

package/dist/index.d.ts

@@ -8,31 +8,39 @@ import { RoutesByPath, RouteOptions, ResolveParams, AnyContext } from '@tanstack
 import { BuilderOptions } from '@storybook/builder-vite';
 import { StorybookConfig as StorybookConfig$1 } from '@storybook/react-vite';
 
-declare global {
-	interface SymbolConstructor {
-		readonly observable: symbol;
-	}
-}
-
 /**
-@see Simplify
-*/
-interface SimplifyOptions {
-	/**
-	Do the simplification recursively.
+Convert a union type to an intersection type.
 
-	@default false
-	*/
-	deep?: boolean;
-}
+Inspired by [this Stack Overflow answer](https://stackoverflow.com/a/50375286/2172153).
+
+@example
+```
+import type {UnionToIntersection} from 'type-fest';
+
+type Union = {the(): void} | {great(arg: string): void} | {escape: boolean};
 
-// Flatten a type without worrying about the result.
-type Flatten<
-	AnyType,
-	Options extends SimplifyOptions = {},
-> = Options['deep'] extends true
-	? {[KeyType in keyof AnyType]: Simplify<AnyType[KeyType], Options>}
-	: {[KeyType in keyof AnyType]: AnyType[KeyType]};
+type Intersection = UnionToIntersection<Union>;
+//=> {the(): void} & {great(arg: string): void} & {escape: boolean}
+```
+
+@category Type
+*/
+type UnionToIntersection<Union> = (
+	// `extends unknown` is always going to be the case and is used to convert the
+	// `Union` into a [distributive conditional
+	// type](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types).
+	Union extends unknown
+		// The union type is used as the only argument to a function since the union
+		// of function arguments is an intersection.
+		? (distributedUnion: Union) => void
+		// This won't happen.
+		: never
+		// Infer the `Intersection` type since TypeScript represents the positional
+		// arguments of unions of functions as an intersection of the union.
+) extends ((mergedIntersection: infer Intersection) => void)
+	// The `& Union` is to ensure result of `UnionToIntersection<A | B>` is always assignable to `A | B`
+	? Intersection & Union
+	: never;
 
 /**
 Useful to flatten the type output to improve type hints shown in editors. And also to transform an interface into a type to aide with assignability.
@@ -79,27 +87,25 @@ const literal = {foo: 123, bar: 'hello', baz: 456};
 const someType: SomeType = literal;
 const someInterface: SomeInterface = literal;
 
-function fn(object: Record<string, unknown>): void {}
+declare function fn(object: Record<string, unknown>): void;
 
 fn(literal); // Good: literal object type is sealed
 fn(someType); // Good: type is sealed
+// @ts-expect-error
 fn(someInterface); // Error: Index signature for type 'string' is missing in type 'someInterface'. Because `interface` can be re-opened
 fn(someInterface as Simplify<SomeInterface>); // Good: transform an `interface` into a `type`
 ```
 
 @link https://github.com/microsoft/TypeScript/issues/15300
-
+@see {@link SimplifyDeep}
 @category Object
 */
-type Simplify<
-	AnyType,
-	Options extends SimplifyOptions = {},
-> = Flatten<AnyType> extends AnyType
-	? Flatten<AnyType, Options>
-	: AnyType;
+type Simplify<T> = {[KeyType in keyof T]: T[KeyType]} & {};
 
 /**
-Remove any index signatures from the given object type, so that only explicitly defined properties remain.
+Omit any index signatures from the given object type, leaving only explicitly defined properties.
+
+This is the counterpart of `PickIndexSignature`.
 
 Use-cases:
 - Remove overly permissive signatures from third-party types.
@@ -113,8 +119,9 @@ It relies on the fact that an empty object (`{}`) is assignable to an object wit
 ```
 const indexed: Record<string, unknown> = {}; // Allowed
 
+// @ts-expect-error
 const keyed: Record<'foo', unknown> = {}; // Error
-// => TS2739: Type '{}' is missing the following properties from type 'Record<"foo" | "bar", unknown>': foo, bar
+// TS2739: Type '{}' is missing the following properties from type 'Record<"foo" | "bar", unknown>': foo, bar
 ```
 
 Instead of causing a type error like the above, you can also use a [conditional type](https://www.typescriptlang.org/docs/handbook/2/conditional-types.html) to test whether a type is assignable to another:
@@ -123,147 +130,75 @@ Instead of causing a type error like the above, you can also use a [conditional
 type Indexed = {} extends Record<string, unknown>
 	? '✅ `{}` is assignable to `Record<string, unknown>`'
 	: '❌ `{}` is NOT assignable to `Record<string, unknown>`';
-// => '✅ `{}` is assignable to `Record<string, unknown>`'
+
+type IndexedResult = Indexed;
+//=> '✅ `{}` is assignable to `Record<string, unknown>`'
 
 type Keyed = {} extends Record<'foo' | 'bar', unknown>
-	? "✅ `{}` is assignable to `Record<'foo' | 'bar', unknown>`"
-	: "❌ `{}` is NOT assignable to `Record<'foo' | 'bar', unknown>`";
-// => "❌ `{}` is NOT assignable to `Record<'foo' | 'bar', unknown>`"
+	? '✅ `{}` is assignable to `Record<\'foo\' | \'bar\', unknown>`'
+	: '❌ `{}` is NOT assignable to `Record<\'foo\' | \'bar\', unknown>`';
+
+type KeyedResult = Keyed;
+//=> '❌ `{}` is NOT assignable to `Record<\'foo\' | \'bar\', unknown>`'
 ```
 
 Using a [mapped type](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#further-exploration), you can then check for each `KeyType` of `ObjectType`...
 
 ```
-import type {RemoveIndexSignature} from 'type-fest';
-
-type RemoveIndexSignature<ObjectType> = {
+type OmitIndexSignature<ObjectType> = {
 	[KeyType in keyof ObjectType // Map each key of `ObjectType`...
-	]: ObjectType[KeyType]; // ...to its original value, i.e. `RemoveIndexSignature<Foo> == Foo`.
+	]: ObjectType[KeyType]; // ...to its original value, i.e. `OmitIndexSignature<Foo> == Foo`.
 };
 ```
 
 ...whether an empty object (`{}`) would be assignable to an object with that `KeyType` (`Record<KeyType, unknown>`)...
 
 ```
-import type {RemoveIndexSignature} from 'type-fest';
-
-type RemoveIndexSignature<ObjectType> = {
+type OmitIndexSignature<ObjectType> = {
 	[KeyType in keyof ObjectType
-		// Is `{}` assignable to `Record<KeyType, unknown>`?
-		as {} extends Record<KeyType, unknown>
-			? ... // ✅ `{}` is assignable to `Record<KeyType, unknown>`
-			: ... // ❌ `{}` is NOT assignable to `Record<KeyType, unknown>`
+	// Is `{}` assignable to `Record<KeyType, unknown>`?
+	as {} extends Record<KeyType, unknown>
+		? never // ✅ `{}` is assignable to `Record<KeyType, unknown>`
+		: KeyType // ❌ `{}` is NOT assignable to `Record<KeyType, unknown>`
 	]: ObjectType[KeyType];
 };
 ```
 
 If `{}` is assignable, it means that `KeyType` is an index signature and we want to remove it. If it is not assignable, `KeyType` is a "real" key and we want to keep it.
 
-```
-import type {RemoveIndexSignature} from 'type-fest';
-
-type RemoveIndexSignature<ObjectType> = {
-	[KeyType in keyof ObjectType
-		as {} extends Record<KeyType, unknown>
-			? never // => Remove this `KeyType`.
-			: KeyType // => Keep this `KeyType` as it is.
-	]: ObjectType[KeyType];
-};
-```
-
 @example
 ```
-import type {RemoveIndexSignature} from 'type-fest';
+import type {OmitIndexSignature} from 'type-fest';
 
-interface Example {
+type Example = {
 	// These index signatures will be removed.
-	[x: string]: any
-	[x: number]: any
-	[x: symbol]: any
-	[x: `head-${string}`]: string
-	[x: `${string}-tail`]: string
-	[x: `head-${string}-tail`]: string
-	[x: `${bigint}`]: string
-	[x: `embedded-${number}`]: string
+	[x: string]: any;
+	[x: number]: any;
+	[x: symbol]: any;
+	[x: `head-${string}`]: string;
+	[x: `${string}-tail`]: string;
+	[x: `head-${string}-tail`]: string;
+	[x: `${bigint}`]: string;
+	[x: `embedded-${number}`]: string;
 
 	// These explicitly defined keys will remain.
 	foo: 'bar';
 	qux?: 'baz';
-}
+};
 
-type ExampleWithoutIndexSignatures = RemoveIndexSignature<Example>;
-// => { foo: 'bar'; qux?: 'baz' | undefined; }
+type ExampleWithoutIndexSignatures = OmitIndexSignature<Example>;
+//=> {foo: 'bar'; qux?: 'baz'}
 ```
 
+@see {@link PickIndexSignature}
 @category Object
 */
-type RemoveIndexSignature<ObjectType> = {
+type OmitIndexSignature<ObjectType> = {
 	[KeyType in keyof ObjectType as {} extends Record<KeyType, unknown>
 		? never
 		: KeyType]: ObjectType[KeyType];
 };
 
-/**
-Convert a union type to an intersection type using [distributive conditional types](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types).
-
-Inspired by [this Stack Overflow answer](https://stackoverflow.com/a/50375286/2172153).
-
-@example
-```
-import type {UnionToIntersection} from 'type-fest';
-
-type Union = {the(): void} | {great(arg: string): void} | {escape: boolean};
-
-type Intersection = UnionToIntersection<Union>;
-//=> {the(): void; great(arg: string): void; escape: boolean};
-```
-
-A more applicable example which could make its way into your library code follows.
-
-@example
-```
-import type {UnionToIntersection} from 'type-fest';
-
-class CommandOne {
-	commands: {
-		a1: () => undefined,
-		b1: () => undefined,
-	}
-}
-
-class CommandTwo {
-	commands: {
-		a2: (argA: string) => undefined,
-		b2: (argB: string) => undefined,
-	}
-}
-
-const union = [new CommandOne(), new CommandTwo()].map(instance => instance.commands);
-type Union = typeof union;
-//=> {a1(): void; b1(): void} | {a2(argA: string): void; b2(argB: string): void}
-
-type Intersection = UnionToIntersection<Union>;
-//=> {a1(): void; b1(): void; a2(argA: string): void; b2(argB: string): void}
-```
-
-@category Type
-*/
-type UnionToIntersection<Union> = (
-	// `extends unknown` is always going to be the case and is used to convert the
-	// `Union` into a [distributive conditional
-	// type](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html#distributive-conditional-types).
-	Union extends unknown
-		// The union type is used as the only argument to a function since the union
-		// of function arguments is an intersection.
-		? (distributedUnion: Union) => void
-		// This won't happen.
-		: never
-		// Infer the `Intersection` type since TypeScript represents the positional
-		// arguments of unions of functions as an intersection of the union.
-	) extends ((mergedIntersection: infer Intersection) => void)
-		? Intersection
-		: never;
-
 /** Union of every registered full path (e.g. `'/' | '/admin/users' | '/$libraryId/$version'`). */
 type RegisteredFullPath = keyof Register['router']['routesByPath'];
 type IsAppRouteTree<TRoute> = TRoute extends Register['router']['routeTree'] ? true : false;
@@ -389,7 +324,7 @@ interface TanStackTypes<TRoute = undefined, Path extends DefaultStoryPath<TRoute
 /** Extracts and unions all args types from an array of decorators. */
 type DecoratorsArgs<TRenderer extends Renderer, Decorators> = UnionToIntersection<Decorators extends DecoratorFunction<TRenderer, infer TArgs> ? TArgs : unknown>;
 type InferCombinedTypes<T, TArgs, Decorators> = ReactTypes & T & {
-    args: Simplify<TArgs & Simplify<RemoveIndexSignature<DecoratorsArgs<ReactTypes & T, Decorators>>>>;
+    args: Simplify<TArgs & Simplify<OmitIndexSignature<DecoratorsArgs<ReactTypes & T, Decorators>>>>;
 };
 type Preview<TRoute extends AnyRoute | undefined = undefined> = ProjectAnnotations<ReactTypes & TanStackTypes<TRoute>>;
 declare function definePreview<TRoute extends AnyRoute | undefined = undefined, const TPath extends DefaultStoryPath<TRoute> = DefaultStoryPath<TRoute>, Addons extends PreviewAddon<never>[] = []>(preview: {
@@ -435,4 +370,4 @@ interface TanStackPreview<T extends AddonTypes, TRoute extends AnyRoute | undefi
     }>;
 }
 
-export { type CreateStoryRouteOptions, type DefaultStoryPath, type FrameworkOptions, type IsRoute, type Meta, type Preview, type RouterParameters, type StoryObj, type StoryRouteFileOptions, type StoryRouteOptions, type StorybookConfig, type TanStackParameters, type TanStackPreviewOptions, type TanStackTypes, definePreview };
+export { type CreateStoryRouteOptions, type DefaultStoryPath, type FrameworkOptions, type IsRoute, type Meta, type Preview, type RouterParameters, type StoryObj, type StoryRouteFileOptions, type StoryRouteOptions, type StorybookConfig, type TanStackParameters, type TanStackPreview, type TanStackPreviewOptions, type TanStackTypes, definePreview };

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   preview_exports
-} from "./_browser-chunks/chunk-73EPJ7AY.js";
+} from "./_browser-chunks/chunk-SNKUITN7.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 
 // src/index.ts

package/dist/node/index.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_1b4p1p975w4 from 'node:url';
-import CJS_COMPAT_NODE_PATH_1b4p1p975w4 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_1b4p1p975w4 from "node:module";
+import CJS_COMPAT_NODE_URL_k79t92w4o from 'node:url';
+import CJS_COMPAT_NODE_PATH_k79t92w4o from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k79t92w4o from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_1b4p1p975w4.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_1b4p1p975w4.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_1b4p1p975w4.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k79t92w4o.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k79t92w4o.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k79t92w4o.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preset.js

@@ -1,10 +1,10 @@
-import CJS_COMPAT_NODE_URL_1b4p1p975w4 from 'node:url';
-import CJS_COMPAT_NODE_PATH_1b4p1p975w4 from 'node:path';
-import CJS_COMPAT_NODE_MODULE_1b4p1p975w4 from "node:module";
+import CJS_COMPAT_NODE_URL_k79t92w4o from 'node:url';
+import CJS_COMPAT_NODE_PATH_k79t92w4o from 'node:path';
+import CJS_COMPAT_NODE_MODULE_k79t92w4o from "node:module";
 
-var __filename = CJS_COMPAT_NODE_URL_1b4p1p975w4.fileURLToPath(import.meta.url);
-var __dirname = CJS_COMPAT_NODE_PATH_1b4p1p975w4.dirname(__filename);
-var require = CJS_COMPAT_NODE_MODULE_1b4p1p975w4.createRequire(import.meta.url);
+var __filename = CJS_COMPAT_NODE_URL_k79t92w4o.fileURLToPath(import.meta.url);
+var __dirname = CJS_COMPAT_NODE_PATH_k79t92w4o.dirname(__filename);
+var require = CJS_COMPAT_NODE_MODULE_k79t92w4o.createRequire(import.meta.url);
 
 // ------------------------------------------------------------
 // end of CJS compatibility banner, injected by Storybook's esbuild configuration

package/dist/preview.js

@@ -3,7 +3,7 @@ import {
   loaders,
   optimizeDeps,
   parameters
-} from "./_browser-chunks/chunk-73EPJ7AY.js";
+} from "./_browser-chunks/chunk-SNKUITN7.js";
 import "./_browser-chunks/chunk-4BE7D4DS.js";
 export {
   applyDecorators,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/tanstack-react",
-  "version": "10.5.0-alpha.2",
+  "version": "10.5.0-alpha.4",
   "description": "Storybook for TanStack (React, Vite): Router and Start ready Storybook framework",
   "keywords": [
     "storybook",
@@ -75,9 +75,9 @@
     "!src/**/*"
   ],
   "dependencies": {
-    "@storybook/builder-vite": "10.5.0-alpha.2",
-    "@storybook/react": "10.5.0-alpha.2",
-    "@storybook/react-vite": "10.5.0-alpha.2"
+    "@storybook/builder-vite": "10.5.0-alpha.4",
+    "@storybook/react": "10.5.0-alpha.4",
+    "@storybook/react-vite": "10.5.0-alpha.4"
   },
   "devDependencies": {
     "@tanstack/react-router": "^1.168.10",
@@ -95,7 +95,7 @@
     "@tanstack/start-client-core": "^1.167.9",
     "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
     "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
-    "storybook": "^10.5.0-alpha.2",
+    "storybook": "^10.5.0-alpha.4",
     "vite": "^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0"
   },
   "peerDependenciesMeta": {

package/template/cli/ts/Button.stories.ts

@@ -14,7 +14,7 @@ const meta = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+  // More on argTypes: https://storybook.js.org/docs/api/arg-types
   argTypes: {
     backgroundColor: { control: 'color' },
   },

package/template/stories/Outlet.stories.tsx

@@ -0,0 +1,73 @@
+import React from 'react';
+
+import type { Meta, StoryObj } from '@storybook/tanstack-react';
+
+import { Outlet, createRootRoute, createRoute } from '@tanstack/react-router';
+import { expect, within } from 'storybook/test';
+
+// Regression coverage for https://github.com/storybookjs/storybook/issues/35007
+// `@tanstack/react-router`'s `Outlet` used to be mocked as `() => null`, which
+// silently swallowed any leaf content rendered inside a root layout. These
+// stories assert that both the root layout and the leaf content render.
+
+function LeafContent() {
+  return <p data-testid="tanstack-outlet-leaf">leaf rendered inside root outlet</p>;
+}
+
+const RootRoute = createRootRoute({
+  component: () => (
+    <div data-testid="tanstack-outlet-root">
+      <h1>root layout</h1>
+      <Outlet />
+    </div>
+  ),
+});
+
+const LeafRoute = createRoute({
+  getParentRoute: () => RootRoute,
+  path: '/',
+  component: LeafContent,
+});
+
+RootRoute.addChildren([LeafRoute]);
+
+const meta = {
+  component: LeafContent,
+  parameters: { layout: 'fullscreen' },
+} satisfies Meta<typeof LeafContent>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/** Passing the leaf `Route` should render it inside the root layout's `<Outlet />`. */
+export const RendersLeafInsideRootOutlet: Story = {
+  parameters: {
+    tanstack: { router: { route: LeafRoute } },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('tanstack-outlet-root')).toBeInTheDocument();
+    await expect(
+      canvas.getByRole('heading', { level: 1, name: 'root layout' })
+    ).toBeInTheDocument();
+    await expect(canvas.getByTestId('tanstack-outlet-leaf')).toBeInTheDocument();
+  },
+};
+
+/** Passing the whole route tree plus an explicit `path` resolves through the same outlet. */
+export const RendersLeafViaRouteTreePath: Story = {
+  parameters: {
+    tanstack: {
+      router: { route: RootRoute, path: '/' },
+    },
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await expect(canvas.getByTestId('tanstack-outlet-root')).toBeInTheDocument();
+    await expect(
+      canvas.getByRole('heading', { level: 1, name: 'root layout' })
+    ).toBeInTheDocument();
+    await expect(canvas.getByTestId('tanstack-outlet-leaf')).toBeInTheDocument();
+  },
+};