@domicile-desktop/component-library 0.0.0-alpha-183ca460bbae → 0.0.0-alpha-3e5b976f2009

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-183ca460bbae",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-183ca460bbae",
+    "@domicile-desktop/sdk": "0.0.0-alpha-3e5b976f2009",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-3e5b976f2009",
     "@pandacss/dev": "^1.12.1",
     "@phosphor-icons/react": "^2.1.10"
   },
@@ -114,5 +114,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-183ca460bbae"
+  "version": "0.0.0-alpha-3e5b976f2009"
 }

package/src/PortalDialogs/PortalDialogs.tsx

@@ -294,6 +294,7 @@ const Dialog = ({
           answer={answer}
           asker={asker}
           body={request.body}
+          list={list}
           screen={screen}
         />
       );

package/src/PortalDialogs/PrintDialog.tsx

@@ -1,4 +1,5 @@
 import type {
+  PageRange,
   PortalAnswer,
   PrintBody,
   Printer,
@@ -11,19 +12,26 @@ import {
   PrintQuality,
   Sides,
 } from "@domicile-desktop/sdk/portal";
+import { FilePdfIcon } from "@phosphor-icons/react/dist/ssr/FilePdf";
+import { PrinterIcon } from "@phosphor-icons/react/dist/ssr/Printer";
 import { useState } from "react";
 import { css } from "../../styled-system/css";
 import { grid } from "../../styled-system/patterns";
+import { focusOnAttach } from "../_control/focusOnAttach";
 import { Button } from "../Button/Button";
+import { Field } from "../Field/Field";
+import { FilePicker } from "../FilePicker/FilePicker";
+import { ChooserMode } from "../FilePicker/file-request";
 import { Input } from "../Input/Input";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
+import { useScreenRegion } from "../Screen/DisplayProvider";
 import { Select } from "../Select/Select";
 import { pageRanges } from "./page-ranges";
 
 const SIDES = {
-  [Sides.OneSided]: "One-sided",
-  [Sides.TwoSidedLongEdge]: "Two-sided, long edge",
-  [Sides.TwoSidedShortEdge]: "Two-sided, short edge",
+  [Sides.OneSided]: "Off",
+  [Sides.TwoSidedLongEdge]: "Long edge",
+  [Sides.TwoSidedShortEdge]: "Short edge",
 } as const;
 
 const COLOR_MODES = {
@@ -34,8 +42,8 @@ const COLOR_MODES = {
 const ORIENTATIONS = {
   [Orientation.Portrait]: "Portrait",
   [Orientation.Landscape]: "Landscape",
-  [Orientation.ReverseLandscape]: "Reverse landscape",
-  [Orientation.ReversePortrait]: "Reverse portrait",
+  [Orientation.ReverseLandscape]: "Landscape, upside down",
+  [Orientation.ReversePortrait]: "Portrait, upside down",
 } as const;
 
 const QUALITIES = {
@@ -44,40 +52,77 @@ const QUALITIES = {
   [PrintQuality.High]: "High",
 } as const;
 
+/** Whether to print every page or the ones typed. */
+enum PageChoice {
+  All,
+  Custom,
+}
+
+const PAGE_CHOICES = [
+  { label: "All", value: PageChoice.All },
+  { label: "Custom", value: PageChoice.Custom },
+] as const;
+
 type Props = {
   answer: (answer: PortalAnswer) => void;
   /** Who asks, as the dialog names them. */
   asker: string;
   body: PrintBody;
+  /** Lists a directory for the PDF's file picker; see `FileRequest.list`. */
+  list: (path: string) => Promise<readonly string[]>;
   screen: string | undefined;
 };
 
 /**
- * A print dialog: a printer and the options it supports, or word that there
- * are no printers. Dismissing it cancels. No preview: the document arrives
- * only after it closes.
+ * A print dialog: a printer or Save to PDF, and the options each supports.
+ * Saving to a PDF picks its file after. Dismissing it cancels. No preview:
+ * the document arrives only after it closes.
  */
-export const PrintDialog = ({ answer, asker, body, screen }: Props) => {
-  const [chosen, setChosen] = useState(() => startingPrinter(body));
-  return (
+export const PrintDialog = ({ answer, asker, body, list, screen }: Props) => {
+  const [chosen, setChosen] = useState(() => startingChoice(body));
+  const [picking, setPicking] = useState(false);
+  const options = readOptions(chosen);
+  const pdf = chosen.printer === body.pdf;
+  return picking && options !== undefined ? (
+    <PdfPicker
+      answer={answer}
+      back={() => {
+        setPicking(false);
+      }}
+      body={body}
+      list={list}
+      options={options}
+      screen={screen}
+    />
+  ) : (
     <ModalDialog
       closeButton={false}
       footer={
-        chosen === undefined ? (
+        <>
           <Button
             onClick={() => {
               answer(Answer.Canceled());
             }}
+            variant="outline"
           >
-            Close
+            Cancel
           </Button>
-        ) : (
-          <PrinterFooter
-            acceptLabel={body.acceptLabel ?? "Print"}
-            answer={answer}
-            chosen={chosen}
-          />
-        )
+          <Button
+            disabled={options === undefined}
+            onClick={() => {
+              if (options !== undefined) {
+                if (pdf) {
+                  setPicking(true);
+                } else {
+                  answer(Answer.Print(chosen.printer.name, options));
+                }
+              }
+            }}
+            variant="accent"
+          >
+            {pdf ? "Save…" : (body.acceptLabel ?? "Print")}
+          </Button>
+        </>
       }
       onOpenChange={(open) => {
         if (!open) {
@@ -89,128 +134,139 @@ export const PrintDialog = ({ answer, asker, body, screen }: Props) => {
       title="Print"
     >
       <p className={askerStyles}>{`${asker} prints “${body.title}”`}</p>
-      {chosen === undefined ? (
-        <p className={textStyles}>No printers are set up.</p>
-      ) : (
-        <Options
-          chosen={chosen}
-          onChange={setChosen}
-          printers={body.printers}
-        />
-      )}
+      <div className={formStyles}>
+        <div className={wideStyles}>
+          <Field
+            hint={
+              body.printers.length === 0 ? "No printers are set up." : undefined
+            }
+            label="Destination"
+          >
+            <Select
+              onValueChange={(picked) => {
+                if (picked !== null) {
+                  setChosen(startOf(picked));
+                }
+              }}
+              options={[...body.printers, body.pdf].map((listed) => ({
+                label: (
+                  <span className={destinationStyles}>
+                    <DestinationIcon pdf={listed === body.pdf} />
+                    {nameOf(listed)}
+                  </span>
+                ),
+                textLabel: nameOf(listed),
+                value: listed,
+              }))}
+              prefixIcon={<DestinationIcon pdf={pdf} />}
+              value={chosen.printer}
+            />
+          </Field>
+        </div>
+        <Options chosen={chosen} onChange={setChosen} />
+      </div>
     </ModalDialog>
   );
 };
 
+const DestinationIcon = ({ pdf }: { pdf: boolean }) =>
+  pdf ? <FilePdfIcon /> : <PrinterIcon />;
+
 /** A printer and the options as the user has set them so far. */
 type Chosen = {
   /** As typed. */
   copies: string;
+  pageChoice: PageChoice;
   /** As typed. */
   pages: string;
   options: PrintOptions;
   printer: Printer;
 };
 
-const PrinterFooter = ({
-  acceptLabel,
-  answer,
-  chosen,
-}: {
-  acceptLabel: string;
-  answer: (answer: PortalAnswer) => void;
-  chosen: Chosen;
-}) => {
-  const options = readOptions(chosen);
-  return (
-    <>
-      <Button
-        onClick={() => {
-          answer(Answer.Canceled());
-        }}
-        variant="outline"
-      >
-        Cancel
-      </Button>
-      <Button
-        disabled={options === undefined}
-        onClick={() => {
-          if (options !== undefined) {
-            answer(Answer.Print(chosen.printer.name, options));
-          }
-        }}
-      >
-        {acceptLabel}
-      </Button>
-    </>
-  );
-};
-
+/** The options `chosen.printer` supports, each in a labeled field. */
 const Options = ({
   chosen,
   onChange,
-  printers,
 }: {
   chosen: Chosen;
   onChange: (chosen: Chosen) => void;
-  printers: readonly Printer[];
 }) => {
   const { options, printer } = chosen;
   const set = (changed: Partial<PrintOptions>) => {
     onChange({ ...chosen, options: { ...options, ...changed } });
   };
+  const custom = chosen.pageChoice === PageChoice.Custom;
   return (
-    <div className={optionsStyles}>
-      <Select
-        aria-label="Printer"
-        onValueChange={(name) => {
-          const picked = printers.find((listed) => listed.name === name);
-          if (picked !== undefined) {
-            onChange(startOf(picked));
-          }
-        }}
-        options={printers.map((listed) => ({
-          label: listed.description ?? listed.name,
-          value: listed.name,
-        }))}
-        value={printer.name}
-      />
+    <>
+      {printer.pageRanges && (
+        <div className={pagesStyles}>
+          <Field label="Pages">
+            <Select
+              onValueChange={(pageChoice) => {
+                if (pageChoice !== null) {
+                  onChange({ ...chosen, pageChoice });
+                }
+              }}
+              options={PAGE_CHOICES}
+              value={chosen.pageChoice}
+            />
+          </Field>
+          {custom && (
+            <Field
+              invalid={chosen.pages !== "" && pagesOf(chosen) === undefined}
+            >
+              <Input
+                aria-label="Page range"
+                autoFocus
+                onChange={(event) => {
+                  onChange({ ...chosen, pages: event.target.value });
+                }}
+                placeholder="e.g. 1-3, 5"
+                value={chosen.pages}
+              />
+            </Field>
+          )}
+        </div>
+      )}
+      {printer.copiesMax > 1 && (
+        <Field label="Copies">
+          <Input
+            max={printer.copiesMax}
+            min={1}
+            onChange={(event) => {
+              onChange({ ...chosen, copies: event.target.value });
+            }}
+            type="number"
+            value={chosen.copies}
+          />
+        </Field>
+      )}
       {printer.media.length > 0 && (
-        <Select
-          aria-label="Paper"
-          onValueChange={(media) => {
-            set({ media: media ?? undefined });
-          }}
-          options={printer.media.map((media) => ({
-            label: media.label,
-            value: media.name,
-          }))}
-          placeholder="Printer default"
-          value={options.media ?? null}
-        />
+        <Field label="Paper">
+          <Select
+            onValueChange={(media) => {
+              set({ media: media ?? undefined });
+            }}
+            options={printer.media.map((media) => ({
+              label: media.label,
+              value: media.name,
+            }))}
+            placeholder="Default"
+            value={options.media ?? null}
+          />
+        </Field>
       )}
-      <Input
-        aria-label="Copies"
-        max={printer.copiesMax}
-        min={1}
-        onChange={(event) => {
-          onChange({ ...chosen, copies: event.target.value });
+      <Choice
+        label="Layout"
+        labels={ORIENTATIONS}
+        offered={printer.orientations}
+        onChange={(orientation) => {
+          set({ orientation });
         }}
-        type="number"
-        value={chosen.copies}
+        value={options.orientation}
       />
-      {printer.pageRanges && (
-        <Input
-          aria-label="Pages"
-          onChange={(event) => {
-            onChange({ ...chosen, pages: event.target.value });
-          }}
-          placeholder="All, or 1-3, 5"
-          value={chosen.pages}
-        />
-      )}
       <Choice
-        label="Sides"
+        label="Two-sided"
         labels={SIDES}
         offered={printer.sides}
         onChange={(sides) => {
@@ -227,15 +283,6 @@ const Options = ({
         }}
         value={options.colorMode}
       />
-      <Choice
-        label="Orientation"
-        labels={ORIENTATIONS}
-        offered={printer.orientations}
-        onChange={(orientation) => {
-          set({ orientation });
-        }}
-        value={options.orientation}
-      />
       <Choice
         label="Quality"
         labels={QUALITIES}
@@ -245,11 +292,11 @@ const Options = ({
         }}
         value={options.quality}
       />
-    </div>
+    </>
   );
 };
 
-/** A select of the values a printer offers for one option; none if it offers none. */
+/** A labeled select of the values a printer offers; none if it offers none. */
 const Choice = <V extends number>({
   label,
   labels,
@@ -264,43 +311,136 @@ const Choice = <V extends number>({
   value: V | undefined;
 }) =>
   offered.length > 0 && (
-    <Select
-      aria-label={label}
-      onValueChange={(picked) => {
-        onChange(picked ?? undefined);
-      }}
-      options={offered.map((offer) => ({ label: labels[offer], value: offer }))}
-      placeholder="Printer default"
-      value={value ?? null}
-    />
+    <Field label={label}>
+      <Select
+        onValueChange={(picked) => {
+          onChange(picked ?? undefined);
+        }}
+        options={offered.map((offer) => ({
+          label: labels[offer],
+          value: offer,
+        }))}
+        placeholder="Default"
+        value={value ?? null}
+      />
+    </Field>
+  );
+
+/**
+ * The file picker for a PDF, over `screen`, starting in the home with the
+ * document's title as its name. Canceling goes back to the options.
+ */
+const PdfPicker = ({
+  answer,
+  back,
+  body,
+  list,
+  options,
+  screen,
+}: {
+  answer: (answer: PortalAnswer) => void;
+  back: () => void;
+  body: PrintBody;
+  list: (path: string) => Promise<readonly string[]>;
+  options: PrintOptions;
+  screen: string | undefined;
+}) => {
+  const region = useScreenRegion(screen);
+  return (
+    <div className={regionStyles} style={region}>
+      <FilePicker
+        ref={focusOnAttach}
+        request={{
+          accept: ["pdf"],
+          acceptLabel: "Save",
+          cancel: back,
+          choose: ([path]) => {
+            if (path === undefined) {
+              throw new Error("a save chose no file");
+            } else {
+              answer(Answer.SaveToPdf(path, options));
+            }
+          },
+          home: body.home,
+          list,
+          mode: ChooserMode.Save,
+          suggestedName: pdfName(body.title),
+          title: "Save as PDF",
+        }}
+      />
+    </div>
   );
+};
 
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
-const textStyles = css({ color: "foreground", margin: 0 });
+const formStyles = grid({
+  columnGap: 3,
+  columns: 2,
+  marginBlockStart: 4,
+  rowGap: 4,
+});
+
+const wideStyles = css({ gridColumn: "1 / -1" });
+
+const destinationStyles = css({
+  alignItems: "center",
+  display: "inline-flex",
+  gap: 2,
+});
+
+const pagesStyles = grid({
+  alignItems: "end",
+  columnGap: 3,
+  columns: 2,
+  gridColumn: "1 / -1",
+});
+
+const regionStyles = css({
+  inset: 0,
+  position: "fixed",
+});
 
-const optionsStyles = grid({ columns: 2, gap: 2, marginBlockStart: 3 });
+/** `printer` for people. */
+const nameOf = (printer: Printer): string =>
+  printer.description ?? printer.name;
 
-/** The printer the dialog starts on, if there is any. */
-const startingPrinter = (body: PrintBody): Chosen | undefined => {
-  const printer =
+/** Where the dialog starts: the application's printer, else the first, else a PDF. */
+const startingChoice = (body: PrintBody): Chosen =>
+  startOf(
     body.printers.find((listed) => listed.name === body.printer) ??
-    body.printers[0];
-  return printer === undefined ? undefined : startOf(printer);
-};
+      body.printers[0] ??
+      body.pdf,
+  );
 
 /** `printer` with its initial options. */
 const startOf = (printer: Printer): Chosen => ({
   copies: String(printer.initial.copies),
   options: printer.initial,
-  pages: "",
+  pageChoice:
+    printer.initial.pages.length === 0 ? PageChoice.All : PageChoice.Custom,
+  pages: printer.initial.pages
+    .map(({ first, last }) =>
+      first === last ? `${first}` : `${first}-${last}`,
+    )
+    .join(", "),
   printer,
 });
 
+/** The pages chosen, or `undefined` while custom pages name none it reads. */
+const pagesOf = (chosen: Chosen): readonly PageRange[] | undefined => {
+  switch (chosen.pageChoice) {
+    case PageChoice.All:
+      return [];
+    case PageChoice.Custom:
+      return chosen.pages.trim() === "" ? undefined : pageRanges(chosen.pages);
+  }
+};
+
 /** The options to print with, or `undefined` while copies or pages do not read. */
 const readOptions = (chosen: Chosen): PrintOptions | undefined => {
   const copies = Number(chosen.copies);
-  const pages = pageRanges(chosen.pages);
+  const pages = pagesOf(chosen);
   const copiesRead =
     Number.isInteger(copies) &&
     copies >= 1 &&
@@ -309,3 +449,7 @@ const readOptions = (chosen: Chosen): PrintOptions | undefined => {
     ? { ...chosen.options, copies, pages }
     : undefined;
 };
+
+/** A file name for a PDF of `title`: no slashes, and `Document` when blank. */
+const pdfName = (title: string): string =>
+  `${title.trim() === "" ? "Document" : title.replaceAll("/", "-")}.pdf`;

package/src/PortalDialogs/ScreenshotDialog.tsx

@@ -1,3 +1,5 @@
+import { Radio } from "@base-ui/react/radio";
+import { RadioGroup } from "@base-ui/react/radio-group";
 import type { DomicileBrowserWindow } from "@domicile-desktop/sdk/domicile-host";
 import type {
   FrozenDesk,
@@ -7,18 +9,16 @@ import type {
 import { PortalAnswer as Answer } from "@domicile-desktop/sdk/portal";
 import { GlobeIcon } from "@phosphor-icons/react/dist/ssr/Globe";
 import { MonitorIcon } from "@phosphor-icons/react/dist/ssr/Monitor";
-import type { PointerEvent, ReactNode } from "react";
+import type { CSSProperties, PointerEvent, ReactNode } from "react";
 import { useEffect, useState } from "react";
 import { css } from "../../styled-system/css";
-import { flex } from "../../styled-system/patterns";
+import { center, flex } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
 import { ModalDialog } from "../ModalDialog/ModalDialog";
 import type { App } from "../useApps/useApps";
 import type { FramePoint } from "./frame-point";
 import { draggedArea, framePoint } from "./frame-point";
 import { onFrame } from "./on-frame";
-import type { SourceTile } from "./SourceTiles";
-import { SourceTiles } from "./SourceTiles";
 import type { ShownWindow } from "./shown-windows";
 import { ShownWindowKind } from "./shown-windows";
 import { WindowIcon } from "./WindowIcon";
@@ -69,15 +69,24 @@ const Pick = {
 
 type Pick = ReturnType<(typeof Pick)[keyof typeof Pick]>;
 
-/** Something the dialog offers to save, and how it shows it. */
-type Choice = { icon: ReactNode; name: string; pick: Pick };
+/**
+ * Something the dialog offers to save, and how its row shows it: `name`
+ * over `detail`. `label` names it to a screen reader.
+ */
+type Choice = {
+  detail: string | undefined;
+  icon: ReactNode;
+  label: string;
+  name: string;
+  pick: Pick;
+};
 
 /**
- * Picks what to save of a frozen desk: all of it, a screen, a window, each
- * a tile previewing it as the screen cast picker's do, or an area dragged
- * over the desk. A window is saved from its own frame, so what is
- * over it, such as a notification, is left out. Ctrl+C copies the pick to
- * the clipboard instead of saving it. Dismissing it cancels.
+ * Picks what to save of a frozen desk: all of it, a screen or a window from
+ * a list beside the desk, or an area dragged over the desk. The desk outlines
+ * the pick, with its size. A window is saved from its own frame, so what is
+ * over it, such as a notification, is left out. Copy, or Ctrl+C, copies the
+ * pick to the clipboard instead of saving it. Dismissing it cancels.
  */
 export const ScreenshotDialog = ({
   answer,
@@ -92,7 +101,9 @@ export const ScreenshotDialog = ({
   const [shown] = useState(shownWindows);
   const screens: Choice[] = body.monitors.map(
     ({ area, description, name }) => ({
+      detail: description === "" ? undefined : name,
       icon: <MonitorIcon aria-hidden />,
+      label: description === "" ? name : description,
       name: description === "" ? name : description,
       pick: Pick.Area(area),
     }),
@@ -108,7 +119,9 @@ export const ScreenshotDialog = ({
     ...shown.flatMap((window) => browserChoices(body, browserWindows, window)),
   ];
   const whole: Choice = {
+    detail: `${String(body.width)} × ${String(body.height)}`,
     icon: <MonitorIcon aria-hidden />,
+    label: "Whole desk",
     name: "Whole desk",
     pick: Pick.Area({ height: body.height, width: body.width, x: 0, y: 0 }),
   };
@@ -133,32 +146,6 @@ export const ScreenshotDialog = ({
       document.removeEventListener("keydown", copy);
     };
   }, [answer, pick]);
-  // A choice's tile, keyed by its index: names repeat, as two untitled
-  // windows do, and the order is fixed.
-  const group = (label: string, members: readonly Choice[], first: number) =>
-    members.length > 0 && (
-      <SourceTiles
-        desk={body}
-        label={label}
-        multiple={false}
-        onValueChange={([value]) => {
-          // Picking the picked tile again keeps it.
-          if (value !== undefined) {
-            setPicked(Number(value));
-          }
-        }}
-        tiles={members.map((choice, offset) =>
-          tileOf(choice, String(first + offset)),
-        )}
-        value={
-          typeof picked === "number" &&
-          picked >= first &&
-          picked < first + members.length
-            ? [String(picked)]
-            : []
-        }
-      />
-    );
   const pointAt = (event: PointerEvent<HTMLDivElement>) =>
     framePoint(
       { x: event.clientX, y: event.clientY },
@@ -178,6 +165,14 @@ export const ScreenshotDialog = ({
           >
             Cancel
           </Button>
+          <Button
+            onClick={() => {
+              answer(answerOf(pick, true));
+            }}
+            variant="outline"
+          >
+            Copy
+          </Button>
           <Button
             onClick={() => {
               answer(answerOf(pick, false));
@@ -198,57 +193,209 @@ export const ScreenshotDialog = ({
       title="Take a screenshot"
     >
       {asker !== undefined && <p className={askerStyles}>{`${asker} asks`}</p>}
-      <div className={choicesStyles}>
-        {group("Desk", [whole], 0)}
-        {group("Screens", screens, 1)}
-        {group("Windows", windows, 1 + screens.length)}
-      </div>
-      {pick.kind === PickKind.Window && pick.area === undefined && (
-        <p className={askerStyles}>
-          Not on screen: saved as it last drew itself.
-        </p>
-      )}
-      <div
-        aria-label="Drag to pick an area"
-        className={deskStyles}
-        onPointerDown={(event) => {
-          const from = pointAt(event);
-          setDragFrom(from);
-          setPicked(draggedArea(from, from));
-        }}
-        onPointerMove={(event) => {
-          if (dragFrom !== undefined) {
-            setPicked(draggedArea(dragFrom, pointAt(event)));
-          }
-        }}
-        onPointerUp={() => {
-          setDragFrom(undefined);
-        }}
-        role="group"
-      >
-        <img
-          alt="The desk"
-          className={frameStyles}
-          draggable={false}
-          src={body.frame}
-        />
-        {pick.area !== undefined && (
-          <div className={pickedStyles} style={placed(pick.area, body)} />
-        )}
+      <div className={layoutStyles}>
+        {/* `null` is Base UI's "no radio checked", for an area dragged. */}
+        <RadioGroup<number | null>
+          aria-label="What to save"
+          className={listStyles}
+          onValueChange={(value) => {
+            if (value === null) {
+              throw new Error("a radio unchecked the screenshot choices");
+            } else {
+              setPicked(value);
+            }
+          }}
+          value={typeof picked === "number" ? picked : null}
+        >
+          <ChoiceRow choice={whole} index={0} />
+          <ChoiceSection choices={screens} first={1} label="Screens" />
+          <ChoiceSection
+            choices={windows}
+            first={1 + screens.length}
+            label="Windows"
+          />
+        </RadioGroup>
+        <figure className={stageStyles}>
+          <div
+            aria-label="Drag to pick an area"
+            className={deskStyles}
+            onPointerDown={(event) => {
+              const from = pointAt(event);
+              setDragFrom(from);
+              setPicked(draggedArea(from, from));
+            }}
+            onPointerMove={(event) => {
+              if (dragFrom !== undefined) {
+                setPicked(draggedArea(dragFrom, pointAt(event)));
+              }
+            }}
+            onPointerUp={() => {
+              setDragFrom(undefined);
+            }}
+            role="group"
+            style={fitted(body)}
+          >
+            <img
+              alt="The desk"
+              className={frameStyles}
+              draggable={false}
+              src={body.frame}
+            />
+            {pick.area !== undefined && (
+              <div className={pickedStyles} style={placed(pick.area, body)}>
+                <span className={sizeStyles}>
+                  {`${String(pick.area.width)} × ${String(pick.area.height)}`}
+                </span>
+              </div>
+            )}
+          </div>
+          <figcaption className={captionStyles}>
+            {pick.kind === PickKind.Window && pick.area === undefined
+              ? "Not on screen: saved as it last drew itself."
+              : "Drag over the desk to pick an area."}
+          </figcaption>
+        </figure>
       </div>
     </ModalDialog>
   );
 };
 
+/**
+ * A labeled run of rows, numbered from `first` in the dialog's choices, or
+ * nothing when there are none.
+ */
+const ChoiceSection = ({
+  choices,
+  first,
+  label,
+}: {
+  choices: readonly Choice[];
+  first: number;
+  label: string;
+}) =>
+  choices.length > 0 && (
+    <div aria-label={label} className={sectionStyles} role="group">
+      <span aria-hidden className={sectionLabelStyles}>
+        {label}
+      </span>
+      {choices.map((choice, offset) => (
+        // Keyed by index: names repeat, as two untitled windows do, and the
+        // order is fixed.
+        <ChoiceRow
+          choice={choice}
+          index={first + offset}
+          key={first + offset}
+        />
+      ))}
+    </div>
+  );
+
+/** `choice`'s row, picking it as the dialog's choice `index`. */
+const ChoiceRow = ({ choice, index }: { choice: Choice; index: number }) => (
+  <Radio.Root aria-label={choice.label} className={rowStyles} value={index}>
+    {choice.icon}
+    <span className={rowTextStyles}>
+      <span className={rowNameStyles}>{choice.name}</span>
+      {choice.detail !== undefined && (
+        <span className={rowDetailStyles}>{choice.detail}</span>
+      )}
+    </span>
+  </Radio.Root>
+);
+
 const askerStyles = css({ color: "muted", fontSize: "sm", margin: 0 });
 
-const choicesStyles = flex({
-  direction: "column",
+const layoutStyles = css({
+  alignItems: "stretch",
+  display: "grid",
   gap: 4,
-  marginBlock: 3,
+  gridTemplateColumns: "{spacing.64} minmax(0, 1fr)",
+});
+
+// As tall as the desk beside it, scrolling when the rows run longer: a zero
+// height keeps the rows out of the grid row's height.
+const listStyles = flex({
+  blockSize: 0,
+  direction: "column",
+  gap: 3,
+  minBlockSize: "full",
+  overflowY: "auto",
+  // Room for the focus ring, which the scrolling would clip.
+  padding: 1,
+});
+
+const sectionStyles = flex({ direction: "column", gap: 0.5 });
+
+const sectionLabelStyles = css({
+  color: "muted",
+  fontSize: "xs",
+  fontWeight: "medium",
+  letterSpacing: "wide",
+  paddingBlockEnd: 1,
+  paddingInline: 2.5,
+  textTransform: "uppercase",
+});
+
+const rowStyles = css({
+  _checked: {
+    backgroundColor: "color-mix(in oklab, {colors.accent} 20%, transparent)",
+    borderColor: "accent",
+  },
+  _hover: {
+    backgroundColor: "color-mix(in oklab, {colors.foreground} 6%, transparent)",
+  },
+  "& > :is(svg, img)": {
+    blockSize: 5,
+    color: "muted",
+    flexShrink: 0,
+    inlineSize: 5,
+  },
+  alignItems: "center",
+  border: "1px solid transparent",
+  borderRadius: "md",
+  color: "foreground",
+  cursor: "pointer",
+  display: "flex",
+  flexShrink: 0,
+  gap: 2.5,
+  minInlineSize: 0,
+  paddingBlock: 1.5,
+  paddingInline: 2.5,
+  transition: "background-color {durations.fast} {easings.out}",
+});
+
+const rowTextStyles = flex({ direction: "column", minInlineSize: 0 });
+
+const rowNameStyles = css({
+  fontSize: "sm",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const rowDetailStyles = css({
+  color: "muted",
+  fontSize: "xs",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+});
+
+const stageStyles = flex({
+  align: "center",
+  backgroundColor: "background",
+  border: "1px solid {colors.border}",
+  borderRadius: "lg",
+  direction: "column",
+  gap: 3,
+  justify: "center",
+  margin: 0,
+  minBlockSize: 72,
+  padding: 4,
 });
 
 const deskStyles = css({
+  borderRadius: "sm",
   cursor: "crosshair",
   // Keeps the shade around the picked area on the frame.
   overflow: "hidden",
@@ -257,17 +404,47 @@ const deskStyles = css({
   userSelect: "none",
 });
 
-const frameStyles = css({ display: "block", width: "full" });
+const frameStyles = css({
+  blockSize: "full",
+  display: "block",
+  inlineSize: "full",
+});
 
 const pickedStyles = css({
-  borderColor: "accent",
-  borderStyle: "solid",
-  borderWidth: "2px",
-  boxShadow: "0 0 0 9999px rgb(0 0 0 / 0.45)",
+  border: "2px solid {colors.accent}",
+  boxShadow: "0 0 0 100vmax {colors.backdrop}",
   pointerEvents: "none",
   position: "absolute",
 });
 
+const sizeStyles = center({
+  backgroundColor: "accent",
+  borderEndEndRadius: "sm",
+  color: "background",
+  fontSize: "xs",
+  fontVariantNumeric: "tabular-nums",
+  fontWeight: "medium",
+  insetBlockStart: 0,
+  insetInlineStart: 0,
+  paddingBlock: 0.5,
+  paddingInline: 1.5,
+  position: "absolute",
+  whiteSpace: "nowrap",
+});
+
+const captionStyles = css({ color: "muted", fontSize: "xs" });
+
+/**
+ * The desk's box in the stage: as wide as the stage allows, at the frame's
+ * aspect ratio, no taller than 56% of the screen so the dialog fits on it.
+ */
+const fitted = (frame: { width: number; height: number }): CSSProperties => {
+  const ratio = `${String(frame.width)} / ${String(frame.height)}`;
+  return {
+    aspectRatio: ratio,
+    inlineSize: `min(100%, calc(56cqh * ${ratio}))`,
+  };
+};
 /** `area`'s place over the drawn frame, in percent of `frame`. */
 const placed = (
   area: ShotRect,
@@ -279,14 +456,6 @@ const placed = (
   width: `${String((area.width / frame.width) * 100)}%`,
 });
 
-/** `choice`'s tile under `key`, previewing what it saves. */
-const tileOf = (choice: Choice, key: string): SourceTile => ({
-  area: choice.pick.area,
-  icon: choice.icon,
-  key,
-  name: choice.name,
-});
-
 /** The name of a window titled `title`, which may be empty. */
 const titled = (title: string): string =>
   title === "" ? "Untitled window" : title;
@@ -346,8 +515,10 @@ const browserChoices = (
         ? []
         : [
             {
+              detail: "Browser",
               icon: <GlobeIcon aria-hidden />,
-              name: `Browser: ${titled(browser.title)}`,
+              label: `Browser: ${titled(browser.title)}`,
+              name: titled(browser.title),
               pick: Pick.BrowserWindow(browser.id, area),
             },
           ];
@@ -361,7 +532,9 @@ const windowChoice = (
   title: string,
   app: App | undefined,
 ): Choice => ({
+  detail: app?.name,
   icon: <WindowIcon app={app} />,
-  name: app === undefined ? title : `${app.name}: ${title}`,
+  label: app === undefined ? title : `${app.name}: ${title}`,
+  name: title,
   pick,
 });

package/src/PortalDialogs/SourceTiles.tsx

@@ -29,7 +29,7 @@ type Props = {
 /**
  * A labeled grid of sources to pick, each a tile previewing it from the
  * frozen desk, or showing its icon large without a preview, over its icon
- * and name. The screen cast and screenshot pickers share it.
+ * and name, for the screen cast picker.
  */
 export const SourceTiles = ({
   desk,