feat(docs): 676 — demo page for cancelling navigation on dirty edits

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.

[randomdevpete]

Summary

Adds a new demo page at /demos/cancel-navigation that shows how to block in-app navigation while a form has unsaved edits. The demo consists of:

• An Editor page with a textarea that marks the form as dirty
• An Other page to navigate to
• A GuardedLink component built on useLink that intercepts clicks and shows window.confirm() before navigating when the form is dirty

The navigation guard is entirely userland logic — jarl has no built-in navigation-blocking API. This follows the same pattern as other demos: application-specific behaviour built on top of the primitives.

Details

• Demo components live in packages/docs/src/demos/CancelNavigationApp.tsx
• Demo page wrapper in packages/docs/src/pages/CancelNavigationDemo.tsx
• Routes registered in packages/docs/src/router/routes.ts using the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95staticRouteAtom API
• Registry additions are purely additive (no modifications), allowing dependent PRs #677 and #678 to stack cleanly

Stack

Stacked on #95 (task-675-coalesce-resolvedatom-and-asyncrouteatom). Will retarget automatically when that merges.

Compatibility notes

• Uses only the post-feat(atoms)!: 675 — one asyncRouteAtom API for async route data #95 API (staticRouteAtom, useLink, notAtom)
• window.confirm is called only in event handlers (browser-side), safe for SSR
• No style exceptions required

[randomdevpete]

Holding for a rewrite — this demo guards a component, not routing.

GuardedLink wraps useLink's onClick, so it only sees navigations that go through that one component. Routing is also reachable by useNavigate or any direct route-atom write, by third-party history.pushState, and by the browser's back/forward buttons — all valid cases here, none of them visible to a per-link component. Rendering a special link component for every link is not the shape we want regardless.

The mechanism is ticket 778: a navigationGuardAtom in jarl-atoms, bound to the Navigation API, registering the interrupt at the atoms layer. Design is settled and that ticket is now in begin. This PR is reworked in place onto it once it lands, and GuardedLink goes.