@lowdefy/shell 3.23.3 → 7.2.0

package/src/components/SwitchToTab.js

@@ -0,0 +1,36 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { useEffect } from 'react';
+import { router } from 'expo-router';
+
+/**
+ * Shows a tab's own page on its tab. A route that lands a tab's page on another tab's stack (a
+ * link the app is opened with, which the router matches in the first tab group) is closed, and
+ * the page's tab is selected, so the tab bar shows the tab of the page on screen.
+ *
+ * @param {Object} props
+ * @param {string} props.href The tab's router href (getTabHref).
+ */
+function SwitchToTab({ href }) {
+  useEffect(() => {
+    if (router.canDismiss()) router.dismiss();
+    router.navigate(href);
+  }, [href]);
+  return null;
+}
+
+export default SwitchToTab;

package/src/components/SwitchToTab.test.js

@@ -0,0 +1,63 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { jest } from '@jest/globals';
+import { render } from '@testing-library/react-native';
+
+import { createRoot } from '../test/fixtures.js';
+import PathRoute from '../../app/(t0,t1,t2,t3,t4)/[...path].js';
+
+const mockRouter = { canDismiss: jest.fn(() => true), dismiss: jest.fn(), navigate: jest.fn() };
+const mockParams = {};
+
+jest.mock('expo-router', () => ({
+  get router() {
+    return mockRouter;
+  },
+  useLocalSearchParams: () => mockParams,
+}));
+
+const mockState = { root: null };
+jest.mock('../ShellContext.js', () => ({
+  useSessionState: () => mockState,
+}));
+
+jest.mock('./PageScreen.js', () => {
+  const { createElement } = jest.requireActual('react');
+  return (props) => createElement('PageScreen', props);
+});
+
+beforeEach(() => {
+  mockState.root = createRoot();
+  Object.keys(mockParams).forEach((key) => delete mockParams[key]);
+});
+
+// A link the app is opened with, such as /jobs, is matched in the first tab group's stack.
+test('a tab page opened on another tab stack is shown on its own tab', async () => {
+  Object.assign(mockParams, { path: ['jobs'], status: 'open' });
+  const view = await render(<PathRoute />);
+  expect(view.toJSON()).toBeNull();
+  expect(mockRouter.dismiss).toHaveBeenCalledTimes(1);
+  expect(mockRouter.navigate.mock.calls).toEqual([['/(t1)?status=open']]);
+});
+
+test('a page no tab shows is stacked on the tab it was opened on', async () => {
+  Object.assign(mockParams, { path: ['jobs', '12'] });
+  const view = await render(<PathRoute />);
+  expect(view.toJSON().props).toEqual({ path: 'jobs/12', query: '' });
+  expect(mockRouter.navigate).not.toHaveBeenCalled();
+});

package/src/components/TabIconImages.js

@@ -0,0 +1,72 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React, { useRef } from 'react';
+import { PixelRatio, View } from 'react-native';
+import { Icon } from '@lowdefy/client-native';
+
+// A tab bar icon is 24 points; drawn at the screen's scale so it stays sharp.
+const SIZE = 24;
+
+const styles = {
+  hidden: { left: -1000, opacity: 0, position: 'absolute', top: -1000 },
+};
+
+function TabIconImage({ data, onImage }) {
+  const ref = useRef(null);
+  const drawnRef = useRef(false);
+  const scale = PixelRatio.get();
+  function draw() {
+    if (drawnRef.current) return;
+    drawnRef.current = true;
+    ref.current.toDataURL(
+      (base64) =>
+        onImage({ height: SIZE, scale, uri: `data:image/png;base64,${base64}`, width: SIZE }),
+      { height: SIZE * scale, width: SIZE * scale }
+    );
+  }
+  return (
+    <View onLayout={draw}>
+      <Icon color="#000000" data={data} ref={ref} size={SIZE} />
+    </View>
+  );
+}
+
+/**
+ * Draws tab icons that have no SF Symbol (every tab off iOS) as images: a native tab bar takes an
+ * image source, not a view, so each Lucide icon is drawn once, out of sight, and read back as a
+ * PNG with react-native-svg's toDataURL. The image is black on transparent, and the tab bar tints
+ * it (selected and unselected).
+ *
+ * @param {Object} props
+ * @param {Object[]} props.items The tabs to draw: `{ pageId, iconData }`.
+ * @param {(pageId: string, source: Object) => void} props.onImage Called with each image source.
+ */
+function TabIconImages({ items, onImage }) {
+  return (
+    <View pointerEvents="none" style={styles.hidden}>
+      {items.map((item) => (
+        <TabIconImage
+          data={item.iconData}
+          key={item.pageId}
+          onImage={(source) => onImage(item.pageId, source)}
+        />
+      ))}
+    </View>
+  );
+}
+
+export default TabIconImages;

package/src/components/UpdateScreen.js

@@ -0,0 +1,40 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import React from 'react';
+import { Linking, Platform } from 'react-native';
+
+import MessageScreen from './MessageScreen.js';
+
+// Shown for a page this shell cannot render (it lacks a type the page needs), and for every page
+// when the app requires a newer shell (minShellVersion). The store link comes from shell.json.
+function UpdateScreen({ shell }) {
+  const storeUrl = shell.store?.[Platform.OS];
+  return (
+    <MessageScreen
+      action={
+        storeUrl
+          ? { title: 'Update', onPress: () => Linking.openURL(storeUrl).catch(() => {}) }
+          : null
+      }
+      body="This page needs a newer version of the app."
+      testID="shell-update"
+      title="Update the app to open this page"
+    />
+  );
+}
+
+export default UpdateScreen;

package/src/components/getNavigationTheme.js

@@ -0,0 +1,44 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+/**
+ * The React Navigation theme the shell's navigators draw with, from the app's theme tokens: the
+ * header and back button take the tint, screens the grouped background, and titles the label
+ * colour. On iOS 26 the header and tab bar are the system's glass bars, which take their mode from
+ * the window (ThemeProvider sets it) and their tint from here.
+ *
+ * @param {Object} params
+ * @param {Object} params.base React Navigation's DefaultTheme or DarkTheme, for its fonts.
+ * @param {boolean} params.isDark
+ * @param {Object} params.tokens The theme tokens of the mode showing.
+ * @returns {{ dark: boolean, colors: Object, fonts: Object }}
+ */
+function getNavigationTheme({ base, isDark, tokens }) {
+  return {
+    ...base,
+    dark: isDark,
+    colors: {
+      primary: tokens.colorTint,
+      background: tokens.colorGroupedBackground,
+      card: tokens.colorGroupedBackground,
+      text: tokens.colorLabel,
+      border: tokens.colorSeparator,
+      notification: tokens.colorError,
+    },
+  };
+}
+
+export default getNavigationTheme;

package/src/components/getNavigationTheme.test.js

@@ -0,0 +1,41 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import getNavigationTheme from './getNavigationTheme.js';
+
+const tokens = {
+  colorError: '#ff4d4f',
+  colorGroupedBackground: '#F2F2F7',
+  colorLabel: '#000000',
+  colorSeparator: 'rgba(60,60,67,0.29)',
+  colorTint: '#6366f1',
+};
+
+test('getNavigationTheme draws the navigators in the app tint, surfaces and label colour', () => {
+  const base = { dark: false, colors: {}, fonts: { regular: { fontFamily: 'System' } } };
+  expect(getNavigationTheme({ base, isDark: true, tokens })).toEqual({
+    dark: true,
+    colors: {
+      primary: '#6366f1',
+      background: '#F2F2F7',
+      card: '#F2F2F7',
+      text: '#000000',
+      border: 'rgba(60,60,67,0.29)',
+      notification: '#ff4d4f',
+    },
+    fonts: base.fonts,
+  });
+});

package/src/components/styles.js

@@ -0,0 +1,50 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { StyleSheet } from 'react-native';
+
+const styles = StyleSheet.create({
+  centered: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    padding: 24,
+    gap: 16,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: '700',
+    lineHeight: 28,
+    textAlign: 'center',
+  },
+  body: {
+    fontSize: 17,
+    lineHeight: 22,
+    textAlign: 'center',
+  },
+  button: {
+    paddingHorizontal: 20,
+    paddingVertical: 12,
+    borderRadius: 12,
+  },
+  buttonText: {
+    color: '#FFFFFF',
+    fontSize: 17,
+    fontWeight: '600',
+  },
+});
+
+export default styles;

package/src/components/useSurfaceTokens.js

@@ -0,0 +1,47 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { useContext } from 'react';
+import { useColorScheme } from 'react-native';
+import { iosColors, ThemeContext } from '@lowdefy/client-native';
+
+// The iOS default tint, for the screens shown before the app's theme is known.
+const SYSTEM_TINT = '#007AFF';
+
+/**
+ * The colours the shell's own screens (loading, messages, sign in, lock) draw with: the app's
+ * theme tokens inside its ThemeProvider. A shell opens, signs in and locks before the app's root
+ * config, and so its theme, has arrived; those screens take the device's mode in the iOS
+ * semantic colours and tint.
+ *
+ * @returns {Object} Tokens with colorGroupedBackground, colorCell, colorLabel,
+ *   colorSecondaryLabel, colorSeparator, colorTint and colorError.
+ */
+function useSurfaceTokens() {
+  const theme = useContext(ThemeContext);
+  const systemScheme = useColorScheme();
+  if (theme !== null) {
+    return theme.tokens;
+  }
+  const isDark = systemScheme === 'dark';
+  return {
+    ...iosColors[isDark ? 'dark' : 'light'],
+    colorError: isDark ? '#FF453A' : '#FF3B30',
+    colorTint: SYSTEM_TINT,
+  };
+}
+
+export default useSurfaceTokens;

package/src/config/getAppApiBase.js

@@ -0,0 +1,34 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { LowdefyInternalError } from '@lowdefy/errors';
+
+// The app server's URL for the shell's environment (shell.json `environment`), without a trailing
+// slash. Each app's urls come from its environments; Lowdefy Dev reads lowdefy dev's. checkShellConfig
+// refuses a shell.json with no url for its environment, so a missing one is a Lowdefy wiring bug.
+function getAppApiBase({ app, environment }) {
+  const url = app.urls?.[environment];
+  if (typeof url !== 'string' || url.length === 0) {
+    throw new LowdefyInternalError(
+      `Shell app "${app.id}" has no url for environment "${environment}". Received ${JSON.stringify(
+        app.urls
+      )}.`
+    );
+  }
+  return url.replace(/\/+$/, '');
+}
+
+export default getAppApiBase;

package/src/config/getShellConfig.js

@@ -0,0 +1,37 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import Constants from 'expo-constants';
+
+import typeManifest from '../plugins/typeManifest.js';
+import shellVersion from '../version/shellVersion.js';
+
+/**
+ * The shell's config: shell.json as app.config.ts built it into the app (`id`, `name`,
+ * `profile`, `scheme`, `environment`, `store` and the one app it opens,
+ * `app: { id, name, urls: { <env>: url } }`, checked by checkShellConfig.js), with the `version`
+ * and `typeManifest` of the JavaScript that is running, and `easProjectId`. An embedded launch reads the Expo config
+ * the native build embedded, so both come from the bundle instead: a type added to the plugin maps
+ * reaches the shell from Metro or by an over-the-air update, and a shell whose new JavaScript
+ * meets an app's `minShellVersion` opens its pages.
+ */
+function getShellConfig() {
+  const { eas, shell } = Constants.expoConfig.extra;
+  // The EAS project, for an Expo push token; null for a shell without one (Lowdefy Dev).
+  return { ...shell, easProjectId: eas?.projectId ?? null, typeManifest, version: shellVersion };
+}
+
+export default getShellConfig;

package/src/config/getShellConfig.test.js

@@ -0,0 +1,80 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import getPageView from '../session/getPageView.js';
+import types from '../plugins/types.js';
+import typeManifest from '../plugins/typeManifest.js';
+import shellVersion from '../version/shellVersion.js';
+import getShellConfig from './getShellConfig.js';
+
+// The Expo config a native build embedded: its shell version is older than the JavaScript's, and its
+// type manifest predates the native Markdown block.
+jest.mock('expo-constants', () => ({
+  expoConfig: {
+    extra: {
+      shell: {
+        scheme: 'lowdefy-dev',
+        version: '0.1.0',
+        typeManifest: {
+          actions: {},
+          blocks: { Screen: { package: '@lowdefy/blocks-native', version: 6 } },
+          operators: {},
+        },
+      },
+    },
+  },
+}));
+
+test('getShellConfig reads the type manifest from the bundle, not the embedded Expo config', () => {
+  const shell = getShellConfig();
+  expect(shell.typeManifest).toBe(typeManifest);
+  expect(shell.scheme).toBe('lowdefy-dev');
+});
+
+test('getShellConfig reads the shell version from the bundle, not the embedded Expo config', () => {
+  expect(getShellConfig().version).toBe(shellVersion);
+});
+
+test('an app whose minShellVersion the bundled JavaScript meets opens on a shell built before it', () => {
+  const root = {
+    minShellVersion: shellVersion,
+    pageIndex: [{ path: 'home', pageId: 'home', hash: 'h-home-1', typesKey: 'basic' }],
+    typeSets: {
+      basic: { blocks: [{ type: 'Screen', ...typeManifest.blocks.Screen }] },
+    },
+  };
+  const view = getPageView({ path: 'home', shell: getShellConfig(), state: { pages: {}, root } });
+  expect(view.view).toBe('loading');
+});
+
+test('a block type in the plugin maps opens on a shell whose embedded Expo config lacks it', () => {
+  expect(types.blocks.Markdown).not.toBeUndefined();
+  const { version } = typeManifest.blocks.Markdown;
+  const root = {
+    minShellVersion: null,
+    pageIndex: [{ path: 'notes', pageId: 'notes', hash: 'h-notes-1', typesKey: 'markdown' }],
+    typeSets: {
+      markdown: {
+        blocks: [
+          { type: 'Screen', package: '@lowdefy/blocks-native', version },
+          { type: 'Markdown', package: '@lowdefy/blocks-native', version },
+        ],
+      },
+    },
+  };
+  const view = getPageView({ path: 'notes', shell: getShellConfig(), state: { pages: {}, root } });
+  expect(view.view).toBe('loading');
+});

package/src/createShellApp.js

@@ -0,0 +1,126 @@
+/*
+  Copyright 2020-2026 Lowdefy, Inc
+
+  Licensed under the Apache License, Version 2.0 (the "License");
+  you may not use this file except in compliance with the License.
+  You may obtain a copy of the License at
+
+      http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software
+  distributed under the License is distributed on an "AS IS" BASIS,
+  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  See the License for the specific language governing permissions and
+  limitations under the License.
+*/
+
+import { fetch as expoFetch } from 'expo/fetch';
+import * as Crypto from 'expo-crypto';
+import { openDatabaseSync } from 'expo-sqlite';
+
+import createAppAuth from './auth/createAppAuth.js';
+import createAppEventTrigger from './native/createAppEventTrigger.js';
+import createAppSession from './session/createAppSession.js';
+import createDeviceStore from './host/createDeviceStore.js';
+import createRouterAdapter from './host/createRouterAdapter.js';
+import createShellFetch from './host/createShellFetch.js';
+import createShellHost from './host/createShellHost.js';
+import createRequestQueue from './queue/createRequestQueue.js';
+import createShellLocale from './locale/createShellLocale.js';
+import createSqliteCacheStore from './cache/createSqliteCacheStore.js';
+import createSqliteQueueStore from './queue/createSqliteQueueStore.js';
+import getAppApiBase from './config/getAppApiBase.js';
+import getDeviceLocales from './locale/getDeviceLocales.js';
+import networkStatus from './host/networkStatus.js';
+import withNetworkErrors from './host/withNetworkErrors.js';
+import withoutCookies from './auth/withoutCookies.js';
+import withShellHeader from './host/withShellHeader.js';
+
+let db = null;
+
+function getDatabase() {
+  if (db === null) {
+    db = openDatabaseSync('lowdefy-shell.db');
+  }
+  return db;
+}
+
+// Everything the shell's one app (shell.app) needs: its auth, session, core host, locale, request
+// queue and the trigger of its app events.
+// auth.start reads the session token and starts the session; onSignedOut is called once a sign-out
+// removed the person's data, to open the app afresh.
+async function createShellApp({ onSignedOut, shell }) {
+  const { app } = shell;
+  const apiBase = getAppApiBase({ app, environment: shell.environment });
+  const cacheStore = createSqliteCacheStore({ db: getDatabase() });
+  const queueStore = createSqliteQueueStore({ db: getDatabase() });
+  const kv = createDeviceStore();
+  // Lowdefy Dev sends a paired dev server's token on every call (src/dev, shell.transport).
+  const transport = shell.transport ?? {
+    fetch: globalThis.fetch,
+    WebSocket: globalThis.WebSocket,
+    wrapFetch: (baseFetch) => baseFetch,
+  };
+  const fetch = withShellHeader({
+    fetch: withoutCookies(withNetworkErrors(transport.fetch)),
+    shellVersion: shell.version,
+  });
+  // React Native's fetch buffers a response body; a block that reads its answer as a stream (the
+  // AgentChat block's chat stream) calls through expo/fetch, sent the same way.
+  const streamFetch = withShellHeader({
+    fetch: withoutCookies(withNetworkErrors(transport.wrapFetch(expoFetch))),
+    shellVersion: shell.version,
+  });
+
+  // Sign-in, unlock and sign-out (src/auth): the token store, the fetches that watch it and the
+  // stores a signed-out session can no longer write to.
+  const auth = createAppAuth({
+    apiBase,
+    app,
+    cacheStore,
+    fetch,
+    kv,
+    onSignedOut,
+    queueStore,
+    shell,
+    streamFetch,
+  });
+
+  const session = createAppSession({
+    apiBase,
+    app,
+    cacheStore: auth.sessionStores.cacheStore,
+    fetch: auth.fetch,
+    kv: auth.sessionStores.kv,
+    tokenStore: auth.tokenStore,
+  });
+  const shellFetch = createShellFetch({ fetch: auth.fetch, session });
+  const triggerAppEvent = createAppEventTrigger({ session });
+  const requestQueue = createRequestQueue({
+    appId: app.id,
+    fetch: shellFetch,
+    networkStatus,
+    newId: Crypto.randomUUID,
+    queueStore,
+    tokenStore: auth.tokenStore,
+    triggerAppEvent,
+  });
+  const host = createShellHost({
+    fetch: shellFetch,
+    requestQueue,
+    router: createRouterAdapter({ session }),
+    session,
+    streamFetch: auth.streamFetch,
+    tokenStore: auth.tokenStore,
+    WebSocket: transport.WebSocket,
+  });
+  const locale = createShellLocale({
+    getDeviceLocales,
+    globals: host.globals,
+    session,
+    storage: host.storage,
+  });
+  return { apiBase, auth, host, locale, requestQueue, session, triggerAppEvent };
+}
+
+export default createShellApp;