@sempods/apps 0.8.0 → 0.9.0-dev.1

package/skeleton/app/src/places.ts

@@ -0,0 +1,146 @@
+import type { AddressModel } from '@sempods/app-ui';
+import { app } from './sempods.generated.ts';
+
+// The app's addresses as places: the start page at the app's path, a view per
+// route in apps.json `routes` (for example /<id>/bought), an item per
+// resource address (/<id>/items/<id>), the sign-in callback and an explicit
+// page for anything else. `useNav(places)` in App.tsx moves between them:
+// links, bookmarks and Back work, and an unsaved edit asks first. The address
+// model is the app's own; change places and addresses here.
+
+/** A route listed in apps.json. */
+export type Route = (typeof app.routes)[number];
+
+export type Place =
+  | { readonly kind: 'start' }
+  | { readonly kind: 'view'; readonly route: Route }
+  /**
+   * One item of src/examples/ListScreen.tsx, at `items/<id>`. `context` is
+   * the source Context the address names; the item is edited there, never
+   * in another one. Rename it with the list (for example `tasks/:id`).
+   */
+  | {
+      readonly kind: 'item';
+      readonly subject: string;
+      readonly context?: string;
+    }
+  | { readonly kind: 'callback' }
+  | { readonly kind: 'not-found'; readonly reason: 'unknown' | 'invalid' };
+
+/** The resource pattern of an item; apps.json `resources` declares it. */
+export const ITEM = 'items/:id';
+
+/** An absolute IRI, as the SDK accepts it: a scheme and a rest. */
+const absolute = (value: string) => /^[A-Za-z][A-Za-z0-9+.-]*:\S+$/.test(value);
+
+/** A subject IRI as one path segment: UTF-8 in base64url. */
+export function encodeSubject(iri: string): string {
+  let binary = '';
+  for (const byte of new TextEncoder().encode(iri))
+    binary += String.fromCharCode(byte);
+  return btoa(binary).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '');
+}
+
+/** The subject IRI of a path segment; null when it names none. */
+export function decodeSubject(id: string): string | null {
+  if (!/^[\w-]+$/.test(id)) return null;
+  try {
+    const binary = atob(id.replace(/-/g, '+').replace(/_/g, '/'));
+    const bytes = Uint8Array.from(binary, (c) => c.charCodeAt(0));
+    const iri = new TextDecoder('utf-8', { fatal: true }).decode(bytes);
+    return absolute(iri) ? iri : null;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * The address model over the app's path, routes and resource patterns. An
+ * address the app does not declare in apps.json is not found, so the parser,
+ * the host and the installed app always agree.
+ */
+export function addressModel(config: {
+  readonly basePath: string;
+  readonly routes: readonly string[];
+  readonly resources: readonly string[];
+}): AddressModel<Place> {
+  const { basePath } = config;
+  const model: AddressModel<Place> = {
+    format(place) {
+      switch (place.kind) {
+        case 'start':
+        case 'not-found':
+          return basePath;
+        case 'view':
+          return basePath + place.route;
+        case 'callback':
+          return basePath + 'callback';
+        case 'item': {
+          const path = `${basePath}items/${encodeSubject(place.subject)}`;
+          return place.context
+            ? `${path}?context=${encodeURIComponent(place.context)}`
+            : path;
+        }
+      }
+    },
+    parse(pathname, search) {
+      const here = pathname + search;
+      // A known address in another form (a trailing slash) becomes its
+      // canonical one. Its query stays, so a deep link keeps it through
+      // sign-in; parameters the address sets itself come first.
+      const known = (place: Place) => {
+        const address = model.format(place);
+        const own = address.split('?')[1];
+        if (own === undefined) return { place, canonical: address + search };
+        const set = new URLSearchParams(own);
+        const rest = new URLSearchParams(
+          [...new URLSearchParams(search)].filter(([key]) => !set.has(key)),
+        ).toString();
+        return { place, canonical: rest ? `${address}&${rest}` : address };
+      };
+      // An unknown or invalid address keeps itself, so its page shows the
+      // address the person followed.
+      const missing = (reason: 'unknown' | 'invalid') => ({
+        place: { kind: 'not-found', reason } as const,
+        canonical: here,
+      });
+      if (!(pathname + '/').startsWith(basePath)) return missing('unknown');
+      const path = pathname.slice(basePath.length).replace(/\/$/, '');
+      // The runtime reads the callback's parameters: it keeps its address.
+      if (path === 'callback')
+        return { place: { kind: 'callback' }, canonical: here };
+      if (path === '') return known({ kind: 'start' });
+      // Literal routes win over resource patterns sharing their prefix.
+      const route = config.routes.find((r) => r === path);
+      if (route !== undefined)
+        return known({ kind: 'view', route: route as Route });
+      const item = /^items\/([^/]+)$/.exec(path);
+      if (item?.[1] && config.resources.includes(ITEM)) {
+        const subject = decodeSubject(item[1]);
+        const context = new URLSearchParams(search).get('context');
+        if (!subject || (context !== null && !absolute(context)))
+          return missing('invalid');
+        return known({
+          kind: 'item',
+          subject,
+          ...(context ? { context } : {}),
+        });
+      }
+      return missing('unknown');
+    },
+  };
+  return model;
+}
+
+/**
+ * The address a sign-in callback returns to, kept in the app. A callback
+ * without a matching sign-in, for example an expired one, returns to `/` when
+ * `returnTo` is a function, as the generated one is; that is the site's
+ * overview, so the app's start page takes its place.
+ */
+export function inApp(url: string): string {
+  return url.startsWith(app.basePath) ? url : app.basePath;
+}
+
+/** The app's address model; pass it to `useNav` once, in the frame. */
+export const places = addressModel(app);

package/skeleton/app/src/texts.ts

@@ -22,6 +22,10 @@ const en = {
   newVersion:
     'A new version is ready. It is used once every window of this app has been closed.',
   menu: 'Menu',
+  notFound: 'Not found',
+  notFoundText: 'This address does not lead anywhere in this app.',
+  invalidLink: 'This link is not valid.',
+  toStart: 'To the start page',
 };
 
 export const texts: { readonly en: typeof en; readonly de: typeof en } = {
@@ -31,5 +35,9 @@ export const texts: { readonly en: typeof en; readonly de: typeof en } = {
     newVersion:
       'Eine neue Version ist bereit. Sie wird verwendet, sobald alle Fenster dieser App geschlossen sind.',
     menu: 'Menü',
+    notFound: 'Nicht gefunden',
+    notFoundText: 'Diese Adresse führt nirgendwohin in dieser App.',
+    invalidLink: 'Dieser Link ist ungültig.',
+    toStart: 'Zur Startseite',
   },
 };

package/skeleton/app/src/themes/calm.css

@@ -1,11 +1,25 @@
 /* Calm: graphite on white, quiet and neutral; the default.
-   The --sempods-* tokens colour the app and the SDK components alike, in
-   light and dark mode; each pair keeps at least 4.5:1 contrast. */
+   Palette roles of the theme contract of @sempods/app-ui, in light and
+   dark mode. They colour the app's components and, through the kit's bridge,
+   the SDK's. Text pairs keep 4.5:1, field boundaries and the focus ring
+   3:1; pnpm run check:theme checks every pair in both modes. */
 :root {
-  --sempods-bg: light-dark(#ffffff, #111315);
-  --sempods-text: light-dark(#1f2933, #e5e7eb);
-  --sempods-muted: light-dark(#6b7280, #9ca3af);
-  --sempods-line: light-dark(#e5e7eb, #2d3138);
-  --sempods-accent: light-dark(#1f2933, #e5e7eb);
-  --sempods-on-accent: light-dark(#ffffff, #111315);
+  --background: light-dark(#ffffff, #111315);
+  --foreground: light-dark(#1f2933, #e5e7eb);
+  --card: light-dark(#ffffff, #181b1f);
+  --card-foreground: var(--foreground);
+  --popover: light-dark(#ffffff, #1b1e23);
+  --popover-foreground: var(--foreground);
+  --primary: light-dark(#1f2933, #e5e7eb);
+  --primary-foreground: light-dark(#ffffff, #111315);
+  --secondary: light-dark(#eef0f3, #23272e);
+  --secondary-foreground: var(--foreground);
+  --muted: light-dark(#f3f4f6, #1d2026);
+  --muted-foreground: light-dark(#5f6672, #a1a7b0);
+  --accent: light-dark(#eef0f3, #262a31);
+  --accent-foreground: var(--foreground);
+  --destructive: light-dark(#b42318, #ffbcb5);
+  --border: light-dark(#e5e7eb, #2d3138);
+  --input: light-dark(#7a818c, #6b7280);
+  --ring: light-dark(#1f2933, #e5e7eb);
 }

package/skeleton/app/src/themes/fresh.css

@@ -1,11 +1,25 @@
 /* Fresh: clear teal and cool greys, light and open.
-   The --sempods-* tokens colour the app and the SDK components alike, in
-   light and dark mode; each pair keeps at least 4.5:1 contrast. */
+   Palette roles of the theme contract of @sempods/app-ui, in light and
+   dark mode. They colour the app's components and, through the kit's bridge,
+   the SDK's. Text pairs keep 4.5:1, field boundaries and the focus ring
+   3:1; pnpm run check:theme checks every pair in both modes. */
 :root {
-  --sempods-bg: light-dark(#ffffff, #0e171d);
-  --sempods-text: light-dark(#11293a, #e1edf3);
-  --sempods-muted: light-dark(#58697a, #94a8b6);
-  --sempods-line: light-dark(#dce8ef, #22343f);
-  --sempods-accent: light-dark(#0a6680, #5ec6e4);
-  --sempods-on-accent: light-dark(#ffffff, #06212b);
+  --background: light-dark(#ffffff, #0e171d);
+  --foreground: light-dark(#11293a, #e1edf3);
+  --card: light-dark(#ffffff, #132029);
+  --card-foreground: var(--foreground);
+  --popover: light-dark(#ffffff, #16242e);
+  --popover-foreground: var(--foreground);
+  --primary: light-dark(#0a6680, #5ec6e4);
+  --primary-foreground: light-dark(#ffffff, #06212b);
+  --secondary: light-dark(#e4f1f6, #1a2d38);
+  --secondary-foreground: var(--foreground);
+  --muted: light-dark(#eff6f9, #15222b);
+  --muted-foreground: light-dark(#4f6070, #94a8b6);
+  --accent: light-dark(#e4f1f6, #1d313d);
+  --accent-foreground: var(--foreground);
+  --destructive: light-dark(#b42318, #ffbcb5);
+  --border: light-dark(#dce8ef, #22343f);
+  --input: light-dark(#6a7f8d, #5f7787);
+  --ring: light-dark(#0a6680, #5ec6e4);
 }

package/skeleton/app/src/themes/playful.css

@@ -1,11 +1,25 @@
 /* Playful: violet and soft lilac, lively and friendly.
-   The --sempods-* tokens colour the app and the SDK components alike, in
-   light and dark mode; each pair keeps at least 4.5:1 contrast. */
+   Palette roles of the theme contract of @sempods/app-ui, in light and
+   dark mode. They colour the app's components and, through the kit's bridge,
+   the SDK's. Text pairs keep 4.5:1, field boundaries and the focus ring
+   3:1; pnpm run check:theme checks every pair in both modes. */
 :root {
-  --sempods-bg: light-dark(#ffffff, #14111c);
-  --sempods-text: light-dark(#241a3a, #ece6f8);
-  --sempods-muted: light-dark(#665e7c, #a49cbc);
-  --sempods-line: light-dark(#e9e4f3, #2e2742);
-  --sempods-accent: light-dark(#6a3bd2, #b59cff);
-  --sempods-on-accent: light-dark(#ffffff, #1b1036);
+  --background: light-dark(#ffffff, #14111c);
+  --foreground: light-dark(#241a3a, #ece6f8);
+  --card: light-dark(#ffffff, #1b1725);
+  --card-foreground: var(--foreground);
+  --popover: light-dark(#ffffff, #1f1a2b);
+  --popover-foreground: var(--foreground);
+  --primary: light-dark(#6a3bd2, #b59cff);
+  --primary-foreground: light-dark(#ffffff, #1b1036);
+  --secondary: light-dark(#efeafb, #282138);
+  --secondary-foreground: var(--foreground);
+  --muted: light-dark(#f5f2fc, #1e1929);
+  --muted-foreground: light-dark(#5f5776, #a49cbc);
+  --accent: light-dark(#efeafb, #2c2540);
+  --accent-foreground: var(--foreground);
+  --destructive: light-dark(#b42318, #ffbcb5);
+  --border: light-dark(#e9e4f3, #2e2742);
+  --input: light-dark(#7d7596, #6f6789);
+  --ring: light-dark(#6a3bd2, #b59cff);
 }

package/skeleton/app/src/themes/warm.css

@@ -1,11 +1,25 @@
 /* Warm: terracotta on cream, cosy and homely.
-   The --sempods-* tokens colour the app and the SDK components alike, in
-   light and dark mode; each pair keeps at least 4.5:1 contrast. */
+   Palette roles of the theme contract of @sempods/app-ui, in light and
+   dark mode. They colour the app's components and, through the kit's bridge,
+   the SDK's. Text pairs keep 4.5:1, field boundaries and the focus ring
+   3:1; pnpm run check:theme checks every pair in both modes. */
 :root {
-  --sempods-bg: light-dark(#fdfaf6, #1a1512);
-  --sempods-text: light-dark(#2b211b, #efe6dd);
-  --sempods-muted: light-dark(#74675c, #ab9d90);
-  --sempods-line: light-dark(#ece2d8, #3a2f28);
-  --sempods-accent: light-dark(#9c4128, #f0a184);
-  --sempods-on-accent: light-dark(#ffffff, #2a120a);
+  --background: light-dark(#fdfaf6, #1a1512);
+  --foreground: light-dark(#2b211b, #efe6dd);
+  --card: light-dark(#fffdfa, #211b17);
+  --card-foreground: var(--foreground);
+  --popover: light-dark(#fffdfa, #251e19);
+  --popover-foreground: var(--foreground);
+  --primary: light-dark(#9c4128, #f0a184);
+  --primary-foreground: light-dark(#ffffff, #2a120a);
+  --secondary: light-dark(#f4e9df, #30261f);
+  --secondary-foreground: var(--foreground);
+  --muted: light-dark(#f6efe7, #241d18);
+  --muted-foreground: light-dark(#6b5e53, #ab9d90);
+  --accent: light-dark(#f4e9df, #342a23);
+  --accent-foreground: var(--foreground);
+  --destructive: light-dark(#a8201a, #ffbcb5);
+  --border: light-dark(#ece2d8, #3a2f28);
+  --input: light-dark(#8a7b6e, #7a6b5f);
+  --ring: light-dark(#9c4128, #f0a184);
 }

package/skeleton/app/vite.config.ts

@@ -1,13 +1,23 @@
+import tailwindcss from '@tailwindcss/vite';
 import react from '@vitejs/plugin-react';
 import { defineConfig } from 'vite';
 import { VitePWA } from 'vite-plugin-pwa';
 import { base, pageTitle, pwa, server } from './vite.sempods.generated.ts';
 
 // Base path, development port, page title and PWA settings come from apps.json
-// through the generated file; add your own plugins and options here.
+// through the generated file; Tailwind CSS styles the UI kit and the app. Add
+// your own plugins and options here.
 export default defineConfig({
   base,
   server,
   preview: server,
-  plugins: [react(), pageTitle, ...(pwa ? [VitePWA(pwa)] : [])],
+  // React, the SDK and the UI kit come to about 570 kB minified (180 kB
+  // gzip) in one chunk; Vite warns only well above that.
+  build: { chunkSizeWarningLimit: 1000 },
+  plugins: [
+    react(),
+    tailwindcss(),
+    pageTitle,
+    ...(pwa ? [VitePWA(pwa)] : []),
+  ],
 });

package/skills/update/SKILL.md

@@ -34,7 +34,12 @@ instead.
    `pnpm run update <version>`.
 3. **Read the upgrade notes** for every version after the old one, including
    skipped ones, in `node_modules/@sempods/apps/CHANGELOG.md`. They name what
-   the migration cannot do alone, such as changes the owner's apps need.
+   the migration cannot do alone, such as changes the owner's apps need. The
+   migration report's notes name app code that waits for a decision, for
+   example an app that still has the copied UI kit: which of its files are as
+   shipped and which the owner changed. Propose such app changes to the owner
+   separately from the tooling update; never overwrite a file the owner
+   changed.
 4. **Decide the manual cases.** The migration applies only unambiguous
    changes. It lists everything else in `.sempods-migration/migration.json`,
    each with a reason, and leaves those files exactly as they are. Next to

package/update-policy.json

@@ -31,5 +31,5 @@
   },
   "seed": ["apps.json", "apps/.gitkeep"],
   "rootManifest": "package.json",
-  "sdk": ["@sempods/app-sdk", "@sempods/client-sdk"]
+  "sdk": ["@sempods/app-sdk", "@sempods/client-sdk", "@sempods/app-ui"]
 }

package/skeleton/app/src/routes.test.ts

@@ -1,19 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { pathOf, routeOf } from './routes.ts';
-
-describe('routes', () => {
-  const routes = ['open', 'bought'] as const;
-
-  it('reads the route of an address under the app path', () => {
-    expect(routeOf('/konsum/bought', routes, '/konsum/')).toBe('bought');
-    expect(routeOf('/konsum/bought/', routes, '/konsum/')).toBe('bought');
-    expect(routeOf('/konsum/', routes, '/konsum/')).toBeUndefined();
-    expect(routeOf('/konsum/other', routes, '/konsum/')).toBeUndefined();
-    expect(routeOf('/notes/bought', routes, '/konsum/')).toBeUndefined();
-  });
-
-  it('writes the address of a route', () => {
-    expect(pathOf('bought', '/konsum/')).toBe('/konsum/bought');
-    expect(pathOf(undefined, '/konsum/')).toBe('/konsum/');
-  });
-});

package/skeleton/app/src/routes.ts

@@ -1,139 +0,0 @@
-import {
-  useCallback,
-  useEffect,
-  useSyncExternalStore,
-  type MouseEvent,
-} from 'react';
-import { useApp } from '@sempods/app-sdk/react';
-import { app } from './sempods.generated.ts';
-
-// The app's views as addresses: the start page at the app's path and one
-// route per entry in apps.json `routes` (for example /<id>/bought). Links,
-// bookmarks and the back button work, and the published site answers every
-// route without rewrites.
-
-/** A route listed in apps.json; undefined is the start page. */
-export type Route = (typeof app.routes)[number];
-
-/** The route of an address; undefined for the start page and unknown paths. */
-export function routeOf<R extends string>(
-  path: string,
-  routes: readonly R[],
-  base: string,
-): R | undefined {
-  if (!path.startsWith(base)) return undefined;
-  const segment = path.slice(base.length).replace(/\/$/, '');
-  return routes.find((route) => route === segment);
-}
-
-/** The address of a route; the start page is the app's path. */
-export function pathOf(route: string | undefined, base: string): string {
-  return route === undefined ? base : `${base}${route}`;
-}
-
-// The address the app shows. It changes only through the functions below, so
-// a declined navigation keeps the current view.
-let shown = typeof location === 'object' ? location.pathname : '';
-// The position of the shown entry in the session history, kept in its state,
-// so a declined back or forward can return to it without a new entry.
-let position: number =
-  typeof history === 'object' ? (history.state?.position ?? 0) : 0;
-// Set while the router itself undoes a step, whose popstate it ignores.
-let undoing = false;
-const listeners = new Set<() => void>();
-function show(path: string) {
-  shown = path;
-  for (const listener of listeners) listener();
-}
-function subscribe(listener: () => void) {
-  listeners.add(listener);
-  return () => void listeners.delete(listener);
-}
-
-/**
- * Replaces the address without a new history entry. Pass it to the runtime
- * (`replaceUrl`), so the return to the original route after a sign-in shows
- * that route.
- */
-export function replaceUrl(url: string) {
-  history.replaceState({ position }, '', url);
-  show(location.pathname);
-}
-
-/**
- * The current route, `go` to switch it and `link(route)`, the props of an
- * `<a>` that switches to it. Switching, back and forward run
- * under the SDK's leave policy: an unsaved edit asks first, and staying keeps
- * the view, its address and the history. An unsent creation draft is not
- * asked about; keep such input (a Composer) outside the switched views. Call it once, in the app's frame, and pass the
- * route down.
- */
-export function useRoute() {
-  const path = useSyncExternalStore(subscribe, () => shown);
-  const route: Route | undefined = routeOf(path, app.routes, app.basePath);
-  const { navigate } = useApp();
-
-  useEffect(() => {
-    const onPop = () => {
-      if (undoing) {
-        undoing = false;
-        return;
-      }
-      const to = location.pathname;
-      const target: number = history.state?.position ?? 0;
-      void navigate(() => {
-        position = target;
-        show(to);
-      }).then((left) => {
-        // Staying: step back to the shown entry; the history stays intact.
-        if (left || target === position) return;
-        undoing = true;
-        history.go(position - target);
-      });
-    };
-    addEventListener('popstate', onPop);
-    return () => removeEventListener('popstate', onPop);
-  }, [navigate]);
-
-  // One address per view: unknown paths show the start page, and a trailing
-  // slash goes. The callback keeps its address until the runtime has read it.
-  useEffect(() => {
-    const normal = pathOf(route, app.basePath);
-    if (path !== normal && path !== `${app.basePath}callback`)
-      replaceUrl(normal + location.search + location.hash);
-  }, [path, route]);
-
-  const go = useCallback(
-    (next: Route | undefined) => {
-      if (next === route) return;
-      void navigate(() => {
-        position += 1;
-        history.pushState({ position }, '', pathOf(next, app.basePath));
-        show(location.pathname);
-      });
-    },
-    [navigate, route],
-  );
-  // Props for a link to a route: its own address, so it opens in a new tab or
-  // gets bookmarked, while a plain click switches in place through `go`
-  // instead of loading the page past the leave policy.
-  const link = useCallback(
-    (next: Route | undefined) => ({
-      href: pathOf(next, app.basePath),
-      onClick: (event: MouseEvent) => {
-        if (
-          event.button !== 0 ||
-          event.metaKey ||
-          event.ctrlKey ||
-          event.shiftKey ||
-          event.altKey
-        )
-          return;
-        event.preventDefault();
-        go(next);
-      },
-    }),
-    [go],
-  );
-  return { route, go, link };
-}

package/skeleton/app/src/ui/Composer.tsx

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react';
-
-/**
- * A bar fixed at the bottom of the screen, in thumb reach, for the input that
- * is always there (for example "add an item"). The page leaves room for it,
- * it sits above the home indicator, and with the skeleton's viewport setting
- * (interactive-widget=resizes-content) it stays above the on-screen keyboard
- * in browsers that support that. iOS Safari overlays the keyboard instead.
- * Render it in the frame, outside views that tabs switch: switching views
- * does not ask about an unsent creation draft, and unmounting loses it.
- */
-export function Composer({ children }: { readonly children: ReactNode }) {
-  return (
-    <div className="composer">
-      <div className="composer-content">{children}</div>
-    </div>
-  );
-}

package/skeleton/app/src/ui/ContextSwitch.tsx

@@ -1,94 +0,0 @@
-import type { ReactNode } from 'react';
-import { useContexts, useSdkLocale } from '@sempods/app-sdk/react';
-import { ChevronIcon } from './icons.tsx';
-import { Menu } from './Menu.tsx';
-
-/**
- * The everyday switch for an app that works in one of several contexts at a
- * time (for example lists): the app icon and the current context's name in
- * place of the header's `<h1>`, opening a menu with the readable contexts,
- * their access and a way to share more. The SDK's `useContexts` loads the
- * contexts, selects a sensible one and switches under the leave policy; this
- * component only shows them. Until a context is selected it shows the app's
- * icon and `title` as the `<h1>`; then the `<h1>` names the app for screen
- * readers only, outside the menu. Name things in the person's words: `label`
- * "List", `shareMore` "Share more lists …".
- */
-export function ContextSwitch({
-  icon,
-  title,
-  label,
-  texts,
-}: {
-  readonly icon: ReactNode;
-  /** The app's name. */
-  readonly title: string;
-  /** What a context is in this app, for example "List". */
-  readonly label: string;
-  readonly texts: { readonly shareMore: string };
-}) {
-  const {
-    contexts,
-    selected,
-    select,
-    failed,
-    retry,
-    canShare,
-    share,
-    shareProblem,
-  } = useContexts();
-  const { messages } = useSdkLocale();
-  if (!selected)
-    return (
-      <h1>
-        {icon}
-        {title}
-      </h1>
-    );
-  // A failed reload keeps the known contexts and offers to try again; a
-  // failed request to share says why below the switch.
-  const actions = [
-    ...(failed
-      ? [{ label: messages.controls.retry, onSelect: () => void retry() }]
-      : []),
-    ...(canShare
-      ? [{ label: texts.shareMore, onSelect: () => void share() }]
-      : []),
-  ];
-  return (
-    <div className="context-switch-wrap">
-      <h1 className="visually-hidden">{title}</h1>
-      <Menu
-        className="context-switch"
-        align="start"
-        label={`${label}: ${selected.name}`}
-        trigger={
-          <>
-            {icon}
-            <span className="context-name">{selected.name}</span>
-            <ChevronIcon />
-          </>
-        }
-        items={[
-          ...contexts.map((context) => ({
-            label: context.name,
-            // The SDK's own words, as in its management dialog.
-            hint: context.writable
-              ? messages.controls.canChange
-              : messages.controls.canRead,
-            checked: context.iri === selected.iri,
-            onSelect: () => {
-              if (context.iri !== selected.iri) void select(context.iri);
-            },
-          })),
-          ...(actions.length > 0 ? [null, ...actions] : []),
-        ]}
-      />
-      {shareProblem && (
-        <p role="alert" className="context-switch-problem">
-          {shareProblem}
-        </p>
-      )}
-    </div>
-  );
-}