@timber-js/app 0.2.0-alpha.2 → 0.2.0-alpha.200

package/src/client/use-router.ts

@@ -14,16 +14,17 @@
  * In timber, navigation calls reactRoot.render() which is a root-level
  * render — startTransition has no effect on root renders.
  *
- * Navigation state (params, pathname) is delivered atomically via
+ * Navigation state (pathname, search) is delivered atomically via
  * NavigationContext embedded in the element tree passed to
  * reactRoot.render(). See design/19-client-navigation.md §"NavigationContext".
  *
  * For loading UI during navigation, use:
  * - useLinkStatus()          — per-link pending indicator (inside <Link>)
- * - useNavigationPending()   — global navigation pending state
+ * - usePendingNavigation()   — global navigation pending state
  */
 
-import { getRouterOrNull } from './router-ref.js';
+import { getRouterOrNull } from './router-ref.ts';
+import { validateNavigationHref } from '../shared/href-validation.ts';
 
 export interface AppRouterInstance {
   /** Navigate to a URL, pushing a new history entry */
@@ -60,6 +61,7 @@ export interface AppRouterInstance {
 export function useRouter(): AppRouterInstance {
   return {
     push(href: string, options?: { scroll?: boolean }) {
+      validateNavigationHref(href);
       const router = getRouterOrNull();
       if (!router) {
         if (process.env.NODE_ENV === 'development') {
@@ -72,6 +74,7 @@ export function useRouter(): AppRouterInstance {
       void router.navigate(href, { scroll: options?.scroll });
     },
     replace(href: string, options?: { scroll?: boolean }) {
+      validateNavigationHref(href);
       const router = getRouterOrNull();
       if (!router) {
         if (process.env.NODE_ENV === 'development') {

package/src/client/use-search-params.ts

@@ -4,53 +4,31 @@
  * Returns a read-only URLSearchParams instance reflecting the current
  * URL's query string. Updates when client-side navigation changes the URL.
  *
- * This is a thin wrapper over window.location.search, provided for
- * Next.js API compatibility (libraries like nuqs import useSearchParams
- * from next/navigation).
+ * One unconditional read of NavigationContext, on every side (TIM-1425):
+ *
+ * - In the browser, the provider is updated atomically with the RSC tree
+ *   during full navigations, AND by syncShallowSearch() for shallow URL
+ *   updates (nuqs shallow: true, replaceUrl, or any external
+ *   pushState/replaceState that changes the query string). See router-init.ts.
+ * - During SSR, the wrapper chain mounts the same provider carrying the
+ *   request's RAW query string (TIM-1424), so repeated keys
+ *   (`?tag=a&tag=b`) survive — the collapsed record the ALS context holds
+ *   cannot represent them.
+ * - In the RSC environment, this module is never evaluated — the shims plugin
+ *   resolves next/navigation to navigation-rsc.ts (TIM-1420).
  *
  * Unlike Next.js's ReadonlyURLSearchParams, this returns a standard
  * URLSearchParams. Mutation methods (set, delete, append) work on the
  * local copy but do NOT affect the URL — use the router or nuqs for that.
  *
- * During SSR, reads the request search params from the SSR ALS context
- * (populated by ssr-entry.ts) instead of window.location.
- *
- * All mutable state is delegated to client/state.ts for singleton guarantees.
- * See design/18-build-system.md §"Singleton State Registry"
+ * Compatible with Next.js's `useSearchParams()` from `next/navigation`.
  */
 
-import { useSyncExternalStore } from 'react';
-import { getSsrData } from './ssr-data.js';
-import { cachedSearch, cachedSearchParams, _setCachedSearch } from './state.js';
-
-function getSearch(): string {
-  if (typeof window !== 'undefined') return window.location.search;
-  const data = getSsrData();
-  if (!data) return '';
-  const sp = new URLSearchParams(data.searchParams);
-  const str = sp.toString();
-  return str ? `?${str}` : '';
-}
-
-function getServerSearch(): string {
-  const data = getSsrData();
-  if (!data) return '';
-  const sp = new URLSearchParams(data.searchParams);
-  const str = sp.toString();
-  return str ? `?${str}` : '';
-}
+import { getSsrData } from './ssr-data.ts';
+import { useNavigationContext } from './navigation-context.ts';
+import { cachedSearch, cachedSearchParams, _setCachedSearch } from './state.ts';
 
-function subscribe(callback: () => void): () => void {
-  window.addEventListener('popstate', callback);
-  return () => window.removeEventListener('popstate', callback);
-}
-
-// Cache the last search string and its parsed URLSearchParams to avoid
-// creating a new object on every render when the URL hasn't changed.
-// State lives in client/state.ts for singleton guarantees.
-
-function getSearchParams(): URLSearchParams {
-  const search = getSearch();
+function getSearchParams(search: string): URLSearchParams {
   if (search !== cachedSearch) {
     const params = new URLSearchParams(search);
     _setCachedSearch(search, params);
@@ -59,20 +37,31 @@ function getSearchParams(): URLSearchParams {
   return cachedSearchParams;
 }
 
-function getServerSearchParams(): URLSearchParams {
-  const data = getSsrData();
-  return data ? new URLSearchParams(data.searchParams) : new URLSearchParams();
-}
-
 /**
  * Read the current URL search params.
  *
+ * Throws when no NavigationProvider is above the caller.
+ *
  * Compatible with Next.js's `useSearchParams()` from `next/navigation`.
  */
 export function useSearchParams(): URLSearchParams {
-  // useSyncExternalStore needs a primitive snapshot for comparison.
-  // We use the raw search string as the snapshot, then return the
-  // parsed URLSearchParams.
-  useSyncExternalStore(subscribe, getSearch, getServerSearch);
-  return typeof window !== 'undefined' ? getSearchParams() : getServerSearchParams();
+  const nav = useNavigationContext();
+  if (nav === null) {
+    throw new Error(
+      '[timber] useSearchParams() was called outside the timber app tree ' +
+        '(no NavigationProvider found). In tests, render the component ' +
+        'inside the timber providers.'
+    );
+  }
+  // On the server, return a fresh instance per call. The module-level cache
+  // below exists to give client code stable identity for effect deps; on the
+  // server it would be shared mutable state across concurrent requests
+  // (design/13-security.md, "no global fallback state"). Both halves of the
+  // check matter: `window` is absent in a plain Node SSR render, and
+  // getSsrData() catches SSR environments that do define `window` (handleSsr
+  // always runs inside the ALS scope). Pinned by tests/ssr-provider-hooks.test.ts.
+  if (typeof window === 'undefined' || getSsrData()) {
+    return new URLSearchParams(nav.search);
+  }
+  return getSearchParams(nav.search);
 }

package/src/client/use-segment-params.ts

@@ -0,0 +1,69 @@
+/**
+ * useParams() — client-side hook for accessing route params.
+ *
+ * Returns the dynamic route parameters for the current URL.
+ * When called with a route pattern argument, TypeScript narrows
+ * the return type to the exact params shape for that route.
+ *
+ * Two layers of type narrowing work together:
+ * 1. The generic overload here uses the Routes interface directly —
+ *    `useParams<R>()` returns `Routes[R]['segmentParams']`.
+ * 2. Build-time codegen generates per-route string-literal overloads
+ *    in the .d.ts file for IDE autocomplete (see routing/codegen.ts).
+ *
+ * When the Routes interface is empty (no codegen yet), the generic
+ * overload has `keyof Routes = never`, so only the fallback matches.
+ *
+ * One unconditional read of ParamsContext, on every side (TIM-1425):
+ *
+ * - In the browser, `PayloadRoot` publishes the payload's params above the
+ *   merge point on every render path. Params update atomically with the RSC
+ *   tree — no timing gap (TIM-1294, TIM-1297).
+ * - During SSR, the wrapper chain mounts the same `PayloadRoot`, fed the
+ *   `params` half of `splitPayloadRoot(root)` — the identical derivation
+ *   the browser performs at hydration (TIM-1424).
+ * - In the RSC environment, this module is never evaluated — the shims plugin
+ *   resolves next/navigation to navigation-rsc.ts (TIM-1420).
+ * - Called outside a component entirely, React itself throws its
+ *   invalid-hook-call error.
+ *
+ * The module-level subscribe/notify machinery and the `currentParams`
+ * snapshot that used to back a fourth fallback tier are gone (TIM-1425):
+ * the provider is unconditional on every render path, so nothing read them.
+ *
+ * Design doc: design/09-typescript.md §"Typed Routes"
+ */
+
+import type { CoercedParams } from '../shared/param-value.ts';
+import type { Routes } from '../index.ts';
+import { resolveSegmentParams } from '../shared/slot-params.ts';
+import { useParamsContext } from './params-context.ts';
+
+/**
+ * Read the current route's dynamic params.
+ *
+ * The optional `_route` argument exists only for TypeScript narrowing —
+ * it does not affect the runtime return value.
+ *
+ * Throws when no `PayloadRoot` is above the caller (a component rendered
+ * outside the timber app — in tests, render inside the timber providers).
+ *
+ * @overload Typed — when a known segment path is passed, returns the
+ *   exact params shape from the generated Routes interface.
+ * @overload Fallback — returns the generic params record.
+ */
+export function useSegmentParams<R extends keyof Routes>(
+  segmentPath: R
+): Routes[R] extends { segmentParams: infer P } ? P : CoercedParams;
+export function useSegmentParams(segmentPath?: string): CoercedParams;
+export function useSegmentParams(segmentPath?: string): CoercedParams {
+  const paramsContext = useParamsContext();
+  if (paramsContext === null) {
+    throw new Error(
+      '[timber] useSegmentParams() was called outside the timber app tree ' +
+        '(no params provider found). In tests, render the component inside ' +
+        'the timber providers.'
+    );
+  }
+  return resolveSegmentParams(paramsContext.params, paramsContext.slotParams, segmentPath);
+}

package/src/client/use-selected-layout-segment.ts

@@ -22,8 +22,8 @@
 
 'use client';
 
-import { useSegmentContext } from './segment-context.js';
-import { usePathname } from './use-pathname.js';
+import { useSegmentContext } from './segment-context.ts';
+import { usePathname } from './use-pathname.ts';
 
 /**
  * Split a pathname into URL segments.

package/src/codec.ts

@@ -0,0 +1,149 @@
+/**
+ * @timber-js/app/codec — Shared codec protocol and Standard Schema bridge.
+ *
+ * The canonical import path for codec primitives shared across search params,
+ * route params, and cookies.
+ *
+ * Design doc: design/23a-search-params-triage.md §"Unify Codec<T> type"
+ */
+
+// ─── Codec protocol ──────────────────────────────────────────────────────
+
+/**
+ * A codec that converts between string values and typed values.
+ *
+ * The canonical protocol shared across search params, cookies, and
+ * any future timber feature that needs string ↔ typed conversion.
+ */
+export interface Codec<T> {
+  /** String → typed value. Receives undefined when the value is absent. */
+  parse(value: string | string[] | undefined): T;
+  /** Typed value → string. Return null to omit/clear. */
+  serialize(value: T): string | null;
+}
+
+/**
+ * Marker interface for codecs designed for catch-all segments (`[...slug]`).
+ * These codecs expect `string[]` input from the router.
+ */
+export interface CatchAllCodec<T> extends Codec<T> {
+  readonly __catchAll: true;
+}
+
+/**
+ * Marker interface for codecs designed for optional catch-all segments (`[[...slug]]`).
+ * These codecs expect `string[] | undefined` input from the router.
+ */
+export interface OptionalCatchAllCodec<T> extends Codec<T> {
+  readonly __catchAll: true;
+  readonly __optional: true;
+}
+
+/**
+ * Recursive JSON-serializable type. The canonical definition for data that
+ * can safely cross the RSC → client boundary.
+ *
+ * Previously exported from both @timber-js/app/server and @timber-js/app/client.
+ * Moved here so there is exactly one canonical import path.
+ */
+export type JsonSerializable =
+  | string
+  | number
+  | boolean
+  | null
+  | JsonSerializable[]
+  | { [key: string]: JsonSerializable };
+
+// ─── Standard Schema bridge ──────────────────────────────────────────────
+
+export {
+  // fromSchema,
+  fromArraySchema,
+  // validateSync,
+  // isStandardSchema,
+  // isCodec,
+} from './schema-bridge.ts';
+export type { StandardSchemaV1, StandardSchemaResult } from './schema-bridge.ts';
+
+// ─── Built-in segment param codecs ───────────────────────────────────────
+
+export const codec = {
+  string: {
+    parse(value: string | string[] | undefined): string {
+      return Array.isArray(value) ? value.join('/') : (value ?? '');
+    },
+    serialize(value: string): string | null {
+      return value;
+    },
+  } satisfies Codec<string>,
+
+  integer: {
+    parse(value: string | string[] | undefined): number {
+      const str = Array.isArray(value) ? value[0] : value;
+      if (!str || !/^(?:0|-?[1-9]\d*)$/.test(str))
+        throw new Error(`Expected integer, got '${str}'`);
+      const n = Number(str);
+      if (!Number.isSafeInteger(n)) throw new Error(`Expected integer, got '${str}'`);
+      return n;
+    },
+    serialize(value: number): string | null {
+      return String(value);
+    },
+  } satisfies Codec<number>,
+
+  slug: {
+    parse(value: string | string[] | undefined): string {
+      const str = Array.isArray(value) ? value[0] : value;
+      if (!str || !/^[a-z0-9]+(?:-[a-z0-9]+)*$/.test(str)) {
+        throw new Error(`Invalid slug: '${str}'`);
+      }
+      return str;
+    },
+    serialize(value: string): string | null {
+      return value;
+    },
+  } satisfies Codec<string>,
+
+  stringArray: {
+    __catchAll: true as const,
+    parse(value: string | string[] | undefined): string[] {
+      if (Array.isArray(value)) return value;
+      return value ? [value] : [];
+    },
+    serialize(value: string[]): string | null {
+      return value.join('/');
+    },
+  } satisfies CatchAllCodec<string[]>,
+
+  catchAll<T>(inner: Codec<T>): CatchAllCodec<T[]> {
+    return {
+      __catchAll: true as const,
+      parse(value: string | string[] | undefined): T[] {
+        const arr = Array.isArray(value) ? value : value !== undefined ? [value] : [];
+        if (arr.length === 0) {
+          throw new Error('Catch-all segment requires at least one value');
+        }
+        return arr.map((item) => inner.parse(item));
+      },
+      serialize(value: T[]): string | null {
+        return value.map((item) => inner.serialize(item)).join('/');
+      },
+    };
+  },
+
+  optionalCatchAll<T>(inner: Codec<T>): OptionalCatchAllCodec<T[] | undefined> {
+    return {
+      __catchAll: true as const,
+      __optional: true as const,
+      parse(value: string | string[] | undefined): T[] | undefined {
+        const arr = Array.isArray(value) ? value : value !== undefined ? [value] : [];
+        if (arr.length === 0) return undefined;
+        return arr.map((item) => inner.parse(item));
+      },
+      serialize(value: T[] | undefined): string | null {
+        if (!value || value.length === 0) return null;
+        return value.map((item) => inner.serialize(item)).join('/');
+      },
+    };
+  },
+} as const;