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

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-2fe5852c4a77",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-2fe5852c4a77",
     "@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-2fe5852c4a77"
 }

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,5 +1,10 @@
 import type { CastClaim } from "@domicile-desktop/sdk/cast";
 import { CastClaimKind } from "@domicile-desktop/sdk/cast";
+import type { Capture } from "@domicile-desktop/sdk/desktop/capture";
+import type { Dbus } from "@domicile-desktop/sdk/desktop/dbus";
+import { desktop } from "@domicile-desktop/sdk/desktop/desktop";
+import type { Files } from "@domicile-desktop/sdk/desktop/files";
+import type { Processes } from "@domicile-desktop/sdk/desktop/processes";
 import type {
   DomicileBrowserWindow,
   DomicileHost,
@@ -18,11 +23,9 @@ import {
   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 +47,20 @@ 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">;
+};
+
 /** 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">;
+  host: GlobalShortcutsHost & DomicileHost;
   /**
    * 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 +77,8 @@ type Props = {
    * boxes. See {@link drawnWindows}.
    */
   shownWindows?: (() => readonly ShownWindow[]) | undefined;
-  /** How dialogs read the desktop's files, for tests. */
-  systemOf?: typeof system | undefined;
+  /** How dialogs reach the desktop, for tests. */
+  desktopOf?: ((host: DomicileHost) => DialogDesktop) | undefined;
   /**
    * The display showing the `<app>` with this id, for a dialog modal over
    * it. `undefined` uses `screen`.
@@ -94,13 +105,13 @@ export const PortalDialogs = memo(
     screenOf,
     shellChords = NONE,
     shownWindows = drawnOnPage,
-    systemOf = system,
+    desktopOf = desktop,
   }: Props) => {
     const [requests, setRequests] = useState<readonly PortalRequest[]>([]);
-    const files = useMemo(() => systemOf(host), [systemOf, host]);
-    const folders = useMemo(() => systemFolders(files), [files]);
+    const domicile = useMemo(() => desktopOf(host), [desktopOf, host]);
+    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),
     ]);
@@ -149,13 +160,13 @@ export const PortalDialogs = memo(
             asker={apps(shown.appId).name}
             browserWindows={host.browserWindows ?? []}
             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,7 +189,7 @@ const Dialog = ({
   screen,
   shellChords,
   shownWindows,
-  system: files,
+  domicile,
 }: {
   answer: (answer: PortalAnswer) => void;
   apps: (appId: string) => App;
@@ -191,7 +202,7 @@ const Dialog = ({
   screen: string | undefined;
   shellChords: readonly string[];
   shownWindows: () => readonly ShownWindow[];
-  system: System;
+  domicile: DialogDesktop;
 }) => {
   switch (request.kind) {
     case PortalKind.Access:
@@ -227,8 +238,8 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
+          domicile={domicile}
           screen={screen}
-          system={files}
         />
       );
     case PortalKind.FileChooser:
@@ -246,7 +257,7 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
-          files={files}
+          files={domicile.files}
           screen={screen}
         />
       );
@@ -267,7 +278,7 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
-          files={files}
+          files={domicile.files}
           screen={screen}
         />
       );
@@ -298,7 +309,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 +332,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/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/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) => {