@timber-js/app 0.2.0-alpha.17 → 0.2.0-alpha.170

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,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.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;
+      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;

package/src/config-types.ts

@@ -0,0 +1,282 @@
+/**
+ * Timber configuration types.
+ *
+ * Extracted to a shared file so both the public entry point (index.ts)
+ * and internal plugin-context.ts can import them without circular deps.
+ */
+
+/** Configuration for client-side JavaScript output. */
+export interface ClientJavascriptConfig {
+  /** When true, no client JS bundles are emitted or referenced in HTML. */
+  disabled: boolean;
+  /**
+   * When `disabled` is true, still inject the Vite HMR client in dev mode
+   * so hot reloading works during development. Default: true.
+   */
+  enableHMRInDev?: boolean;
+}
+
+export interface TimberUserConfig {
+  output?: 'server' | 'static';
+  /**
+   * Enable timber debug logging in production builds.
+   *
+   * When `true`, timber's own diagnostics (dev warnings, verbose logging)
+   * are active even in production mode. React stays in production mode —
+   * only timber's logs are affected.
+   *
+   * Can also be enabled at runtime via the `TIMBER_DEBUG` environment variable.
+   *
+   * Default: `false`.
+   */
+  debug?: boolean;
+  /**
+   * Control client-side JavaScript output.
+   *
+   * Boolean shorthand:
+   *   `clientJavascript: false` disables all client JS (equivalent to `{ disabled: true }`).
+   *   `clientJavascript: true` enables client JS (the default).
+   *
+   * Object form:
+   *   `clientJavascript: { disabled: true, enableHMRInDev: true }` disables client JS
+   *   in production but preserves Vite HMR in dev mode.
+   *
+   * When `disabled` is true, `enableHMRInDev` defaults to `true`.
+   * Server-side JS still runs — this only affects what is sent to the browser.
+   */
+  clientJavascript?: boolean | ClientJavascriptConfig;
+  adapter?: unknown;
+  allowedOrigins?: string[];
+  csrf?: boolean;
+  limits?: {
+    actionBodySize?: string;
+    uploadBodySize?: string;
+    maxFields?: number;
+  };
+  forms?: {
+    /**
+     * Strip sensitive fields (passwords, tokens, CVV, SSN, etc.) from the
+     * `submittedValues` echoed back on validation failure.
+     *
+     * Applied to both the with-JS (`createActionClient`) and no-JS (form POST
+     * re-render) paths. Safe-by-default: the built-in deny-list is active
+     * unless you explicitly opt out.
+     *
+     * - `true` / omitted — use the built-in deny-list (default, recommended).
+     * - `false` — do not strip anything. Dev convenience only; never do this
+     *   in production — plaintext passwords end up in `defaultValue` attributes,
+     *   browser history, proxy logs, and the back-forward cache.
+     * - `string[]` — additional field names to strip, merged with the built-in list.
+     *
+     * The built-in list matches (case-insensitive, substring match on
+     * normalized names) the following patterns: password / passwd / pwd,
+     * secret, apiKey, accessToken, refreshToken, cvv, cvc, cardNumber,
+     * cardCvc, ssn, socialSecurityNumber, otp, totp, mfaCode, twoFactorCode,
+     * privateKey — plus exact match on `token` (exact-only to avoid
+     * false positives on `csrfToken`).
+     *
+     * **Function predicates are not supported at the global level** because
+     * `timber.config.ts` is JSON-serialized into the runtime config and
+     * functions cannot cross that boundary. For custom predicates, use
+     * the per-action override: `createActionClient({ stripSensitiveFields:
+     * (name) => ... })` (functions are supported at the per-action level
+     * since `createActionClient` runs in the same module graph as user code).
+     *
+     * See TIM-816.
+     */
+    stripSensitiveFields?: boolean | readonly string[];
+  };
+  pageExtensions?: string[];
+  /**
+   * Slow request threshold in milliseconds. Requests exceeding this emit
+   * a warning via the logger. Set to 0 to disable. Default: 3000.
+   *
+   * See design/17-logging.md §"slowRequestMs".
+   */
+  slowRequestMs?: number;
+  /**
+   * Render timeout in milliseconds. If an SSR render or RSC stream read
+   * does not complete within this duration, the render is aborted and
+   * the connection is closed. Protects against hung fetches and Suspense
+   * components that never resolve.
+   *
+   * Setting 0 uses a 120-second safety ceiling rather than disabling
+   * the timeout entirely.
+   * Default: 30000 (30 seconds).
+   *
+   * See design/02-rendering-pipeline.md §"Streaming Constraints".
+   */
+  renderTimeoutMs?: number;
+  /**
+   * Forward browser console output to the server terminal in dev mode.
+   *
+   * Sets the minimum log level to forward:
+   * - `'error'` — only `console.error`
+   * - `'warn'` — `console.error` + `console.warn` (default)
+   * - `'info'` — `console.error` + `console.warn` + `console.info`
+   * - `'none'` — disabled
+   *
+   * Does not intercept `console.log` or `console.debug` (too noisy).
+   * No effect in production builds.
+   *
+   * See TIM-513.
+   */
+  devBrowserLogs?: 'error' | 'warn' | 'info' | 'none';
+  /** Dev-mode options. These have no effect in production builds. */
+  dev?: {
+    /** Threshold in ms to highlight slow phases in dev logging output. Default: 200. */
+    slowPhaseMs?: number;
+  };
+  /**
+   * Control Server-Timing header output.
+   *
+   * - `'detailed'` — per-phase breakdown (proxy, middleware, render). Useful
+   *   for APM / network monitoring. Exposes phase names to clients.
+   * - `'total'` — single `total;dur=N` entry. Safe to expose, gives
+   *   browser DevTools useful timing without internal details.
+   * - `false` — no Server-Timing header at all.
+   *
+   * Default: `'detailed'` in dev, `'total'` in production.
+   *
+   * This is separate from `debug` / `TIMBER_DEBUG` — it's an intentional
+   * decision to expose timing data to clients, not a side effect of debug
+   * logging.
+   */
+  serverTiming?: 'detailed' | 'total' | false;
+  /**
+   * Build-time performance budgets. When exceeded, the build report emits
+   * a warning (does not fail the build).
+   */
+  budget?: {
+    /** Warn when any route's first-load JS (gzip) exceeds this many bytes. */
+    firstLoadJs?: number;
+  };
+  /**
+   * Override the app directory location. By default, timber auto-detects
+   * `app/` at the project root, falling back to `src/app/`.
+   *
+   * Set this to a relative path from the project root (e.g. `'src/app'`)
+   * to use a custom location.
+   */
+  appDir?: string;
+  /** MDX compilation options passed to @mdx-js/rollup. See design/20-content-collections.md. */
+  mdx?: {
+    remarkPlugins?: unknown[];
+    rehypePlugins?: unknown[];
+    recmaPlugins?: unknown[];
+    remarkRehypeOptions?: Record<string, unknown>;
+  };
+  /**
+   * Server action bound args encryption configuration.
+   *
+   * The RSC plugin encrypts closure variables captured by 'use server' functions
+   * using AES-256-GCM so they are opaque and tamper-proof in the Flight payload.
+   * Encryption is always enabled in production.
+   *
+   * The encryption key is auto-generated at build time and embedded in the server bundle,
+   * so all instances running the same build share the same key automatically.
+   * For rolling/blue-green deployments where multiple builds coexist, set
+   * `TIMBER_ACTIONS_ENCRYPTION_KEY` env var to share a key across builds.
+   *
+   * See design/08-forms-and-actions.md §"Security"
+   */
+  actionEncryption?: {
+    /**
+     * Disable encryption in dev mode for easier debugging of bound args.
+     * Has no effect in production — encryption is always enabled.
+     * Default: false (encryption is on in dev too).
+     */
+    disableInDev?: boolean;
+  };
+  /**
+   * Enable the React Compiler (babel-plugin-react-compiler) for automatic
+   * memoization of components and hooks at build time.
+   *
+   * - `true` — enable with default options
+   * - `{ compilationMode, target }` — enable with custom options
+   *   - `compilationMode: 'annotation'` — only compile files with `'use memo'`
+   *   - `target: '18'` — target React 18 (uses react-compiler-runtime package)
+   * - `false` or omitted — disabled (default)
+   *
+   * Uses `@vitejs/plugin-react`'s built-in `reactCompilerPreset`, which:
+   * - Applies Babel only for the compiler pass (OXC handles JSX)
+   * - Automatically scopes to client environment only
+   * - Uses `react/compiler-runtime` built into React 19
+   *
+   * Requires `babel-plugin-react-compiler` as a peer dependency.
+   */
+  reactCompiler?: boolean | { compilationMode?: string; target?: string };
+  /**
+   * Auto-generate sitemap.xml from the route tree.
+   *
+   * When enabled, timber walks the file-system route tree and produces a sitemap
+   * for all discoverable pages. Dynamic routes with `generateStaticSegmentParams()` are
+   * enumerated. Routes protected by `access.ts` are excluded by default.
+   *
+   * If a user-authored `sitemap.ts` or `sitemap.xml` exists at the app root,
+   * auto-generation is disabled — the user takes full control.
+   *
+   * Supports automatic pagination (sitemap index) for sites with > 50,000 URLs.
+   *
+   * See design/16-metadata.md §"Auto-generated Sitemap"
+   */
+  sitemap?: {
+    /** Must be explicitly `true` to enable auto-generation. Default: false. */
+    enabled?: boolean;
+    /** Base URL for absolute URLs in the sitemap. Required when enabled. e.g., 'https://example.com' */
+    baseUrl?: string;
+    /** Default `<changefreq>` for all entries. Optional. */
+    defaultChangeFrequency?: string;
+    /** Default `<priority>` for all entries (0.0–1.0). Optional. */
+    defaultPriority?: number;
+    /** Include routes protected by `access.ts`. Default: false. */
+    includeProtected?: boolean;
+  };
+  /**
+   * Override the build output directory.
+   *
+   * The resolved path is relative to the project root. Timber config
+   * takes precedence over Vite's `build.outDir`. If neither is set,
+   * defaults to `.timber/dist`.
+   *
+   * @example
+   * ```ts
+   * // timber.config.ts
+   * export default defineConfig({
+   *   buildDir: 'build',        // outputs to <root>/build/
+   *   buildDir: '.timber/dist', // default
+   * });
+   * ```
+   */
+  buildDir?: string;
+  /**
+   * Enable the client-side segment cache for partial navigation.
+   *
+   * When enabled, the router serializes the mounted segment tree into an
+   * `X-Timber-State-Tree` header on every client navigation. The server
+   * skips re-rendering unchanged sync layouts and sends a partial RSC
+   * payload. The client merges the partial payload with its cached segments.
+   *
+   * When disabled (the default), every navigation gets a full RSC payload.
+   *
+   * This is a performance optimization only — not a security boundary.
+   * The server always runs all `access.ts` files regardless.
+   *
+   * See design/19-client-navigation.md §"X-Timber-State-Tree Header"
+   */
+  clientSegmentCache?: boolean;
+  topLoader?: {
+    /** Whether the top-loader is enabled. Default: true. */
+    enabled?: boolean;
+    /** Bar color. Default: '#2299DD'. */
+    color?: string;
+    /** Bar height in pixels. Default: 3. */
+    height?: number;
+    /** Show subtle glow/shadow effect. Default: true. */
+    shadow?: boolean;
+    /** Delay in ms before showing the bar (avoids flash on fast navs). Default: 0. */
+    delay?: number;
+    /** CSS z-index. Default: 1600. */
+    zIndex?: number;
+  };
+}