Move the copy controls into the UI kit

packages/review/app/src/ReviewCommitsView.tsx

@@ -1,5 +1,6 @@
 import { fontSize, fontWeight, radius } from "@canvas/scale.stylex";
 import { IconButton } from "@canvas/ui/button";
+import { CopyButton } from "@canvas/ui/copy";
 import { textStyles } from "@canvas/ui/text";
 import {
   type ReviewCommitSummary,
@@ -11,7 +12,6 @@ import { useMemo, useState } from "react";
 
 import { canvasQueryKeys } from "./canvas-query";
 import { controlStyles } from "./controls-styles";
-import { CopyButton } from "./copy-text";
 import { DiffCount } from "./diff-count";
 import { FileMark } from "./file-mark";
 import { countLabel } from "./format";

packages/review/app/src/agent-selection.test.tsx

@@ -1,10 +1,10 @@
+import * as clipboard from "@canvas/ui/copy";
 // @vitest-environment jsdom
 import { act } from "react";
 import { createRoot } from "react-dom/client";
 import { expect, it, vi } from "vitest";
 
 import { AgentSelectionProvider, useAgentSelection } from "./agent-selection";
-import * as clipboard from "./copy-text";
 import { ReviewSessionProvider } from "./host/review-session";
 import { testReviewSession } from "./review-session-test-utils";
 

packages/review/app/src/agent-selection.tsx

@@ -1,3 +1,4 @@
+import { CopyIcon } from "@canvas/ui/copy";
 import type { AgentSelection } from "@review/agent-selection";
 import type { AskAgentId } from "@review/ask/thread-state";
 import * as stylex from "@stylexjs/stylex";
@@ -22,7 +23,7 @@ import { askAnchor } from "./ask-anchor";
 import { controlStyles } from "./controls-styles";
 import { copyAgentContext } from "./copy-agent-context";
 import { useReviewSession } from "./host/review-session";
-import { ChatIcon, ChevronDownIcon, CopyIcon } from "./icons";
+import { ChatIcon, ChevronDownIcon } from "./icons";
 import { useNotify } from "./notify";
 import { useReviewDiffFiles } from "./review-diff-files-context";
 import { useOptionalReviewPanelStore } from "./review-panel";

packages/review/app/src/api-canvas.test.tsx

@@ -4,6 +4,7 @@ import { mkdtempSync, rmSync } from "node:fs";
 import { tmpdir } from "node:os";
 import path from "node:path";
 
+import * as clipboard from "@canvas/ui/copy";
 import type {
   JsonObject,
   ReviewApiSummary,
@@ -23,7 +24,6 @@ import { Hono } from "hono";
 import { act } from "react";
 import { afterEach, beforeEach, expect, it, vi } from "vitest";
 
-import * as clipboard from "./copy-text";
 import { mountReviewCanvas as mount } from "./desktop-entry";
 import { createSequenceTourEntry, sequenceView } from "./diagrams";
 import { testReviewBridge } from "./review-session-test-utils";

packages/review/app/src/ask-setup.tsx

@@ -1,3 +1,4 @@
+import { CopyButton, CopyIcon } from "@canvas/ui/copy";
 import type { AgentSelection } from "@review/agent-selection";
 import * as stylex from "@stylexjs/stylex";
 import type { ReactElement } from "react";
@@ -7,9 +8,7 @@ import { AskSelectionQuote } from "./ask-panel-shared";
 import { askPanelStyles } from "./ask-styles";
 import { controlStyles } from "./controls-styles";
 import { copyAgentContext } from "./copy-agent-context";
-import { CopyButton } from "./copy-text";
 import { useReviewSession } from "./host/review-session";
-import { CopyIcon } from "./icons";
 import { useNotify } from "./notify";
 import { fontSize, radius } from "./scale.stylex";
 import { tokens } from "./tokens.stylex";

packages/review/app/src/code-block.tsx

@@ -1,4 +1,5 @@
 import { fontSize, fontWeight, radius } from "@canvas/scale.stylex";
+import { CopyButton } from "@canvas/ui/copy";
 import {
   type ShjLanguage,
   type ShjToken,
@@ -12,7 +13,6 @@ import {
   useState,
 } from "react";
 
-import { CopyButton } from "./copy-text";
 import { DiagramHeader } from "./diagram-header";
 import { drawStyles } from "./draw-styles";
 import { documentMarker } from "./markers.stylex";

packages/review/app/src/connect-card.tsx

@@ -1,5 +1,6 @@
 import { fontSize, radius } from "@canvas/scale.stylex";
 import { Button } from "@canvas/ui/button";
+import { CopyIcon, copyText } from "@canvas/ui/copy";
 import {
   REVIEW_CLI_INSTALL_TARGET_LABELS,
   type ReviewCanvasInstallContent,
@@ -12,7 +13,6 @@ import { useEffect, useRef, useState } from "react";
 
 import { AGENT_LOGOS } from "./agent-logos";
 import { cliInstallReady } from "./cli-install-status";
-import { CopyIcon, copyText } from "./copy-text";
 import { DrawnCheckIcon } from "./icons";
 import { newTabLinkProps } from "./link-props";
 import { OptionMenu } from "./option-menu";
@@ -213,7 +213,11 @@ export function ConnectCard({
               aria-label={`${copied ? "Copied" : "Copy"} ${noun} for ${agent}`}
               onClick={() => copy(text)}
             >
-              {copied ? <DrawnCheckIcon /> : <CopyIcon />}
+              {copied ? (
+                <DrawnCheckIcon />
+              ) : (
+                <CopyIcon xstyle={promptStyles.copyIcon} />
+              )}
               {copied
                 ? "Copied"
                 : `Copy ${mode === "prompt" ? "prompt" : "command"}`}

packages/review/app/src/copy-agent-context.ts

@@ -1,7 +1,7 @@
+import { copyText } from "@canvas/ui/copy";
 import type { AgentSelection } from "@review/agent-selection";
 import { z } from "zod";
 
-import { copyText } from "./copy-text";
 import type { ReviewSession } from "./host/review-session";
 
 /** Copies a selection as the Markdown an agent reads; throws when it can't. */

packages/review/app/src/desktop-entry.tsx

@@ -1,5 +1,6 @@
 import { fontSize } from "@canvas/scale.stylex";
 import { EmptyState } from "@canvas/ui/empty-state";
+import { UiHostProvider } from "@canvas/ui/host";
 import { textStyles } from "@canvas/ui/text";
 import type {
   ReviewCanvasContent,
@@ -21,6 +22,7 @@ import { SettingsPage } from "./settings-page";
 import { shellStyles } from "./shell-styles";
 import { themeStyles } from "./theme-styles";
 import { tokens } from "./tokens.stylex";
+import { useTooltip } from "./use-tooltip";
 
 import "./styles.css";
 
@@ -272,7 +274,9 @@ export function mountReviewCanvas(
     root.render(
       <ReviewContainerProvider container={container}>
         <CanvasUiContext.Provider value={ui}>
-          <ReviewCanvas content={content} findHost={findHost} />
+          <UiHostProvider useTooltip={useTooltip}>
+            <ReviewCanvas content={content} findHost={findHost} />
+          </UiHostProvider>
         </CanvasUiContext.Provider>
       </ReviewContainerProvider>,
     );

packages/review/app/src/host/review-session.tsx

@@ -1,6 +1,8 @@
 import type { NormalizedSoftwareModel } from "@canvas/software-map/model";
 import type { PinnedSoftwareMapData } from "@canvas/software-map/SoftwareMap";
 import { createReviewAppSessionId } from "@canvas/tab-dwell-telemetry";
+import { UiHostProvider } from "@canvas/ui/host";
+import { useTooltip } from "@canvas/use-tooltip";
 import type {
   ReviewCanvasBridge,
   ReviewCanvasDiagnostic,
@@ -98,7 +100,7 @@ export function ReviewSessionProvider({
 }) {
   return (
     <ReviewSessionContext.Provider value={session}>
-      {children}
+      <UiHostProvider useTooltip={useTooltip}>{children}</UiHostProvider>
     </ReviewSessionContext.Provider>
   );
 }

packages/review/app/src/icons.tsx

@@ -219,20 +219,6 @@ export function ShareIcon({ xstyle }: IconProps = {}): ReactElement {
   );
 }
 
-export function CopyIcon({ xstyle }: IconProps = {}): ReactElement {
-  return (
-    <svg
-      aria-hidden="true"
-      {...stylex.props(styles.icon, xstyle)}
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <rect x="9" y="9" width="11" height="11" rx="2" />
-      <path d="M5 15V6a2 2 0 0 1 2-2h9" />
-    </svg>
-  );
-}
-
 export function CodeIcon({ xstyle }: IconProps = {}): ReactElement {
   return (
     <svg
@@ -246,18 +232,7 @@ export function CodeIcon({ xstyle }: IconProps = {}): ReactElement {
   );
 }
 
-export function CheckIcon({ xstyle }: IconProps = {}): ReactElement {
-  return (
-    <svg
-      aria-hidden="true"
-      {...stylex.props(styles.icon, xstyle)}
-      focusable="false"
-      viewBox="0 0 24 24"
-    >
-      <path d="M5 12.5l4.5 4.5L19 7" />
-    </svg>
-  );
-}
+export { CheckIcon } from "@canvas/ui/icons";
 
 /** A check that draws itself in when it mounts, for a just-finished action. */
 export function DrawnCheckIcon(): ReactElement {

packages/review/app/src/onboarding/draw-flow.tsx

@@ -1,5 +1,5 @@
-import { copyText } from "@canvas/copy-text";
 import { useNotify } from "@canvas/notify";
+import { copyText } from "@canvas/ui/copy";
 import type { ReviewCanvasSetupActions } from "@dev.fast/review-protocol";
 import { useCallback, useEffect, useState } from "react";
 

packages/review/app/src/onboarding/install-step.tsx

@@ -1,11 +1,11 @@
 import { cliInstallReady } from "@canvas/cli-install-status";
-import { copyText } from "@canvas/copy-text";
 import { DrawnCheckIcon } from "@canvas/icons";
 import { installRowMarker } from "@canvas/markers.stylex";
 import { fontSize, fontWeight, motion, radius } from "@canvas/scale.stylex";
 import { tokens } from "@canvas/tokens.stylex";
 import { Button } from "@canvas/ui/button";
 import { Checkbox } from "@canvas/ui/checkbox";
+import { copyText } from "@canvas/ui/copy";
 import type {
   ReviewCanvasSetupActions,
   ReviewCliInstallStatus,

packages/review/app/src/prompt-card.tsx

@@ -1,7 +1,7 @@
+import { CopyIcon, copyText } from "@canvas/ui/copy";
 import * as stylex from "@stylexjs/stylex";
 import { useEffect, useRef, useState } from "react";
 
-import { CopyIcon, copyText } from "./copy-text";
 import { promptStyles } from "./prompt-styles";
 import { SegmentedControl } from "./ui/segmented";
 
@@ -94,7 +94,7 @@ export function PromptCard() {
           aria-label={copied ? "Prompt copied" : "Copy prompt"}
           onClick={copyPrompt}
         >
-          <CopyIcon />
+          <CopyIcon xstyle={promptStyles.copyIcon} />
           {copied ? "Copied" : "Copy prompt"}
         </button>
       </div>

packages/review/app/src/prompt-styles.ts

@@ -48,6 +48,11 @@ export const promptStyles = stylex.create({
     outline: { default: null, ":focus-visible": `1px solid ${tokens.accent}` },
     outlineOffset: { default: null, ":focus-visible": "2px" },
   },
+  copyIcon: {
+    width: "12px",
+    height: "12px",
+    strokeWidth: "2.4px",
+  },
   error: {
     margin: "10px 0 0",
     color: tokens.changeRemoved,

packages/review/app/src/remote-hosts-section.tsx

@@ -1,5 +1,6 @@
 import { Button } from "@canvas/ui/button";
 import { Checkbox } from "@canvas/ui/checkbox";
+import { CopyableText } from "@canvas/ui/copy";
 import { TextField } from "@canvas/ui/text-field";
 import {
   REVIEW_CLI_INSTALL_TARGET_LABELS,
@@ -10,7 +11,6 @@ import {
 import * as stylex from "@stylexjs/stylex";
 import { useEffect, useRef, useState } from "react";
 
-import { CopyableText } from "./copy-text";
 import {
   ACTION_WORDS,
   useHostAction,

packages/review/app/src/review-branch-range.tsx

@@ -1,8 +1,8 @@
 import { fontSize, radius } from "@canvas/scale.stylex";
+import { copyText } from "@canvas/ui/copy";
 import * as stylex from "@stylexjs/stylex";
 import { type ReactElement, useEffect, useRef, useState } from "react";
 
-import { copyText } from "./copy-text";
 import { tokens } from "./tokens.stylex";
 import { useTooltip } from "./use-tooltip";
 

packages/review/app/src/review-home-view.tsx

@@ -1,3 +1,4 @@
+import { CopyableText, copyText } from "@canvas/ui/copy";
 import {
   REVIEW_DISCORD_URL,
   type ReviewApiSummary,
@@ -21,7 +22,6 @@ import {
 } from "react";
 
 import { useHostActionButton } from "./connection-chip";
-import { CopyableText, copyText } from "./copy-text";
 import { countLabel, formatRelativeTime } from "./format";
 import { homeStyles } from "./home-styles";
 import { CanvasUiContext, useCanvasMenu } from "./host/canvas-ui";

packages/review/app/src/share-control.tsx

@@ -1,5 +1,6 @@
 import { layer } from "@canvas/scale.stylex";
 import { Button, IconButton } from "@canvas/ui/button";
+import { copyText } from "@canvas/ui/copy";
 import { surfaceStyles } from "@canvas/ui/surface";
 import { TextField } from "@canvas/ui/text-field";
 import {
@@ -17,7 +18,6 @@ import { createContext, useContext, useEffect, useRef, useState } from "react";
 
 import { canvasQueryKeys } from "./canvas-query";
 import { controlStyles } from "./controls-styles";
-import { copyText } from "./copy-text";
 import { useOptionalReviewSession } from "./host/review-session";
 import { ShareIcon } from "./icons";
 import { topbarActionsMarker } from "./markers.stylex";