@jasonshimmy/vite-plugin-cer-app 0.23.2 → 0.24.0

package/e2e/cypress/e2e/use-page-data.cy.ts

@@ -1,122 +0,0 @@
-/**
- * usePageData() timing regression tests — proves the queueMicrotask fix.
- *
- * Background:
- *   _doHydrate() runs _loadPageForPath (sets __CER_DATA__) then _replace(),
- *   which causes cer-layout-view to create a NEW page element via a queued
- *   microtask. That new element's setup() calls usePageData() to read __CER_DATA__.
- *
- *   Pre-fix:  delete __CER_DATA__ was synchronous → ran before the queued render
- *             → usePageData() saw undefined → returned null.
- *   Post-fix: queueMicrotask(() => delete __CER_DATA__) → delete is queued AFTER
- *             the render microtask → usePageData() reads the data correctly.
- *
- * Proof mechanism:
- *   Each blog page component captures `ssrData ? 'ssr' : 'client'` once, at the
- *   moment the element is created during hydration. In SSR/SSG/dev modes this
- *   value must always be 'ssr'. If it is 'client' the timing bug has regressed.
- */
-
-export {}
-
-const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg' | 'dev'
-
-// ─── Blog list — hard refresh ─────────────────────────────────────────────
-
-describe('usePageData() — blog list hard refresh', () => {
-  if (mode !== 'spa') {
-    it('server response embeds __CER_DATA__ with both post titles', () => {
-      cy.request('/blog').then((res) => {
-        expect(res.body).to.include('__CER_DATA__')
-        expect(res.body).to.include('First Post')
-        expect(res.body).to.include('Second Post')
-      })
-    })
-
-    it('usePageData() is non-null during hydration re-render (data-source = "ssr")', () => {
-      cy.visit('/blog')
-      // Scope to the live shadow DOM (not the DSD pre-render copy) so the assertion
-      // targets the element created during hydration where usePageData() was called.
-      // 'ssr' proves queueMicrotask deferred the delete until after the render ran.
-      cy.get('cer-layout-view').shadow().find('page-blog').shadow()
-        .find('[data-cy=blog-data-source]').should('have.text', 'ssr')
-    })
-  }
-
-  // In SSR and dev modes the /api/posts route exists on the server.
-  // If usePageData() is non-null, the blog page's useOnConnected guard
-  // (`if (ssrData) return`) skips the fetch entirely.
-  if (mode === 'ssr' || mode === 'dev') {
-    it('no /api/posts network request is made — usePageData() skips client fetch', () => {
-      cy.intercept('GET', '/api/posts').as('apiFetch')
-      cy.visit('/blog')
-      // Wait for the page component to fully hydrate before asserting no requests.
-      cy.get('cer-layout-view').shadow().find('page-blog').shadow()
-        .find('[data-cy=blog-list]').should('exist')
-      cy.get('@apiFetch.all').should('have.length', 0)
-    })
-  }
-
-  it('blog posts are visible after hydration (all modes)', () => {
-    cy.visit('/blog')
-    cy.get('[data-cy=blog-item]', { timeout: 8000 }).should('have.length.at.least', 2)
-  })
-})
-
-// ─── Blog detail — hard refresh ───────────────────────────────────────────
-
-describe('usePageData() — blog detail hard refresh', () => {
-  if (mode !== 'spa') {
-    it('server response embeds __CER_DATA__ with post detail', () => {
-      cy.request('/blog/first-post').then((res) => {
-        expect(res.body).to.include('__CER_DATA__')
-        expect(res.body).to.include('First Post')
-      })
-    })
-
-    it('usePageData() is non-null during hydration re-render on detail page', () => {
-      cy.visit('/blog/first-post')
-      cy.get('cer-layout-view').shadow().find('page-blog-slug').shadow()
-        .find('[data-cy=blog-detail-data-source]').should('have.text', 'ssr')
-    })
-  }
-
-  if (mode === 'ssr' || mode === 'dev') {
-    it('no /api/posts/:slug network request is made — usePageData() skips client fetch', () => {
-      cy.intercept('GET', '/api/posts/*').as('apiPostDetail')
-      cy.visit('/blog/first-post')
-      cy.get('cer-layout-view').shadow().find('page-blog-slug').shadow()
-        .find('[data-cy=post-title]').should('exist')
-      cy.get('@apiPostDetail.all').should('have.length', 0)
-    })
-  }
-
-  it('"First Post" title renders on hard refresh (all modes)', () => {
-    cy.visit('/blog/first-post')
-    cy.get('[data-cy=post-title]', { timeout: 8000 }).should('contain', 'First Post')
-  })
-
-  it('"Second Post" title renders on hard refresh (all modes)', () => {
-    cy.visit('/blog/second-post')
-    cy.get('[data-cy=post-title]', { timeout: 8000 }).should('contain', 'Second Post')
-  })
-})
-
-// ─── Client-side navigation (post-hydration data loading) ─────────────────
-
-describe('usePageData() — client-side navigation', () => {
-  it('navigating to blog from home shows posts', () => {
-    cy.visit('/')
-    cy.get('[data-cy=page-nav]').find('a[href="/blog"]').first().click({ force: true })
-    cy.get('[data-cy=blog-item]', { timeout: 8000 }).should('have.length.at.least', 2)
-  })
-
-  it('navigating between blog posts loads correct data each time', () => {
-    cy.visit('/blog/first-post')
-    cy.get('[data-cy=post-title]', { timeout: 8000 }).should('contain', 'First Post')
-    cy.get('[data-cy=post-back]').first().click({ force: true })
-    cy.url().should('include', '/blog')
-    cy.get('[data-cy=blog-link-second-post]', { timeout: 8000 }).first().click({ force: true })
-    cy.get('[data-cy=post-title]', { timeout: 8000 }).should('contain', 'Second Post')
-  })
-})

package/e2e/cypress/e2e/use-state.cy.ts

@@ -1,138 +0,0 @@
-/**
- * useState() e2e tests — verifies globally-keyed reactive state works correctly
- * in all rendering modes (SPA, SSR, SSG).
- *
- * Scenarios covered:
- * - Layout shows the default useState title on pages that don't set it
- * - Layout reacts to pageTitle set by the use-state-test page (client-side)
- * - Mutating useState in the page re-renders the layout reactively
- * - Navigating away from the page resets to the default title
- * - SSR: initial HTML already contains the title set by the loader
- * - SSR: window.__CER_STATE_INIT__ is injected and parsed by the browser
- * - SSR: __CER_STATE_INIT__ JSON structure contains the correct key/value
- *
- * False-positive prevention:
- * The kitchen-sink page uses 'useState Page Title' as its reactive title value.
- * This string does NOT appear anywhere hardcoded in the page template — all
- * occurrences are driven through ${pageTitle.value}. The 'Title Updated!' value
- * used by changeTitle() is similarly unique. This means any assertion on these
- * strings can only pass if the useState mechanism is actually working.
- */
-
-export {}
-
-const mode = Cypress.env('mode') as 'spa' | 'ssr' | 'ssg'
-
-// Helper: find inside the layout-default shadow DOM (post-hydration).
-const layout = () => cy.get('cer-layout-view').shadow().find('layout-default').shadow()
-// Helper: find inside the page-use-state-test shadow DOM (post-hydration).
-const statePage = () => cy.get('cer-layout-view').shadow().find('page-use-state-test').shadow()
-
-describe('useState() — default title in layout', () => {
-  it('shows the default "Kitchen Sink" title on the home page', () => {
-    cy.visit('/')
-    cy.get('[data-cy=layout-page-title]').first().should('contain', 'Kitchen Sink')
-  })
-})
-
-describe('useState() — page sets layout title', () => {
-  beforeEach(() => {
-    cy.visit('/use-state-test')
-    statePage().find('[data-cy=use-state-heading]').should('exist')
-  })
-
-  it('layout shows the title set by the use-state-test page', () => {
-    layout().find('[data-cy=layout-page-title]').should('contain', 'useState Page Title')
-  })
-
-  it('page heading is driven by the pageTitle ref', () => {
-    statePage().find('[data-cy=use-state-heading]').should('contain', 'useState Page Title')
-  })
-
-  it('page-title-display shows the pageTitle ref value', () => {
-    statePage().find('[data-cy=page-title-display]').should('contain', 'useState Page Title')
-  })
-
-  it('clicking "Change Title" updates the layout title reactively', () => {
-    statePage().find('[data-cy=change-title]').click({ force: true })
-    layout().find('[data-cy=layout-page-title]').should('contain', 'Title Updated!')
-  })
-
-  it('clicking "Change Title" also updates the page heading and in-page display', () => {
-    statePage().find('[data-cy=change-title]').click({ force: true })
-    statePage().find('[data-cy=use-state-heading]').should('contain', 'Title Updated!')
-    statePage().find('[data-cy=page-title-display]').should('contain', 'Title Updated!')
-  })
-
-  it('clicking "Reset Title" restores the title in layout and page', () => {
-    statePage().find('[data-cy=change-title]').click({ force: true })
-    layout().find('[data-cy=layout-page-title]').should('contain', 'Title Updated!')
-    statePage().find('[data-cy=reset-title]').click({ force: true })
-    layout().find('[data-cy=layout-page-title]').should('contain', 'useState Page Title')
-    statePage().find('[data-cy=page-title-display]').should('contain', 'useState Page Title')
-  })
-})
-
-describe('useState() — title resets to default when navigating away', () => {
-  it('layout shows default title after navigating from use-state-test to home', () => {
-    cy.visit('/use-state-test')
-    statePage().find('[data-cy=use-state-heading]').should('exist')
-    layout().find('[data-cy=layout-page-title]').should('contain', 'useState Page Title')
-
-    // Navigate to a page that does not set pageTitle
-    cy.get('[data-cy=nav-home]').first().click({ force: true })
-    cy.url().should('eq', Cypress.config('baseUrl') + '/')
-
-    // The layout default kicks in for the home page
-    layout().find('[data-cy=layout-page-title]').should('contain', 'Kitchen Sink')
-  })
-})
-
-// SSR/SSG only: verify the initial server-rendered HTML already contains
-// the page title set by the loader — no JS required.
-// 'useState Page Title' only appears in the rendered output via useState;
-// it is not hardcoded anywhere in the template, so this check cannot pass
-// unless the loader correctly wrote to useState before the layout rendered.
-if (mode !== 'spa') {
-  describe('useState() — SSR: loader sets title before rendering', () => {
-    it('initial HTML from the server already contains the loader-set title', () => {
-      cy.request('/use-state-test').then((resp) => {
-        expect(resp.body).to.include('useState Page Title')
-      })
-    })
-
-    it('server injects __CER_STATE_INIT__ script with the loader-set state', () => {
-      cy.request('/use-state-test').then((resp) => {
-        expect(resp.body).to.include('__CER_STATE_INIT__')
-        expect(resp.body).to.include('useState Page Title')
-      })
-    })
-
-    it('__CER_STATE_INIT__ JSON contains the pageTitle key with the correct value', () => {
-      cy.request('/use-state-test').then((resp) => {
-        // Extract the __CER_STATE_INIT__ assignment from the HTML
-        const match = resp.body.match(/window\.__CER_STATE_INIT__\s*=\s*(\{[^<]+\})/)
-        expect(match, '__CER_STATE_INIT__ assignment found in HTML').to.not.be.null
-        const stateInit = JSON.parse(match![1])
-        expect(stateInit).to.have.property('pageTitle', 'useState Page Title')
-      })
-    })
-
-    it('window.__CER_STATE_INIT__ is present on the browser window after page load', () => {
-      cy.visit('/use-state-test')
-      statePage().find('[data-cy=use-state-heading]').should('exist')
-      cy.window().should('have.property', '__CER_STATE_INIT__')
-      cy.window().its('__CER_STATE_INIT__').should('have.property', 'pageTitle', 'useState Page Title')
-    })
-
-    it('layout title is visible in the SSR-rendered light DOM before JS hydrates', () => {
-      cy.visit('/use-state-test', {
-        onBeforeLoad(win) {
-          // Disable custom elements upgrade so we can inspect the pre-rendered light DOM
-          ;(win as Window & { __CER_HYDRATE_DISABLED__?: boolean }).__CER_HYDRATE_DISABLED__ = true
-        },
-      })
-      cy.get('[data-cy=layout-page-title]').should('contain', 'useState Page Title')
-    })
-  })
-}

package/e2e/cypress/support/commands.ts

@@ -1,120 +0,0 @@
-/**
- * Custom Cypress commands for the kitchen sink e2e suite.
- */
-
-/**
- * Assert that the raw HTML for a route has correct Declarative Shadow DOM structure:
- * - Contains <template shadowrootmode="open"> elements (value must be "open")
- * - Each shadow template has embedded <style> (JIT CSS not stripped to <head>)
- * - No bare (unnamed) <style> blocks in <head>
- * - No loading indicator in the pre-rendered HTML
- * - cer-layout-view has pre-rendered content (not empty)
- */
-Cypress.Commands.add('assertDSDStructure', (path: string) => {
-  cy.request(path).then((response) => {
-    const html: string = response.body
-
-    // Must have DSD templates with value "open" (not "closed", not missing)
-    expect(html, `${path}: should contain <template shadowrootmode="open">`).to.include(
-      'shadowrootmode="open"',
-    )
-
-    // Each shadow template must have its own <style> block (not hoisted to <head>)
-    const templateMatches = [
-      ...html.matchAll(/<template shadowrootmode="open"[^>]*>([\s\S]*?)<\/template>/g),
-    ]
-    expect(
-      templateMatches.length,
-      `${path}: should have at least 1 shadow template with shadowrootmode="open"`,
-    ).to.be.greaterThan(0)
-
-    templateMatches.forEach(([, content], i) => {
-      expect(content, `${path}: template[${i}] must contain its own <style> block`).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 bareStyles = headMatch[1].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 have pre-rendered content (not an empty tag)
-    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
-    }
-  })
-})
-
-/**
- * Assert that the raw HTML for a route contains specific text inside a shadow template.
- * Use this to verify that DSD actually rendered the component's content — not just
- * that templates exist.
- *
- * Since shadow templates can be nested (a component's shadow template may contain
- * child custom elements with their own shadow templates), we verify that the expected
- * text appears anywhere in the raw HTML. assertDSDStructure already confirms that
- * the content is wrapped in <template shadowrootmode="open"> — if templates exist
- * and the attribute/text is in the HTML, it lives inside those templates.
- */
-Cypress.Commands.add('assertDSDContains', (path: string, expectedText: string) => {
-  cy.request(path).then((response) => {
-    const html: string = response.body
-
-    // Confirm we're in DSD territory first
-    expect(html, `${path}: page must have DSD templates before checking content`).to.include(
-      'shadowrootmode="open"',
-    )
-
-    expect(html, `${path}: shadow templates should contain "${expectedText}"`).to.include(
-      expectedText,
-    )
-  })
-})
-
-/**
- * Assert that after JS hydration, a custom element has a live shadow root.
- * This confirms that DSD was processed by the browser and the element was upgraded.
- */
-Cypress.Commands.add('assertShadowRootLive', (selector: string) => {
-  cy.window().then((win) => {
-    const el = win.document.querySelector(selector)
-    expect(el, `${selector}: element should exist in the DOM`).to.not.be.null
-    expect(
-      (el as Element & { shadowRoot: ShadowRoot | null }).shadowRoot,
-      `${selector}: should have a live shadow root after hydration`,
-    ).to.not.be.null
-  })
-})
-
-/**
- * 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 {
-      assertDSDStructure(path: string): Chainable<void>
-      assertDSDContains(path: string, expectedText: string): Chainable<void>
-      assertShadowRootLive(selector: string): Chainable<void>
-      getShadow(selector: string): Chainable<JQuery<HTMLElement>>
-    }
-  }
-}

package/e2e/cypress/support/e2e.ts

@@ -1,10 +0,0 @@
-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/e2e/cypress/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2022",
-    "lib": ["ES2022", "DOM"],
-    "types": ["cypress"],
-    "strict": true,
-    "esModuleInterop": true,
-    "skipLibCheck": true,
-    "moduleResolution": "bundler",
-    "module": "ESNext",
-    "noEmit": true,
-  },
-  "include": ["**/*.cy.ts", "support/**/*.ts"]
-}

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

@@ -1,8 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,18 +0,0 @@
-component('page-error', () => {
-  const props = useProps<{ error: string; status: string }>({
-    error: 'An unexpected error occurred.',
-    status: '500',
-  })
-
-  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">
-        Error ${props.status}
-      </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/admin.ts

@@ -1,13 +0,0 @@
-component('layout-admin', () => {
-  return html`
-    <div data-cy="admin-layout">
-      <aside data-cy="admin-sidebar">
-        <p>Admin Panel</p>
-        <a href="/admin/dashboard" data-cy="admin-nav-dashboard">Dashboard</a>
-      </aside>
-      <section data-cy="admin-content">
-        <slot></slot>
-      </section>
-    </div>
-  `
-})

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

@@ -1,25 +0,0 @@
-component('layout-default', () => {
-  const pageTitle = useState('pageTitle', 'Kitchen Sink')
-
-  return html`
-    <div>
-      <header data-cy="site-header">
-        <span data-cy="layout-page-title">${pageTitle.value}</span>
-        <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>
-          <a data-cy="nav-use-state-test" href="/use-state-test">useState Test</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/group.ts

@@ -1,9 +0,0 @@
-// P2-1: Group layout — wraps all pages in the group-meta-test directory.
-component('layout-group', () => {
-  return html`
-    <div data-cy="group-layout">
-      <header>Group Layout</header>
-      <main><slot></slot></main>
-    </div>
-  `
-})

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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,9 +0,0 @@
-// Route middleware — redirects to /login if not authenticated.
-// Set localStorage.setItem('ks-token', '1') to simulate login.
-export default defineMiddleware((_to, _from) => {
-  const isLoggedIn = typeof localStorage !== 'undefined'
-    ? !!localStorage.getItem('ks-token')
-    : false
-
-  return isLoggedIn ? true : '/login'
-})

package/e2e/kitchen-sink/app/middleware/custom-log.ts

@@ -1,4 +0,0 @@
-// P2-1: A no-op middleware used to verify page-level override of group middleware.
-export default defineMiddleware((_to, _from, next) => {
-  next()
-})

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

@@ -1,7 +0,0 @@
-// P2-1: Group auth middleware — redirects unauthorized users.
-// Adds a visible guard marker so e2e tests can detect it was applied.
-export default defineMiddleware(() => {
-  // Returning a string path redirects to that route.
-  // In a real app this would check auth state first.
-  return '/group-auth-blocked'
-})

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

@@ -1,14 +0,0 @@
-// Wrapper middleware that uses next() to run code before and after the rest
-// of the middleware chain.  Stores a breadcrumb in sessionStorage so e2e tests
-// can verify that next() was called in the correct order.
-export default defineMiddleware(async (_to, _from, next) => {
-  if (typeof sessionStorage !== 'undefined') {
-    const prev = sessionStorage.getItem('mw-log') ?? ''
-    sessionStorage.setItem('mw-log', `${prev}before:`)
-  }
-  await next()
-  if (typeof sessionStorage !== 'undefined') {
-    const prev = sessionStorage.getItem('mw-log') ?? ''
-    sessionStorage.setItem('mw-log', `${prev}after`)
-  }
-})

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

@@ -1,13 +0,0 @@
-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

@@ -1,16 +0,0 @@
-component('page-protected', () => {
-  const greeting = useInject<string>('ks-greeting', '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

@@ -1,9 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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' }

package/e2e/kitchen-sink/app/pages/admin/_layout.ts

@@ -1 +0,0 @@
-export default 'admin'

package/e2e/kitchen-sink/app/pages/admin/dashboard.ts

@@ -1,11 +0,0 @@
-component('page-admin-dashboard', () => {
-  const config = useRuntimeConfig()
-  const appName = config.public?.appName ?? 'Kitchen Sink'
-
-  return html`
-    <div>
-      <h1 data-cy="admin-dashboard-heading">Admin Dashboard</h1>
-      <p data-cy="admin-app-name">App: ${appName}</p>
-    </div>
-  `
-})

package/e2e/kitchen-sink/app/pages/async-component-error-test.ts

@@ -1,18 +0,0 @@
-// P2-4: Page that uses defineAsyncComponent with a failing loader.
-defineAsyncComponent(
-  'ks-async-fail',
-  () => Promise.reject(new Error('Async component load failed')),
-  {
-    loading: () => html`<p>Loading…</p>`,
-    error: () => html`<p data-cy="async-component-error">Failed to load async component</p>`,
-  },
-)
-
-component('page-async-component-error-test', () => {
-  return html`
-    <div>
-      <h1 data-cy="async-error-page-heading">Async Component Error Test</h1>
-      <ks-async-fail></ks-async-fail>
-    </div>
-  `
-})