@rangojs/router 0.0.0-experimental.30 → 0.0.0-experimental.31

package/dist/vite/index.js

@@ -1745,7 +1745,7 @@ import { resolve } from "node:path";
 // package.json
 var package_default = {
   name: "@rangojs/router",
-  version: "0.0.0-experimental.30",
+  version: "0.0.0-experimental.31",
   description: "Django-inspired RSC router with composable URL patterns",
   keywords: [
     "react",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rangojs/router",
-  "version": "0.0.0-experimental.30",
+  "version": "0.0.0-experimental.31",
   "description": "Django-inspired RSC router with composable URL patterns",
   "keywords": [
     "react",

package/skills/breadcrumbs/SKILL.md

@@ -0,0 +1,206 @@
+---
+name: breadcrumbs
+description: Built-in Breadcrumbs handle for accumulating breadcrumb navigation across route segments
+argument-hint: [setup]
+---
+
+# Breadcrumbs
+
+Built-in handle for accumulating breadcrumb items across route segments.
+Each layout/route pushes items via `ctx.use(Breadcrumbs)`, and they are
+collected in parent-to-child order with automatic deduplication by `href`.
+
+## BreadcrumbItem Type
+
+```typescript
+interface BreadcrumbItem {
+  label: string; // Display text
+  href: string; // URL the breadcrumb links to
+  content?: ReactNode | Promise<ReactNode>; // Optional extra content (sync or async)
+}
+```
+
+## Pushing Breadcrumbs (Server)
+
+Import `Breadcrumbs` from `@rangojs/router` in RSC/server context:
+
+```typescript
+import { urls, Breadcrumbs } from "@rangojs/router";
+import { Outlet } from "@rangojs/router/client";
+
+export const urlpatterns = urls(({ path, layout }) => [
+  // Root layout pushes "Home"
+  layout((ctx) => {
+    const breadcrumb = ctx.use(Breadcrumbs);
+    breadcrumb({ label: "Home", href: "/" });
+    return <RootLayout />;
+  }, () => [
+    path("/", HomePage, { name: "home" }),
+
+    // Nested layout pushes "Blog"
+    layout((ctx) => {
+      const breadcrumb = ctx.use(Breadcrumbs);
+      breadcrumb({ label: "Blog", href: "/blog" });
+      return <BlogLayout />;
+    }, () => [
+      path("/blog", BlogIndex, { name: "blog.index" }),
+
+      // Route handler pushes post title
+      path("/blog/:slug", (ctx) => {
+        const breadcrumb = ctx.use(Breadcrumbs);
+        breadcrumb({ label: ctx.params.slug, href: `/blog/${ctx.params.slug}` });
+        return <BlogPost slug={ctx.params.slug} />;
+      }, { name: "blog.post" }),
+    ]),
+  ]),
+]);
+```
+
+On `/blog/my-post`, breadcrumbs accumulate: `Home > Blog > my-post`.
+
+## Async Content
+
+The `content` field supports `Promise<ReactNode>` for streaming:
+
+```typescript
+path("/product/:id", async (ctx) => {
+  const breadcrumb = ctx.use(Breadcrumbs);
+  const productPromise = fetchProduct(ctx.params.id);
+
+  breadcrumb({
+    label: "Product",
+    href: `/product/${ctx.params.id}`,
+    content: productPromise.then((p) => <span>({p.category})</span>),
+  });
+
+  const product = await productPromise;
+  return <ProductPage product={product} />;
+}, { name: "product" })
+```
+
+Async content is a `Promise<ReactNode>`. Resolve it in your component
+with React's `use()` hook wrapped in `<Suspense>`.
+
+## Consuming Breadcrumbs (Client)
+
+Use `useHandle(Breadcrumbs)` in a client component to read the accumulated items:
+
+```tsx
+"use client";
+import { useHandle, Breadcrumbs, Link } from "@rangojs/router/client";
+
+function BreadcrumbNav() {
+  const breadcrumbs = useHandle(Breadcrumbs);
+
+  if (!breadcrumbs.length) return null;
+
+  return (
+    <nav aria-label="Breadcrumb">
+      <ol>
+        {breadcrumbs.map((crumb, i) => (
+          <li key={crumb.href}>
+            {i === breadcrumbs.length - 1 ? (
+              <span aria-current="page">{crumb.label}</span>
+            ) : (
+              <Link to={crumb.href}>{crumb.label}</Link>
+            )}
+          </li>
+        ))}
+      </ol>
+    </nav>
+  );
+}
+```
+
+### With Selector
+
+Re-render only when the selected value changes:
+
+```tsx
+// Only the last breadcrumb
+const current = useHandle(Breadcrumbs, (data) => data.at(-1));
+
+// Breadcrumb count
+const count = useHandle(Breadcrumbs, (data) => data.length);
+```
+
+## Deduplication
+
+The built-in collect function deduplicates by `href`. If multiple segments
+push the same `href`, the last one wins. This prevents duplicates when
+navigating between sibling routes that share a common breadcrumb.
+
+## Passing as Props
+
+Breadcrumbs handle can be passed from server to client components:
+
+```tsx
+// Server component
+path("/dashboard", (ctx) => {
+  const breadcrumb = ctx.use(Breadcrumbs);
+  breadcrumb({ label: "Dashboard", href: "/dashboard" });
+  return <DashboardNav handle={Breadcrumbs} />;
+});
+
+// Client component
+("use client");
+import { useHandle, type Breadcrumbs } from "@rangojs/router/client";
+
+function DashboardNav({ handle }: { handle: typeof Breadcrumbs }) {
+  const crumbs = useHandle(handle);
+  return (
+    <nav>
+      {crumbs.map((c) => (
+        <a href={c.href}>{c.label}</a>
+      ))}
+    </nav>
+  );
+}
+```
+
+## Complete Example
+
+```typescript
+// urls.tsx
+import { urls, Breadcrumbs, Meta } from "@rangojs/router";
+import { Outlet, MetaTags } from "@rangojs/router/client";
+import { BreadcrumbNav } from "./components/BreadcrumbNav";
+
+function RootLayout() {
+  return (
+    <html lang="en">
+      <head><MetaTags /></head>
+      <body>
+        <BreadcrumbNav />
+        <main><Outlet /></main>
+      </body>
+    </html>
+  );
+}
+
+export const urlpatterns = urls(({ path, layout }) => [
+  layout((ctx) => {
+    ctx.use(Breadcrumbs)({ label: "Home", href: "/" });
+    ctx.use(Meta)({ title: "My App" });
+    return <RootLayout />;
+  }, () => [
+    path("/", () => <h1>Welcome</h1>, { name: "home" }),
+
+    layout((ctx) => {
+      ctx.use(Breadcrumbs)({ label: "Shop", href: "/shop" });
+      return <Outlet />;
+    }, () => [
+      path("/shop", () => <h1>Shop</h1>, { name: "shop" }),
+      path("/shop/:slug", (ctx) => {
+        ctx.use(Breadcrumbs)({
+          label: ctx.params.slug,
+          href: `/shop/${ctx.params.slug}`,
+        });
+        return <h1>Product: {ctx.params.slug}</h1>;
+      }, { name: "shop.product" }),
+    ]),
+  ]),
+]);
+```
+
+Navigating to `/shop/widget` produces: `Home / Shop / widget`

package/skills/hooks/SKILL.md

@@ -247,8 +247,7 @@ Access accumulated handle data from route segments:
 
 ```tsx
 "use client";
-import { useHandle } from "@rangojs/router/client";
-import { Breadcrumbs } from "../handles/breadcrumbs";
+import { useHandle, Breadcrumbs } from "@rangojs/router/client";
 
 function BreadcrumbNav() {
   const crumbs = useHandle(Breadcrumbs);
@@ -282,8 +281,7 @@ path("/dashboard", (ctx) => {
 
 // Client component — typeof infers the full Handle<T> type
 ("use client");
-import { useHandle } from "@rangojs/router/client";
-import type { Breadcrumbs } from "../handles";
+import { useHandle, type Breadcrumbs } from "@rangojs/router/client";
 
 function DashboardNav({ handle }: { handle: typeof Breadcrumbs }) {
   const crumbs = useHandle(handle);

package/skills/route/SKILL.md

@@ -355,8 +355,7 @@ urls(({ path, layout }) => [
 ## Complete Example
 
 ```typescript
-import { urls } from "@rangojs/router";
-import { Breadcrumbs } from "./handles/breadcrumbs";
+import { urls, Breadcrumbs } from "@rangojs/router";
 
 export const urlpatterns = urls(({ path, layout, loader, loading }) => [
   // Simple route

package/skills/typesafety/SKILL.md

@@ -414,26 +414,30 @@ Both approaches coexist: `ctx.get("user")` (global via Vars) and
 Handles have typed data:
 
 ```typescript
-// handles/breadcrumbs.ts
-import { createHandle } from "@rangojs/router";
-
-// All export patterns work: export const, const + export { X }, export { X as Y }
-export const Breadcrumbs = createHandle<{ label: string; href: string }>();
-
-// In route definition - use handle() DSL
-import { urls } from "@rangojs/router";
-
-export const urlpatterns = urls(({ path, handle }) => [
-  path("/shop/product/:slug", ProductPage, { name: "product" }, () => [
-    handle(Breadcrumbs, { label: "Products", href: "/shop/products" }),
-  ]),
-]);
-
-// In client - typed array
+// Built-in Breadcrumbs handle — import from "@rangojs/router"
+import { Breadcrumbs } from "@rangojs/router";
+// Type: Handle<BreadcrumbItem, BreadcrumbItem[]>
+// BreadcrumbItem: { label: string; href: string; content?: ReactNode | Promise<ReactNode> }
+
+// In route handler — push is fully typed
+path("/shop/product/:slug", (ctx) => {
+  const breadcrumb = ctx.use(Breadcrumbs);
+  breadcrumb({ label: "Products", href: "/shop/products" });
+  return <ProductPage />;
+}, { name: "product" });
+
+// In client — typed array
+import { useHandle, Breadcrumbs } from "@rangojs/router/client";
 function BreadcrumbNav() {
   const crumbs = useHandle(Breadcrumbs);
-  // crumbs: Array<{ label: string; href: string }>
+  // crumbs: BreadcrumbItem[]
 }
+
+// Custom handles also work the same way
+import { createHandle } from "@rangojs/router";
+export const PageTitle = createHandle<string, string>(
+  (segments) => segments.flat().at(-1) ?? "Default Title"
+);
 ```
 
 ## Ref Prop Type Safety (Loaders & Handles)
@@ -447,14 +451,12 @@ export const ProductLoader = createLoader(async (ctx) => {
   return { product: await fetchProduct(ctx.params.slug) };
 });
 
-// handles.ts
-export const Breadcrumbs = createHandle<{ label: string; href: string }>();
+// Built-in Breadcrumbs — or any custom handle created with createHandle()
 
 // Client component — typeof infers all generics
 ("use client");
-import { useLoader, useHandle } from "@rangojs/router/client";
+import { useLoader, useHandle, type Breadcrumbs } from "@rangojs/router/client";
 import type { ProductLoader } from "../loaders";
-import type { Breadcrumbs } from "../handles";
 
 function MyComponent({
   loader,

package/src/client.rsc.tsx

@@ -63,6 +63,8 @@ export { Meta } from "./handles/meta.js";
 // MetaTags is a "use client" component that can be imported from RSC
 export { MetaTags } from "./handles/MetaTags.js";
 export type { MetaDescriptor, MetaDescriptorBase } from "./router/types.js";
+// Breadcrumbs handle works in RSC context
+export { Breadcrumbs, type BreadcrumbItem } from "./handles/breadcrumbs.js";
 
 // Location state - createLocationState works in RSC (just creates definition)
 // useLocationState is NOT exported here as it uses client hooks

package/src/client.tsx

@@ -544,6 +544,7 @@ export { useHandle } from "./browser/react/use-handle.js";
 export { Meta } from "./handles/meta.js";
 export { MetaTags } from "./handles/MetaTags.js";
 export type { MetaDescriptor, MetaDescriptorBase } from "./router/types.js";
+export { Breadcrumbs, type BreadcrumbItem } from "./handles/breadcrumbs.js";
 
 // Location state - type-safe navigation state
 export {

package/src/handles/breadcrumbs.ts

@@ -0,0 +1,66 @@
+/**
+ * Built-in Breadcrumbs handle for accumulating breadcrumb items across route segments.
+ *
+ * Each layout/route pushes breadcrumb items via `ctx.use(Breadcrumbs)`.
+ * Items are collected in parent-to-child order with automatic deduplication
+ * by `href` (last item for each href wins).
+ *
+ * @example
+ * ```tsx
+ * // In route handler
+ * route("/blog/:slug", (ctx) => {
+ *   const breadcrumb = ctx.use(Breadcrumbs);
+ *   breadcrumb({ label: "Blog", href: "/blog" });
+ *   breadcrumb({ label: post.title, href: `/blog/${ctx.params.slug}` });
+ * });
+ *
+ * // In client component (consume with useHandle)
+ * const crumbs = useHandle(Breadcrumbs);
+ * crumbs.map((c) => <a href={c.href}>{c.label}</a>);
+ * ```
+ */
+
+import type { ReactNode } from "react";
+import { createHandle, type Handle } from "../handle.js";
+
+/**
+ * A single breadcrumb item.
+ *
+ * @property label - Display text for the breadcrumb
+ * @property href - URL the breadcrumb links to
+ * @property content - Optional extra content (sync or async) rendered alongside the label
+ */
+export interface BreadcrumbItem {
+  label: string;
+  href: string;
+  content?: ReactNode | Promise<ReactNode>;
+}
+
+/**
+ * Collect function for Breadcrumbs handle.
+ * Flattens segments in parent-to-child order with deduplication by href
+ * (last item for each href wins).
+ */
+function collectBreadcrumbs(segments: BreadcrumbItem[][]): BreadcrumbItem[] {
+  const all = segments.flat();
+  const seen = new Map<string, number>();
+
+  for (let i = 0; i < all.length; i++) {
+    seen.set(all[i].href, i);
+  }
+
+  // Return items in order, keeping only the last occurrence per href
+  return all.filter((item, index) => seen.get(item.href) === index);
+}
+
+/**
+ * Built-in handle for accumulating breadcrumb navigation items.
+ *
+ * Use `ctx.use(Breadcrumbs)` in route handlers to push breadcrumb items.
+ * Use `useHandle(Breadcrumbs)` in client components to consume them.
+ */
+export const Breadcrumbs: Handle<BreadcrumbItem, BreadcrumbItem[]> =
+  createHandle<BreadcrumbItem, BreadcrumbItem[]>(
+    collectBreadcrumbs,
+    "__rsc_router_breadcrumbs__",
+  );

package/src/handles/index.ts

@@ -4,3 +4,4 @@
 
 export { Meta } from "./meta.ts";
 export { MetaTags } from "./MetaTags.tsx";
+export { Breadcrumbs, type BreadcrumbItem } from "./breadcrumbs.ts";

package/src/index.rsc.ts

@@ -171,6 +171,7 @@ export type { HandlerCacheConfig } from "./rsc/types.js";
 
 // Built-in handles (server-side)
 export { Meta } from "./handles/meta.js";
+export { Breadcrumbs, type BreadcrumbItem } from "./handles/breadcrumbs.js";
 
 // Request context (for accessing request data in server actions/components).
 // Re-exported with a narrowed return type so that public consumers only see

package/src/index.ts

@@ -259,6 +259,9 @@ export type {
 // Meta types
 export type { MetaDescriptor, MetaDescriptorBase } from "./router/types.js";
 
+// Breadcrumb types
+export type { BreadcrumbItem } from "./handles/breadcrumbs.js";
+
 // Reverse type utilities for type-safe URL generation (Django-style URL reversal)
 export type {
   ScopedReverseFunction,