@quilted/create 0.3.3 → 0.3.5

package/CHANGELOG.md

@@ -1,5 +1,235 @@
 # @quilted/create
 
+## 0.3.5
+
+### Patch Changes
+
+- [#894](https://github.com/lemonmade/quilt/pull/894) [`fb998d1`](https://github.com/lemonmade/quilt/commit/fb998d1d0a7fb7981184daa5307320477355ace8) Thanks [@lemonmade](https://github.com/lemonmade)! - Consolidate all framework context into a unified `QuiltContext` architecture.
+
+  Previously, Quilt's context was fragmented across many standalone provider components (`AsyncContext`, `GraphQLContext`, `EmailContext`, etc.), each backed by its own Preact context object. This release consolidates everything into a single `QuiltContext` interface, augmented by each package via TypeScript module declaration merging, and provided by a single `<QuiltFrameworkContext>` component.
+
+  ## Breaking changes
+
+  ### All packages: unified `QuiltContext` interface
+
+  Each `@quilted/*` package now augments a single `QuiltContext` interface from `@quilted/preact-context` rather than maintaining its own standalone context. If you were accessing any Quilt context values directly via `useContext(SomeSpecificContext)`, switch to the appropriate `use*` hook instead.
+
+  ### `@quilted/preact-router`: `useRouter` renamed to `useNavigation`
+
+  ```ts
+  // Before
+  import {useRouter} from '@quilted/quilt/navigation';
+  const router = useRouter();
+
+  // After
+  import {useNavigation} from '@quilted/quilt/navigation';
+  const navigation = useNavigation();
+  ```
+
+  ### `@quilted/preact-router`: `router` QuiltContext field renamed to `navigation`
+
+  The `QuiltContext` field that holds the navigation instance is now `navigation` instead of `router`. This affects any code that reads the field directly, and the prop name on `<QuiltFrameworkContext>`.
+
+  ```tsx
+  // Before
+  <QuiltFrameworkContext router={myNavigation} />
+
+  // After
+  <QuiltFrameworkContext navigation={myNavigation} />
+  ```
+
+  ### `@quilted/preact-router`: `TestRouter` renamed to `TestNavigation`
+
+  ```ts
+  // Before
+  import {TestRouter} from '@quilted/quilt/navigation/testing';
+
+  // After
+  import {TestNavigation} from '@quilted/quilt/navigation/testing';
+  ```
+
+  ### `@quilted/preact-browser`: `browserDetails` and `browserAssets` QuiltContext fields renamed
+
+  The `QuiltContext` fields for browser environment details and the asset manifest have shorter, cleaner names:
+
+  - `browserDetails` → `browser`
+  - `browserAssets` → `assets`
+
+  These affect the props on `<QuiltFrameworkContext>` and any direct reads of the context.
+
+  ```tsx
+  // Before
+  <QuiltFrameworkContext browserDetails={browser} browserAssets={assets} />
+
+  // After
+  <QuiltFrameworkContext browser={browser} assets={assets} />
+  ```
+
+  ### `@quilted/preact-localize`: `localize` QuiltContext field renamed to `localization`
+
+  The QuiltContext field and the corresponding `<QuiltFrameworkContext>` prop are now `localization`:
+
+  ```tsx
+  // Before
+  <QuiltFrameworkContext localize={localization} />
+
+  // After
+  <QuiltFrameworkContext localization={localization} />
+  ```
+
+  ### `@quilted/preact-localize`: `createLocalizedFormatting` and `createLocalization` removed
+
+  These factory functions have been removed. Use the `Localization` class directly:
+
+  ```ts
+  // Before
+  import {createLocalization} from '@quilted/preact-localize';
+  const localization = createLocalization('en');
+
+  // After
+  import {Localization} from '@quilted/preact-localize';
+  const localization = new Localization('en');
+  ```
+
+  ### `@quilted/preact-async`: `AsyncContext` component removed
+
+  The standalone `<AsyncContext>` provider component has been removed. Pass async context directly to `<QuiltFrameworkContext>` instead:
+
+  ```tsx
+  // Before
+  import {AsyncContext, AsyncActionCache} from '@quilted/quilt/async';
+
+  <AsyncContext cache={cache}>
+    <App />
+  </AsyncContext>;
+
+  // After
+  import {QuiltFrameworkContext} from '@quilted/quilt/context';
+  import {AsyncActionCache} from '@quilted/quilt/async';
+
+  <QuiltFrameworkContext async={{cache}}>
+    <App />
+  </QuiltFrameworkContext>;
+  ```
+
+  `QuiltFrameworkContext` handles cache serialization for server-side rendering automatically, so no other changes are required.
+
+  ### `@quilted/preact-graphql`: `GraphQLContext` component removed
+
+  The standalone `<GraphQLContext>` provider component has been removed. The two separate `graphqlRun` and `graphqlCache` props on `<QuiltFrameworkContext>` have been replaced with a single `graphql` prop that accepts a `GraphQLClient` instance (or any object with `fetch` and `cache` properties):
+
+  ```tsx
+  // Before
+  import {GraphQLContext} from '@quilted/quilt/graphql';
+
+  <QuiltFrameworkContext navigation={navigation}>
+    <GraphQLContext fetch={myFetch} cache={myCache}>
+      <App />
+    </GraphQLContext>
+  </QuiltFrameworkContext>;
+
+  // After — using the new GraphQLClient class
+  import {GraphQLClient} from '@quilted/quilt/graphql';
+
+  const graphql = new GraphQLClient(myFetch);
+
+  <QuiltFrameworkContext navigation={navigation} graphql={graphql}>
+    <App />
+  </QuiltFrameworkContext>;
+  ```
+
+  ### `@quilted/preact-email`: `EmailContext` removed
+
+  The standalone `EmailContext` Preact context object has been removed. Email components should use the new `useEmailManager()` hook to access the email manager, which reads from the unified `QuiltContext`:
+
+  ```ts
+  // Before
+  import {useContext} from 'preact/hooks';
+  import {EmailContext} from '@quilted/preact-email';
+  const email = useContext(EmailContext);
+
+  // After
+  import {useEmailManager} from '@quilted/preact-email';
+  const email = useEmailManager();
+  ```
+
+  ### `@quilted/quilt`: `QuiltContext` component renamed to `QuiltFrameworkContext`
+
+  The provider component is now named `QuiltFrameworkContext` to avoid a name clash with the `QuiltContext` TypeScript interface:
+
+  ```tsx
+  // Before
+  import {QuiltContext} from '@quilted/quilt/context';
+  <QuiltContext navigation={navigation}>...</QuiltContext>;
+
+  // After
+  import {QuiltFrameworkContext} from '@quilted/quilt/context';
+  <QuiltFrameworkContext navigation={navigation}>...</QuiltFrameworkContext>;
+  ```
+
+  ### `@quilted/quilt`: `QuiltTestContext` renamed to `QuiltFrameworkTestContext`, takes `localization` instead of `locale`
+
+  The test context helper component is now `QuiltFrameworkTestContext` and accepts a `Localization` instance directly instead of a locale string:
+
+  ```tsx
+  // Before
+  import {QuiltTestContext} from '@quilted/quilt/context/testing';
+  <QuiltTestContext locale="fr">...</QuiltTestContext>;
+
+  // After
+  import {QuiltFrameworkTestContext} from '@quilted/quilt/context/testing';
+  import {Localization} from '@quilted/quilt/localize';
+  <QuiltFrameworkTestContext localization={new Localization('fr')}>
+    ...
+  </QuiltFrameworkTestContext>;
+  ```
+
+  ## New features
+
+  ### `@quilted/graphql`: `GraphQLClient` class
+
+  A new `GraphQLClient` class bundles a GraphQL fetch function and an optional result cache into a single object. A cache is created automatically by default, configured to use the same fetch function:
+
+  ```ts
+  import {createGraphQLFetch, GraphQLClient} from '@quilted/quilt/graphql';
+
+  // Cache created automatically from the fetch function
+  const client = new GraphQLClient(createGraphQLFetch({url: '/graphql'}));
+
+  // Disable caching
+  const client = new GraphQLClient(myFetch, {cache: false});
+
+  // Share an existing cache
+  const cache = new GraphQLCache();
+  const client = new GraphQLClient(myFetch, {cache});
+
+  // Use the client
+  client.fetch(MyQuery, {variables: {id: '1'}});
+  client.cache?.query(MyQuery, {variables: {id: '1'}});
+  ```
+
+  ### `@quilted/preact-router`: `useNavigation()` hook
+
+  The renamed `useNavigation()` hook returns the active `Navigation` instance from context, providing access to the current URL, navigation history, and programmatic navigation.
+
+  ### `@quilted/preact-email`: `useEmailManager()` hook
+
+  A new `useEmailManager()` hook provides access to the `EmailManager` instance from the unified `QuiltContext`. Returns `undefined` outside of an email rendering context.
+
+  ### `@quilted/preact-async`: signal-backed `async.isHydrated`
+
+  The `AsyncContext` interface (accessed via `useQuiltContext('async')`) now includes an `isHydrated` boolean getter backed by a Preact signal. Any component that reads `async.isHydrated` will automatically re-render when the client hydration completes, without requiring a manual signal subscription.
+
+  ### `@quilted/localize`: `Localization` class documentation
+
+  The `Localization` class now has full JSDoc documentation on the class, constructor, all properties (`locale`, `direction`, `numberFormatter`, `dateTimeFormatter`), and all methods (`formatNumber`, `formatCurrency`, `formatDate`).
+
+## 0.3.4
+
+### Patch Changes
+
+- [`e6fa47e`](https://github.com/lemonmade/quilt/commit/e6fa47e93981ce0eaebbe1546659aaa08cc22689) Thanks [@lemonmade](https://github.com/lemonmade)! - Update Preact and Signal dependencies
+
 ## 0.3.3
 
 ### Patch Changes

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/index.esnext

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index11.esnext';
+import { __exports as out } from '../../../../../../../_virtual/index10.esnext';
 import { __require as requireAsync } from './providers/async.esnext';
 import { __require as requireSync } from './providers/sync.esnext';
 import { __require as requireSettings } from './settings.esnext';

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/async.esnext

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
 
 var hasRequiredAsync;
 function requireAsync() {

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/providers/sync.esnext

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
 
 var hasRequiredSync;
 function requireSync() {

package/build/esnext/node_modules/.pnpm/@nodelib_fs.stat@2.0.5/node_modules/@nodelib/fs.stat/out/settings.esnext

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
 import { __require as requireFs } from './adapters/fs.esnext';
 
 var hasRequiredSettings;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/index.esnext

@@ -1,4 +1,4 @@
-import { __exports as out } from '../../../../../../../_virtual/index10.esnext';
+import { __exports as out } from '../../../../../../../_virtual/index11.esnext';
 import { __require as requireAsync } from './providers/async.esnext';
 import { __require as requireStream } from './providers/stream.esnext';
 import { __require as requireSync } from './providers/sync.esnext';

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/async.esnext

@@ -1,4 +1,4 @@
-import { __exports as async } from '../../../../../../../../_virtual/async3.esnext';
+import { __exports as async } from '../../../../../../../../_virtual/async4.esnext';
 import { __require as requireAsync$1 } from '../readers/async.esnext';
 
 var hasRequiredAsync;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/providers/sync.esnext

@@ -1,4 +1,4 @@
-import { __exports as sync } from '../../../../../../../../_virtual/sync3.esnext';
+import { __exports as sync } from '../../../../../../../../_virtual/sync4.esnext';
 import { __require as requireSync$1 } from '../readers/sync.esnext';
 
 var hasRequiredSync;

package/build/esnext/node_modules/.pnpm/@nodelib_fs.walk@1.2.8/node_modules/@nodelib/fs.walk/out/settings.esnext

@@ -1,4 +1,4 @@
-import { __exports as settings } from '../../../../../../../_virtual/settings2.esnext';
+import { __exports as settings } from '../../../../../../../_virtual/settings3.esnext';
 import path__default from 'node:path';
 import { __require as requireOut } from '../../../../../@nodelib_fs.scandir@2.1.5/node_modules/@nodelib/fs.scandir/out/index.esnext';
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@quilted/create",
   "type": "module",
-  "version": "0.3.3",
+  "version": "0.3.5",
   "license": "MIT",
   "repository": {
     "type": "git",

package/templates/app-basic/App.tsx

@@ -1,6 +1,6 @@
 import {NotFound} from '@quilted/quilt/server';
-import {Navigation} from '@quilted/quilt/navigation';
-import {Localization} from '@quilted/quilt/localize';
+import {Routes} from '@quilted/quilt/navigation';
+import {QuiltFrameworkContext} from '@quilted/quilt/context';
 
 import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
@@ -15,8 +15,6 @@ export interface AppProps {
   context: AppContext;
 }
 
-// Define the routes for your application. If you have a lot of routes, you
-// might want to split this into a separate file.
 const routes = [
   routeWithAppContext('*', {
     render: (children) => <Frame>{children}</Frame>,
@@ -32,19 +30,16 @@ const routes = [
   }),
 ];
 
-// The root component for your application. You will typically render any
-// app-wide context in this component.
 export function App({context}: AppProps) {
   return (
     <AppContextPreact.Provider value={context}>
-      <Localization>
+      <QuiltFrameworkContext
+        navigation={context.navigation}
+        localization={context.localization}
+      >
         <Head />
-        <Navigation
-          router={context.navigation.router}
-          routes={routes}
-          context={context}
-        />
-      </Localization>
+        <Routes list={routes} context={context} />
+      </QuiltFrameworkContext>
     </AppContextPreact.Provider>
   );
 }

package/templates/app-basic/browser.tsx

@@ -14,7 +14,7 @@ const app = new BrowserApp(<App context={context} />, {context});
 // @example
 // ```js
 // // Log the current URL
-// console.log(globalThis.app.context.router.currentRequest.url);
+// console.log(globalThis.app.context.navigation.currentRequest.url);
 // ```
 Object.defineProperty(globalThis, 'app', {
   value: app,

package/templates/app-basic/context/browser.ts

@@ -1,10 +1,14 @@
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization} from '@quilted/quilt/localize';
+
 import type {AppContext} from './types.ts';
-import {NavigationForApp} from './navigation.ts';
 
 export class BrowserAppContext implements AppContext {
-  readonly navigation: NavigationForApp;
+  readonly navigation: Navigation;
+  readonly localization: Localization;
 
   constructor() {
-    this.navigation = new NavigationForApp();
+    this.navigation = new Navigation();
+    this.localization = new Localization(navigator.language);
   }
 }

package/templates/app-basic/context/navigation.ts

@@ -1,17 +1,10 @@
-import {createContextRouteFunction, Router} from '@quilted/quilt/navigation';
+import {
+  createContextRouteFunction,
+  Navigation,
+} from '@quilted/quilt/navigation';
 
 import type {AppContext} from './types.ts';
 
-export interface Navigation {
-  readonly router: Router;
-}
-
-export class NavigationForApp implements Navigation {
-  readonly router: Router;
-
-  constructor(url?: string | URL) {
-    this.router = new Router(url);
-  }
-}
-
 export const routeWithAppContext = createContextRouteFunction<AppContext>();
+
+export {Navigation};

package/templates/app-basic/context/preact.ts

@@ -2,5 +2,14 @@ import {createOptionalContext} from '@quilted/quilt/context';
 
 import type {AppContext} from './types.ts';
 
+/**
+ * The Preact context object for this application's shared context.
+ * Provide it in `App.tsx` via `<AppContextPreact.Provider value={context}>`.
+ */
 export const AppContextPreact = createOptionalContext<AppContext>();
+
+/**
+ * Returns the app's shared context. All fields in `AppContext` are required
+ * and will be available anywhere inside `<AppContextPreact.Provider>`.
+ */
 export const useAppContext = AppContextPreact.use;

package/templates/app-basic/context/server.ts

@@ -1,10 +1,17 @@
+import {Navigation} from '@quilted/quilt/navigation';
+import {Localization, parseAcceptLanguageHeader} from '@quilted/quilt/localize';
+
 import type {AppContext} from './types.ts';
-import {NavigationForApp} from './navigation.ts';
 
 export class ServerAppContext implements AppContext {
-  readonly navigation: NavigationForApp;
+  readonly navigation: Navigation;
+  readonly localization: Localization;
 
   constructor(request: Request) {
-    this.navigation = new NavigationForApp(request.url);
+    this.navigation = new Navigation(request.url);
+    this.localization = new Localization(
+      parseAcceptLanguageHeader(request.headers.get('Accept-Language') ?? '') ??
+        'en',
+    );
   }
 }

package/templates/app-basic/context/types.ts

@@ -1,5 +1,24 @@
-import type {Navigation} from './navigation.ts';
+import type {Navigation} from '@quilted/quilt/navigation';
+import type {Localization} from '@quilted/quilt/localize';
 
+/**
+ * The shared context for this application. Values in this object are
+ * available to all components in the app via `useQuiltContext()` hooks
+ * or the `useAppContext()` convenience hook.
+ *
+ * This interface extends a subset of `QuiltContext`, providing the
+ * navigation and localization fields as required (non-optional) values.
+ */
 export interface AppContext {
+  /**
+   * The navigation instance for this application. Manages the current URL,
+   * browser history, and programmatic navigation.
+   */
   readonly navigation: Navigation;
+
+  /**
+   * The localization instance for this application. Contains the active
+   * locale and formatting utilities for numbers, dates, currencies, and more.
+   */
+  readonly localization: Localization;
 }

package/templates/app-basic/package.json

@@ -18,7 +18,7 @@
     "@quilted/quilt": "^0.9.0",
     "hono": "^4.8.0",
     "jsdom": "^26.0.0",
-    "preact": "^10.26.0",
+    "preact": "^10.29.0",
     "react": "npm:@quilted/react@^19.0.0",
     "react-dom": "npm:@quilted/react-dom@^19.0.0"
   },

package/templates/app-basic/tests/render/render.tsx

@@ -1,12 +1,8 @@
 import {createRender} from '@quilted/quilt/testing';
-import {
-  BrowserDetailsContext,
-  BrowserTestMock,
-} from '@quilted/quilt/browser/testing';
-import {Navigation, TestRouter} from '@quilted/quilt/navigation/testing';
+import {TestBrowser} from '@quilted/quilt/browser/testing';
+import {TestNavigation} from '@quilted/quilt/navigation/testing';
 import {Localization} from '@quilted/quilt/localize';
-
-import {AppContextPreact} from '~/context/preact.ts';
+import {QuiltFrameworkTestContext} from '@quilted/quilt/context/testing';
 
 import {RenderOptions, RenderContext, RenderActions} from './types.ts';
 
@@ -23,24 +19,23 @@ export const renderApp = createRender<
   // Create context that can be used by the `render` function, and referenced by test
   // authors on the `root.context` property. Context is used to share data between your
   // React tree and your test code, and is ideal for mocking out global context providers.
-  context({router = new TestRouter(), browser = new BrowserTestMock()}) {
-    return {navigation: {router}, browser};
+  context({
+    navigation = new TestNavigation(),
+    browser = new TestBrowser(),
+    localization = new Localization('en'),
+  }) {
+    return {navigation, browser, localization};
   },
   // Render all of our app-wide context providers around each component under test.
-  render(element, context, {locale = 'en'}) {
-    const {
-      navigation: {router},
-      browser,
-    } = context;
-
+  render(element, {navigation, browser, localization}) {
     return (
-      <AppContextPreact.Provider value={context}>
-        <BrowserDetailsContext.Provider value={browser}>
-          <Localization locale={locale}>
-            <Navigation router={router}>{element}</Navigation>
-          </Localization>
-        </BrowserDetailsContext.Provider>
-      </AppContextPreact.Provider>
+      <QuiltFrameworkTestContext
+        navigation={navigation}
+        browser={browser}
+        localization={localization}
+      >
+        {element}
+      </QuiltFrameworkTestContext>
     );
   },
   async afterRender() {

package/templates/app-basic/tests/render/types.ts

@@ -1,38 +1,42 @@
-import type {TestRouter} from '@quilted/quilt/navigation/testing';
-import type {BrowserTestMock} from '@quilted/quilt/browser/testing';
-
-import type {AppContext} from '~/context/types.ts';
+import type {TestNavigation} from '@quilted/quilt/navigation/testing';
+import type {TestBrowser} from '@quilted/quilt/browser/testing';
+import type {Localization} from '@quilted/quilt/localize';
 
 export interface RenderOptions {
   /**
-   * A custom router to use for this component test. You can use a
+   * A custom navigation to use for this component test. You can use a
    * custom router to simulate a particular URL, and you can spy on
    * its navigation method to check that components navigate as
    * you expect.
    */
-  readonly router?: TestRouter;
+  readonly navigation?: TestNavigation;
 
   /**
    * A custom environment for this component test.
    */
-  readonly browser?: BrowserTestMock;
+  readonly browser?: TestBrowser;
 
   /**
-   * A custom locale to use for this component test.
+   * A custom localization instance to use for this component test.
    */
-  readonly locale?: string;
+  readonly localization?: Localization;
 }
 
-export interface RenderContext extends AppContext {
+export interface RenderContext {
   /**
-   * The router used for this component test.
+   * The navigation used for this component test.
    */
-  readonly navigation: {router: TestRouter};
+  readonly navigation: TestNavigation;
 
   /**
    * The browser environment for this component test.
    */
-  readonly browser: BrowserTestMock;
+  readonly browser: TestBrowser;
+
+  /**
+   * The localization used for this component test.
+   */
+  readonly localization: Localization;
 }
 
 export interface RenderActions extends Record<string, never> {}

package/templates/app-basic/tests/render.ts

@@ -1,6 +1,6 @@
 import '@quilted/quilt/testing';
 
-export {TestRouter} from '@quilted/quilt/navigation/testing';
+export {TestNavigation} from '@quilted/quilt/navigation/testing';
 
 export * from './render/types.ts';
 export {renderApp} from './render/render.tsx';

package/templates/app-empty/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@quilted/quilt": "^0.9.0",
     "hono": "^4.8.0",
-    "preact": "^10.26.0",
+    "preact": "^10.29.0",
     "react": "npm:@quilted/react@^19.0.0",
     "react-dom": "npm:@quilted/react-dom@^19.0.0"
   },

package/templates/app-graphql/App.tsx

@@ -1,7 +1,6 @@
 import {NotFound} from '@quilted/quilt/server';
-import {GraphQLContext} from '@quilted/quilt/graphql';
-import {Navigation} from '@quilted/quilt/navigation';
-import {Localization} from '@quilted/quilt/localize';
+import {Routes} from '@quilted/quilt/navigation';
+import {QuiltFrameworkContext} from '@quilted/quilt/context';
 
 import {Head} from './foundation/html.ts';
 import {Frame} from './foundation/frame.ts';
@@ -24,7 +23,7 @@ const routes = [
     children: [
       routeWithAppContext('/', {
         async load({context: {graphql}}) {
-          await Promise.all([Home.load(), graphql.cache.query(homeQuery)]);
+          await Promise.all([Home.load(), graphql.cache?.query(homeQuery)]);
         },
         render: <Home />,
       }),
@@ -38,19 +37,14 @@ const routes = [
 export function App({context}: AppProps) {
   return (
     <AppContextPreact.Provider value={context}>
-      <GraphQLContext
-        fetch={context.graphql.fetch}
-        cache={context.graphql.cache}
+      <QuiltFrameworkContext
+        navigation={context.navigation}
+        localization={context.localization}
+        graphql={context.graphql}
       >
-        <Localization>
-          <Head />
-          <Navigation
-            router={context.navigation.router}
-            routes={routes}
-            context={context}
-          />
-        </Localization>
-      </GraphQLContext>
+        <Head />
+        <Routes list={routes} context={context} />
+      </QuiltFrameworkContext>
     </AppContextPreact.Provider>
   );
 }