@jasonshimmy/vite-plugin-cer-app 0.1.2 → 0.1.4

package/e2e/cypress/e2e/interactive.cy.ts

@@ -0,0 +1,122 @@
+/**
+ * Interactivity tests — counter, navigation, middleware redirect.
+ * All tests run in every build mode (SPA, SSR, SSG).
+ */
+
+describe('Counter interactivity', () => {
+  beforeEach(() => {
+    cy.visit('/counter')
+    // Wait for the component to hydrate and show count 0
+    cy.get('page-counter').should('exist')
+    cy.get('[data-cy=count]').should('contain', '0')
+  })
+
+  // Scope to cer-layout-view's shadow DOM to target only the reactive
+  // (JS-hydrated) page-counter, not the static pre-rendered DSD copy.
+  it('increments count on + click', () => {
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '1')
+  })
+
+  it('decrements count on − click', () => {
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '2')
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=decrement]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '1')
+  })
+
+  it('resets count on Reset click', () => {
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '2')
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=reset]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '0')
+  })
+
+  it('multiple increments accumulate correctly', () => {
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '3')
+  })
+})
+
+describe('Client-side navigation', () => {
+  it('navigates from home to about via nav link', () => {
+    cy.visit('/')
+    cy.get('[data-cy=nav-about]').first().click({ force: true })
+    cy.url().should('include', '/about')
+    cy.get('[data-cy=about-heading]').should('contain', 'About')
+  })
+
+  it('navigates from home to counter via nav link', () => {
+    cy.visit('/')
+    cy.get('[data-cy=nav-counter]').first().click({ force: true })
+    cy.url().should('include', '/counter')
+    cy.get('[data-cy=counter-heading]').should('contain', 'Counter')
+  })
+
+  it('navigates from home to blog via nav link', () => {
+    cy.visit('/')
+    cy.get('[data-cy=nav-blog]').first().click({ force: true })
+    cy.url().should('include', '/blog')
+    cy.get('[data-cy=blog-heading]').should('contain', 'Blog')
+  })
+
+  it('navigates from blog to a post via link click', () => {
+    cy.visit('/blog')
+    cy.get('[data-cy=blog-item]').first().find('a').first().click({ force: true })
+    cy.url().should('include', '/blog/')
+    cy.get('[data-cy=post-title]').should('exist')
+  })
+
+  it('navigates back from about to home', () => {
+    cy.visit('/about')
+    cy.get('[data-cy=about-back]').first().click({ force: true })
+    cy.url().should('eq', Cypress.config('baseUrl') + '/')
+    cy.get('[data-cy=home-heading]').should('contain', 'Kitchen Sink')
+  })
+
+  it('counter state resets when navigating away and back', () => {
+    cy.visit('/counter')
+    cy.get('cer-layout-view').shadow().find('page-counter').should('exist')
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=increment]').click({ force: true })
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '1')
+    // Navigate away
+    cy.get('[data-cy=nav-home]').first().click({ force: true })
+    cy.url().should('eq', Cypress.config('baseUrl') + '/')
+    cy.get('[data-cy=home-heading]').should('contain', 'Kitchen Sink')
+    // Navigate back — component re-mounts, state resets
+    cy.get('[data-cy=nav-counter]').first().click({ force: true })
+    cy.url().should('include', '/counter')
+    cy.get('cer-layout-view').shadow().find('page-counter').should('exist')
+    cy.get('cer-layout-view').shadow().find('page-counter').shadow().find('[data-cy=count]').should('contain', '0')
+  })
+})
+
+describe('Auth middleware', () => {
+  beforeEach(() => {
+    cy.clearLocalStorage()
+  })
+
+  it('redirects to /login when not authenticated', () => {
+    cy.visit('/protected')
+    cy.url().should('include', '/login')
+    cy.get('cer-layout-view').shadow().find('page-login', { timeout: 8000 }).should('exist')
+    cy.get('cer-layout-view').shadow().find('[data-cy=login-heading]').should('contain', 'Login')
+  })
+
+  it('shows protected page when token is set', () => {
+    cy.window().then((win) => win.localStorage.setItem('ks-token', '1'))
+    cy.visit('/protected')
+    cy.url().should('include', '/protected')
+    cy.get('cer-layout-view').shadow().find('[data-cy=protected-heading]').should('contain', 'Protected Page')
+  })
+
+  it('shows plugin greeting on protected page', () => {
+    cy.window().then((win) => win.localStorage.setItem('ks-token', '1'))
+    cy.visit('/protected')
+    cy.get('cer-layout-view').shadow().find('[data-cy=plugin-greeting]').should('contain', 'Hello from ks-setup plugin!')
+  })
+})

package/e2e/cypress/e2e/routes.cy.ts

@@ -0,0 +1,128 @@
+/**
+ * Routes test — verifies every route renders correct content in all build modes.
+ */
+
+const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg'
+
+describe('Route rendering', () => {
+  context('Home page (/)', () => {
+    it('renders the home heading', () => {
+      cy.visit('/')
+      cy.get('[data-cy=home-heading]').should('contain', 'Kitchen Sink')
+    })
+
+    it('renders the ks-badge component', () => {
+      cy.visit('/')
+      cy.get('[data-cy=ks-badge]').should('exist')
+    })
+
+    it('renders the default layout with nav', () => {
+      cy.visit('/')
+      cy.get('[data-cy=site-nav]').should('exist')
+      cy.get('[data-cy=site-header]').should('exist')
+      cy.get('[data-cy=site-footer]').should('exist')
+    })
+
+    it('renders all nav links', () => {
+      cy.visit('/')
+      cy.get('[data-cy=nav-home]').should('exist')
+      cy.get('[data-cy=nav-about]').should('exist')
+      cy.get('[data-cy=nav-counter]').should('exist')
+      cy.get('[data-cy=nav-blog]').should('exist')
+    })
+  })
+
+  context('About page (/about) — minimal layout + useHead', () => {
+    it('renders the about heading', () => {
+      cy.visit('/about')
+      cy.get('[data-cy=about-heading]').should('contain', 'About')
+    })
+
+    it('uses the minimal layout (no site-nav)', () => {
+      cy.visit('/about')
+      cy.get('[data-cy=minimal-layout]').should('exist')
+      cy.get('[data-cy=site-nav]').should('not.exist')
+    })
+  })
+
+  context('Counter page (/counter)', () => {
+    it('renders the counter heading', () => {
+      cy.visit('/counter')
+      cy.get('[data-cy=counter-heading]').should('contain', 'Counter')
+    })
+
+    it('renders the counter widget with initial count of 0', () => {
+      cy.visit('/counter')
+      cy.get('[data-cy=count]').should('contain', '0')
+    })
+
+    it('renders increment, decrement, and reset buttons', () => {
+      cy.visit('/counter')
+      cy.get('[data-cy=increment]').should('exist')
+      cy.get('[data-cy=decrement]').should('exist')
+      cy.get('[data-cy=reset]').should('exist')
+    })
+  })
+
+  context('Head page (/head) — useHead', () => {
+    it('renders the head-test heading', () => {
+      cy.visit('/head')
+      cy.get('[data-cy=head-heading]').should('contain', 'Head Test')
+    })
+  })
+
+  context('Blog list page (/blog)', () => {
+    it('renders the blog heading', () => {
+      cy.visit('/blog')
+      cy.get('[data-cy=blog-heading]').should('contain', 'Blog')
+    })
+  })
+
+  context('Blog detail page (/blog/first-post) — dynamic route', () => {
+    it('renders the post title', () => {
+      cy.visit('/blog/first-post')
+      cy.get('[data-cy=post-title]').should('contain', 'First Post')
+    })
+
+    it('renders the post slug', () => {
+      cy.visit('/blog/first-post')
+      cy.get('[data-cy=post-slug]').should('contain', 'first-post')
+    })
+  })
+
+  context('Item page (/items/1) — route params via useProps', () => {
+    it('renders the item heading', () => {
+      cy.visit('/items/1')
+      cy.get('[data-cy=item-heading]').should('contain', 'Item Detail')
+    })
+
+    it('shows the correct item ID from route params', () => {
+      cy.visit('/items/1')
+      cy.get('[data-cy=item-id]').should('contain', '1')
+    })
+
+    it('shows a different ID for /items/2', () => {
+      cy.visit('/items/2')
+      cy.get('[data-cy=item-id]').should('contain', '2')
+    })
+  })
+
+  context('Login page (/login) — route group, minimal layout', () => {
+    it('renders the login heading', () => {
+      cy.visit('/login')
+      cy.get('[data-cy=login-heading]').should('contain', 'Login')
+    })
+
+    it('uses the minimal layout', () => {
+      cy.visit('/login')
+      cy.get('[data-cy=minimal-layout]').should('exist')
+    })
+  })
+
+  context('404 page — catch-all route', () => {
+    it('renders the 404 heading for an unknown path', () => {
+      cy.visit('/this-page-does-not-exist-at-all', { failOnStatusCode: false })
+      cy.get('[data-cy=not-found-heading]').should('contain', '404')
+    })
+  })
+})

package/e2e/cypress/support/commands.ts

@@ -0,0 +1,60 @@
+/**
+ * Custom Cypress commands for the kitchen sink e2e suite.
+ */
+
+/**
+ * Assert that the raw HTML for a route has proper DSD structure:
+ * - Contains <template shadowrootmode> elements
+ * - Each template has embedded <style> (not stripped to <head>)
+ * - No loading indicator in the pre-rendered HTML
+ * - Content is present (not empty cer-layout-view)
+ */
+Cypress.Commands.add('assertNoDSD_FOUC', (path: string) => {
+  cy.request(path).then((response) => {
+    const html: string = response.body
+
+    // Must have DSD templates
+    expect(html, `${path}: should contain DSD templates`).to.include('<template shadowrootmode')
+
+    // Each shadow template must have its own <style> block (not hoisted to <head>)
+    const templateMatches = [...html.matchAll(/<template shadowrootmode[^>]*>([\s\S]*?)<\/template>/g)]
+    expect(templateMatches.length, `${path}: should have at least 1 shadow template`).to.be.greaterThan(0)
+    templateMatches.forEach(([, content], i) => {
+      expect(content, `${path}: template[${i}] should contain <style>`).to.include('<style')
+    })
+
+    // The <head> must NOT contain raw unnamed <style> blocks (only id'd global ones are OK)
+    const headMatch = html.match(/<head>([\s\S]*?)<\/head>/)
+    if (headMatch) {
+      const headContent = headMatch[1]
+      // Allow <style id=...> (global JIT/SSR styles), reject bare <style> without id
+      const bareStyles = headContent.match(/<style(?!\s+id)[^>]*>/g) ?? []
+      expect(bareStyles.length, `${path}: <head> must not contain un-named <style> blocks`).to.equal(0)
+    }
+
+    // Loading indicator must NOT appear in the initial server-rendered HTML
+    expect(html, `${path}: loading indicator must not be in initial HTML`).not.to.include('data-cy="loading-indicator"')
+
+    // cer-layout-view must not be empty (pre-rendered content present)
+    const layoutViewMatch = html.match(/<cer-layout-view>([\s\S]*?)<\/cer-layout-view>/)
+    if (layoutViewMatch) {
+      expect(layoutViewMatch[1].trim(), `${path}: cer-layout-view must have pre-rendered content`).not.to.be.empty
+    }
+  })
+})
+
+/**
+ * Wait for a shadow DOM element to appear (handles lazy rendering).
+ */
+Cypress.Commands.add('getShadow', (selector: string) => {
+  return cy.get(selector, { includeShadowDom: true })
+})
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      assertNoDSD_FOUC(path: string): Chainable<void>
+      getShadow(selector: string): Chainable<JQuery<HTMLElement>>
+    }
+  }
+}

package/e2e/cypress/support/e2e.ts

@@ -0,0 +1,10 @@
+import './commands'
+
+// Fail tests on uncaught exceptions only if they're from the app (not network errors)
+Cypress.on('uncaught:exception', (err) => {
+  // Ignore fetch errors (expected in SSG mode where API routes don't exist)
+  if (err.message.includes('Failed to fetch') || err.message.includes('NetworkError')) {
+    return false
+  }
+  return true
+})

package/{src/runtime/app-template.ts → e2e/kitchen-sink/app/app.ts}

@@ -1,12 +1,4 @@
-/**
- * Template string for `app/app.ts`.
- *
- * This file is the main application bootstrap entry point.
- * It registers all auto-discovered components, initialises the router,
- * runs plugins, and registers the framework-level <cer-layout-view> component
- * that handles layout selection, loading indicators, and error pages.
- */
-export const APP_TEMPLATE = `import '@jasonshimmy/custom-elements-runtime/css'
+import '@jasonshimmy/custom-elements-runtime/css'
 import 'virtual:cer-components'
 import routes from 'virtual:cer-routes'
 import layouts from 'virtual:cer-layouts'
@@ -16,6 +8,7 @@ import { hasError, errorTag } from 'virtual:cer-error'
 import {
   component,
   ref,
+  provide,
   useOnConnected,
   useOnDisconnected,
   registerBuiltinComponents,
@@ -25,28 +18,20 @@ import { enableJITCSS } from '@jasonshimmy/custom-elements-runtime/jit-css'
 import { createDOMJITCSS } from '@jasonshimmy/custom-elements-runtime/dom-jit-css'
 
 registerBuiltinComponents()
-
-// Enable JIT CSS globally for all Shadow DOM components.
 enableJITCSS()
 
-// initRouter registers router-view/router-link, creates the router, and sets it as active.
 const router = initRouter({ routes })
 
 // ─── Navigation state ────────────────────────────────────────────────────────
 
-// isNavigating becomes true while a lazy route chunk is loading.
 const isNavigating = ref(false)
-
-// currentError holds the last uncaught navigation or render error.
 const currentError = ref(null)
 
-// Expose resetError globally so page-error components can call it.
 ;(globalThis as any).resetError = () => {
   currentError.value = null
   router.replace(router.getCurrent().path)
 }
 
-// Wrap push/replace to track navigation pending state.
 const _push = router.push.bind(router)
 const _replace = router.replace.bind(router)
 
@@ -74,75 +59,84 @@ router.replace = async (path) => {
   }
 }
 
+// ─── Plugins ─────────────────────────────────────────────────────────────────
+
+// Collect plugin-provided values so cer-layout-view can forward them into
+// the component context tree via the real provide() hook (which inject() walks).
+// Declared BEFORE component('cer-layout-view') to avoid a temporal dead zone
+// ReferenceError: customElements.define() upgrades existing DOM elements
+// synchronously, calling the render function immediately.
+const _pluginProvides = new Map<string, unknown>()
+// Expose plugin provides globally so page components can read them synchronously
+// regardless of render order (inject/provide has timing issues in SSG mode).
+;(globalThis as any).__cerPluginProvides = _pluginProvides
+
 // ─── <cer-layout-view> ───────────────────────────────────────────────────────
-//
-// Wraps <router-view> in the layout appropriate for the current route.
-// Falls back to rendering <router-view> directly when no matching layout
-// exists. Also renders loading / error pages when those states are active.
-//
-// Layout stays mounted across navigations that share the same layout — the
-// vdom diff preserves the outer element when its tag name doesn't change.
 
 component('cer-layout-view', () => {
+  // Forward plugin-provided values into the component context so inject() in
+  // any descendant component can resolve them by walking up the DOM tree.
+  for (const [key, value] of _pluginProvides) {
+    provide(key, value)
+  }
+
   const current = ref(router.getCurrent())
   let unsub: (() => void) | undefined
 
   useOnConnected(() => {
-    unsub = router.subscribe((s: typeof current.value) => {
-      current.value = s
-    })
-  })
-
-  useOnDisconnected(() => {
-    unsub?.()
-    unsub = undefined
+    unsub = router.subscribe((s: typeof current.value) => { current.value = s })
   })
+  useOnDisconnected(() => { unsub?.(); unsub = undefined })
 
-  // Error state — show page-error if available, otherwise plain text.
   if (currentError.value !== null) {
     if (hasError && errorTag) {
       return { tag: errorTag, props: { attrs: { error: String(currentError.value) } }, children: [] }
     }
-    return { tag: 'div', props: { attrs: { style: 'padding:2rem;font-family:monospace' } }, children: [String(currentError.value)] }
+    return { tag: 'div', props: { attrs: { style: 'padding:2rem;font-family:monospace' } }, children: String(currentError.value) }
   }
 
-  // Loading state — show page-loading while a route chunk is fetching.
   if (isNavigating.value && hasLoading && loadingTag) {
     return { tag: loadingTag, props: {}, children: [] }
   }
 
-  // Normal state — wrap router-view in the active layout (if any).
   const matched = router.matchRoute(current.value.path)
   const layoutName = (matched?.route as any)?.meta?.layout ?? 'default'
   const layoutTag = (layouts as Record<string, string>)[layoutName]
   const routerView = { tag: 'router-view', props: {}, children: [] }
 
-  if (layoutTag) {
-    return { tag: layoutTag, props: {}, children: [routerView] }
-  }
+  if (layoutTag) return { tag: layoutTag, props: {}, children: [routerView] }
   return routerView
 })
 
-// ─── Plugins ─────────────────────────────────────────────────────────────────
-
 for (const plugin of plugins) {
   if (plugin && typeof plugin.setup === 'function') {
-    await plugin.setup({ router, provide: (key, value) => { (globalThis as any)[key] = value }, config: {} })
+    await plugin.setup({ router, provide: (key: string, value: unknown) => { _pluginProvides.set(key, value) }, config: {} })
+  }
+}
+
+// ─── Pre-load initial route ───────────────────────────────────────────────────
+// Download the current page's route chunk AFTER plugins run so that
+// cer-layout-view's first render (which calls provide()) completes before
+// page components are defined and their renders are scheduled. This ensures
+// inject() in child components can find values stored by provide().
+
+if (typeof window !== 'undefined') {
+  const _initMatch = router.matchRoute(window.location.pathname)
+  if (_initMatch?.route?.load) {
+    try { await _initMatch.route.load() } catch { /* non-fatal */ }
   }
 }
 
 // ─── Initial navigation ──────────────────────────────────────────────────────
 
 if (typeof window !== 'undefined') {
-  await router.replace(window.location.pathname + window.location.search + window.location.hash)
-  // Clear SSR loader data after the initial navigation so that subsequent
-  // client-side navigations don't accidentally reuse it. We wait until after
-  // router.replace() so both the pre-rendered element (upgraded during
-  // component registration) and the new element from router.replace() can
-  // both call usePageData() and receive the hydration data.
+  // Use the original (unwrapped) replace so isNavigating stays false during
+  // the initial paint — the loading component must not flash over pre-rendered content.
+  await _replace(window.location.pathname + window.location.search + window.location.hash)
+  // Clear SSR loader data after initial navigation so subsequent client-side
+  // navigations don't accidentally reuse stale server data.
   delete (globalThis as any).__CER_DATA__
   createDOMJITCSS().mount()
 }
 
 export { router }
-`

package/e2e/kitchen-sink/app/components/ks-badge.ts

@@ -0,0 +1,8 @@
+component('ks-badge', () => {
+  const slots = useSlots()
+  return html`
+    <span data-cy="ks-badge" style="display:inline-block;background:#e0f2fe;color:#0369a1;padding:2px 8px;border-radius:4px;font-size:0.85em;font-weight:600">
+      ${slots.default ?? 'badge'}
+    </span>
+  `
+})

package/e2e/kitchen-sink/app/composables/useKsCounter.ts

@@ -0,0 +1,9 @@
+import { ref } from '@jasonshimmy/custom-elements-runtime'
+
+export function useKsCounter(initial = 0) {
+  const count = ref(initial)
+  const increment = () => { count.value++ }
+  const decrement = () => { count.value-- }
+  const reset = () => { count.value = 0 }
+  return { count, increment, decrement, reset }
+}

package/e2e/kitchen-sink/app/error.ts

@@ -0,0 +1,13 @@
+component('page-error', () => {
+  const props = useProps<{ error: string }>({ error: 'An unexpected error occurred.' })
+
+  return html`
+    <div data-cy="error-boundary" style="padding:2rem;font-family:sans-serif">
+      <h2 data-cy="error-heading" style="color:#c00;margin-top:0">Something went wrong</h2>
+      <pre data-cy="error-message" style="background:#fff0f0;border:1px solid #fcc;padding:1rem;border-radius:4px">${props.error}</pre>
+      <button data-cy="error-retry" @click="${() => (globalThis as any).resetError?.()}">
+        Try again
+      </button>
+    </div>
+  `
+})

package/e2e/kitchen-sink/app/layouts/default.ts

@@ -0,0 +1,21 @@
+component('layout-default', () => {
+  return html`
+    <div>
+      <header data-cy="site-header">
+        <nav data-cy="site-nav">
+          <a data-cy="nav-home" href="/">Home</a>
+          <a data-cy="nav-about" href="/about">About</a>
+          <a data-cy="nav-counter" href="/counter">Counter</a>
+          <a data-cy="nav-blog" href="/blog">Blog</a>
+          <a data-cy="nav-protected" href="/protected">Protected</a>
+        </nav>
+      </header>
+      <main data-cy="site-main">
+        <slot></slot>
+      </main>
+      <footer data-cy="site-footer">
+        <p>Kitchen Sink — testing every framework capability</p>
+      </footer>
+    </div>
+  `
+})

package/e2e/kitchen-sink/app/layouts/minimal.ts

@@ -0,0 +1,7 @@
+component('layout-minimal', () => {
+  return html`
+    <div data-cy="minimal-layout">
+      <slot></slot>
+    </div>
+  `
+})

package/e2e/kitchen-sink/app/loading.ts

@@ -0,0 +1,9 @@
+component('page-loading', () => {
+  return html`
+    <div data-cy="loading-indicator" style="display:flex;align-items:center;gap:8px;padding:1rem;font-family:sans-serif;color:#888">
+      <span style="display:inline-block;width:14px;height:14px;border:2px solid #ccc;border-top-color:#555;border-radius:50%;animation:spin 0.7s linear infinite"></span>
+      Loading…
+      <style>@keyframes spin { to { transform: rotate(360deg) } }</style>
+    </div>
+  `
+})

package/e2e/kitchen-sink/app/middleware/auth.ts

@@ -0,0 +1,13 @@
+// Route middleware — redirects to /login if not authenticated.
+// Set localStorage.setItem('ks-token', '1') to simulate login.
+export default (to: any, _from: any, next: (path?: string) => void) => {
+  const isLoggedIn = typeof localStorage !== 'undefined'
+    ? !!localStorage.getItem('ks-token')
+    : false
+
+  if (!isLoggedIn) {
+    next('/login')
+  } else {
+    next()
+  }
+}

package/e2e/kitchen-sink/app/pages/(auth)/login.ts

@@ -0,0 +1,13 @@
+component('page-login', () => {
+  return html`
+    <div>
+      <h1 data-cy="login-heading">Login</h1>
+      <p data-cy="login-description">This page uses the <strong>minimal</strong> layout.</p>
+      <button data-cy="login-btn" @click="${() => { localStorage.setItem('ks-token', '1'); location.href = '/protected' }}">
+        Simulate Login
+      </button>
+    </div>
+  `
+})
+
+export const meta = { layout: 'minimal' }

package/e2e/kitchen-sink/app/pages/(auth)/protected.ts

@@ -0,0 +1,20 @@
+component('page-protected', () => {
+  // inject() works for SSR and client-side navigations; fall back to the
+  // globalThis store for SSG where router-view loads the chunk before
+  // cer-layout-view has had a chance to call provide().
+  const appProvides = (globalThis as any).__cerPluginProvides as Map<string, unknown> | undefined
+  const greeting = inject<string>('ks-greeting') ?? appProvides?.get('ks-greeting') as string | undefined ?? 'No greeting'
+
+  return html`
+    <div>
+      <h1 data-cy="protected-heading">Protected Page</h1>
+      <p data-cy="protected-note">You are authenticated! This page requires the <code>auth</code> middleware.</p>
+      <p data-cy="plugin-greeting">Plugin says: <strong>${greeting}</strong></p>
+      <button data-cy="logout-btn" @click="${() => { localStorage.removeItem('ks-token'); location.href = '/protected' }}">
+        Log out and reload
+      </button>
+    </div>
+  `
+})
+
+export const meta = { middleware: ['auth'] }

package/e2e/kitchen-sink/app/pages/404.ts

@@ -0,0 +1,9 @@
+component('page-404', () => {
+  return html`
+    <div>
+      <h1 data-cy="not-found-heading">404 — Not Found</h1>
+      <p data-cy="not-found-description">The page you are looking for does not exist.</p>
+      <p><a href="/" data-cy="not-found-home">← Back home</a></p>
+    </div>
+  `
+})

package/e2e/kitchen-sink/app/pages/about.ts

@@ -0,0 +1,17 @@
+component('page-about', () => {
+  useHead({
+    title: 'About — Kitchen Sink',
+    meta: [{ name: 'description', content: 'About the kitchen sink test app.' }],
+  })
+
+  return html`
+    <div>
+      <h1 data-cy="about-heading">About</h1>
+      <p data-cy="about-description">This page uses the <strong>minimal</strong> layout.</p>
+      <p data-cy="about-layout-note">It also calls <code>useHead()</code> to set title and meta tags.</p>
+      <p><a href="/" data-cy="about-back">← Back home</a></p>
+    </div>
+  `
+})
+
+export const meta = { layout: 'minimal' }