@domicile-desktop/component-library 0.0.0-alpha-6bfeb689abcc → 0.0.0-alpha-dccbffbc7543

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-6bfeb689abcc",
-    "@domicile-desktop/system-apps": "0.0.0-alpha-6bfeb689abcc",
+    "@domicile-desktop/sdk": "0.0.0-alpha-dccbffbc7543",
+    "@domicile-desktop/system-apps": "0.0.0-alpha-dccbffbc7543",
     "@phosphor-icons/react": "^2.1.10"
   },
   "description": "React components and the Panda CSS design system that Domicile's shells are built from.",
@@ -106,5 +106,5 @@
     "test:unit": "bun test"
   },
   "type": "module",
-  "version": "0.0.0-alpha-6bfeb689abcc"
+  "version": "0.0.0-alpha-dccbffbc7543"
 }

package/src/PortalDialogs/ScreenshotDialog.tsx

@@ -9,7 +9,7 @@ import { AppWindowIcon } from "@phosphor-icons/react/dist/ssr/AppWindow";
 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 { useState } from "react";
+import { useEffect, useState } from "react";
 import { css } from "../../styled-system/css";
 import { flex } from "../../styled-system/patterns";
 import { Button } from "../Button/Button";
@@ -57,7 +57,8 @@ type Choice = { icon: ReactNode; name: string; pick: Pick };
  * 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.
+ * last frame. Ctrl+C copies the pick to the clipboard instead of saving it.
+ * Dismissing it cancels.
  */
 export const ScreenshotDialog = ({
   answer,
@@ -101,6 +102,18 @@ export const ScreenshotDialog = ({
   if (pick === undefined) {
     throw new Error(`no screenshot choice ${String(picked)}`);
   }
+  useEffect(() => {
+    const copy = (event: KeyboardEvent) => {
+      if (isCopy(event)) {
+        event.preventDefault();
+        answer(answerOf(pick, true));
+      }
+    };
+    document.addEventListener("keydown", copy);
+    return () => {
+      document.removeEventListener("keydown", copy);
+    };
+  }, [answer, pick]);
   const button = (choice: Choice, index: number) => (
     <Button
       aria-pressed={index === picked}
@@ -137,7 +150,7 @@ export const ScreenshotDialog = ({
           </Button>
           <Button
             onClick={() => {
-              answer(answerOf(pick));
+              answer(answerOf(pick, false));
             }}
           >
             Save
@@ -277,16 +290,24 @@ const placed = (
 const titled = (title: string): string =>
   title === "" ? "Untitled window" : title;
 
-/** The answer that saves `pick`. */
-const answerOf = (pick: Pick): PortalAnswer => {
+/** The answer that saves `pick`, and copies it too when `copy` is set. */
+const answerOf = (pick: Pick, copy: boolean): PortalAnswer => {
   switch (pick.kind) {
     case PickKind.Area:
-      return Answer.Screenshot(pick.area);
+      return Answer.Screenshot(pick.area, copy);
     case PickKind.Window:
-      return Answer.ScreenshotWindow(pick.id);
+      return Answer.ScreenshotWindow(pick.id, copy);
   }
 };
 
+/** Whether `event` is Ctrl+C, with no other modifier. */
+const isCopy = (event: KeyboardEvent): boolean =>
+  event.ctrlKey &&
+  !event.altKey &&
+  !event.metaKey &&
+  !event.shiftKey &&
+  event.key.toLowerCase() === "c";
+
 /**
  * What saving window `id` keeps: its frame on the desk while the shell shows
  * it there, else its own last frame.