@timber-js/app 0.2.0-alpha.163 → 0.2.0-alpha.164

package/src/server/prebuilt/key-discipline.ts

@@ -0,0 +1,53 @@
+/**
+ * Key-discipline diagnostic for cache.component (design/45 §Enforcement).
+ *
+ * Runtime-tier cached components MAY read request context, but the cache
+ * key is computed from props and segment params only — request-derived
+ * values in cached output are the data-leak danger zone (design/06
+ * security note). During a capture render the ALS store is wrapped in a
+ * transparent observing proxy; any request-context read produces a
+ * once-per-component warning.
+ */
+
+import type { RequestContextStore } from '../als-registry.js';
+
+/** Components already warned — exported so tests can reset between cases. */
+export const keyDisciplineWarned = new Set<string>();
+
+const REQUEST_CONTEXT_FIELDS: Record<string, string> = {
+  headers: 'headers()',
+  parsedCookies: 'cookies()',
+  searchParams: 'searchParams',
+};
+
+/**
+ * Wrap a store with a proxy that records per-request field access.
+ * The proxy forwards all reads/writes transparently — it only observes.
+ */
+export function createKeyDisciplineProxy(store: RequestContextStore): {
+  proxy: RequestContextStore;
+  accessedApis: Set<string>;
+} {
+  const accessedApis = new Set<string>();
+  const proxy = new Proxy(store, {
+    get(target, prop, receiver) {
+      const api = REQUEST_CONTEXT_FIELDS[prop as string];
+      if (api) accessedApis.add(api);
+      return Reflect.get(target, prop, receiver);
+    },
+  });
+  return { proxy, accessedApis };
+}
+
+export function emitKeyDisciplineWarning(id: string, apis: Set<string>): void {
+  if (keyDisciplineWarned.has(id)) return;
+  keyDisciplineWarned.add(id);
+  const apiList = Array.from(apis).join(', ');
+  console.warn(
+    `[timber] cache.component key-discipline warning: "${id}" reads ${apiList} ` +
+      `but the cache key is computed from props and segment params only. ` +
+      `If the output varies by ${apiList}, different users may see each ` +
+      `other's cached content. Either pass request-derived values as ` +
+      `props (included in the cache key) or remove the ${apiList} call.`
+  );
+}

package/src/server/prebuilt/slots.ts

@@ -0,0 +1,167 @@
+/**
+ * Slot-component helpers for cache.component (TIM-1173).
+ *
+ * A `slots: ['children', ...]` declaration caches the component's output
+ * as a shell with a stable <SlotOutlet slot={name} /> client-reference
+ * hole per declared slot prop; live slot content composes in per instance
+ * at request time via SlotsProvider/SlotContext. This generalizes the
+ * TIM-1181 layout mechanism (ChildSegmentOutlet) to explicitly declared,
+ * named slots on any cached component.
+ *
+ * Both the production wrapper (cache path) and the dev wrapper (no cache,
+ * same tree shape for dev/prod parity) build their render from these
+ * helpers. See design/45-cache-lifetimes.md §Slot Components.
+ */
+
+import { createElement } from 'react';
+
+import type { SlotValues } from '../../client/slot-context.js';
+import { ChildSegmentOutlet } from '../../client/child-segment-outlet.js';
+import { SlotOutlet } from '../../client/slot-outlet.js';
+import { SlotsProvider } from '../../client/slot-provider.js';
+import { splitSlotProps } from './cache-key.js';
+import type { PrebuiltComponentOptions } from '../prebuilt-runtime.js';
+
+/**
+ * Is this value the framework-injected `<ChildSegmentOutlet />` element?
+ * Total: the `in` probe and `.type` read run against a user-controlled
+ * value, and a Proxy trap can throw — that must classify as "not the
+ * outlet" (the canonicalizer then rejects the value as unkeyable → live
+ * render), not abort the request (codex P2 on PR #890).
+ */
+export function isChildSegmentOutletElement(value: unknown): boolean {
+  try {
+    return (
+      value != null &&
+      typeof value === 'object' &&
+      'type' in value &&
+      (value as { type: unknown }).type === ChildSegmentOutlet
+    );
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Outcome of validating a `slots` declaration at registration time.
+ *
+ * - `none` — not declared (or an empty array): plain non-slot component.
+ * - `disabled` — declared but unusable (malformed shape, or missing the
+ *   required runtime lifetime): warned once here (module load); the
+ *   component falls back WHOLESALE to non-slot semantics — the caller
+ *   strips `slots` from the options and every other option (including
+ *   `prerender`) keeps its normal meaning. Safe by construction:
+ *   element-valued props are unkeyable on the non-slot path, so renders
+ *   with slot content go live. Slower, never wrong.
+ * - `active` — usable slot names.
+ */
+export type SlotResolution = { kind: 'none' | 'disabled' } | { kind: 'active'; slots: string[] };
+
+/**
+ * Dense array of non-empty strings — no holes, no non-string entries.
+ * Total: the reads run against a user-controlled value at module load,
+ * and a throwing Proxy trap must classify as invalid, not crash startup.
+ */
+function isDenseStringArray(value: unknown): value is string[] {
+  try {
+    if (!Array.isArray(value)) return false;
+    for (let i = 0; i < value.length; i++) {
+      if (!Object.hasOwn(value, i)) return false; // sparse hole
+      const entry: unknown = value[i];
+      if (typeof entry !== 'string' || entry.length === 0) return false;
+    }
+    return true;
+  } catch {
+    return false;
+  }
+}
+
+/**
+ * Validate the `slots` option. Both the production and dev wrappers gate
+ * on this — slot substitution is active in dev exactly when it would be
+ * active in production, so the tree shape a component sees never
+ * diverges between the two.
+ */
+export function resolveSlotNames(id: string, options: PrebuiltComponentOptions): SlotResolution {
+  const slots = options.slots;
+  if (slots === undefined) return { kind: 'none' };
+  // Shape first — a non-array (null, object, …) must not reach a .length
+  // or iteration and crash module load over an option typo. Explicit
+  // index walk with Object.hasOwn: Array.prototype.every skips sparse
+  // holes, which would let `slots[1] = 'children'` on an empty array pass
+  // as active and flow an undefined slot into the shell (codex P2 on
+  // PR #890).
+  if (!isDenseStringArray(slots)) {
+    console.warn(
+      `[timber] cache.component "${id}": invalid slots declaration — expected ` +
+        `an array of non-empty prop-name strings. Slot caching is disabled.`
+    );
+    return { kind: 'disabled' };
+  }
+  if (slots.length === 0) return { kind: 'none' };
+  const hasRuntimeLifetime = options.ttl !== undefined || options.tags != null;
+  if (!hasRuntimeLifetime) {
+    console.warn(
+      `[timber] cache.component "${id}": slots require a runtime lifetime ` +
+        `(ttl and/or tags). Slot caching is disabled.`
+    );
+    return { kind: 'disabled' };
+  }
+  return { kind: 'active', slots };
+}
+
+export interface SlotRender {
+  /** Props the shell renders with: data props + a SlotOutlet per slot. */
+  shellProps: Record<string, unknown>;
+  /** Non-slot props — the only props that participate in the cache key. */
+  dataProps: Record<string, unknown>;
+  /** Live slot content, keyed by slot name, for the SlotsProvider. */
+  slotValues: Record<string, unknown>;
+}
+
+/**
+ * Split the live props into the cacheable shell render (data props plus a
+ * deterministic SlotOutlet placeholder per declared slot — identical
+ * whether or not the caller passed the slot) and the per-instance live
+ * slot values.
+ *
+ * Null when the props object itself is unkeyable at the top level
+ * (accessors, hidden properties, exotic prototype — see splitSlotProps):
+ * the caller must render live with the original props.
+ */
+export function prepareSlotRender(
+  props: Record<string, unknown>,
+  slots: readonly string[]
+): SlotRender | null {
+  const split = splitSlotProps(props ?? {}, slots);
+  if (split === null) return null;
+  const { dataProps, slotValues } = split;
+  // Spread + defineProperty, not assignment: a slot named `__proto__`
+  // must become an own property, not mutate the shell props' prototype
+  // (spread uses CreateDataProperty, so it is already safe).
+  const shellProps: Record<string, unknown> = { ...dataProps };
+  for (const slot of slots) {
+    Object.defineProperty(shellProps, slot, {
+      value: createElement(SlotOutlet, { slot }),
+      enumerable: true,
+      writable: true,
+      configurable: true,
+    });
+  }
+  return { shellProps, dataProps, slotValues };
+}
+
+/**
+ * Wrap a rendered shell (revived payload or live element) in a
+ * per-instance SlotsProvider feeding the live values to its outlets.
+ */
+export function wrapInSlotsProvider(
+  shell: unknown,
+  slotValues: Record<string, unknown>
+): React.ReactElement {
+  // children passed as a prop, not a JSX child — the shell is `unknown`
+  // to the type system. Same pattern as route-element-builder's `h` alias
+  // for ChildSegmentProvider.
+  const h = createElement as (...args: unknown[]) => React.ReactElement;
+  return h(SlotsProvider, { values: slotValues as SlotValues, children: shell });
+}

package/src/server/prebuilt-builder.ts

@@ -471,6 +471,18 @@ interface PendingEntry {
   tags: string[] | undefined;
 }
 
+function pendingToCapturedEntry(componentId: string, entry: PendingEntry): CapturedEntry {
+  const hasProps = Object.keys(entry.callSiteProps).length > 0;
+  return {
+    componentId,
+    cacheKey: entry.cacheKey,
+    params: entry.combo,
+    ...(hasProps ? { props: entry.callSiteProps } : {}),
+    bytes: entry.bytes,
+    tags: entry.tags,
+  };
+}
+
 /**
  * Capture flight payloads for every attributed, registered, prerender-tier
  * component across the route manifest. See module docblock for the flow.
@@ -685,8 +697,19 @@ export async function capturePrebuiltPayloads(
           // so a combo that reads params then fails still prevents
           // param-independent classification (codex P1 on PR #869).
           if (outcome.segmentParamsRead) {
+            const wasParamIndep = !pending.anyParamRead;
             pending.anyParamRead = true;
             provenParamIndependent.delete(proofKey);
+            // Flush buffered entries immediately — they're confirmed
+            // param-dependent and don't need to wait for the emit phase.
+            // Avoids retaining all combo payloads in memory (TIM-1179).
+            if (wasParamIndep) {
+              for (const buffered of pending.entries) {
+                await options.onEntry(pendingToCapturedEntry(componentId, buffered));
+                summary.captured++;
+              }
+              pending.entries = [];
+            }
           } else if (outcome.failure === null && !pending.anyParamRead) {
             provenParamIndependent.add(proofKey);
           }
@@ -729,42 +752,53 @@ export async function capturePrebuiltPayloads(
             continue;
           }
 
-          pending.entries.push({
-            callSiteProps,
-            cacheKey,
-            combo,
-            bytes: outcome.bytes!,
-            tags: outcome.resolvedTags,
-          });
+          // Once param-dependent is confirmed, emit directly instead of
+          // buffering — no need to hold bytes in memory (TIM-1179).
+          if (pending.anyParamRead) {
+            await options.onEntry(
+              pendingToCapturedEntry(componentId, {
+                callSiteProps,
+                cacheKey,
+                combo,
+                bytes: outcome.bytes!,
+                tags: outcome.resolvedTags,
+              })
+            );
+            summary.captured++;
+          } else {
+            pending.entries.push({
+              callSiteProps,
+              cacheKey,
+              combo,
+              bytes: outcome.bytes!,
+              tags: outcome.resolvedTags,
+            });
+          }
         }
       }
     }
   }
 
-  // Emit buffered entries. Param-independent = ALL combos rendered and
-  // NONE read segmentParams → collapse to one entry per props set (TIM-1175).
+  // Emit remaining buffered entries — only param-independent components
+  // still have entries here (param-dependent entries were emitted eagerly
+  // above, TIM-1179). Collapse to one entry per props set (TIM-1175).
   for (const [componentId, pending] of pendingByComponent) {
-    const isParamIndep = !pending.anyParamRead && pending.entries.length > 0;
-    if (isParamIndep) emittedParamIndependent.add(componentId);
-    const emittedProps = isParamIndep ? new Set<string>() : null;
+    if (pending.entries.length === 0) continue;
+    emittedParamIndependent.add(componentId);
+    const emittedProps = new Set<string>();
     for (const entry of pending.entries) {
-      if (emittedProps) {
-        const propsKey = JSON.stringify(entry.callSiteProps);
-        if (emittedProps.has(propsKey)) continue;
-        emittedProps.add(propsKey);
-      }
+      const propsKey = JSON.stringify(entry.callSiteProps);
+      if (emittedProps.has(propsKey)) continue;
+      emittedProps.add(propsKey);
       const hasProps = Object.keys(entry.callSiteProps).length > 0;
-      const finalCacheKey = isParamIndep
-        ? (computeComponentCacheKey(entry.callSiteProps, {}) ?? entry.cacheKey)
-        : entry.cacheKey;
       await options.onEntry({
         componentId,
-        cacheKey: finalCacheKey,
-        params: isParamIndep ? {} : entry.combo,
+        cacheKey: computeComponentCacheKey(entry.callSiteProps, {}) ?? entry.cacheKey,
+        params: {},
         ...(hasProps ? { props: entry.callSiteProps } : {}),
         bytes: entry.bytes,
         tags: entry.tags,
-        ...(isParamIndep ? { paramIndependent: true } : {}),
+        paramIndependent: true,
       });
       summary.captured++;
     }

package/src/server/prebuilt-runtime.ts

@@ -36,8 +36,18 @@
 import { createElement } from 'react';
 
 import { requestContextAls, type RequestContextStore } from './als-registry.js';
-import { computeComponentCacheKey, tryCanonicalize } from './prebuilt/cache-key.js';
-import { ChildSegmentOutlet } from '../client/child-segment-outlet.js';
+import { computeComponentCacheKey, splitSlotProps, tryCanonicalize } from './prebuilt/cache-key.js';
+import {
+  isChildSegmentOutletElement,
+  resolveSlotNames,
+  prepareSlotRender,
+  wrapInSlotsProvider,
+} from './prebuilt/slots.js';
+import {
+  createKeyDisciplineProxy,
+  emitKeyDisciplineWarning,
+  keyDisciplineWarned,
+} from './prebuilt/key-discipline.js';
 import {
   isCaptureActive,
   noteWrapperRender,
@@ -93,6 +103,17 @@ export interface PrebuiltComponentOptions {
   tags?: string[] | ((props: Record<string, unknown>) => string[]);
   /** Serve stale while a background re-render refreshes (design/45 §SWR). */
   staleWhileRevalidate?: boolean;
+  /**
+   * Slot props (TIM-1173): prop names whose values are live React
+   * elements composed into the cached shell at request time instead of
+   * participating in the cache. Each declared slot renders as a stable
+   * SlotOutlet client reference at capture time; the live value flows in
+   * through SlotContext per instance. Slot props are excluded from the
+   * cache key — only the remaining data props (+ segment params) hash.
+   * Runtime tier only: `prerender` is ignored (with a warning) because
+   * the build cannot enumerate children variants.
+   */
+  slots?: string[];
   /**
    * On a cache miss, render the component live (default: true). When false,
    * a miss throws instead — for sites that must never render unknown params
@@ -169,6 +190,27 @@ function resolveKeyParams(store: {
   return main;
 }
 
+/**
+ * Mirror the production cache-key decision for a slot render, with no
+ * cache IO — used by the dev wrapper so slot substitution happens in dev
+ * exactly when production would serve the cache path rather than the
+ * live fallback (dev/prod parity, codex P2 on PR #890): requires an ALS
+ * store, keyable params (slot-param divergence unkeys), and keyable data
+ * props (after the ChildSegmentOutlet strip).
+ */
+function isSlotRenderKeyable(dataProps: Record<string, unknown>): boolean {
+  const store = requestContextAls.getStore();
+  if (!store) return false;
+  const keyParams = resolveKeyParams(store);
+  if (keyParams === null) return false;
+  let keyProps = dataProps;
+  if (isChildSegmentOutletElement(keyProps.children)) {
+    const { children: _children, ...rest } = keyProps;
+    keyProps = rest;
+  }
+  return computeComponentCacheKey(keyProps, keyParams) !== null;
+}
+
 /** Wrap payload bytes as a single-chunk ReadableStream for the decoder. */
 function bytesToStream(bytes: Uint8Array): ReadableStream<Uint8Array> {
   return new ReadableStream<Uint8Array>({
@@ -184,11 +226,45 @@ function hasRuntimeLifetime(options: PrebuiltComponentOptions): boolean {
   return options.ttl !== undefined || (options.tags !== undefined && options.tags !== null);
 }
 
-/** Resolve tags from options (may be static array or function of props). */
+/**
+ * Resolve tags from options (may be static array or function of props).
+ * Function-form tags receive DATA props only — slot props are excluded so
+ * the tags fn never sees SlotOutlet placeholders (capture paths pass
+ * placeholder-substituted props) and tags stay deterministic per key.
+ */
 function resolveTags(options: PrebuiltComponentOptions, props: Record<string, unknown>): string[] {
   if (!options.tags) return [];
   if (Array.isArray(options.tags)) return options.tags;
-  return options.tags(props);
+  const slots = options.slots;
+  // The split cannot fail here — capture paths pass framework-built shell
+  // props — but stay total: fall back to the props as given.
+  const fnProps =
+    slots && slots.length > 0 ? (splitSlotProps(props, slots)?.dataProps ?? props) : props;
+  return options.tags(fnProps);
+}
+
+// ─── Slot components (TIM-1173) ──────────────────────────────────────────
+
+/**
+ * Serve a slot component from the cache: split live slot values out of the
+ * props, look up / capture the shell (data props + a deterministic
+ * SlotOutlet placeholder per slot), and wrap the revived shell in a
+ * per-instance SlotsProvider that feeds the live values to the outlets.
+ *
+ * Null on any miss — the caller renders live with the original props.
+ */
+async function tryReviveSlotShell(
+  id: string,
+  options: PrebuiltComponentOptions,
+  slots: readonly string[],
+  props: Record<string, unknown>
+): Promise<{ element: unknown } | null> {
+  const render = prepareSlotRender(props, slots);
+  if (render === null) return null; // top-level props unkeyable → live render
+  const { shellProps, dataProps, slotValues } = render;
+  const revived = await tryRevivePayload(id, options, shellProps, dataProps);
+  if (revived === null) return null;
+  return { element: wrapInSlotsProvider(revived.element, slotValues) };
 }
 
 // ─── RSC function injection ─────────────────────────────────────────────
@@ -246,48 +322,6 @@ function getCaptureTimeoutMs(): number {
   return componentTimeoutMs;
 }
 
-// ─── Key-discipline warnings (design/45 §Enforcement) ───────────────────
-
-export const keyDisciplineWarned = new Set<string>();
-
-const REQUEST_CONTEXT_FIELDS: Record<string, string> = {
-  headers: 'headers()',
-  parsedCookies: 'cookies()',
-  searchParams: 'searchParams',
-};
-
-/**
- * Wrap a store with a proxy that records per-request field access.
- * The proxy forwards all reads/writes transparently — it only observes.
- */
-function createKeyDisciplineProxy(store: RequestContextStore): {
-  proxy: RequestContextStore;
-  accessedApis: Set<string>;
-} {
-  const accessedApis = new Set<string>();
-  const proxy = new Proxy(store, {
-    get(target, prop, receiver) {
-      const api = REQUEST_CONTEXT_FIELDS[prop as string];
-      if (api) accessedApis.add(api);
-      return Reflect.get(target, prop, receiver);
-    },
-  });
-  return { proxy, accessedApis };
-}
-
-function emitKeyDisciplineWarning(id: string, apis: Set<string>): void {
-  if (keyDisciplineWarned.has(id)) return;
-  keyDisciplineWarned.add(id);
-  const apiList = Array.from(apis).join(', ');
-  console.warn(
-    `[timber] cache.component key-discipline warning: "${id}" reads ${apiList} ` +
-      `but the cache key is computed from props and segment params only. ` +
-      `If the output varies by ${apiList}, different users may see each ` +
-      `other's cached content. Either pass request-derived values as ` +
-      `props (included in the cache key) or remove the ${apiList} call.`
-  );
-}
-
 /**
  * Render a component in isolation and capture its flight payload bytes.
  * Used for inline re-renders (tombstone/miss) and SWR background re-renders.
@@ -499,7 +533,8 @@ function backgroundRerender(
 async function tryRevivePayload(
   id: string,
   options: PrebuiltComponentOptions,
-  props: Record<string, unknown>
+  props: Record<string, unknown>,
+  keyPropsOverride?: Record<string, unknown>
 ): Promise<{ element: unknown } | null> {
   const hasSource = hasPrebuiltPayloadSource();
   const hasRuntime = hasRuntimeLifetime(options);
@@ -519,19 +554,18 @@ async function tryRevivePayload(
   // are NOT stripped — they remain unkeyable so the component renders
   // live, which is correct: the cache cannot distinguish <A> from <B>.
   // See design/45-cache-lifetimes.md §Layout Propagation, TIM-1181.
+  // keyPropsOverride = slot component (TIM-1173): the wrapper already
+  // split out slot props; only data props participate in the key. The
+  // ChildSegmentOutlet strip applies to EITHER source — a cached layout
+  // declaring only named slots (slots: ['modal']) still receives the
+  // framework-injected children outlet in its data props, and it must not
+  // unkey the render there any more than on the non-slot path (codex P2
+  // on PR #890).
   const allProps = (props ?? {}) as Record<string, unknown>;
-  let keyProps: Record<string, unknown>;
-  const childrenValue = allProps.children;
-  const isChildSegmentOutlet =
-    childrenValue != null &&
-    typeof childrenValue === 'object' &&
-    'type' in childrenValue &&
-    (childrenValue as { type: unknown }).type === ChildSegmentOutlet;
-  if (isChildSegmentOutlet) {
-    const { children: _children, ...rest } = allProps;
+  let keyProps = keyPropsOverride ?? allProps;
+  if (isChildSegmentOutletElement(keyProps.children)) {
+    const { children: _children, ...rest } = keyProps;
     keyProps = rest;
-  } else {
-    keyProps = allProps;
   }
   const cacheKey = computeComponentCacheKey(keyProps, keyParams);
   if (cacheKey === null) return null;
@@ -654,6 +688,30 @@ export function __prebuilt<C extends ServerComponent>(
   component: C,
   options: PrebuiltComponentOptions = {}
 ): C {
+  // Slot resolution first, then option normalization in its terms
+  // (TIM-1173). ACTIVE slots are runtime-tier only — the build cannot
+  // enumerate slot content — so `prerender` is stripped (loudly); the
+  // capture pass reads the registry's normalized options, so stripping
+  // here also keeps the build from capturing slot components. DISABLED
+  // declarations (malformed shape, missing lifetime — warned inside
+  // resolveSlotNames) fall back wholesale to non-slot semantics: `slots`
+  // is stripped so no downstream consumer (resolveTags' slot filtering,
+  // the registry, the capture pass) ever sees the raw value, and every
+  // other option — including `prerender` — keeps its normal meaning
+  // (codex P2s on PR #890).
+  const resolution = resolveSlotNames(id, options);
+  const slots = resolution.kind === 'active' ? resolution.slots : null;
+  if (resolution.kind === 'active' && options.prerender) {
+    console.warn(
+      `[timber] cache.component "${id}": slots are runtime-tier only — ` +
+        `prerender is ignored (the build cannot enumerate slot content). ` +
+        `Use ttl/tags for the cache lifetime.`
+    );
+    options = { ...options, prerender: undefined };
+  }
+  if (resolution.kind === 'disabled') {
+    options = { ...options, slots: undefined };
+  }
   registry.set(id, { id, component, options });
 
   const wrapper = async (props: Parameters<C>[0]) => {
@@ -670,7 +728,10 @@ export function __prebuilt<C extends ServerComponent>(
       // spuriously fail the outer entry (codex P2 on PR #836).
       return createElement(component as RenderableComponent, props as Record<string, unknown>);
     }
-    const revived = await tryRevivePayload(id, options, props as Record<string, unknown>);
+
+    const revived = slots
+      ? await tryReviveSlotShell(id, options, slots, props as Record<string, unknown>)
+      : await tryRevivePayload(id, options, props as Record<string, unknown>);
     if (revived !== null) {
       return revived.element;
     }
@@ -715,14 +776,37 @@ export function getPrebuiltRegistry(): ReadonlyMap<string, PrebuiltRegistration>
 export function __prebuiltDev<C extends ServerComponent>(
   name: string,
   component: C,
-  _options?: PrebuiltComponentOptions
+  options: PrebuiltComponentOptions = {}
 ): C {
+  // Dev/prod parity for slot components: in production a slot component
+  // ALWAYS receives a SlotOutlet element for each declared slot (never the
+  // live children), so a component that introspects a slot prop would
+  // behave differently between dev and prod if dev passed children
+  // through. Dev renders the same tree shape — outlets in the props,
+  // live values via SlotsProvider — just without any caching. The same
+  // validation applies (including the lifetime requirement): slots are
+  // active in dev exactly when they would be active in production.
+  const resolution = resolveSlotNames(name, options);
+  const slots = resolution.kind === 'active' ? resolution.slots : null;
   let logged = false;
   const wrapper = (props: Parameters<C>[0]) => {
     if (!logged) {
       logged = true;
       console.log(`[timber] cache.component: "${name}" — rendering dynamically (dev mode)`);
     }
+    if (slots) {
+      const render = prepareSlotRender(props as Record<string, unknown>, slots);
+      // Substitute outlets only when PRODUCTION would: top-level props
+      // splittable AND the data props keyable. Unkeyable inputs render
+      // live with the original props there, so dev must too (parity —
+      // codex P2 on PR #890).
+      if (render !== null && isSlotRenderKeyable(render.dataProps)) {
+        return wrapInSlotsProvider(
+          createElement(component as RenderableComponent, render.shellProps),
+          render.slotValues
+        );
+      }
+    }
     // Element, not a direct call — same dispatcher reasoning as the
     // production wrapper's live fallback.
     return createElement(component as RenderableComponent, props as Record<string, unknown>);