RouteModal

import { RouteModal, closeRoute } from "@zedtech/zedkit-ui";
import { useRouter } from "next/navigation";
const router = useRouter();
<RouteModal title="Delivery" onClose={() => closeRoute({ ...router, fallback: "/items" })}>
  <DetailView />
</RouteModal>

import { RouteModal, closeRoute } from "@zedtech/zedkit-ui";
<RouteModal title="Invoice" variant="dialog" onClose={() => closeRoute({ ...router, fallback: "/invoices" })}>
  <DetailView />
</RouteModal>

Drawer vs dialog vs pageCopy Anchor Link

For a local slide-in (filters, quick edit) without a dedicated URL, use Drawer with trigger state instead of an intercepting route.

Next.js parallel and intercepting routesCopy Anchor Link

Verified against @zedtech/zedkit-ui 0.4.0 and the docs workspace Next version at writing time.

Open a list detail in an overlay without leaving the list: the URL stays shareable (direct access renders the full page), closing returns to the list with its query state intact. The kit owns RouteModal and closeRoute; the app owns the route files and one shared detail view.

File tree for an items list with a detail overlay:

app/items/
├── layout.tsx              # renders {children} + {modal}
├── page.tsx                # the list (links to /items/[id])
├── [id]/
│   └── page.tsx            # full detail page (direct access, refresh)
├── @modal/
│   ├── default.tsx         # null when no intercept is active
│   └── (.)[id]/
│       └── page.tsx        # intercept: same detail view in RouteModal
└── _detail-view.tsx        # shared view (both pages import this)

Layout with the modal slot:

// app/items/layout.tsx
export default function ItemsLayout({
  children,
  modal,
}: {
  children: React.ReactNode;
  modal: React.ReactNode;
}) {
  return (
    <>
      {children}
      {modal}
    </>
  );
}

Intercept page (reuses the shared view so drawer and full page never drift):

// app/items/@modal/(.)[id]/page.tsx
"use client";

import { use } from "react";
import { RouteModal, closeRoute } from "@zedtech/zedkit-ui";
import { useRouter } from "next/navigation";
import { DetailView } from "../../_detail-view";

export default function ItemModal({ params }: { params: Promise<{ id: string }> }) {
  const { id } = use(params);
  const router = useRouter();
  return (
    <RouteModal
      title="Item"
      onClose={() => closeRoute({ ...router, fallback: "/items" })}
    >
      <DetailView id={id} />
    </RouteModal>
  );
}

Default slot (no modal on direct load of the list or full page):

// app/items/@modal/default.tsx
export default function ModalDefault() {
  return null;
}

Full-page detail (same DetailView):

// app/items/[id]/page.tsx
import { DetailView } from "../_detail-view";

export default async function ItemPage({
  params,
}: {
  params: Promise<{ id: string }>;
}) {
  const { id } = await params;
  return <DetailView id={id} />;
}

Closing and navigationCopy Anchor Link

closeRoute prefers router.back() when the previous history entry is same-document; otherwise it replaces the fallback path (bookmark, external referrer, or single history entry):

closeRoute({ back: router.back, replace: router.replace, fallback: "/items" });

RouteModal calls onClose only after the exit animation (or immediately when prefers-reduced-motion is set). Wire onClose to closeRoute, not raw router.back, so the panel finishes closing before navigation.

TroubleshootingCopy Anchor Link

• Refresh shows the full page, not the drawer — Expected: intercepts run only when navigating from the list. Direct /items/[id] loads the full-page route.
• Closing drops list filters — List state must live in the URL (search params) on page.tsx, not only in React state, so back restores it.
• Modal and full page look different — Import the same detail component in both [id]/page.tsx and @modal/(.)[id]/page.tsx.
• Cannot find module '../_detail-view' — From @modal/(.)[id]/page.tsx use ../../_detail-view (the file sits on items/, not under @modal/). From [id]/page.tsx use ../_detail-view.