@timber-js/app 0.2.0-alpha.14 → 0.2.0-alpha.141

package/src/client/top-loader.tsx

@@ -3,11 +3,11 @@
  *
  * Shows an animated progress bar at the top of the viewport while an RSC
  * navigation is in flight. Injected automatically by the framework into
- * TransitionRoot — users never render this component directly.
+ * NavigationRoot — users never render this component directly.
  *
  * Configuration is via timber.config.ts `topLoader` key. Enabled by default.
  * Users who want a fully custom progress indicator disable the built-in one
- * (`topLoader: { enabled: false }`) and use `useNavigationPending()` directly.
+ * (`topLoader: { enabled: false }`) and use `usePendingNavigation()` directly.
  *
  * Animation approach: pure CSS @keyframes. The bar crawls from 0% to ~90%
  * width over ~30s using ease-out timing. When navigation completes, the bar
@@ -21,14 +21,14 @@
  * stays invisible during the delay period. If navigation finishes before the
  * delay, the bar was never visible so the finish transition is also invisible.
  *
- * See design/19-client-navigation.md §"useNavigationPending()"
+ * See design/19-client-navigation.md §"usePendingNavigation()"
  * See LOCAL-336 for design decisions.
  */
 
 'use client';
 
 import { useState, createElement } from 'react';
-import { usePendingNavigationUrl } from './navigation-context.js';
+import { usePendingNavigation } from './use-pending-navigation.js';
 
 // ─── Types ───────────────────────────────────────────────────────
 
@@ -39,7 +39,7 @@ export interface TopLoaderConfig {
   color?: string;
   /** Bar height in pixels. Default: 3. */
   height?: number;
-  /** Show subtle glow/shadow effect. Default: true. */
+  /** Show subtle glow/shadow effect. Default: false. */
   shadow?: boolean;
   /** Delay in ms before showing the bar. Default: 0. */
   delay?: number;
@@ -51,7 +51,7 @@ export interface TopLoaderConfig {
 
 const DEFAULT_COLOR = '#2299DD';
 const DEFAULT_HEIGHT = 3;
-const DEFAULT_SHADOW = true;
+const DEFAULT_SHADOW = false;
 const DEFAULT_DELAY = 0;
 const DEFAULT_Z_INDEX = 1600;
 
@@ -97,7 +97,7 @@ function ensureKeyframes(): void {
 // ─── Component ───────────────────────────────────────────────────
 
 /**
- * Internal top-loader component. Injected by TransitionRoot.
+ * Internal top-loader component. Injected by NavigationRoot.
  *
  * Reads pending navigation state from PendingNavigationContext.
  * Phase transitions are derived synchronously during render:
@@ -111,8 +111,10 @@ function ensureKeyframes(): void {
  * (getDerivedStateFromProps pattern) or triggered by DOM events.
  */
 export function TopLoader({ config }: { config?: TopLoaderConfig }): React.ReactElement | null {
-  const pendingUrl = usePendingNavigationUrl();
-  const isPending = pendingUrl !== null;
+  // Read pending state from the router's external store via
+  // useSyncExternalStore (inside usePendingNavigation). Only this
+  // component re-renders when pending changes — no full-tree re-render.
+  const isPending = usePendingNavigation();
 
   const color = config?.color ?? DEFAULT_COLOR;
   const height = config?.height ?? DEFAULT_HEIGHT;

package/src/client/use-cookie.ts

@@ -10,6 +10,7 @@
 
 import { useSyncExternalStore } from 'react';
 import { getSsrData } from './ssr-data.js';
+import { assertValidCookieName } from '../cookies/validation.js';
 
 // ─── Types ────────────────────────────────────────────────────────────────
 
@@ -38,7 +39,7 @@ type Listener = () => void;
 const listeners = new Map<string, Set<Listener>>();
 
 /** Parse a cookie name from document.cookie. */
-function getCookieValue(name: string): string | undefined {
+export function getCookieValue(name: string): string | undefined {
   if (typeof document === 'undefined') return undefined;
   const match = document.cookie.match(
     new RegExp('(?:^|;\\s*)' + name.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + '\\s*=\\s*([^;]*)')
@@ -47,7 +48,7 @@ function getCookieValue(name: string): string | undefined {
 }
 
 /** Serialize options into a cookie string suffix. */
-function serializeOptions(options?: ClientCookieOptions): string {
+export function serializeOptions(options?: ClientCookieOptions): string {
   if (!options) return '; Path=/; SameSite=Lax';
   const parts: string[] = [];
   parts.push(`Path=${options.path ?? '/'}`);
@@ -68,6 +69,17 @@ function notify(name: string): void {
   }
 }
 
+/**
+ * Notify useCookie subscribers that a cookie value changed.
+ * Called by defineCookie's imperative client .set()/.delete() methods
+ * so mounted useCookie() consumers re-render.
+ *
+ * @internal — framework use only
+ */
+export function notifyCookieChange(name: string): void {
+  notify(name);
+}
+
 // ─── Hook ─────────────────────────────────────────────────────────────────
 
 /**
@@ -103,8 +115,25 @@ export function useCookie(
 
   const value = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
 
+  // Validate the name once per hook instance — names are typically
+  // stable string literals, so this catches the bug at first render
+  // rather than on every write. Throws via `assertValidCookieName` with
+  // a precise error if the name violates RFC 7230 token rules.
+  assertValidCookieName(name);
+
   const setCookie: CookieSetter = (newValue: string, options?: ClientCookieOptions) => {
+    if (typeof newValue !== 'string') {
+      throw new Error(
+        `[timber] useCookie(${JSON.stringify(name)}): value must be a string, got ${typeof newValue}.\n` +
+          `  To store a JSON-serializable value, use defineCookie + jsonCookieCodec from\n` +
+          `  '@timber-js/app/cookies' and call its useCookie() hook instead.`
+      );
+    }
     const merged = { ...defaultOptions, ...options };
+    // Auto-encode mirrors the server's `cookies().set()` contract:
+    // values are URL-encoded on write, URL-decoded on read, so the
+    // logical bytes round-trip losslessly. See design/29-cookies.md
+    // §"Encoding Contract".
     document.cookie = `${name}=${encodeURIComponent(newValue)}${serializeOptions(merged)}`;
     notify(name);
   };

package/src/client/use-link-status.ts

@@ -1,26 +1,26 @@
 'use client';
 
-// useLinkStatus — returns { pending: true } while the nearest parent <Link>'s
+// useLinkStatus — returns { isPending: true } while the nearest parent <Link>'s
 // navigation is in flight. No arguments — scoped via React context.
 // See design/19-client-navigation.md §"useLinkStatus()"
 
 import { useContext, createContext } from 'react';
 
 export interface LinkStatus {
-  pending: boolean;
+  isPending: boolean;
 }
 
 /**
  * React context provided by <Link>. Holds the pending status
  * for that specific link's navigation.
  */
-export const LinkStatusContext = createContext<LinkStatus>({ pending: false });
+export const LinkStatusContext = createContext<LinkStatus>({ isPending: false });
 
 /**
- * Returns `{ pending: true }` while the nearest parent `<Link>` component's
+ * Returns `{ isPending: true }` while the nearest parent `<Link>` component's
  * navigation is in flight. Must be used inside a `<Link>` component's children.
  *
- * Unlike `useNavigationPending()` which is global, this hook is scoped to
+ * Unlike `usePendingNavigation()` which is global, this hook is scoped to
  * the nearest parent `<Link>` — only the link the user clicked shows pending.
  *
  * ```tsx
@@ -28,8 +28,8 @@ export const LinkStatusContext = createContext<LinkStatus>({ pending: false });
  * import { Link, useLinkStatus } from '@timber-js/app/client'
  *
  * function Hint() {
- *   const { pending } = useLinkStatus()
- *   return <span className={pending ? 'opacity-50' : ''} />
+ *   const { isPending } = useLinkStatus()
+ *   return <span className={isPending ? 'opacity-50' : ''} />
  * }
  *
  * export function NavLink({ href, children }) {

package/src/client/use-pathname.ts

@@ -31,6 +31,7 @@ export function usePathname(): string {
   // Try reading from NavigationContext (client-side, inside React tree).
   // During SSR, no NavigationProvider is mounted, so this returns null.
   try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on environment, not render path
     const navContext = useNavigationContext();
     if (navContext !== null) {
       return navContext.pathname;

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

@@ -0,0 +1,40 @@
+import { useSyncExternalStore } from 'react';
+import { getRouterOrNull } from './router-ref.js';
+
+function subscribe(onStoreChange: () => void): () => void {
+  const router = getRouterOrNull();
+  if (!router) return () => {};
+  return router.onPendingChange(onStoreChange);
+}
+
+function getSnapshot(): boolean {
+  const router = getRouterOrNull();
+  return router ? router.isPending() : false;
+}
+
+const getServerSnapshot = getSnapshot;
+
+/**
+ * Returns true while an RSC navigation is in flight.
+ *
+ * Reads from the router's external pending store via useSyncExternalStore.
+ * Only components that call this hook re-render when pending state
+ * changes — no full-tree re-render.
+ *
+ * ```tsx
+ * 'use client'
+ * import { usePendingNavigation } from '@timber-js/app/client'
+ *
+ * export function NavBar() {
+ *   const isPending = usePendingNavigation()
+ *   return (
+ *     <nav className={isPending ? 'opacity-50' : ''}>
+ *       <Link href="/dashboard">Dashboard</Link>
+ *     </nav>
+ *   )
+ * }
+ * ```
+ */
+export function usePendingNavigation(): boolean {
+  return useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}

package/src/client/use-query-states.ts

@@ -17,8 +17,8 @@ import type {
   SearchParamsDefinition,
   SetParams,
   QueryStatesOptions,
-} from '#/search-params/create.js';
-import { getSearchParams } from '#/search-params/registry.js';
+} from '../search-params/define.js';
+import { getSearchParamsDefinition } from '../search-params/registry.js';
 
 // ─── Codec Bridge ─────────────────────────────────────────────────
 
@@ -79,7 +79,7 @@ export function useQueryStates<T extends Record<string, unknown>>(
   let codecs: { [K in keyof T]: SearchParamCodec<T[K]> };
   let resolvedUrlKeys = urlKeys;
   if (typeof codecsOrRoute === 'string') {
-    const definition = getSearchParams(codecsOrRoute);
+    const definition = getSearchParamsDefinition(codecsOrRoute);
     if (!definition) {
       throw new Error(
         `useQueryStates('${codecsOrRoute}'): no search params registered for this route. ` +
@@ -95,8 +95,14 @@ export function useQueryStates<T extends Record<string, unknown>>(
 
   const bridged = bridgeCodecs(codecs);
 
+  // Forward hook-level options (shallow, scroll, history) to nuqs.
+  // These become the default for all setter calls from this hook instance.
+  // Per-call options in setParams(values, opts) override these defaults.
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const nuqsOptions: any = {};
+  if (_options?.shallow !== undefined) nuqsOptions.shallow = _options.shallow;
+  if (_options?.scroll !== undefined) nuqsOptions.scroll = _options.scroll;
+  if (_options?.history !== undefined) nuqsOptions.history = _options.history;
   if (resolvedUrlKeys && Object.keys(resolvedUrlKeys).length > 0) {
     nuqsOptions.urlKeys = resolvedUrlKeys;
   }

package/src/client/use-router.ts

@@ -20,10 +20,11 @@
  *
  * 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 { validateNavigationHref } from '../shared/href-validation.js';
 
 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,9 +4,12 @@
  * 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).
+ * On the client, reads from NavigationContext which is updated atomically
+ * with the RSC tree render. This replaces the previous useSyncExternalStore
+ * approach which read window.location.search directly — causing React to
+ * detect external store tearing during transitions and fall back to
+ * synchronous rendering (renderRootSync instead of renderRootConcurrent),
+ * blocking the main thread and freezing animations.
  *
  * Unlike Next.js's ReadonlyURLSearchParams, this returns a standard
  * URLSearchParams. Mutation methods (set, delete, append) work on the
@@ -15,42 +18,14 @@
  * 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 { useNavigationContext } from './navigation-context.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}` : '';
-}
-
-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 +34,27 @@ 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.
  *
  * 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();
+  try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on environment, not render path
+    const navContext = useNavigationContext();
+    if (navContext !== null) {
+      return getSearchParams(navContext.search);
+    }
+  } catch {
+    // No React dispatcher available (called outside a component).
+  }
+
+  // SSR path: read from ALS-backed SSR data context.
+  const ssrData = getSsrData();
+  if (ssrData) return new URLSearchParams(ssrData.searchParams);
+
+  // Final fallback: window.location (tests, edge cases).
+  if (typeof window !== 'undefined') return getSearchParams(window.location.search);
+  return new URLSearchParams();
 }

package/src/client/{use-params.ts → use-segment-params.ts}

@@ -7,7 +7,7 @@
  *
  * Two layers of type narrowing work together:
  * 1. The generic overload here uses the Routes interface directly —
- *    `useParams<R>()` returns `Routes[R]['params']`.
+ *    `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).
  *
@@ -30,7 +30,7 @@
  * Design doc: design/09-typescript.md §"Typed Routes"
  */
 
-import type { Routes } from '#/index.js';
+import type { Routes } from '../index.js';
 import { getSsrData } from './ssr-data.js';
 import { currentParams, _setCurrentParams, paramsListeners } from './state.js';
 import { useNavigationContext } from './navigation-context.js';
@@ -115,17 +115,20 @@ export function notifyParamsListeners(): void {
  * When called outside a React component (e.g., in test assertions),
  * falls back to the module-level snapshot.
  *
- * @overload Typed — when a known route path is passed, returns the
+ * @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 useParams<R extends keyof Routes>(route: R): Routes[R]['params'];
-export function useParams(route?: string): Record<string, string | string[]>;
-export function useParams(_route?: string): Record<string, string | string[]> {
+export function useSegmentParams<R extends keyof Routes>(
+  segmentPath: R
+): Routes[R] extends { segmentParams: infer P } ? P : Record<string, string | string[]>;
+export function useSegmentParams(segmentPath?: string): Record<string, string | string[]>;
+export function useSegmentParams(_segmentPath?: string): Record<string, string | string[]> {
   // Try reading from NavigationContext (client-side, inside React tree).
   // During SSR, no NavigationProvider is mounted, so this returns null.
   // When called outside a React component, useContext throws — caught below.
   try {
+    // eslint-disable-next-line react-hooks/rules-of-hooks -- conditional on environment, not render path
     const navContext = useNavigationContext();
     if (navContext !== null) {
       return navContext.params;

package/src/codec.ts

@@ -0,0 +1,147 @@
+/**
+ * @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.js';
+export type { StandardSchemaV1, StandardSchemaResult } from './schema-bridge.js';
+
+// ─── 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;
+      const n = Number(str);
+      if (!Number.isInteger(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;