@domicile-desktop/component-library 0.0.0-alpha-8f594a0bdff4 → 0.0.0-alpha-ffa113fe68d4

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-8f594a0bdff4",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-8f594a0bdff4",
+    "@domicile-desktop/sdk": "0.0.0-alpha-ffa113fe68d4",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-ffa113fe68d4",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -58,6 +58,7 @@
     "./SlideOver": "./src/SlideOver/SlideOver.tsx",
     "./Slider": "./src/Slider/Slider.tsx",
     "./Switch": "./src/Switch/Switch.tsx",
+    "./shown-windows": "./src/PortalDialogs/shown-windows.ts",
     "./source-name": "./src/PortalDialogs/source-name.ts",
     "./spacing": "./src/spacing.ts",
     "./standalone-theme-source": "./src/ThemeSwitch/standalone-theme-source.ts",
@@ -104,5 +105,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-8f594a0bdff4"
+  "version": "0.0.0-alpha-ffa113fe68d4"
 }

package/src/PortalDialogs/PortalDialogs.tsx

@@ -35,6 +35,8 @@ import { PrintDialog } from "./PrintDialog";
 import { RemoteDesktopDialog } from "./RemoteDesktopDialog";
 import { ScreenCastDialog } from "./ScreenCastDialog";
 import { ScreenshotDialog } from "./ScreenshotDialog";
+import type { ShownWindow } from "./shown-windows";
+import { drawnWindows } from "./shown-windows";
 import { UsbDialog } from "./UsbDialog";
 import { WallpaperDialog } from "./WallpaperDialog";
 
@@ -54,6 +56,12 @@ type Props = {
    * them itself.
    */
   omitScreenCasts?: boolean | undefined;
+  /**
+   * The windows the shell draws on screen, with their whole frames. Without
+   * it, the screenshot dialog reads the page's `<app>` and `<webview window>`
+   * boxes. See {@link drawnWindows}.
+   */
+  shownWindows?: (() => readonly ShownWindow[]) | undefined;
   /** How dialogs read the desktop's files, for tests. */
   systemOf?: typeof system | undefined;
   /**
@@ -79,6 +87,7 @@ export const PortalDialogs = ({
   screen,
   screenOf,
   shellChords = NONE,
+  shownWindows = drawnOnPage,
   systemOf = system,
 }: Props) => {
   const [requests, setRequests] = useState<readonly PortalRequest[]>([]);
@@ -135,6 +144,7 @@ export const PortalDialogs = ({
           request={shown}
           screen={screenFor(shown, screen, screenOf)}
           shellChords={shellChords}
+          shownWindows={shownWindows}
           system={files}
         />
       )}
@@ -142,6 +152,9 @@ export const PortalDialogs = ({
   );
 };
 
+/** The windows this page draws. */
+const drawnOnPage = () => drawnWindows(document);
+
 /** The dialog for `request`'s kind. */
 const Dialog = ({
   answer,
@@ -152,6 +165,7 @@ const Dialog = ({
   request,
   screen,
   shellChords,
+  shownWindows,
   system: files,
 }: {
   answer: (answer: PortalAnswer) => void;
@@ -162,6 +176,7 @@ const Dialog = ({
   request: PortalRequest;
   screen: string | undefined;
   shellChords: readonly string[];
+  shownWindows: () => readonly ShownWindow[];
   system: System;
 }) => {
   switch (request.kind) {
@@ -287,6 +302,7 @@ const Dialog = ({
           body={request.body}
           browserWindows={browserWindows}
           screen={screen}
+          shownWindows={shownWindows}
         />
       );
     case PortalKind.PickColor:

package/src/PortalDialogs/ScreenshotDialog.tsx

@@ -15,9 +15,11 @@ import { flex } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
 import type { App } from "../useApps/useApps";
-import { browserWindowsOn } from "./browser-windows";
 import type { FramePoint } from "./frame-point";
 import { draggedArea, framePoint } from "./frame-point";
+import { onFrame } from "./on-frame";
+import type { ShownWindow } from "./shown-windows";
+import { ShownWindowKind } from "./shown-windows";
 
 type Props = {
   answer: (answer: PortalAnswer) => void;
@@ -29,15 +31,33 @@ type Props = {
   /** The desktop's browser windows, as the engine lists them. */
   browserWindows: readonly DomicileBrowserWindow[];
   screen: string | undefined;
+  /** The windows the shell draws on screen, read once as the dialog opens. */
+  shownWindows: () => readonly ShownWindow[];
 };
 
+/** What saving a choice keeps. */
+enum PickKind {
+  Area,
+  Window,
+}
+
+const Pick = {
+  /** An area of the frozen desk. */
+  Area: (area: ShotRect) => ({ area, kind: PickKind.Area as const }),
+  /** A window not on screen, from its own last frame. */
+  Window: (id: string) => ({ id, kind: PickKind.Window as const }),
+};
+
+type Pick = ReturnType<(typeof Pick)[keyof typeof Pick]>;
+
 /** Something the dialog offers to save, and how it shows it. */
-type Choice = { area: ShotRect; icon: ReactNode; name: string };
+type Choice = { icon: ReactNode; name: string; pick: Pick };
 
 /**
- * Picks the area of a frozen desk to save: all of it, a screen, a window, or
- * an area dragged over it. Windows are the desk's and the browser windows the
- * page draws. Dismissing it cancels.
+ * Picks what to save of a frozen desk: all of it, a screen, a window, or an
+ * area dragged over it. A window the shell shows is its whole frame on the
+ * desk; one it does not show, such as a hidden tab, is saved from its own
+ * last frame. Dismissing it cancels.
  */
 export const ScreenshotDialog = ({
   answer,
@@ -46,41 +66,39 @@ export const ScreenshotDialog = ({
   body,
   browserWindows,
   screen,
+  shownWindows,
 }: Props) => {
   // Read once, as the desk froze; a later move would not match the frame.
-  const [browsers] = useState(() =>
-    browserWindowsOn(
-      body,
-      browserWindows,
-      document.querySelectorAll("webview[window]"),
-    ),
+  const [shown] = useState(shownWindows);
+  const screens: Choice[] = body.monitors.map(
+    ({ area, description, name }) => ({
+      icon: <MonitorIcon aria-hidden />,
+      name: description === "" ? name : description,
+      pick: Pick.Area(area),
+    }),
   );
-  const screens: Choice[] = body.monitors.map(({ area, name }) => ({
-    area,
-    icon: <MonitorIcon aria-hidden />,
-    name,
-  }));
   const windows: Choice[] = [
-    ...body.windows.map(({ appId, area, title }) =>
-      windowChoice(area, titled(title), appId === "" ? undefined : apps(appId)),
+    ...body.windows.map(({ appId, id, title }) =>
+      windowChoice(
+        pickOf(body, shown, id),
+        titled(title),
+        appId === "" ? undefined : apps(appId),
+      ),
     ),
-    ...browsers.map(({ area, title }) => ({
-      area,
-      icon: <GlobeIcon aria-hidden />,
-      name: `Browser: ${titled(title)}`,
-    })),
+    ...shown.flatMap((window) => browserChoices(body, browserWindows, window)),
   ];
   const whole: Choice = {
-    area: { height: body.height, width: body.width, x: 0, y: 0 },
     icon: undefined,
     name: "Whole desk",
+    pick: Pick.Area({ height: body.height, width: body.width, x: 0, y: 0 }),
   };
   const choices = [whole, ...screens, ...windows];
   // The index of the choice picked, or the area dragged.
   const [picked, setPicked] = useState<number | ShotRect>(0);
   const [dragFrom, setDragFrom] = useState<FramePoint | undefined>(undefined);
-  const area = typeof picked === "number" ? choices[picked]?.area : picked;
-  if (area === undefined) {
+  const pick =
+    typeof picked === "number" ? choices[picked]?.pick : Pick.Area(picked);
+  if (pick === undefined) {
     throw new Error(`no screenshot choice ${String(picked)}`);
   }
   const button = (choice: Choice, index: number) => (
@@ -119,7 +137,7 @@ export const ScreenshotDialog = ({
           </Button>
           <Button
             onClick={() => {
-              answer(Answer.Screenshot(area));
+              answer(answerOf(pick));
             }}
           >
             Save
@@ -152,6 +170,11 @@ export const ScreenshotDialog = ({
           </ChoiceGroup>
         )}
       </div>
+      {pick.kind === PickKind.Window && (
+        <p className={askerStyles}>
+          Not on screen: saved as it last drew itself.
+        </p>
+      )}
       <div
         aria-label="Drag to pick an area"
         className={deskStyles}
@@ -176,7 +199,9 @@ export const ScreenshotDialog = ({
           draggable={false}
           src={body.frame}
         />
-        <div className={pickedStyles} style={placed(area, body)} />
+        {pick.kind === PickKind.Area && (
+          <div className={pickedStyles} style={placed(pick.area, body)} />
+        )}
       </div>
     </ModalDialog>
   );
@@ -252,13 +277,66 @@ const placed = (
 const titled = (title: string): string =>
   title === "" ? "Untitled window" : title;
 
+/** The answer that saves `pick`. */
+const answerOf = (pick: Pick): PortalAnswer => {
+  switch (pick.kind) {
+    case PickKind.Area:
+      return Answer.Screenshot(pick.area);
+    case PickKind.Window:
+      return Answer.ScreenshotWindow(pick.id);
+  }
+};
+
+/**
+ * What saving window `id` keeps: its frame on the desk while the shell shows
+ * it there, else its own last frame.
+ */
+const pickOf = (
+  desk: FrozenDesk,
+  shown: readonly ShownWindow[],
+  id: string,
+): Pick => {
+  const window = shown.find(
+    (window) => window.kind === ShownWindowKind.App && window.appId === id,
+  );
+  const area = window === undefined ? undefined : onFrame(desk, window.box);
+  return area === undefined ? Pick.Window(id) : Pick.Area(area);
+};
+
+/**
+ * `window` as a choice when it is a listed browser window on the desk. The
+ * engine draws a browser window, so one not on screen has nothing to save.
+ */
+const browserChoices = (
+  desk: FrozenDesk,
+  listed: readonly DomicileBrowserWindow[],
+  window: ShownWindow,
+): Choice[] => {
+  switch (window.kind) {
+    case ShownWindowKind.App:
+      return [];
+    case ShownWindowKind.Browser: {
+      const browser = listed.find(({ id }) => id === window.id);
+      const area = onFrame(desk, window.box);
+      return browser === undefined || area === undefined
+        ? []
+        : [
+            {
+              icon: <GlobeIcon aria-hidden />,
+              name: `Browser: ${titled(browser.title)}`,
+              pick: Pick.Area(area),
+            },
+          ];
+    }
+  }
+};
+
 /** A window of the desk, named and drawn with its application if it has one. */
 const windowChoice = (
-  area: ShotRect,
+  pick: Pick,
   title: string,
   app: App | undefined,
 ): Choice => ({
-  area,
   icon:
     app?.icon === undefined ? (
       <AppWindowIcon aria-hidden />
@@ -266,4 +344,5 @@ const windowChoice = (
       <img alt="" className={appIconStyles} src={app.icon} />
     ),
   name: app === undefined ? title : `${app.name}: ${title}`,
+  pick,
 });

package/src/PortalDialogs/on-frame.ts

@@ -0,0 +1,32 @@
+import type { FrozenDesk, ShotRect } from "@domicile-desktop/sdk/portal";
+import type { PageBox } from "./shown-windows";
+
+/**
+ * `box`, in the page's CSS pixels, which are the desk's logical pixels, in
+ * `desk`'s frame pixels. Clipped to the desk; `undefined` off it.
+ */
+export const onFrame = (
+  desk: FrozenDesk,
+  box: PageBox,
+): ShotRect | undefined => {
+  const [deskX, deskY] = desk.desk.position;
+  const [deskWidth, deskHeight] = desk.desk.size;
+  const left = Math.max(box.x, deskX) - deskX;
+  const top = Math.max(box.y, deskY) - deskY;
+  const right = Math.min(box.x + box.width, deskX + deskWidth) - deskX;
+  const bottom = Math.min(box.y + box.height, deskY + deskHeight) - deskY;
+  const area = {
+    height: pixels(desk, bottom) - pixels(desk, top),
+    width: pixels(desk, right) - pixels(desk, left),
+    x: pixels(desk, left),
+    y: pixels(desk, top),
+  };
+  return area.width > 0 && area.height > 0 ? area : undefined;
+};
+
+/**
+ * The frame pixel `logical` pixels into `desk`, rounded as the compositor
+ * rounds its monitors.
+ */
+const pixels = (desk: FrozenDesk, logical: number): number =>
+  Math.round((logical * desk.width) / desk.desk.size[0]);

package/src/PortalDialogs/shown-windows.ts

@@ -0,0 +1,65 @@
+/** A rectangle of the page, in its CSS pixels. */
+export type PageBox = { x: number; y: number; width: number; height: number };
+
+/** The kind of a {@link ShownWindow}. */
+export enum ShownWindowKind {
+  App,
+  Browser,
+}
+
+/**
+ * A window the shell draws on screen, and its whole frame there: title bar,
+ * address bar or tab strip included. The screenshot dialog crops a shown
+ * window from the frozen desk by this box.
+ */
+export const ShownWindow = {
+  /** An `<app>`'s window, by host app id. */
+  App: (appId: string, box: PageBox) => ({
+    appId,
+    box,
+    kind: ShownWindowKind.App as const,
+  }),
+  /** A browser window, by the engine's id. */
+  Browser: (id: string, box: PageBox) => ({
+    box,
+    id,
+    kind: ShownWindowKind.Browser as const,
+  }),
+};
+
+export type ShownWindow = ReturnType<
+  (typeof ShownWindow)[keyof typeof ShownWindow]
+>;
+
+/**
+ * The windows `page` draws: each `<app>` and each `<webview window>` with a
+ * box. Their boxes leave out the shell's frame, and a window hidden under
+ * another still has one; a shell that knows better passes its own list.
+ */
+export const drawnWindows = (page: ParentNode): ShownWindow[] => [
+  ...[...page.querySelectorAll("app[app-id]")].flatMap((app) =>
+    drawn(app, (box) => ShownWindow.App(attribute(app, "app-id"), box)),
+  ),
+  ...[...page.querySelectorAll("webview[window]")].flatMap((view) =>
+    drawn(view, (box) => ShownWindow.Browser(attribute(view, "window"), box)),
+  ),
+];
+
+/** `element` as `shown` makes it, unless it has no box. */
+const drawn = (
+  element: Element,
+  shown: (box: PageBox) => ShownWindow,
+): ShownWindow[] => {
+  const { height, width, x, y } = element.getBoundingClientRect();
+  return width > 0 && height > 0 ? [shown({ height, width, x, y })] : [];
+};
+
+/** `element`'s `name` attribute, which its selector guarantees. */
+const attribute = (element: Element, name: string): string => {
+  const value = element.getAttribute(name);
+  if (value === null) {
+    throw new Error(`a selected element has no ${name}`);
+  } else {
+    return value;
+  }
+};

package/src/PortalDialogs/browser-windows.ts

@@ -1,50 +0,0 @@
-import type { DomicileBrowserWindow } from "@domicile-desktop/sdk/domicile-host";
-import type { FrozenDesk, ShotRect } from "@domicile-desktop/sdk/portal";
-
-/** A browser window a page draws, where it is on a frozen desk's frame. */
-export type ShotBrowserWindow = { title: string; area: ShotRect };
-
-/**
- * The browser windows `views` draw, where they are on `desk`'s frame. The
- * compositor sees only `<app>` windows, so the page places these itself.
- *
- * A view's box is in the page's CSS pixels, which are the desk's logical
- * pixels. It is clipped to the desk, and left out when off it, as one on a
- * hidden workspace is.
- */
-export const browserWindowsOn = (
-  desk: FrozenDesk,
-  listed: readonly DomicileBrowserWindow[],
-  views: Iterable<Element>,
-): ShotBrowserWindow[] =>
-  [...views].flatMap((view) => {
-    const shown = listed.find(({ id }) => id === view.getAttribute("window"));
-    const area = onFrame(desk, view.getBoundingClientRect());
-    return shown === undefined || area === undefined
-      ? []
-      : [{ area, title: shown.title }];
-  });
-
-/** `box`, in logical pixels, in `desk`'s frame pixels; `undefined` off it. */
-const onFrame = (desk: FrozenDesk, box: DOMRect): ShotRect | undefined => {
-  const [deskX, deskY] = desk.desk.position;
-  const [deskWidth, deskHeight] = desk.desk.size;
-  const left = Math.max(box.left, deskX) - deskX;
-  const top = Math.max(box.top, deskY) - deskY;
-  const right = Math.min(box.right, deskX + deskWidth) - deskX;
-  const bottom = Math.min(box.bottom, deskY + deskHeight) - deskY;
-  const area = {
-    height: pixels(desk, bottom) - pixels(desk, top),
-    width: pixels(desk, right) - pixels(desk, left),
-    x: pixels(desk, left),
-    y: pixels(desk, top),
-  };
-  return area.width > 0 && area.height > 0 ? area : undefined;
-};
-
-/**
- * The frame pixel `logical` pixels into `desk`, rounded as the compositor
- * rounds its windows.
- */
-const pixels = (desk: FrozenDesk, logical: number): number =>
-  Math.round((logical * desk.width) / desk.desk.size[0]);