@timber-js/app 0.1.32 → 0.1.34

package/src/adapters/nitro.ts

@@ -391,9 +391,10 @@ const MIME_TYPES = {
 
 const publicDir = join(__dirname, '${publicDir}');
 const port = parseInt(process.env.PORT || '3000', 10);
+const host = process.env.HOST || process.env.HOSTNAME || 'localhost';
 
 const server = createServer(async (req, res) => {
-  const url = new URL(req.url || '/', \`http://localhost:\${port}\`);
+  const url = new URL(req.url || '/', \`http://\${host}:\${port}\`);
 
   // Try serving static files from the public directory first.
   const filePath = join(publicDir, url.pathname);
@@ -485,11 +486,11 @@ const server = createServer(async (req, res) => {
   }
 });
 
-server.listen(port, () => {
+server.listen(port, host, () => {
   console.log();
   console.log('  ⚡ timber preview server running at:');
   console.log();
-  console.log(\`    ➜  http://localhost:\${port}\`);
+  console.log(\`    ➜  http://\${host}:\${port}\`);
   console.log();
 });
 `;

package/src/client/link-status-provider.tsx

@@ -12,7 +12,7 @@
 
 import type { ReactNode } from 'react';
 import { LinkStatusContext, type LinkStatus } from './use-link-status.js';
-import { usePendingNavigationUrl } from './pending-navigation-context.js';
+import { usePendingNavigationUrl } from './navigation-context.js';
 
 const NOT_PENDING: LinkStatus = { pending: false };
 const IS_PENDING: LinkStatus = { pending: true };
@@ -22,7 +22,7 @@ const IS_PENDING: LinkStatus = { pending: true };
  * and provides a scoped LinkStatusContext to children. Renders no extra DOM —
  * just a context provider around children.
  */
-export function LinkStatusProvider({ href, children }: { href: string; children: ReactNode }) {
+export function LinkStatusProvider({ href, children }: { href: string; children?: ReactNode }) {
   const pendingUrl = usePendingNavigationUrl();
   const status = pendingUrl === href ? IS_PENDING : NOT_PENDING;
 

package/src/client/navigation-context.ts

@@ -116,3 +116,57 @@ export function setNavigationState(state: NavigationState): void {
 export function getNavigationState(): NavigationState {
   return _currentNavState;
 }
+
+// ---------------------------------------------------------------------------
+// Pending Navigation Context (same module for singleton guarantee)
+// ---------------------------------------------------------------------------
+
+/**
+ * Separate context for the in-flight navigation URL. Provided by
+ * TransitionRoot (useOptimistic state), consumed by LinkStatusProvider
+ * and useNavigationPending.
+ *
+ * Lives in this module (not a separate file) to guarantee singleton
+ * identity across chunks. The `'use client'` LinkStatusProvider and
+ * the non-directive TransitionRoot both import from this module —
+ * if they were in separate files, the bundler could duplicate the
+ * module-level context variable across chunks.
+ */
+let _pendingContext: React.Context<string | null> | undefined;
+
+function getOrCreatePendingContext(): React.Context<string | null> | undefined {
+  if (_pendingContext !== undefined) return _pendingContext;
+  if (typeof React.createContext === 'function') {
+    _pendingContext = React.createContext<string | null>(null);
+  }
+  return _pendingContext;
+}
+
+/**
+ * Read the pending navigation URL from context.
+ * Returns null during SSR (no provider) or in the RSC environment.
+ */
+export function usePendingNavigationUrl(): string | null {
+  const ctx = getOrCreatePendingContext();
+  if (!ctx) return null;
+  if (typeof React.useContext !== 'function') return null;
+  return React.useContext(ctx);
+}
+
+/**
+ * Provider for the pending navigation URL. Wraps children with
+ * the pending context Provider.
+ */
+export function PendingNavigationProvider({
+  value,
+  children,
+}: {
+  value: string | null;
+  children?: ReactNode;
+}): React.ReactElement {
+  const ctx = getOrCreatePendingContext();
+  if (!ctx) {
+    return children as React.ReactElement;
+  }
+  return createElement(ctx.Provider, { value }, children);
+}

package/src/client/transition-root.tsx

@@ -11,14 +11,12 @@
  * a transition update. React keeps the old committed tree visible while
  * any new Suspense boundaries in the transition resolve.
  *
- * Also manages `pendingUrl` via `useOptimistic`. During a navigation
- * transition, the optimistic value (the target URL) shows immediately
- * while the transition is pending, and automatically reverts to null
- * when the transition commits. This ensures useLinkStatus and
- * useNavigationPending show the pending state immediately and clear
- * atomically with the new tree — same pattern Next.js uses with
- * useOptimistic per Link instance, adapted for timber's server-component
- * Link with global click delegation.
+ * Also manages `pendingUrl` as React state with an urgent/transition split:
+ * - Navigation START: `setPendingUrl(url)` is an urgent update — React
+ *   commits it before the next paint, showing the spinner immediately.
+ * - Navigation END: `setPendingUrl(null)` is inside `startTransition`
+ *   alongside `setElement(newTree)` — both commit atomically, so the
+ *   spinner disappears in the same frame as the new content appears.
  *
  * See design/05-streaming.md §"deferSuspenseFor"
  * See design/19-client-navigation.md §"NavigationContext"
@@ -26,12 +24,11 @@
 
 import {
   useState,
-  useOptimistic,
   useTransition,
   createElement,
   type ReactNode,
 } from 'react';
-import { PendingNavigationProvider } from './pending-navigation-context.js';
+import { PendingNavigationProvider } from './navigation-context.js';
 
 // ─── Module-level functions ──────────────────────────────────────
 
@@ -72,10 +69,7 @@ let _navigateTransition: ((
  */
 export function TransitionRoot({ initial }: { initial: ReactNode }): ReactNode {
   const [element, setElement] = useState<ReactNode>(initial);
-  const [optimisticPendingUrl, setOptimisticPendingUrl] = useOptimistic<string | null>(null);
-  // useTransition's startTransition (not the standalone import) creates an
-  // action context that useOptimistic can track. The standalone startTransition
-  // doesn't — optimistic values would never show.
+  const [pendingUrl, setPendingUrl] = useState<string | null>(null);
   const [, startTransition] = useTransition();
 
   // Non-navigation render (revalidation, popstate cached replay).
@@ -85,25 +79,35 @@ export function TransitionRoot({ initial }: { initial: ReactNode }): ReactNode {
     });
   };
 
-  // Full navigation transition. The entire navigation (fetch + state updates)
-  // runs inside startTransition. useOptimistic shows the pending URL immediately
-  // (urgent) and reverts to null when the transition commits (atomic with new tree).
-  _navigateTransition = (pendingUrl: string, perform: () => Promise<ReactNode>) => {
+  // Full navigation transition.
+  // setPendingUrl(url) is an URGENT update — React commits it before the next
+  // paint, so the pending spinner appears immediately when navigation starts.
+  // Inside startTransition: the async fetch + setElement + setPendingUrl(null)
+  // are deferred. When the transition commits, the new tree and pendingUrl=null
+  // both apply in the same React commit — making the pending→active transition
+  // atomic (no frame where pending is false but the old tree is still visible).
+  _navigateTransition = (url: string, perform: () => Promise<ReactNode>) => {
+    // Urgent: show pending state immediately
+    setPendingUrl(url);
+
     return new Promise<void>((resolve, reject) => {
       startTransition(async () => {
         try {
-          setOptimisticPendingUrl(pendingUrl);
           const newElement = await perform();
           setElement(newElement);
+          // Clear pending inside the transition — commits atomically with new tree
+          setPendingUrl(null);
           resolve();
         } catch (err) {
+          // Clear pending on error too
+          setPendingUrl(null);
           reject(err);
         }
       });
     });
   };
 
-  return createElement(PendingNavigationProvider, { value: optimisticPendingUrl }, element);
+  return createElement(PendingNavigationProvider, { value: pendingUrl }, element);
 }
 
 // ─── Public API ──────────────────────────────────────────────────

package/src/client/use-navigation-pending.ts

@@ -5,7 +5,7 @@
 // pending state shows immediately (urgent update) and clears atomically
 // with the new tree (same startTransition commit).
 
-import { usePendingNavigationUrl } from './pending-navigation-context.js';
+import { usePendingNavigationUrl } from './navigation-context.js';
 
 /**
  * Returns true while an RSC navigation is in flight.

package/dist/client/pending-navigation-context.d.ts

@@ -1,32 +0,0 @@
-/**
- * PendingNavigationContext — React context for the in-flight navigation URL.
- *
- * Provided by TransitionRoot. The value is the URL being navigated to,
- * or null when idle. Used by:
- * - LinkStatusProvider to show per-link pending spinners
- * - useNavigationPending to return a global pending boolean
- *
- * The pending URL is set as an URGENT update (shows immediately) and
- * cleared inside startTransition (commits atomically with the new tree).
- * This ensures pending state appears instantly on navigation start and
- * disappears in the same React commit as the new params/tree.
- *
- * Separate from NavigationContext (which holds params + pathname) because
- * the pending URL is managed as React state in TransitionRoot, while
- * params/pathname are set via module-level state read by renderRoot.
- * Both contexts commit together in the same transition.
- *
- * See design/19-client-navigation.md §"NavigationContext"
- */
-import React, { type ReactNode } from 'react';
-/**
- * Read the pending navigation URL from context.
- * Returns null during SSR (no provider) or in the RSC environment.
- * Internal — used by LinkStatusProvider and useNavigationPending.
- */
-export declare function usePendingNavigationUrl(): string | null;
-export declare function PendingNavigationProvider({ value, children, }: {
-    value: string | null;
-    children?: ReactNode;
-}): React.ReactElement;
-//# sourceMappingURL=pending-navigation-context.d.ts.map

package/dist/client/pending-navigation-context.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pending-navigation-context.d.ts","sourceRoot":"","sources":["../../src/client/pending-navigation-context.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;GAmBG;AAEH,OAAO,KAAK,EAAE,EAAiB,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAgB7D;;;;GAIG;AACH,wBAAgB,uBAAuB,IAAI,MAAM,GAAG,IAAI,CAKvD;AAMD,wBAAgB,yBAAyB,CAAC,EACxC,KAAK,EACL,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,GAAG,KAAK,CAAC,YAAY,CAMrB"}

package/src/client/pending-navigation-context.ts

@@ -1,66 +0,0 @@
-/**
- * PendingNavigationContext — React context for the in-flight navigation URL.
- *
- * Provided by TransitionRoot. The value is the URL being navigated to,
- * or null when idle. Used by:
- * - LinkStatusProvider to show per-link pending spinners
- * - useNavigationPending to return a global pending boolean
- *
- * The pending URL is set as an URGENT update (shows immediately) and
- * cleared inside startTransition (commits atomically with the new tree).
- * This ensures pending state appears instantly on navigation start and
- * disappears in the same React commit as the new params/tree.
- *
- * Separate from NavigationContext (which holds params + pathname) because
- * the pending URL is managed as React state in TransitionRoot, while
- * params/pathname are set via module-level state read by renderRoot.
- * Both contexts commit together in the same transition.
- *
- * See design/19-client-navigation.md §"NavigationContext"
- */
-
-import React, { createElement, type ReactNode } from 'react';
-
-// ---------------------------------------------------------------------------
-// Lazy context initialization (same pattern as NavigationContext)
-// ---------------------------------------------------------------------------
-
-let _context: React.Context<string | null> | undefined;
-
-function getOrCreateContext(): React.Context<string | null> | undefined {
-  if (_context !== undefined) return _context;
-  if (typeof React.createContext === 'function') {
-    _context = React.createContext<string | null>(null);
-  }
-  return _context;
-}
-
-/**
- * Read the pending navigation URL from context.
- * Returns null during SSR (no provider) or in the RSC environment.
- * Internal — used by LinkStatusProvider and useNavigationPending.
- */
-export function usePendingNavigationUrl(): string | null {
-  const ctx = getOrCreateContext();
-  if (!ctx) return null;
-  if (typeof React.useContext !== 'function') return null;
-  return React.useContext(ctx);
-}
-
-// ---------------------------------------------------------------------------
-// Provider component
-// ---------------------------------------------------------------------------
-
-export function PendingNavigationProvider({
-  value,
-  children,
-}: {
-  value: string | null;
-  children?: ReactNode;
-}): React.ReactElement {
-  const ctx = getOrCreateContext();
-  if (!ctx) {
-    return children as React.ReactElement;
-  }
-  return createElement(ctx.Provider, { value }, children);
-}