@kestack/web-platform 0.0.0-stage → 0.0.1

package/src/pwa/worker/requests/strategies/network-first.ts

@@ -0,0 +1,40 @@
+import * as Effect from 'effect/Effect';
+import * as Fiber from 'effect/Fiber';
+import * as Option from 'effect/Option';
+import { KeepAlive } from '../../global-scope/index.js';
+
+/**
+ * Network, falling back when the network fails or is slower than `timeoutMs`.
+ * On a timeout with nothing to fall back to, it keeps waiting for the network.
+ * A timed-out network call keeps running in the background (kept alive), so
+ * whatever it does on success, such as updating a cache, still happens.
+ */
+export const networkFirst = <R>(options: {
+  readonly network: Effect.Effect<Response, Error, R>;
+  readonly fallback: Effect.Effect<Option.Option<Response>, never, R>;
+  readonly timeoutMs: number | undefined;
+}): Effect.Effect<Response, Error, R | KeepAlive> =>
+  Effect.gen(function* () {
+    const { network, fallback, timeoutMs } = options;
+    const orFail = (error: Error) =>
+      Effect.flatMap(
+        fallback,
+        Option.match({
+          onNone: () => Effect.fail(error),
+          onSome: Effect.succeed,
+        }),
+      );
+    if (timeoutMs === undefined) {
+      return yield* Effect.catch(network, orFail);
+    }
+    const fiber = yield* Effect.forkDetach(network);
+    const first = yield* Fiber.join(fiber).pipe(
+      Effect.timeoutOption(timeoutMs),
+      Effect.catch((error) => Effect.map(orFail(error), Option.some)),
+    );
+    if (Option.isSome(first)) return first.value;
+    (yield* KeepAlive)(fiber);
+    const cached = yield* fallback;
+    if (Option.isSome(cached)) return cached.value;
+    return yield* Fiber.join(fiber);
+  });

package/src/pwa/worker/requests/strategies/strategies.ts

@@ -0,0 +1,40 @@
+import type * as Effect from 'effect/Effect';
+import * as Option from 'effect/Option';
+import {
+  isRuntimeCacheName,
+  runtimeCacheName,
+} from '../../../shared/build/index.js';
+import type { WorkerConfig } from '../../../shared/config/index.js';
+import { findStrategyRule } from '../../../shared/strategy/index.js';
+import {
+  deleteCaches,
+  type GlobalScope,
+  type KeepAlive,
+} from '../../global-scope/index.js';
+import { cacheStore } from './cache-store.js';
+import { strategies } from './kinds.js';
+
+/**
+ * A response from the first matching Runtime Cache rule, or none when no
+ * rule applies (the request then goes to the network untouched).
+ */
+export const handleRuntimeCache = (
+  config: WorkerConfig,
+  request: Request,
+  origin: string,
+): Option.Option<Effect.Effect<Response, Error, GlobalScope | KeepAlive>> =>
+  Option.map(findStrategyRule(config.strategies, request, origin), (rule) =>
+    strategies[rule.strategy](
+      request,
+      cacheStore({
+        name: runtimeCacheName(rule.cacheName),
+        maxEntries: rule.maxEntries,
+        maxAgeSeconds: rule.maxAgeSeconds,
+      }),
+      rule.networkTimeoutMs,
+    ),
+  );
+
+/** Deletes every Runtime Cache, e.g. on sign-out. */
+export const clearRuntimeCaches: Effect.Effect<void, Error, GlobalScope> =
+  deleteCaches(isRuntimeCacheName);

package/src/pwa/worker/worker.ts

@@ -0,0 +1,99 @@
+import * as Effect from 'effect/Effect';
+import * as Layer from 'effect/Layer';
+import * as Option from 'effect/Option';
+import info from 'virtual:pwa-toolkit/build';
+import type { WorkerBuildInfo } from '../shared/config/index.js';
+import { isCommandEnvelope, matchCommand } from '../shared/commands/index.js';
+import { WorkerHost } from '../shared/worker-host/index.js';
+import { serveCommand } from './commands/index.js';
+import { makeFetchRouter } from './requests/index.js';
+import {
+  GlobalScope,
+  KeepAlive,
+  type ServiceWorkerGlobal,
+} from './global-scope/index.js';
+import { onActivate, onInstall } from './lifecycle/index.js';
+import { makeMessageHub } from './messages/index.js';
+
+export { WorkerHost } from '../shared/worker-host/index.js';
+
+declare const self: ServiceWorkerGlobalScope;
+
+interface RunServiceWorkerOptions<E> {
+  readonly layer?: Layer.Layer<never, E, WorkerHost>;
+}
+
+/**
+ * Starts the service worker. Call once, synchronously, at the top of the
+ * worker entry: install, activate, fetch and message listeners are added
+ * during this call. `layer` (e.g. a Worker RPC Worker Server) is built after,
+ * with `WorkerHost` provided.
+ */
+export const runServiceWorker = <E = never>(
+  options?: RunServiceWorkerOptions<E>,
+): void => startServiceWorker(self, info, options);
+
+/** `runServiceWorker` over an explicit global scope and build; tests use fakes. */
+export const startServiceWorker = <E>(
+  global: ServiceWorkerGlobal,
+  build: WorkerBuildInfo,
+  options?: RunServiceWorkerOptions<E>,
+): void => {
+  const scope = GlobalScope.fromGlobal(global);
+  const run = <A>(
+    effect: Effect.Effect<A, Error, GlobalScope | KeepAlive>,
+    event: ExtendableEvent,
+  ): Promise<A> =>
+    Effect.runPromise(
+      effect.pipe(
+        Effect.provideService(GlobalScope, scope),
+        Effect.provideService(KeepAlive, KeepAlive.forEvent(event)),
+      ),
+    );
+  const route = makeFetchRouter(build, scope.origin);
+  const hub = makeMessageHub({ buffer: options?.layer !== undefined });
+
+  global.addEventListener('install', (event) => {
+    event.waitUntil(run(onInstall(build), event));
+  });
+
+  global.addEventListener('activate', (event) => {
+    event.waitUntil(run(onActivate(build), event));
+  });
+
+  global.addEventListener('fetch', (event) => {
+    const handler = route(event.request);
+    if (Option.isNone(handler)) return;
+    event.respondWith(
+      run(
+        handler.value.pipe(
+          Effect.catch(() => Effect.succeed(Response.error())),
+        ),
+        event,
+      ),
+    );
+  });
+
+  global.addEventListener('message', (event) => {
+    if (!isCommandEnvelope(event.data)) return hub.publish(event);
+    const request = matchCommand(event.data);
+    if (Option.isSome(request)) {
+      event.waitUntil(run(serveCommand(request.value, event), event));
+    }
+  });
+
+  if (options?.layer !== undefined) {
+    const host = Layer.succeed(WorkerHost, {
+      buildId: build.buildId,
+      messages: hub.messages,
+    });
+    Effect.runFork(
+      Layer.launch(Layer.provide(options.layer, host)).pipe(
+        Effect.tapCause((cause) =>
+          Effect.logError('pwa-toolkit: worker layer failed', cause),
+        ),
+        Effect.ensuring(Effect.sync(hub.close)),
+      ),
+    );
+  }
+};

package/src/recipes/account-lost/account-lost.tsx

@@ -0,0 +1,66 @@
+import {
+  AlertDialog,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '#components/ui/alert-dialog';
+import { Button } from '#components/ui/button';
+
+/** A User the dialog names. */
+export interface AccountLostUser {
+  id: string;
+  name: string;
+}
+
+export interface AccountLostProps {
+  /** The User signed out somewhere else. */
+  lost: AccountLostUser;
+  /** The Users still signed in, each one to switch to. */
+  others: ReadonlyArray<AccountLostUser>;
+  onSignInAgain: () => void;
+  onSwitch: (userId: string) => void;
+  /** Offered only when nobody else is signed in. */
+  onSignOut: () => void;
+}
+
+/**
+ * Says a User was signed out on another device or app, and stays until
+ * they are signed in again, keeping what this device holds for them, or
+ * someone else opens, deleting it. It cannot be dismissed.
+ */
+export function AccountLost(props: AccountLostProps) {
+  const { name } = props.lost;
+  return (
+    <AlertDialog open>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{name} was signed out</AlertDialogTitle>
+          <AlertDialogDescription>
+            {name} signed out somewhere else, or their sign-in ran out. Sign
+            them in again to keep their data on this device, or switch to
+            someone else and it leaves this device.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          {props.others.map((user) => (
+            <Button
+              key={user.id}
+              variant="outline"
+              onClick={() => props.onSwitch(user.id)}
+            >
+              Switch to {user.name}
+            </Button>
+          ))}
+          {props.others.length === 0 && (
+            <Button variant="outline" onClick={props.onSignOut}>
+              Sign out
+            </Button>
+          )}
+          <Button onClick={props.onSignInAgain}>Sign in again</Button>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}

package/src/recipes/account-lost/index.ts

@@ -0,0 +1,5 @@
+export {
+  AccountLost,
+  type AccountLostProps,
+  type AccountLostUser,
+} from './account-lost';

package/src/recipes/account-switcher/account-switcher.tsx

@@ -0,0 +1,199 @@
+import { ChevronDown, LogOut, Plus } from 'lucide-react';
+import { useState } from 'react';
+import { toast } from 'sonner';
+
+import { Avatar, AvatarFallback, AvatarImage } from '#components/ui/avatar';
+import { Badge } from '#components/ui/badge';
+import { Button } from '#components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '#components/ui/dropdown-menu';
+import { Spinner } from '#components/ui/spinner';
+import { cn } from '#lib/utils';
+
+import { MaskedEmail } from '../parts/email-privacy';
+
+export interface SignedInAccount {
+  id: string;
+  name: string;
+  email: string;
+  image?: string | null | undefined;
+}
+
+/** The browser's Signed-in Accounts: who is active, who else is signed in,
+ * and what the User may do about it. */
+export interface AccountsView {
+  active: SignedInAccount;
+  others: ReadonlyArray<SignedInAccount>;
+  /** False once the deployment's account limit is reached. */
+  canAdd: boolean;
+  onSwitch: (id: string) => Promise<unknown>;
+  onAdd: () => void;
+  /** Signs out the Active Account only. */
+  onSignOut: () => Promise<unknown>;
+  onSignOutAll: () => Promise<unknown>;
+}
+
+const initials = (account: SignedInAccount) =>
+  (account.name || account.email)
+    .split(/[\s@]+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0).toUpperCase())
+    .join('');
+
+function AccountAvatar({
+  account,
+  className,
+}: {
+  account: SignedInAccount;
+  className?: string;
+}) {
+  return (
+    <Avatar className={cn('size-6 text-[0.6rem]', className)}>
+      {account.image ? <AvatarImage src={account.image} alt="" /> : null}
+      <AvatarFallback>{initials(account)}</AvatarFallback>
+    </Avatar>
+  );
+}
+
+function AccountIdentity({ account }: { account: SignedInAccount }) {
+  return (
+    <span className="flex min-w-0 flex-1 flex-col">
+      {account.name ? (
+        <span className="truncate text-sm">{account.name}</span>
+      ) : null}
+      <span
+        className={cn(
+          'truncate',
+          account.name ? 'text-xs text-muted-foreground' : 'text-sm',
+        )}
+      >
+        <MaskedEmail email={account.email} />
+      </span>
+    </span>
+  );
+}
+
+const failureMessage = (cause: unknown) =>
+  cause instanceof Error && cause.message
+    ? cause.message
+    : 'That did not work. Try again.';
+
+export function AccountSwitcher({ accounts }: { accounts: AccountsView }) {
+  const [open, setOpen] = useState(false);
+  const [busy, setBusy] = useState<string | null>(null);
+  const { active, others } = accounts;
+
+  const run = (key: string, action: () => Promise<unknown>) => {
+    if (busy) return;
+    setBusy(key);
+    action()
+      .then(() => setOpen(false))
+      .catch((cause: unknown) => toast.error(failureMessage(cause)))
+      .finally(() => setBusy(null));
+  };
+
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger
+        render={
+          <Button
+            variant="ghost"
+            size="sm"
+            aria-label={
+              others.length > 0
+                ? `Signed in as ${active.email} and ${others.length} more. Switch account`
+                : `Signed in as ${active.email}. Account menu`
+            }
+            className="h-8 max-w-64 gap-1.5 px-1.5 text-muted-foreground hover:text-foreground"
+          />
+        }
+      >
+        <AccountAvatar account={active} />
+        <span className="hidden max-w-40 truncate text-xs sm:inline">
+          <MaskedEmail email={active.email} />
+        </span>
+        {others.length > 0 ? (
+          <Badge variant="secondary" className="h-4 px-1.5 text-[0.65rem]">
+            +{others.length}
+          </Badge>
+        ) : null}
+        <ChevronDown aria-hidden className="size-3.5 shrink-0 opacity-70" />
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-72">
+        <DropdownMenuGroup>
+          <div className="flex items-center gap-3 px-2 py-2">
+            <AccountAvatar account={active} className="size-9 text-xs" />
+            <AccountIdentity account={active} />
+          </div>
+          <DropdownMenuItem
+            closeOnClick={false}
+            disabled={busy !== null}
+            onClick={() => run('sign-out', accounts.onSignOut)}
+          >
+            {busy === 'sign-out' ? <Spinner /> : <LogOut />}
+            Sign out
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+        {others.length > 0 ? (
+          <>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+              <DropdownMenuLabel>Switch to</DropdownMenuLabel>
+              {others.map((account) => (
+                <DropdownMenuItem
+                  key={account.id}
+                  closeOnClick={false}
+                  disabled={busy !== null}
+                  className="gap-3 py-2"
+                  onClick={() =>
+                    run(account.id, () => accounts.onSwitch(account.id))
+                  }
+                >
+                  {busy === account.id ? (
+                    <span className="flex size-7 shrink-0 items-center justify-center">
+                      <Spinner />
+                    </span>
+                  ) : (
+                    <AccountAvatar account={account} className="size-7" />
+                  )}
+                  <AccountIdentity account={account} />
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuGroup>
+          </>
+        ) : null}
+        <DropdownMenuSeparator />
+        {accounts.canAdd ? (
+          <DropdownMenuItem disabled={busy !== null} onClick={accounts.onAdd}>
+            <Plus />
+            Add another account
+          </DropdownMenuItem>
+        ) : (
+          <p className="px-2 py-1.5 text-xs text-pretty text-muted-foreground">
+            You have reached the account limit. Sign out of one to add another.
+          </p>
+        )}
+        {others.length > 0 ? (
+          <DropdownMenuItem
+            variant="destructive"
+            closeOnClick={false}
+            disabled={busy !== null}
+            className="mt-2"
+            onClick={() => run('sign-out-all', accounts.onSignOutAll)}
+          >
+            {busy === 'sign-out-all' ? <Spinner /> : <LogOut />}
+            Sign out of all accounts
+          </DropdownMenuItem>
+        ) : null}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}

package/src/recipes/account-switcher/index.ts

@@ -0,0 +1,5 @@
+export {
+  AccountSwitcher,
+  type AccountsView,
+  type SignedInAccount,
+} from './account-switcher';

package/src/recipes/frame/app-shell.tsx

@@ -0,0 +1,74 @@
+import { cn } from 'cn';
+import type { CSSProperties, ReactNode } from 'react';
+import { Frame, useFrame } from './frame/index.ts';
+import { Header, type HeaderConfig } from './header.tsx';
+import { type SidebarConfig, SidebarContents } from './sidebar/index.ts';
+
+export { useSidebarWidth } from './sidebar/index.ts';
+
+export {
+  SidebarGroup,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarInput,
+  SidebarMenu,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+} from './sidebar/index.ts';
+
+/**
+ * An app's whole screen: an optional sidebar, an optional header, and the
+ * page, which scrolls under the header. Mobile first: on a phone the page
+ * moves aside and shrinks to show the sidebar, under a finger on a touch
+ * screen; on a wide screen the sidebar sits beside the page, which is a card.
+ * One open state serves every size. Without a sidebar the page fills the
+ * screen, and the header's actions hold what the sidebar's footer would.
+ */
+export function AppShell(props: {
+  readonly sidebar?: SidebarConfig;
+  readonly header?: HeaderConfig;
+  /** Where a swipe that opens the sidebar may start, on a touch screen. */
+  readonly swipe?: 'anywhere' | 'edge' | 'off';
+  /** Drawn outside the moving page, told whether the sidebar is open. */
+  readonly statusBar?: (open: boolean) => ReactNode;
+  readonly className?: string;
+  readonly style?: CSSProperties;
+  /** The page. */
+  readonly children: ReactNode;
+}) {
+  const { sidebar, header } = props;
+  return (
+    <Frame
+      sidebar={
+        sidebar === undefined ? undefined : <SidebarContents config={sidebar} />
+      }
+      sidebarWidth={sidebar?.width}
+      swipe={props.swipe ?? 'anywhere'}
+      statusBar={props.statusBar}
+      className={props.className}
+      style={props.style}
+    >
+      {header === undefined ? null : <Header config={header} />}
+      <div
+        data-slot="app-shell-scroller"
+        className={cn(
+          'min-h-0 flex-1 overflow-y-auto overscroll-contain',
+          // Without a header, the page itself keeps clear of the status bar.
+          header === undefined && 'pt-[env(safe-area-inset-top)]',
+        )}
+      >
+        {props.children}
+      </div>
+    </Frame>
+  );
+}
+
+/** Whether the sidebar is open, to open or shut it, and whether it's a phone. */
+export function useAppShell() {
+  const { open, setOpen, toggle, isMobile } = useFrame();
+  return { open, setOpen, toggle, isMobile };
+}