sygnal 6.5.0 → 7.0.0

package/src/ui/tooltips.ts

@@ -0,0 +1,92 @@
+/*
+ * PLAN-11 T-1: Tooltips, one behavior for every tooltip of a component (glossary terms in a
+ * paragraph, icon buttons in a toolbar): one state slice and two timers however many triggers
+ * there are, instead of a tooltip() per trigger.
+ *
+ *   Article.uses = { tips: tooltips({ trigger: '.term', tip: '.term-tip' }) }
+ *
+ * Each trigger names its tip with aria-describedby (the tip's id); the tips are `role="tooltip"
+ * popover="manual"` elements placed by CSS anchor positioning, as for tooltip(). One tip shows at
+ * a time. Moving from one trigger to another while a tip is shown switches at once (no second
+ * show delay), as tooltip groups do.
+ *
+ * Options: `trigger`, `tip` (required selectors matching every trigger / every tip),
+ * `showDelay` (500 ms), `hideDelay` (100 ms).
+ * State: { id (the tip of the trigger or tip last entered), open (the id of the tip shown),
+ * pending: null | 'show' | 'hide', hover, focus }. Actions: ENTER / LEAVE ({ via: 'hover' |
+ * 'focus', id }), SHOW / HIDE (the timers), ESCAPE, TOGGLED ({ id, open }). Timers
+ * '<key>.show' / '<key>.hide' as tooltip()'s. Needs makeTimerDriver() (tests: fake timers).
+ * Same rules as tooltip(): pointer and focus tracked apart, touch ignored, hovering the tip keeps
+ * it open (WCAG 1.4.13), Escape listened for only while a tip is shown or about to be.
+ */
+import {ABORT, defineBehavior, dropRepeats, xs} from '../index'
+
+const mouse = (e: any) => e?.pointerType != 'touch'
+const el = (e: any) => e?.ownerTarget || e?.currentTarget || e?.target
+// the trigger's tip id (its aria-describedby: the first id when it lists several), or the tip's own
+const tipOf = (e: any) => String(el(e)?.getAttribute?.('aria-describedby') || '').trim().split(/\s+/)[0] || null
+const idOf = (e: any) => el(e)?.id || null
+const at = (id: string) => `[id="${id.replace(/["\\]/g, '\\$&')}"]`
+
+const base = /*#__PURE__*/ defineBehavior({
+  initialState: {id: null as null | string, open: null as null | string, pending: null as null | string, hover: false, focus: false},
+  timers: (s: any, o: any) => ({
+    show: s?.pending == 'show' && {after: o.showDelay ?? 500, action: 'SHOW'},
+    hide: s?.pending == 'hide' && {after: o.hideDelay ?? 100, action: 'HIDE'},
+  }),
+  intent: ({DOM, STATE}: any, {trigger, tip}: any) => ({
+    ENTER: xs.merge(
+      DOM.pointerenter(trigger).filter(mouse).map((e: any) => ({via: 'hover', id: tipOf(e)})),
+      DOM.pointerenter(tip).filter(mouse).map((e: any) => ({via: 'hover', id: idOf(e)})),
+      DOM.focus(trigger).map((e: any) => ({via: 'focus', id: tipOf(e)})),
+    ).filter((x: any) => !!x.id),
+    LEAVE: xs.merge(
+      DOM.pointerleave(trigger).filter(mouse).map((e: any) => ({via: 'hover', id: tipOf(e)})),
+      DOM.pointerleave(tip).filter(mouse).map((e: any) => ({via: 'hover', id: idOf(e)})),
+      DOM.blur(trigger).map((e: any) => ({via: 'focus', id: tipOf(e)})),
+    ).filter((x: any) => !!x.id),
+    ESCAPE: (STATE ? STATE.stream.map((s: any) => !!(s?.open || s?.pending)).compose(dropRepeats()) : xs.of(true))
+      .map((on: boolean) => (on ? DOM.keydown('document').key().filter((k: string) => k == 'Escape') : xs.never()))
+      .flatten(),
+    TOGGLED: DOM.toggle(tip).map((e: any) => ({id: idOf(e), open: e.newState == 'open'})).filter((x: any) => !!x.id),
+  }),
+  model: {
+    ENTER: {
+      STATE: (s: any, {via, id}: any) => {
+        const k = via == 'focus' ? 'focus' : 'hover'
+        // another trigger: it takes over (a tip already shown switches at once, in ELEMENT)
+        if (id != s.id) return {...s, id, hover: k == 'hover', focus: k == 'focus', pending: s.open ? null : 'show'}
+        const pending = s.open == id ? null : 'show'
+        return s[k] && s.pending == pending ? ABORT : {...s, [k]: true, pending}
+      },
+      // 7.0: outputs get the updated slice; "another trigger than before" reads the previous one
+      ELEMENT: (s: any, {id}: any, _n: any, p: any, _o: any, k: string) => {
+        const w = p?.previousState ? p.previousState[k] : s
+        return id != w.id && w.open && w.open != id ? [{hidePopover: at(w.open)}, {showPopover: at(id)}] : ABORT
+      },
+    },
+    LEAVE: (s: any, {via, id}: any) => {
+      if (id != s.id) return ABORT
+      const k = via == 'focus' ? 'focus' : 'hover'
+      const n = {...s, [k]: false}
+      const pending = n.hover || n.focus ? s.pending : s.open ? 'hide' : null
+      return !s[k] && s.pending == pending ? ABORT : {...n, pending}
+    },
+    SHOW: {
+      STATE: (s: any) => ({...s, pending: null}),
+      ELEMENT: (s: any) => (!s.id || s.open == s.id ? ABORT : s.open ? [{hidePopover: at(s.open)}, {showPopover: at(s.id)}] : {showPopover: at(s.id)}),
+    },
+    HIDE: {
+      STATE: (s: any) => ({...s, pending: null}),
+      ELEMENT: (s: any) => (s.open ? {hidePopover: at(s.open)} : ABORT),
+    },
+    ESCAPE: {
+      STATE: (s: any) => (s.open || s.pending ? {...s, pending: null} : ABORT),
+      ELEMENT: (s: any) => (s.open ? {hidePopover: at(s.open)} : ABORT),
+    },
+    TOGGLED: (s: any, {id, open}: any) => (open ? (s.open == id ? ABORT : {...s, open: id}) : s.open == id ? {...s, open: null} : ABORT),
+  },
+})
+
+/** Every tooltip of a component as one behavior: `uses = { tips: tooltips({ trigger: '.term', tip: '.term-tip' }) }`. */
+export const tooltips = (options: any = {}): any => base({...options, id: null, open: null, pending: null, hover: false, focus: false})

package/src/ui.d.ts

@@ -75,6 +75,41 @@ export interface TooltipActions { ENTER: 'hover' | 'focus' | undefined; LEAVE: '
 /** A tooltip: `uses = { tip: tooltip({ trigger: '.save', tip: '.save-tip' }) }`. Needs makeTimerDriver(). */
 export function tooltip(options: TooltipOptions): Behavior<TooltipState, TooltipActions, {}, TooltipOptions>
 
+// ── Tooltips (PLAN-11) ────────────────────────────────────────────────
+export interface TooltipsState {
+  /** The tip id of the trigger (or tip) last entered */
+  id: string | null
+  /** The id of the tip shown, or null */
+  open: string | null
+  pending: null | 'show' | 'hide'
+  hover: boolean
+  focus: boolean
+}
+export interface TooltipsOptions {
+  /** Every trigger (a selector matching them all); each names its tip with aria-describedby */
+  trigger: BehaviorTarget
+  /** Every tip: role="tooltip" popover="manual" with an id, placed with CSS anchor positioning */
+  tip: BehaviorTarget
+  /** ms before a tip shows (default 500); moving to another trigger while one shows switches at once */
+  showDelay?: number
+  /** ms before it hides (default 100) */
+  hideDelay?: number
+}
+export interface TooltipsActions {
+  ENTER: { via: 'hover' | 'focus'; id: string }
+  LEAVE: { via: 'hover' | 'focus'; id: string }
+  SHOW: any
+  HIDE: any
+  ESCAPE: string
+  TOGGLED: { id: string; open: boolean }
+}
+/**
+ * PLAN-11 (6.7): every tooltip of a component as one behavior (one state slice, two timers):
+ * `uses = { tips: tooltips({ trigger: '.term', tip: '.term-tip' }) }`, each trigger with
+ * `aria-describedby` naming its tip's id. One tip shows at a time. Needs makeTimerDriver().
+ */
+export function tooltips(options: TooltipsOptions): Behavior<TooltipsState, TooltipsActions, {}, TooltipsOptions>
+
 // ── Tabs ──────────────────────────────────────────────────────────────
 export interface TabsState {
   /** The ids' prefix (the key in `uses` unless the `id` option names it) */

package/src/ui.ts

@@ -9,6 +9,7 @@
 export {dialog} from './ui/dialog'
 export {popover} from './ui/popover'
 export {tooltip} from './ui/tooltip'
+export {tooltips} from './ui/tooltips'
 export {tabs, tabsAttrs} from './ui/tabs'
 export {accordion, accordionAttrs} from './ui/accordion'
 export {disclosure, disclosureAttrs} from './ui/disclosure'

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)
+}