@uniweb/runtime 0.6.39 → 0.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uniweb/runtime",
-  "version": "0.6.39",
+  "version": "0.7.0",
   "description": "Minimal runtime for loading Uniweb foundations",
   "type": "module",
   "exports": {
@@ -36,12 +36,12 @@
   },
   "dependencies": {
     "@uniweb/theming": "0.1.3",
-    "@uniweb/core": "0.5.22"
+    "@uniweb/core": "0.6.0"
   },
   "devDependencies": {
     "@vitejs/plugin-react": "^4.5.2",
     "vite": "^7.3.1",
-    "@uniweb/build": "0.8.41"
+    "@uniweb/build": "0.8.42"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0",

package/src/components/Layout.jsx

@@ -90,11 +90,23 @@ export default function Layout({ page, website }) {
   const allBlockGroups = [bodyBlocks, ...Object.values(areas)]
   initializeAllBlocks(...allBlockGroups)
 
-  // Pre-render each area as React elements
-  const bodyElement = bodyBlocks ? <Blocks blocks={bodyBlocks} /> : null
+  // Pre-render each area as React elements.
+  // When the foundation enables view transitions, wrap areas in thin divs
+  // with view-transition-name so the browser can animate them independently.
+  const transitions = website.viewTransitions ? layoutMeta?.transitions : null
+
+  const bodyElement = bodyBlocks ? (
+    transitions?.body
+      ? <div style={{ viewTransitionName: transitions.body }}><Blocks blocks={bodyBlocks} /></div>
+      : <Blocks blocks={bodyBlocks} />
+  ) : null
+
   const areaElements = {}
   for (const [name, blocks] of Object.entries(areas)) {
-    areaElements[name] = <Blocks blocks={blocks} />
+    const transitionName = transitions?.[name]
+    areaElements[name] = transitionName
+      ? <div style={{ viewTransitionName: transitionName }}><Blocks blocks={blocks} /></div>
+      : <Blocks blocks={blocks} />
   }
 
   // Use foundation's custom Layout if provided

package/src/components/PageRenderer.jsx

@@ -127,6 +127,16 @@ export default function PageRenderer() {
   let page = website?.getPage(location.pathname)
   if (page && website) website.setActivePage(location.pathname)
 
+  // ─── Content loading (split page content) ───
+  // On first load, the current page's sections are pre-embedded → contentReady = true.
+  // On SPA navigation to an unvisited page → contentReady = false → fetch → re-render.
+  const contentReady = !page || !page.hasContent() || page.isContentLoaded()
+
+  useEffect(() => {
+    if (contentReady) return
+    page.loadContent().then(() => forceUpdate())
+  }, [page, contentReady])
+
   // ─── Compute navigation targets (before hooks, no early returns) ───
 
   // Explicit redirect: in page.yml
@@ -213,6 +223,10 @@ export default function PageRenderer() {
     )
   }
 
+  // Wait for content before rendering blocks (split page content).
+  // The prerendered HTML is already visible while we load.
+  if (!contentReady) return null
+
   const appearance = website?.themeData?.appearance
 
   // Use Layout component for proper orchestration

package/src/hooks/useLinkInterceptor.js

@@ -14,6 +14,7 @@
 
 import { useEffect, useCallback } from 'react'
 import { useNavigate, useLocation } from 'react-router-dom'
+import { prefetchContent, prefersReducedMotion } from '../setup.js'
 
 /**
  * Check if a URL is internal (same origin, no external protocol)
@@ -193,7 +194,17 @@ export function useLinkInterceptor(options = {}) {
       // Use React Router navigation (with router-relative path)
       // React Router will handle the path, and our useEffect above
       // will handle scrolling to hash after navigation completes
-      navigate(routeHref)
+      const useTransition = website?.viewTransitions && document.startViewTransition
+        && !prefersReducedMotion
+
+      if (useTransition) {
+        document.startViewTransition(async () => {
+          await prefetchContent(routeHref)
+          navigate(routeHref)
+        })
+      } else {
+        navigate(routeHref)
+      }
     }
 
     // Add click listener to document

package/src/setup.js

@@ -5,10 +5,11 @@
  * with routing components, icon resolver, data fetcher, etc.
  */
 
+import React from 'react'
 import { createUniweb, Website } from '@uniweb/core'
 import {
   Link as RouterLink,
-  useNavigate,
+  useNavigate as useRouterNavigate,
   useParams,
   useLocation
 } from 'react-router-dom'
@@ -16,6 +17,97 @@ import {
 import { ChildBlocks } from './components/PageRenderer.jsx'
 import { executeFetchClient } from './data-fetcher-client.js'
 
+// ─── View Transition Wrappers ───────────────────────────────────────────────
+//
+// When the foundation enables viewTransitions, navigation is wrapped in
+// document.startViewTransition() to animate page changes. Split content
+// is prefetched inside the transition callback so the user never sees
+// a blank or loading state.
+//
+// These wrappers are registered as routing components, so Kit's <Link>
+// and useRouting().useNavigate() automatically get view transition support.
+
+/**
+ * Prefetch split page content with a timeout.
+ * Resolves when content is loaded or the timeout expires — whichever
+ * comes first. This keeps the old-page screenshot from freezing too
+ * long on slow connections. If the timeout wins, navigation proceeds
+ * and the PageRenderer loading gate handles the rest.
+ */
+const CONTENT_PREFETCH_TIMEOUT = 1000
+export const prefersReducedMotion = typeof window !== 'undefined'
+  && window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+export function prefetchContent(route) {
+  const website = globalThis.uniweb?.activeWebsite
+  if (!route || !website) return
+
+  const targetPage = website.getPage(route)
+  if (!targetPage?.hasContent?.() || targetPage.isContentLoaded?.()) return
+
+  return Promise.race([
+    targetPage.loadContent(),
+    new Promise(resolve => setTimeout(resolve, CONTENT_PREFETCH_TIMEOUT))
+  ])
+}
+
+/**
+ * Prefetch split content and navigate inside a view transition.
+ * Falls back to plain navigation when transitions are not available.
+ */
+function navigateWithTransition(navigate, to, options) {
+  const vt = globalThis.uniweb?.foundationConfig?.viewTransitions
+  if (vt && document.startViewTransition && !prefersReducedMotion) {
+    document.startViewTransition(async () => {
+      const route = typeof to === 'string' ? to : to?.pathname
+      await prefetchContent(route)
+      navigate(to, options)
+    })
+  } else {
+    navigate(to, options)
+  }
+}
+
+/**
+ * View-transition-aware Link component.
+ * Intercepts clicks to wrap navigation in startViewTransition() when enabled.
+ * Falls through to RouterLink's normal behavior otherwise.
+ * Preserves all React Router Link props (replace, state, preventScrollReset).
+ */
+const ViewTransitionLink = React.forwardRef(function ViewTransitionLink(
+  { onClick, replace, state, preventScrollReset, ...props },
+  ref
+) {
+  const navigate = useRouterNavigate()
+
+  const handleClick = (e) => {
+    if (onClick) onClick(e)
+    if (e.defaultPrevented) return
+    if (e.metaKey || e.altKey || e.ctrlKey || e.shiftKey) return
+    if (e.button !== 0) return
+
+    const vt = globalThis.uniweb?.foundationConfig?.viewTransitions
+    if (!vt || !document.startViewTransition || prefersReducedMotion) return
+
+    e.preventDefault()
+    navigateWithTransition(navigate, props.to, { replace, state, preventScrollReset })
+  }
+
+  return React.createElement(RouterLink, {
+    ref, ...props, onClick: handleClick,
+    replace, state, preventScrollReset
+  })
+})
+
+/**
+ * View-transition-aware useNavigate hook.
+ * The returned function wraps navigation in startViewTransition() when enabled.
+ */
+function useNavigate() {
+  const navigate = useRouterNavigate()
+  return (to, options) => navigateWithTransition(navigate, to, options)
+}
+
 /**
  * Map friendly family names to react-icons codes
  * The existing CDN uses react-icons structure: /{familyCode}/{familyCode}-{name}.svg
@@ -139,7 +231,7 @@ export function setupUniweb(configData) {
   // This enables the bridge pattern: components access routing via
   // website.getRoutingComponents() instead of direct imports
   uniwebInstance.routingComponents = {
-    Link: RouterLink,
+    Link: ViewTransitionLink,
     useNavigate,
     useParams,
     useLocation