@domicile-desktop/component-library 0.0.0-alpha-56dd6c187f4e → 0.0.0-alpha-c15ba93d1d2b

package/README.md

@@ -52,7 +52,7 @@ Each export is `@domicile-desktop/component-library/<name>`.
 | `ThemeProvider` | Light/dark theme state. Sets `data-theme` on `<html>`. |
 | `ThemeSwitch` | Button that flips the theme. |
 | `useApps` | Hook: names and icons of applications by app id, from their desktop entries. |
-| `usePictureUrl` | Hook: a URL an `<img>` can show for a file read through the SDK's `system`. |
+| `usePictureUrl` | Hook: a URL an `<img>` can show for a file read through `domicile.files`. |
 | `usePortalWallpaper` | Hook: the pictures applications set through the Wallpaper portal, as paths. |
 | `theme-core`, `theme-source`, `standalone-theme-source` | Theme types and sources. Use the standalone source where there is no compositor, such as Storybook. |
 | `control-sizes` | `Size` type and `SIZES` array for sized controls. |

package/package.json

@@ -2,8 +2,8 @@
   "dependencies": {
     "@base-ui/react": "^1.8.0",
     "@cprussin/option-result": "^2.0.1",
-    "@domicile-desktop/sdk": "0.0.0-alpha-56dd6c187f4e",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-56dd6c187f4e",
+    "@domicile-desktop/sdk": "0.0.0-alpha-c15ba93d1d2b",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-c15ba93d1d2b",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -117,5 +117,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-56dd6c187f4e"
+  "version": "0.0.0-alpha-c15ba93d1d2b"
 }

package/src/AppChooser/AppChooser.tsx

@@ -1,4 +1,4 @@
-import type { System } from "@domicile-desktop/sdk/system";
+import type { AppsDesktop } from "@domicile-desktop/system-apps/apps-desktop";
 import type { DescribedApp } from "@domicile-desktop/system-apps/describe-apps";
 import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
 import { useId, useState } from "react";
@@ -35,7 +35,7 @@ type Props = {
   opened: string;
   screen: string | undefined;
   /** Where the applications' desktop entries are read. */
-  system: System;
+  domicile: AppsDesktop;
 };
 
 /**
@@ -54,10 +54,10 @@ export const AppChooser = ({
   onChoose,
   opened,
   screen,
-  system,
+  domicile,
 }: Props) => {
   const listId = useId();
-  const described = useDescribedChoices(system, choices, contentType);
+  const described = useDescribedChoices(domicile, choices, contentType);
   const [picked, setPicked] = useState<string | undefined>();
   const apps = described?.apps ?? [];
   const first =

package/src/AppChooser/app-choices.ts

@@ -3,7 +3,8 @@
 
 import type { Result } from "@cprussin/option-result";
 import { Ok } from "@cprussin/option-result";
-import type { System, SystemError } from "@domicile-desktop/sdk/system";
+import type { SystemError } from "@domicile-desktop/sdk/system";
+import type { AppsDesktop } from "@domicile-desktop/system-apps/apps-desktop";
 import type { DescribedApp } from "@domicile-desktop/system-apps/describe-apps";
 import { describeApps } from "@domicile-desktop/system-apps/describe-apps";
 import { defaultApps } from "@domicile-desktop/system-apps/mime-apps";
@@ -20,15 +21,15 @@ export type DescribedChoices = {
  * when it is `undefined`.
  */
 export const describeChoices = async (
-  system: System,
+  domicile: AppsDesktop,
   choices: readonly string[],
   contentType: string | undefined,
 ): Promise<Result<DescribedChoices, SystemError>> => {
   const [apps, defaults] = await Promise.all([
-    describeApps(system, choices),
+    describeApps(domicile, choices),
     contentType === undefined
       ? Ok<string[], SystemError>([])
-      : defaultApps(system, contentType),
+      : defaultApps(domicile, contentType),
   ]);
   return apps.andThen((found) =>
     defaults.map((ids) => ({

package/src/AppChooser/useDescribedChoices.ts

@@ -1,4 +1,4 @@
-import type { System } from "@domicile-desktop/sdk/system";
+import type { AppsDesktop } from "@domicile-desktop/system-apps/apps-desktop";
 import { useEffect, useState } from "react";
 
 import type { DescribedChoices } from "./app-choices";
@@ -10,7 +10,7 @@ import { describeChoices } from "./app-choices";
  * the choices have moved past.
  */
 export const useDescribedChoices = (
-  system: System,
+  domicile: AppsDesktop,
   choices: readonly string[],
   contentType: string | undefined,
 ): DescribedChoices | undefined => {
@@ -20,7 +20,7 @@ export const useDescribedChoices = (
 
   useEffect(() => {
     let current = true;
-    describeChoices(system, key === "" ? [] : key.split("\n"), contentType)
+    describeChoices(domicile, key === "" ? [] : key.split("\n"), contentType)
       .then((result) => {
         result.match({
           Err: (error) => {
@@ -42,7 +42,7 @@ export const useDescribedChoices = (
     return () => {
       current = false;
     };
-  }, [system, key, contentType]);
+  }, [domicile, key, contentType]);
 
   return described;
 };

package/src/FilePicker/folders.ts

@@ -1,7 +1,8 @@
-// The folders `FilePicker` browses, and the system calls behind them.
+// The folders `FilePicker` browses, and the desktop's file calls behind them.
 
 import type { Result } from "@cprussin/option-result";
-import type { System, SystemError } from "@domicile-desktop/sdk/system";
+import type { Files } from "@domicile-desktop/sdk/desktop/files";
+import type { SystemError } from "@domicile-desktop/sdk/system";
 
 import { listDirectory } from "./list-directory";
 
@@ -21,11 +22,17 @@ export type Folders = {
   watch: (path: string, changed: () => void) => () => void;
 };
 
-/** {@link Folders} through the compositor's system calls. */
-export const systemFolders = (system: System): Folders => ({
-  create: (path) => system.createDir(path),
-  list: (path) => listDirectory(system, path),
-  watch: (path, changed) => watchDirectory(system, path, changed),
+/** The calls {@link desktopFolders} makes. */
+export type FolderFiles = Pick<
+  Files,
+  "createDir" | "readDir" | "stat" | "watch"
+>;
+
+/** {@link Folders} through the desktop's files. */
+export const desktopFolders = (files: FolderFiles): Folders => ({
+  create: (path) => files.createDir(path),
+  list: (path) => listDirectory(files, path),
+  watch: (path, changed) => watchDirectory(files, path, changed),
 });
 
 /**
@@ -34,7 +41,7 @@ export const systemFolders = (system: System): Folders => ({
  * works, without live updates.
  */
 const watchDirectory = (
-  system: System,
+  files: FolderFiles,
   path: string,
   changed: () => void,
 ): (() => void) => {
@@ -42,7 +49,7 @@ const watchDirectory = (
     stop: undefined,
     stopped: false,
   };
-  follow(system, path, watching, changed).catch((error: unknown) => {
+  follow(files, path, watching, changed).catch((error: unknown) => {
     // biome-ignore lint/suspicious/noConsole: reports a watch that broke
     console.error("The file picker's directory watch broke", error);
   });
@@ -56,12 +63,12 @@ type Watching = { stop: (() => void) | undefined; stopped: boolean };
 
 /** Starts the watch, then calls `changed` for each item until it ends. */
 const follow = async (
-  system: System,
+  files: FolderFiles,
   path: string,
   watching: Watching,
   changed: () => void,
 ): Promise<void> => {
-  const watch = (await system.watch(path)).match({
+  const watch = (await files.watch(path)).match({
     Err: (error) => {
       // biome-ignore lint/suspicious/noConsole: reports a watch that could not start
       console.error("The file picker could not watch a directory", error);

package/src/FilePicker/list-directory.ts

@@ -1,8 +1,12 @@
-// A directory's entries for the file picker, read through the system calls.
+// A directory's entries for the file picker, read through the desktop's files.
 
-import type { DirEntry, System } from "@domicile-desktop/sdk/system";
+import type { Files } from "@domicile-desktop/sdk/desktop/files";
+import type { DirEntry } from "@domicile-desktop/sdk/system";
 import { FileType } from "@domicile-desktop/sdk/system";
 
+/** The calls a listing makes. */
+export type ListedFiles = Pick<Files, "readDir" | "stat">;
+
 /**
  * The entries of the directory at absolute `path`, as `FileRequest.list`
  * wants them: subdirectory names, and links to directories, end in `/`.
@@ -10,30 +14,30 @@ import { FileType } from "@domicile-desktop/sdk/system";
  * read.
  */
 export const listDirectory = async (
-  system: System,
+  files: ListedFiles,
   path: string,
 ): Promise<string[]> =>
-  (await system.readDir(path)).match({
+  (await files.readDir(path)).match({
     Err: (error) => {
       throw new DOMException(error.message, "NotReadableError");
     },
     Ok: (entries) =>
-      Promise.all(entries.map((entry) => shownName(system, path, entry))),
+      Promise.all(entries.map((entry) => shownName(files, path, entry))),
   });
 
 const shownName = async (
-  system: System,
+  files: ListedFiles,
   directory: string,
   { fileType, name }: DirEntry,
 ): Promise<string> =>
-  (await isDirectory(system, directory, name, fileType)) ? `${name}/` : name;
+  (await isDirectory(files, directory, name, fileType)) ? `${name}/` : name;
 
 /**
  * Whether the entry is a directory, following a link. A dangling link counts
  * as a file: the picker lists it, and picking it fails where it is read.
  */
 const isDirectory = async (
-  system: System,
+  files: ListedFiles,
   directory: string,
   name: string,
   fileType: FileType,
@@ -43,7 +47,7 @@ const isDirectory = async (
       return true;
     }
     case FileType.Symlink: {
-      const target = await system.stat(childOf(directory, name));
+      const target = await files.stat(childOf(directory, name));
       return target.match({
         Err: () => false,
         Ok: (stat) => stat.fileType === FileType.Directory,

package/src/PortalDialogs/AccountDialog.tsx

@@ -1,6 +1,6 @@
+import type { Files } from "@domicile-desktop/sdk/desktop/files";
 import type { AccountBody, PortalAnswer } from "@domicile-desktop/sdk/portal";
 import { PortalAnswer as Answer } from "@domicile-desktop/sdk/portal";
-import type { System } from "@domicile-desktop/sdk/system";
 import { css } from "../../styled-system/css";
 import { hstack } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
@@ -13,7 +13,7 @@ type Props = {
   asker: string;
   body: AccountBody;
   /** Reads the user's picture. */
-  files: Pick<System, "readFile">;
+  files: Pick<Files, "read">;
   screen: string | undefined;
 };
 

package/src/PortalDialogs/AppChooserDialog.tsx

@@ -3,7 +3,7 @@ import type {
   PortalAnswer,
 } from "@domicile-desktop/sdk/portal";
 import { PortalAnswer as Answer } from "@domicile-desktop/sdk/portal";
-import type { System } from "@domicile-desktop/sdk/system";
+import type { AppsDesktop } from "@domicile-desktop/system-apps/apps-desktop";
 import { AppChooser } from "../AppChooser/AppChooser";
 
 type Props = {
@@ -13,7 +13,7 @@ type Props = {
   body: AppChooserBody;
   screen: string | undefined;
   /** Where the applications' desktop entries are read. */
-  system: System;
+  domicile: AppsDesktop;
 };
 
 /** The AppChooser portal's {@link AppChooser}. Dismissing it cancels. */
@@ -22,13 +22,14 @@ export const AppChooserDialog = ({
   asker,
   body,
   screen,
-  system,
+  domicile,
 }: Props) => (
   <AppChooser
     address={body.filename === undefined ? body.uri : undefined}
     asker={asker}
     choices={body.choices}
     contentType={body.contentType}
+    domicile={domicile}
     lastChoice={body.lastChoice}
     onCancel={() => {
       answer(Answer.Canceled());
@@ -38,7 +39,6 @@ export const AppChooserDialog = ({
     }}
     opened={openedOf(body)}
     screen={screen}
-    system={system}
   />
 );
 

package/src/PortalDialogs/PortalDialogs.tsx

@@ -1,28 +1,27 @@
 import type { CastClaim } from "@domicile-desktop/sdk/cast";
 import { CastClaimKind } from "@domicile-desktop/sdk/cast";
 import type {
-  DomicileBrowserWindow,
-  DomicileHost,
-} from "@domicile-desktop/sdk/domicile-host";
-import type { GlobalShortcutsHost } from "@domicile-desktop/sdk/global-shortcuts";
+  Browser,
+  BrowserWindow,
+} from "@domicile-desktop/sdk/desktop/browser";
+import type { Capture } from "@domicile-desktop/sdk/desktop/capture";
+import type { Dbus } from "@domicile-desktop/sdk/desktop/dbus";
+import type { Files } from "@domicile-desktop/sdk/desktop/files";
+import type { Portals } from "@domicile-desktop/sdk/desktop/portals";
+import type { Processes } from "@domicile-desktop/sdk/desktop/processes";
+import type { GlobalShortcutsDesktop } from "@domicile-desktop/sdk/global-shortcuts";
 import { fireGlobalShortcuts } from "@domicile-desktop/sdk/global-shortcuts";
 import type { Capturing, PortalRequest } from "@domicile-desktop/sdk/portal";
 import {
-  answerPortalRequest,
   CapturingKind,
   CastSourceKind,
   PortalAnswer,
   PortalKind,
   SHELL_APP_ID,
-  stopCapturing,
-  watchCapturing,
-  watchPortalRequests,
 } from "@domicile-desktop/sdk/portal";
-import type { System, SystemHost } from "@domicile-desktop/sdk/system";
-import { system } from "@domicile-desktop/sdk/system";
 import { memo, useEffect, useMemo, useState } from "react";
 import type { Folders } from "../FilePicker/folders";
-import { systemFolders } from "../FilePicker/folders";
+import { desktopFolders } from "../FilePicker/folders";
 import type { App } from "../useApps/useApps";
 import { useApps } from "../useApps/useApps";
 import { AccessDialog } from "./AccessDialog";
@@ -44,12 +43,30 @@ import { UsbDialog } from "./UsbDialog";
 import { useCastClaims } from "./useCastClaims";
 import { WallpaperDialog } from "./WallpaperDialog";
 
+/** What the dialogs read and draw through. */
+export type DialogDesktop = {
+  readonly capture: Pick<Capture, "preview">;
+  readonly dbus: Pick<Dbus, "call">;
+  readonly files: Omit<Files, "search">;
+  readonly processes: Pick<Processes, "run" | "spawn">;
+};
+
+/** What {@link PortalDialogs} needs of the desktop. */
+export type PortalDialogsDesktop = DialogDesktop &
+  GlobalShortcutsDesktop & {
+    readonly browser: Pick<Browser, "windows">;
+    readonly portals: Pick<
+      Portals,
+      "answer" | "capturing" | "on" | "requests" | "stopCapturing"
+    >;
+  };
+
 /** No shell chords; one array, so the default is stable across renders. */
 const NONE: readonly string[] = [];
 
 type Props = {
   /** The desktop `Shell` is handed. */
-  host: GlobalShortcutsHost & SystemHost & Pick<DomicileHost, "browserWindows">;
+  domicile: PortalDialogsDesktop;
   /**
    * The display to show a dialog on when it has no parent window. Needs a
    * `DisplayProvider`; without it, a dialog is centered on the whole page.
@@ -66,8 +83,6 @@ type Props = {
    * boxes. See {@link drawnWindows}.
    */
   shownWindows?: (() => readonly ShownWindow[]) | undefined;
-  /** How dialogs read the desktop's files, for tests. */
-  systemOf?: typeof system | undefined;
   /**
    * The display showing the `<app>` with this id, for a dialog modal over
    * it. `undefined` uses `screen`.
@@ -88,36 +103,41 @@ type Props = {
  */
 export const PortalDialogs = memo(
   ({
-    host,
+    domicile,
     omitScreenCasts = false,
     screen,
     screenOf,
     shellChords = NONE,
     shownWindows = drawnOnPage,
-    systemOf = system,
   }: Props) => {
     const [requests, setRequests] = useState<readonly PortalRequest[]>([]);
-    const files = useMemo(() => systemOf(host), [systemOf, host]);
-    const folders = useMemo(() => systemFolders(files), [files]);
+    const folders = useMemo(() => desktopFolders(domicile.files), [domicile]);
     const [sessions, setSessions] = useState<readonly Capturing[]>([]);
-    const apps = useApps(files, [
+    const apps = useApps(domicile, [
       ...requests.flatMap(appIds),
       ...sessions.map((session) => session.appId),
     ]);
 
-    const claims = useCastClaims(host, requests);
+    const { portals } = domicile;
+    const claims = useCastClaims(domicile, requests);
 
-    useEffect(() => watchPortalRequests(host, setRequests), [host]);
-    useEffect(() => watchCapturing(host, setSessions), [host]);
-    useEffect(() => fireGlobalShortcuts(host), [host]);
+    useEffect(() => {
+      const heard = () => {
+        setRequests(portals.requests ?? []);
+        setSessions(portals.capturing ?? []);
+      };
+      heard();
+      return portals.on("change", heard);
+    }, [portals]);
+    useEffect(() => fireGlobalShortcuts(domicile), [domicile]);
 
     useEffect(() => {
       for (const request of requests) {
         if (request.kind === PortalKind.Unknown) {
-          answerPortalRequest(host, request.id, PortalAnswer.Refused());
+          portals.answer(request.id, PortalAnswer.Refused());
         }
       }
-    }, [host, requests]);
+    }, [portals, requests]);
 
     return (
       <>
@@ -132,7 +152,7 @@ export const PortalDialogs = memo(
               : sessions
           }
           stop={(id) => {
-            stopCapturing(host, id);
+            portals.stopCapturing(id);
           }}
         />
         {stacked(
@@ -143,19 +163,19 @@ export const PortalDialogs = memo(
         ).map((shown) => (
           <Dialog
             answer={(answer) => {
-              answerPortalRequest(host, shown.id, answer);
+              portals.answer(shown.id, answer);
             }}
             apps={apps}
             asker={apps(shown.appId).name}
-            browserWindows={host.browserWindows ?? []}
+            browserWindows={domicile.browser.windows ?? []}
             claim={claims.get(shown.id)}
+            domicile={domicile}
             folders={folders}
             key={shown.id}
             request={shown}
             screen={screenFor(shown, screen, screenOf)}
             shellChords={shellChords}
             shownWindows={shownWindows}
-            system={files}
           />
         ))}
       </>
@@ -178,12 +198,12 @@ const Dialog = ({
   screen,
   shellChords,
   shownWindows,
-  system: files,
+  domicile,
 }: {
   answer: (answer: PortalAnswer) => void;
   apps: (appId: string) => App;
   asker: string;
-  browserWindows: readonly DomicileBrowserWindow[];
+  browserWindows: readonly BrowserWindow[];
   /** What a cast to a TV that asked for `request` makes of it. */
   claim: CastClaim | undefined;
   folders: Folders;
@@ -191,7 +211,7 @@ const Dialog = ({
   screen: string | undefined;
   shellChords: readonly string[];
   shownWindows: () => readonly ShownWindow[];
-  system: System;
+  domicile: DialogDesktop;
 }) => {
   switch (request.kind) {
     case PortalKind.Access:
@@ -227,8 +247,8 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
+          domicile={domicile}
           screen={screen}
-          system={files}
         />
       );
     case PortalKind.FileChooser:
@@ -246,7 +266,7 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
-          files={files}
+          files={domicile.files}
           screen={screen}
         />
       );
@@ -267,7 +287,7 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
-          files={files}
+          files={domicile.files}
           screen={screen}
         />
       );
@@ -298,7 +318,7 @@ const Dialog = ({
           body={request.body}
           browserWindows={browserWindows}
           castTo={claim?.kind === CastClaimKind.Pick ? claim.to : undefined}
-          previewWindow={files.previewWindow}
+          previewWindow={domicile.capture.preview}
           screen={screen}
           shownWindows={shownWindows}
         />
@@ -321,7 +341,7 @@ const Dialog = ({
           asker={request.appId === SHELL_APP_ID ? undefined : asker}
           body={request.body}
           browserWindows={browserWindows}
-          previewWindow={files.previewWindow}
+          previewWindow={domicile.capture.preview}
           screen={screen}
           shownWindows={shownWindows}
         />

package/src/PortalDialogs/ScreenCastDialog.tsx

@@ -1,4 +1,4 @@
-import type { DomicileBrowserWindow } from "@domicile-desktop/sdk/domicile-host";
+import type { BrowserWindow } from "@domicile-desktop/sdk/desktop/browser";
 import type {
   CastSource,
   PortalAnswer,
@@ -37,7 +37,7 @@ type Props = {
   asker: string;
   body: ScreenCastBody;
   /** The desktop's browser windows, as the engine lists them. */
-  browserWindows: readonly DomicileBrowserWindow[];
+  browserWindows: readonly BrowserWindow[];
   /** The TV a cast that asked shows the pick on, titling the dialog for it. */
   castTo?: string | undefined;
   screen: string | undefined;

package/src/PortalDialogs/ScreenshotDialog.tsx

@@ -1,4 +1,4 @@
-import type { DomicileBrowserWindow } from "@domicile-desktop/sdk/domicile-host";
+import type { BrowserWindow } from "@domicile-desktop/sdk/desktop/browser";
 import type {
   FrozenDesk,
   PortalAnswer,
@@ -30,7 +30,7 @@ type Props = {
   asker: string | undefined;
   body: FrozenDesk;
   /** The desktop's browser windows, as the engine lists them. */
-  browserWindows: readonly DomicileBrowserWindow[];
+  browserWindows: readonly BrowserWindow[];
   screen: string | undefined;
   /** Draws a window that is not on screen. */
   previewWindow: DrawPreview;

package/src/PortalDialogs/WallpaperDialog.tsx

@@ -1,9 +1,9 @@
+import type { Files } from "@domicile-desktop/sdk/desktop/files";
 import type { PortalAnswer, WallpaperBody } from "@domicile-desktop/sdk/portal";
 import {
   PortalAnswer as Answer,
   WallpaperTarget,
 } from "@domicile-desktop/sdk/portal";
-import type { System } from "@domicile-desktop/sdk/system";
 import { css } from "../../styled-system/css";
 import { Button } from "../Button/Button";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
@@ -14,7 +14,7 @@ type Props = {
   /** Who asks, as the dialog names them. */
   asker: string;
   body: WallpaperBody;
-  files: Pick<System, "readFile">;
+  files: Pick<Files, "read">;
   screen: string | undefined;
 };
 

package/src/PortalDialogs/useCastClaims.ts

@@ -1,7 +1,7 @@
 import type { CastClaim } from "@domicile-desktop/sdk/cast";
 import { CastClaimKind, claimCastRequest } from "@domicile-desktop/sdk/cast";
-import type { PortalHost, PortalRequest } from "@domicile-desktop/sdk/portal";
-import { answerPortalRequest } from "@domicile-desktop/sdk/portal";
+import type { Portals } from "@domicile-desktop/sdk/desktop/portals";
+import type { PortalRequest } from "@domicile-desktop/sdk/portal";
 import { useLayoutEffect, useRef, useState } from "react";
 
 /**
@@ -10,7 +10,7 @@ import { useLayoutEffect, useRef, useState } from "react";
  * docs/architecture/CASTING-TO-TVS.md.
  */
 export const useCastClaims = (
-  host: PortalHost,
+  domicile: { readonly portals: Pick<Portals, "answer"> },
   requests: readonly PortalRequest[],
 ): ReadonlyMap<number, CastClaim> => {
   // Every request seen, claimed or not: each is claimed once.
@@ -30,10 +30,10 @@ export const useCastClaims = (
     }
     for (const request of requests) {
       if (!known.has(request.id)) {
-        const claim = claimCastRequest(host, request);
+        const claim = claimCastRequest(domicile, request);
         known.set(request.id, claim);
         if (claim?.kind === CastClaimKind.Answered) {
-          answerPortalRequest(host, request.id, claim.answer);
+          domicile.portals.answer(request.id, claim.answer);
         }
       }
     }
@@ -44,7 +44,7 @@ export const useCastClaims = (
         ),
       ),
     );
-  }, [host, requests]);
+  }, [domicile, requests]);
 
   return claims;
 };

package/src/useApps/useApps.ts

@@ -1,5 +1,5 @@
-import type { System } from "@domicile-desktop/sdk/system";
 import { appIdName } from "@domicile-desktop/system-apps/app-id-name";
+import type { AppsDesktop } from "@domicile-desktop/system-apps/apps-desktop";
 import type { DescribedApp } from "@domicile-desktop/system-apps/describe-apps";
 import { describeApps } from "@domicile-desktop/system-apps/describe-apps";
 import { useCallback, useEffect, useState } from "react";
@@ -17,7 +17,7 @@ export type App = {
  * yet, is named by its readable form; the empty id is "An application".
  */
 export const useApps = (
-  system: System,
+  domicile: AppsDesktop,
   ids: readonly string[],
 ): ((appId: string) => App) => {
   const [described, setDescribed] = useState<ReadonlyMap<string, DescribedApp>>(
@@ -31,7 +31,7 @@ export const useApps = (
       return undefined;
     } else {
       let current = true;
-      describeApps(system, key.split("\n"))
+      describeApps(domicile, key.split("\n"))
         .then((result) => {
           result.match({
             Err: (error) => {
@@ -54,7 +54,7 @@ export const useApps = (
         current = false;
       };
     }
-  }, [system, key]);
+  }, [domicile, key]);
 
   return useCallback((appId) => app(described, appId), [described]);
 };

package/src/usePictureUrl/usePictureUrl.ts

@@ -1,11 +1,11 @@
-import type { System } from "@domicile-desktop/sdk/system";
+import type { Files as FileCalls } from "@domicile-desktop/sdk/desktop/files";
 import { useEffect, useState } from "react";
 
-type Files = Pick<System, "readFile">;
+type Files = Pick<FileCalls, "read">;
 
 /**
- * A URL an `<img>` can show for the picture at `path`, read through the SDK's
- * `system`. `undefined` for no path, until it is read, or when it cannot be
+ * A URL an `<img>` can show for the picture at `path`, read through
+ * `domicile.files`. `undefined` for no path, until it is read, or when it cannot be
  * read (logged). The URL is revoked when the path changes or on unmount.
  */
 export const usePictureUrl = (
@@ -32,7 +32,7 @@ const showPicture = (
   let made: string | undefined;
   let current = true;
   files
-    .readFile(path)
+    .read(path)
     .then((read) => {
       read.match({
         Err: (error) => {

package/src/usePortalWallpaper/usePortalWallpaper.ts

@@ -1,20 +1,27 @@
-import type { PortalHost, PortalWallpaper } from "@domicile-desktop/sdk/portal";
-import { watchPortalWallpaper } from "@domicile-desktop/sdk/portal";
-import { useEffect, useState } from "react";
+import type { Portals } from "@domicile-desktop/sdk/desktop/portals";
+import type { PortalWallpaper } from "@domicile-desktop/sdk/portal";
+import { useCallback, useSyncExternalStore } from "react";
 
 const NONE_SET: PortalWallpaper = {
   background: undefined,
   lockscreen: undefined,
 };
 
+/** What {@link usePortalWallpaper} reads. */
+export type WallpaperDesktop = {
+  readonly portals: Pick<Portals, "on" | "wallpaper">;
+};
+
 /**
  * The pictures applications set through the Wallpaper portal, as paths. See
  * `docs/PORTALS.md`.
  */
-export const usePortalWallpaper = (host: PortalHost): PortalWallpaper => {
-  const [wallpaper, setWallpaper] = useState(NONE_SET);
-
-  useEffect(() => watchPortalWallpaper(host, setWallpaper), [host]);
-
-  return wallpaper;
+export const usePortalWallpaper = ({
+  portals,
+}: WallpaperDesktop): PortalWallpaper => {
+  const subscribe = useCallback(
+    (changed: () => void) => portals.on("change", changed),
+    [portals],
+  );
+  return useSyncExternalStore(subscribe, () => portals.wallpaper ?? NONE_SET);
 };