sygnal 6.4.0 → 6.6.0

package/src/extra/diagnostics/checks/next.ts

@@ -66,6 +66,21 @@ function removed(component: any, name: string, anchor: string, detail?: string):
   })
 }
 
+/**
+ * SYG428 (6.5.0): `state="a.b"` / `from="a.b"` is a path, read as `state.a.b`. Before 6.5.0 it was
+ * one key named "a.b"; when the owner's state still has such a key, the designator now misses it.
+ */
+function dottedKey(f: any, what: string, designator: any, ownerState: any): void {
+  if (typeof designator != 'string' || !/[.[]/.test(designator) || !isPlainObject(ownerState)) return
+  if (!Object.prototype.hasOwnProperty.call(ownerState, designator) || !once(`SYG428:${f.name}:${designator}`)) return
+  devReport('SYG428', {
+    component: f.name,
+    message: `${what}="${designator}" is a path (since 6.5.0), read as ${designator.replace(/\[(\d+)\]/g, '.$1').split('.').map((k: string) => `[${JSON.stringify(k)}]`).join('')}, but the state has a key named "${designator}"`,
+    fix: `Rename the key so it has no dot (and point ${what} at it), or use a lens: ${what}={{ get: (s) => s['${designator}'], set: (s, v) => ({ ...s, '${designator}': v }) }}`,
+    data: {designator, what},
+  })
+}
+
 /** SYG427: CHILD.select(x) with no component (an import of a name the module doesn't export) */
 function notComponent(f: any, x: any): void {
   if (!once(`SYG427:${f.name}`)) return
@@ -373,11 +388,16 @@ export function nextHooks(_api: any): any {
   // G-527: one chain of SYG149 checks over the latest patches (G-501: it stops once every instance
   // that renders a named Collection is disposed, the app's dispose included)
   const vtCheck = vtChecker(() => vtp.size && on())
+  // SYG428: the live instances by id, to read a child's parent state
+  const live = new Map<any, any>()
   return {
     onCreate(iv: any) {
+      live.set(iv.id, iv)
       if (!on()) return
       log.onCreate(iv)
       const f = fac(iv)
+      const parent = live.get(iv.parentId)
+      if (parent) dottedKey(f, `<${f.name} state`, iv.props?.state, parent.state)
       removedStatics(f)
       if (!iv.def.intent) wire(iv, [])
     },
@@ -418,6 +438,7 @@ export function nextHooks(_api: any): any {
     },
     onDispose(iv: any) {
       vtp.delete(iv)
+      live.delete(iv.id)
       H.onDispose(fac(iv))
     },
     onAction(iv: any, a: any) { log.onAction(iv, a) },
@@ -451,6 +472,7 @@ export function nextHooks(_api: any): any {
         if (w.length) removed(f, f.name, 'collection-wrapper', w.map(k => k == 'dataset' ? 'data-*' : k == 'hook' ? 'ref / hook' : k).join(', '))
       }
       try { checkCollection(f, {data: {props}}) } catch (_) { /* ignore */ }
+      dottedKey(f, `<${sel == 'collection' ? 'Collection' : 'VirtualCollection'} from`, props.from, owner.state)
       // G-419: SYG148 for a prefix that isn't an identifier; a valid one is checked for
       // duplicate names after each patch (SYG149). G-460: a falsy one names nothing (as the host)
       const p = props.viewTransitionName

package/src/extra/diagnostics/checks/public.d.ts

@@ -96,9 +96,23 @@ export function getCodeInfo(code: string): DiagnosticCodeInfo | undefined
 
 /** How an action is dispatched. */
 /** 'agent' (static, PLAN-6 K-1): only the component's `agent` declaration dispatches it */
-export type InspectActionTrigger = 'intent' | 'next' | 'reply' | 'builtin' | 'agent' | 'unknown'
+/**
+ * 'behavior' (static, PLAN-10 A-8): a `uses` entry's action nothing else triggers that the behavior
+ * may dispatch itself where the checker can't list it (a package behavior, an open model, ...)
+ */
+export type InspectActionTrigger = 'intent' | 'next' | 'reply' | 'builtin' | 'agent' | 'behavior' | 'unknown'
 
-export interface InspectAction {
+/**
+ * PLAN-10 A-4 (static only): a source position, 1-based. `file` (relative to the working
+ * directory) only when it isn't the component's file.
+ */
+export interface InspectLocation {
+  line: number
+  column: number
+  file?: string
+}
+
+export interface InspectAction extends Partial<InspectLocation> {
   name: string
   /**
    * 'intent': returned by the component's intent. 'builtin': BOOTSTRAP,
@@ -112,18 +126,56 @@ export interface InspectAction {
   trigger: InspectActionTrigger
   /** sinks of the model entry (STATE, EVENTS, EFFECT, PARENT, custom drivers); [] without a model entry */
   sinks: string[]
+  /** the `uses` key of the behavior that owns it ('pager' for 'pager.NEXT') */
+  behavior?: string
+  /** static, PLAN-10 A-4: the model entry (line/column on the action: the intent property, else this) */
+  modelAt?: InspectLocation
+  /**
+   * static, PLAN-10 A-7 (actions with a STATE sink only): the top-level state keys the STATE
+   * reducer(s) may write (a behavior's: its slice); [] when it never changes state; null when unknown
+   */
+  writes?: string[] | null
+  /** static, PLAN-10 A-7: a STATE reducer may return undefined (removes a Collection item) */
+  removes?: true
 }
 
-export interface InspectChild {
+export interface InspectChild extends Partial<InspectLocation> {
   name: string
-  via: 'tag' | 'collection' | 'switchable' | 'slot'
+  /**
+   * 'layout' (static, PLAN-10 A-9): Vike's shell, a +Wrapper / +Layout rendering the next +Layout in
+   * or a +Page it applies to (Wrapper(s) > Layout(s) > Page); no location (no JSX site)
+   */
+  via: 'tag' | 'collection' | 'switchable' | 'slot' | 'layout'
   /** Collection: the `from` state field, when known */
   from?: string | null
   /** runtime: number of live instances behind this entry (e.g. Collection items) */
   count?: number
+  /** runtime, PLAN-10 D522: the ids of those instances */
+  ids?: string[]
+  /**
+   * static, PLAN-10 A-3: the id of the component it renders (resolved through the import); null when
+   * it isn't in the graph (a package, a widget, a file not scanned, a dynamic value)
+   */
+  id?: string | null
+  /** static, PLAN-10 A-1: a literal `state` lens (`<Greeting state="host" />`) */
+  state?: string
+  /** static, PLAN-10 A-2: the package the tag is imported from ('sygnal/ui') */
+  external?: string
+  /** static, PLAN-10 A-2: a widget tag (defineWidget, fromZag, fromReact, the sygnal/ui Zag parts) */
+  widget?: true
 }
 
-export interface InspectSelector {
+/** PLAN-10 A-5 (static): a CHILD.select(Child) call in an intent */
+export interface InspectChildSelect extends InspectLocation {
+  /** the selected component's name as written */
+  child: string | null
+  /** its id; null when it isn't in the graph */
+  id: string | null
+  /** the intent actions whose stream contains the call (the receivers of the child's PARENT sink) */
+  actions: string[]
+}
+
+export interface InspectSelector extends Partial<InspectLocation> {
   /** CSS selector passed to DOM.select() (chained selects joined with a space) */
   selector: string
   /** event types listened to; null when unknown (runtime, real DOM) */
@@ -139,10 +191,12 @@ export interface InspectSelector {
   isolationHit: string | null
   /** PLAN-4 CT-1: the control this selector is (its key), when it is `[data-control="<Key>"]` */
   control?: string
+  /** the `uses` key of the behavior that listens to it */
+  behavior?: string
 }
 
 /** PLAN-4 CT-1: a control (controls()) a component renders */
-export interface InspectControl {
+export interface InspectControl extends Partial<InspectLocation> {
   /** the control's key (rendered as data-control="<name>") */
   name: string
   /** the intrinsic tag of a tag spec; null for a spec object */
@@ -157,10 +211,14 @@ export interface InspectDiagnostic {
   code: string
   severity: DiagnosticSeverity
   component?: string
+  /** static, PLAN-10 A-3: the id of the component it is attached to */
+  componentId?: string
   message: string
   fix?: string
   docsUrl?: string
   data?: any
+  /** runtime only: when it was reported (ms since the epoch; each is reported once per process) */
+  timestamp?: number
   /** static only */
   file?: string
   line?: number
@@ -215,6 +273,12 @@ export interface InspectComponent {
   name: string
   /** runtime: instance number (as a string); static: 'file:line' of the definition */
   id: string
+  /**
+   * static, PLAN-10 D521: 'file#name', stable when lines move (hosts key selection and positions by it);
+   * a second component of the same name in one file gets 'file#name#2', and so on. Runtime (PLAN-10 P-2,
+   * D544): the same key when sygnal/vite's dev server stamped the component function, else absent
+   */
+  key?: string
   /** runtime: the parent instance's id; static: null (see the parents' `children`) */
   parentId: string | null
   /** static only: source file, relative to the working directory */
@@ -224,6 +288,32 @@ export interface InspectComponent {
    * component renders it, else how it is first rendered
    */
   kind: 'root' | 'child' | 'collection-item' | 'switchable'
+  /** PLAN-10 A-1 / D522: rendered as a component (or started as an entry) but has no statics */
+  viewOnly?: true
+  /**
+   * static, PLAN-10 A-6: started by run(), defineElement() or a Vike +Page / +Layout / +Wrapper; 'unknown' on the
+   * other roots when an entry call's component can't be resolved (picked at run time).
+   * runtime (D522): true on an app's root instance
+   */
+  entry?: true | 'unknown'
+  /**
+   * static, Vike only (PLAN-10 A-9): on a +Page's component its route ('/orders/@id': from the
+   * filesystem, or the literal string a +route file / the config's `route` sets); null for a Route
+   * Function or a route the checker can't read (with `routeDynamic`) and for _error/+Page. On a
+   * +Layout's / +Wrapper's: the URL prefix of the directory it applies to
+   */
+  route?: string | null
+  /**
+   * static, Vike only (PLAN-10 A-9): every route of a component several +Page files export (`route` is
+   * the first, in path order; null for a dynamic one or the error page); omitted otherwise
+   */
+  routes?: (string | null)[]
+  /** static, Vike only (PLAN-10 A-9): the route is a Route Function or can't be read (route: null) */
+  routeDynamic?: true
+  /** runtime, PLAN-10 D522: the app (run()) it belongs to: its root's index among the live roots, oldest first */
+  app?: number
+  /** runtime, PLAN-10 D522: false on a hidden Switchable page and below it; omitted when shown */
+  shown?: false
   actions: InspectAction[]
   /** state keys (runtime: current state; static: initialState) */
   stateKeys: string[]
@@ -231,14 +321,27 @@ export interface InspectComponent {
   calculated: string[]
   /** context fields this component provides (Component.context) */
   contextProvides: string[]
-  /** context fields its view reads (static only; null at runtime) */
+  /** context fields its view reads (static: the view source; runtime, D530: what its latest render read) */
   contextConsumes?: string[] | null
+  /**
+   * static, PLAN-10 A-7: top-level state keys the view (and its child lenses, calculated and
+   * context functions) reads literally; omitted when none
+   */
+  stateReads?: string[]
+  /** static, PLAN-10 A-7: stateReads may be incomplete (the state used whole somewhere) */
+  stateReadsPartial?: true
   /** EVENTS types this component emits */
   eventsEmitted: string[]
   /** EVENTS types this component selects ('*' = EVENTS.select() without a type) */
   eventsSelected: string[]
   children: InspectChild[]
   selectors: InspectSelector[]
+  /** static, PLAN-10 A-4: where the `context` static's entries are */
+  contextEntries?: Array<InspectLocation & { name: string }>
+  /** static, PLAN-10 A-4: the EVENTS emit and select sites of its intent and model */
+  eventSites?: Array<InspectLocation & { type: string; role: 'emit' | 'select' }>
+  /** static, PLAN-10 A-5: CHILD.select(Child) in its intent */
+  childSelects?: InspectChildSelect[]
   /** PLAN-4 CT-1: the controls it renders (runtime: seen in its renders); omitted when none */
   controls?: InspectControl[]
   /** static only, PLAN-4 GS-2 (G-224): the element commands (ELEMENT sink) its model sends; omitted when none */
@@ -253,7 +356,7 @@ export interface InspectComponent {
 }
 
 /** PLAN-4 GS-2: an element command a model entry sends (static inspect, sygnal-check --graph) */
-export interface InspectCommand {
+export interface InspectCommand extends Partial<InspectLocation> {
   /** the model entry that sends it */
   action: string
   /** the command's method (its first key) */
@@ -275,13 +378,15 @@ export interface InspectAgent {
   description: string | null
   /** the declaration has a read projection */
   read: boolean
-  actions: Array<{ name: string; consequential: boolean; input: boolean }>
+  actions: Array<{ name: string; consequential: boolean; input: boolean } & Partial<InspectLocation>>
+  /** the read-only `agent.queries` tools; omitted when none */
+  queries?: Array<{ name: string; input: boolean } & Partial<InspectLocation>>
   /** spreads: what is listed may be incomplete */
   partial?: true
 }
 
 /** PLAN-4 GS-7: a literal timer spec of a `timers` static (static inspect, sygnal-check --graph) */
-export interface InspectTimer {
+export interface InspectTimer extends Partial<InspectLocation> {
   name: string
   every?: number | null
   after?: number | null
@@ -316,8 +421,12 @@ export interface InspectGraph {
   /** which implementation produced the graph */
   source?: 'runtime' | 'static'
   components: InspectComponent[]
-  /** EVENTS bus: type -> names of the components that emit / select it */
-  events: Record<string, { emitters: string[]; selectors: string[] }>
+  /**
+   * EVENTS bus: type -> names of the components that emit / select it (each name once); emitterIds /
+   * selectorIds (PLAN-10 A-3, D522, D528): the id of every such component (static) or instance
+   * (runtime), not parallel to the names
+   */
+  events: Record<string, { emitters: string[]; selectors: string[]; emitterIds?: string[]; selectorIds?: string[] }>
   /** diagnostics not tied to a listed component */
   diagnostics: InspectDiagnostic[]
   /** runtime, PLAN-3 5-3: makeFetchDriver cache entries, by sink name (empty when no cache) */

package/src/extra/diagnostics/codes.ts

@@ -152,6 +152,9 @@ export const CODE_TITLES: Record<string, string> = {
   SYG127: 'Behavior collision or unresolvable uses entry',
   SYG128: 'Duplicate control key',
   SYG129: "CHILD.select() of a component this one doesn't render",
+  // PLAN-10 X-1 (D512): graph-wide checks, static only (sygnal-check)
+  SYG170: 'Context field read with no provider',
+  SYG171: 'PARENT sink no parent reads',
   SYG112: 'Reply action has no model entry',
   SYG130: 'href() names no route or leaves out a param',
   SYG131: 'Route params the pattern does not use',
@@ -281,6 +284,8 @@ export const CODE_TITLES: Record<string, string> = {
   // checks/next.ts and sygnal-check: a component reference that is not a function (an import of
   // a name the module doesn't export is undefined under Vitest)
   SYG427: 'CHILD.select() of something that is not a component',
+  // 6.5.0 (checks/next.ts): state="a.b" / from="a.b" is a path; the parent state has a literal "a.b" key
+  SYG428: 'A state path that names a key containing a dot',
   // PLAN-9 (D470): checks/next.ts; dev entry
   SYG453: 'Two children with the same identity share one instance',
   SYG601: "Retired in 6.0: Missing or invalid sources",
@@ -425,6 +430,9 @@ export const DEV_CODE_SEVERITY: Record<string, DiagnosticSeverity> = {
   SYG128: 'error',
   // PLAN-4 4-G2: static only (sygnal-check); listed so the entry knows its title
   SYG129: 'warn',
+  // PLAN-10 X-1: static only (sygnal-check)
+  SYG170: 'warn',
+  SYG171: 'warn',
   SYG221: 'error',
   // PLAN-4 GS-4 (state.ts)
   SYG222: 'warn',
@@ -491,6 +499,8 @@ export const DEV_CODE_SEVERITY: Record<string, DiagnosticSeverity> = {
   SYG426: 'warn',
   // checks/next.ts: CHILD.select(undefined), usually a missing export
   SYG427: 'error',
+  // checks/next.ts: a path designator that 6.4 read as one key with a dot
+  SYG428: 'warn',
   // PLAN-9 (checks/next.ts): D470 key identity, two children with one identity
   SYG453: 'warn',
   SYG612: 'error',

package/src/index.d.ts

@@ -59,7 +59,9 @@ export type ViewProps<STATE = any, PROPS = {}, CONTEXT = {}> =
 
 /**
  * The `state` prop a parent passes to a sub-component in JSX: the name of a field of the
- * parent's state (`state="editor"`) or a lens. Without it the child shares the parent's state.
+ * parent's state (`state="editor"`), a path to nested state (`state="settings.rules"`,
+ * `state="boards[0].title"`; since 6.5.0: a write copies only the levels on the path), or a
+ * lens. Without it the child shares the parent's state.
  */
 export type StateProp = string | Lense<any, any>
 
@@ -1574,13 +1576,25 @@ export type ArrayKeysOf<STATE> = {
   [KEY in keyof STATE]-?: NonNullable<STATE[KEY]> extends ReadonlyArray<any> ? KEY : never
 }[keyof STATE] & string
 
+/**
+ * Array-valued keys of STATE and dotted paths to arrays in its nested objects, up to three levels
+ * (`'tasks' | 'board.cards'`; since 6.5.0). Paths through array positions (`'boards.0.cards'`)
+ * aren't listed: for a list item, use `byId`.
+ */
+export type ArrayPathsOf<STATE, DEPTH extends unknown[] = []> = DEPTH['length'] extends 3 ? never : {
+  [KEY in keyof STATE & string]-?: NonNullable<STATE[KEY]> extends ReadonlyArray<any> ? KEY
+    : NonNullable<STATE[KEY]> extends Record<string, any> ? `${KEY}.${ArrayPathsOf<NonNullable<STATE[KEY]>, [...DEPTH, 1]>}`
+    : never
+}[keyof STATE & string]
+
 /**
  * Valid `from` values for a Collection: any string or Lense while the parent STATE is unknown
- * (`any`); otherwise an array-valued key of STATE or a Lense over STATE.
+ * (`any`); otherwise an array-valued key of STATE, a dotted path to one (`'board.cards'`), or a
+ * Lense over STATE.
  */
 export type CollectionFrom<STATE = any> = 0 extends (1 & STATE)
   ? string | Lense
-  : ArrayKeysOf<STATE> | Lense<STATE, any>
+  : ArrayPathsOf<STATE> | Lense<STATE, any>
 
 /**
  * Collection props. Pass the parent component's state type as STATE to type-check `from`:
@@ -1797,6 +1811,8 @@ export type {
   InspectRecentAction,
   InspectCommand,
   InspectTimer,
+  InspectLocation,
+  InspectChildSelect,
 } from './extra/diagnostics/checks/public'
 
 /**

package/src/vike/onRenderClient.ts

@@ -13,12 +13,16 @@
  * - Wrappers are outermost (context providers, state management)
  * - Layouts are inside wrappers (visual structure, navigation chrome)
  * - Page is innermost (route-specific content, swapped on navigation)
+ * Cumulative Layouts / Wrappers nest the root's outermost (G-803, see shell.ts). Navigating to a
+ * page with another shell (pages/admin/+Layout) keeps the shell components both pages share
+ * mounted, from the outside in, and adds or removes the rest.
  */
 
 // Import from the package entry so rollup externalizes it
 // @ts-ignore — resolved at runtime via package exports
 import { run } from 'sygnal'
 import { owned } from '../extra/owned'
+import { shellOf, uidPart, type ShellPart } from './shell'
 
 declare global {
   interface Window {
@@ -47,6 +51,8 @@ interface PageContext {
 
 /** Track the running Sygnal app for disposal on navigation */
 let currentApp: { sources: any; sinks: any; dispose: () => void } | null = null
+/** G-803: the running shell, outermost first (read by the wrapper's view); null: an app without one */
+let currentShell: ShellPart[] | null = null
 
 /**
  * Mutable references read by the wrapper's view function.
@@ -59,16 +65,6 @@ let currentRouteParams: any = {}
 let currentUrlPathname: string = ''
 let pageNavCounter: number = 0
 
-/**
- * PLAN-4 G-207: the uid() path part of a shell component or the Page: wrapper_0 → 'w0',
- * layout_1 → 'l1', page → 'p'. Given as the nested vnode's `id` prop, so the Page's uid is
- * 'u-w0-l0-p' however the shell nests it; onRenderHtml renders each one with the same root
- * (renderToString's `uid`), so server and client ids match. (Same helper in onRenderHtml.ts.)
- */
-function uidPart(key: string): string {
-  return key == 'page' ? 'p' : key[0] + key.slice(key.indexOf('_') + 1)
-}
-
 /**
  * PLAN-4.6 R4 (04 §3.11): the core instantiates a component from the vnode's `data.c`, a
  * component function, and reads its statics there (no options object). A shell component or a
@@ -143,11 +139,11 @@ function pageChildVNode(pageState: any, stateField: any = 'page'): any {
  *
  * Nesting order: Wrapper(s) > Layout(s) > Page
  *
- * The wrapper's view reads `currentPage` from the mutable closure, so
- * on client-side navigation only the Page sub-component changes while
- * the Layout and Wrapper stay mounted with their state preserved.
+ * The wrapper's view reads `currentPage` and `currentShell` from the mutable closure, so
+ * on client-side navigation only the Page sub-component (and the shell components the new page
+ * doesn't share) change while the Layout and Wrapper stay mounted with their state preserved.
  */
-function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
+function createLayoutWrapper(Page: any): any {
   currentPage = Page
   currentPageName = Page.componentName || Page.name || 'VikePageComponent'
 
@@ -158,9 +154,6 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
   // one (and the Page) gets a { get, set } lens onto its own ROOT slice: an outer component's
   // reducer replacing its state can't wipe the inner slices (R2-2), and no view sees another
   // component's slice.
-  const keys = shellKeys(wrappers, layouts)
-  const shell = [...wrappers, ...layouts].map((comp: any, i: number) => ({ comp, key: keys[i] }))
-
   // The latest root state. Only the outermost lens gets the root itself; the nested lenses get
   // their parent shell component's state. In both directions the outermost lens runs first and
   // synchronously (state: root -> outer get -> inner get; a reducer: outer get, inner get, inner
@@ -180,10 +173,13 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
       return outermost ? root : { ...state }
     },
   })
-  const lenses = keys.map((key, i) => rootLens(key, i === 0, true))
+  // one lens per key and place (outermost or not), the same object on every render
+  const lenses: Record<string, any> = {}
+  const lensOf = (key: string, outermost: boolean) => (lenses[key + outermost] ||= rootLens(key, outermost, true))
   const pageLens = rootLens('page', false, false)
 
   function LayoutWrapperView({ state }: any) {
+    const shell = currentShell || []
     if (shell.length === 0) {
       // No wrappers or layouts — render Page directly
       return pageChildVNode(state.page)
@@ -193,14 +189,14 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
     let inner: any = componentVNode(
       shell[lastIdx].comp,
       shell[lastIdx].key,
-      lenses[lastIdx],
+      lensOf(shell[lastIdx].key, lastIdx === 0),
       [pageChildVNode(state.page, pageLens)],
       state[shell[lastIdx].key]
     )
 
     // Wrap with outer shell components
     for (let i = lastIdx - 1; i >= 0; i--) {
-      inner = componentVNode(shell[i].comp, shell[i].key, lenses[i], [inner], state[shell[i].key])
+      inner = componentVNode(shell[i].comp, shell[i].key, lensOf(shell[i].key, i === 0), [inner], state[shell[i].key])
     }
 
     // Wrap in a plain div so the view returns a regular DOM vnode.
@@ -223,6 +219,7 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
   // The wrapper's initial state: a sibling slice for each shell component and the Page.
   // Must match onRenderHtml's serialized state.
   const initialState: any = {}
+  const shell = currentShell || []
   shell.forEach(({ comp, key }: any) => { initialState[key] = { ...(comp.initialState || {}) } })
   initialState.page = Page.initialState || {}
   // G-275: owned (built from the hydrated state and pageContext.data: never frozen in dev)
@@ -250,33 +247,18 @@ function createLayoutWrapper(wrappers: any[], layouts: any[], Page: any): any {
   return LayoutWrapperView
 }
 
-/** State keys of the shell components, outermost first: wrapper_0, ..., layout_0, ... */
-function shellKeys(wrappers: any[], layouts: any[]): string[] {
-  return [
-    ...wrappers.map((_: any, i: number) => 'wrapper_' + i),
-    ...layouts.map((_: any, i: number) => 'layout_' + i),
-  ]
-}
-
-/**
- * Normalize a cumulative config value into an array of functions.
- */
-function toComponentArray(val: any): any[] {
-  if (!val) return []
-  return (Array.isArray(val) ? val : [val]).filter((c: any) => typeof c === 'function')
-}
-
 export function onRenderClient(pageContext: PageContext) {
   const { Page, config } = pageContext
   const data = pageContext.data || {}
 
-  const wrappers = toComponentArray(config.Wrapper)
-  const layouts = toComponentArray(config.Layout)
-  const hasShell = wrappers.length > 0 || layouts.length > 0
+  // The shell, outermost first (G-803: Vike lists cumulative configs closest first); the state
+  // slices of its components and the Page's are siblings at the root (D50)
+  const parts = shellOf(config)
+  const hasShell = parts.length > 0
+  const shell = parts.map(p => p.key)
 
-  // The shell is wrappers (outermost) + layouts; their state slices and the Page's are
-  // siblings at the root (D50).
-  const shell = shellKeys(wrappers, layouts)
+  // a shell page after a page without one (or the reverse, below): a new app
+  if (hasShell && currentApp && !currentShell) { currentApp.dispose(); currentApp = null }
 
   // PLAN-3 5-5 (H-7): seed the caches of the fetch drivers (makeFetchDriver({ cache: queryCache() })
   // exposes it as driver.cache) before the page renders, so its resources start at 'success'
@@ -304,8 +286,22 @@ export function onRenderClient(pageContext: PageContext) {
       pageNavCounter++
 
       const newPageState = { ...(Page.initialState || {}), ...data }
-      // replace the page slice, keeping every shell slice (G-106, D50)
-      const swapPage = (state: any) => ({ ...state, page: newPageState })
+      // replace the page slice, keeping every shell slice (G-106, D50). G-803: a page with another
+      // shell keeps the slices of the components it shares at the same place (key) and starts the
+      // others from their initialState
+      const old = currentShell!
+      const same = parts.length === old.length && parts.every((p, i) => p.comp === old[i].comp)
+      let swapPage = (state: any) => ({ ...state, page: newPageState })
+      if (!same) {
+        currentShell = parts
+        swapPage = (state: any) => {
+          const next: any = { page: newPageState }
+          for (const { comp, key } of parts) {
+            next[key] = old.some(o => o.key === key && o.comp === comp) ? state[key] : { ...(comp.initialState || {}) }
+          }
+          return next
+        }
+      }
       // (PLAN-4.6 core: through the runtime API, 04 §3.11)
       const rt = (currentApp as any).__runtime
       rt?.setState('root', swapPage)
@@ -322,7 +318,7 @@ export function onRenderClient(pageContext: PageContext) {
       if (initialState && initialState[shell[shell.length - 1]] !== undefined) {
         // Hydrated shell state: sibling slices (D50), or the 5.4.0 shape with the Page state
         // under the innermost shell slice (R2-9) — distribute the slices to each component
-        const allShellComps = [...wrappers, ...layouts]
+        const allShellComps = parts.map(p => p.comp)
         let pageState = initialState.page
         shell.forEach((key: string, i: number) => {
           let slice = initialState[key]
@@ -348,7 +344,8 @@ export function onRenderClient(pageContext: PageContext) {
         urlPathname: () => currentUrlPathname,
       }
 
-      const Component = createLayoutWrapper(wrappers, layouts, Page)
+      currentShell = parts
+      const Component = createLayoutWrapper(Page)
 
       try {
         // 3-B2: `__vike` marks the shell's components (Page, Layouts, Wrappers: sub-components of
@@ -372,6 +369,7 @@ export function onRenderClient(pageContext: PageContext) {
       currentApp.dispose()
       currentApp = null
     }
+    currentShell = null
 
     let initialState: any
     // 3-B2: the server's state is here when the page hydrates its HTML

package/src/vike/onRenderHtml.ts

@@ -16,6 +16,7 @@
 
 // @ts-ignore — resolved at runtime via package exports
 import { renderToString, renderHead, queryCache } from 'sygnal'
+import { shellOf, uidPart } from './shell'
 
 interface PageContext {
   Page: any
@@ -54,16 +55,6 @@ function esc(str: string): string {
     .replace(/"/g, '"')
 }
 
-/**
- * PLAN-4 G-207: the uid() path part of a shell component or the Page (wrapper_0 → 'w0',
- * layout_1 → 'l1', page → 'p'), as onRenderClient gives each nested vnode in its `id` prop. Each
- * one renders here as its own root, so its root is 'u' plus the parts of the shell around it and
- * its own: the same uids as the client's nested instances.
- */
-function uidPart(key: string): string {
-  return key == 'page' ? 'p' : key[0] + key.slice(key.indexOf('_') + 1)
-}
-
 export function onRenderHtml(pageContext: PageContext) {
   const { Page, config } = pageContext
   const data = pageContext.data || {}
@@ -128,22 +119,10 @@ export function onRenderHtml(pageContext: PageContext) {
   // PLAN-3 5-5 (H-7): the seeded cache the components' resources render from
   const cache = pageContext.queryCache ? queryCache({ initial: pageContext.queryCache }) : undefined
 
-  // Determine if Wrapper(s) and/or Layout(s) are present — this affects hydration state shape
-  const wrapperArray = config.Wrapper
-    ? (Array.isArray(config.Wrapper) ? config.Wrapper : [config.Wrapper])
-        .filter((W: any) => typeof W === 'function')
-    : []
-  const layoutArray = config.Layout
-    ? (Array.isArray(config.Layout) ? config.Layout : [config.Layout])
-        .filter((L: any) => typeof L === 'function')
-    : []
-  const hasShell = wrapperArray.length > 0 || layoutArray.length > 0
-  // Combined shell: wrappers (outermost) + layouts (innermost around Page)
-  // Must match the order used in onRenderClient's createLayoutWrapper.
-  const shell = [
-    ...wrapperArray.map((w: any, i: number) => ({ comp: w, key: 'wrapper_' + i })),
-    ...layoutArray.map((l: any, i: number) => ({ comp: l, key: 'layout_' + i })),
-  ]
+  // Wrapper(s) and/or Layout(s), outermost first (G-803: Vike lists them closest first; shellOf
+  // reverses them, the same order as onRenderClient's): they decide the hydration state's shape
+  const shell = shellOf(config)
+  const hasShell = shell.length > 0
   // G-207: with a shell, the client nests each shell component and the Page in the one outside it
   // with an `id` prop (onRenderClient), so their uid roots are 'u-w0', 'u-w0-l0', 'u-w0-l0-p'
   const uidRoot = (i: number) => ['u', ...shell.slice(0, i + 1).map(s => uidPart(s.key))].join('-')

package/src/vike/shell.ts

@@ -0,0 +1,33 @@
+/**
+ * G-803: the shell components of a page (its Wrappers and Layouts), outermost first, with their
+ * state keys. Shared by onRenderHtml and onRenderClient so the server and the client nest them
+ * the same way.
+ *
+ * Vike's cumulative configs (`Layout` and `Wrapper` are, see +config.ts) list the values closest
+ * to the page first: pages/admin/+Layout before pages/+Layout (vike's resolveVikeConfigInternal:
+ * sortAfterInheritanceOrder puts the longer inheritance root first). So the root's come last, and
+ * the shell reverses each list: every Wrapper outside every Layout (as vike-react), and within each
+ * the root's outermost. Keys count from the outside in (wrapper_0, ..., layout_0, ...), so a root
+ * Layout keeps `layout_0` on every page, nested or not.
+ */
+export interface ShellPart { comp: any; key: string }
+
+const comps = (val: any): any[] =>
+  (val ? (Array.isArray(val) ? val : [val]) : []).filter((c: any) => typeof c === 'function')
+
+export function shellOf(config: { Wrapper?: any; Layout?: any }): ShellPart[] {
+  return [
+    ...comps(config.Wrapper).reverse().map((comp, i) => ({ comp, key: 'wrapper_' + i })),
+    ...comps(config.Layout).reverse().map((comp, i) => ({ comp, key: 'layout_' + i })),
+  ]
+}
+
+/**
+ * PLAN-4 G-207: the uid() path part of a shell component or the Page: wrapper_0 → 'w0',
+ * layout_1 → 'l1', page → 'p'. onRenderClient gives it as the nested vnode's `id` prop, so the
+ * Page's uid is 'u-w0-l0-p' however the shell nests it; onRenderHtml renders each one with the
+ * same root (renderToString's `uid`), so server and client ids match.
+ */
+export function uidPart(key: string): string {
+  return key == 'page' ? 'p' : key[0] + key.slice(key.indexOf('_') + 1)
+}