@empire-builder-kit/nx 1.0.0-beta.9 → 1.0.0-rc.2

package/src/generators/slice/built-in-plan-frontend-files.js

@@ -0,0 +1,2233 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.renderProductFrontendFiles = renderProductFrontendFiles;
+const built_in_plan_shared_js_1 = require("./built-in-plan-shared.js");
+const index_js_1 = require("../../frontend-security/index.js");
+/** @internal */
+function renderProductFrontendFiles(name, pascalName) {
+    const states = [
+        'loading',
+        'empty',
+        'success',
+        'validation',
+        'partial',
+        'forbidden',
+        'not-found',
+        'failure',
+        'stale',
+        'offline',
+    ];
+    return {
+        'frontend/contract.json': (0, built_in_plan_shared_js_1.json)({
+            accessibility: {
+                automatedScan: 'axe-rendered-state',
+                conformanceTarget: 'WCAG-2.2-AA',
+                manualEvidence: [
+                    'keyboard',
+                    'focus',
+                    'announcements',
+                    'zoom-and-reflow',
+                    'reduced-motion',
+                    'assistive-technology',
+                ],
+                nativeBeforeAria: true,
+                zeroViolationsIsConformanceClaim: false,
+            },
+            browserSecurity: {
+                browserStorage: 'no-sensitive-data',
+                clientGraphResolution: 'typescript-tsconfig-local-module-closure',
+                clientPublicConfiguration: ['NEXT_PUBLIC_API_URL'],
+                effectiveResponseValidation: true,
+                foundationBaselineMayNotBeWeakened: true,
+                headerApplicationPoint: 'next-proxy-request-nonce',
+                headerProfiles: ['local-development', 'deployed-https'],
+                productionInlineAuthority: 'per-request-cryptographic-nonce',
+                sliceHeaderAuthority: 'frontend/security-headers.json#csp-only',
+                serverOnlyMarker: 'server-only',
+            },
+            deploymentProof: {
+                generatedStandardProfile: 'server-rendered-opennext',
+                privateStaticFirstProfile: 'gupta-leary-site',
+                staticExportSliceGeneration: 'post-1.0',
+            },
+            evidence: {
+                baselineProfile: 'browser-and-operating-system',
+                screenshotsContainOnlyNeutralSyntheticContent: true,
+                visualBaseline: 'frontend/visual-baselines.json',
+                visualObservations: '.ebk/evidence/frontend/frontend-visual-observations.json',
+            },
+            ownership: {
+                adopterOwned: ['brand', 'content', 'product-interaction', 'theme'],
+                managed: [
+                    'validators',
+                    'neutral-proof-fixture',
+                    'default-test-targets',
+                ],
+                seeded: [
+                    'frontend-contract',
+                    'route-state-inventory',
+                    'security-header-policy',
+                    'support-policy',
+                    'visual-baseline',
+                    'accessibility-runbook',
+                ],
+            },
+            postV1Exclusions: [
+                'organization-design-system-generation',
+                'non-slice-recipe-distribution',
+                'static-export-slice-generation',
+                'operations-console-ui',
+                'hosted-component-marketplace',
+            ],
+            publicConfiguration: {
+                allowlist: ['NEXT_PUBLIC_API_URL'],
+                dynamicEnvironmentLookup: 'forbidden-in-client-graph',
+            },
+            schemaVersion: 1,
+            semanticQueries: ['role', 'name', 'description', 'state'],
+            slice: name,
+            stateFixture: `/${name}/_ebk/frontend-states`,
+            states,
+        }),
+        'frontend/support-policy.json': (0, built_in_plan_shared_js_1.json)({
+            assistiveTechnology: [
+                {
+                    browser: 'adopter-selected',
+                    screenReader: 'adopter-selected',
+                    status: 'manual-proof-required',
+                },
+            ],
+            browserFamilies: [
+                {
+                    family: 'chromium',
+                    policy: 'current-stable',
+                    status: 'framework-default-executed',
+                },
+                {
+                    family: 'firefox',
+                    policy: 'current-stable',
+                    status: 'unevaluated-adopter-owned',
+                },
+                {
+                    family: 'webkit',
+                    policy: 'current-stable',
+                    status: 'unevaluated-adopter-owned',
+                },
+            ],
+            inputModalities: ['keyboard', 'pointer', 'touch'],
+            languageDirections: ['ltr', 'rtl-review-when-applicable'],
+            note: 'The framework default executes Chromium only. Firefox, WebKit, and assistive-technology status remain unevaluated until adopter-owned evidence exists; upgrades do not silently change this seeded policy.',
+            schemaVersion: 1,
+            slice: name,
+            viewportClasses: ['narrow', 'medium', 'wide'],
+        }),
+        'frontend/routes.json': (0, built_in_plan_shared_js_1.json)({
+            routes: [
+                {
+                    actor: 'public',
+                    feature: 'product-entry',
+                    path: `/${name}`,
+                    readAuthorization: 'public-content-only',
+                    states: ['success', 'failure'],
+                },
+                {
+                    actor: 'unauthenticated-user',
+                    feature: 'sign-in',
+                    mutationAuthorization: 'server-authentication-and-session-cookie-plan',
+                    path: `/${name}/sign-in`,
+                    states: [
+                        'initial',
+                        'loading',
+                        'validation',
+                        'success',
+                        'failure',
+                        'offline',
+                    ],
+                },
+                {
+                    actor: 'unauthenticated-user',
+                    feature: 'password-reset',
+                    mutationAuthorization: 'server-normalized-non-enumerating-reset-request',
+                    path: `/${name}/password-reset`,
+                    states: [
+                        'initial',
+                        'loading',
+                        'validation',
+                        'success',
+                        'failure',
+                        'offline',
+                    ],
+                },
+                {
+                    actor: 'synthetic-proof-only',
+                    feature: 'neutral-frontend-states',
+                    path: `/${name}/_ebk/frontend-states`,
+                    readAuthorization: 'public-neutral-content-only',
+                    states,
+                },
+            ],
+            schemaVersion: 1,
+            slice: name,
+        }),
+        'frontend/security-headers.json': (0, built_in_plan_shared_js_1.json)((0, index_js_1.sliceFrontendSecurityHeaderPolicy)(name)),
+        'frontend/visual-baselines.json': (0, built_in_plan_shared_js_1.json)({
+            records: [],
+            schemaVersion: 1,
+            slice: name,
+        }),
+        'docs/frontend-accessibility.md': `# ${pascalName} frontend and accessibility
+
+The Standard Slice uses a server-first Next.js App Router boundary. Routes and
+layouts own URL structure, metadata, composition, and coarse loading or error
+states. Server Components may resolve identity, authorization, configuration,
+secrets, and protected data. Client Components are the smallest possible
+interaction boundary and may receive only intentional serializable view models.
+Application policy, validation, and mutations remain server-authoritative.
+
+The generated Standard profile proves server-rendered OpenNext behavior. The
+required static-first proof belongs to the private \`gupta-leary-site\`
+application. Static-export Slice generation and an organization design-system
+generator are post-1.0 work; do not imitate either contract inside this Slice.
+
+## Ownership
+
+\`web/src/app/globals.css\`, product content, page composition, brand, and theme
+remain seeded Slice-owned material. Framework regeneration must preserve them.
+The \`/_ebk/frontend-states\` route is a managed neutral proof fixture, not a
+product component catalog and not an import surface for product code.
+
+The seeded files in \`frontend/\` declare this Slice's route/state, support, and
+visual-evidence decisions. Review them when browser support or a journey
+changes; framework upgrades must not silently rewrite adopter commitments.
+
+## Server and client boundaries
+
+- Mark every secret or protected-data module with \`import 'server-only'\`.
+- Client code may read only the literal public keys in
+  \`frontend/contract.json\`. A \`NEXT_PUBLIC_\` prefix means public, not safe.
+- Never pass ORM records, credentials, authorization policy, or protected
+  identifiers into a Client Component.
+- Do not put protected values in URLs, browser storage, analytics, screenshots,
+  logs, or error copy.
+- Raw HTML, dynamic environment access, and a client-to-server-only import fail
+  \`frontend-boundaries\`.
+
+## Response-header ownership
+
+The Foundation owns HTTPS, deployed HSTS, and the minimum Permissions-Policy,
+Referrer-Policy, and X-Content-Type-Options values in
+\`packages/foundation/contracts/frontend-security-headers.json\`. This Slice
+owns only its enforced CSP template in \`frontend/security-headers.json\`. The
+generated Next 16 \`proxy.ts\` creates a cryptographically random nonce for
+each deployed request, composes those disjoint sources, places the materialized
+CSP on the request so Next can nonce its framework output, and applies the same
+headers to the response. Do not add the same headers to Next configuration,
+route handlers, OpenNext, or the Foundation Router. Case-insensitive duplicates
+and cross-owner declarations fail before the response is rendered.
+
+The deployed profile intentionally forces dynamic rendering: static generation,
+ISR, PPR, and shared CDN caching cannot safely reuse a request nonce. The
+standard SST/OpenNext server keeps Proxy inside the server runtime. A future
+external Proxy placement must preserve the request-header handoff and the exact
+response policy before it can replace this authority.
+
+The managed \`/_ebk/frontend-csp\` response is the one reviewed raw-HTML proof
+adapter. It contains neutral synthetic parser-inserted script and style pairs so
+the deployed browser check can prove that matching nonces execute and missing
+nonces are refused. Product routes must not import or imitate that adapter.
+
+The local-development profile omits HSTS over loopback HTTP and permits only the
+development connections needed by Next. Staging and production are locked to
+the deployed-https profile. Local packed proof can exercise the deployed
+response composition over loopback, but only a deployed HTTPS observation is
+hosted transport evidence. Header observation aborts after ten seconds;
+\`EBK_FRONTEND_HEADER_FETCH_TIMEOUT_MS\` may lower that bound for a constrained
+runner but cannot increase it.
+
+## Route and state review
+
+For every product route, record the actor, read authorization, mutation
+authorization, view model, freshness, applicable states, and recovery behavior.
+The neutral fixture demonstrates loading, empty, success, validation, partial,
+forbidden, not-found, failure, stale, and offline states. Product fixtures
+should reproduce equivalent states with synthetic inputs rather than production
+data.
+
+Every mutation authenticates, authorizes, validates, normalizes, and applies
+idempotency or concurrency behavior on the server. A hidden or disabled control
+is never authorization. Validation errors remain associated with their fields
+and are summarized or announced when useful.
+
+## Required checks
+
+Run the Slice targets for:
+
+- static accessibility lint and client/server boundary validation;
+- rendered-state accessibility scans;
+- keyboard, focus restoration, and announcement behavior;
+- narrow viewport reflow and reduced motion;
+- effective local and deployed response headers; and
+- stable neutral screenshots and the visual report.
+
+Automated scans identify only a subset of accessibility barriers and are not a
+WCAG conformance claim. Critical journeys additionally require a documented
+keyboard, zoom/reflow, and assistive-technology pass. Record the browser,
+assistive technology, versions, journey, findings, repairs, and reviewer
+without copying user content.
+
+An accessibility quarantine uses the shared \`testing/quarantine.json\` record
+and adds an \`accessibility\` object containing the affected WCAG criteria,
+journey, and an approver distinct from the owner. The exception must remain
+bounded, supplemental, and linked to remediation. It cannot waive a security
+header failure, leaked server module, unresolved \`EBK-SECURITY\` or
+\`EBK-BLOCKER\` marker, or the only proof of a protected journey.
+
+## Visual reports
+
+Browser proof writes synthetic screenshots and observations under
+\`.ebk/evidence/frontend/\`. The committed
+\`frontend/visual-baselines.json\` contains digests and no image data. Updating
+it is an intentional local development action with a work reference; CI and
+protected stages refuse updates. Baselines are browser-and-operating-system
+specific so one reviewed profile cannot silently replace another. Review the
+retained screenshots, semantic tests, accessibility results, browser console,
+and network results together.
+
+## Larger design systems and external starters
+
+V1 manages validators, test adapters, and this neutral proof fixture. It does
+not publish product-facing components from the framework. Product components
+remain Slice-owned; future reusable wrappers belong to an organization-owned
+design-system project only after that separate post-1.0 generator contract is
+implemented. Until then, keep brand and theme decisions in the Slice and do not
+create a second framework token authority.
+
+An external non-Slice starter needs an accepted recipe, ownership, upgrade, and
+verification contract. The v1 Slice Blueprint must not be stretched to
+distribute one implicitly. This boundary is deliberate even when an example
+looks reusable.
+
+## Manual review
+
+Confirm, at minimum:
+
+1. landmark and heading order, names, roles, descriptions, and state;
+2. complete keyboard operation, visible focus, logical order, dialog
+   containment, and focus restoration;
+3. validation, status, loading, and recovery announcements without excessive
+   live-region noise;
+4. text and non-text contrast, non-color cues, target size, narrow reflow, 200%
+   text sizing, browser zoom, and long-content expansion;
+5. reduced-motion behavior and absence of dangerous flashing;
+6. useful behavior when images, fonts, analytics, or optional enhancement fail;
+7. effective HTTPS headers and enforced CSP rather than report-only alone; and
+8. no credentials, personal data, protected identifiers, or raw form values in
+   retained evidence.
+`,
+        'web/src/lib/public-configuration.ts': `export const PUBLIC_WEB_CONFIGURATION_KEYS = [
+  'NEXT_PUBLIC_API_URL',
+] as const;
+
+export interface PublicWebConfiguration {
+  apiUrl?: string;
+}
+
+function publicUrl(value: string | undefined): string | undefined {
+  const trimmed = value?.trim();
+  if (!trimmed) return undefined;
+  const parsed = new URL(trimmed);
+  const local =
+    parsed.hostname === '127.0.0.1' ||
+    parsed.hostname === 'localhost' ||
+    parsed.hostname === '::1';
+  if (
+    (parsed.protocol !== 'https:' && !(local && parsed.protocol === 'http:')) ||
+    parsed.username ||
+    parsed.password ||
+    parsed.search ||
+    parsed.hash
+  ) {
+    throw new Error('NEXT_PUBLIC_API_URL must be an HTTPS URL without credentials, query, or fragment.');
+  }
+  return parsed.href.replace(/\\/$/, '');
+}
+
+export function readPublicWebConfiguration(
+  environment: Readonly<{ NEXT_PUBLIC_API_URL?: string }> = {
+    NEXT_PUBLIC_API_URL: process.env.NEXT_PUBLIC_API_URL,
+  },
+): PublicWebConfiguration {
+  const apiUrl = publicUrl(environment.NEXT_PUBLIC_API_URL);
+  return apiUrl ? { apiUrl } : {};
+}
+`,
+        'web/src/lib/server-configuration.ts': `import 'server-only';
+
+export type ServerWebConfigurationKey =
+  | 'AUTH_CLIENT_ID'
+  | 'EBK_SOURCE_COMMIT'
+  | 'EBK_STAGE';
+
+export function requireServerWebConfiguration(
+  key: ServerWebConfigurationKey,
+  environment: Readonly<Record<string, string | undefined>> = process.env,
+): string {
+  const value = environment[key]?.trim();
+  if (!value) {
+    throw new Error(key + ' is required by the ${name} server runtime.');
+  }
+  return value;
+}
+`,
+        'web/src/app/%5Febk/frontend-states/fixture.module.css': `.fixture {
+  background: #ffffff;
+  color: #172033;
+  font: 1rem/1.5 system-ui, sans-serif;
+  margin: 0 auto;
+  max-width: 72rem;
+  overflow-wrap: anywhere;
+  padding: 1.5rem;
+}
+
+.fixture a {
+  color: #0645ad;
+  text-decoration-thickness: .12em;
+  text-underline-offset: .16em;
+}
+
+.fixture :where(a, button, input):focus-visible {
+  outline: .2rem solid #b94a00;
+  outline-offset: .2rem;
+}
+
+.fixture :where(button, input) {
+  font: inherit;
+  min-height: 2.75rem;
+}
+
+.fixture button {
+  background: #153f78;
+  border: .125rem solid #153f78;
+  border-radius: .25rem;
+  color: #ffffff;
+  cursor: pointer;
+  padding: .55rem 1rem;
+}
+
+.fixture button:hover {
+  background: #0b2d5b;
+}
+
+.fixture nav ul,
+.stateNavigation ul,
+.pagination {
+  display: flex;
+  flex-wrap: wrap;
+  gap: .75rem;
+  list-style: none;
+  padding: 0;
+}
+
+.stateNavigation a {
+  align-items: center;
+  display: inline-flex;
+  min-height: 2.75rem;
+  padding-inline: .5rem;
+}
+
+.panel {
+  border: .125rem solid #52657d;
+  border-radius: .5rem;
+  margin-block: 1rem;
+  padding: 1rem;
+}
+
+.error {
+  border-color: #8b1d2c;
+}
+
+.field {
+  display: grid;
+  gap: .35rem;
+  margin-block: 1rem;
+  max-width: 32rem;
+}
+
+.field input {
+  border: .125rem solid #52657d;
+  border-radius: .25rem;
+  padding: .5rem;
+}
+
+.field input[aria-invalid='true'] {
+  border-color: #8b1d2c;
+}
+
+.tableWrapper {
+  max-width: 100%;
+  overflow-x: auto;
+}
+
+.table {
+  border-collapse: collapse;
+  inline-size: 100%;
+}
+
+.table :where(th, td) {
+  border: .0625rem solid #52657d;
+  padding: .5rem;
+  text-align: start;
+}
+
+.dialog {
+  background: #ffffff;
+  border: .125rem solid #172033;
+  border-radius: .5rem;
+  color: #172033;
+  max-inline-size: min(32rem, calc(100% - 2rem));
+  padding: 1.25rem;
+}
+
+.dialog::backdrop {
+  background: rgb(12 20 34 / 70%);
+}
+
+.motionSample {
+  transition: transform 180ms ease;
+}
+
+.motionSample:hover {
+  transform: translateY(-.125rem);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .fixture *,
+  .fixture *::before,
+  .fixture *::after {
+    animation-duration: .01ms !important;
+    animation-iteration-count: 1 !important;
+    scroll-behavior: auto !important;
+    transition-duration: .01ms !important;
+  }
+}
+
+@media (max-width: 30rem) {
+  .fixture {
+    padding: .75rem;
+  }
+}
+`,
+        'web/src/app/%5Febk/frontend-states/states.ts': `export const FRONTEND_FIXTURE_STATES = ${JSON.stringify(states)} as const;
+export type FrontendFixtureState = (typeof FRONTEND_FIXTURE_STATES)[number];
+`,
+        'web/src/app/%5Febk/frontend-states/fixture.tsx': `'use client';
+
+import { useRef, useState } from 'react';
+import styles from './fixture.module.css';
+import type { FrontendFixtureState } from './states';
+
+function StatePanel({ state }: Readonly<{ state: FrontendFixtureState }>) {
+  if (state === 'loading') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Loading records</h2>
+      <p aria-live="polite" role="status">Loading the current records.</p>
+    </section>;
+  }
+  if (state === 'empty') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">No records yet</h2>
+      <p>Create the first record when the required details are available.</p>
+      <button type="button">Create a record</button>
+    </section>;
+  }
+  if (state === 'validation') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Review the form</h2>
+      <div className={styles.error} role="alert">
+        <p>There is one problem. Correct it and submit again.</p>
+        <a href="#fixture-name">Enter a record name</a>
+      </div>
+      <div className={styles.field}>
+        <label htmlFor="fixture-name">Record name</label>
+        <input
+          aria-describedby="fixture-name-error"
+          aria-invalid="true"
+          id="fixture-name"
+          name="name"
+          required
+        />
+        <p id="fixture-name-error">Enter a record name.</p>
+      </div>
+      <button type="button">Save record</button>
+    </section>;
+  }
+  if (state === 'partial') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Records partially available</h2>
+      <p role="status">Recent records are available. Archived records could not be loaded.</p>
+      <button type="button">Retry archived records</button>
+    </section>;
+  }
+  if (state === 'forbidden') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Access not permitted</h2>
+      <p>Your signed-in account cannot view these records.</p>
+      <a href="/${name}">Return to ${pascalName}</a>
+    </section>;
+  }
+  if (state === 'not-found') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Record not found</h2>
+      <p>It may have been removed or the link may be incorrect.</p>
+      <a href="/${name}">Return to ${pascalName}</a>
+    </section>;
+  }
+  if (state === 'failure') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Records unavailable</h2>
+      <p role="alert">The request failed. Support reference: ui-safe-0001.</p>
+      <button type="button">Try again</button>
+    </section>;
+  }
+  if (state === 'stale') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Newer changes are available</h2>
+      <p role="status">This view is out of date. Review changes before saving.</p>
+      <button type="button">Review newer changes</button>
+    </section>;
+  }
+  if (state === 'offline') {
+    return <section aria-labelledby="state-heading" className={styles.panel}>
+      <h2 id="state-heading">Connection interrupted</h2>
+      <p role="status">Your change was not sent. Reconnect and try again.</p>
+      <button type="button">Retry connection</button>
+    </section>;
+  }
+  return <section aria-labelledby="state-heading" className={styles.panel}>
+    <h2 id="state-heading">Record saved</h2>
+    <p role="status">The synthetic record was saved.</p>
+  </section>;
+}
+
+export function NeutralFrontendStateFixture({
+  state,
+}: Readonly<{ state: FrontendFixtureState }>) {
+  const dialog = useRef<HTMLDialogElement>(null);
+  const dialogClose = useRef<HTMLButtonElement>(null);
+  const dialogTrigger = useRef<HTMLButtonElement>(null);
+  const [dialogOpen, setDialogOpen] = useState(false);
+
+  function openDialog() {
+    setDialogOpen(true);
+    dialog.current?.showModal();
+    queueMicrotask(() => dialogClose.current?.focus());
+  }
+
+  function restoreDialogFocus() {
+    setDialogOpen(false);
+    dialogTrigger.current?.focus();
+  }
+
+  return <div className={styles.fixture}>
+    <StatePanel state={state} />
+
+    <section aria-labelledby="actions-heading" className={styles.panel}>
+      <h2 id="actions-heading">Semantic actions</h2>
+      <p>Use a link to navigate and a button to change the current interface.</p>
+      <a href="/${name}">Return to ${pascalName}</a>
+      {' '}
+      <button
+        aria-expanded={dialogOpen}
+        aria-haspopup="dialog"
+        className={styles.motionSample}
+        onClick={openDialog}
+        ref={dialogTrigger}
+        type="button"
+      >
+        Open details dialog
+      </button>
+    </section>
+
+    <section aria-labelledby="table-heading" className={styles.panel}>
+      <h2 id="table-heading">Synthetic records</h2>
+      <div className={styles.tableWrapper}>
+        <table className={styles.table}>
+          <caption>Neutral fixture record status</caption>
+          <thead><tr><th scope="col">Record</th><th scope="col">Status</th></tr></thead>
+          <tbody><tr><th scope="row">Example A</th><td>Ready</td></tr></tbody>
+        </table>
+      </div>
+      <nav aria-label="Record pages">
+        <ul className={styles.pagination}>
+          <li><a aria-current="page" href="?state=success">Page 1</a></li>
+          <li><a href="?state=empty">Page 2</a></li>
+        </ul>
+      </nav>
+    </section>
+
+    <dialog
+      aria-labelledby="details-dialog-title"
+      className={styles.dialog}
+      onCancel={restoreDialogFocus}
+      onClose={restoreDialogFocus}
+      ref={dialog}
+    >
+      <h2 id="details-dialog-title">Synthetic record details</h2>
+      <p>This dialog contains neutral proof content only.</p>
+      <button onClick={() => dialog.current?.close()} ref={dialogClose} type="button">
+        Close details
+      </button>
+    </dialog>
+  </div>;
+}
+`,
+        'web/src/app/%5Febk/frontend-states/page.tsx': `import type { Metadata } from 'next';
+import { NeutralFrontendStateFixture } from './fixture';
+import styles from './fixture.module.css';
+import {
+  FRONTEND_FIXTURE_STATES,
+  type FrontendFixtureState,
+} from './states';
+
+export const metadata: Metadata = {
+  robots: { follow: false, index: false },
+  title: '${pascalName} neutral frontend states',
+};
+
+function fixtureState(value: string | undefined): FrontendFixtureState {
+  return FRONTEND_FIXTURE_STATES.find((state) => state === value) ?? 'success';
+}
+
+export default async function FrontendStates({
+  searchParams,
+}: Readonly<{ searchParams: Promise<{ state?: string }> }>) {
+  const state = fixtureState((await searchParams).state);
+  return <main>
+    <h1>${pascalName} neutral frontend states</h1>
+    <p>
+      This managed route contains synthetic accessibility evidence, not product
+      content or a shared design system.
+    </p>
+    <nav aria-label="Frontend fixture states" className={styles.stateNavigation}>
+      <ul>
+        {FRONTEND_FIXTURE_STATES.map((candidate) => <li key={candidate}>
+          <a
+            aria-current={candidate === state ? 'page' : undefined}
+            href={'/${name}/_ebk/frontend-states?state=' + candidate}
+          >
+            {candidate}
+          </a>
+        </li>)}
+      </ul>
+    </nav>
+    <NeutralFrontendStateFixture state={state} />
+  </main>;
+}
+`,
+        'web/src/app/%5Febk/frontend-states/page.spec.tsx': `import { renderToStaticMarkup } from 'react-dom/server';
+import { describe, expect, it } from 'vitest';
+import { NeutralFrontendStateFixture } from './fixture';
+import { FRONTEND_FIXTURE_STATES } from './states';
+
+describe('neutral frontend state fixture', () => {
+  it.each(FRONTEND_FIXTURE_STATES)('renders the %s state with one named region', (state) => {
+    const html = renderToStaticMarkup(<NeutralFrontendStateFixture state={state} />);
+    expect(html).toContain('id="state-heading"');
+    expect(html).not.toContain('dangerouslySetInnerHTML');
+    expect(html).not.toContain('placeholder');
+  });
+
+  it('keeps the dialog, table, pagination, field, and status semantics inspectable', () => {
+    const html = renderToStaticMarkup(<NeutralFrontendStateFixture state="validation" />);
+    expect(html).toContain('<dialog');
+    expect(html).toContain('aria-labelledby="details-dialog-title"');
+    expect(html).toContain('<caption>');
+    expect(html).toContain('aria-label="Record pages"');
+    expect(html).toContain('aria-invalid="true"');
+    expect(html).toContain('role="alert"');
+  });
+});
+`,
+        'web/src/app/%5Febk/frontend-csp/route.ts': `import 'server-only';
+import { headers } from 'next/headers';
+
+const noncePattern = /^[A-Za-z0-9+/_-]{16,128}={0,2}$/;
+
+export async function GET(): Promise<Response> {
+  const nonce = (await headers()).get('x-nonce') ?? '';
+  if (!noncePattern.test(nonce)) {
+    return new Response('Strict CSP proof requires the request nonce.', {
+      status: 500,
+    });
+  }
+  return new Response(
+    '<!doctype html><html><head>' +
+      '<style nonce="' + nonce + '">#approved-style{color:rgb(1,2,3)}</style>' +
+      '<style>#unapproved-style{color:rgb(4,5,6)}</style>' +
+      '</head><body>' +
+      '<h1>${pascalName} strict CSP proof</h1>' +
+      '<p id="approved-style">Approved style</p>' +
+      '<p id="unapproved-style">Unapproved style</p>' +
+      '<script nonce="' + nonce + '">' +
+        "document.documentElement.dataset.ebkApprovedInline='executed'" +
+      '</script>' +
+      '<script>' +
+        "document.documentElement.dataset.ebkUnapprovedInline='executed'" +
+      '</script>' +
+      '</body></html>',
+    { headers: { 'Content-Type': 'text/html; charset=utf-8' } },
+  );
+}
+`,
+        'scripts/frontend-boundaries.mjs': `import {
+  lstatSync,
+  mkdirSync,
+  opendirSync,
+  readFileSync,
+  writeFileSync,
+} from 'node:fs';
+import { dirname, extname, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import ts from 'typescript';
+
+const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const sourceRoot = join(projectRoot, 'web', 'src');
+const contractPath = join(projectRoot, 'frontend', 'contract.json');
+const tsconfigPath = join(projectRoot, 'web', 'tsconfig.json');
+const SOURCE_EXTENSIONS = new Set(['.cjs', '.js', '.jsx', '.mjs', '.ts', '.tsx']);
+const CLIENT_ASSET_EXTENSIONS = new Set(['.css']);
+const MAX_SOURCE_DIRECTORIES = 512;
+const MAX_SOURCE_FILES = 1_024;
+const MAX_SOURCE_FILE_BYTES = 1024 * 1024;
+const MAX_SOURCE_BYTES = 16 * 1024 * 1024;
+const MAX_TRAVERSAL_ENTRIES = 20_000;
+
+function portable(path) {
+  return relative(projectRoot, path).split(sep).join('/');
+}
+
+function lineOf(sourceFile, node) {
+  return sourceFile.getLineAndCharacterOfPosition(node.getStart(sourceFile)).line + 1;
+}
+
+function sourcePaths(root) {
+  const paths = [];
+  const findings = [];
+  const pending = [root];
+  let directories = 0;
+  let entries = 0;
+  let totalBytes = 0;
+  let traversalAborted = false;
+  while (pending.length > 0 && !traversalAborted) {
+    const directory = pending.pop();
+    directories += 1;
+    if (directories > MAX_SOURCE_DIRECTORIES) {
+      findings.push({
+        classification: 'source-directory-limit-exceeded',
+        limit: MAX_SOURCE_DIRECTORIES,
+        path: portable(directory),
+      });
+      traversalAborted = true;
+      break;
+    }
+    const handle = opendirSync(directory);
+    try {
+      let entry;
+      while ((entry = handle.readSync()) !== null) {
+        entries += 1;
+        if (entries > MAX_TRAVERSAL_ENTRIES) {
+          findings.push({
+            classification: 'source-entry-limit-exceeded',
+            limit: MAX_TRAVERSAL_ENTRIES,
+            path: portable(directory),
+          });
+          traversalAborted = true;
+          break;
+        }
+        const path = join(directory, entry.name);
+        if (entry.isSymbolicLink()) {
+          findings.push({
+            classification: 'source-symlink-forbidden',
+            path: portable(path),
+          });
+        } else if (entry.isDirectory()) {
+          pending.push(path);
+        } else if (entry.isFile() && SOURCE_EXTENSIONS.has(extname(entry.name))) {
+          const size = lstatSync(path).size;
+          if (size > MAX_SOURCE_FILE_BYTES) {
+            findings.push({
+              bytes: size,
+              classification: 'source-file-byte-limit-exceeded',
+              limit: MAX_SOURCE_FILE_BYTES,
+              path: portable(path),
+            });
+            continue;
+          }
+          if (paths.length >= MAX_SOURCE_FILES) {
+            findings.push({
+              classification: 'source-file-limit-exceeded',
+              limit: MAX_SOURCE_FILES,
+              path: portable(path),
+            });
+            traversalAborted = true;
+            break;
+          }
+          if (totalBytes + size > MAX_SOURCE_BYTES) {
+            findings.push({
+              classification: 'source-total-byte-limit-exceeded',
+              limit: MAX_SOURCE_BYTES,
+              path: portable(path),
+            });
+            traversalAborted = true;
+            break;
+          }
+          totalBytes += size;
+          paths.push(path);
+        } else if (
+          !entry.isFile() &&
+          !entry.isDirectory() &&
+          !entry.isSymbolicLink()
+        ) {
+          findings.push({
+            classification: 'source-special-file-forbidden',
+            path: portable(path),
+          });
+        }
+      }
+    } finally {
+      handle.closeSync();
+    }
+  }
+  return {
+    findings,
+    paths: traversalAborted ? [] : paths,
+  };
+}
+
+function outsideSourceRoot(target) {
+  const fromSourceRoot = relative(sourceRoot, target);
+  return (
+    fromSourceRoot === '..' ||
+    fromSourceRoot.startsWith('..' + sep) ||
+    resolve(sourceRoot, fromSourceRoot) !== target
+  );
+}
+
+function relativeImport(importer, specifier, existing, compilerOptions) {
+  const requestedTarget = resolve(dirname(importer), specifier);
+  if (outsideSourceRoot(requestedTarget)) {
+    return {
+      failure: 'outside-source-root',
+      kind: 'relative',
+      specifier,
+      target: requestedTarget,
+    };
+  }
+  const resolvedModule = ts.resolveModuleName(
+    specifier,
+    importer,
+    compilerOptions,
+    ts.sys,
+  ).resolvedModule;
+  if (!resolvedModule) {
+    if (
+      ts.sys.fileExists(requestedTarget) &&
+      CLIENT_ASSET_EXTENSIONS.has(extname(requestedTarget))
+    ) {
+      return { kind: 'asset', specifier, target: requestedTarget };
+    }
+    return {
+      failure: ts.sys.fileExists(requestedTarget)
+        ? 'unsupported-target'
+        : 'unresolved',
+      kind: 'relative',
+      specifier,
+      target: ts.sys.fileExists(requestedTarget) ? requestedTarget : undefined,
+    };
+  }
+  const target = resolve(resolvedModule.resolvedFileName);
+  if (outsideSourceRoot(target)) {
+    return {
+      failure: 'outside-source-root',
+      kind: 'relative',
+      specifier,
+      target,
+    };
+  }
+  if (!existing.has(target)) {
+    if (CLIENT_ASSET_EXTENSIONS.has(extname(target))) {
+      return { kind: 'asset', specifier, target };
+    }
+    return {
+      failure: 'unsupported-target',
+      kind: 'relative',
+      specifier,
+      target,
+    };
+  }
+  return { kind: 'relative', specifier, target };
+}
+
+function compilerConfiguration() {
+  const loaded = ts.readConfigFile(tsconfigPath, ts.sys.readFile);
+  if (loaded.error) {
+    throw new Error(
+      'web/tsconfig.json is invalid: ' +
+        ts.flattenDiagnosticMessageText(loaded.error.messageText, ' '),
+    );
+  }
+  const parsed = ts.parseJsonConfigFileContent(
+    loaded.config,
+    ts.sys,
+    dirname(tsconfigPath),
+    undefined,
+    tsconfigPath,
+  );
+  if (parsed.errors.length > 0) {
+    throw new Error(
+      'web/tsconfig.json is invalid: ' +
+        parsed.errors
+          .map((diagnostic) =>
+            ts.flattenDiagnosticMessageText(diagnostic.messageText, ' '),
+          )
+          .join(' '),
+    );
+  }
+  return {
+    aliasPatterns: Object.keys(parsed.options.paths ?? {}).sort(),
+    options: parsed.options,
+  };
+}
+
+function aliasMatches(pattern, specifier) {
+  const wildcard = pattern.indexOf('*');
+  if (wildcard === -1) return pattern === specifier;
+  if (pattern.indexOf('*', wildcard + 1) !== -1) return false;
+  const prefix = pattern.slice(0, wildcard);
+  const suffix = pattern.slice(wildcard + 1);
+  return (
+    specifier.length >= prefix.length + suffix.length &&
+    specifier.startsWith(prefix) &&
+    specifier.endsWith(suffix)
+  );
+}
+
+function moduleImport(
+  importer,
+  specifier,
+  existing,
+  compilerOptions,
+  aliasPatterns,
+) {
+  if (specifier.startsWith('.')) {
+    return relativeImport(importer, specifier, existing, compilerOptions);
+  }
+  const alias = aliasPatterns.find((pattern) =>
+    aliasMatches(pattern, specifier),
+  );
+  const resolvedModule = ts.resolveModuleName(
+    specifier,
+    importer,
+    compilerOptions,
+    ts.sys,
+  ).resolvedModule;
+  if (!resolvedModule) {
+    return alias
+      ? { alias, failure: 'unresolved', kind: 'alias', specifier }
+      : undefined;
+  }
+  if (!alias && resolvedModule.isExternalLibraryImport) return undefined;
+  const kind = alias ? 'alias' : 'base-url';
+  const target = resolve(resolvedModule.resolvedFileName);
+  if (outsideSourceRoot(target)) {
+    return {
+      alias,
+      failure: 'outside-source-root',
+      kind,
+      specifier,
+      target,
+    };
+  }
+  if (!existing.has(target)) {
+    return {
+      alias,
+      failure: 'unsupported-target',
+      kind,
+      specifier,
+      target,
+    };
+  }
+  return { alias, kind, specifier, target };
+}
+
+function scriptKind(path) {
+  switch (extname(path)) {
+    case '.js':
+    case '.mjs':
+    case '.cjs':
+      return ts.ScriptKind.JS;
+    case '.jsx':
+      return ts.ScriptKind.JSX;
+    case '.tsx':
+      return ts.ScriptKind.TSX;
+    default:
+      return ts.ScriptKind.TS;
+  }
+}
+
+function calledModule(node) {
+  if (
+    ts.isImportDeclaration(node) ||
+    ts.isExportDeclaration(node)
+  ) {
+    return node.moduleSpecifier && ts.isStringLiteralLike(node.moduleSpecifier)
+      ? { kind: 'static', specifier: node.moduleSpecifier.text }
+      : undefined;
+  }
+  if (!ts.isCallExpression(node)) return undefined;
+  const kind =
+    node.expression.kind === ts.SyntaxKind.ImportKeyword
+      ? 'dynamic-import'
+      : ts.isIdentifier(node.expression) && node.expression.text === 'require'
+        ? 'require'
+        : undefined;
+  if (!kind) return undefined;
+  const argument = node.arguments[0];
+  return node.arguments.length === 1 && argument && ts.isStringLiteralLike(argument)
+    ? { kind, specifier: argument.text }
+    : { kind, specifier: null };
+}
+
+function environmentRead(node) {
+  if (
+    ts.isPropertyAccessExpression(node) &&
+    isProcessEnvironmentObject(node.expression)
+  ) {
+    return node.name.text;
+  }
+  if (
+    ts.isElementAccessExpression(node) &&
+    isProcessEnvironmentObject(node.expression)
+  ) {
+    return ts.isStringLiteralLike(node.argumentExpression)
+      ? node.argumentExpression.text
+      : null;
+  }
+  return undefined;
+}
+
+function isProcessEnvironmentObject(node) {
+  return (
+    (ts.isPropertyAccessExpression(node) &&
+      ts.isIdentifier(node.expression) &&
+      node.expression.text === 'process' &&
+      node.name.text === 'env') ||
+    (ts.isElementAccessExpression(node) &&
+      ts.isIdentifier(node.expression) &&
+      node.expression.text === 'process' &&
+      ts.isStringLiteralLike(node.argumentExpression) &&
+      node.argumentExpression.text === 'env')
+  );
+}
+
+function serverPackage(specifier) {
+  return (
+    specifier === 'next/headers' ||
+    specifier === 'next/server' ||
+    specifier === 'server-only' ||
+    specifier.startsWith('@aws-sdk/') ||
+    specifier === '@empire-builder-kit/runtime/auth-backend' ||
+    specifier === '@empire-builder-kit/runtime/database' ||
+    specifier === '@empire-builder-kit/runtime/secrets'
+  );
+}
+
+export function inspectFrontendBoundaries() {
+  const contract = JSON.parse(readFileSync(contractPath, 'utf8'));
+  if (
+    contract?.schemaVersion !== 1 ||
+    contract?.slice !== '${name}' ||
+    !Array.isArray(contract?.publicConfiguration?.allowlist)
+  ) {
+    throw new Error('frontend/contract.json is missing the managed public configuration contract.');
+  }
+  const allowedPublic = new Set(contract.publicConfiguration.allowlist);
+  const discovered = sourcePaths(sourceRoot);
+  const findings = [...discovered.findings];
+  const paths = discovered.paths;
+  const existing = new Set(paths);
+  const modules = new Map();
+  const { aliasPatterns, options: compilerOptions } = compilerConfiguration();
+
+  for (const path of paths) {
+    const source = readFileSync(path, 'utf8');
+    const sourceFile = ts.createSourceFile(
+      path,
+      source,
+      ts.ScriptTarget.Latest,
+      true,
+      scriptKind(path),
+    );
+    const imports = [];
+    const dynamicModuleSpecifiers = [];
+    const serverPackages = [];
+    let serverOnly = false;
+    const inspectModules = (node) => {
+      const called = calledModule(node);
+      if (called) {
+        const moduleSpecifier = called.specifier;
+        if (moduleSpecifier === null) {
+          dynamicModuleSpecifiers.push({
+            kind: called.kind,
+            line: lineOf(sourceFile, node),
+          });
+        } else {
+        if (moduleSpecifier === 'server-only') serverOnly = true;
+        if (serverPackage(moduleSpecifier)) serverPackages.push(moduleSpecifier);
+        const target = moduleImport(
+          path,
+          moduleSpecifier,
+          existing,
+          compilerOptions,
+          aliasPatterns,
+        );
+        if (target) imports.push(target);
+        }
+      }
+      ts.forEachChild(node, inspectModules);
+    };
+    inspectModules(sourceFile);
+    let client = false;
+    for (const statement of sourceFile.statements) {
+      if (
+        !ts.isExpressionStatement(statement) ||
+        !ts.isStringLiteral(statement.expression)
+      ) {
+        break;
+      }
+      if (statement.expression.text === 'use client') client = true;
+    }
+    modules.set(path, {
+      client,
+      dynamicModuleSpecifiers,
+      imports: imports.filter(
+        (candidate, index) =>
+          imports.findIndex(
+            (entry) => JSON.stringify(entry) === JSON.stringify(candidate),
+          ) === index,
+      ),
+      serverOnly,
+      serverPackages: [...new Set(serverPackages)],
+      sourceFile,
+    });
+  }
+
+  const clientReachable = new Map();
+  for (const [path, module] of modules) {
+    if (!module.client) continue;
+    const pending = [
+      {
+        ancestry: [],
+        edgeKinds: [],
+        path,
+        root: path,
+      },
+    ];
+    const visited = new Set();
+    while (pending.length > 0) {
+      const current = pending.pop();
+      if (!current) continue;
+      if (current.ancestry.includes(current.path)) {
+        const cycleStart = current.ancestry.indexOf(current.path);
+        const cycleEdgeKinds = [
+          ...new Set(current.edgeKinds.slice(cycleStart)),
+        ].sort();
+        const cyclePaths = current.ancestry
+          .slice(cycleStart)
+          .map((cyclePath) => portable(cyclePath))
+          .sort();
+        const reachedThroughAlias = cycleEdgeKinds.includes('alias');
+        const reachedThroughBaseUrl = cycleEdgeKinds.includes('base-url');
+        if (
+          cycleEdgeKinds.length > 1 &&
+          (reachedThroughAlias || reachedThroughBaseUrl)
+        ) {
+          findings.push({
+            classification: 'client-mixed-local-module-cycle',
+            client: portable(current.root),
+            cycleEdgeKinds,
+            path: cyclePaths[0],
+          });
+        } else if (reachedThroughBaseUrl) {
+          findings.push({
+            classification: 'client-base-url-cycle',
+            client: portable(current.root),
+            cycleEdgeKinds,
+            path: cyclePaths[0],
+          });
+        } else if (reachedThroughAlias) {
+          findings.push({
+            classification: 'client-path-alias-cycle',
+            client: portable(current.root),
+            cycleEdgeKinds,
+            path: cyclePaths[0],
+          });
+        }
+        continue;
+      }
+      if (visited.has(current.path)) continue;
+      visited.add(current.path);
+      const currentModule = modules.get(current.path);
+      if (!currentModule) continue;
+      if (!clientReachable.has(current.path)) {
+        clientReachable.set(current.path, new Set());
+      }
+      clientReachable.get(current.path).add(current.root);
+      if (currentModule.serverOnly) {
+        findings.push({
+          classification: 'client-imports-server-only',
+          client: portable(current.root),
+          path: portable(current.path),
+        });
+      }
+      for (const dynamic of currentModule.dynamicModuleSpecifiers) {
+        findings.push({
+          classification: 'client-dynamic-module-specifier',
+          client: portable(current.root),
+          kind: dynamic.kind,
+          line: dynamic.line,
+          path: portable(current.path),
+        });
+      }
+      for (const packageName of currentModule.serverPackages) {
+        findings.push({
+          classification: 'client-imports-server-package',
+          client: portable(current.root),
+          package: packageName,
+          path: portable(current.path),
+        });
+      }
+      const orderedImports = [...currentModule.imports].sort((left, right) =>
+        JSON.stringify(right) < JSON.stringify(left)
+          ? -1
+          : JSON.stringify(right) > JSON.stringify(left)
+            ? 1
+            : 0,
+      );
+      for (const imported of orderedImports) {
+        if (imported.failure) {
+          const importKind =
+            imported.kind === 'relative'
+              ? 'relative-import'
+              : imported.kind === 'alias'
+                ? 'path-alias'
+                : 'base-url';
+          findings.push({
+            alias: imported.alias,
+            classification:
+              imported.failure === 'outside-source-root'
+                ? 'client-' + importKind + '-outside-source-root'
+                : imported.failure === 'unsupported-target'
+                  ? 'client-' + importKind + '-target-unsupported'
+                  : 'client-' + importKind + '-unresolved',
+            client: portable(current.root),
+            path: portable(current.path),
+            specifier: imported.specifier,
+            target: imported.target ? portable(imported.target) : undefined,
+          });
+          continue;
+        }
+        pending.push({
+          ancestry: [...current.ancestry, current.path],
+          edgeKinds: [...current.edgeKinds, imported.kind],
+          path: imported.target,
+          root: current.root,
+        });
+      }
+    }
+  }
+
+  for (const [path, module] of modules) {
+    const inClientGraph = clientReachable.has(path);
+    const visit = (node) => {
+      const key = environmentRead(node);
+      const parent = node.parent;
+      const parentConsumesEnvironment =
+        (parent &&
+          ts.isPropertyAccessExpression(parent) &&
+          parent.expression === node) ||
+        (parent &&
+          ts.isElementAccessExpression(parent) &&
+          parent.expression === node);
+      if (inClientGraph && key === null) {
+        findings.push({
+          classification: 'client-dynamic-environment-access',
+          line: lineOf(module.sourceFile, node),
+          path: portable(path),
+        });
+      } else if (
+        inClientGraph &&
+        isProcessEnvironmentObject(node) &&
+        !parentConsumesEnvironment
+      ) {
+        findings.push({
+          classification: 'client-dynamic-environment-access',
+          line: lineOf(module.sourceFile, node),
+          path: portable(path),
+        });
+      } else if (inClientGraph && typeof key === 'string') {
+        findings.push({
+          classification:
+            key.startsWith('NEXT_PUBLIC_') && allowedPublic.has(key)
+              ? undefined
+              : key.startsWith('NEXT_PUBLIC_')
+                ? 'undeclared-public-configuration'
+                : 'client-reads-server-environment',
+          key:
+            key.startsWith('NEXT_PUBLIC_') && !allowedPublic.has(key)
+              ? key
+              : undefined,
+          line: lineOf(module.sourceFile, node),
+          path: portable(path),
+        });
+      }
+      if (
+        (ts.isIdentifier(node) && node.text === 'dangerouslySetInnerHTML') ||
+        (ts.isPropertyAccessExpression(node) && node.name.text === 'innerHTML')
+      ) {
+        findings.push({
+          classification: 'raw-html-sink-requires-reviewed-adapter',
+          line: lineOf(module.sourceFile, node),
+          path: portable(path),
+        });
+      }
+      ts.forEachChild(node, visit);
+    };
+    visit(module.sourceFile);
+  }
+
+  const normalized = findings
+    .filter((finding) => finding.classification)
+    .map((finding) =>
+      Object.fromEntries(
+        Object.entries(finding).filter(([, value]) => value !== undefined),
+      ),
+    )
+    .sort((left, right) =>
+      JSON.stringify(left) < JSON.stringify(right)
+        ? -1
+        : JSON.stringify(left) > JSON.stringify(right)
+          ? 1
+          : 0,
+    );
+  return {
+    counts: { checked: modules.size, findings: normalized.length },
+    findings: normalized,
+    kind: 'ebk-frontend-boundary-result',
+    outcome: normalized.length === 0 ? 'passed' : 'failed',
+    schemaVersion: 1,
+    slice: '${name}',
+  };
+}
+
+function main() {
+  const result = inspectFrontendBoundaries();
+  const outputArgument = process.argv.find((value) => value.startsWith('--output='));
+  if (outputArgument) {
+    const output = resolve(projectRoot, outputArgument.slice('--output='.length));
+    if (
+      relative(projectRoot, output).startsWith('..' + sep) ||
+      relative(projectRoot, output) === '..'
+    ) {
+      throw new Error('Frontend boundary evidence must remain inside the Product Slice.');
+    }
+    mkdirSync(dirname(output), { recursive: true, mode: 0o700 });
+    writeFileSync(output, JSON.stringify(result, null, 2) + '\\n', { mode: 0o600 });
+  }
+  process.stdout.write(JSON.stringify(result) + '\\n');
+  if (result.outcome !== 'passed') process.exitCode = 1;
+}
+
+main();
+`,
+        'scripts/frontend-security-headers.mjs': `import { createHash } from 'node:crypto';
+import { mkdirSync, readFileSync, realpathSync, writeFileSync } from 'node:fs';
+import { dirname, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import {
+  inspectFrontendSecurityHeaders as inspectOwnedFrontendSecurityHeaders,
+  resolveFrontendSecurityHeaderProfile,
+} from '@empire-builder-kit/nx/frontend-security';
+
+const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const foundationPolicyPath = resolve(
+  projectRoot,
+  '..',
+  'foundation',
+  'contracts',
+  'frontend-security-headers.json',
+);
+const slicePolicyPath = resolve(
+  projectRoot,
+  'frontend',
+  'security-headers.json',
+);
+const readPolicy = (path) => {
+  const contents = readFileSync(path);
+  return {
+    digest: 'sha256:' + createHash('sha256').update(contents).digest('hex'),
+    value: JSON.parse(contents),
+  };
+};
+const foundationPolicy = readPolicy(foundationPolicyPath);
+const slicePolicy = readPolicy(slicePolicyPath);
+const gitObjectIdPattern = /^(?:[a-f0-9]{40}|[a-f0-9]{64})$/;
+const MAX_FRONTEND_HEADER_FETCH_TIMEOUT_MS = 10_000;
+
+function loopback(hostname) {
+  return ['127.0.0.1', 'localhost', '::1', '[::1]'].includes(hostname);
+}
+
+function safeTarget(value, profile, allowLoopbackTransportProof) {
+  const target = new URL(value);
+  if (
+    (target.protocol !== 'https:' &&
+      !(
+        loopback(target.hostname) &&
+        target.protocol === 'http:' &&
+        (profile === 'local-development' || allowLoopbackTransportProof)
+      )) ||
+    target.username ||
+    target.password ||
+    target.search ||
+    target.hash
+  ) {
+    throw new Error('Frontend header target must be HTTPS without credentials, query, or fragment.');
+  }
+  return target;
+}
+
+export function inspectFrontendSecurityHeaders({
+  allowLoopbackTransportProof = false,
+  headers,
+  https,
+  profile = 'deployed-https',
+}) {
+  return inspectOwnedFrontendSecurityHeaders({
+    actual: headers,
+    allowLoopbackTransportProof,
+    foundation: foundationPolicy.value,
+    https,
+    profile,
+    slice: slicePolicy.value,
+    sliceName: '${name}',
+  });
+}
+
+function responseNonce(headers) {
+  const policy = new Headers(headers).get('content-security-policy') ?? '';
+  const nonces = [
+    ...policy.matchAll(/'nonce-([A-Za-z0-9+/_-]{16,128}={0,2})'/g),
+  ].map((match) => match[1]);
+  const unique = [...new Set(nonces)];
+  return unique.length === 1 && nonces.length >= 2 ? unique[0] : undefined;
+}
+
+export function inspectFrontendNonceFreshness(firstHeaders, secondHeaders) {
+  const first = responseNonce(firstHeaders);
+  const second = responseNonce(secondHeaders);
+  return {
+    firstNoncePresent: first !== undefined,
+    fresh: first !== undefined && second !== undefined && first !== second,
+    secondNoncePresent: second !== undefined,
+  };
+}
+
+function outputPath(argument) {
+  const output = resolve(
+    projectRoot,
+    argument?.slice('--output='.length) ??
+      '.ebk/evidence/frontend/security-headers.json',
+  );
+  const fromRoot = relative(projectRoot, output);
+  if (fromRoot === '..' || fromRoot.startsWith('..' + sep)) {
+    throw new Error('Frontend header evidence must remain inside the Product Slice.');
+  }
+  return output;
+}
+
+function fetchTimeout() {
+  const value =
+    process.env.EBK_FRONTEND_HEADER_FETCH_TIMEOUT_MS?.trim() ?? '10000';
+  if (!/^[1-9]\\d*$/.test(value)) {
+    throw new Error(
+      'EBK_FRONTEND_HEADER_FETCH_TIMEOUT_MS must be a positive integer.',
+    );
+  }
+  const milliseconds = Number(value);
+  if (milliseconds > MAX_FRONTEND_HEADER_FETCH_TIMEOUT_MS) {
+    throw new Error(
+      'EBK_FRONTEND_HEADER_FETCH_TIMEOUT_MS may not exceed ' +
+        MAX_FRONTEND_HEADER_FETCH_TIMEOUT_MS +
+        ' milliseconds.',
+    );
+  }
+  return milliseconds;
+}
+
+export async function fetchFrontendResponse(
+  target,
+  timeout,
+  fetchImplementation = fetch,
+) {
+  const signal = AbortSignal.timeout(timeout);
+  try {
+    return await fetchImplementation(target, { redirect: 'error', signal });
+  } catch (error) {
+    if (signal.aborted) {
+      throw new Error(
+        'Frontend header request did not complete within ' +
+          timeout +
+          ' milliseconds.',
+        { cause: error },
+      );
+    }
+    throw error;
+  }
+}
+
+async function main() {
+  const arguments_ = process.argv.slice(2);
+  const urlArguments = arguments_.filter((value) => value.startsWith('--url='));
+  const outputArguments = arguments_.filter((value) =>
+    value.startsWith('--output='),
+  );
+  const allowLoopbackTransportProof = arguments_.includes(
+    '--allow-loopback-transport-proof',
+  );
+  const unsupported = arguments_.filter(
+    (value) =>
+      !value.startsWith('--url=') &&
+      !value.startsWith('--output=') &&
+      value !== '--allow-loopback-transport-proof',
+  );
+  if (
+    urlArguments.length > 1 ||
+    outputArguments.length > 1 ||
+    unsupported.length > 0
+  ) {
+    throw new Error(
+      'Usage: frontend-security-headers.mjs [--url=<url>] [--output=<path>] [--allow-loopback-transport-proof]',
+    );
+  }
+  const profile = resolveFrontendSecurityHeaderProfile(process.env);
+  const target = safeTarget(
+    urlArguments[0]?.slice('--url='.length) ??
+      process.env.EBK_FRONTEND_URL ??
+      '',
+    profile,
+    allowLoopbackTransportProof,
+  );
+  const timeout = fetchTimeout();
+  const response = await fetchFrontendResponse(target, timeout);
+  const hostedTransportVerified =
+    profile === 'deployed-https' && target.protocol === 'https:';
+  const inspected = inspectFrontendSecurityHeaders({
+    allowLoopbackTransportProof,
+    headers: response.headers,
+    https: target.protocol === 'https:',
+    profile,
+  });
+  const freshnessResponse = hostedTransportVerified
+    ? await fetchFrontendResponse(target, timeout)
+    : undefined;
+  const freshnessInspection = freshnessResponse
+    ? inspectFrontendSecurityHeaders({
+        allowLoopbackTransportProof,
+        headers: freshnessResponse.headers,
+        https: true,
+        profile,
+      })
+    : undefined;
+  const nonceFreshness = freshnessResponse
+    ? inspectFrontendNonceFreshness(response.headers, freshnessResponse.headers)
+    : {
+        firstNoncePresent: false,
+        fresh: false,
+        secondNoncePresent: false,
+      };
+  const nonceFreshnessVerified =
+    hostedTransportVerified &&
+    freshnessResponse !== undefined &&
+    freshnessResponse.status >= 200 &&
+    freshnessResponse.status < 400 &&
+    freshnessInspection?.findings.length === 0 &&
+    nonceFreshness.fresh;
+  const sourceCommit =
+    process.env.EBK_SOURCE_COMMIT?.trim() ?? 'unresolved-local-source';
+  const stage = process.env.EBK_STAGE?.trim() ?? 'development';
+  const findings = [
+    ...inspected.findings,
+    ...(profile === 'deployed-https' && !gitObjectIdPattern.test(sourceCommit)
+      ? ['deployed-source-commit-required']
+      : []),
+    ...(response.status >= 200 && response.status < 400
+      ? []
+      : ['frontend-response-unsuccessful']),
+    ...(hostedTransportVerified && !nonceFreshnessVerified
+      ? ['hosted-response-nonce-not-fresh']
+      : []),
+  ].sort();
+  const proofScope =
+    profile === 'local-development'
+      ? 'local-development'
+      : hostedTransportVerified
+        ? 'hosted-deployed'
+        : 'local-response-composition';
+  const result = {
+    ...inspected,
+    binding: {
+      foundationPolicyDigest: foundationPolicy.digest,
+      slicePolicyDigest: slicePolicy.digest,
+      sourceCommit,
+      stage,
+      targetOriginDigest:
+        'sha256:' +
+        createHash('sha256').update(target.origin, 'utf8').digest('hex'),
+    },
+    findings,
+    hostedTransportVerified,
+    nonceFreshnessVerified,
+    outcome: findings.length === 0 ? 'passed' : 'failed',
+    proofScope,
+    response: {
+      https: target.protocol === 'https:',
+      pathname: target.pathname,
+      status: response.status,
+    },
+  };
+  const output = outputPath(outputArguments[0]);
+  mkdirSync(dirname(output), { recursive: true, mode: 0o700 });
+  writeFileSync(output, JSON.stringify(result, null, 2) + '\\n', { mode: 0o600 });
+  process.stdout.write(JSON.stringify(result) + '\\n');
+  if (result.outcome !== 'passed') process.exitCode = 1;
+}
+
+if (
+  process.argv[1] &&
+  realpathSync(resolve(process.argv[1])) ===
+    realpathSync(fileURLToPath(import.meta.url))
+) {
+  await main();
+}
+`,
+        'scripts/frontend-visual-report.mjs': `import { createHash } from 'node:crypto';
+import {
+  lstatSync,
+  mkdirSync,
+  readFileSync,
+  realpathSync,
+  writeFileSync,
+} from 'node:fs';
+import { dirname, join, relative, resolve, sep } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const projectRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const baselinePath = join(projectRoot, 'frontend', 'visual-baselines.json');
+const observationPath = join(
+  projectRoot,
+  '.ebk',
+  'evidence',
+  'frontend',
+  'frontend-visual-observations.json',
+);
+const resultPath = join(
+  projectRoot,
+  '.ebk',
+  'evidence',
+  'frontend',
+  'frontend-visual-report.json',
+);
+const digestPattern = /^sha256:[a-f0-9]{64}$/;
+const tokenPattern = /^[A-Za-z0-9][A-Za-z0-9._/-]*$/;
+
+function regularProjectFile(path, label) {
+  const relativePath = relative(projectRoot, path);
+  if (
+    !relativePath ||
+    relativePath === '..' ||
+    relativePath.startsWith('..' + sep) ||
+    resolve(projectRoot, relativePath) !== path
+  ) {
+    throw new Error(label + ' must remain inside the Product Slice.');
+  }
+  const stat = lstatSync(path);
+  if (!stat.isFile() || stat.isSymbolicLink()) {
+    throw new Error(label + ' must be a regular non-symlink file.');
+  }
+  const real = realpathSync(path);
+  const realRelative = relative(realpathSync(projectRoot), real);
+  if (realRelative === '..' || realRelative.startsWith('..' + sep)) {
+    throw new Error(label + ' resolves outside the Product Slice.');
+  }
+}
+
+function readJson(path, label) {
+  regularProjectFile(path, label);
+  return JSON.parse(readFileSync(path, 'utf8'));
+}
+
+function exactKeys(value, allowed) {
+  return (
+    value &&
+    typeof value === 'object' &&
+    Object.keys(value).every((key) => allowed.includes(key))
+  );
+}
+
+function records(value, label, { observations = false } = {}) {
+  if (
+    !exactKeys(
+      value,
+      observations
+        ? ['records', 'schemaVersion', 'slice']
+        : ['records', 'reviewedAt', 'schemaVersion', 'slice', 'workItem'],
+    ) ||
+    value?.schemaVersion !== 1 ||
+    value?.slice !== '${name}' ||
+    !Array.isArray(value?.records)
+  ) {
+    throw new Error(label + ' is not a ${name} frontend visual record.');
+  }
+  if (
+    !observations &&
+    ((value.reviewedAt === undefined) !== (value.workItem === undefined) ||
+      (value.records.length > 0 &&
+        (value.reviewedAt === undefined || value.workItem === undefined)) ||
+      (value.reviewedAt !== undefined &&
+        (typeof value.reviewedAt !== 'string' ||
+          !Number.isFinite(Date.parse(value.reviewedAt)) ||
+          new Date(value.reviewedAt).toISOString() !== value.reviewedAt ||
+          !/^(?:GH:[1-9][0-9]*|PLAN:[A-Za-z0-9._/-]+)$/.test(
+            value.workItem ?? '',
+          ))))
+  ) {
+    throw new Error(label + ' has invalid review attribution.');
+  }
+  const ids = new Set();
+  return value.records.map((record, index) => {
+    if (
+      !exactKeys(record, ['artifact', 'digest', 'id', 'profile', 'viewport']) ||
+      !record ||
+      typeof record !== 'object' ||
+      !tokenPattern.test(record.id ?? '') ||
+      !tokenPattern.test(record.profile ?? '') ||
+      !tokenPattern.test(record.viewport ?? '') ||
+      !digestPattern.test(record.digest ?? '') ||
+      typeof record.artifact !== 'string' ||
+      !record.artifact.startsWith('.ebk/evidence/frontend/visuals/') ||
+      record.artifact.includes('..')
+    ) {
+      throw new Error(label + ' record ' + index + ' is malformed.');
+    }
+    if (observations) {
+      const artifactPath = resolve(projectRoot, record.artifact);
+      regularProjectFile(artifactPath, label + ' artifact ' + index);
+      const actualDigest =
+        'sha256:' +
+        createHash('sha256').update(readFileSync(artifactPath)).digest('hex');
+      if (actualDigest !== record.digest) {
+        throw new Error(label + ' artifact ' + index + ' does not match its digest.');
+      }
+    }
+    const key = record.id + '@' + record.viewport + '@' + record.profile;
+    if (ids.has(key)) throw new Error(label + ' contains duplicate record ' + key + '.');
+    ids.add(key);
+    return {
+      artifact: record.artifact,
+      digest: record.digest,
+      id: record.id,
+      profile: record.profile,
+      viewport: record.viewport,
+    };
+  }).sort((left, right) =>
+    left.id + '@' + left.viewport + '@' + left.profile <
+    right.id + '@' + right.viewport + '@' + right.profile
+      ? -1
+      : left.id + '@' + left.viewport + '@' + left.profile >
+          right.id + '@' + right.viewport + '@' + right.profile
+        ? 1
+        : 0,
+  );
+}
+
+function compare(baseline, observed) {
+  const expected = new Map(
+    baseline.map((record) => [
+      record.id + '@' + record.viewport + '@' + record.profile,
+      record,
+    ]),
+  );
+  const actual = new Map(
+    observed.map((record) => [
+      record.id + '@' + record.viewport + '@' + record.profile,
+      record,
+    ]),
+  );
+  const findings = [];
+  for (const [key, record] of expected) {
+    const observation = actual.get(key);
+    if (!observation) findings.push({ classification: 'observation-missing', id: key });
+    else if (observation.digest !== record.digest) {
+      findings.push({ classification: 'visual-change-unreviewed', id: key });
+    }
+  }
+  for (const key of actual.keys()) {
+    if (!expected.has(key)) findings.push({ classification: 'baseline-missing', id: key });
+  }
+  return findings.sort((left, right) =>
+    left.id < right.id ? -1 : left.id > right.id ? 1 : 0,
+  );
+}
+
+export function verifyFrontendVisualReport() {
+  const baseline = records(
+    readJson(baselinePath, 'Visual baseline'),
+    'Visual baseline',
+  );
+  const observed = records(
+    readJson(observationPath, 'Visual observation'),
+    'Visual observation',
+    { observations: true },
+  );
+  const observedProfiles = new Set(observed.map(({ profile }) => profile));
+  const applicableBaseline = baseline.filter(({ profile }) =>
+    observedProfiles.has(profile),
+  );
+  const findings =
+    applicableBaseline.length === 0
+      ? [{ classification: 'baseline-empty', id: '${name}' }]
+      : compare(applicableBaseline, observed);
+  return {
+    counts: {
+      applicableBaseline: applicableBaseline.length,
+      baseline: baseline.length,
+      observed: observed.length,
+    },
+    findings,
+    kind: 'ebk-frontend-visual-result',
+    outcome: findings.length === 0 ? 'passed' : 'failed',
+    schemaVersion: 1,
+    slice: '${name}',
+  };
+}
+
+function updateBaseline(workItem) {
+  if (
+    process.env.CI === 'true' ||
+    process.env.GITHUB_ACTIONS === 'true' ||
+    !['', 'development'].includes(process.env.EBK_STAGE ?? '')
+  ) {
+    throw new Error('Frontend visual baselines may be updated only in local development.');
+  }
+  if (!/^(?:GH:[1-9][0-9]*|PLAN:[A-Za-z0-9._/-]+)$/.test(workItem ?? '')) {
+    throw new Error('Visual baseline update requires --work-item=GH:<number> or PLAN:<reference>.');
+  }
+  const observed = records(
+    readJson(observationPath, 'Visual observation'),
+    'Visual observation',
+    { observations: true },
+  );
+  if (observed.length === 0) throw new Error('Visual baseline update requires observations.');
+  const previous = records(
+    readJson(baselinePath, 'Visual baseline'),
+    'Visual baseline',
+  );
+  const updatedProfiles = new Set(observed.map(({ profile }) => profile));
+  const nextRecords = [
+    ...previous.filter(({ profile }) => !updatedProfiles.has(profile)),
+    ...observed,
+  ].sort((left, right) =>
+    left.id + '@' + left.viewport + '@' + left.profile <
+    right.id + '@' + right.viewport + '@' + right.profile
+      ? -1
+      : left.id + '@' + left.viewport + '@' + left.profile >
+          right.id + '@' + right.viewport + '@' + right.profile
+        ? 1
+        : 0,
+  );
+  writeFileSync(
+    baselinePath,
+    JSON.stringify(
+      {
+        records: nextRecords,
+        reviewedAt: new Date().toISOString(),
+        schemaVersion: 1,
+        slice: '${name}',
+        workItem,
+      },
+      null,
+      2,
+    ) + '\\n',
+  );
+}
+
+function writeResult(result) {
+  mkdirSync(dirname(resultPath), { recursive: true, mode: 0o700 });
+  writeFileSync(resultPath, JSON.stringify(result, null, 2) + '\\n', { mode: 0o600 });
+  process.stdout.write(JSON.stringify(result) + '\\n');
+}
+
+function main() {
+  const command = process.argv[2];
+  if (command === 'update') {
+    const workItem = process.argv.find((value) => value.startsWith('--work-item='));
+    updateBaseline(workItem?.slice('--work-item='.length));
+  } else if (command !== 'verify') {
+    throw new Error('Usage: frontend-visual-report.mjs <verify|update> [--work-item=GH:123]');
+  }
+  const result = verifyFrontendVisualReport();
+  writeResult(result);
+  if (result.outcome !== 'passed') process.exitCode = 1;
+}
+
+main();
+`,
+        'e2e/frontend-accessibility.spec.ts': `import { createHash } from 'node:crypto';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { join } from 'node:path';
+import AxeBuilder from '@axe-core/playwright';
+import { expect, test, type Page } from '@playwright/test';
+
+const states = ${JSON.stringify(states)} as const;
+
+function requiredEnvironment(name: string): string {
+  const value = process.env[name]?.trim();
+  if (!value) throw new Error(name + ' is required for frontend browser proof.');
+  return value;
+}
+
+function fixtureUrl(state: (typeof states)[number]): string {
+  const product = new URL(requiredEnvironment('EBK_SMOKE_URL'));
+  product.pathname =
+    product.pathname.replace(/\\/$/, '') + '/_ebk/frontend-states';
+  product.searchParams.set('state', state);
+  return product.href;
+}
+
+function cspProofUrl(): string {
+  const product = new URL(requiredEnvironment('EBK_SMOKE_URL'));
+  product.pathname = product.pathname.replace(/\\/$/, '') + '/_ebk/frontend-csp';
+  return product.href;
+}
+
+function observeBrowserFailures(page: Page): string[] {
+  const failures: string[] = [];
+  page.on('console', (message) => {
+    if (message.type() === 'error') {
+      failures.push(
+        'console-error:' +
+          message.text().replace(/\\s+/g, ' ').slice(0, 300),
+      );
+    }
+  });
+  page.on('pageerror', (error) =>
+    failures.push(
+      'uncaught-page-error:' +
+        error.message.replace(/\\s+/g, ' ').slice(0, 300),
+    ),
+  );
+  page.on('requestfailed', (request) =>
+    failures.push(
+      'request-failed:' +
+        new URL(request.url()).pathname.slice(0, 200),
+    ),
+  );
+  return failures;
+}
+
+async function installSecurityPolicyViolationObserver(page: Page): Promise<void> {
+  await page.addInitScript(() => {
+    const observedWindow = window as Window & {
+      __ebkSecurityPolicyViolations?: string[];
+    };
+    const violations: string[] = [];
+    Object.defineProperty(observedWindow, '__ebkSecurityPolicyViolations', {
+      configurable: false,
+      enumerable: false,
+      value: violations,
+      writable: false,
+    });
+    document.addEventListener('securitypolicyviolation', (event) => {
+      if (violations.length < 20) {
+        violations.push(
+          'csp-violation:' + event.effectiveDirective + ':' + event.disposition,
+        );
+      }
+    });
+  });
+}
+
+async function securityPolicyViolations(page: Page): Promise<string[]> {
+  return page.evaluate(() => {
+    const observedWindow = window as Window & {
+      __ebkSecurityPolicyViolations?: string[];
+    };
+    return [...(observedWindow.__ebkSecurityPolicyViolations ?? [])];
+  });
+}
+
+test.describe('generated frontend accessibility', () => {
+  test('scans every deterministic rendered state', async ({ page }) => {
+    const browserFailures = observeBrowserFailures(page);
+    for (const state of states) {
+      await page.goto(fixtureUrl(state));
+      await expect(
+        page.getByRole('heading', { level: 1, name: '${pascalName} neutral frontend states' }),
+      ).toBeVisible();
+      const result = await new AxeBuilder({ page })
+        .withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa'])
+        .analyze();
+      expect(result.violations, state).toEqual([]);
+    }
+    expect([...new Set(browserFailures)].sort()).toEqual([]);
+  });
+
+  test('operates the dialog by keyboard and restores focus', async ({ page }) => {
+    const frameworkResponse = await page.goto(fixtureUrl('success'));
+    expect(frameworkResponse).not.toBeNull();
+    const trigger = page.getByRole('button', { name: 'Open details dialog' });
+    await trigger.focus();
+    await page.keyboard.press('Enter');
+    const dialog = page.getByRole('dialog', { name: 'Synthetic record details' });
+    await expect(dialog).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Close details' })).toBeFocused();
+    await page.keyboard.press('Escape');
+    await expect(dialog).toBeHidden();
+    await expect(trigger).toBeFocused();
+  });
+
+  test('preserves announcements, narrow reflow, and reduced motion', async ({ page }) => {
+    await page.setViewportSize({ height: 640, width: 320 });
+    await page.emulateMedia({ reducedMotion: 'reduce' });
+    await page.goto(fixtureUrl('validation'));
+    await expect(
+      page.getByRole('alert').filter({ hasText: 'one problem' }),
+    ).toContainText('one problem');
+    expect(
+      await page.evaluate(
+        () => document.documentElement.scrollWidth <= document.documentElement.clientWidth,
+      ),
+    ).toBe(true);
+    const duration = await page
+      .getByRole('button', { name: 'Open details dialog' })
+      .evaluate((element) => getComputedStyle(element).transitionDuration);
+    expect(duration.endsWith('s')).toBe(true);
+    expect(Number.parseFloat(duration)).toBeLessThanOrEqual(.001);
+  });
+
+  test('hydrates framework UI and executes only nonce-authorized production inline script and style', async ({ page }) => {
+    test.skip(
+      process.env.EBK_FRONTEND_SECURITY_PROFILE !== 'deployed-https',
+      'Strict nonce refusal is a deployed-profile proof.',
+    );
+    const browserFailures = observeBrowserFailures(page);
+    await installSecurityPolicyViolationObserver(page);
+    const frameworkResponse = await page.goto(fixtureUrl('success'));
+    expect(frameworkResponse).not.toBeNull();
+    await expect(
+      page.getByRole('heading', { level: 1, name: '${pascalName} neutral frontend states' }),
+    ).toBeVisible();
+    const trigger = page.getByRole('button', { name: 'Open details dialog' });
+    await trigger.click();
+    const dialog = page.getByRole('dialog', { name: 'Synthetic record details' });
+    await expect(dialog).toBeVisible();
+    await page.getByRole('button', { name: 'Close details' }).click();
+    await expect(dialog).toBeHidden();
+    await expect(trigger).toBeFocused();
+    expect([...new Set(browserFailures)].sort()).toEqual([]);
+    expect(await securityPolicyViolations(page)).toEqual([]);
+
+    // The dedicated route below deliberately violates CSP. Keep its expected
+    // refusal signals separate from the clean framework-hydration observation.
+    const response = await page.goto(cspProofUrl());
+    expect(response).not.toBeNull();
+    const csp = response?.headers()['content-security-policy'] ?? '';
+    expect(csp).not.toContain("'unsafe-inline'");
+    const nonces = [...csp.matchAll(/'nonce-([A-Za-z0-9+/_-]{16,128}={0,2})'/g)].map(
+      (match) => match[1],
+    );
+    expect(new Set(nonces).size).toBe(1);
+    expect(nonces).toHaveLength(2);
+    const frameworkCsp =
+      frameworkResponse?.headers()['content-security-policy'] ?? '';
+    expect(frameworkCsp).not.toContain("'nonce-" + nonces[0] + "'");
+    const proof = await page.evaluate(() => {
+      const approvedStyle = document.querySelector('#approved-style');
+      const unapprovedStyle = document.querySelector('#unapproved-style');
+      if (!approvedStyle || !unapprovedStyle) {
+        throw new Error('The strict CSP proof fixture is incomplete.');
+      }
+      return {
+        approvedScript:
+          document.documentElement.dataset.ebkApprovedInline === 'executed',
+        approvedStyle: getComputedStyle(approvedStyle).color,
+        refusedScript:
+          document.documentElement.dataset.ebkUnapprovedInline === 'executed',
+        refusedStyle: getComputedStyle(unapprovedStyle).color,
+      };
+    });
+
+    expect(proof).toMatchObject({
+      approvedScript: true,
+      approvedStyle: 'rgb(1, 2, 3)',
+      refusedScript: false,
+    });
+    expect(proof.refusedStyle).not.toBe('rgb(4, 5, 6)');
+  });
+
+  test('captures stable neutral visual observations', async ({ browserName, page }) => {
+    const evidenceRoot = join(
+      process.cwd(),
+      '.ebk',
+      'evidence',
+      'frontend',
+    );
+    const visualRoot = join(evidenceRoot, 'visuals');
+    mkdirSync(visualRoot, { recursive: true, mode: 0o700 });
+    const records = [];
+    const profile = browserName + '-' + process.platform;
+    await page.setViewportSize({ height: 720, width: 1024 });
+    for (const state of ['empty', 'success', 'validation'] as const) {
+      await page.goto(fixtureUrl(state));
+      const artifact =
+        '.ebk/evidence/frontend/visuals/' +
+        state +
+        '-medium-' +
+        profile +
+        '.png';
+      const bytes = await page.screenshot({
+        animations: 'disabled',
+        caret: 'hide',
+        fullPage: true,
+        path: join(process.cwd(), artifact),
+      });
+      records.push({
+        artifact,
+        digest: 'sha256:' + createHash('sha256').update(bytes).digest('hex'),
+        id: state,
+        profile,
+        viewport: 'medium',
+      });
+    }
+    writeFileSync(
+      join(evidenceRoot, 'frontend-visual-observations.json'),
+      JSON.stringify({ records, schemaVersion: 1, slice: '${name}' }, null, 2) + '\\n',
+      { mode: 0o600 },
+    );
+  });
+});
+`,
+    };
+}
+//# sourceMappingURL=built-in-plan-frontend-files.js.map