From 7a22a83713431c1dacb4f8fd17af8119829eb8a1 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 9 Feb 2024 12:40:55 -0500
Subject: [PATCH 01/54] working feedback screenshot package with preact

---
 packages/feedback/src/index.ts               |  2 ++
 packages/feedback/src/integration.ts         |  8 ++++++++
 packages/feedback/src/types/index.ts         |  2 ++
 packages/feedback/src/widget/Form.ts         | 13 ++++++++++++-
 packages/feedback/src/widget/createWidget.ts |  2 ++
 5 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/feedback/src/index.ts b/packages/feedback/src/index.ts
index 8fcba29c5d0f..76e9478c1ee1 100644
--- a/packages/feedback/src/index.ts
+++ b/packages/feedback/src/index.ts
@@ -4,3 +4,5 @@ export {
   Feedback,
   feedbackIntegration,
 } from './integration';
+
+console.log('Feedback 2');
diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts
index 501f844abeaa..f2041ea57428 100644
--- a/packages/feedback/src/integration.ts
+++ b/packages/feedback/src/integration.ts
@@ -111,6 +111,8 @@ export class Feedback implements Integration {
     onFormOpen,
     onSubmitError,
     onSubmitSuccess,
+
+    // getScreenshotIntegration,
   }: OptionalFeedbackConfiguration = {}) {
     // eslint-disable-next-line deprecation/deprecation
     this.name = Feedback.id;
@@ -158,6 +160,8 @@ export class Feedback implements Integration {
       onFormOpen,
       onSubmitError,
       onSubmitSuccess,
+
+      // getScreenshotIntegration,
     };
   }
 
@@ -182,6 +186,7 @@ export class Feedback implements Integration {
       this._createWidget(this.options);
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
+      console.log(err);
     }
   }
 
@@ -241,6 +246,7 @@ export class Feedback implements Integration {
       });
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
+      console.log(err);
       return null;
     }
   }
@@ -255,6 +261,7 @@ export class Feedback implements Integration {
       return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
+      console.log(err);
       return null;
     }
   }
@@ -281,6 +288,7 @@ export class Feedback implements Integration {
         return true;
       }
     } catch (err) {
+      console.log(err);
       DEBUG_BUILD && logger.error(err);
     }
 
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index c2642b54d09c..f666f2aaa8ef 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -80,6 +80,8 @@ export interface FeedbackGeneralConfiguration {
     email: string;
     name: string;
   };
+
+  // getScreenshotIntegration: () => Integration;
 }
 
 /**
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 9b90cf547477..074b539ad04b 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -1,6 +1,7 @@
 import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
 import { SubmitButton } from './SubmitButton';
 import { createElement } from './util/createElement';
+import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
 
 export interface FormComponentProps
   extends Pick<
@@ -139,7 +140,7 @@ export function Form({
     name: 'message',
     required: true,
     className: 'form__input form__input--textarea',
-    placeholder: messagePlaceholder,
+    placeholder: 'message placeholder',
   });
 
   const cancelEl = createElement(
@@ -155,6 +156,14 @@ export function Form({
     cancelButtonLabel,
   );
 
+  const screenshot = createElement('div', { className: 'btn-group' });
+
+  // @ts-expect-error testing
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
+    el: screenshot,
+    props: null,
+  });
+
   const formEl = createElement(
     'form',
     {
@@ -219,6 +228,8 @@ export function Form({
         ],
       ),
 
+      screenshot,
+
       createElement(
         'div',
         {
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
index b5e414803121..14558f35bbcc 100644
--- a/packages/feedback/src/widget/createWidget.ts
+++ b/packages/feedback/src/widget/createWidget.ts
@@ -76,6 +76,7 @@ export function createWidget({
     } catch (err) {
       // TODO: error handling
       logger.error(err);
+      console.log(err);
     }
   }
 
@@ -211,6 +212,7 @@ export function createWidget({
     } catch (err) {
       // TODO: Error handling?
       logger.error(err);
+      console.log(err);
     }
   }
 

From 4877b4f54e417f88c704f1681745d0c6fcbde5af Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 9 Feb 2024 12:41:13 -0500
Subject: [PATCH 02/54] working feedback screenshot package with preact

---
 .craft.yml                                    |  4 ++
 .github/workflows/build.yml                   |  1 +
 package.json                                  |  1 +
 packages/browser/src/index.ts                 |  2 +
 packages/feedback-screenshot/.eslintignore    |  2 +
 packages/feedback-screenshot/.eslintrc.js     | 25 +++++++
 packages/feedback-screenshot/.gitignore       |  4 ++
 packages/feedback-screenshot/LICENSE          | 14 ++++
 packages/feedback-screenshot/README.md        | 25 +++++++
 packages/feedback-screenshot/jest.config.js   |  6 ++
 packages/feedback-screenshot/package.json     | 65 +++++++++++++++++
 .../rollup.bundle.config.mjs                  | 25 +++++++
 .../feedback-screenshot/rollup.npm.config.mjs | 27 +++++++
 .../scripts/craft-pre-release.sh              |  8 +++
 packages/feedback-screenshot/src/index.ts     |  8 +++
 .../feedback-screenshot/src/screenshot.ts     | 52 ++++++++++++++
 .../src/screenshotWidget.tsx                  | 12 ++++
 packages/feedback-screenshot/tsconfig.json    | 17 +++++
 .../feedback-screenshot/tsconfig.test.json    | 15 ++++
 .../feedback-screenshot/tsconfig.types.json   | 10 +++
 yarn.lock                                     | 70 ++++++++++++++++++-
 21 files changed, 392 insertions(+), 1 deletion(-)
 create mode 100644 packages/feedback-screenshot/.eslintignore
 create mode 100644 packages/feedback-screenshot/.eslintrc.js
 create mode 100644 packages/feedback-screenshot/.gitignore
 create mode 100644 packages/feedback-screenshot/LICENSE
 create mode 100644 packages/feedback-screenshot/README.md
 create mode 100644 packages/feedback-screenshot/jest.config.js
 create mode 100644 packages/feedback-screenshot/package.json
 create mode 100644 packages/feedback-screenshot/rollup.bundle.config.mjs
 create mode 100644 packages/feedback-screenshot/rollup.npm.config.mjs
 create mode 100644 packages/feedback-screenshot/scripts/craft-pre-release.sh
 create mode 100644 packages/feedback-screenshot/src/index.ts
 create mode 100644 packages/feedback-screenshot/src/screenshot.ts
 create mode 100644 packages/feedback-screenshot/src/screenshotWidget.tsx
 create mode 100644 packages/feedback-screenshot/tsconfig.json
 create mode 100644 packages/feedback-screenshot/tsconfig.test.json
 create mode 100644 packages/feedback-screenshot/tsconfig.types.json

diff --git a/.craft.yml b/.craft.yml
index f795d317b05e..4cdb6e631364 100644
--- a/.craft.yml
+++ b/.craft.yml
@@ -36,6 +36,10 @@ targets:
   - name: npm
     id: '@sentry-internal/replay-canvas'
     includeNames: /^sentry-internal-replay-canvas-\d.*\.tgz$/
+  ## 1.9 FeedbackScreenshot package (browser only)
+  - name: npm
+    id: '@sentry-internal/feedback-screenshot'
+    includeNames: /^sentry-internal-feedback-screenshot-\d.*\.tgz$/
 
   ## 2. Browser & Node SDKs
   - name: npm
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index ccda1b605e7c..c93c2cafa859 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -108,6 +108,7 @@ jobs:
               - 'packages/replay/**'
               - 'packages/replay-canvas/**'
               - 'packages/feedback/**'
+              - 'packages/feedback-screenshot/**'
               - 'packages/wasm/**'
             browser_integration:
               - *shared
diff --git a/package.json b/package.json
index 74fbfe2a650f..92a23fe1f217 100644
--- a/package.json
+++ b/package.json
@@ -56,6 +56,7 @@
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
     "packages/feedback",
+    "packages/feedback-screenshot",
     "packages/gatsby",
     "packages/integrations",
     "packages/integration-shims",
diff --git a/packages/browser/src/index.ts b/packages/browser/src/index.ts
index 9fa4d83e3984..13c2ed777409 100644
--- a/packages/browser/src/index.ts
+++ b/packages/browser/src/index.ts
@@ -90,3 +90,5 @@ export {
   BrowserProfilingIntegration,
   browserProfilingIntegration,
 } from './profiling/integration';
+
+console.log('browser');
diff --git a/packages/feedback-screenshot/.eslintignore b/packages/feedback-screenshot/.eslintignore
new file mode 100644
index 000000000000..b38db2f296ff
--- /dev/null
+++ b/packages/feedback-screenshot/.eslintignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
diff --git a/packages/feedback-screenshot/.eslintrc.js b/packages/feedback-screenshot/.eslintrc.js
new file mode 100644
index 000000000000..eaa6b88347ca
--- /dev/null
+++ b/packages/feedback-screenshot/.eslintrc.js
@@ -0,0 +1,25 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts'],
+      rules: {
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};
diff --git a/packages/feedback-screenshot/.gitignore b/packages/feedback-screenshot/.gitignore
new file mode 100644
index 000000000000..363d3467c6fa
--- /dev/null
+++ b/packages/feedback-screenshot/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+/*.tgz
+.eslintcache
+build
diff --git a/packages/feedback-screenshot/LICENSE b/packages/feedback-screenshot/LICENSE
new file mode 100644
index 000000000000..ea5e82344f87
--- /dev/null
+++ b/packages/feedback-screenshot/LICENSE
@@ -0,0 +1,14 @@
+Copyright (c) 2024 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/feedback-screenshot/README.md b/packages/feedback-screenshot/README.md
new file mode 100644
index 000000000000..04caefe7ac31
--- /dev/null
+++ b/packages/feedback-screenshot/README.md
@@ -0,0 +1,25 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration for Feedback with Screenshot
+
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued
+at any time. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have
+any feedback/concerns.
+
+To view Feedback in Sentry, your
+[Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
+## Installation
+
+Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for
+installation instructions.
+
+## Configuration
+
+The Feedback integration is highly customizable, please read the
+[official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the
+most up-to-date configuration options.
diff --git a/packages/feedback-screenshot/jest.config.js b/packages/feedback-screenshot/jest.config.js
new file mode 100644
index 000000000000..cd02790794a7
--- /dev/null
+++ b/packages/feedback-screenshot/jest.config.js
@@ -0,0 +1,6 @@
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};
diff --git a/packages/feedback-screenshot/package.json b/packages/feedback-screenshot/package.json
new file mode 100644
index 000000000000..d36512257322
--- /dev/null
+++ b/packages/feedback-screenshot/package.json
@@ -0,0 +1,65 @@
+{
+  "name": "@sentry-internal/feedback-screenshot",
+  "version": "7.100.0",
+  "description": "Sentry SDK integration for user feedback screenshots",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types",
+    "types-ts3.8"
+  ],
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/core": "7.100.0",
+    "@sentry/types": "7.100.0",
+    "@sentry/utils": "7.100.0",
+    "preact": "^10.19.4",
+    "preact-compat": "^3.19.0",
+    "@rollup/plugin-alias": "5.1.0"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types build:bundle",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:bundle": "rollup -c rollup.bundle.config.mjs",
+    "build:dev": "run-p build:transpile build:types",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
+    "build:transpile:watch": "yarn build:transpile --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build sentry-feedback-*.tgz",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": false
+}
diff --git a/packages/feedback-screenshot/rollup.bundle.config.mjs b/packages/feedback-screenshot/rollup.bundle.config.mjs
new file mode 100644
index 000000000000..496308b212e2
--- /dev/null
+++ b/packages/feedback-screenshot/rollup.bundle.config.mjs
@@ -0,0 +1,25 @@
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
+import alias from '@rollup/plugin-alias';
+
+const baseBundleConfig = makeBaseBundleConfig({
+  bundleType: 'addon',
+  entrypoints: ['src/index.ts'],
+  jsVersion: 'es6',
+  licenseTitle: '@sentry-internal/feedback-screenshot',
+  outputFileBase: () => 'bundles/feedback-screenshot',
+  plugins: [
+    alias({
+      entries: [
+        { find: 'react', replacement: 'preact/compat' },
+        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+        { find: 'react-dom', replacement: 'preact/compat' },
+        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+      ]
+    })
+  ],
+
+});
+
+const builds = makeBundleConfigVariants(baseBundleConfig);
+
+export default builds;
diff --git a/packages/feedback-screenshot/rollup.npm.config.mjs b/packages/feedback-screenshot/rollup.npm.config.mjs
new file mode 100644
index 000000000000..b9a01d8abc53
--- /dev/null
+++ b/packages/feedback-screenshot/rollup.npm.config.mjs
@@ -0,0 +1,27 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
+import alias from '@rollup/plugin-alias';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn
+        exports: 'named',
+        // set preserveModules to false because for Replay we actually want
+        // to bundle everything into one file.
+        preserveModules: false,
+      },
+    },
+    plugins: ['@babel/transform-react-jsx', { pragma: 'h' },
+      alias({
+        entries: [
+          { find: 'react', replacement: 'preact/compat' },
+          { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+          { find: 'react-dom', replacement: 'preact/compat' },
+          { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+        ]
+      })
+    ],
+  }),
+);
diff --git a/packages/feedback-screenshot/scripts/craft-pre-release.sh b/packages/feedback-screenshot/scripts/craft-pre-release.sh
new file mode 100644
index 000000000000..bae7c3246cdb
--- /dev/null
+++ b/packages/feedback-screenshot/scripts/craft-pre-release.sh
@@ -0,0 +1,8 @@
+#!/bin/bash
+set -eux
+OLD_VERSION="${1}"
+NEW_VERSION="${2}"
+
+# Do not tag and commit changes made by "npm version"
+export npm_config_git_tag_version=false
+npm version "${NEW_VERSION}"
diff --git a/packages/feedback-screenshot/src/index.ts b/packages/feedback-screenshot/src/index.ts
new file mode 100644
index 000000000000..1974e8232df1
--- /dev/null
+++ b/packages/feedback-screenshot/src/index.ts
@@ -0,0 +1,8 @@
+export {
+  // eslint-disable-next-line deprecation/deprecation
+  FeedbackScreenshot,
+  feedbackScreenshotIntegration,
+} from './screenshot';
+export type { FeedbackScreenshotIntegrationOptions } from './screenshot';
+
+console.log('screenshot 6');
diff --git a/packages/feedback-screenshot/src/screenshot.ts b/packages/feedback-screenshot/src/screenshot.ts
new file mode 100644
index 000000000000..6e6873937ba2
--- /dev/null
+++ b/packages/feedback-screenshot/src/screenshot.ts
@@ -0,0 +1,52 @@
+import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
+import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
+import { Hello } from './screenshotWidget';
+import { GLOBAL_OBJ } from '@sentry/utils';
+import { h, render } from 'preact';
+
+interface FeedbackScreenshotOptions {
+  el: Element;
+  props: string;
+}
+
+export interface FeedbackScreenshotIntegrationOptions {
+  el: Element;
+  props: string;
+}
+
+const INTEGRATION_NAME = 'FeedbackScreenshot';
+const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
+/** Exported only for type safe tests. */
+export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreenshotOptions> = {}) => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    getOptions(): FeedbackScreenshotIntegrationOptions {
+      return { el: options.el || WINDOW.document.createElement('div'), props: options.props || 'prop' };
+    },
+    renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
+      return render(h(Hello, null), options.el);
+    },
+  };
+}) satisfies IntegrationFn;
+
+/**
+ * Add this in addition to `replayIntegration()` to enable canvas recording.
+ */
+export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration);
+
+/**
+ * @deprecated Use `feedbackScreenshotIntegration()` instead
+ */
+// eslint-disable-next-line deprecation/deprecation
+export const FeedbackScreenshot = convertIntegrationFnToClass(
+  INTEGRATION_NAME,
+  feedbackScreenshotIntegration,
+) as IntegrationClass<
+  Integration & {
+    getOptions: () => FeedbackScreenshotIntegrationOptions;
+    renderScreenshotWidget: () => void;
+  }
+>;
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
new file mode 100644
index 000000000000..762da67c12e9
--- /dev/null
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -0,0 +1,12 @@
+import { h, render } from 'preact';
+
+interface FeedbackScreenshotOptions {
+  el: Element;
+  props: string;
+}
+
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function Hello(options: FeedbackScreenshotOptions) {
+  console.log('screenshot widget');
+  return h('div', null, 'hello');
+}
diff --git a/packages/feedback-screenshot/tsconfig.json b/packages/feedback-screenshot/tsconfig.json
new file mode 100644
index 000000000000..b71a402a0249
--- /dev/null
+++ b/packages/feedback-screenshot/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+
+   /* Preact Config */
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"skipLibCheck": true,
+		"baseUrl": "./",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		}
+  },
+  "include": ["src/**/*.ts"]
+}
diff --git a/packages/feedback-screenshot/tsconfig.test.json b/packages/feedback-screenshot/tsconfig.test.json
new file mode 100644
index 000000000000..ad87caa06c48
--- /dev/null
+++ b/packages/feedback-screenshot/tsconfig.test.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["test/**/*.ts", "jest.config.ts", "jest.setup.ts"],
+
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "noImplicitAny": true,
+    "noImplicitThis": false,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false
+  }
+}
diff --git a/packages/feedback-screenshot/tsconfig.types.json b/packages/feedback-screenshot/tsconfig.types.json
new file mode 100644
index 000000000000..374fd9bc9364
--- /dev/null
+++ b/packages/feedback-screenshot/tsconfig.types.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/npm/types"
+  }
+}
diff --git a/yarn.lock b/yarn.lock
index 9f5971f8838d..f90f4d908c76 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5293,6 +5293,13 @@
   dependencies:
     web-streams-polyfill "^3.1.1"
 
+"@rollup/plugin-alias@5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz#99a94accc4ff9a3483be5baeedd5d7da3b597e93"
+  integrity sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==
+  dependencies:
+    slash "^4.0.0"
+
 "@rollup/plugin-commonjs@24.0.0":
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c"
@@ -5542,6 +5549,16 @@
     semver "7.3.2"
     semver-intersect "1.4.0"
 
+"@sentry-internal/feedback-screenshot@file:packages/feedback-screenshot":
+  version "7.100.0"
+  dependencies:
+    "@rollup/plugin-alias" "5.1.0"
+    "@sentry/core" "7.100.0"
+    "@sentry/types" "7.100.0"
+    "@sentry/utils" "7.100.0"
+    preact "^10.19.4"
+    preact-compat "^3.19.0"
+
 "@sentry-internal/rrdom@2.11.0":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/rrdom/-/rrdom-2.11.0.tgz#f7c8f54705ad84ece0e97e53f12e87c687749b32"
@@ -18176,6 +18193,13 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
+immutability-helper@^2.7.1:
+  version "2.9.1"
+  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.9.1.tgz#71c423ba387e67b6c6ceba0650572f2a2a6727df"
+  integrity sha512-r/RmRG8xO06s/k+PIaif2r5rGc3j4Yhc01jSBfwPCXDLYZwp/yxralI37Df1mwmuzcCsen/E/ITKcTEvc1PQmQ==
+  dependencies:
+    invariant "^2.2.0"
+
 immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
@@ -18484,7 +18508,7 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
-invariant@^2.2.1, invariant@^2.2.2:
+invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -26239,6 +26263,40 @@ postgres-range@^1.1.1:
   resolved "https://registry.yarnpkg.com/postgres-range/-/postgres-range-1.1.3.tgz#9ccd7b01ca2789eb3c2e0888b3184225fa859f76"
   integrity sha512-VdlZoocy5lCP0c/t66xAfclglEapXPCIVhqqJRncYpvbCgImF0w67aPKfbqUMr72tO2k5q0TdTZwCLjPTI6C9g==
 
+preact-compat@^3.19.0:
+  version "3.19.0"
+  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.19.0.tgz#a71457b6a3bf051690a4411603bc2085aa061c2f"
+  integrity sha512-f83A4hIhH8Uzhb9GbIcGk8SM19ffWlwP9mDaYwQdRnMdekZwcCA7eIAbeV4EMQaV9C0Yuy8iKgBAtyTKPZQt/Q==
+  dependencies:
+    immutability-helper "^2.7.1"
+    preact-context "^1.1.3"
+    preact-render-to-string "^3.8.2"
+    preact-transition-group "^1.1.1"
+    prop-types "^15.6.2"
+    standalone-react-addons-pure-render-mixin "^0.1.1"
+
+preact-context@^1.1.3:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/preact-context/-/preact-context-1.1.4.tgz#866ebd35bef5788f73fc453f06f01b03ddf8f4ff"
+  integrity sha512-gcCjPJ65R0MiW9hDu8W/3WAmyTElIvwLyEO6oLQiM6/TbLKLxCpBCWV8GJjx52TTEyUr60HLDcmoCXZlslelzQ==
+
+preact-render-to-string@^3.8.2:
+  version "3.8.2"
+  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-3.8.2.tgz#bd72964d705a57da3a9e72098acaa073dd3ceff9"
+  integrity sha512-przuZPajiurStGgxMoJP0EJeC4xj5CgHv+M7GfF3YxAdhGgEWAkhOSE0xympAFN20uMayntBZpttIZqqLl77fw==
+  dependencies:
+    pretty-format "^3.5.1"
+
+preact-transition-group@^1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/preact-transition-group/-/preact-transition-group-1.1.1.tgz#f0a49327ea515ece34ea2be864c4a7d29e5d6e10"
+  integrity sha512-v89XLodCvylf5lMrhI+LqIhDsAjWfiDKV4keAU+L5yDtxmqn8uvjZXn+haKMEG0x0PZz81own19SuNJD5NlOFQ==
+
+preact@^10.19.4:
+  version "10.19.4"
+  resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.4.tgz#735d331d5b1bd2182cc36f2ba481fd6f0da3fe3b"
+  integrity sha512-dwaX5jAh0Ga8uENBX1hSOujmKWgx9RtL80KaKUFLc6jb4vCEAc3EeZ0rnQO/FO4VgjfPMfoLFWnNG8bHuZ9VLw==
+
 prebuild-install@^7.1.1:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@@ -26356,6 +26414,11 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
+pretty-format@^3.5.1:
+  version "3.8.0"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
+  integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==
+
 pretty-ms@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.1.tgz#7d903eaab281f7d8e03c66f867e239dc32fb73e8"
@@ -29464,6 +29527,11 @@ stagehand@^1.0.0:
   dependencies:
     debug "^4.1.0"
 
+standalone-react-addons-pure-render-mixin@^0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551"
+  integrity sha512-HFkwqpJmvz4vxHyzdeUcjtsp8Am+NauLXdU2/YXT1/InPbszaRo1cLPAy/58H7oOPNNjteqHcv04JEw+d9C+Xw==
+
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"

From ef7d7e83865acc2930c8e48ec56ab2983e95ad16 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 9 Feb 2024 17:02:49 -0500
Subject: [PATCH 03/54] update rollup

---
 dev-packages/rollup-utils/bundleHelpers.mjs         |  6 ++++--
 dev-packages/rollup-utils/npmHelpers.mjs            |  3 +++
 dev-packages/rollup-utils/plugins/bundlePlugins.mjs | 13 +++++++++++++
 package.json                                        |  1 +
 packages/feedback-screenshot/package.json           |  3 +--
 .../feedback-screenshot/rollup.bundle.config.mjs    | 12 ------------
 packages/feedback-screenshot/rollup.npm.config.mjs  | 11 -----------
 packages/feedback-screenshot/src/index.ts           |  2 +-
 packages/feedback-screenshot/src/screenshot.ts      |  6 +++---
 .../feedback-screenshot/src/screenshotWidget.tsx    | 11 +++--------
 packages/feedback/src/widget/Form.ts                |  2 +-
 yarn.lock                                           | 12 +-----------
 12 files changed, 31 insertions(+), 51 deletions(-)

diff --git a/dev-packages/rollup-utils/bundleHelpers.mjs b/dev-packages/rollup-utils/bundleHelpers.mjs
index 66bded3b62de..b9cd0f415ce2 100644
--- a/dev-packages/rollup-utils/bundleHelpers.mjs
+++ b/dev-packages/rollup-utils/bundleHelpers.mjs
@@ -8,6 +8,7 @@ import deepMerge from 'deepmerge';
 
 import {
   getEs5Polyfills,
+  makeAliasPlugin,
   makeBrowserBuildPlugin,
   makeCleanupPlugin,
   makeCommonJSPlugin,
@@ -29,6 +30,7 @@ export function makeBaseBundleConfig(options) {
 
   const isEs5 = jsVersion.toLowerCase() === 'es5';
 
+  const aliasPlugin = makeAliasPlugin();
   const nodeResolvePlugin = makeNodeResolvePlugin();
   const sucrasePlugin = makeSucrasePlugin();
   const cleanupPlugin = makeCleanupPlugin();
@@ -124,8 +126,8 @@ export function makeBaseBundleConfig(options) {
       esModule: false,
     },
     plugins: isEs5
-      ? [tsPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin]
-      : [sucrasePlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin],
+      ? [tsPlugin, aliasPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin]
+      : [sucrasePlugin, aliasPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin],
     treeshake: 'smallest',
   };
 
diff --git a/dev-packages/rollup-utils/npmHelpers.mjs b/dev-packages/rollup-utils/npmHelpers.mjs
index 6085a502200f..8b9647065f0b 100644
--- a/dev-packages/rollup-utils/npmHelpers.mjs
+++ b/dev-packages/rollup-utils/npmHelpers.mjs
@@ -9,6 +9,7 @@ import * as path from 'path';
 import deepMerge from 'deepmerge';
 
 import {
+  makeAliasPlugin,
   makeCleanupPlugin,
   makeDebugBuildStatementReplacePlugin,
   makeExtractPolyfillsPlugin,
@@ -30,6 +31,7 @@ export function makeBaseNPMConfig(options = {}) {
     addPolyfills = true,
   } = options;
 
+  const aliasPlugin = makeAliasPlugin();
   const nodeResolvePlugin = makeNodeResolvePlugin();
   const sucrasePlugin = makeSucrasePlugin({ disableESTransforms: !addPolyfills });
   const debugBuildStatementReplacePlugin = makeDebugBuildStatementReplacePlugin();
@@ -91,6 +93,7 @@ export function makeBaseNPMConfig(options = {}) {
     },
 
     plugins: [
+      aliasPlugin,
       nodeResolvePlugin,
       setSdkSourcePlugin,
       sucrasePlugin,
diff --git a/dev-packages/rollup-utils/plugins/bundlePlugins.mjs b/dev-packages/rollup-utils/plugins/bundlePlugins.mjs
index 1df1e2ac917d..a9c292df363b 100644
--- a/dev-packages/rollup-utils/plugins/bundlePlugins.mjs
+++ b/dev-packages/rollup-utils/plugins/bundlePlugins.mjs
@@ -1,4 +1,5 @@
 /**
+ * Alias plugin docs: https://github.com/rollup/plugins/tree/master/packages/alias
  * CommonJS plugin docs: https://github.com/rollup/plugins/tree/master/packages/commonjs
  * License plugin docs: https://github.com/mjeanroy/rollup-plugin-license
  * Replace plugin docs: https://github.com/rollup/plugins/tree/master/packages/replace
@@ -13,6 +14,7 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 
+import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
@@ -189,3 +191,14 @@ export function makeNodeResolvePlugin() {
 }
 
 export { commonjs as makeCommonJSPlugin };
+
+export function makeAliasPlugin() {
+  return alias({
+    entries: [
+      { find: 'react', replacement: 'preact/compat' },
+      { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
+      { find: 'react-dom', replacement: 'preact/compat' },
+      { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
+    ]
+  });
+}
diff --git a/package.json b/package.json
index 92a23fe1f217..0079352476fd 100644
--- a/package.json
+++ b/package.json
@@ -90,6 +90,7 @@
   ],
   "devDependencies": {
     "@biomejs/biome": "^1.4.0",
+    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
diff --git a/packages/feedback-screenshot/package.json b/packages/feedback-screenshot/package.json
index d36512257322..bba5dc2908cf 100644
--- a/packages/feedback-screenshot/package.json
+++ b/packages/feedback-screenshot/package.json
@@ -33,8 +33,7 @@
     "@sentry/types": "7.100.0",
     "@sentry/utils": "7.100.0",
     "preact": "^10.19.4",
-    "preact-compat": "^3.19.0",
-    "@rollup/plugin-alias": "5.1.0"
+    "preact-compat": "^3.19.0"
   },
   "scripts": {
     "build": "run-p build:transpile build:types build:bundle",
diff --git a/packages/feedback-screenshot/rollup.bundle.config.mjs b/packages/feedback-screenshot/rollup.bundle.config.mjs
index 496308b212e2..9766ea9c61d1 100644
--- a/packages/feedback-screenshot/rollup.bundle.config.mjs
+++ b/packages/feedback-screenshot/rollup.bundle.config.mjs
@@ -1,5 +1,4 @@
 import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
-import alias from '@rollup/plugin-alias';
 
 const baseBundleConfig = makeBaseBundleConfig({
   bundleType: 'addon',
@@ -7,17 +6,6 @@ const baseBundleConfig = makeBaseBundleConfig({
   jsVersion: 'es6',
   licenseTitle: '@sentry-internal/feedback-screenshot',
   outputFileBase: () => 'bundles/feedback-screenshot',
-  plugins: [
-    alias({
-      entries: [
-        { find: 'react', replacement: 'preact/compat' },
-        { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
-        { find: 'react-dom', replacement: 'preact/compat' },
-        { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
-      ]
-    })
-  ],
-
 });
 
 const builds = makeBundleConfigVariants(baseBundleConfig);
diff --git a/packages/feedback-screenshot/rollup.npm.config.mjs b/packages/feedback-screenshot/rollup.npm.config.mjs
index b9a01d8abc53..8c50a33f0afb 100644
--- a/packages/feedback-screenshot/rollup.npm.config.mjs
+++ b/packages/feedback-screenshot/rollup.npm.config.mjs
@@ -1,5 +1,4 @@
 import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
-import alias from '@rollup/plugin-alias';
 
 export default makeNPMConfigVariants(
   makeBaseNPMConfig({
@@ -13,15 +12,5 @@ export default makeNPMConfigVariants(
         preserveModules: false,
       },
     },
-    plugins: ['@babel/transform-react-jsx', { pragma: 'h' },
-      alias({
-        entries: [
-          { find: 'react', replacement: 'preact/compat' },
-          { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
-          { find: 'react-dom', replacement: 'preact/compat' },
-          { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
-        ]
-      })
-    ],
   }),
 );
diff --git a/packages/feedback-screenshot/src/index.ts b/packages/feedback-screenshot/src/index.ts
index 1974e8232df1..10b57b5ccc12 100644
--- a/packages/feedback-screenshot/src/index.ts
+++ b/packages/feedback-screenshot/src/index.ts
@@ -5,4 +5,4 @@ export {
 } from './screenshot';
 export type { FeedbackScreenshotIntegrationOptions } from './screenshot';
 
-console.log('screenshot 6');
+console.log('screenshot 9');
diff --git a/packages/feedback-screenshot/src/screenshot.ts b/packages/feedback-screenshot/src/screenshot.ts
index 6e6873937ba2..377728db65cd 100644
--- a/packages/feedback-screenshot/src/screenshot.ts
+++ b/packages/feedback-screenshot/src/screenshot.ts
@@ -6,12 +6,12 @@ import { h, render } from 'preact';
 
 interface FeedbackScreenshotOptions {
   el: Element;
-  props: string;
+  props: unknown;
 }
 
 export interface FeedbackScreenshotIntegrationOptions {
   el: Element;
-  props: string;
+  props: unknown;
 }
 
 const INTEGRATION_NAME = 'FeedbackScreenshot';
@@ -24,7 +24,7 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setupOnce() {},
     getOptions(): FeedbackScreenshotIntegrationOptions {
-      return { el: options.el || WINDOW.document.createElement('div'), props: options.props || 'prop' };
+      return { el: options.el || WINDOW.document.createElement('div'), props: options.props || null };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
       return render(h(Hello, null), options.el);
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index 762da67c12e9..6d89121ff7d4 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,12 +1,7 @@
-import { h, render } from 'preact';
-
-interface FeedbackScreenshotOptions {
-  el: Element;
-  props: string;
-}
+import { h, createElement } from 'preact';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function Hello(options: FeedbackScreenshotOptions) {
-  console.log('screenshot widget');
+export function Hello() {
+  console.log('screenshot widget 1');
   return h('div', null, 'hello');
 }
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 074b539ad04b..353f923be64e 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -158,7 +158,7 @@ export function Form({
 
   const screenshot = createElement('div', { className: 'btn-group' });
 
-  // @ts-expect-error testing
+  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
   ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
     el: screenshot,
     props: null,
diff --git a/yarn.lock b/yarn.lock
index f90f4d908c76..842634a522f0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5293,7 +5293,7 @@
   dependencies:
     web-streams-polyfill "^3.1.1"
 
-"@rollup/plugin-alias@5.1.0":
+"@rollup/plugin-alias@^5.1.0":
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz#99a94accc4ff9a3483be5baeedd5d7da3b597e93"
   integrity sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==
@@ -5549,16 +5549,6 @@
     semver "7.3.2"
     semver-intersect "1.4.0"
 
-"@sentry-internal/feedback-screenshot@file:packages/feedback-screenshot":
-  version "7.100.0"
-  dependencies:
-    "@rollup/plugin-alias" "5.1.0"
-    "@sentry/core" "7.100.0"
-    "@sentry/types" "7.100.0"
-    "@sentry/utils" "7.100.0"
-    preact "^10.19.4"
-    preact-compat "^3.19.0"
-
 "@sentry-internal/rrdom@2.11.0":
   version "2.11.0"
   resolved "https://registry.yarnpkg.com/@sentry-internal/rrdom/-/rrdom-2.11.0.tgz#f7c8f54705ad84ece0e97e53f12e87c687749b32"

From 0395331e211cc23f52fd5b4a6e386d38f0edc96d Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Fri, 9 Feb 2024 21:48:36 -0500
Subject: [PATCH 04/54] allow passing options to sucrase + pass jsxPragma

---
 dev-packages/rollup-utils/bundleHelpers.mjs           | 2 +-
 dev-packages/rollup-utils/npmHelpers.mjs              | 3 ++-
 packages/feedback-screenshot/rollup.bundle.config.mjs | 4 ++++
 packages/feedback-screenshot/rollup.npm.config.mjs    | 4 ++++
 4 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/dev-packages/rollup-utils/bundleHelpers.mjs b/dev-packages/rollup-utils/bundleHelpers.mjs
index b9cd0f415ce2..a111ef0e6d46 100644
--- a/dev-packages/rollup-utils/bundleHelpers.mjs
+++ b/dev-packages/rollup-utils/bundleHelpers.mjs
@@ -32,7 +32,7 @@ export function makeBaseBundleConfig(options) {
 
   const aliasPlugin = makeAliasPlugin();
   const nodeResolvePlugin = makeNodeResolvePlugin();
-  const sucrasePlugin = makeSucrasePlugin();
+  const sucrasePlugin = makeSucrasePlugin(options.sucrase);
   const cleanupPlugin = makeCleanupPlugin();
   const markAsBrowserBuildPlugin = makeBrowserBuildPlugin(true);
   const licensePlugin = makeLicensePlugin(licenseTitle);
diff --git a/dev-packages/rollup-utils/npmHelpers.mjs b/dev-packages/rollup-utils/npmHelpers.mjs
index 8b9647065f0b..12ddd7e331a0 100644
--- a/dev-packages/rollup-utils/npmHelpers.mjs
+++ b/dev-packages/rollup-utils/npmHelpers.mjs
@@ -29,11 +29,12 @@ export function makeBaseNPMConfig(options = {}) {
     hasBundles = false,
     packageSpecificConfig = {},
     addPolyfills = true,
+    sucrase = {},
   } = options;
 
   const aliasPlugin = makeAliasPlugin();
   const nodeResolvePlugin = makeNodeResolvePlugin();
-  const sucrasePlugin = makeSucrasePlugin({ disableESTransforms: !addPolyfills });
+  const sucrasePlugin = makeSucrasePlugin({ disableESTransforms: !addPolyfills, ...sucrase });
   const debugBuildStatementReplacePlugin = makeDebugBuildStatementReplacePlugin();
   const cleanupPlugin = makeCleanupPlugin();
   const extractPolyfillsPlugin = makeExtractPolyfillsPlugin();
diff --git a/packages/feedback-screenshot/rollup.bundle.config.mjs b/packages/feedback-screenshot/rollup.bundle.config.mjs
index 9766ea9c61d1..6bae4e9c57c9 100644
--- a/packages/feedback-screenshot/rollup.bundle.config.mjs
+++ b/packages/feedback-screenshot/rollup.bundle.config.mjs
@@ -6,6 +6,10 @@ const baseBundleConfig = makeBaseBundleConfig({
   jsVersion: 'es6',
   licenseTitle: '@sentry-internal/feedback-screenshot',
   outputFileBase: () => 'bundles/feedback-screenshot',
+  sucrase: {
+    jsxPragma: 'h',
+    jsxFragmentPragma: 'Fragment',
+  }
 });
 
 const builds = makeBundleConfigVariants(baseBundleConfig);
diff --git a/packages/feedback-screenshot/rollup.npm.config.mjs b/packages/feedback-screenshot/rollup.npm.config.mjs
index 8c50a33f0afb..b659c384eff5 100644
--- a/packages/feedback-screenshot/rollup.npm.config.mjs
+++ b/packages/feedback-screenshot/rollup.npm.config.mjs
@@ -12,5 +12,9 @@ export default makeNPMConfigVariants(
         preserveModules: false,
       },
     },
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    }
   }),
 );

From 364e18794e6103daf011ef19bce29e15557979e4 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Fri, 9 Feb 2024 21:48:57 -0500
Subject: [PATCH 05/54] proper ts-expect-error

---
 packages/feedback/src/widget/Form.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 353f923be64e..a0ebad037276 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -158,7 +158,7 @@ export function Form({
 
   const screenshot = createElement('div', { className: 'btn-group' });
 
-  // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+  // @ts-expect-error temp
   ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
     el: screenshot,
     props: null,

From 510f37cd287cb410078c2a52be44b4a6f6d51f07 Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Fri, 9 Feb 2024 21:49:20 -0500
Subject: [PATCH 06/54] fix for preact

---
 packages/feedback-screenshot/src/screenshotWidget.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index 6d89121ff7d4..bd1471968c29 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,7 +1,6 @@
-import { h, createElement } from 'preact';
+import {h} from 'preact';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function Hello() {
-  console.log('screenshot widget 1');
-  return h('div', null, 'hello');
+  return <div>Hello 2</div>;
 }

From 513ab3e58edef31fcbbcc7695a471ba02c1ec5df Mon Sep 17 00:00:00 2001
From: Billy Vong <billyvg@users.noreply.github.com>
Date: Fri, 9 Feb 2024 21:49:28 -0500
Subject: [PATCH 07/54] change to tsx and fix for preact

---
 .../feedback-screenshot/src/{screenshot.ts => screenshot.tsx}   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)
 rename packages/feedback-screenshot/src/{screenshot.ts => screenshot.tsx} (97%)

diff --git a/packages/feedback-screenshot/src/screenshot.ts b/packages/feedback-screenshot/src/screenshot.tsx
similarity index 97%
rename from packages/feedback-screenshot/src/screenshot.ts
rename to packages/feedback-screenshot/src/screenshot.tsx
index 377728db65cd..def1904457c7 100644
--- a/packages/feedback-screenshot/src/screenshot.ts
+++ b/packages/feedback-screenshot/src/screenshot.tsx
@@ -27,7 +27,7 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
       return { el: options.el || WINDOW.document.createElement('div'), props: options.props || null };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
-      return render(h(Hello, null), options.el);
+      return render(<Hello />, options.el);
     },
   };
 }) satisfies IntegrationFn;

From 7d9b800d991d2ee42124012d10d5e7096bf12aa2 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 12 Feb 2024 13:08:49 -0500
Subject: [PATCH 08/54] screenshot button

---
 packages/feedback-screenshot/src/screenshot.tsx     |  4 ++--
 .../feedback-screenshot/src/screenshotWidget.tsx    | 13 ++++++++++---
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/packages/feedback-screenshot/src/screenshot.tsx b/packages/feedback-screenshot/src/screenshot.tsx
index def1904457c7..fd87d10cdb96 100644
--- a/packages/feedback-screenshot/src/screenshot.tsx
+++ b/packages/feedback-screenshot/src/screenshot.tsx
@@ -1,6 +1,6 @@
 import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
 import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
-import { Hello } from './screenshotWidget';
+import { ScreenshotButton } from './screenshotWidget';
 import { GLOBAL_OBJ } from '@sentry/utils';
 import { h, render } from 'preact';
 
@@ -27,7 +27,7 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
       return { el: options.el || WINDOW.document.createElement('div'), props: options.props || null };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
-      return render(<Hello />, options.el);
+      return render(<ScreenshotButton />, options.el);
     },
   };
 }) satisfies IntegrationFn;
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index bd1471968c29..0d2aa7b3c575 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,6 +1,13 @@
-import {h} from 'preact';
+import { h } from 'preact';
 
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function Hello() {
-  return <div>Hello 2</div>;
+export function ScreenshotButton() {
+  return (
+    <label htmlFor="screenshot" className="form__label">
+      <span className="form__label__text">Screenshot</span>
+      <button class="btn btn--default" type="cancel">
+        Add
+      </button>
+    </label>
+  );
 }

From 8dbd500baec8021c8006d49ebeeb41989a6c3c45 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 12 Feb 2024 16:21:23 -0500
Subject: [PATCH 09/54] screenshot button and widget placeholders

---
 packages/feedback-screenshot/src/index.ts      |  2 +-
 .../feedback-screenshot/src/screenshot.tsx     |  7 ++++++-
 .../src/screenshotButton.tsx                   | 18 ++++++++++++++++++
 .../src/screenshotWidget.tsx                   | 12 ++----------
 packages/feedback/src/index.ts                 |  2 +-
 packages/feedback/src/widget/Dialog.ts         | 10 ++++++++++
 packages/feedback/src/widget/Form.ts           | 10 +++++-----
 7 files changed, 43 insertions(+), 18 deletions(-)
 create mode 100644 packages/feedback-screenshot/src/screenshotButton.tsx

diff --git a/packages/feedback-screenshot/src/index.ts b/packages/feedback-screenshot/src/index.ts
index 10b57b5ccc12..ddbdaca3bbde 100644
--- a/packages/feedback-screenshot/src/index.ts
+++ b/packages/feedback-screenshot/src/index.ts
@@ -5,4 +5,4 @@ export {
 } from './screenshot';
 export type { FeedbackScreenshotIntegrationOptions } from './screenshot';
 
-console.log('screenshot 9');
+console.log('screenshot 11');
diff --git a/packages/feedback-screenshot/src/screenshot.tsx b/packages/feedback-screenshot/src/screenshot.tsx
index fd87d10cdb96..e8618899d9fb 100644
--- a/packages/feedback-screenshot/src/screenshot.tsx
+++ b/packages/feedback-screenshot/src/screenshot.tsx
@@ -1,6 +1,7 @@
 import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
 import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
-import { ScreenshotButton } from './screenshotWidget';
+import { ScreenshotButton } from './screenshotButton';
+import { ScreenshotWidget } from './screenshotWidget';
 import { GLOBAL_OBJ } from '@sentry/utils';
 import { h, render } from 'preact';
 
@@ -27,6 +28,9 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
       return { el: options.el || WINDOW.document.createElement('div'), props: options.props || null };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
+      return render(<ScreenshotWidget />, options.el);
+    },
+    renderScreenshotButton: (options: FeedbackScreenshotOptions) => {
       return render(<ScreenshotButton />, options.el);
     },
   };
@@ -48,5 +52,6 @@ export const FeedbackScreenshot = convertIntegrationFnToClass(
   Integration & {
     getOptions: () => FeedbackScreenshotIntegrationOptions;
     renderScreenshotWidget: () => void;
+    renderScreenshotButton: () => void;
   }
 >;
diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
new file mode 100644
index 000000000000..3811f6a93a85
--- /dev/null
+++ b/packages/feedback-screenshot/src/screenshotButton.tsx
@@ -0,0 +1,18 @@
+import { Component, h } from 'preact';
+
+export class ScreenshotButton extends Component {
+  state = { clicked: false };
+  handleClick = () => {
+    this.setState({ clicked: !this.state.clicked });
+  };
+  render() {
+    return (
+      <label htmlFor="screenshot" className="form__label">
+        <span className="form__label__text">Screenshot</span>
+        <button class="btn btn--default" type="screenshot" onClick={this.handleClick}>
+          {this.state.clicked ? 'Remove' : 'Add'}
+        </button>
+      </label>
+    );
+  }
+}
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index 0d2aa7b3c575..84461099ad00 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,13 +1,5 @@
 import { h } from 'preact';
-
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ScreenshotButton() {
-  return (
-    <label htmlFor="screenshot" className="form__label">
-      <span className="form__label__text">Screenshot</span>
-      <button class="btn btn--default" type="cancel">
-        Add
-      </button>
-    </label>
-  );
+export function ScreenshotWidget() {
+  return <div style="height:100px; width: 100px; background:red;" />;
 }
diff --git a/packages/feedback/src/index.ts b/packages/feedback/src/index.ts
index 76e9478c1ee1..dbb24a745cfe 100644
--- a/packages/feedback/src/index.ts
+++ b/packages/feedback/src/index.ts
@@ -5,4 +5,4 @@ export {
   feedbackIntegration,
 } from './integration';
 
-console.log('Feedback 2');
+console.log('Feedback 4');
diff --git a/packages/feedback/src/widget/Dialog.ts b/packages/feedback/src/widget/Dialog.ts
index 84b4318b34d1..bdc009970080 100644
--- a/packages/feedback/src/widget/Dialog.ts
+++ b/packages/feedback/src/widget/Dialog.ts
@@ -3,6 +3,7 @@ import type { FormComponentProps } from './Form';
 import { Form } from './Form';
 import { Logo } from './Logo';
 import { createElement } from './util/createElement';
+import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
 
 export interface DialogProps
   extends FormComponentProps,
@@ -95,6 +96,14 @@ export function Dialog({
     return (el && el.open === true) || false;
   }
 
+  const screenshot = createElement('div', { className: 'dialog-content' });
+
+  // @ts-expect-error temp
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
+    el: screenshot,
+    props: null,
+  });
+
   const {
     el: formEl,
     showError,
@@ -119,6 +128,7 @@ export function Dialog({
       open: true,
       onClick: handleDialogClick,
     },
+    screenshot,
     createElement(
       'div',
       {
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index a0ebad037276..77da1b5eaf90 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -140,7 +140,7 @@ export function Form({
     name: 'message',
     required: true,
     className: 'form__input form__input--textarea',
-    placeholder: 'message placeholder',
+    placeholder: messagePlaceholder,
   });
 
   const cancelEl = createElement(
@@ -156,11 +156,11 @@ export function Form({
     cancelButtonLabel,
   );
 
-  const screenshot = createElement('div', { className: 'btn-group' });
+  const button = createElement('div', { className: 'btn-group' });
 
   // @ts-expect-error temp
-  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
-    el: screenshot,
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotButton({
+    el: button,
     props: null,
   });
 
@@ -228,7 +228,7 @@ export function Form({
         ],
       ),
 
-      screenshot,
+      button,
 
       createElement(
         'div',

From 4a007a10ae23c42898795dfe526bafdf05d76ed4 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 13 Feb 2024 15:59:47 -0800
Subject: [PATCH 10/54] Make feedback depend on feedback-screenshot for now,
 until we have aync loading

---
 packages/feedback/package.json | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 060defb0510c..e7ee5e8ea626 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -29,6 +29,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@sentry-internal/feedback-screenshot": "7.100.0",
     "@sentry/core": "7.100.0",
     "@sentry/types": "7.100.0",
     "@sentry/utils": "7.100.0"

From 0de030fc4c8499f301ef38fd8f622383fbea421a Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 13 Feb 2024 16:02:29 -0800
Subject: [PATCH 11/54] Convert screenshotButton to a functional component, and
 add types to components

---
 .../src/screenshotButton.tsx                  | 33 ++++++++++---------
 .../src/screenshotWidget.tsx                  |  7 ++--
 2 files changed, 21 insertions(+), 19 deletions(-)

diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
index 3811f6a93a85..e4787d07664d 100644
--- a/packages/feedback-screenshot/src/screenshotButton.tsx
+++ b/packages/feedback-screenshot/src/screenshotButton.tsx
@@ -1,18 +1,19 @@
-import { Component, h } from 'preact';
+import {h, render} from 'preact';
+import {useState, useCallback} from 'preact/hooks';
+import type {VNode} from 'preact';
 
-export class ScreenshotButton extends Component {
-  state = { clicked: false };
-  handleClick = () => {
-    this.setState({ clicked: !this.state.clicked });
-  };
-  render() {
-    return (
-      <label htmlFor="screenshot" className="form__label">
-        <span className="form__label__text">Screenshot</span>
-        <button class="btn btn--default" type="screenshot" onClick={this.handleClick}>
-          {this.state.clicked ? 'Remove' : 'Add'}
-        </button>
-      </label>
-    );
-  }
+export function ScreenshotButton(): VNode {
+  const [clicked, setClicked] = useState(false);
+  const handleClick = useCallback(() => {
+    setClicked(prev => !prev);
+  }, []);
+
+  return (
+    <label htmlFor="screenshot" className="form__label">
+      <span className="form__label__text">Screenshot</span>
+      <button class="btn btn--default" type="screenshot" onClick={handleClick}>
+        {clicked ? 'Remove' : 'Add'}
+      </button>
+    </label>
+  );
 }
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index 84461099ad00..4062e37e42a8 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,5 +1,6 @@
-import { h } from 'preact';
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ScreenshotWidget() {
+import {h, render} from 'preact';
+import type {VNode} from 'preact';
+
+export function ScreenshotWidget(): VNode {
   return <div style="height:100px; width: 100px; background:red;" />;
 }

From 8ea52d321a89c24cf88692e9c75fac67b4c7a4cc Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 13 Feb 2024 16:17:23 -0800
Subject: [PATCH 12/54] Update docblock for feedbackScreenshotIntegration

---
 packages/feedback-screenshot/src/screenshot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/feedback-screenshot/src/screenshot.tsx b/packages/feedback-screenshot/src/screenshot.tsx
index e8618899d9fb..e539b1422763 100644
--- a/packages/feedback-screenshot/src/screenshot.tsx
+++ b/packages/feedback-screenshot/src/screenshot.tsx
@@ -37,7 +37,7 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
 }) satisfies IntegrationFn;
 
 /**
- * Add this in addition to `replayIntegration()` to enable canvas recording.
+ * Add this in addition to `feedbackIntegration()` to allow your users to provide screen shots with their ad-hoc feedback.
  */
 export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration);
 

From d30f236b36035208bdff2997962c8995678ccf75 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 15 Feb 2024 15:05:58 -0500
Subject: [PATCH 13/54] take screenshot

---
 .../feedback-screenshot/src/screenshot.tsx    | 18 ++++---
 .../src/screenshotButton.tsx                  | 26 ++++++---
 .../src/screenshotWidget.tsx                  | 14 +++--
 .../src/useTakeScreenshot.tsx                 | 54 +++++++++++++++++++
 4 files changed, 93 insertions(+), 19 deletions(-)
 create mode 100644 packages/feedback-screenshot/src/useTakeScreenshot.tsx

diff --git a/packages/feedback-screenshot/src/screenshot.tsx b/packages/feedback-screenshot/src/screenshot.tsx
index e539b1422763..adbe5f6eb67e 100644
--- a/packages/feedback-screenshot/src/screenshot.tsx
+++ b/packages/feedback-screenshot/src/screenshot.tsx
@@ -1,17 +1,18 @@
 import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
 import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
 import { ScreenshotButton } from './screenshotButton';
-import { ScreenshotWidget } from './screenshotWidget';
 import { GLOBAL_OBJ } from '@sentry/utils';
 import { h, render } from 'preact';
 
 interface FeedbackScreenshotOptions {
-  el: Element;
+  buttonRef: HTMLDivElement;
+  croppingRef: HTMLDivElement;
   props: unknown;
 }
 
 export interface FeedbackScreenshotIntegrationOptions {
-  el: Element;
+  buttonRef: HTMLDivElement;
+  croppingRef: HTMLDivElement;
   props: unknown;
 }
 
@@ -25,13 +26,14 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setupOnce() {},
     getOptions(): FeedbackScreenshotIntegrationOptions {
-      return { el: options.el || WINDOW.document.createElement('div'), props: options.props || null };
+      return {
+        buttonRef: options.buttonRef || WINDOW.document.createElement('div'),
+        croppingRef: options.croppingRef || WINDOW.document.createElement('div'),
+        props: options.props || null,
+      };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
-      return render(<ScreenshotWidget />, options.el);
-    },
-    renderScreenshotButton: (options: FeedbackScreenshotOptions) => {
-      return render(<ScreenshotButton />, options.el);
+      return render(<ScreenshotButton croppingRef={options.croppingRef} />, options.buttonRef);
     },
   };
 }) satisfies IntegrationFn;
diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
index e4787d07664d..87506f57877d 100644
--- a/packages/feedback-screenshot/src/screenshotButton.tsx
+++ b/packages/feedback-screenshot/src/screenshotButton.tsx
@@ -1,17 +1,29 @@
-import {h, render} from 'preact';
-import {useState, useCallback} from 'preact/hooks';
-import type {VNode} from 'preact';
+import { h, render } from 'preact';
+import { useState, useCallback, useEffect } from 'preact/hooks';
+import { useTakeScreenshot } from './useTakeScreenshot';
+import type { VNode } from 'preact';
+import { ScreenshotWidget } from './screenshotWidget';
 
-export function ScreenshotButton(): VNode {
+type Props = { croppingRef: HTMLDivElement };
+
+export function ScreenshotButton({ croppingRef }: Props): VNode {
   const [clicked, setClicked] = useState(false);
-  const handleClick = useCallback(() => {
+  const { isInProgress, takeScreenshot } = useTakeScreenshot();
+
+  const handleClick = useCallback(async () => {
+    if (!clicked) {
+      const image = await takeScreenshot();
+      render(<ScreenshotWidget image={image} />, croppingRef);
+    } else {
+      render(null, croppingRef);
+    }
     setClicked(prev => !prev);
-  }, []);
+  }, [clicked]);
 
   return (
     <label htmlFor="screenshot" className="form__label">
       <span className="form__label__text">Screenshot</span>
-      <button class="btn btn--default" type="screenshot" onClick={handleClick}>
+      <button class="btn btn--default" type="button" onClick={handleClick}>
         {clicked ? 'Remove' : 'Add'}
       </button>
     </label>
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index 4062e37e42a8..5ed692ddf13f 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,6 +1,12 @@
-import {h, render} from 'preact';
-import type {VNode} from 'preact';
+import { h, render } from 'preact';
+import type { VNode } from 'preact';
 
-export function ScreenshotWidget(): VNode {
-  return <div style="height:100px; width: 100px; background:red;" />;
+type Props = { image: string | undefined };
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function ScreenshotWidget({ image }: Props): VNode | null {
+  return image ? (
+    <div style="height:1000px; width: 1000px; background:red; padding:5px;">
+      <img src={image} style="width:100%;height:100%;object-fit:contain;"></img>
+    </div>
+  ) : null;
 }
diff --git a/packages/feedback-screenshot/src/useTakeScreenshot.tsx b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
new file mode 100644
index 000000000000..7cda51d8ebe6
--- /dev/null
+++ b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
@@ -0,0 +1,54 @@
+import { useCallback, useState } from 'preact/hooks';
+import { h } from 'preact';
+
+const takeScreenshot = async (): Promise<string> => {
+  const stream = await navigator.mediaDevices.getDisplayMedia({
+    video: {
+      width: window.innerWidth * window.devicePixelRatio,
+      height: window.innerHeight * window.devicePixelRatio,
+    },
+    audio: false,
+    preferCurrentTab: true,
+    surfaceSwitching: 'exclude',
+  } as any);
+  const videoTrack = stream.getVideoTracks()[0];
+  const canvas = document.createElement('canvas');
+  const context = canvas.getContext('2d');
+  if (!context) {
+    throw new Error('Could not get canvas context');
+  }
+  const video = document.createElement('video');
+  video.srcObject = new MediaStream([videoTrack]);
+
+  await new Promise<void>(resolve => {
+    video.onloadedmetadata = () => {
+      canvas.width = video.videoWidth;
+      canvas.height = video.videoHeight;
+      context.drawImage(video, 0, 0);
+      stream.getTracks().forEach(track => track.stop());
+      resolve();
+    };
+    video.play();
+  });
+
+  return canvas.toDataURL();
+};
+
+export const useTakeScreenshot = () => {
+  const [isInProgress, setIsInProgress] = useState(false);
+
+  const takeScreenshotCallback = useCallback(async (): Promise<string> => {
+    setIsInProgress(true);
+    let image: string | null = null;
+    try {
+      image = await takeScreenshot();
+    } catch (error) {
+      setIsInProgress(false);
+      throw error;
+    }
+    setIsInProgress(false);
+    return image;
+  }, []);
+
+  return { isInProgress, takeScreenshot: takeScreenshotCallback };
+};

From f9b6f31d991404d7ccf5ddeb43c86af51ce55a41 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 15 Feb 2024 15:06:32 -0500
Subject: [PATCH 14/54] take screenshot

---
 packages/feedback/src/widget/Dialog.ts | 14 ++++++++------
 packages/feedback/src/widget/Form.ts   | 13 +++++--------
 2 files changed, 13 insertions(+), 14 deletions(-)

diff --git a/packages/feedback/src/widget/Dialog.ts b/packages/feedback/src/widget/Dialog.ts
index bdc009970080..aa663006c580 100644
--- a/packages/feedback/src/widget/Dialog.ts
+++ b/packages/feedback/src/widget/Dialog.ts
@@ -98,16 +98,11 @@ export function Dialog({
 
   const screenshot = createElement('div', { className: 'dialog-content' });
 
-  // @ts-expect-error temp
-  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
-    el: screenshot,
-    props: null,
-  });
-
   const {
     el: formEl,
     showError,
     hideError,
+    screenshotButton,
   } = Form({
     showEmail,
     showName,
@@ -121,6 +116,13 @@ export function Dialog({
     ...textLabels,
   });
 
+  // @ts-expect-error temp
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
+    croppingRef: screenshot,
+    buttonRef: screenshotButton,
+    props: null,
+  });
+
   el = createElement(
     'dialog',
     {
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 77da1b5eaf90..09d553681ebe 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -34,6 +34,8 @@ interface FormComponent extends FeedbackComponent<HTMLFormElement> {
    * Hides the error message
    */
   hideError: () => void;
+
+  screenshotButton: HTMLDivElement;
 }
 
 function retrieveStringValue(formData: FormData, key: string): string {
@@ -156,13 +158,7 @@ export function Form({
     cancelButtonLabel,
   );
 
-  const button = createElement('div', { className: 'btn-group' });
-
-  // @ts-expect-error temp
-  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotButton({
-    el: button,
-    props: null,
-  });
+  const screenshotButton = createElement('div', { className: 'btn-group' });
 
   const formEl = createElement(
     'form',
@@ -228,7 +224,7 @@ export function Form({
         ],
       ),
 
-      button,
+      screenshotButton,
 
       createElement(
         'div',
@@ -244,6 +240,7 @@ export function Form({
     get el() {
       return formEl;
     },
+    screenshotButton,
     showError,
     hideError,
   };

From 354bb5239efeafd75e6a1529299dea2126c6e205 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 16 Feb 2024 17:11:21 -0500
Subject: [PATCH 15/54] move screenshot into form

---
 .../src/screenshotWidget.tsx                  |  12 +-
 .../src/useTakeScreenshot.tsx                 |   8 +-
 packages/feedback/src/types/index.ts          |   1 +
 packages/feedback/src/widget/Dialog.css.ts    |  17 ++-
 packages/feedback/src/widget/Dialog.ts        |  12 --
 packages/feedback/src/widget/Form.ts          | 131 ++++++++++--------
 packages/feedback/src/widget/createWidget.ts  |  10 ++
 7 files changed, 111 insertions(+), 80 deletions(-)

diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index 5ed692ddf13f..e8e58f7a7bd2 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,12 +1,18 @@
 import { h, render } from 'preact';
 import type { VNode } from 'preact';
 
-type Props = { image: string | undefined };
+type Props = { image: HTMLCanvasElement };
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
 export function ScreenshotWidget({ image }: Props): VNode | null {
   return image ? (
-    <div style="height:1000px; width: 1000px; background:red; padding:5px;">
-      <img src={image} style="width:100%;height:100%;object-fit:contain;"></img>
+    <div style="padding-right: 16px;">
+      <img
+        type="image"
+        src={image.toDataURL()}
+        id="screenshot"
+        name="screenshot"
+        style="width:100%; height:100%;"
+      ></img>
     </div>
   ) : null;
 }
diff --git a/packages/feedback-screenshot/src/useTakeScreenshot.tsx b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
index 7cda51d8ebe6..e031931ef598 100644
--- a/packages/feedback-screenshot/src/useTakeScreenshot.tsx
+++ b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'preact/hooks';
 import { h } from 'preact';
 
-const takeScreenshot = async (): Promise<string> => {
+const takeScreenshot = async (): Promise<HTMLCanvasElement> => {
   const stream = await navigator.mediaDevices.getDisplayMedia({
     video: {
       width: window.innerWidth * window.devicePixelRatio,
@@ -31,15 +31,15 @@ const takeScreenshot = async (): Promise<string> => {
     video.play();
   });
 
-  return canvas.toDataURL();
+  return canvas;
 };
 
 export const useTakeScreenshot = () => {
   const [isInProgress, setIsInProgress] = useState(false);
 
-  const takeScreenshotCallback = useCallback(async (): Promise<string> => {
+  const takeScreenshotCallback = useCallback(async (): Promise<HTMLCanvasElement> => {
     setIsInProgress(true);
-    let image: string | null = null;
+    let image: HTMLCanvasElement | null = null;
     try {
       image = await takeScreenshot();
     } catch (error) {
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index f666f2aaa8ef..07d083400815 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -30,6 +30,7 @@ export interface FeedbackFormData {
   message: string;
   email?: string;
   name?: string;
+  screenshot?: Uint8Array;
 }
 
 /**
diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts
index b3924f00524a..f37242e77b39 100644
--- a/packages/feedback/src/widget/Dialog.css.ts
+++ b/packages/feedback/src/widget/Dialog.css.ts
@@ -42,8 +42,7 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   background-color: var(--background);
   color: var(--foreground);
 
-  width: 320px;
-  max-width: 100%;
+  max-width: calc(100% - 2rem);
   max-height: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
@@ -73,11 +72,21 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 }
 
 .form {
-  display: grid;
+  display: flex;
   overflow: auto;
+  flex-direction: row;
+  padding: 0 24px 24px;
+}
+
+.screenshot {
+  border-color: var(--submit-border);
+}
+
+.info {
+  display: flex;
   flex-direction: column;
   gap: 16px;
-  padding: 0 24px 24px;
+  width: 272px;
 }
 
 .form__error-container {
diff --git a/packages/feedback/src/widget/Dialog.ts b/packages/feedback/src/widget/Dialog.ts
index aa663006c580..84b4318b34d1 100644
--- a/packages/feedback/src/widget/Dialog.ts
+++ b/packages/feedback/src/widget/Dialog.ts
@@ -3,7 +3,6 @@ import type { FormComponentProps } from './Form';
 import { Form } from './Form';
 import { Logo } from './Logo';
 import { createElement } from './util/createElement';
-import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
 
 export interface DialogProps
   extends FormComponentProps,
@@ -96,13 +95,10 @@ export function Dialog({
     return (el && el.open === true) || false;
   }
 
-  const screenshot = createElement('div', { className: 'dialog-content' });
-
   const {
     el: formEl,
     showError,
     hideError,
-    screenshotButton,
   } = Form({
     showEmail,
     showName,
@@ -116,13 +112,6 @@ export function Dialog({
     ...textLabels,
   });
 
-  // @ts-expect-error temp
-  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
-    croppingRef: screenshot,
-    buttonRef: screenshotButton,
-    props: null,
-  });
-
   el = createElement(
     'dialog',
     {
@@ -130,7 +119,6 @@ export function Dialog({
       open: true,
       onClick: handleDialogClick,
     },
-    screenshot,
     createElement(
       'div',
       {
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 09d553681ebe..463017f24125 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -34,8 +34,6 @@ interface FormComponent extends FeedbackComponent<HTMLFormElement> {
    * Hides the error message
    */
   hideError: () => void;
-
-  screenshotButton: HTMLDivElement;
 }
 
 function retrieveStringValue(formData: FormData, key: string): string {
@@ -83,10 +81,12 @@ export function Form({
     try {
       if (onSubmit) {
         const formData = new FormData(e.target as HTMLFormElement);
+        const imageData = undefined;
         const feedback = {
           name: retrieveStringValue(formData, 'name'),
           email: retrieveStringValue(formData, 'email'),
           message: retrieveStringValue(formData, 'message'),
+          screenshot: imageData,
         };
 
         onSubmit(feedback);
@@ -158,8 +158,17 @@ export function Form({
     cancelButtonLabel,
   );
 
+  const screenshot = createElement('div', { className: 'screenshot' });
+
   const screenshotButton = createElement('div', { className: 'btn-group' });
 
+  // @ts-expect-error temp
+  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
+    croppingRef: screenshot,
+    buttonRef: screenshotButton,
+    props: null,
+  });
+
   const formEl = createElement(
     'form',
     {
@@ -168,70 +177,79 @@ export function Form({
     },
     [
       errorEl,
+      screenshot,
 
-      showName &&
-        createElement(
-          'label',
-          {
-            htmlFor: 'name',
-            className: 'form__label',
-          },
-          [
+      createElement(
+        'div',
+        {
+          className: 'info',
+        },
+        [
+          showName &&
             createElement(
-              'span',
-              { className: 'form__label__text' },
-              nameLabel,
-              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              'label',
+              {
+                htmlFor: 'name',
+                className: 'form__label',
+              },
+              [
+                createElement(
+                  'span',
+                  { className: 'form__label__text' },
+                  nameLabel,
+                  isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+                ),
+                nameEl,
+              ],
             ),
-            nameEl,
-          ],
-        ),
-      !showName && nameEl,
-
-      showEmail &&
-        createElement(
-          'label',
-          {
-            htmlFor: 'email',
-            className: 'form__label',
-          },
-          [
+          !showName && nameEl,
+
+          showEmail &&
             createElement(
-              'span',
-              { className: 'form__label__text' },
-              emailLabel,
-              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              'label',
+              {
+                htmlFor: 'email',
+                className: 'form__label',
+              },
+              [
+                createElement(
+                  'span',
+                  { className: 'form__label__text' },
+                  emailLabel,
+                  isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+                ),
+                emailEl,
+              ],
             ),
-            emailEl,
-          ],
-        ),
-      !showEmail && emailEl,
+          !showEmail && emailEl,
 
-      createElement(
-        'label',
-        {
-          htmlFor: 'message',
-          className: 'form__label',
-        },
-        [
           createElement(
-            'span',
-            { className: 'form__label__text' },
-            messageLabel,
-            createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+            'label',
+            {
+              htmlFor: 'message',
+              className: 'form__label',
+            },
+            [
+              createElement(
+                'span',
+                { className: 'form__label__text' },
+                messageLabel,
+                createElement('span', { className: 'form__label__text--required' }, ' (required)'),
+              ),
+              messageEl,
+            ],
           ),
-          messageEl,
-        ],
-      ),
 
-      screenshotButton,
+          screenshotButton,
 
-      createElement(
-        'div',
-        {
-          className: 'btn-group',
-        },
-        [submitEl, cancelEl],
+          createElement(
+            'div',
+            {
+              className: 'btn-group',
+            },
+            [submitEl, cancelEl],
+          ),
+        ],
       ),
     ],
   );
@@ -240,7 +258,6 @@ export function Form({
     get el() {
       return formEl;
     },
-    screenshotButton,
     showError,
     hideError,
   };
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
index 14558f35bbcc..505602e6a04e 100644
--- a/packages/feedback/src/widget/createWidget.ts
+++ b/packages/feedback/src/widget/createWidget.ts
@@ -1,5 +1,6 @@
 import { getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
+import * as Sentry from '@sentry/browser';
 
 import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
 import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
@@ -119,6 +120,15 @@ export function createWidget({
     // Success
     removeDialog();
     showSuccessMessage();
+    Sentry.withScope(scope => {
+      if (feedback.screenshot) {
+        scope.addAttachment({
+          filename: 'screenshot.png',
+          data: feedback.screenshot,
+          contentType: 'image/png',
+        });
+      }
+    });
 
     if (options.onSubmitSuccess) {
       options.onSubmitSuccess();

From 22efe6ea099edc73c357f2e4aeb391cd663ddb77 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 22 Feb 2024 00:53:08 -0500
Subject: [PATCH 16/54] working screenshot attachment

---
 packages/core/src/envelope.ts                 | 30 ++++++++++++
 packages/core/src/index.ts                    |  9 +---
 .../feedback-screenshot/src/screenshot.tsx    | 26 ++++++++--
 .../src/screenshotButton.tsx                  | 12 +++--
 .../src/screenshotWidget.tsx                  |  8 +++-
 packages/feedback/src/sendFeedback.ts         |  4 +-
 packages/feedback/src/types/index.ts          |  8 +++-
 .../feedback/src/util/handleFeedbackSubmit.ts |  5 +-
 .../feedback/src/util/sendFeedbackRequest.ts  | 45 +++++++++++++++++-
 packages/feedback/src/widget/Form.ts          | 47 ++++++++++++++++---
 packages/feedback/src/widget/createWidget.ts  | 17 ++-----
 11 files changed, 167 insertions(+), 44 deletions(-)

diff --git a/packages/core/src/envelope.ts b/packages/core/src/envelope.ts
index 9ec29c9d2a7e..02a58a2af31e 100644
--- a/packages/core/src/envelope.ts
+++ b/packages/core/src/envelope.ts
@@ -1,4 +1,6 @@
 import type {
+  Attachment,
+  AttachmentItem,
   DsnComponents,
   Event,
   EventEnvelope,
@@ -9,8 +11,10 @@ import type {
   SessionAggregates,
   SessionEnvelope,
   SessionItem,
+  TextEncoderInternal,
 } from '@sentry/types';
 import {
+  createAttachmentEnvelopeItem,
   createEnvelope,
   createEventEnvelopeHeaders,
   dsnToString,
@@ -86,3 +90,29 @@ export function createEventEnvelope(
   const eventItem: EventItem = [{ type: eventType }, event];
   return createEnvelope<EventEnvelope>(envelopeHeaders, [eventItem]);
 }
+
+/**
+ * Create an Envelope from an event.
+ */
+export function createAttachmentEnvelope(
+  event: Event,
+  attachment: Attachment,
+  dsn?: DsnComponents,
+  metadata?: SdkMetadata,
+  tunnel?: string,
+  textEncoder?: TextEncoderInternal,
+): EventEnvelope {
+  const sdkInfo = getSdkMetadataForEnvelopeHeader(metadata);
+  enhanceEventWithSdkInfo(event, metadata && metadata.sdk);
+
+  const envelopeHeaders = createEventEnvelopeHeaders(event, sdkInfo, tunnel, dsn);
+
+  // Prevent this data (which, if it exists, was used in earlier steps in the processing pipeline) from being sent to
+  // sentry. (Note: Our use of this property comes and goes with whatever we might be debugging, whatever hacks we may
+  // have temporarily added, etc. Even if we don't happen to be using it at some point in the future, let's not get rid
+  // of this `delete`, lest we miss putting it back in the next time the property is in use.)
+  delete event.sdkProcessingMetadata;
+
+  const attachmentItem: AttachmentItem = createAttachmentEnvelopeItem(attachment, textEncoder);
+  return createEnvelope<EventEnvelope>(envelopeHeaders, [attachmentItem]);
+}
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
index 849e34f6c92b..330e16120121 100644
--- a/packages/core/src/index.ts
+++ b/packages/core/src/index.ts
@@ -7,7 +7,7 @@ export type { IntegrationIndex } from './integration';
 
 export * from './tracing';
 export * from './semanticAttributes';
-export { createEventEnvelope, createSessionEnvelope } from './envelope';
+export { createEventEnvelope, createSessionEnvelope, createAttachmentEnvelope } from './envelope';
 export {
   addBreadcrumb,
   captureCheckIn,
@@ -83,12 +83,7 @@ export { hasTracingEnabled } from './utils/hasTracingEnabled';
 export { isSentryRequestUrl } from './utils/isSentryRequestUrl';
 export { handleCallbackErrors } from './utils/handleCallbackErrors';
 export { parameterize } from './utils/parameterize';
-export {
-  spanToTraceHeader,
-  spanToJSON,
-  spanIsSampled,
-  spanToTraceContext,
-} from './utils/spanUtils';
+export { spanToTraceHeader, spanToJSON, spanIsSampled, spanToTraceContext } from './utils/spanUtils';
 export { getRootSpan } from './utils/getRootSpan';
 export { applySdkMetadata } from './utils/sdkMetadata';
 export { DEFAULT_ENVIRONMENT } from './constants';
diff --git a/packages/feedback-screenshot/src/screenshot.tsx b/packages/feedback-screenshot/src/screenshot.tsx
index adbe5f6eb67e..3cdd91986de9 100644
--- a/packages/feedback-screenshot/src/screenshot.tsx
+++ b/packages/feedback-screenshot/src/screenshot.tsx
@@ -7,20 +7,26 @@ import { h, render } from 'preact';
 interface FeedbackScreenshotOptions {
   buttonRef: HTMLDivElement;
   croppingRef: HTMLDivElement;
-  props: unknown;
+  props: {
+    screenshotImage: HTMLCanvasElement | null;
+    setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+  };
 }
 
 export interface FeedbackScreenshotIntegrationOptions {
   buttonRef: HTMLDivElement;
   croppingRef: HTMLDivElement;
-  props: unknown;
+  props: {
+    screenshotImage: HTMLCanvasElement | null;
+    setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+  };
 }
 
 const INTEGRATION_NAME = 'FeedbackScreenshot';
 const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 /** Exported only for type safe tests. */
-export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreenshotOptions> = {}) => {
+export const _feedbackScreenshotIntegration = ((options: FeedbackScreenshotOptions) => {
   return {
     name: INTEGRATION_NAME,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -29,11 +35,21 @@ export const _feedbackScreenshotIntegration = ((options: Partial<FeedbackScreens
       return {
         buttonRef: options.buttonRef || WINDOW.document.createElement('div'),
         croppingRef: options.croppingRef || WINDOW.document.createElement('div'),
-        props: options.props || null,
+        props: {
+          screenshotImage: options.props.screenshotImage,
+          setScreenshotImage: options.props.setScreenshotImage,
+        },
       };
     },
     renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
-      return render(<ScreenshotButton croppingRef={options.croppingRef} />, options.buttonRef);
+      return render(
+        <ScreenshotButton
+          croppingRef={options.croppingRef}
+          screenshotImage={options.props.screenshotImage}
+          setScreenshotImage={options.props.setScreenshotImage}
+        />,
+        options.buttonRef,
+      );
     },
   };
 }) satisfies IntegrationFn;
diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
index 87506f57877d..a2e853f2567d 100644
--- a/packages/feedback-screenshot/src/screenshotButton.tsx
+++ b/packages/feedback-screenshot/src/screenshotButton.tsx
@@ -4,17 +4,23 @@ import { useTakeScreenshot } from './useTakeScreenshot';
 import type { VNode } from 'preact';
 import { ScreenshotWidget } from './screenshotWidget';
 
-type Props = { croppingRef: HTMLDivElement };
+type Props = {
+  croppingRef: HTMLDivElement;
+  screenshotImage: HTMLCanvasElement | null;
+  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+};
 
-export function ScreenshotButton({ croppingRef }: Props): VNode {
+export function ScreenshotButton({ croppingRef, screenshotImage, setScreenshotImage }: Props): VNode {
   const [clicked, setClicked] = useState(false);
   const { isInProgress, takeScreenshot } = useTakeScreenshot();
 
   const handleClick = useCallback(async () => {
     if (!clicked) {
       const image = await takeScreenshot();
-      render(<ScreenshotWidget image={image} />, croppingRef);
+      setScreenshotImage(image);
+      render(<ScreenshotWidget screenshotImage={image} setScreenshotImage={setScreenshotImage} />, croppingRef);
     } else {
+      setScreenshotImage(null);
       render(null, croppingRef);
     }
     setClicked(prev => !prev);
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index e8e58f7a7bd2..3c64c86db85a 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,9 +1,13 @@
 import { h, render } from 'preact';
 import type { VNode } from 'preact';
 
-type Props = { image: HTMLCanvasElement };
+type Props = {
+  screenshotImage: HTMLCanvasElement | null;
+  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+};
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-export function ScreenshotWidget({ image }: Props): VNode | null {
+export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
+  const image = screenshotImage;
   return image ? (
     <div style="padding-right: 16px;">
       <img
diff --git a/packages/feedback/src/sendFeedback.ts b/packages/feedback/src/sendFeedback.ts
index ac60415d0462..f786c16f5548 100644
--- a/packages/feedback/src/sendFeedback.ts
+++ b/packages/feedback/src/sendFeedback.ts
@@ -1,7 +1,7 @@
 import { getLocationHref } from '@sentry/utils';
 
 import { FEEDBACK_API_SOURCE } from './constants';
-import type { SendFeedbackOptions } from './types';
+import type { Screenshot, SendFeedbackOptions } from './types';
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
 
 interface SendFeedbackParams {
@@ -18,6 +18,7 @@ interface SendFeedbackParams {
 export function sendFeedback(
   { name, email, message, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   options: SendFeedbackOptions = {},
+  screenshots: Screenshot[] = [],
 ): ReturnType<typeof sendFeedbackRequest> {
   if (!message) {
     throw new Error('Unable to submit feedback with empty message');
@@ -34,5 +35,6 @@ export function sendFeedback(
       },
     },
     options,
+    screenshots,
   );
 }
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index 07d083400815..f0c74af5dfa5 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -21,6 +21,7 @@ export interface SendFeedbackOptions {
    * Should include replay with the feedback?
    */
   includeReplay?: boolean;
+  screenshots?: Screenshot[];
 }
 
 /**
@@ -30,7 +31,6 @@ export interface FeedbackFormData {
   message: string;
   email?: string;
   name?: string;
-  screenshot?: Uint8Array;
 }
 
 /**
@@ -343,3 +343,9 @@ export interface FeedbackWidget {
   closeDialog: () => void;
   removeDialog: () => void;
 }
+
+export interface Screenshot {
+  filename: string;
+  data: Uint8Array;
+  contentType: string;
+}
diff --git a/packages/feedback/src/util/handleFeedbackSubmit.ts b/packages/feedback/src/util/handleFeedbackSubmit.ts
index abb3aeb1368d..0d6a15cc0496 100644
--- a/packages/feedback/src/util/handleFeedbackSubmit.ts
+++ b/packages/feedback/src/util/handleFeedbackSubmit.ts
@@ -4,7 +4,7 @@ import { logger } from '@sentry/utils';
 import { FEEDBACK_WIDGET_SOURCE } from '../constants';
 import { DEBUG_BUILD } from '../debug-build';
 import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData, SendFeedbackOptions } from '../types';
+import type { FeedbackFormData, Screenshot, SendFeedbackOptions } from '../types';
 import type { DialogComponent } from '../widget/Dialog';
 
 /**
@@ -14,6 +14,7 @@ import type { DialogComponent } from '../widget/Dialog';
 export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
+  screenshots?: Screenshot[],
   options?: SendFeedbackOptions,
 ): Promise<TransportMakeRequestResponse | void> {
   if (!dialog) {
@@ -31,7 +32,7 @@ export async function handleFeedbackSubmit(
   dialog.hideError();
 
   try {
-    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options);
+    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options, screenshots);
 
     // Success!
     return resp;
diff --git a/packages/feedback/src/util/sendFeedbackRequest.ts b/packages/feedback/src/util/sendFeedbackRequest.ts
index f1629a00670a..a515fba48652 100644
--- a/packages/feedback/src/util/sendFeedbackRequest.ts
+++ b/packages/feedback/src/util/sendFeedbackRequest.ts
@@ -1,8 +1,8 @@
-import { createEventEnvelope, getClient, withScope } from '@sentry/core';
+import { createEventEnvelope, getClient, withScope, createAttachmentEnvelope } from '@sentry/core';
 import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
 
 import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import type { SendFeedbackData, SendFeedbackOptions } from '../types';
+import type { Screenshot, SendFeedbackData, SendFeedbackOptions } from '../types';
 import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 
 /**
@@ -11,6 +11,7 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 export async function sendFeedbackRequest(
   { feedback: { message, email, name, source, url } }: SendFeedbackData,
   { includeReplay = true }: SendFeedbackOptions = {},
+  screenshots: Screenshot[],
 ): Promise<void | TransportMakeRequestResponse> {
   const client = getClient();
   const transport = client && client.getTransport();
@@ -57,6 +58,19 @@ export async function sendFeedbackRequest(
 
     const envelope = createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel);
 
+    let attachment_envelope;
+    for (const attachment of screenshots || []) {
+      attachment_envelope = createAttachmentEnvelope(
+        feedbackEvent,
+        attachment,
+        dsn,
+        client.getOptions()._metadata,
+        client.getOptions().tunnel,
+        // eslint-disable-next-line @sentry-internal/sdk/no-optional-chaining
+        client.getOptions().transportOptions && client.getOptions().transportOptions?.textEncoder,
+      );
+    }
+
     let response: void | TransportMakeRequestResponse;
 
     try {
@@ -84,6 +98,33 @@ export async function sendFeedbackRequest(
       throw new Error('Unable to send Feedback');
     }
 
+    if (attachment_envelope) {
+      try {
+        response = await transport.send(attachment_envelope);
+      } catch (err) {
+        const error = new Error('Unable to send Feedback screenshot');
+
+        try {
+          // In case browsers don't allow this property to be writable
+          // @ts-expect-error This needs lib es2022 and newer
+          error.cause = err;
+        } catch {
+          // nothing to do
+        }
+        throw error;
+      }
+
+      // TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
+      if (!response) {
+        return;
+      }
+
+      // Require valid status codes, otherwise can assume feedback was not sent successfully
+      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+        throw new Error('Unable to send Feedback screenshot');
+      }
+    }
+
     return response;
   });
 }
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 463017f24125..18e287556f85 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -1,4 +1,10 @@
-import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
+import type {
+  FeedbackComponent,
+  FeedbackFormData,
+  FeedbackInternalOptions,
+  FeedbackTextConfiguration,
+  Screenshot,
+} from '../types';
 import { SubmitButton } from './SubmitButton';
 import { createElement } from './util/createElement';
 import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
@@ -21,7 +27,7 @@ export interface FormComponentProps
    */
   defaultEmail: string;
   onCancel?: (e: Event) => void;
-  onSubmit?: (feedback: FeedbackFormData) => void;
+  onSubmit?: (feedback: FeedbackFormData, screenshots?: Screenshot[]) => void;
 }
 
 interface FormComponent extends FeedbackComponent<HTMLFormElement> {
@@ -44,6 +50,22 @@ function retrieveStringValue(formData: FormData, key: string): string {
   return '';
 }
 
+async function canvasToUint8Array(image: HTMLCanvasElement): Promise<Uint8Array | null> {
+  const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob | null> => {
+    return new Promise(resolve => {
+      canvas.toBlob(blob => {
+        resolve(blob);
+      });
+    });
+  };
+  const blob = await canvasToBlob(image);
+  if (blob) {
+    const blobData = await blob.arrayBuffer();
+    return new Uint8Array(blobData);
+  }
+  return null;
+}
+
 /**
  * Creates the form element
  */
@@ -67,11 +89,15 @@ export function Form({
   onCancel,
   onSubmit,
 }: FormComponentProps): FormComponent {
+  let screenshotImage: HTMLCanvasElement | null = null;
+  function setScreenshotImage(newScreenshot: HTMLCanvasElement | null): void {
+    screenshotImage = newScreenshot;
+  }
   const { el: submitEl } = SubmitButton({
     label: submitButtonLabel,
   });
 
-  function handleSubmit(e: Event): void {
+  async function handleSubmit(e: Event): Promise<void> {
     e.preventDefault();
 
     if (!(e.target instanceof HTMLFormElement)) {
@@ -81,15 +107,22 @@ export function Form({
     try {
       if (onSubmit) {
         const formData = new FormData(e.target as HTMLFormElement);
-        const imageData = undefined;
         const feedback = {
           name: retrieveStringValue(formData, 'name'),
           email: retrieveStringValue(formData, 'email'),
           message: retrieveStringValue(formData, 'message'),
-          screenshot: imageData,
         };
 
-        onSubmit(feedback);
+        if (screenshotImage) {
+          const screenshotBlob = await canvasToUint8Array(screenshotImage);
+          if (screenshotBlob) {
+            onSubmit(feedback, [
+              { filename: 'screenshot.png', data: screenshotBlob, contentType: 'application/octet-stream' },
+            ]);
+          }
+        } else {
+          onSubmit(feedback);
+        }
       }
     } catch {
       // pass
@@ -166,7 +199,7 @@ export function Form({
   ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
     croppingRef: screenshot,
     buttonRef: screenshotButton,
-    props: null,
+    props: { screenshotImage, setScreenshotImage },
   });
 
   const formEl = createElement(
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
index 505602e6a04e..87f6f464294c 100644
--- a/packages/feedback/src/widget/createWidget.ts
+++ b/packages/feedback/src/widget/createWidget.ts
@@ -1,8 +1,7 @@
 import { getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
-import * as Sentry from '@sentry/browser';
 
-import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
+import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget, Screenshot } from '../types';
 import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
 import type { ActorComponent } from './Actor';
 import { Actor } from './Actor';
@@ -77,7 +76,6 @@ export function createWidget({
     } catch (err) {
       // TODO: error handling
       logger.error(err);
-      console.log(err);
     }
   }
 
@@ -85,7 +83,7 @@ export function createWidget({
    * Handler for when the feedback form is completed by the user. This will
    * create and send the feedback message as an event.
    */
-  async function _handleFeedbackSubmit(feedback: FeedbackFormData): Promise<void> {
+  async function _handleFeedbackSubmit(feedback: FeedbackFormData, screenshots?: Screenshot[]): Promise<void> {
     if (!dialog) {
       return;
     }
@@ -106,7 +104,7 @@ export function createWidget({
       return;
     }
 
-    const result = await handleFeedbackSubmit(dialog, feedback);
+    const result = await handleFeedbackSubmit(dialog, feedback, screenshots);
 
     // Error submitting feedback
     if (!result) {
@@ -120,15 +118,6 @@ export function createWidget({
     // Success
     removeDialog();
     showSuccessMessage();
-    Sentry.withScope(scope => {
-      if (feedback.screenshot) {
-        scope.addAttachment({
-          filename: 'screenshot.png',
-          data: feedback.screenshot,
-          contentType: 'image/png',
-        });
-      }
-    });
 
     if (options.onSubmitSuccess) {
       options.onSubmitSuccess();

From ea7b909f5a54174f66124aa4a5ae0d680473d51b Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 22 Feb 2024 10:52:55 -0500
Subject: [PATCH 17/54] clean up attachment code

---
 packages/core/src/envelope.ts                 | 11 +++----
 packages/feedback/src/sendFeedback.ts         |  5 ++--
 packages/feedback/src/types/index.ts          | 10 ++-----
 .../feedback/src/util/handleFeedbackSubmit.ts |  6 ++--
 .../feedback/src/util/sendFeedbackRequest.ts  | 29 ++++++++-----------
 packages/feedback/src/widget/Form.ts          | 11 ++-----
 packages/feedback/src/widget/createWidget.ts  |  8 ++---
 7 files changed, 32 insertions(+), 48 deletions(-)

diff --git a/packages/core/src/envelope.ts b/packages/core/src/envelope.ts
index 02a58a2af31e..3189cdc5278a 100644
--- a/packages/core/src/envelope.ts
+++ b/packages/core/src/envelope.ts
@@ -11,7 +11,6 @@ import type {
   SessionAggregates,
   SessionEnvelope,
   SessionItem,
-  TextEncoderInternal,
 } from '@sentry/types';
 import {
   createAttachmentEnvelopeItem,
@@ -96,11 +95,10 @@ export function createEventEnvelope(
  */
 export function createAttachmentEnvelope(
   event: Event,
-  attachment: Attachment,
+  attachments: Attachment[],
   dsn?: DsnComponents,
   metadata?: SdkMetadata,
   tunnel?: string,
-  textEncoder?: TextEncoderInternal,
 ): EventEnvelope {
   const sdkInfo = getSdkMetadataForEnvelopeHeader(metadata);
   enhanceEventWithSdkInfo(event, metadata && metadata.sdk);
@@ -113,6 +111,9 @@ export function createAttachmentEnvelope(
   // of this `delete`, lest we miss putting it back in the next time the property is in use.)
   delete event.sdkProcessingMetadata;
 
-  const attachmentItem: AttachmentItem = createAttachmentEnvelopeItem(attachment, textEncoder);
-  return createEnvelope<EventEnvelope>(envelopeHeaders, [attachmentItem]);
+  const attachmentItems: AttachmentItem[] = [];
+  for (const attachment of attachments || []) {
+    attachmentItems.push(createAttachmentEnvelopeItem(attachment));
+  }
+  return createEnvelope<EventEnvelope>(envelopeHeaders, attachmentItems);
 }
diff --git a/packages/feedback/src/sendFeedback.ts b/packages/feedback/src/sendFeedback.ts
index f786c16f5548..956f901189cb 100644
--- a/packages/feedback/src/sendFeedback.ts
+++ b/packages/feedback/src/sendFeedback.ts
@@ -1,8 +1,9 @@
 import { getLocationHref } from '@sentry/utils';
 
 import { FEEDBACK_API_SOURCE } from './constants';
-import type { Screenshot, SendFeedbackOptions } from './types';
+import type { SendFeedbackOptions } from './types';
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
+import type { Attachment } from '@sentry/types';
 
 interface SendFeedbackParams {
   message: string;
@@ -18,7 +19,7 @@ interface SendFeedbackParams {
 export function sendFeedback(
   { name, email, message, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   options: SendFeedbackOptions = {},
-  screenshots: Screenshot[] = [],
+  screenshots: Attachment[] = [],
 ): ReturnType<typeof sendFeedbackRequest> {
   if (!message) {
     throw new Error('Unable to submit feedback with empty message');
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index f0c74af5dfa5..adb9c4bf341d 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -1,4 +1,4 @@
-import type { Primitive } from '@sentry/types';
+import type { Attachment, Primitive } from '@sentry/types';
 
 import type { ActorComponent } from '../widget/Actor';
 import type { DialogComponent } from '../widget/Dialog';
@@ -21,7 +21,7 @@ export interface SendFeedbackOptions {
    * Should include replay with the feedback?
    */
   includeReplay?: boolean;
-  screenshots?: Screenshot[];
+  screenshots?: Attachment[];
 }
 
 /**
@@ -343,9 +343,3 @@ export interface FeedbackWidget {
   closeDialog: () => void;
   removeDialog: () => void;
 }
-
-export interface Screenshot {
-  filename: string;
-  data: Uint8Array;
-  contentType: string;
-}
diff --git a/packages/feedback/src/util/handleFeedbackSubmit.ts b/packages/feedback/src/util/handleFeedbackSubmit.ts
index 0d6a15cc0496..1143413843f9 100644
--- a/packages/feedback/src/util/handleFeedbackSubmit.ts
+++ b/packages/feedback/src/util/handleFeedbackSubmit.ts
@@ -1,10 +1,10 @@
-import type { TransportMakeRequestResponse } from '@sentry/types';
+import type { Attachment, TransportMakeRequestResponse } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
 import { FEEDBACK_WIDGET_SOURCE } from '../constants';
 import { DEBUG_BUILD } from '../debug-build';
 import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData, Screenshot, SendFeedbackOptions } from '../types';
+import type { FeedbackFormData, SendFeedbackOptions } from '../types';
 import type { DialogComponent } from '../widget/Dialog';
 
 /**
@@ -14,7 +14,7 @@ import type { DialogComponent } from '../widget/Dialog';
 export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
-  screenshots?: Screenshot[],
+  screenshots?: Attachment[],
   options?: SendFeedbackOptions,
 ): Promise<TransportMakeRequestResponse | void> {
   if (!dialog) {
diff --git a/packages/feedback/src/util/sendFeedbackRequest.ts b/packages/feedback/src/util/sendFeedbackRequest.ts
index 76527c4ddd0c..8a1a6129aedd 100644
--- a/packages/feedback/src/util/sendFeedbackRequest.ts
+++ b/packages/feedback/src/util/sendFeedbackRequest.ts
@@ -1,8 +1,8 @@
 import { createEventEnvelope, getClient, withScope, createAttachmentEnvelope } from '@sentry/core';
-import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
+import type { Attachment, FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
 
 import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import type { Screenshot, SendFeedbackData, SendFeedbackOptions } from '../types';
+import type { SendFeedbackData, SendFeedbackOptions } from '../types';
 import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 
 /**
@@ -11,7 +11,7 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 export async function sendFeedbackRequest(
   { feedback: { message, email, name, source, url } }: SendFeedbackData,
   { includeReplay = true }: SendFeedbackOptions = {},
-  screenshots: Screenshot[],
+  screenshots: Attachment[],
 ): Promise<void | TransportMakeRequestResponse> {
   const client = getClient();
   const transport = client && client.getTransport();
@@ -56,19 +56,6 @@ export async function sendFeedbackRequest(
 
     const envelope = createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel);
 
-    let attachment_envelope;
-    for (const attachment of screenshots || []) {
-      attachment_envelope = createAttachmentEnvelope(
-        feedbackEvent,
-        attachment,
-        dsn,
-        client.getOptions()._metadata,
-        client.getOptions().tunnel,
-        // eslint-disable-next-line @sentry-internal/sdk/no-optional-chaining
-        client.getOptions().transportOptions && client.getOptions().transportOptions?.textEncoder,
-      );
-    }
-
     let response: void | TransportMakeRequestResponse;
 
     try {
@@ -96,7 +83,15 @@ export async function sendFeedbackRequest(
       throw new Error('Unable to send Feedback');
     }
 
-    if (attachment_envelope) {
+    if (screenshots) {
+      const attachment_envelope = createAttachmentEnvelope(
+        feedbackEvent,
+        screenshots,
+        dsn,
+        client.getOptions()._metadata,
+        client.getOptions().tunnel,
+      );
+
       try {
         response = await transport.send(attachment_envelope);
       } catch (err) {
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 18e287556f85..37793f57df9e 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -1,10 +1,5 @@
-import type {
-  FeedbackComponent,
-  FeedbackFormData,
-  FeedbackInternalOptions,
-  FeedbackTextConfiguration,
-  Screenshot,
-} from '../types';
+import type { Attachment } from '@sentry/types';
+import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
 import { SubmitButton } from './SubmitButton';
 import { createElement } from './util/createElement';
 import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
@@ -27,7 +22,7 @@ export interface FormComponentProps
    */
   defaultEmail: string;
   onCancel?: (e: Event) => void;
-  onSubmit?: (feedback: FeedbackFormData, screenshots?: Screenshot[]) => void;
+  onSubmit?: (feedback: FeedbackFormData, screenshots?: Attachment[]) => void;
 }
 
 interface FormComponent extends FeedbackComponent<HTMLFormElement> {
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
index 87f6f464294c..41064c48450f 100644
--- a/packages/feedback/src/widget/createWidget.ts
+++ b/packages/feedback/src/widget/createWidget.ts
@@ -1,7 +1,7 @@
 import { getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
-
-import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget, Screenshot } from '../types';
+import type { Attachment } from '@sentry/types';
+import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
 import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
 import type { ActorComponent } from './Actor';
 import { Actor } from './Actor';
@@ -83,7 +83,7 @@ export function createWidget({
    * Handler for when the feedback form is completed by the user. This will
    * create and send the feedback message as an event.
    */
-  async function _handleFeedbackSubmit(feedback: FeedbackFormData, screenshots?: Screenshot[]): Promise<void> {
+  async function _handleFeedbackSubmit(feedback: FeedbackFormData, screenshots?: Attachment[]): Promise<void> {
     if (!dialog) {
       return;
     }
@@ -210,8 +210,6 @@ export function createWidget({
       }
     } catch (err) {
       // TODO: Error handling?
-      logger.error(err);
-      console.log(err);
     }
   }
 

From 1b216b976ade27b987adc9374159ad40fd4a7ff2 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 22 Feb 2024 12:15:44 -0500
Subject: [PATCH 18/54] remove alias plugin

---
 dev-packages/rollup-utils/bundleHelpers.mjs         |  6 ++----
 dev-packages/rollup-utils/npmHelpers.mjs            |  3 ---
 dev-packages/rollup-utils/plugins/bundlePlugins.mjs | 13 -------------
 package.json                                        |  1 -
 yarn.lock                                           |  7 -------
 5 files changed, 2 insertions(+), 28 deletions(-)

diff --git a/dev-packages/rollup-utils/bundleHelpers.mjs b/dev-packages/rollup-utils/bundleHelpers.mjs
index a111ef0e6d46..609a4057e2fe 100644
--- a/dev-packages/rollup-utils/bundleHelpers.mjs
+++ b/dev-packages/rollup-utils/bundleHelpers.mjs
@@ -8,7 +8,6 @@ import deepMerge from 'deepmerge';
 
 import {
   getEs5Polyfills,
-  makeAliasPlugin,
   makeBrowserBuildPlugin,
   makeCleanupPlugin,
   makeCommonJSPlugin,
@@ -30,7 +29,6 @@ export function makeBaseBundleConfig(options) {
 
   const isEs5 = jsVersion.toLowerCase() === 'es5';
 
-  const aliasPlugin = makeAliasPlugin();
   const nodeResolvePlugin = makeNodeResolvePlugin();
   const sucrasePlugin = makeSucrasePlugin(options.sucrase);
   const cleanupPlugin = makeCleanupPlugin();
@@ -126,8 +124,8 @@ export function makeBaseBundleConfig(options) {
       esModule: false,
     },
     plugins: isEs5
-      ? [tsPlugin, aliasPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin]
-      : [sucrasePlugin, aliasPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin],
+      ? [tsPlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin]
+      : [sucrasePlugin, nodeResolvePlugin, cleanupPlugin, licensePlugin],
     treeshake: 'smallest',
   };
 
diff --git a/dev-packages/rollup-utils/npmHelpers.mjs b/dev-packages/rollup-utils/npmHelpers.mjs
index 12ddd7e331a0..18f753043ac7 100644
--- a/dev-packages/rollup-utils/npmHelpers.mjs
+++ b/dev-packages/rollup-utils/npmHelpers.mjs
@@ -9,7 +9,6 @@ import * as path from 'path';
 import deepMerge from 'deepmerge';
 
 import {
-  makeAliasPlugin,
   makeCleanupPlugin,
   makeDebugBuildStatementReplacePlugin,
   makeExtractPolyfillsPlugin,
@@ -32,7 +31,6 @@ export function makeBaseNPMConfig(options = {}) {
     sucrase = {},
   } = options;
 
-  const aliasPlugin = makeAliasPlugin();
   const nodeResolvePlugin = makeNodeResolvePlugin();
   const sucrasePlugin = makeSucrasePlugin({ disableESTransforms: !addPolyfills, ...sucrase });
   const debugBuildStatementReplacePlugin = makeDebugBuildStatementReplacePlugin();
@@ -94,7 +92,6 @@ export function makeBaseNPMConfig(options = {}) {
     },
 
     plugins: [
-      aliasPlugin,
       nodeResolvePlugin,
       setSdkSourcePlugin,
       sucrasePlugin,
diff --git a/dev-packages/rollup-utils/plugins/bundlePlugins.mjs b/dev-packages/rollup-utils/plugins/bundlePlugins.mjs
index a9c292df363b..1df1e2ac917d 100644
--- a/dev-packages/rollup-utils/plugins/bundlePlugins.mjs
+++ b/dev-packages/rollup-utils/plugins/bundlePlugins.mjs
@@ -1,5 +1,4 @@
 /**
- * Alias plugin docs: https://github.com/rollup/plugins/tree/master/packages/alias
  * CommonJS plugin docs: https://github.com/rollup/plugins/tree/master/packages/commonjs
  * License plugin docs: https://github.com/mjeanroy/rollup-plugin-license
  * Replace plugin docs: https://github.com/rollup/plugins/tree/master/packages/replace
@@ -14,7 +13,6 @@ import * as fs from 'fs';
 import * as path from 'path';
 import { fileURLToPath } from 'url';
 
-import alias from '@rollup/plugin-alias';
 import commonjs from '@rollup/plugin-commonjs';
 import { nodeResolve } from '@rollup/plugin-node-resolve';
 import replace from '@rollup/plugin-replace';
@@ -191,14 +189,3 @@ export function makeNodeResolvePlugin() {
 }
 
 export { commonjs as makeCommonJSPlugin };
-
-export function makeAliasPlugin() {
-  return alias({
-    entries: [
-      { find: 'react', replacement: 'preact/compat' },
-      { find: 'react-dom/test-utils', replacement: 'preact/test-utils' },
-      { find: 'react-dom', replacement: 'preact/compat' },
-      { find: 'react/jsx-runtime', replacement: 'preact/jsx-runtime' }
-    ]
-  });
-}
diff --git a/package.json b/package.json
index 0ed2b04e43d8..ef36567d47e3 100644
--- a/package.json
+++ b/package.json
@@ -91,7 +91,6 @@
   ],
   "devDependencies": {
     "@biomejs/biome": "^1.4.0",
-    "@rollup/plugin-alias": "^5.1.0",
     "@rollup/plugin-commonjs": "^21.0.1",
     "@rollup/plugin-node-resolve": "^13.1.3",
     "@rollup/plugin-replace": "^3.0.1",
diff --git a/yarn.lock b/yarn.lock
index 9a1418d369c9..884c47a0187b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5344,13 +5344,6 @@
   dependencies:
     web-streams-polyfill "^3.1.1"
 
-"@rollup/plugin-alias@^5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@rollup/plugin-alias/-/plugin-alias-5.1.0.tgz#99a94accc4ff9a3483be5baeedd5d7da3b597e93"
-  integrity sha512-lpA3RZ9PdIG7qqhEfv79tBffNaoDuukFDrmhLqg9ifv99u/ehn+lOg30x2zmhf8AQqQUZaMk/B9fZraQ6/acDQ==
-  dependencies:
-    slash "^4.0.0"
-
 "@rollup/plugin-commonjs@24.0.0":
   version "24.0.0"
   resolved "https://registry.yarnpkg.com/@rollup/plugin-commonjs/-/plugin-commonjs-24.0.0.tgz#fb7cf4a6029f07ec42b25daa535c75b05a43f75c"

From b03f61a0ad3a2c93da665d0ae3d283b4b60df892 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 22 Feb 2024 16:15:56 -0500
Subject: [PATCH 19/54] remove dialog when screenshotting

---
 packages/feedback-screenshot/src/screenshotButton.tsx        | 2 +-
 .../src/{screenshotWidget.tsx => screenshotEditor.tsx}       | 0
 packages/feedback-screenshot/src/useTakeScreenshot.tsx       | 5 +++++
 3 files changed, 6 insertions(+), 1 deletion(-)
 rename packages/feedback-screenshot/src/{screenshotWidget.tsx => screenshotEditor.tsx} (100%)

diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
index a2e853f2567d..4b72e80eac51 100644
--- a/packages/feedback-screenshot/src/screenshotButton.tsx
+++ b/packages/feedback-screenshot/src/screenshotButton.tsx
@@ -2,7 +2,7 @@ import { h, render } from 'preact';
 import { useState, useCallback, useEffect } from 'preact/hooks';
 import { useTakeScreenshot } from './useTakeScreenshot';
 import type { VNode } from 'preact';
-import { ScreenshotWidget } from './screenshotWidget';
+import { ScreenshotWidget } from './screenshotEditor';
 
 type Props = {
   croppingRef: HTMLDivElement;
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotEditor.tsx
similarity index 100%
rename from packages/feedback-screenshot/src/screenshotWidget.tsx
rename to packages/feedback-screenshot/src/screenshotEditor.tsx
diff --git a/packages/feedback-screenshot/src/useTakeScreenshot.tsx b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
index e031931ef598..09fffc535a9e 100644
--- a/packages/feedback-screenshot/src/useTakeScreenshot.tsx
+++ b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
@@ -40,10 +40,15 @@ export const useTakeScreenshot = () => {
   const takeScreenshotCallback = useCallback(async (): Promise<HTMLCanvasElement> => {
     setIsInProgress(true);
     let image: HTMLCanvasElement | null = null;
+    const style = document.createElement('style');
+    style.innerHTML = '.dialog { display: none; }';
+    document.getElementById('sentry-feedback')?.shadowRoot?.appendChild(style);
     try {
       image = await takeScreenshot();
+      document.getElementById('sentry-feedback')?.shadowRoot?.removeChild(style);
     } catch (error) {
       setIsInProgress(false);
+      document.getElementById('sentry-feedback')?.shadowRoot?.removeChild(style);
       throw error;
     }
     setIsInProgress(false);

From 30e9c405e20f9841c277cce16c4f3ebfee8dac79 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 29 Feb 2024 00:56:58 -0500
Subject: [PATCH 20/54] wip: cropping box follows mouse, need to remove
 screenshot editor & help  once submitting works

---
 .../src/screenshotButton.tsx                  |   2 +-
 .../src/screenshotEditor.tsx                  | 231 +++++++++++++++++-
 .../src/screenshotEditorHelp.tsx              | 112 +++++++++
 .../src/screenshotWidget.tsx                  | 207 ++++++++++++++++
 4 files changed, 541 insertions(+), 11 deletions(-)
 create mode 100644 packages/feedback-screenshot/src/screenshotEditorHelp.tsx
 create mode 100644 packages/feedback-screenshot/src/screenshotWidget.tsx

diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
index 4b72e80eac51..a2e853f2567d 100644
--- a/packages/feedback-screenshot/src/screenshotButton.tsx
+++ b/packages/feedback-screenshot/src/screenshotButton.tsx
@@ -2,7 +2,7 @@ import { h, render } from 'preact';
 import { useState, useCallback, useEffect } from 'preact/hooks';
 import { useTakeScreenshot } from './useTakeScreenshot';
 import type { VNode } from 'preact';
-import { ScreenshotWidget } from './screenshotEditor';
+import { ScreenshotWidget } from './screenshotWidget';
 
 type Props = {
   croppingRef: HTMLDivElement;
diff --git a/packages/feedback-screenshot/src/screenshotEditor.tsx b/packages/feedback-screenshot/src/screenshotEditor.tsx
index 3c64c86db85a..65575b8e5534 100644
--- a/packages/feedback-screenshot/src/screenshotEditor.tsx
+++ b/packages/feedback-screenshot/src/screenshotEditor.tsx
@@ -1,22 +1,233 @@
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
 import { h, render } from 'preact';
 import type { VNode } from 'preact';
+import { ScreenshotEditorHelp } from './screenshotEditorHelp';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
 
 type Props = {
   screenshotImage: HTMLCanvasElement | null;
   setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
 };
 // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
 export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
-  const image = screenshotImage;
-  return image ? (
+  // const image = screenshotImage;
+  // return image ? (
+  //   <div style="padding-right: 16px;">
+  //     <img
+  //       type="image"
+  //       src={image.toDataURL()}
+  //       id="screenshot"
+  //       name="screenshot"
+  //       style="width:100%; height:100%;"
+  //     ></img>
+  //   </div>
+  // ) : null;
+
+  // const Canvas = styled.canvas`
+  //   position: absolute;
+  //   cursor: crosshair;
+  //   max-width: 100vw;
+  //   max-height: 100vh;
+  // `;
+  // const Container = styled.div`
+  //   position: fixed;
+  //   z-index: 10000;
+  //   height: 100vh;
+  //   width: 100vw;
+  //   top: 0;
+  //   left: 0;
+  //   background-color: rgba(240, 236, 243, 1);
+  //   background-image: repeating-linear-gradient(
+  //     45deg,
+  //     transparent,
+  //     transparent 5px,
+  //     rgba(0, 0, 0, 0.03) 5px,
+  //     rgba(0, 0, 0, 0.03) 10px
+  //   );
+  // `;
+
+  const getCanvasRenderSize = (width: number, height: number) => {
+    const maxWidth = WINDOW.innerWidth;
+    const maxHeight = WINDOW.innerHeight;
+
+    if (width > maxWidth) {
+      height = (maxWidth / width) * height;
+      width = maxWidth;
+    }
+
+    if (height > maxHeight) {
+      width = (maxHeight / height) * width;
+      height = maxHeight;
+    }
+
+    return { width, height };
+  };
+
+  interface Point {
+    x: number;
+    y: number;
+  }
+
+  const constructRect = (start: Point, end: Point) => {
+    return {
+      x: Math.min(start.x, end.x),
+      y: Math.min(start.y, end.y),
+      width: Math.abs(start.x - end.x),
+      height: Math.abs(start.y - end.y),
+    };
+  };
+
+  const canvasRef = useRef<HTMLCanvasElement>(screenshotImage);
+  const [isDraggingState, setIsDraggingState] = useState(true);
+  const currentRatio = useRef<number>(1);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    // eslint-disable-next-line @sentry-internal/sdk/no-optional-chaining
+    const ctx = canvas?.getContext('2d');
+    let img = new Image();
+    const rectStart: { x: number; y: number } = { x: 0, y: 0 };
+    const rectEnd: { x: number; y: number } = { x: canvas?.width ?? 0, y: canvas?.height ?? 0 };
+    let isDragging = false;
+
+    function setCanvasSize() {
+      const renderSize = getCanvasRenderSize(img.width, img.height);
+      if (canvas) {
+        canvas.style.width = `${renderSize.width}px`;
+        canvas.style.height = `${renderSize.height}px`;
+        canvas.style.top = `${(WINDOW.innerHeight - renderSize.height) / 2}px`;
+        canvas.style.left = `${(WINDOW.innerWidth - renderSize.width) / 2}px`;
+        console.log(WINDOW.innerWidth, WINDOW.innerHeight, renderSize.width, renderSize.height);
+      }
+
+      // store it so we can translate the selection
+      currentRatio.current = renderSize.width / img.width;
+    }
+
+    function refreshCanvas() {
+      if (canvas && ctx) {
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(img, 0, 0);
+      }
+
+      if (!isDragging) {
+        return;
+      }
+
+      const rect = constructRect(rectStart, rectEnd);
+      if (canvas && ctx) {
+        // draw gray overlay around the selection
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.fillRect(0, 0, canvas.width, rect.y);
+        ctx.fillRect(0, rect.y, rect.x, rect.height);
+        ctx.fillRect(rect.x + rect.width, rect.y, canvas.width, rect.height);
+        ctx.fillRect(0, rect.y + rect.height, canvas.width, canvas.height);
+
+        // draw selection border
+        ctx.strokeStyle = '#79628c';
+        ctx.lineWidth = 6;
+        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+      }
+    }
+
+    function submit(rect?: Rect) {
+      if (!rect) {
+        setScreenshotImage(canvas);
+        return;
+      }
+      // eslint-disable-next-line no-restricted-globals
+      const cutoutCanvas = document.createElement('canvas');
+      cutoutCanvas.width = rect.width;
+      cutoutCanvas.height = rect.height;
+      const cutoutCtx = cutoutCanvas.getContext('2d');
+      if (cutoutCtx && canvas) {
+        cutoutCtx.drawImage(canvas, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
+      }
+
+      setScreenshotImage(cutoutCanvas);
+      img.src = cutoutCanvas.toDataURL();
+    }
+
+    function handleMouseDown(e: { offsetX: number; offsetY: number }) {
+      rectStart.x = Math.floor(e.offsetX / currentRatio.current);
+      rectStart.y = Math.floor(e.offsetY / currentRatio.current);
+      isDragging = true;
+      setIsDraggingState(true);
+    }
+
+    function handleMouseMove(e: { offsetX: number; offsetY: number }) {
+      rectEnd.x = Math.floor(e.offsetX / currentRatio.current);
+      rectEnd.y = Math.floor(e.offsetY / currentRatio.current);
+      refreshCanvas();
+    }
+
+    async function handleMouseUp() {
+      isDragging = false;
+      setIsDraggingState(false);
+      if (rectStart.x - rectEnd.x === 0 && rectStart.y - rectEnd.y === 0) {
+        // no selection
+        refreshCanvas();
+        return;
+      }
+      await submit(constructRect(rectStart, rectEnd));
+    }
+
+    async function handleEnterKey(e: { key: string }) {
+      if (e.key === 'Enter') {
+        await submit();
+      }
+    }
+
+    img.onload = () => {
+      if (canvas && ctx) {
+        canvas.width = img.width;
+        canvas.height = img.height;
+        setCanvasSize();
+        ctx.drawImage(img, 0, 0);
+      }
+    };
+
+    if (screenshotImage) {
+      img.src = screenshotImage.toDataURL();
+    }
+
+    WINDOW.addEventListener('resize', setCanvasSize, { passive: true });
+    canvas?.addEventListener('mousedown', handleMouseDown);
+    canvas?.addEventListener('mousemove', handleMouseMove);
+    canvas?.addEventListener('mouseup', handleMouseUp);
+    WINDOW.addEventListener('keydown', handleEnterKey);
+
+    return () => {
+      WINDOW.removeEventListener('resize', setCanvasSize);
+      canvas?.removeEventListener('mousedown', handleMouseDown);
+      canvas?.removeEventListener('mousemove', handleMouseMove);
+      canvas?.removeEventListener('mouseup', handleMouseUp);
+      WINDOW.removeEventListener('keydown', handleEnterKey);
+    };
+  }, [screenshotImage]);
+
+  return (
     <div style="padding-right: 16px;">
-      <img
-        type="image"
-        src={image.toDataURL()}
-        id="screenshot"
-        name="screenshot"
-        style="width:100%; height:100%;"
-      ></img>
+      <canvas
+        style="
+    width: 100%;
+    height: 100%;"
+        ref={canvasRef}
+      />
+      {/* <ScreenshotEditorHelp hide={isDraggingState} /> */}
     </div>
-  ) : null;
+  );
 }
diff --git a/packages/feedback-screenshot/src/screenshotEditorHelp.tsx b/packages/feedback-screenshot/src/screenshotEditorHelp.tsx
new file mode 100644
index 000000000000..af3ef7e30c55
--- /dev/null
+++ b/packages/feedback-screenshot/src/screenshotEditorHelp.tsx
@@ -0,0 +1,112 @@
+/* eslint-disable @sentry-internal/sdk/no-optional-chaining */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import { h, render } from 'preact';
+import { useEffect, useState, useRef } from 'preact/hooks';
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
+// const Wrapper = styled.div`
+//   position: fixed;
+//   width: 100vw;
+//   padding-top: 8px;
+//   left: 0;
+//   pointer-events: none;
+//   display: flex;
+//   justify-content: center;
+//   transition: transform 0.2s ease-in-out;
+//   transition-delay: 0.5s;
+//   transform: translateY(0);
+//   &[data-hide='true'] {
+//     transition-delay: 0s;
+//     transform: translateY(-100%);
+//   }
+// `;
+
+// const Content = styled.div`
+//   background-color: #231c3d;
+//   border: 1px solid #ccc;
+//   border-radius: 20px;
+//   color: #fff;
+//   font-size: 14px;
+//   padding: 6px 24px;
+//   box-shadow:
+//     0 0 0 1px rgba(0, 0, 0, 0.05),
+//     0 4px 16px rgba(0, 0, 0, 0.2);
+// `;
+
+export function ScreenshotEditorHelp({ hide }: { hide: boolean }) {
+  const [isHidden, setIsHidden] = useState(false);
+  const contentRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    let boundingRect: DOMRect;
+    if (contentRef.current) {
+      boundingRect = contentRef.current?.getBoundingClientRect();
+    }
+    const handleMouseMove = (e: MouseEvent) => {
+      const { clientX, clientY } = e;
+      const { left, bottom, right } = boundingRect;
+      const threshold = 50;
+      const isNearContent = clientX > left - threshold && clientX < right + threshold && clientY < bottom + threshold;
+      if (isNearContent) {
+        setIsHidden(true);
+      } else {
+        setIsHidden(false);
+      }
+    };
+
+    function handleResize() {
+      if (contentRef.current) {
+        boundingRect = contentRef.current?.getBoundingClientRect();
+      }
+    }
+
+    WINDOW.addEventListener('resize', handleResize);
+    WINDOW.addEventListener('mousemove', handleMouseMove);
+    return () => {
+      WINDOW.removeEventListener('resize', handleResize);
+      WINDOW.removeEventListener('mousemove', handleMouseMove);
+    };
+  }, []);
+
+  return (
+    <div
+      style="  position: fixed;
+    width: 100vw;
+    padding-top: 8px;
+    left: 0;
+    pointer-events: none;
+    display: flex;
+    justify-content: center;
+    transition: transform 0.2s ease-in-out;
+    transition-delay: 0.5s;
+    transform: translateY(0);
+    &[data-hide='true'] {
+      transition-delay: 0s;
+      transform: translateY(-100%);
+    }"
+      data-hide={isHidden || hide}
+    >
+      <div
+        style="  background-color: #231c3d;
+        border: 1px solid #ccc;
+        border-radius: 20px;
+        color: #fff;
+        font-size: 14px;
+        padding: 6px 24px;
+        box-shadow:
+          0 0 0 1px rgba(0, 0, 0, 0.05),
+          0 4px 16px rgba(0, 0, 0, 0.2);"
+        ref={contentRef}
+      >
+        {'Mark the problem on the screen (press "Enter" to skip)'}
+        <button>Cancel</button>
+        <button>Confirm</button>
+      </div>
+    </div>
+  );
+}
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
new file mode 100644
index 000000000000..b5564e23d477
--- /dev/null
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -0,0 +1,207 @@
+import type { VNode } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { GLOBAL_OBJ } from '@sentry/utils';
+import { h } from 'preact';
+import { once } from 'events';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+
+type Props = {
+  screenshotImage: HTMLCanvasElement | null;
+  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
+};
+
+interface Point {
+  x: number;
+  y: number;
+}
+
+export interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+const constructRect = (start: Point, end: Point) => {
+  return {
+    x: Math.min(start.x, end.x),
+    y: Math.min(start.y, end.y),
+    width: Math.abs(start.x - end.x),
+    height: Math.abs(start.y - end.y),
+  };
+};
+
+const getCanvasRenderSize = (width: number, height: number) => {
+  const maxWidth = WINDOW.innerWidth;
+  const maxHeight = WINDOW.innerHeight;
+
+  if (width > maxWidth) {
+    height = (maxWidth / width) * height;
+    width = maxWidth;
+  }
+
+  if (height > maxHeight) {
+    width = (maxHeight / height) * width;
+    height = maxHeight;
+  }
+
+  return { width, height };
+};
+
+export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const currentRatio = useRef<number>(1);
+  const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
+  const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 });
+  const [confirmCrop, setConfirmCrop] = useState(false);
+  const [crop, setCrop] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
+  const imageRef = useRef<HTMLCanvasElement>(null);
+  const renderSize = getCanvasRenderSize(screenshotImage?.width ?? 0, screenshotImage?.height ?? 0);
+
+  useEffect(() => {
+    const imageCanvas = imageRef.current;
+    const ctx = imageCanvas?.getContext('2d');
+    const img = new Image();
+    if (screenshotImage) {
+      img.src = screenshotImage.toDataURL();
+    }
+    img.onload = () => {
+      if (imageCanvas && ctx) {
+        imageCanvas.width = img.width;
+        imageCanvas.height = img.height;
+        setCanvasSize(imageCanvas);
+        ctx.drawImage(img, 0, 0);
+      }
+    };
+  }, [screenshotImage]);
+
+  function setCanvasSize(canvas: HTMLCanvasElement) {
+    if (screenshotImage) {
+      canvas.style.width = `${renderSize.width}px`;
+      canvas.style.height = `${renderSize.height}px`;
+      canvas.style.top = `${(WINDOW.innerHeight - renderSize.height) / 2}px`;
+      canvas.style.left = `${(WINDOW.innerWidth - renderSize.width) / 2}px`;
+
+      setRectEnd({ x: renderSize.width, y: renderSize.height });
+    }
+  }
+
+  function refreshCanvas() {
+    const canvas = canvasRef.current;
+    const ctx = canvas?.getContext('2d');
+    if (canvas && ctx) {
+      ctx.clearRect(0, 0, canvas.width, canvas.height);
+
+      const rect = constructRect(rectStart, rectEnd);
+      setCrop(rect);
+
+      // draw gray overlay around the selection
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.fillRect(0, 0, canvas.width, rect.y);
+      ctx.fillRect(0, rect.y, rect.x, rect.height);
+      ctx.fillRect(rect.x + rect.width, rect.y, canvas.width, rect.height);
+      ctx.fillRect(0, rect.y + rect.height, canvas.width, canvas.height);
+
+      // draw selection border
+      ctx.strokeStyle = '#ff0000';
+      ctx.lineWidth = 6;
+      ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
+    }
+  }
+
+  const handleMouseMove = useCallback((e: { offsetX: number; offsetY: number }) => {
+    console.log('move');
+    setRectStart({
+      x: Math.floor(e.offsetX / currentRatio.current),
+      y: Math.floor(e.offsetY / currentRatio.current),
+    });
+  }, []);
+
+  const handleMouseUp = useCallback(() => {
+    console.log('up');
+    canvasRef.current?.removeEventListener('mousemove', handleMouseMove);
+    canvasRef.current?.removeEventListener('click', handleMouseUp);
+    setConfirmCrop(true);
+  }, []);
+
+  function onGrabButton() {
+    console.log('down');
+    setConfirmCrop(false);
+    canvasRef.current?.addEventListener('click', handleMouseUp);
+    canvasRef.current?.addEventListener('mousemove', handleMouseMove);
+  }
+
+  // canvasRef.current?.addEventListener('mousedown', onGrabButton);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (canvas) {
+      canvas.width = renderSize.width;
+      canvas.height = renderSize.height;
+      setCanvasSize(canvas);
+    }
+  }, [screenshotImage]);
+
+  useEffect(() => {
+    refreshCanvas();
+  }, [rectStart, rectEnd]);
+
+  function submit(rect?: Rect) {
+    const canvas = imageRef.current;
+    if (!rect) {
+      setScreenshotImage(canvas);
+      return;
+    }
+    // eslint-disable-next-line no-restricted-globals
+    const cutoutCanvas = document.createElement('canvas');
+    cutoutCanvas.width = rect.width;
+    cutoutCanvas.height = rect.height;
+    const cutoutCtx = cutoutCanvas.getContext('2d');
+    if (cutoutCtx && canvas) {
+      cutoutCtx.drawImage(canvas, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
+    }
+
+    setScreenshotImage(cutoutCanvas);
+    screenshotImage = cutoutCanvas;
+  }
+
+  return (
+    <div style="padding-right: 16px; position:relative;">
+      <canvas ref={imageRef}></canvas>
+      <canvas style={{ position: 'absolute' }} ref={canvasRef}></canvas>
+      <button
+        style={{ width: '32px', position: 'absolute', left: rectStart.x, top: rectStart.y }}
+        onMouseDown={e => {
+          e.preventDefault();
+          onGrabButton();
+        }}
+        onClick={e => {
+          e.preventDefault();
+          handleMouseUp();
+        }}
+      ></button>
+      <button style={{ position: 'absolute', left: rectStart.x, top: rectEnd.y }}></button>
+      <button style={{ position: 'absolute', left: rectEnd.x, top: rectStart.y }}></button>
+      <button style={{ position: 'absolute', left: rectEnd.x, top: rectEnd.y }}></button>
+      <button
+        style={{
+          width: '100px',
+          height: '100px',
+          background: 'purple',
+          position: 'absolute',
+          left: 0,
+          top: 0,
+          display: confirmCrop ? 'inline' : 'none',
+        }}
+        onClick={e => {
+          e.preventDefault();
+          submit(crop);
+        }}
+      ></button>
+    </div>
+  );
+}

From a1771bd9c3fdf26055eb74466ea1a1b01faab87e Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 29 Feb 2024 12:44:35 -0500
Subject: [PATCH 21/54] cropping works for 1 cornergit add .

---
 .../src/screenshotWidget.tsx                  | 94 +++++++++++--------
 1 file changed, 55 insertions(+), 39 deletions(-)

diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index b5564e23d477..e8f29d188e2c 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -2,7 +2,6 @@ import type { VNode } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { GLOBAL_OBJ } from '@sentry/utils';
 import { h } from 'preact';
-import { once } from 'events';
 
 // exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
 // prevents the browser package from being bundled in the CDN bundle, and avoids a
@@ -60,31 +59,43 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
   const [confirmCrop, setConfirmCrop] = useState(false);
   const [crop, setCrop] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
   const imageRef = useRef<HTMLCanvasElement>(null);
-  const renderSize = getCanvasRenderSize(screenshotImage?.width ?? 0, screenshotImage?.height ?? 0);
+  const [image, setImage] = useState<HTMLCanvasElement | null>(screenshotImage);
 
   useEffect(() => {
     const imageCanvas = imageRef.current;
     const ctx = imageCanvas?.getContext('2d');
     const img = new Image();
-    if (screenshotImage) {
-      img.src = screenshotImage.toDataURL();
-    }
-    img.onload = () => {
-      if (imageCanvas && ctx) {
-        imageCanvas.width = img.width;
-        imageCanvas.height = img.height;
-        setCanvasSize(imageCanvas);
-        ctx.drawImage(img, 0, 0);
+
+    if (image) {
+      img.src = image.toDataURL();
+      const renderSize = getCanvasRenderSize(image.width, image.height);
+
+      img.onload = () => {
+        if (imageCanvas && ctx) {
+          imageCanvas.width = img.width;
+          imageCanvas.height = img.height;
+          setCanvasSize(imageCanvas);
+          ctx.drawImage(img, 0, 0);
+        }
+      };
+
+      const canvas = canvasRef.current;
+      if (canvas) {
+        canvas.width = renderSize.width;
+        canvas.height = renderSize.height;
+        setRectStart({ x: 0, y: 0 });
+        setCanvasSize(canvas);
       }
-    };
-  }, [screenshotImage]);
+    }
+  }, [image]);
 
   function setCanvasSize(canvas: HTMLCanvasElement) {
-    if (screenshotImage) {
+    if (image) {
+      const renderSize = getCanvasRenderSize(image.width, image.height);
       canvas.style.width = `${renderSize.width}px`;
       canvas.style.height = `${renderSize.height}px`;
-      canvas.style.top = `${(WINDOW.innerHeight - renderSize.height) / 2}px`;
-      canvas.style.left = `${(WINDOW.innerWidth - renderSize.width) / 2}px`;
+      canvas.style.top = '0px';
+      canvas.style.left = '0px';
 
       setRectEnd({ x: renderSize.width, y: renderSize.height });
     }
@@ -135,17 +146,6 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     canvasRef.current?.addEventListener('mousemove', handleMouseMove);
   }
 
-  // canvasRef.current?.addEventListener('mousedown', onGrabButton);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    if (canvas) {
-      canvas.width = renderSize.width;
-      canvas.height = renderSize.height;
-      setCanvasSize(canvas);
-    }
-  }, [screenshotImage]);
-
   useEffect(() => {
     refreshCanvas();
   }, [rectStart, rectEnd]);
@@ -154,6 +154,7 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     const canvas = imageRef.current;
     if (!rect) {
       setScreenshotImage(canvas);
+      setImage(canvas);
       return;
     }
     // eslint-disable-next-line no-restricted-globals
@@ -166,7 +167,7 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     }
 
     setScreenshotImage(cutoutCanvas);
-    screenshotImage = cutoutCanvas;
+    setImage(cutoutCanvas);
   }
 
   return (
@@ -187,21 +188,36 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
       <button style={{ position: 'absolute', left: rectStart.x, top: rectEnd.y }}></button>
       <button style={{ position: 'absolute', left: rectEnd.x, top: rectStart.y }}></button>
       <button style={{ position: 'absolute', left: rectEnd.x, top: rectEnd.y }}></button>
-      <button
+      <div
         style={{
-          width: '100px',
-          height: '100px',
-          background: 'purple',
           position: 'absolute',
-          left: 0,
-          top: 0,
+          left: rectEnd.x,
+          top: rectEnd.y,
           display: confirmCrop ? 'inline' : 'none',
         }}
-        onClick={e => {
-          e.preventDefault();
-          submit(crop);
-        }}
-      ></button>
+      >
+        <button
+          onClick={e => {
+            e.preventDefault();
+            setRectStart({ x: 0, y: 0 });
+            setConfirmCrop(false);
+          }}
+        >
+          Cancel
+        </button>
+        <button
+          style={{
+            background: 'purple',
+          }}
+          onClick={e => {
+            e.preventDefault();
+            submit(crop);
+            setConfirmCrop(false);
+          }}
+        >
+          Submit
+        </button>
+      </div>
     </div>
   );
 }

From ea96f76d37a57d62cb58c32439d80932922b8a2d Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 29 Feb 2024 10:28:51 -0800
Subject: [PATCH 22/54] Ryan953/feedback async (#10683)

This is building off a version of
https://github.com/getsentry/sentry-javascript/pull/10590, specifically
working towards async loading of the Dialog component, and rewriting it
in preact in order to host and interact with the screenshot feature in
an easier way.

Setup in my test app is (gives screenshots):
```
import { feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration } from "@sentry-internal/feedback2";


  integrations: [
    feedback2Integration({
      colorScheme: 'light',
      isNameRequired: false,
      isEmailRequired: false,
    }),
    feedback2ModalIntegration(),
    feedback2ScreenshotIntegration(),
  ]
```
---
 .size-limit.js                                |  21 ++
 package.json                                  |   1 +
 packages/feedback2/.eslintignore              |   2 +
 packages/feedback2/.eslintrc.js               |  25 ++
 packages/feedback2/.gitignore                 |   4 +
 packages/feedback2/LICENSE                    |  14 +
 packages/feedback2/README.md                  |  20 ++
 packages/feedback2/jest.config.js             |   6 +
 packages/feedback2/package.json               |  64 ++++
 packages/feedback2/rollup.bundle.config.mjs   |  15 +
 packages/feedback2/rollup.npm.config.mjs      |  20 ++
 packages/feedback2/src/constants/index.ts     |  27 ++
 packages/feedback2/src/constants/theme.ts     |  55 ++++
 .../src/core/components/Actor.css.ts          |  63 ++++
 .../feedback2/src/core/components/Actor.ts    |  48 +++
 .../src/core/components/FeedbackIcon.ts       |  49 ++++
 .../feedback2/src/core/createMainStyles.ts    |  73 +++++
 packages/feedback2/src/core/integration.ts    | 277 ++++++++++++++++++
 packages/feedback2/src/core/sendFeedback.ts   | 142 +++++++++
 packages/feedback2/src/index.ts               |   7 +
 .../src/modal/components/Dialog.css.ts        | 224 ++++++++++++++
 .../src/modal/components/DialogContainer.tsx  |  58 ++++
 .../src/modal/components/DialogContent.tsx    |  21 ++
 .../src/modal/components/DialogHeader.tsx     |  32 ++
 .../feedback2/src/modal/components/Form.tsx   | 233 +++++++++++++++
 .../feedback2/src/modal/components/Icon.ts    |  49 ++++
 .../src/modal/components/SentryLogo.ts        |  53 ++++
 .../src/modal/components/SuccessIcon.ts       |  54 ++++
 packages/feedback2/src/modal/createDialog.tsx |  94 ++++++
 packages/feedback2/src/modal/integration.ts   |  22 ++
 .../components/ScreenshotEditor.tsx           |  61 ++++
 .../components/ScreenshotInput.css.ts         |  52 ++++
 .../components/useTakeScreenshot.tsx          |  44 +++
 .../feedback2/src/screenshot/createInput.ts   |  33 +++
 .../feedback2/src/screenshot/integration.ts   |  22 ++
 packages/feedback2/src/types/config.ts        | 170 +++++++++++
 packages/feedback2/src/types/form.ts          |   8 +
 packages/feedback2/src/types/index.ts         | 101 +++++++
 packages/feedback2/src/types/theme.ts         | 118 ++++++++
 packages/feedback2/src/util/debug-build.ts    |   8 +
 packages/feedback2/src/util/mergeOptions.ts   |  42 +++
 .../src/util/prepareFeedbackEvent.ts          |  43 +++
 .../feedback2/src/util/setAttributesNS.ts     |   9 +
 packages/feedback2/src/util/validate.ts       |  24 ++
 packages/feedback2/tsconfig.json              |  17 ++
 packages/feedback2/tsconfig.test.json         |  15 +
 packages/feedback2/tsconfig.types.json        |  10 +
 packages/types/src/feedback.ts                |  13 +-
 packages/types/src/index.ts                   |   4 +-
 packages/types/src/user.ts                    |   7 -
 50 files changed, 2564 insertions(+), 10 deletions(-)
 create mode 100644 packages/feedback2/.eslintignore
 create mode 100644 packages/feedback2/.eslintrc.js
 create mode 100644 packages/feedback2/.gitignore
 create mode 100644 packages/feedback2/LICENSE
 create mode 100644 packages/feedback2/README.md
 create mode 100644 packages/feedback2/jest.config.js
 create mode 100644 packages/feedback2/package.json
 create mode 100644 packages/feedback2/rollup.bundle.config.mjs
 create mode 100644 packages/feedback2/rollup.npm.config.mjs
 create mode 100644 packages/feedback2/src/constants/index.ts
 create mode 100644 packages/feedback2/src/constants/theme.ts
 create mode 100644 packages/feedback2/src/core/components/Actor.css.ts
 create mode 100644 packages/feedback2/src/core/components/Actor.ts
 create mode 100644 packages/feedback2/src/core/components/FeedbackIcon.ts
 create mode 100644 packages/feedback2/src/core/createMainStyles.ts
 create mode 100644 packages/feedback2/src/core/integration.ts
 create mode 100644 packages/feedback2/src/core/sendFeedback.ts
 create mode 100644 packages/feedback2/src/index.ts
 create mode 100644 packages/feedback2/src/modal/components/Dialog.css.ts
 create mode 100644 packages/feedback2/src/modal/components/DialogContainer.tsx
 create mode 100644 packages/feedback2/src/modal/components/DialogContent.tsx
 create mode 100644 packages/feedback2/src/modal/components/DialogHeader.tsx
 create mode 100644 packages/feedback2/src/modal/components/Form.tsx
 create mode 100644 packages/feedback2/src/modal/components/Icon.ts
 create mode 100644 packages/feedback2/src/modal/components/SentryLogo.ts
 create mode 100644 packages/feedback2/src/modal/components/SuccessIcon.ts
 create mode 100644 packages/feedback2/src/modal/createDialog.tsx
 create mode 100644 packages/feedback2/src/modal/integration.ts
 create mode 100644 packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
 create mode 100644 packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
 create mode 100644 packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
 create mode 100644 packages/feedback2/src/screenshot/createInput.ts
 create mode 100644 packages/feedback2/src/screenshot/integration.ts
 create mode 100644 packages/feedback2/src/types/config.ts
 create mode 100644 packages/feedback2/src/types/form.ts
 create mode 100644 packages/feedback2/src/types/index.ts
 create mode 100644 packages/feedback2/src/types/theme.ts
 create mode 100644 packages/feedback2/src/util/debug-build.ts
 create mode 100644 packages/feedback2/src/util/mergeOptions.ts
 create mode 100644 packages/feedback2/src/util/prepareFeedbackEvent.ts
 create mode 100644 packages/feedback2/src/util/setAttributesNS.ts
 create mode 100644 packages/feedback2/src/util/validate.ts
 create mode 100644 packages/feedback2/tsconfig.json
 create mode 100644 packages/feedback2/tsconfig.test.json
 create mode 100644 packages/feedback2/tsconfig.types.json

diff --git a/.size-limit.js b/.size-limit.js
index 5e94a923e656..cbc2f411b628 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -61,6 +61,27 @@ module.exports = [
     gzip: true,
     limit: '50 KB',
   },
+  {
+    name: '@sentry/browser (incl. feedback2Integration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedback2ModalIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration, feedback2ModalIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
+  {
+    name: '@sentry/browser (incl. feedback2ScreenshotIntegration) - Webpack (gzipped)',
+    path: 'packages/browser/build/npm/esm/index.js',
+    import: '{ init, feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration }',
+    gzip: true,
+    limit: '50 KB',
+  },
   {
     name: '@sentry/browser (incl. sendFeedback) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
diff --git a/package.json b/package.json
index ef36567d47e3..414d4d00713b 100644
--- a/package.json
+++ b/package.json
@@ -57,6 +57,7 @@
     "packages/eslint-plugin-sdk",
     "packages/feedback",
     "packages/feedback-screenshot",
+    "packages/feedback2",
     "packages/gatsby",
     "packages/hub",
     "packages/integrations",
diff --git a/packages/feedback2/.eslintignore b/packages/feedback2/.eslintignore
new file mode 100644
index 000000000000..b38db2f296ff
--- /dev/null
+++ b/packages/feedback2/.eslintignore
@@ -0,0 +1,2 @@
+node_modules/
+build/
diff --git a/packages/feedback2/.eslintrc.js b/packages/feedback2/.eslintrc.js
new file mode 100644
index 000000000000..ef2ed992265c
--- /dev/null
+++ b/packages/feedback2/.eslintrc.js
@@ -0,0 +1,25 @@
+// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
+// lives
+
+// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
+
+module.exports = {
+  extends: ['../../.eslintrc.js'],
+  overrides: [
+    {
+      files: ['src/**/*.ts', 'src/**/*.tsx'],
+      rules: {
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
+      },
+    },
+    {
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
+      },
+      rules: {
+        'no-console': 'off',
+      },
+    },
+  ],
+};
diff --git a/packages/feedback2/.gitignore b/packages/feedback2/.gitignore
new file mode 100644
index 000000000000..363d3467c6fa
--- /dev/null
+++ b/packages/feedback2/.gitignore
@@ -0,0 +1,4 @@
+node_modules
+/*.tgz
+.eslintcache
+build
diff --git a/packages/feedback2/LICENSE b/packages/feedback2/LICENSE
new file mode 100644
index 000000000000..d11896ba1181
--- /dev/null
+++ b/packages/feedback2/LICENSE
@@ -0,0 +1,14 @@
+Copyright (c) 2023 Sentry (https://sentry.io) and individual contributors. All rights reserved.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/feedback2/README.md b/packages/feedback2/README.md
new file mode 100644
index 000000000000..fb5b20400a71
--- /dev/null
+++ b/packages/feedback2/README.md
@@ -0,0 +1,20 @@
+<p align="center">
+  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
+    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
+  </a>
+</p>
+
+# Sentry Integration for Feedback
+
+This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
+[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
+
+To view Feedback in Sentry, your [Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
+
+## Installation
+
+Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for installation instructions.
+
+## Configuration
+
+The Feedback integration is highly customizable, please read the [official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the most up-to-date configuration options.
diff --git a/packages/feedback2/jest.config.js b/packages/feedback2/jest.config.js
new file mode 100644
index 000000000000..cd02790794a7
--- /dev/null
+++ b/packages/feedback2/jest.config.js
@@ -0,0 +1,6 @@
+const baseConfig = require('../../jest/jest.config.js');
+
+module.exports = {
+  ...baseConfig,
+  testEnvironment: 'jsdom',
+};
diff --git a/packages/feedback2/package.json b/packages/feedback2/package.json
new file mode 100644
index 000000000000..416ba4436049
--- /dev/null
+++ b/packages/feedback2/package.json
@@ -0,0 +1,64 @@
+{
+  "name": "@sentry-internal/feedback2",
+  "version": "7.100.0",
+  "description": "Sentry SDK integration for user feedback",
+  "repository": "git://github.com/getsentry/sentry-javascript.git",
+  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
+  "author": "Sentry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=12"
+  },
+  "files": [
+    "cjs",
+    "esm",
+    "types",
+    "types-ts3.8"
+  ],
+  "main": "build/npm/cjs/index.js",
+  "module": "build/npm/esm/index.js",
+  "types": "build/npm/types/index.d.ts",
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@sentry/core": "7.100.0",
+    "@sentry/types": "7.100.0",
+    "@sentry/utils": "7.100.0",
+    "preact": "^10.19.4",
+    "preact-compat": "^3.19.0"
+  },
+  "scripts": {
+    "build": "run-p build:transpile build:types build:bundle",
+    "build:transpile": "rollup -c rollup.npm.config.mjs",
+    "build:bundle": "rollup -c rollup.bundle.config.mjs",
+    "build:dev": "run-p build:transpile build:types",
+    "build:types": "run-s build:types:core build:types:downlevel",
+    "build:types:core": "tsc -p tsconfig.types.json",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
+    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
+    "build:transpile:watch": "yarn build:transpile --watch",
+    "build:bundle:watch": "yarn build:bundle --watch",
+    "build:types:watch": "tsc -p tsconfig.types.json --watch",
+    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
+    "circularDepCheck": "madge --circular src/index.ts",
+    "clean": "rimraf build sentry-feedback-*.tgz",
+    "fix": "eslint . --format stylish --fix",
+    "lint": "eslint . --format stylish",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "sideEffects": false
+}
diff --git a/packages/feedback2/rollup.bundle.config.mjs b/packages/feedback2/rollup.bundle.config.mjs
new file mode 100644
index 000000000000..32c9684415bf
--- /dev/null
+++ b/packages/feedback2/rollup.bundle.config.mjs
@@ -0,0 +1,15 @@
+import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeBundleConfigVariants(
+  makeBaseBundleConfig({
+    bundleType: 'addon',
+    entrypoints: ['src/index.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry-internal/feedback2',
+    outputFileBase: () => 'bundles/feedback2',
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);
diff --git a/packages/feedback2/rollup.npm.config.mjs b/packages/feedback2/rollup.npm.config.mjs
new file mode 100644
index 000000000000..80f2406e78db
--- /dev/null
+++ b/packages/feedback2/rollup.npm.config.mjs
@@ -0,0 +1,20 @@
+import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
+
+export default makeNPMConfigVariants(
+  makeBaseNPMConfig({
+    hasBundles: true,
+    packageSpecificConfig: {
+      output: {
+        // set exports to 'named' or 'auto' so that rollup doesn't warn
+        exports: 'named',
+        // set preserveModules to false because for Feedback we actually want
+        // to bundle everything into one file.
+        preserveModules: false,
+      },
+    },
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);
diff --git a/packages/feedback2/src/constants/index.ts b/packages/feedback2/src/constants/index.ts
new file mode 100644
index 000000000000..9804fdedf431
--- /dev/null
+++ b/packages/feedback2/src/constants/index.ts
@@ -0,0 +1,27 @@
+import { GLOBAL_OBJ } from '@sentry/utils';
+
+export { DEFAULT_THEME } from './theme';
+
+// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
+// prevents the browser package from being bundled in the CDN bundle, and avoids a
+// circular dependency between the browser and feedback packages
+export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
+export const DOCUMENT = WINDOW.document;
+export const NAVIGATOR = WINDOW.navigator;
+
+export const ACTOR_LABEL = 'Report a Bug';
+export const CANCEL_BUTTON_LABEL = 'Cancel';
+export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
+export const FORM_TITLE = 'Report a Bug';
+export const EMAIL_PLACEHOLDER = 'your.email@example.org';
+export const EMAIL_LABEL = 'Email';
+export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
+export const MESSAGE_LABEL = 'Description';
+export const NAME_PLACEHOLDER = 'Your Name';
+export const NAME_LABEL = 'Name';
+export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
+
+export const FEEDBACK_WIDGET_SOURCE = 'widget';
+export const FEEDBACK_API_SOURCE = 'api';
+
+export const SUCCESS_MESSAGE_TIMEOUT = 5000;
diff --git a/packages/feedback2/src/constants/theme.ts b/packages/feedback2/src/constants/theme.ts
new file mode 100644
index 000000000000..7fff31f48964
--- /dev/null
+++ b/packages/feedback2/src/constants/theme.ts
@@ -0,0 +1,55 @@
+const LIGHT_BACKGROUND = '#ffffff';
+const INHERIT = 'inherit';
+const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
+
+export const LIGHT_THEME = {
+  fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
+  fontSize: '14px',
+
+  background: LIGHT_BACKGROUND,
+  backgroundHover: '#f6f6f7',
+  foreground: '#2b2233',
+  border: '1.5px solid rgba(41, 35, 47, 0.13)',
+  borderRadius: '12px',
+  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
+
+  success: '#268d75',
+  error: '#df3338',
+
+  submitBackground: 'rgba(88, 74, 192, 1)',
+  submitBackgroundHover: SUBMIT_COLOR,
+  submitBorder: SUBMIT_COLOR,
+  submitOutlineFocus: '#29232f',
+  submitForeground: LIGHT_BACKGROUND,
+  submitForegroundHover: LIGHT_BACKGROUND,
+
+  cancelBackground: 'transparent',
+  cancelBackgroundHover: 'var(--background-hover)',
+  cancelBorder: 'var(--border)',
+  cancelOutlineFocus: 'var(--input-outline-focus)',
+  cancelForeground: 'var(--foreground)',
+  cancelForegroundHover: 'var(--foreground)',
+
+  inputBackground: INHERIT,
+  inputForeground: INHERIT,
+  inputBorder: 'var(--border)',
+  inputOutlineFocus: SUBMIT_COLOR,
+
+  formBorderRadius: '20px',
+  formContentBorderRadius: '6px',
+};
+
+export const DEFAULT_THEME = {
+  light: LIGHT_THEME,
+  dark: {
+    ...LIGHT_THEME,
+
+    background: '#29232f',
+    backgroundHover: '#352f3b',
+    foreground: '#ebe6ef',
+    border: '1.5px solid rgba(235, 230, 239, 0.15)',
+
+    success: '#2da98c',
+    error: '#f55459',
+  },
+};
diff --git a/packages/feedback2/src/core/components/Actor.css.ts b/packages/feedback2/src/core/components/Actor.css.ts
new file mode 100644
index 000000000000..9ae8df503cc9
--- /dev/null
+++ b/packages/feedback2/src/core/components/Actor.css.ts
@@ -0,0 +1,63 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget actor (button that opens the dialog)
+ */
+export function createActorStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+  style.textContent = `
+.widget__actor {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
+  line-height: 25px;
+
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  z-index: 9000;
+
+  border-radius: var(--border-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 12px 16px;
+  text-decoration: none;
+
+  color: var(--foreground);
+  background-color: var(--background);
+  border: var(--border);
+  box-shadow: var(--box-shadow);
+  opacity: 1;
+  transition: opacity 0.1s ease-in-out;
+}
+
+.widget__actor:hover {
+  background-color: var(--background-hover);
+}
+
+.widget__actor svg {
+  width: 16px;
+  height: 16px;
+}
+
+.widget__actor--hidden {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+
+.widget__actor__text {
+}
+
+.feedback-icon path {
+  fill: var(--foreground);
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/core/components/Actor.ts b/packages/feedback2/src/core/components/Actor.ts
new file mode 100644
index 000000000000..fb49d5d1b7ee
--- /dev/null
+++ b/packages/feedback2/src/core/components/Actor.ts
@@ -0,0 +1,48 @@
+import { DOCUMENT } from '../../constants';
+import { createActorStyles } from './Actor.css';
+import { FeedbackIcon } from './FeedbackIcon';
+
+export interface ActorProps {
+  buttonLabel: string;
+  shadow: ShadowRoot;
+}
+
+export interface ActorComponent {
+  el: HTMLElement;
+
+  appendToDom: () => void;
+
+  removeFromDom: () => void;
+}
+
+/**
+ * The sentry-provided button to open the feedback modal
+ */
+export function Actor({ buttonLabel, shadow }: ActorProps): ActorComponent {
+  const el = DOCUMENT.createElement('button');
+  el.type = 'button';
+  el.className = 'widget__actor';
+  el.ariaHidden = 'false';
+  el.ariaLabel = buttonLabel;
+  el.appendChild(FeedbackIcon());
+  if (buttonLabel) {
+    const label = DOCUMENT.createElement('span');
+    label.className = 'widget__actor__text';
+    label.appendChild(DOCUMENT.createTextNode(buttonLabel));
+    el.appendChild(label);
+  }
+
+  const style = createActorStyles();
+
+  return {
+    el,
+    appendToDom(): void {
+      shadow.appendChild(style);
+      shadow.appendChild(el);
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+  };
+}
diff --git a/packages/feedback2/src/core/components/FeedbackIcon.ts b/packages/feedback2/src/core/components/FeedbackIcon.ts
new file mode 100644
index 000000000000..a6145ebf8900
--- /dev/null
+++ b/packages/feedback2/src/core/components/FeedbackIcon.ts
@@ -0,0 +1,49 @@
+import { WINDOW } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const SIZE = 20;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Feedback Icon
+ */
+export function FeedbackIcon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    WINDOW.document.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'feedback-icon',
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    viewBox: `0 0 ${SIZE} ${SIZE}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_80)',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
+  });
+  svg.appendChild(g).appendChild(path);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_80',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    fill: 'white',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/core/createMainStyles.ts b/packages/feedback2/src/core/createMainStyles.ts
new file mode 100644
index 000000000000..87cf8c0605a0
--- /dev/null
+++ b/packages/feedback2/src/core/createMainStyles.ts
@@ -0,0 +1,73 @@
+import { DOCUMENT } from '../constants';
+import type { FeedbackTheme, FeedbackThemes } from '../types';
+
+function getThemedCssVariables(theme: FeedbackTheme): string {
+  return `
+  --background: ${theme.background};
+  --background-hover: ${theme.backgroundHover};
+  --foreground: ${theme.foreground};
+  --error: ${theme.error};
+  --success: ${theme.success};
+  --border: ${theme.border};
+  --border-radius: ${theme.borderRadius};
+  --box-shadow: ${theme.boxShadow};
+
+  --submit-background: ${theme.submitBackground};
+  --submit-background-hover: ${theme.submitBackgroundHover};
+  --submit-border: ${theme.submitBorder};
+  --submit-outline-focus: ${theme.submitOutlineFocus};
+  --submit-foreground: ${theme.submitForeground};
+  --submit-foreground-hover: ${theme.submitForegroundHover};
+
+  --cancel-background: ${theme.cancelBackground};
+  --cancel-background-hover: ${theme.cancelBackgroundHover};
+  --cancel-border: ${theme.cancelBorder};
+  --cancel-outline-focus: ${theme.cancelOutlineFocus};
+  --cancel-foreground: ${theme.cancelForeground};
+  --cancel-foreground-hover: ${theme.cancelForegroundHover};
+
+  --input-background: ${theme.inputBackground};
+  --input-foreground: ${theme.inputForeground};
+  --input-border: ${theme.inputBorder};
+  --input-outline-focus: ${theme.inputOutlineFocus};
+
+  --form-border-radius: ${theme.formBorderRadius};
+  --form-content-border-radius: ${theme.formContentBorderRadius};
+  `;
+}
+
+/**
+ * Creates <style> element for widget actor (button that opens the dialog)
+ */
+export function createMainStyles(colorScheme: 'system' | 'dark' | 'light', themes: FeedbackThemes): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+  style.textContent = `
+:host {
+  --bottom: 1rem;
+  --right: 1rem; /* this is the font-size of the page, not the shadowroot */
+  --top: auto;
+  --left: auto;
+  --z-index: 100000;
+  --font-family: ${themes.themeLight.fontFamily};
+  --font-size: ${themes.themeLight.fontSize};
+
+  font-family: var(--font-family);
+  font-size: var(--font-size);
+
+  ${getThemedCssVariables(colorScheme === 'dark' ? themes.themeDark : themes.themeLight)}
+}
+
+${
+  colorScheme === 'system'
+    ? `
+@media (prefers-color-scheme: dark) {
+  :host {
+    ${getThemedCssVariables(themes.themeDark)}
+  }
+}`
+    : ''
+}
+}`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/core/integration.ts b/packages/feedback2/src/core/integration.ts
new file mode 100644
index 000000000000..fb55f82c4fe6
--- /dev/null
+++ b/packages/feedback2/src/core/integration.ts
@@ -0,0 +1,277 @@
+import { defineIntegration, getClient } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { isBrowser, logger } from '@sentry/utils';
+import {
+  ACTOR_LABEL,
+  CANCEL_BUTTON_LABEL,
+  DEFAULT_THEME,
+  DOCUMENT,
+  EMAIL_LABEL,
+  EMAIL_PLACEHOLDER,
+  FORM_TITLE,
+  MESSAGE_LABEL,
+  MESSAGE_PLACEHOLDER,
+  NAME_LABEL,
+  NAME_PLACEHOLDER,
+  SUBMIT_BUTTON_LABEL,
+  SUCCESS_MESSAGE_TEXT,
+} from '../constants';
+import type { IFeedback2ModalIntegration } from '../modal/integration';
+import type { IFeedback2ScreenshotIntegration } from '../screenshot/integration';
+import type {
+  Dialog,
+  FeedbackInternalOptions,
+  OptionalFeedbackConfiguration,
+  OverrideFeedbackConfiguration,
+} from '../types';
+import { DEBUG_BUILD } from '../util/debug-build';
+import { mergeOptions } from '../util/mergeOptions';
+import { Actor } from './components/Actor';
+import { createMainStyles } from './createMainStyles';
+import { sendFeedback } from './sendFeedback';
+
+type Unsubscribe = () => void;
+
+interface PublicFeedback2Integration {
+  attachTo: (el: Element | string, optionOverrides: OverrideFeedbackConfiguration) => () => void;
+  createWidget: (optionOverrides: OverrideFeedbackConfiguration & { shouldCreateActor?: boolean }) => Promise<Dialog>;
+  getWidget: () => Dialog | null;
+  remove: () => void;
+  openDialog: () => void;
+  closeDialog: () => void;
+  removeWidget: () => void;
+}
+export type IFeedback2Integration = IntegrationFnResult & PublicFeedback2Integration;
+
+export const _feedback2Integration = (({
+  // FeedbackGeneralConfiguration
+  id = 'sentry-feedback',
+  showBranding = true,
+  autoInject = true,
+  showEmail = true,
+  showName = true,
+  showScreenshot = true,
+  useSentryUser = {
+    email: 'email',
+    name: 'username',
+  },
+  isNameRequired = false,
+  isEmailRequired = false,
+
+  // FeedbackThemeConfiguration
+  colorScheme = 'system',
+  themeLight,
+  themeDark,
+
+  // FeedbackTextConfiguration
+  buttonLabel = ACTOR_LABEL,
+  cancelButtonLabel = CANCEL_BUTTON_LABEL,
+  submitButtonLabel = SUBMIT_BUTTON_LABEL,
+  formTitle = FORM_TITLE,
+  emailLabel = EMAIL_LABEL,
+  emailPlaceholder = EMAIL_PLACEHOLDER,
+  messageLabel = MESSAGE_LABEL,
+  messagePlaceholder = MESSAGE_PLACEHOLDER,
+  nameLabel = NAME_LABEL,
+  namePlaceholder = NAME_PLACEHOLDER,
+  successMessageText = SUCCESS_MESSAGE_TEXT,
+
+  // FeedbackCallbacks
+  onFormOpen,
+  onFormClose,
+  onSubmitSuccess,
+  onSubmitError,
+  onFormSubmitted,
+}: OptionalFeedbackConfiguration = {}) => {
+  const _options = {
+    id,
+    autoInject,
+    showBranding,
+    isEmailRequired,
+    isNameRequired,
+    showEmail,
+    showName,
+    showScreenshot,
+    useSentryUser,
+
+    colorScheme,
+    themeDark: {
+      ...DEFAULT_THEME.dark,
+      ...themeDark,
+    },
+    themeLight: {
+      ...DEFAULT_THEME.light,
+      ...themeLight,
+    },
+
+    buttonLabel,
+    cancelButtonLabel,
+    submitButtonLabel,
+    formTitle,
+    emailLabel,
+    emailPlaceholder,
+    messageLabel,
+    messagePlaceholder,
+    nameLabel,
+    namePlaceholder,
+    successMessageText,
+
+    onFormClose,
+    onFormOpen,
+    onSubmitError,
+    onSubmitSuccess,
+    onFormSubmitted,
+  };
+
+  let _shadow: ShadowRoot | null = null;
+  let _subscriptions: Unsubscribe[] = [];
+
+  /**
+   * Get the shadow root where we will append css
+   */
+  const _createShadow = (options: FeedbackInternalOptions): ShadowRoot => {
+    if (!_shadow) {
+      const host = DOCUMENT.createElement('div');
+      host.id = String(options.id);
+      DOCUMENT.body.appendChild(host);
+
+      _shadow = host.attachShadow({ mode: 'open' });
+      _shadow.appendChild(createMainStyles(options.colorScheme, options));
+    }
+    return _shadow as ShadowRoot;
+  };
+
+  const _loadAndRenderDialog = async (options: FeedbackInternalOptions): Promise<Dialog> => {
+    const client = getClient(); // TODO: getClient<BrowserClient>()
+    if (!client) {
+      throw new Error('Sentry Client is not initialized correctly');
+    }
+    const modalIntegration = client.getIntegrationByName<IFeedback2ModalIntegration>('Feedback2Modal');
+    const screenshotIntegration = client.getIntegrationByName<IFeedback2ScreenshotIntegration>('Feedback2Screenshot');
+
+    // START TEMP: Error messages
+    if (!modalIntegration && showScreenshot && !screenshotIntegration) {
+      throw new Error('Async loading of Feedback Modal & Screenshot integrations is not yet implemented');
+    } else if (!modalIntegration) {
+      throw new Error('Async loading of Feedback Modal is not yet implemented');
+    } else if (showScreenshot && !screenshotIntegration) {
+      throw new Error('Async loading of Feedback Screenshot integration is not yet implemented');
+    }
+    // END TEMP
+
+    if (!modalIntegration) {
+      // TODO: load modalIntegration
+      throw new Error('Not implemented yet');
+    }
+    if (showScreenshot && !screenshotIntegration) {
+      // TODO: load screenshotIntegration
+      throw new Error('Not implemented yet');
+    }
+
+    return modalIntegration.createDialog({
+      options,
+      screenshotIntegration,
+      sendFeedback,
+      shadow: _createShadow(options),
+    });
+  };
+
+  const attachTo = (el: Element | string, optionOverrides: OverrideFeedbackConfiguration = {}): Unsubscribe => {
+    const mergedOptions = mergeOptions(_options, optionOverrides);
+
+    const targetEl =
+      typeof el === 'string' ? DOCUMENT.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;
+
+    if (!targetEl) {
+      DEBUG_BUILD && logger.error('[Feedback] Unable to attach to target element');
+      throw new Error('Unable to attach to target element');
+    }
+
+    let dialog: Dialog | null = null;
+    const handleClick = async (): Promise<void> => {
+      if (!dialog) {
+        dialog = await _loadAndRenderDialog({
+          ...mergedOptions,
+          onFormClose: () => {
+            dialog && dialog.close();
+            mergedOptions.onFormClose && mergedOptions.onFormClose();
+          },
+          onFormSubmitted: () => {
+            dialog && dialog.removeFromDom();
+            mergedOptions.onFormSubmitted && mergedOptions.onFormSubmitted();
+          },
+        });
+      }
+      dialog.appendToDom();
+      dialog.open();
+    };
+    targetEl.addEventListener('click', handleClick);
+    const unsubscribe = (): void => {
+      _subscriptions = _subscriptions.filter(sub => sub !== unsubscribe);
+      dialog && dialog.removeFromDom();
+      dialog = null;
+      targetEl.removeEventListener('click', handleClick);
+    };
+    _subscriptions.push(unsubscribe);
+    return unsubscribe;
+  };
+
+  const autoInjectActor = (): void => {
+    const shadow = _createShadow(_options);
+    const actor = Actor({ buttonLabel: _options.buttonLabel, shadow });
+    const mergedOptions = mergeOptions(_options, {
+      onFormOpen() {
+        actor.removeFromDom();
+      },
+      onFormClose() {
+        actor.appendToDom();
+      },
+      onFormSubmitted() {
+        actor.appendToDom();
+      },
+    });
+    attachTo(actor.el, mergedOptions);
+
+    actor.appendToDom();
+  };
+
+  return {
+    name: 'Feedback2',
+    setupOnce() {
+      if (!isBrowser() || !_options.autoInject) {
+        return;
+      }
+
+      autoInjectActor();
+    },
+
+    /**
+     * Adds click listener to the element to open a feedback dialog
+     *
+     * The returned function can be used to remove the click listener
+     */
+    attachTo,
+
+    /**
+     * Creates a new widget. Accepts partial options to override any options passed to constructor.
+     */
+    async createWidget(optionOverrides: OverrideFeedbackConfiguration = {}): Promise<Dialog> {
+      return _loadAndRenderDialog(mergeOptions(_options, optionOverrides));
+    },
+
+    /**
+     * Removes the Feedback integration (including host, shadow DOM, and all widgets)
+     */
+    remove(): void {
+      if (_shadow) {
+        _shadow.parentElement && _shadow.parentElement.remove();
+        _shadow = null;
+      }
+      // Remove any lingering subscriptions
+      _subscriptions.forEach(sub => sub());
+      _subscriptions = [];
+    },
+  };
+}) satisfies IntegrationFn;
+
+export const feedback2Integration = defineIntegration(_feedback2Integration);
diff --git a/packages/feedback2/src/core/sendFeedback.ts b/packages/feedback2/src/core/sendFeedback.ts
new file mode 100644
index 000000000000..db879f29a821
--- /dev/null
+++ b/packages/feedback2/src/core/sendFeedback.ts
@@ -0,0 +1,142 @@
+import { createAttachmentEnvelope, createEventEnvelope, getClient, withScope } from '@sentry/core';
+import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
+import { getLocationHref } from '@sentry/utils';
+import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
+import type { SendFeedbackOptions, SendFeedbackParams } from '../types';
+import { prepareFeedbackEvent } from '../util/prepareFeedbackEvent';
+
+/**
+ * Public API to send a Feedback item to Sentry
+ */
+export async function sendFeedback(
+  { name, email, message, attachments, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
+  { includeReplay = true }: SendFeedbackOptions = {},
+): Promise<TransportMakeRequestResponse> {
+  if (!message) {
+    throw new Error('Unable to submit feedback with empty message');
+  }
+
+  const client = getClient();
+  const transport = client && client.getTransport();
+  const dsn = client && client.getDsn();
+
+  if (!client || !transport || !dsn) {
+    throw new Error('Invalid Sentry client');
+  }
+
+  const baseEvent: FeedbackEvent = {
+    contexts: {
+      feedback: {
+        contact_email: email,
+        name,
+        message,
+        url,
+        source,
+      },
+    },
+    type: 'feedback',
+  };
+
+  return withScope(async scope => {
+    // No use for breadcrumbs in feedback
+    scope.clearBreadcrumbs();
+
+    if ([FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE].includes(String(source))) {
+      scope.setLevel('info');
+    }
+
+    const feedbackEvent = await prepareFeedbackEvent({
+      scope,
+      client,
+      event: baseEvent,
+    });
+
+    if (client.emit) {
+      client.emit('beforeSendFeedback', feedbackEvent, { includeReplay: Boolean(includeReplay) });
+    }
+
+    try {
+      const response = await transport.send(
+        createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel),
+      );
+
+      if (attachments && attachments.length) {
+        // TODO: https://docs.sentry.io/platforms/javascript/enriching-events/attachments/
+        await transport.send(
+          createAttachmentEnvelope(
+            feedbackEvent,
+            attachments,
+            dsn,
+            client.getOptions()._metadata,
+            client.getOptions().tunnel,
+          ),
+        );
+      }
+
+      // TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
+      if (!response) {
+        throw new Error('Unable to send Feedback');
+      }
+
+      // Require valid status codes, otherwise can assume feedback was not sent successfully
+      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+        throw new Error('Unable to send Feedback. Invalid response from server.');
+      }
+
+      return response;
+    } catch (err) {
+      const error = new Error('Unable to send Feedback');
+
+      try {
+        // In case browsers don't allow this property to be writable
+        // @ts-expect-error This needs lib es2022 and newer
+        error.cause = err;
+      } catch {
+        // nothing to do
+      }
+      throw error;
+    }
+  });
+}
+
+/*
+ * For reference, the fully built event looks something like this:
+ * {
+ *     "type": "feedback",
+ *     "event_id": "d2132d31b39445f1938d7e21b6bf0ec4",
+ *     "timestamp": 1597977777.6189718,
+ *     "dist": "1.12",
+ *     "platform": "javascript",
+ *     "environment": "production",
+ *     "release": 42,
+ *     "tags": {"transaction": "/organizations/:orgId/performance/:eventSlug/"},
+ *     "sdk": {"name": "name", "version": "version"},
+ *     "user": {
+ *         "id": "123",
+ *         "username": "user",
+ *         "email": "user@site.com",
+ *         "ip_address": "192.168.11.12",
+ *     },
+ *     "request": {
+ *         "url": None,
+ *         "headers": {
+ *             "user-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15"
+ *         },
+ *     },
+ *     "contexts": {
+ *         "feedback": {
+ *             "message": "test message",
+ *             "contact_email": "test@example.com",
+ *             "type": "feedback",
+ *         },
+ *         "trace": {
+ *             "trace_id": "4C79F60C11214EB38604F4AE0781BFB2",
+ *             "span_id": "FA90FDEAD5F74052",
+ *             "type": "trace",
+ *         },
+ *         "replay": {
+ *             "replay_id": "e2d42047b1c5431c8cba85ee2a8ab25d",
+ *         },
+ *     },
+ *   }
+ */
diff --git a/packages/feedback2/src/index.ts b/packages/feedback2/src/index.ts
new file mode 100644
index 000000000000..bc57808e7b95
--- /dev/null
+++ b/packages/feedback2/src/index.ts
@@ -0,0 +1,7 @@
+export { sendFeedback } from './core/sendFeedback';
+export { feedback2Integration } from './core/integration';
+export { feedback2ModalIntegration } from './modal/integration';
+export { feedback2ScreenshotIntegration } from './screenshot/integration';
+
+export type { OptionalFeedbackConfiguration } from './types';
+export type { IFeedback2Integration } from './core/integration';
diff --git a/packages/feedback2/src/modal/components/Dialog.css.ts b/packages/feedback2/src/modal/components/Dialog.css.ts
new file mode 100644
index 000000000000..26c405d9ddb3
--- /dev/null
+++ b/packages/feedback2/src/modal/components/Dialog.css.ts
@@ -0,0 +1,224 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createDialogStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  style.textContent = `
+.dialog {
+  line-height: 25px;
+  background-color: rgba(0, 0, 0, 0.05);
+  border: none;
+  position: fixed;
+  inset: 0;
+  z-index: 10000;
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.dialog:not([open]) {
+  opacity: 0;
+  pointer-events: none;
+  visibility: hidden;
+}
+.dialog:not([open]) .dialog__content {
+  transform: translate(0, -16px) scale(0.98);
+}
+
+.dialog__content {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+
+  border: var(--border);
+  border-radius: var(--form-border-radius);
+  background-color: var(--background);
+  color: var(--foreground);
+
+  max-width: 100%;
+  max-height: calc(100% - 2rem);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  box-shadow: var(--box-shadow);
+  transition: transform 0.2s ease-in-out;
+  transform: translate(0, 0) scale(1);
+
+  padding: 24px;
+}
+.dialog__content-fullscreen {
+  top: 16px;
+  left: 16px;
+}
+
+.dialog__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+
+}
+
+.brand-link {
+  display: inline-flex;
+}
+
+.error {
+  color: var(--error);
+}
+
+.form {
+  display: flex;
+  overflow: auto;
+  flex-direction: row;
+  gap: 16px;
+  flex: 1 0 auto;
+}
+
+.form__right {
+  width: 272px;
+  display: flex;
+  overflow: auto;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 16px;
+
+}
+
+
+.form__error-container {
+  color: var(--error);
+}
+
+.form__label {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin: 0px;
+}
+
+.form__label__text {
+  display: grid;
+  gap: 4px;
+  align-items: center;
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
+}
+
+.form__label__text--required {
+  font-size: 0.85em;
+}
+
+.form__input {
+  font-family: inherit;
+  line-height: inherit;
+  background-color: var(--input-background);
+  box-sizing: border-box;
+  border: var(--input-border);
+  border-radius: var(--form-content-border-radius);
+  color: var(--input-foreground);
+  font-size: 14px;
+  font-weight: 500;
+  padding: 6px 12px;
+}
+
+.form__input:focus-visible {
+  outline: 1px auto var(--input-outline-focus);
+}
+
+.form__input--textarea {
+  font-family: inherit;
+  resize: vertical;
+}
+
+.btn-group {
+  display: grid;
+  gap: 8px;
+  margin-top: 8px;
+}
+
+.btn {
+  line-height: inherit;
+  border: var(--cancel-border);
+  border-radius: var(--form-content-border-radius);
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  padding: 6px 16px;
+}
+.btn[disabled] {
+  opacity: 0.6;
+  pointer-events: none;
+}
+
+.btn--primary {
+  background-color: var(--submit-background);
+  border-color: var(--submit-border);
+  color: var(--submit-foreground);
+}
+.btn--primary:hover {
+  background-color: var(--submit-background-hover);
+  color: var(--submit-foreground-hover);
+}
+.btn--primary:focus-visible {
+  outline: 1px auto var(--submit-outline-focus);
+}
+
+.btn--default {
+  background-color: var(--cancel-background);
+  color: var(--cancel-foreground);
+  font-weight: 500;
+}
+.btn--default:hover {
+  background-color: var(--cancel-background-hover);
+  color: var(--cancel-foreground-hover);
+}
+.btn--default:focus-visible {
+  outline: 1px auto var(--cancel-outline-focus);
+}
+
+.success-message {
+  position: fixed;
+  left: var(--left);
+  right: var(--right);
+  bottom: var(--bottom);
+  top: var(--top);
+  z-index: var(--z-index);
+
+  background-color: var(--background);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  box-shadow: var(--box-shadow);
+  font-weight: 600;
+  color: var(--success);
+  padding: 12px 24px;
+  line-height: 25px;
+  display: grid;
+  align-items: center;
+  grid-auto-flow: column;
+  gap: 6px;
+  cursor: default;
+}
+
+.success-icon {
+  display: flex;
+}
+
+.success-icon path {
+  fill: var(--success);
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/modal/components/DialogContainer.tsx b/packages/feedback2/src/modal/components/DialogContainer.tsx
new file mode 100644
index 000000000000..5888ec9a0663
--- /dev/null
+++ b/packages/feedback2/src/modal/components/DialogContainer.tsx
@@ -0,0 +1,58 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { Fragment, h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useCallback, useMemo, useState } from 'preact/hooks';
+import { SUCCESS_MESSAGE_TIMEOUT } from '../../constants';
+import type { FeedbackFormData } from '../../types';
+import { DialogContent } from './DialogContent';
+import { DialogHeader } from './DialogHeader';
+import type { Props as HeaderProps } from './DialogHeader';
+import type { Props as FormProps } from './Form';
+import { Form } from './Form';
+import { SuccessIcon } from './SuccessIcon';
+
+interface Props extends HeaderProps, FormProps {
+  successMessageText: string;
+  onFormSubmitted: () => void;
+  open: boolean;
+}
+
+export function DialogComponent({ open, onFormSubmitted, successMessageText, ...props }: Props): VNode {
+  const successIconHtml = useMemo(() => ({ __html: SuccessIcon().outerHTML }), []);
+
+  const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
+
+  const handlOnSuccessClick = useCallback(() => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      setTimeoutId(null);
+    }
+    onFormSubmitted();
+  }, [timeoutId]);
+
+  const onSubmitSuccess = useCallback(
+    (data: FeedbackFormData) => {
+      props.onSubmitSuccess(data);
+      setTimeoutId(() => setTimeout(onFormSubmitted, SUCCESS_MESSAGE_TIMEOUT));
+    },
+    [onFormSubmitted],
+  );
+
+  return (
+    <Fragment>
+      {timeoutId ? (
+        <div class="success-message" onClick={handlOnSuccessClick}>
+          {successMessageText}
+          <span class="success-icon" dangerouslySetInnerHTML={successIconHtml} />
+        </div>
+      ) : (
+        <dialog class="dialog" onClick={props.onFormClose} open={open}>
+          <DialogContent>
+            <DialogHeader {...props} />
+            <Form {...props} onSubmitSuccess={onSubmitSuccess} />
+          </DialogContent>
+        </dialog>
+      )}
+    </Fragment>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/DialogContent.tsx b/packages/feedback2/src/modal/components/DialogContent.tsx
new file mode 100644
index 000000000000..0a8ebb54a990
--- /dev/null
+++ b/packages/feedback2/src/modal/components/DialogContent.tsx
@@ -0,0 +1,21 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { ComponentChildren, VNode } from 'preact';
+
+export interface Props {
+  children: ComponentChildren;
+}
+
+export function DialogContent({ children }: Props): VNode {
+  return (
+    <div
+      class="dialog__content"
+      onClick={e => {
+        // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
+        e.stopPropagation();
+      }}
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/DialogHeader.tsx b/packages/feedback2/src/modal/components/DialogHeader.tsx
new file mode 100644
index 000000000000..2af30b580b56
--- /dev/null
+++ b/packages/feedback2/src/modal/components/DialogHeader.tsx
@@ -0,0 +1,32 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { VNode } from 'preact';
+import { useMemo } from 'preact/hooks';
+import type { FeedbackInternalOptions } from '../../types';
+import type { Props as LogoProps } from './SentryLogo';
+import { SentryLogo } from './SentryLogo';
+
+export interface Props extends LogoProps {
+  formTitle: FeedbackInternalOptions['formTitle'];
+  showBranding: FeedbackInternalOptions['showBranding'];
+}
+
+export function DialogHeader({ colorScheme, formTitle, showBranding }: Props): VNode {
+  const logoHtml = useMemo(() => ({ __html: SentryLogo({ colorScheme }).outerHTML }), [colorScheme]);
+
+  return (
+    <h2 class="dialog__header">
+      {formTitle}
+      {showBranding ? (
+        <a
+          class="brand-link"
+          target="_blank"
+          href="https://sentry.io/welcome/"
+          title="Powered by Sentry"
+          rel="noopener noreferrer"
+          dangerouslySetInnerHTML={logoHtml}
+        />
+      ) : null}
+    </h2>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/Form.tsx b/packages/feedback2/src/modal/components/Form.tsx
new file mode 100644
index 000000000000..d4562b0b5ff6
--- /dev/null
+++ b/packages/feedback2/src/modal/components/Form.tsx
@@ -0,0 +1,233 @@
+import { logger } from '@sentry/utils';
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import type { JSX, VNode } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { FEEDBACK_WIDGET_SOURCE } from '../../constants';
+import type {
+  FeedbackFormData,
+  FeedbackInternalOptions,
+  ScreenshotInput,
+  SendFeedbackOptions,
+  SendFeedbackParams,
+} from '../../types';
+import { DEBUG_BUILD } from '../../util/debug-build';
+import { getMissingFields } from '../../util/validate';
+
+export interface Props
+  extends Pick<
+    FeedbackInternalOptions,
+    | 'cancelButtonLabel'
+    | 'emailLabel'
+    | 'emailPlaceholder'
+    | 'isEmailRequired'
+    | 'isNameRequired'
+    | 'messageLabel'
+    | 'messagePlaceholder'
+    | 'nameLabel'
+    | 'namePlaceholder'
+    | 'showEmail'
+    | 'showName'
+    | 'submitButtonLabel'
+  > {
+  defaultEmail: string;
+  defaultName: string;
+  onFormClose: () => void;
+  onSubmit: (data: SendFeedbackParams, options?: SendFeedbackOptions) => void;
+  onSubmitSuccess: (data: FeedbackFormData) => void;
+  onSubmitError: (error: Error) => void;
+  screenshotInput: ScreenshotInput | undefined;
+}
+
+function retrieveStringValue(formData: FormData, key: string): string {
+  const value = formData.get(key);
+  if (typeof value === 'string') {
+    return value.trim();
+  }
+  return '';
+}
+
+export function Form({
+  cancelButtonLabel,
+  defaultEmail,
+  defaultName,
+  emailLabel,
+  emailPlaceholder,
+  isEmailRequired,
+  isNameRequired,
+  messageLabel,
+  messagePlaceholder,
+  nameLabel,
+  namePlaceholder,
+  onFormClose,
+  onSubmit,
+  onSubmitSuccess,
+  onSubmitError,
+  showEmail,
+  showName,
+  submitButtonLabel,
+  screenshotInput,
+}: Props): VNode {
+  // TODO: set a ref on the form, and whenever an input changes call proceessForm() and setError()
+  const [error, setError] = useState<null | string>(null);
+
+  const [showScreenshotInput, setShowScreenshotInput] = useState(false);
+  const ScreenshotInput = screenshotInput && screenshotInput.input;
+  const includeScreenshotValue = ScreenshotInput && showScreenshotInput;
+
+  const [screenshotError, setScreenshotError] = useState<null | Error>(null);
+  const onScreenshotError = useCallback((error: Error) => {
+    setScreenshotError(error);
+    setShowScreenshotInput(false);
+  }, []);
+
+  const hasAllRequiredFields = useCallback(
+    (data: FeedbackFormData) => {
+      const missingFields = getMissingFields(data, {
+        emailLabel,
+        isEmailRequired,
+        isNameRequired,
+        messageLabel,
+        nameLabel,
+      });
+
+      if (missingFields.length > 0) {
+        setError(`Please enter in the following required fields: ${missingFields.join(', ')}`);
+      } else {
+        setError(null);
+      }
+
+      return missingFields.length === 0;
+    },
+    [emailLabel, isEmailRequired, isNameRequired, messageLabel, nameLabel],
+  );
+
+  const handleSubmit = useCallback(
+    async (e: JSX.TargetedSubmitEvent<HTMLFormElement>) => {
+      try {
+        e.preventDefault();
+        if (!(e.target instanceof HTMLFormElement)) {
+          return;
+        }
+        const formData = new FormData(e.target);
+        const attachment = await (includeScreenshotValue ? screenshotInput.value() : undefined);
+        const data: FeedbackFormData = {
+          name: retrieveStringValue(formData, 'name'),
+          email: retrieveStringValue(formData, 'email'),
+          message: retrieveStringValue(formData, 'message'),
+          attachments: attachment ? [attachment] : undefined,
+        };
+        if (!hasAllRequiredFields(data)) {
+          return;
+        }
+        try {
+          await onSubmit({ ...data, source: FEEDBACK_WIDGET_SOURCE });
+          onSubmitSuccess(data);
+        } catch (error) {
+          DEBUG_BUILD && logger.error(error);
+          setError('There was a problem submitting feedback, please wait and try again.');
+          onSubmitError(error as Error);
+        }
+      } catch {
+        // pass
+      }
+    },
+    [onSubmitSuccess, onSubmitError],
+  );
+
+  return (
+    <form class="form" onSubmit={handleSubmit}>
+      {includeScreenshotValue ? <ScreenshotInput onError={onScreenshotError} /> : null}
+
+      <div class="form__right">
+        <div class="form__top">
+          {error ? <div class="form__error-container">{error}</div> : null}
+
+          {showName ? (
+            <label for="name" class="form__label">
+              <LabelText label={nameLabel} isRequired={isNameRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultName}
+                id="name"
+                name="name"
+                placeholder={namePlaceholder}
+                required={isNameRequired}
+                type="text"
+              />
+            </label>
+          ) : (
+            <input aria-hidden value={defaultName} name="name" type="hidden" />
+          )}
+
+          {showEmail ? (
+            <label for="email" class="form__label">
+              <LabelText label={emailLabel} isRequired={isEmailRequired} />
+              <input
+                class="form__input"
+                defaultValue={defaultEmail}
+                id="email"
+                name="email"
+                placeholder={emailPlaceholder}
+                required={isEmailRequired}
+                type="text"
+              ></input>
+            </label>
+          ) : (
+            <input aria-hidden value={defaultEmail} name="email" type="hidden" />
+          )}
+
+          <label for="message" class="form__label">
+            <LabelText label={messageLabel} isRequired />
+            <textarea
+              autoFocus
+              class="form__input form__input--textarea"
+              id="message"
+              name="message"
+              placeholder={messagePlaceholder}
+              required={true}
+              rows={5}
+            />
+          </label>
+
+          {ScreenshotInput ? (
+            <label for="screenshot" class="form__label">
+              <span class="form__label__text">Screenshot</span>
+
+              <button
+                class="btn btn--default"
+                type="button"
+                onClick={() => {
+                  setScreenshotError(null);
+                  setShowScreenshotInput(prev => !prev);
+                }}
+              >
+                {showScreenshotInput ? 'Remove' : 'Add'}
+              </button>
+              {screenshotError ? <div class="form__error-container">{screenshotError.message}</div> : null}
+            </label>
+          ) : null}
+        </div>
+        <div class="form__bottom">
+          <div class="btn-group">
+            <button class="btn btn--primary" type="submit">
+              {submitButtonLabel}
+            </button>
+            <button class="btn btn--default" type="button" onClick={onFormClose}>
+              {cancelButtonLabel}
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+function LabelText({ label, isRequired }: { label: string; isRequired: boolean }): VNode {
+  return (
+    <span class="form__label__text">
+      {label}
+      {isRequired && <span class="form__label__text--required">(required)</span>}
+    </span>
+  );
+}
diff --git a/packages/feedback2/src/modal/components/Icon.ts b/packages/feedback2/src/modal/components/Icon.ts
new file mode 100644
index 000000000000..93c1d3884c52
--- /dev/null
+++ b/packages/feedback2/src/modal/components/Icon.ts
@@ -0,0 +1,49 @@
+import { DOCUMENT } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const SIZE = 20;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Feedback Icon
+ */
+export function Icon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    DOCUMENT.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'feedback-icon',
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    viewBox: `0 0 ${SIZE} ${SIZE}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_80)',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
+  });
+  svg.appendChild(g).appendChild(path);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_80',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${SIZE}`,
+    height: `${SIZE}`,
+    fill: 'white',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/modal/components/SentryLogo.ts b/packages/feedback2/src/modal/components/SentryLogo.ts
new file mode 100644
index 000000000000..1e32ad8efdcd
--- /dev/null
+++ b/packages/feedback2/src/modal/components/SentryLogo.ts
@@ -0,0 +1,53 @@
+import { DOCUMENT } from '../../constants';
+import type { FeedbackInternalOptions } from '../../types';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+export type Props = {
+  colorScheme: FeedbackInternalOptions['colorScheme'];
+};
+
+/**
+ * Sentry Logo
+ */
+export function SentryLogo({ colorScheme }: Props): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    DOCUMENT.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    class: 'sentry-logo',
+    width: '32',
+    height: '30',
+    viewBox: '0 0 72 66',
+    fill: 'none',
+  });
+
+  const path = setAttributesNS(createElementNS('path'), {
+    transform: 'translate(11, 11)',
+    d: 'M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z',
+  });
+  svg.append(path);
+
+  const defs = createElementNS('defs');
+  const style = createElementNS('style');
+
+  style.textContent = `
+    path {
+      fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
+    }`;
+
+  if (colorScheme === 'system') {
+    style.textContent += `
+    @media (prefers-color-scheme: dark) {
+      path: {
+        fill: '#fff';
+      }
+    }
+    `;
+  }
+
+  defs.append(style);
+  svg.append(defs);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/modal/components/SuccessIcon.ts b/packages/feedback2/src/modal/components/SuccessIcon.ts
new file mode 100644
index 000000000000..fddd8c6fb941
--- /dev/null
+++ b/packages/feedback2/src/modal/components/SuccessIcon.ts
@@ -0,0 +1,54 @@
+import { WINDOW } from '../../constants';
+import { setAttributesNS } from '../../util/setAttributesNS';
+
+const WIDTH = 16;
+const HEIGHT = 17;
+const XMLNS = 'http://www.w3.org/2000/svg';
+
+/**
+ * Success Icon (checkmark)
+ */
+export function SuccessIcon(): SVGElement {
+  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
+    WINDOW.document.createElementNS(XMLNS, tagName);
+  const svg = setAttributesNS(createElementNS('svg'), {
+    width: `${WIDTH}`,
+    height: `${HEIGHT}`,
+    viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
+    fill: 'none',
+  });
+
+  const g = setAttributesNS(createElementNS('g'), {
+    clipPath: 'url(#clip0_57_156)',
+  });
+
+  const path2 = setAttributesNS(createElementNS('path'), {
+    ['fill-rule']: 'evenodd',
+    ['clip-rule']: 'evenodd',
+    d: 'M3.55544 15.1518C4.87103 16.0308 6.41775 16.5 8 16.5C10.1217 16.5 12.1566 15.6571 13.6569 14.1569C15.1571 12.6566 16 10.6217 16 8.5C16 6.91775 15.5308 5.37103 14.6518 4.05544C13.7727 2.73985 12.5233 1.71447 11.0615 1.10897C9.59966 0.503466 7.99113 0.34504 6.43928 0.653721C4.88743 0.962403 3.46197 1.72433 2.34315 2.84315C1.22433 3.96197 0.462403 5.38743 0.153721 6.93928C-0.15496 8.49113 0.00346625 10.0997 0.608967 11.5615C1.21447 13.0233 2.23985 14.2727 3.55544 15.1518ZM4.40546 3.1204C5.46945 2.40946 6.72036 2.03 8 2.03C9.71595 2.03 11.3616 2.71166 12.575 3.92502C13.7883 5.13838 14.47 6.78405 14.47 8.5C14.47 9.77965 14.0905 11.0306 13.3796 12.0945C12.6687 13.1585 11.6582 13.9878 10.476 14.4775C9.29373 14.9672 7.99283 15.0953 6.73777 14.8457C5.48271 14.596 4.32987 13.9798 3.42502 13.075C2.52018 12.1701 1.90397 11.0173 1.65432 9.76224C1.40468 8.50718 1.5328 7.20628 2.0225 6.02404C2.5122 4.8418 3.34148 3.83133 4.40546 3.1204Z',
+  });
+  const path = setAttributesNS(createElementNS('path'), {
+    d: 'M6.68775 12.4297C6.78586 12.4745 6.89218 12.4984 7 12.5C7.11275 12.4955 7.22315 12.4664 7.32337 12.4145C7.4236 12.3627 7.51121 12.2894 7.58 12.2L12 5.63999C12.0848 5.47724 12.1071 5.28902 12.0625 5.11098C12.0178 4.93294 11.9095 4.77744 11.7579 4.67392C11.6064 4.57041 11.4221 4.52608 11.24 4.54931C11.0579 4.57254 10.8907 4.66173 10.77 4.79999L6.88 10.57L5.13 8.56999C5.06508 8.49566 4.98613 8.43488 4.89768 8.39111C4.80922 8.34735 4.713 8.32148 4.61453 8.31498C4.51605 8.30847 4.41727 8.32147 4.32382 8.35322C4.23038 8.38497 4.14413 8.43484 4.07 8.49999C3.92511 8.63217 3.83692 8.81523 3.82387 9.01092C3.81083 9.2066 3.87393 9.39976 4 9.54999L6.43 12.24C6.50187 12.3204 6.58964 12.385 6.68775 12.4297Z',
+  });
+
+  svg.appendChild(g).append(path, path2);
+
+  const speakerDefs = createElementNS('defs');
+  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
+    id: 'clip0_57_156',
+  });
+
+  const speakerRect = setAttributesNS(createElementNS('rect'), {
+    width: `${WIDTH}`,
+    height: `${WIDTH}`,
+    fill: 'white',
+    transform: 'translate(0 0.5)',
+  });
+
+  speakerClipPathDef.appendChild(speakerRect);
+  speakerDefs.appendChild(speakerClipPathDef);
+
+  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
+
+  return svg;
+}
diff --git a/packages/feedback2/src/modal/createDialog.tsx b/packages/feedback2/src/modal/createDialog.tsx
new file mode 100644
index 000000000000..c0299c2edd30
--- /dev/null
+++ b/packages/feedback2/src/modal/createDialog.tsx
@@ -0,0 +1,94 @@
+import { getCurrentScope } from '@sentry/core';
+import { h, render } from 'preact';
+import { DOCUMENT } from '../constants';
+import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback';
+import type { IFeedback2ScreenshotIntegration } from '../screenshot/integration';
+import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '../types';
+import { createDialogStyles } from './components/Dialog.css';
+import { DialogComponent } from './components/DialogContainer';
+
+interface Props {
+  options: FeedbackInternalOptions;
+  screenshotIntegration: IFeedback2ScreenshotIntegration | undefined;
+  sendFeedback: typeof sendFeedbackFn;
+  shadow: ShadowRoot;
+}
+
+export function createDialog({ options, screenshotIntegration, sendFeedback, shadow }: Props): Dialog {
+  const userKey = options.useSentryUser;
+  const scope = getCurrentScope();
+  const user = scope && scope.getUser();
+
+  const el = DOCUMENT.createElement('div');
+  const style = createDialogStyles();
+
+  const dialog = {
+    get el() {
+      return el;
+    },
+    appendToDom(): void {
+      if (!shadow.contains(style) && !shadow.contains(el)) {
+        shadow.appendChild(style);
+        shadow.appendChild(el);
+      }
+    },
+    removeFromDom(): void {
+      shadow.removeChild(el);
+      shadow.removeChild(style);
+    },
+    open() {
+      renderContent(true);
+      options.onFormOpen && options.onFormOpen();
+    },
+    close() {
+      renderContent(false);
+    },
+  };
+
+  const screenshotInput = screenshotIntegration && screenshotIntegration.createInput(h, dialog);
+
+  const renderContent = (open: boolean): void => {
+    render(
+      <DialogComponent
+        screenshotInput={screenshotInput}
+        colorScheme={options.colorScheme}
+        showBranding={options.showBranding}
+        showName={options.showName || options.isNameRequired}
+        showEmail={options.showEmail || options.isEmailRequired}
+        isNameRequired={options.isNameRequired}
+        isEmailRequired={options.isEmailRequired}
+        formTitle={options.formTitle}
+        cancelButtonLabel={options.cancelButtonLabel}
+        submitButtonLabel={options.submitButtonLabel}
+        emailLabel={options.emailLabel}
+        emailPlaceholder={options.emailPlaceholder}
+        messageLabel={options.messageLabel}
+        messagePlaceholder={options.messagePlaceholder}
+        nameLabel={options.nameLabel}
+        namePlaceholder={options.namePlaceholder}
+        defaultName={(userKey && user && user[userKey.name]) || ''}
+        defaultEmail={(userKey && user && user[userKey.email]) || ''}
+        successMessageText={options.successMessageText}
+        onFormClose={() => {
+          renderContent(false);
+          options.onFormClose && options.onFormClose();
+        }}
+        onSubmit={sendFeedback}
+        onSubmitSuccess={(data: FeedbackFormData) => {
+          renderContent(false);
+          options.onSubmitSuccess && options.onSubmitSuccess(data);
+        }}
+        onSubmitError={(error: Error) => {
+          options.onSubmitError && options.onSubmitError(error);
+        }}
+        onFormSubmitted={() => {
+          options.onFormSubmitted && options.onFormSubmitted();
+        }}
+        open={open}
+      />,
+      el,
+    );
+  };
+
+  return dialog;
+}
diff --git a/packages/feedback2/src/modal/integration.ts b/packages/feedback2/src/modal/integration.ts
new file mode 100644
index 000000000000..33accceda743
--- /dev/null
+++ b/packages/feedback2/src/modal/integration.ts
@@ -0,0 +1,22 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { createDialog } from './createDialog';
+
+interface PublicFeedback2ModalIntegration {
+  createDialog: typeof createDialog;
+}
+
+const INTEGRATION_NAME = 'Feedback2Modal';
+
+export type IFeedback2ModalIntegration = IntegrationFnResult & PublicFeedback2ModalIntegration;
+
+export const _feedback2ModalIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    createDialog,
+  };
+}) satisfies IntegrationFn;
+
+export const feedback2ModalIntegration = defineIntegration(_feedback2ModalIntegration);
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
new file mode 100644
index 000000000000..05af272d1a65
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -0,0 +1,61 @@
+import type { ComponentType, VNode, h as hType } from 'preact';
+import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks';
+import type { Dialog } from '../../types';
+import { createScreenshotInputStyles } from './ScreenshotInput.css';
+import { useTakeScreenshot } from './useTakeScreenshot';
+
+interface FactoryParams {
+  h: typeof hType;
+  canvas: HTMLCanvasElement;
+  dialog: Dialog;
+}
+
+interface Props {
+  onError: (error: Error) => void;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryParams): ComponentType<Props> {
+  return function ScreenshotEditor({ onError }: Props): VNode {
+    const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+
+    const canvasContainerRef = useRef<HTMLDivElement>(null);
+    useEffect(() => {
+      const container = canvasContainerRef.current;
+      container && container.appendChild(canvas);
+      return () => container && container.removeChild(canvas);
+    }, [canvas]);
+
+    useTakeScreenshot({
+      onBeforeScreenshot: useCallback(() => {
+        dialog.el.style.display = 'none';
+      }, []),
+      onScreenshot: useCallback(
+        (imageSource: HTMLVideoElement) => {
+          const context = canvas.getContext('2d');
+          if (!context) {
+            throw new Error('Could not get canvas context');
+          }
+          canvas.width = imageSource.videoWidth;
+          canvas.height = imageSource.videoHeight;
+          context.drawImage(imageSource, 0, 0);
+        },
+        [canvas],
+      ),
+      onAfterScreenshot: useCallback(() => {
+        dialog.el.style.display = 'block';
+      }, []),
+      onError: useCallback(error => {
+        dialog.el.style.display = 'block';
+        onError(error);
+      }, []),
+    });
+
+    return (
+      <div class="editor">
+        <style dangerouslySetInnerHTML={styles} />
+        <div class="canvasContainer" ref={canvasContainerRef} />
+      </div>
+    );
+  };
+}
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
new file mode 100644
index 000000000000..62c05010e036
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
@@ -0,0 +1,52 @@
+import { DOCUMENT } from '../../constants';
+
+/**
+ * Creates <style> element for widget dialog
+ */
+export function createScreenshotInputStyles(): HTMLStyleElement {
+  const style = DOCUMENT.createElement('style');
+
+  const surface200 = '#FAF9FB';
+  const gray100 = '#F0ECF3';
+
+  style.textContent = `
+.dialog__content:has(.editor) {
+  top: var(--bottom);
+  left: var(--right);
+}
+
+.editor {
+  display: flex;
+  flex: 1 0 auto;
+
+  background-color: ${surface200};
+  background-image: repeating-linear-gradient(
+      -145deg,
+      transparent,
+      transparent 8px,
+      ${surface200} 8px,
+      ${surface200} 11px
+    ),
+    repeating-linear-gradient(
+      -45deg,
+      transparent,
+      transparent 15px,
+      ${gray100} 15px,
+      ${gray100} 16px
+    );
+}
+
+.canvasContainer {
+  flex: 1 0 auto;
+  display: contents;
+}
+
+.canvasContainer canvas {
+  flex: 1 0 auto;
+  width: 0; /* reasons... */
+  align-self: center;
+}
+`;
+
+  return style;
+}
diff --git a/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx b/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
new file mode 100644
index 000000000000..8bfe3b3c5f14
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
@@ -0,0 +1,44 @@
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
+import { useEffect } from 'preact/hooks';
+import { DOCUMENT, NAVIGATOR, WINDOW } from '../../constants';
+
+interface Props {
+  onBeforeScreenshot: () => void;
+  onScreenshot: (imageSource: HTMLVideoElement) => void;
+  onAfterScreenshot: () => void;
+  onError: (error: Error) => void;
+}
+
+export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScreenshot, onError }: Props): void => {
+  useEffect(() => {
+    const takeScreenshot = async (): Promise<void> => {
+      onBeforeScreenshot();
+      const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
+        video: {
+          width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
+          height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
+        },
+        audio: false,
+        // @ts-expect-error Experimental: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
+        preferCurrentTab: true,
+        surfaceSwitching: 'exclude',
+      });
+
+      await new Promise<void>((resolve, reject) => {
+        const video = DOCUMENT.createElement('video');
+        const videoTrack = stream.getVideoTracks()[0];
+        video.srcObject = new MediaStream([videoTrack]);
+        video.onloadedmetadata = () => {
+          onScreenshot(video);
+          stream.getTracks().forEach(track => track.stop());
+          resolve();
+        };
+        video.play().catch(reject);
+      });
+      onAfterScreenshot();
+    };
+
+    takeScreenshot().catch(onError);
+  }, []);
+};
diff --git a/packages/feedback2/src/screenshot/createInput.ts b/packages/feedback2/src/screenshot/createInput.ts
new file mode 100644
index 000000000000..97855ada120b
--- /dev/null
+++ b/packages/feedback2/src/screenshot/createInput.ts
@@ -0,0 +1,33 @@
+import type { Attachment } from '@sentry/types';
+import type { h as hType } from 'preact';
+import { DOCUMENT } from '../constants';
+import type { Dialog, ScreenshotInput } from '../types';
+import { makeScreenshotEditorComponent } from './components/ScreenshotEditor';
+
+/**
+ *
+ */
+export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput {
+  const canvas = DOCUMENT.createElement('canvas');
+
+  return {
+    input: makeScreenshotEditorComponent({ h, canvas, dialog }),
+
+    value: async () => {
+      const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {
+        canvas.toBlob(resolve, 'image/png');
+      });
+      if (blob) {
+        const data = new Uint8Array(await blob.arrayBuffer());
+        const attachment: Attachment = {
+          data,
+          filename: 'screenshot.png',
+          contentType: 'application/png',
+          // attachmentType?: string;
+        };
+        return attachment;
+      }
+      return;
+    },
+  };
+}
diff --git a/packages/feedback2/src/screenshot/integration.ts b/packages/feedback2/src/screenshot/integration.ts
new file mode 100644
index 000000000000..f98e2488cb33
--- /dev/null
+++ b/packages/feedback2/src/screenshot/integration.ts
@@ -0,0 +1,22 @@
+import { defineIntegration } from '@sentry/core';
+import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
+import { createInput } from './createInput';
+
+interface PublicFeedback2ScreenshotIntegration {
+  createInput: typeof createInput;
+}
+
+const INTEGRATION_NAME = 'Feedback2Screenshot';
+
+export type IFeedback2ScreenshotIntegration = IntegrationFnResult & PublicFeedback2ScreenshotIntegration;
+
+export const _feedback2ScreenshotIntegration = (() => {
+  return {
+    name: INTEGRATION_NAME,
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    setupOnce() {},
+    createInput: createInput,
+  };
+}) satisfies IntegrationFn;
+
+export const feedback2ScreenshotIntegration = defineIntegration(_feedback2ScreenshotIntegration);
diff --git a/packages/feedback2/src/types/config.ts b/packages/feedback2/src/types/config.ts
new file mode 100644
index 000000000000..0bcdcb0443cf
--- /dev/null
+++ b/packages/feedback2/src/types/config.ts
@@ -0,0 +1,170 @@
+import type { FeedbackFormData } from './form';
+import type { FeedbackTheme } from './theme';
+
+/**
+ * General feedback configuration
+ */
+export interface FeedbackGeneralConfiguration {
+  /**
+   * id to use for the main widget container (this will host the shadow DOM)
+   */
+  id: string;
+
+  /**
+   * Show the Sentry branding
+   */
+  showBranding: boolean;
+
+  /**
+   * Auto-inject default Feedback actor button to the DOM when integration is
+   * added.
+   */
+  autoInject: boolean;
+
+  /**
+   * Should the email field be required?
+   */
+  isEmailRequired: boolean;
+
+  /**
+   * Should the name field be required?
+   */
+  isNameRequired: boolean;
+
+  /**
+   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
+   */
+  showEmail: boolean;
+
+  /**
+   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
+   */
+  showName: boolean;
+
+  /**
+   * Should the screen shots field be included?
+   * Screen shots cannot be marked as required
+   */
+  showScreenshot: boolean;
+
+  /**
+   * Fill in email/name input fields with Sentry user context if it exists.
+   * The value of the email/name keys represent the properties of your user context.
+   */
+  useSentryUser: {
+    email: string;
+    name: string;
+  };
+}
+
+/**
+ * Theme-related configuration
+ */
+export interface FeedbackThemeConfiguration {
+  /**
+   * The colorscheme to use. "system" will choose the scheme based on the user's system settings
+   */
+  colorScheme: 'system' | 'light' | 'dark';
+
+  /**
+   * Light theme customization, will be merged with default theme values.
+   */
+  themeLight: FeedbackTheme;
+
+  /**
+   * Dark theme customization, will be merged with default theme values.
+   */
+  themeDark: FeedbackTheme;
+}
+
+/**
+ * All of the different text labels that can be customized
+ */
+export interface FeedbackTextConfiguration {
+  /**
+   * The label for the Feedback widget button that opens the dialog
+   */
+  buttonLabel: string;
+
+  /**
+   * The label for the Feedback form cancel button that closes dialog
+   */
+  cancelButtonLabel: string;
+
+  /**
+   * The label for the Feedback form submit button that sends feedback
+   */
+  submitButtonLabel: string;
+
+  /**
+   * The title of the Feedback form
+   */
+  formTitle: string;
+
+  /**
+   * Label for the email input
+   */
+  emailLabel: string;
+
+  /**
+   * Placeholder text for Feedback email input
+   */
+  emailPlaceholder: string;
+
+  /**
+   * Label for the message input
+   */
+  messageLabel: string;
+
+  /**
+   * Placeholder text for Feedback message input
+   */
+  messagePlaceholder: string;
+
+  /**
+   * Label for the name input
+   */
+  nameLabel: string;
+
+  /**
+   * Placeholder text for Feedback name input
+   */
+  namePlaceholder: string;
+
+  /**
+   * Message after feedback was sent successfully
+   */
+  successMessageText: string;
+}
+
+/**
+ * The public callbacks available for the feedback integration
+ */
+export interface FeedbackCallbacks {
+  /**
+   * Callback when form is opened
+   */
+  onFormOpen?: () => void;
+
+  /**
+   * Callback when form is closed and not submitted
+   */
+  onFormClose?: () => void;
+
+  /**
+   * Callback when feedback is successfully submitted
+   *
+   * After this you'll see a SuccessMessage on the screen for a moment.
+   */
+  onSubmitSuccess?: (data: FeedbackFormData) => void;
+
+  /**
+   * Callback when feedback is unsuccessfully submitted
+   */
+  onSubmitError?: (error: Error) => void;
+
+  /**
+   * Callback when the feedback form is submitted successfully, and the SuccessMessage is complete, or dismissed
+   */
+  onFormSubmitted?: () => void;
+}
diff --git a/packages/feedback2/src/types/form.ts b/packages/feedback2/src/types/form.ts
new file mode 100644
index 000000000000..d669ad7ea22e
--- /dev/null
+++ b/packages/feedback2/src/types/form.ts
@@ -0,0 +1,8 @@
+import type { Attachment } from '@sentry/types';
+
+export type FeedbackFormData = {
+  name: string;
+  email: string;
+  message: string;
+  attachments: Attachment[] | undefined;
+};
diff --git a/packages/feedback2/src/types/index.ts b/packages/feedback2/src/types/index.ts
new file mode 100644
index 000000000000..cee1bae6ab87
--- /dev/null
+++ b/packages/feedback2/src/types/index.ts
@@ -0,0 +1,101 @@
+import type { Attachment } from '@sentry/types';
+import type { ComponentType } from 'preact';
+import type {
+  FeedbackCallbacks,
+  FeedbackGeneralConfiguration,
+  FeedbackTextConfiguration,
+  FeedbackThemeConfiguration,
+} from './config';
+import type { FeedbackTheme } from './theme';
+
+export type { FeedbackFormData } from './form';
+
+export { FeedbackTheme };
+export interface FeedbackThemes {
+  themeDark: FeedbackTheme;
+  themeLight: FeedbackTheme;
+}
+
+/**
+ * The integration's internal `options` member where every value should be set
+ */
+export interface FeedbackInternalOptions
+  extends FeedbackGeneralConfiguration,
+    FeedbackThemeConfiguration,
+    FeedbackTextConfiguration,
+    FeedbackCallbacks {}
+
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export interface OptionalFeedbackConfiguration
+  extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
+  themeLight?: Partial<FeedbackTheme>;
+  themeDark?: Partial<FeedbackTheme>;
+}
+
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;
+
+export interface SendFeedbackParams {
+  message: string;
+  name?: string;
+  email?: string;
+  attachments?: Attachment[];
+  url?: string;
+  source?: string;
+}
+
+export interface SendFeedbackOptions {
+  /**
+   * Should include replay with the feedback?
+   */
+  includeReplay?: boolean;
+}
+
+export interface Dialog {
+  /**
+   * The HTMLElement that is containing all the form content
+   */
+  el: HTMLElement;
+
+  /**
+   * Insert the Dialog into the Shadow DOM.
+   *
+   * The Dialog starts in the `closed` state where no inner HTML is rendered.
+   */
+  appendToDom: () => void;
+
+  /**
+   * Remove the dialog from the Shadow DOM
+   */
+  removeFromDom: () => void;
+
+  /**
+   * Open/Show the dialog & form inside it
+   */
+  open: () => void;
+
+  /**
+   * Close/Hide the dialog & form inside it
+   */
+  close: () => void;
+}
+
+export interface ScreenshotInput {
+  /**
+   * The preact component
+   */
+  input: ComponentType<{ onError: (error: Error) => void }>;
+
+  /**
+   * The image/screenshot bytes
+   */
+  value: () => Promise<Attachment | undefined>;
+}
diff --git a/packages/feedback2/src/types/theme.ts b/packages/feedback2/src/types/theme.ts
new file mode 100644
index 000000000000..1bfb2e580a99
--- /dev/null
+++ b/packages/feedback2/src/types/theme.ts
@@ -0,0 +1,118 @@
+export interface FeedbackTheme {
+  /**
+   * Font family for widget
+   */
+  fontFamily: string;
+  /**
+   * Font size for widget
+   */
+  fontSize: string;
+  /**
+   * Background color for actor and dialog
+   */
+  background: string;
+  /**
+   * Background color on hover
+   */
+  backgroundHover: string;
+  /**
+   * Border styling for actor and dialog
+   */
+  border: string;
+  /**
+   * Border radius styling for actor
+   */
+  borderRadius: string;
+  /**
+   * Box shadow for actor and dialog
+   */
+  boxShadow: string;
+  /**
+   * Foreground color (i.e. text color)
+   */
+  foreground: string;
+  /**
+   * Success color
+   */
+  success: string;
+  /**
+   * Error color
+   */
+  error: string;
+
+  /**
+   * Background color for the submit button
+   */
+  submitBackground: string;
+  /**
+   * Background color when hovering over the submit button
+   */
+  submitBackgroundHover: string;
+  /**
+   * Border style for the submit button
+   */
+  submitBorder: string;
+  /**
+   * Border style for the submit button, in the focued state
+   */
+  submitOutlineFocus: string;
+  /**
+   * Foreground color for the submit button
+   */
+  submitForeground: string;
+
+  /**
+   * Foreground color for the submit button, in the hover state
+   */
+  submitForegroundHover: string;
+
+  /**
+   * Background color for the cancel button
+   */
+  cancelBackground: string;
+  /**
+   * Background color when hovering over the cancel button
+   */
+  cancelBackgroundHover: string;
+  /**
+   * Border style for the cancel button
+   */
+  cancelBorder: string;
+  /**
+   * Border style for the cancel button, in the focued state
+   */
+  cancelOutlineFocus: string;
+  /**
+   * Foreground color for the cancel button
+   */
+  cancelForeground: string;
+  /**
+   * Foreground color for the cancel button, in the hover state
+   */
+  cancelForegroundHover: string;
+
+  /**
+   * Background color for form inputs
+   */
+  inputBackground: string;
+  /**
+   * Foreground color for form inputs
+   */
+  inputForeground: string;
+  /**
+   * Border styles for form inputs
+   */
+  inputBorder: string;
+  /**
+   * Border styles for form inputs when focused
+   */
+  inputOutlineFocus: string;
+  /**
+   * Border radius for dialog
+   */
+  formBorderRadius: string;
+  /**
+   * Border radius for form inputs
+   */
+  formContentBorderRadius: string;
+}
diff --git a/packages/feedback2/src/util/debug-build.ts b/packages/feedback2/src/util/debug-build.ts
new file mode 100644
index 000000000000..60aa50940582
--- /dev/null
+++ b/packages/feedback2/src/util/debug-build.ts
@@ -0,0 +1,8 @@
+declare const __DEBUG_BUILD__: boolean;
+
+/**
+ * This serves as a build time flag that will be true by default, but false in non-debug builds or if users replace `__SENTRY_DEBUG__` in their generated code.
+ *
+ * ATTENTION: This constant must never cross package boundaries (i.e. be exported) to guarantee that it can be used for tree shaking.
+ */
+export const DEBUG_BUILD = __DEBUG_BUILD__;
diff --git a/packages/feedback2/src/util/mergeOptions.ts b/packages/feedback2/src/util/mergeOptions.ts
new file mode 100644
index 000000000000..da7f4c271f14
--- /dev/null
+++ b/packages/feedback2/src/util/mergeOptions.ts
@@ -0,0 +1,42 @@
+import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
+
+/**
+ * Quick and dirty deep merge for the Feedback integration options
+ */
+export function mergeOptions(
+  defaultOptions: FeedbackInternalOptions,
+  optionOverrides: OptionalFeedbackConfiguration,
+): FeedbackInternalOptions {
+  return {
+    ...defaultOptions,
+    ...optionOverrides,
+    onFormOpen: () => {
+      optionOverrides.onFormOpen && optionOverrides.onFormOpen();
+      defaultOptions.onFormOpen && defaultOptions.onFormOpen();
+    },
+    onFormClose: () => {
+      optionOverrides.onFormClose && optionOverrides.onFormClose();
+      defaultOptions.onFormClose && defaultOptions.onFormClose();
+    },
+    onSubmitSuccess: (data: FeedbackFormData) => {
+      optionOverrides.onSubmitSuccess && optionOverrides.onSubmitSuccess(data);
+      defaultOptions.onSubmitSuccess && defaultOptions.onSubmitSuccess(data);
+    },
+    onSubmitError: (error: Error) => {
+      optionOverrides.onSubmitError && optionOverrides.onSubmitError(error);
+      defaultOptions.onSubmitError && defaultOptions.onSubmitError(error);
+    },
+    onFormSubmitted: () => {
+      optionOverrides.onFormSubmitted && optionOverrides.onFormSubmitted();
+      defaultOptions.onFormSubmitted && defaultOptions.onFormSubmitted();
+    },
+    themeDark: {
+      ...defaultOptions.themeDark,
+      ...optionOverrides.themeDark,
+    },
+    themeLight: {
+      ...defaultOptions.themeLight,
+      ...optionOverrides.themeLight,
+    },
+  };
+}
diff --git a/packages/feedback2/src/util/prepareFeedbackEvent.ts b/packages/feedback2/src/util/prepareFeedbackEvent.ts
new file mode 100644
index 000000000000..0d66d251c6ff
--- /dev/null
+++ b/packages/feedback2/src/util/prepareFeedbackEvent.ts
@@ -0,0 +1,43 @@
+import { getIsolationScope, prepareEvent } from '@sentry/core';
+import type { Client, FeedbackEvent, Scope } from '@sentry/types';
+
+interface PrepareFeedbackEventParams {
+  client: Client;
+  event: FeedbackEvent;
+  scope: Scope;
+}
+/**
+ * Prepare a feedback event & enrich it with the SDK metadata.
+ */
+export async function prepareFeedbackEvent({
+  client,
+  scope,
+  event,
+}: PrepareFeedbackEventParams): Promise<FeedbackEvent> {
+  const eventHint = {};
+  if (client.emit) {
+    client.emit('preprocessEvent', event, eventHint);
+  }
+
+  const preparedEvent = (await prepareEvent(
+    client.getOptions(),
+    event,
+    eventHint,
+    scope,
+    client,
+    getIsolationScope(),
+  )) as FeedbackEvent | null;
+
+  if (preparedEvent === null) {
+    // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
+    client.recordDroppedEvent('event_processor', 'feedback', event);
+    throw new Error('Unable to prepare event');
+  }
+
+  // This normally happens in browser client "_prepareEvent"
+  // but since we do not use this private method from the client, but rather the plain import
+  // we need to do this manually.
+  preparedEvent.platform = preparedEvent.platform || 'javascript';
+
+  return preparedEvent;
+}
diff --git a/packages/feedback2/src/util/setAttributesNS.ts b/packages/feedback2/src/util/setAttributesNS.ts
new file mode 100644
index 000000000000..74f0889a1f83
--- /dev/null
+++ b/packages/feedback2/src/util/setAttributesNS.ts
@@ -0,0 +1,9 @@
+/**
+ * Helper function to set a dict of attributes on element (w/ specified namespace)
+ */
+export function setAttributesNS<T extends SVGElement>(el: T, attributes: Record<string, string>): T {
+  Object.entries(attributes).forEach(([key, val]) => {
+    el.setAttributeNS(null, key, val);
+  });
+  return el;
+}
diff --git a/packages/feedback2/src/util/validate.ts b/packages/feedback2/src/util/validate.ts
new file mode 100644
index 000000000000..5ab14743bf03
--- /dev/null
+++ b/packages/feedback2/src/util/validate.ts
@@ -0,0 +1,24 @@
+import type { FeedbackFormData, FeedbackInternalOptions } from '../types';
+
+export type Props = Pick<
+  FeedbackInternalOptions,
+  'emailLabel' | 'isEmailRequired' | 'isNameRequired' | 'messageLabel' | 'nameLabel'
+>;
+
+/**
+ * Validate that a given feedback submission has the required fields
+ */
+export function getMissingFields(feedback: FeedbackFormData, props: Props): string[] {
+  const emptyFields = [];
+  if (props.isNameRequired && !feedback.name) {
+    emptyFields.push(props.nameLabel);
+  }
+  if (props.isEmailRequired && !feedback.email) {
+    emptyFields.push(props.emailLabel);
+  }
+  if (!feedback.message) {
+    emptyFields.push(props.messageLabel);
+  }
+
+  return emptyFields;
+}
diff --git a/packages/feedback2/tsconfig.json b/packages/feedback2/tsconfig.json
new file mode 100644
index 000000000000..446432e02a39
--- /dev/null
+++ b/packages/feedback2/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "module": "esnext",
+
+   /* Preact Config */
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"skipLibCheck": true,
+		"baseUrl": "./",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		}
+  },
+  "include": ["src/**/*.ts","src/**/*.tsx"]
+}
diff --git a/packages/feedback2/tsconfig.test.json b/packages/feedback2/tsconfig.test.json
new file mode 100644
index 000000000000..ad87caa06c48
--- /dev/null
+++ b/packages/feedback2/tsconfig.test.json
@@ -0,0 +1,15 @@
+{
+  "extends": "./tsconfig.json",
+
+  "include": ["test/**/*.ts", "jest.config.ts", "jest.setup.ts"],
+
+  "compilerOptions": {
+    "types": ["node", "jest"],
+    "esModuleInterop": true,
+    "allowJs": true,
+    "noImplicitAny": true,
+    "noImplicitThis": false,
+    "strictNullChecks": true,
+    "strictPropertyInitialization": false
+  }
+}
diff --git a/packages/feedback2/tsconfig.types.json b/packages/feedback2/tsconfig.types.json
new file mode 100644
index 000000000000..374fd9bc9364
--- /dev/null
+++ b/packages/feedback2/tsconfig.types.json
@@ -0,0 +1,10 @@
+{
+  "extends": "./tsconfig.json",
+
+  "compilerOptions": {
+    "declaration": true,
+    "declarationMap": true,
+    "emitDeclarationOnly": true,
+    "outDir": "build/npm/types"
+  }
+}
diff --git a/packages/types/src/feedback.ts b/packages/types/src/feedback.ts
index 360064cda833..37dfe9818994 100644
--- a/packages/types/src/feedback.ts
+++ b/packages/types/src/feedback.ts
@@ -1,6 +1,17 @@
 import type { Event } from './event';
+import type { User } from './user';
 
-export interface FeedbackContext extends Record<string, unknown> {
+/**
+ * Crash report feedback object
+ */
+export interface UserFeedback {
+  event_id: string;
+  email: User['email'];
+  name: string;
+  comments: string;
+}
+
+interface FeedbackContext extends Record<string, unknown> {
   message: string;
   contact_email?: string;
   name?: string;
diff --git a/packages/types/src/index.ts b/packages/types/src/index.ts
index 6a5f14d7b03c..4c95f641a753 100644
--- a/packages/types/src/index.ts
+++ b/packages/types/src/index.ts
@@ -69,7 +69,7 @@ export type {
   Profile,
 } from './profiling';
 export type { ReplayEvent, ReplayRecordingData, ReplayRecordingMode } from './replay';
-export type { FeedbackEvent } from './feedback';
+export type { FeedbackEvent, UserFeedback } from './feedback';
 export type { QueryParams, Request, SanitizedRequestData } from './request';
 export type { Runtime } from './runtime';
 export type { CaptureContext, Scope, ScopeContext, ScopeData } from './scope';
@@ -130,7 +130,7 @@ export type {
   BaseTransportOptions,
   TransportRequestExecutor,
 } from './transport';
-export type { User, UserFeedback } from './user';
+export type { User } from './user';
 export type { WebFetchHeaders, WebFetchRequest } from './webfetchapi';
 export type { WrappedFunction } from './wrappedfunction';
 export type { Instrumenter } from './instrumenter';
diff --git a/packages/types/src/user.ts b/packages/types/src/user.ts
index afbb42261ab3..ba8e32a3d469 100644
--- a/packages/types/src/user.ts
+++ b/packages/types/src/user.ts
@@ -8,10 +8,3 @@ export interface User {
   email?: string;
   username?: string;
 }
-
-export interface UserFeedback {
-  event_id: string;
-  email: User['email'];
-  name: string;
-  comments: string;
-}

From 4447057dc7f246fc680938dd47c33e9cb99d435e Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 29 Feb 2024 18:11:17 -0500
Subject: [PATCH 23/54] 4 corners working! need to fix resetting image

---
 .../src/screenshotEditor.tsx                  | 233 ------------------
 .../src/screenshotEditorHelp.tsx              | 112 ---------
 .../src/screenshotWidget.tsx                  |  92 +++++--
 3 files changed, 70 insertions(+), 367 deletions(-)
 delete mode 100644 packages/feedback-screenshot/src/screenshotEditor.tsx
 delete mode 100644 packages/feedback-screenshot/src/screenshotEditorHelp.tsx

diff --git a/packages/feedback-screenshot/src/screenshotEditor.tsx b/packages/feedback-screenshot/src/screenshotEditor.tsx
deleted file mode 100644
index 65575b8e5534..000000000000
--- a/packages/feedback-screenshot/src/screenshotEditor.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { h, render } from 'preact';
-import type { VNode } from 'preact';
-import { ScreenshotEditorHelp } from './screenshotEditorHelp';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { GLOBAL_OBJ } from '@sentry/utils';
-
-// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
-// prevents the browser package from being bundled in the CDN bundle, and avoids a
-// circular dependency between the browser and feedback packages
-export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
-
-type Props = {
-  screenshotImage: HTMLCanvasElement | null;
-  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
-};
-// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
-
-export interface Rect {
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-}
-export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
-  // const image = screenshotImage;
-  // return image ? (
-  //   <div style="padding-right: 16px;">
-  //     <img
-  //       type="image"
-  //       src={image.toDataURL()}
-  //       id="screenshot"
-  //       name="screenshot"
-  //       style="width:100%; height:100%;"
-  //     ></img>
-  //   </div>
-  // ) : null;
-
-  // const Canvas = styled.canvas`
-  //   position: absolute;
-  //   cursor: crosshair;
-  //   max-width: 100vw;
-  //   max-height: 100vh;
-  // `;
-  // const Container = styled.div`
-  //   position: fixed;
-  //   z-index: 10000;
-  //   height: 100vh;
-  //   width: 100vw;
-  //   top: 0;
-  //   left: 0;
-  //   background-color: rgba(240, 236, 243, 1);
-  //   background-image: repeating-linear-gradient(
-  //     45deg,
-  //     transparent,
-  //     transparent 5px,
-  //     rgba(0, 0, 0, 0.03) 5px,
-  //     rgba(0, 0, 0, 0.03) 10px
-  //   );
-  // `;
-
-  const getCanvasRenderSize = (width: number, height: number) => {
-    const maxWidth = WINDOW.innerWidth;
-    const maxHeight = WINDOW.innerHeight;
-
-    if (width > maxWidth) {
-      height = (maxWidth / width) * height;
-      width = maxWidth;
-    }
-
-    if (height > maxHeight) {
-      width = (maxHeight / height) * width;
-      height = maxHeight;
-    }
-
-    return { width, height };
-  };
-
-  interface Point {
-    x: number;
-    y: number;
-  }
-
-  const constructRect = (start: Point, end: Point) => {
-    return {
-      x: Math.min(start.x, end.x),
-      y: Math.min(start.y, end.y),
-      width: Math.abs(start.x - end.x),
-      height: Math.abs(start.y - end.y),
-    };
-  };
-
-  const canvasRef = useRef<HTMLCanvasElement>(screenshotImage);
-  const [isDraggingState, setIsDraggingState] = useState(true);
-  const currentRatio = useRef<number>(1);
-
-  useEffect(() => {
-    const canvas = canvasRef.current;
-    // eslint-disable-next-line @sentry-internal/sdk/no-optional-chaining
-    const ctx = canvas?.getContext('2d');
-    let img = new Image();
-    const rectStart: { x: number; y: number } = { x: 0, y: 0 };
-    const rectEnd: { x: number; y: number } = { x: canvas?.width ?? 0, y: canvas?.height ?? 0 };
-    let isDragging = false;
-
-    function setCanvasSize() {
-      const renderSize = getCanvasRenderSize(img.width, img.height);
-      if (canvas) {
-        canvas.style.width = `${renderSize.width}px`;
-        canvas.style.height = `${renderSize.height}px`;
-        canvas.style.top = `${(WINDOW.innerHeight - renderSize.height) / 2}px`;
-        canvas.style.left = `${(WINDOW.innerWidth - renderSize.width) / 2}px`;
-        console.log(WINDOW.innerWidth, WINDOW.innerHeight, renderSize.width, renderSize.height);
-      }
-
-      // store it so we can translate the selection
-      currentRatio.current = renderSize.width / img.width;
-    }
-
-    function refreshCanvas() {
-      if (canvas && ctx) {
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.drawImage(img, 0, 0);
-      }
-
-      if (!isDragging) {
-        return;
-      }
-
-      const rect = constructRect(rectStart, rectEnd);
-      if (canvas && ctx) {
-        // draw gray overlay around the selection
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, canvas.width, rect.y);
-        ctx.fillRect(0, rect.y, rect.x, rect.height);
-        ctx.fillRect(rect.x + rect.width, rect.y, canvas.width, rect.height);
-        ctx.fillRect(0, rect.y + rect.height, canvas.width, canvas.height);
-
-        // draw selection border
-        ctx.strokeStyle = '#79628c';
-        ctx.lineWidth = 6;
-        ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
-      }
-    }
-
-    function submit(rect?: Rect) {
-      if (!rect) {
-        setScreenshotImage(canvas);
-        return;
-      }
-      // eslint-disable-next-line no-restricted-globals
-      const cutoutCanvas = document.createElement('canvas');
-      cutoutCanvas.width = rect.width;
-      cutoutCanvas.height = rect.height;
-      const cutoutCtx = cutoutCanvas.getContext('2d');
-      if (cutoutCtx && canvas) {
-        cutoutCtx.drawImage(canvas, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
-      }
-
-      setScreenshotImage(cutoutCanvas);
-      img.src = cutoutCanvas.toDataURL();
-    }
-
-    function handleMouseDown(e: { offsetX: number; offsetY: number }) {
-      rectStart.x = Math.floor(e.offsetX / currentRatio.current);
-      rectStart.y = Math.floor(e.offsetY / currentRatio.current);
-      isDragging = true;
-      setIsDraggingState(true);
-    }
-
-    function handleMouseMove(e: { offsetX: number; offsetY: number }) {
-      rectEnd.x = Math.floor(e.offsetX / currentRatio.current);
-      rectEnd.y = Math.floor(e.offsetY / currentRatio.current);
-      refreshCanvas();
-    }
-
-    async function handleMouseUp() {
-      isDragging = false;
-      setIsDraggingState(false);
-      if (rectStart.x - rectEnd.x === 0 && rectStart.y - rectEnd.y === 0) {
-        // no selection
-        refreshCanvas();
-        return;
-      }
-      await submit(constructRect(rectStart, rectEnd));
-    }
-
-    async function handleEnterKey(e: { key: string }) {
-      if (e.key === 'Enter') {
-        await submit();
-      }
-    }
-
-    img.onload = () => {
-      if (canvas && ctx) {
-        canvas.width = img.width;
-        canvas.height = img.height;
-        setCanvasSize();
-        ctx.drawImage(img, 0, 0);
-      }
-    };
-
-    if (screenshotImage) {
-      img.src = screenshotImage.toDataURL();
-    }
-
-    WINDOW.addEventListener('resize', setCanvasSize, { passive: true });
-    canvas?.addEventListener('mousedown', handleMouseDown);
-    canvas?.addEventListener('mousemove', handleMouseMove);
-    canvas?.addEventListener('mouseup', handleMouseUp);
-    WINDOW.addEventListener('keydown', handleEnterKey);
-
-    return () => {
-      WINDOW.removeEventListener('resize', setCanvasSize);
-      canvas?.removeEventListener('mousedown', handleMouseDown);
-      canvas?.removeEventListener('mousemove', handleMouseMove);
-      canvas?.removeEventListener('mouseup', handleMouseUp);
-      WINDOW.removeEventListener('keydown', handleEnterKey);
-    };
-  }, [screenshotImage]);
-
-  return (
-    <div style="padding-right: 16px;">
-      <canvas
-        style="
-    width: 100%;
-    height: 100%;"
-        ref={canvasRef}
-      />
-      {/* <ScreenshotEditorHelp hide={isDraggingState} /> */}
-    </div>
-  );
-}
diff --git a/packages/feedback-screenshot/src/screenshotEditorHelp.tsx b/packages/feedback-screenshot/src/screenshotEditorHelp.tsx
deleted file mode 100644
index af3ef7e30c55..000000000000
--- a/packages/feedback-screenshot/src/screenshotEditorHelp.tsx
+++ /dev/null
@@ -1,112 +0,0 @@
-/* eslint-disable @sentry-internal/sdk/no-optional-chaining */
-/* eslint-disable @typescript-eslint/no-unsafe-member-access */
-import { h, render } from 'preact';
-import { useEffect, useState, useRef } from 'preact/hooks';
-import { GLOBAL_OBJ } from '@sentry/utils';
-
-// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
-// prevents the browser package from being bundled in the CDN bundle, and avoids a
-// circular dependency between the browser and feedback packages
-export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
-
-// const Wrapper = styled.div`
-//   position: fixed;
-//   width: 100vw;
-//   padding-top: 8px;
-//   left: 0;
-//   pointer-events: none;
-//   display: flex;
-//   justify-content: center;
-//   transition: transform 0.2s ease-in-out;
-//   transition-delay: 0.5s;
-//   transform: translateY(0);
-//   &[data-hide='true'] {
-//     transition-delay: 0s;
-//     transform: translateY(-100%);
-//   }
-// `;
-
-// const Content = styled.div`
-//   background-color: #231c3d;
-//   border: 1px solid #ccc;
-//   border-radius: 20px;
-//   color: #fff;
-//   font-size: 14px;
-//   padding: 6px 24px;
-//   box-shadow:
-//     0 0 0 1px rgba(0, 0, 0, 0.05),
-//     0 4px 16px rgba(0, 0, 0, 0.2);
-// `;
-
-export function ScreenshotEditorHelp({ hide }: { hide: boolean }) {
-  const [isHidden, setIsHidden] = useState(false);
-  const contentRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    let boundingRect: DOMRect;
-    if (contentRef.current) {
-      boundingRect = contentRef.current?.getBoundingClientRect();
-    }
-    const handleMouseMove = (e: MouseEvent) => {
-      const { clientX, clientY } = e;
-      const { left, bottom, right } = boundingRect;
-      const threshold = 50;
-      const isNearContent = clientX > left - threshold && clientX < right + threshold && clientY < bottom + threshold;
-      if (isNearContent) {
-        setIsHidden(true);
-      } else {
-        setIsHidden(false);
-      }
-    };
-
-    function handleResize() {
-      if (contentRef.current) {
-        boundingRect = contentRef.current?.getBoundingClientRect();
-      }
-    }
-
-    WINDOW.addEventListener('resize', handleResize);
-    WINDOW.addEventListener('mousemove', handleMouseMove);
-    return () => {
-      WINDOW.removeEventListener('resize', handleResize);
-      WINDOW.removeEventListener('mousemove', handleMouseMove);
-    };
-  }, []);
-
-  return (
-    <div
-      style="  position: fixed;
-    width: 100vw;
-    padding-top: 8px;
-    left: 0;
-    pointer-events: none;
-    display: flex;
-    justify-content: center;
-    transition: transform 0.2s ease-in-out;
-    transition-delay: 0.5s;
-    transform: translateY(0);
-    &[data-hide='true'] {
-      transition-delay: 0s;
-      transform: translateY(-100%);
-    }"
-      data-hide={isHidden || hide}
-    >
-      <div
-        style="  background-color: #231c3d;
-        border: 1px solid #ccc;
-        border-radius: 20px;
-        color: #fff;
-        font-size: 14px;
-        padding: 6px 24px;
-        box-shadow:
-          0 0 0 1px rgba(0, 0, 0, 0.05),
-          0 4px 16px rgba(0, 0, 0, 0.2);"
-        ref={contentRef}
-      >
-        {'Mark the problem on the screen (press "Enter" to skip)'}
-        <button>Cancel</button>
-        <button>Confirm</button>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index e8f29d188e2c..ba6f3dc2409d 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -60,6 +60,7 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
   const [crop, setCrop] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
   const imageRef = useRef<HTMLCanvasElement>(null);
   const [image, setImage] = useState<HTMLCanvasElement | null>(screenshotImage);
+  const [corner, setCorner] = useState('topleft');
 
   useEffect(() => {
     const imageCanvas = imageRef.current;
@@ -124,25 +125,45 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     }
   }
 
-  const handleMouseMove = useCallback((e: { offsetX: number; offsetY: number }) => {
-    console.log('move');
-    setRectStart({
-      x: Math.floor(e.offsetX / currentRatio.current),
-      y: Math.floor(e.offsetY / currentRatio.current),
-    });
-  }, []);
-
-  const handleMouseUp = useCallback(() => {
-    console.log('up');
-    canvasRef.current?.removeEventListener('mousemove', handleMouseMove);
-    canvasRef.current?.removeEventListener('click', handleMouseUp);
-    setConfirmCrop(true);
+  const makeHandleMouseMove = useCallback((corner: string) => {
+    return function (e: MouseEvent) {
+      switch (corner) {
+        case 'topleft':
+          setRectStart({
+            x: Math.floor(e.offsetX / currentRatio.current),
+            y: Math.floor(e.offsetY / currentRatio.current),
+          });
+          break;
+        case 'topright':
+          setRectStart(prev => ({ ...prev, y: Math.floor(e.offsetY / currentRatio.current) }));
+          setRectEnd(prev => ({ ...prev, x: Math.floor(e.offsetX / currentRatio.current) }));
+          break;
+        case 'bottomleft':
+          setRectStart(prev => ({ ...prev, x: Math.floor(e.offsetX / currentRatio.current) }));
+          setRectEnd(prev => ({ ...prev, y: Math.floor(e.offsetY / currentRatio.current) }));
+          break;
+        case 'bottomright':
+          setRectEnd({
+            x: Math.floor(e.offsetX / currentRatio.current),
+            y: Math.floor(e.offsetY / currentRatio.current),
+          });
+          break;
+      }
+    };
   }, []);
 
-  function onGrabButton() {
-    console.log('down');
+  function onGrabButton(e: Event, corner: string) {
     setConfirmCrop(false);
-    canvasRef.current?.addEventListener('click', handleMouseUp);
+    const handleMouseMove = makeHandleMouseMove(corner);
+    const handleMouseUp = () => {
+      canvasRef.current?.removeEventListener('mousemove', handleMouseMove);
+      canvasRef.current?.removeEventListener('mouseup', handleMouseUp);
+      e.target?.removeEventListener('mouseup', handleMouseUp);
+      setConfirmCrop(true);
+    };
+
+    canvasRef.current?.addEventListener('mouseup', handleMouseUp);
+    e.target?.addEventListener('mouseup', handleMouseUp);
     canvasRef.current?.addEventListener('mousemove', handleMouseMove);
   }
 
@@ -174,8 +195,12 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     <div style="padding-right: 16px; position:relative;">
       <canvas ref={imageRef}></canvas>
       <canvas style={{ position: 'absolute' }} ref={canvasRef}></canvas>
-      <button
-        style={{ width: '32px', position: 'absolute', left: rectStart.x, top: rectStart.y }}
+      <CropCorner left={rectStart.x} top={rectStart.y} onGrabButton={onGrabButton} corner="topleft"></CropCorner>
+      <CropCorner left={rectEnd.x} top={rectStart.y} onGrabButton={onGrabButton} corner="topright"></CropCorner>
+      <CropCorner left={rectStart.x} top={rectEnd.y} onGrabButton={onGrabButton} corner="bottomleft"></CropCorner>
+      <CropCorner left={rectEnd.x} top={rectEnd.y} onGrabButton={onGrabButton} corner="bottomright"></CropCorner>
+      {/* <button
+        style={{ width: 30, height: 30, position: 'absolute', left: rectStart.x, top: rectStart.y }}
         onMouseDown={e => {
           e.preventDefault();
           onGrabButton();
@@ -184,10 +209,7 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
           e.preventDefault();
           handleMouseUp();
         }}
-      ></button>
-      <button style={{ position: 'absolute', left: rectStart.x, top: rectEnd.y }}></button>
-      <button style={{ position: 'absolute', left: rectEnd.x, top: rectStart.y }}></button>
-      <button style={{ position: 'absolute', left: rectEnd.x, top: rectEnd.y }}></button>
+      ></button> */}
       <div
         style={{
           position: 'absolute',
@@ -221,3 +243,29 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     </div>
   );
 }
+
+function CropCorner({
+  top,
+  left,
+  corner,
+  onGrabButton,
+}: {
+  top: number;
+  left: number;
+  corner: string;
+  onGrabButton: (e: Event, corner: string) => void;
+}): VNode {
+  return (
+    <button
+      style={{ width: 30, height: 30, position: 'absolute', top: top, left: left }}
+      onMouseDown={e => {
+        e.preventDefault();
+        onGrabButton(e, corner);
+      }}
+      onClick={e => {
+        e.preventDefault();
+        // handleMouseUp();
+      }}
+    ></button>
+  );
+}

From 5122a607be30e31ecd0d7f28b61693e29a256fd6 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Fri, 1 Mar 2024 00:52:47 -0500
Subject: [PATCH 24/54] fix cropping & button styling

---
 .../src/screenshotWidget.tsx                  | 115 +++++++++++-------
 1 file changed, 70 insertions(+), 45 deletions(-)

diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
index ba6f3dc2409d..dfc209b2c5c6 100644
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ b/packages/feedback-screenshot/src/screenshotWidget.tsx
@@ -1,6 +1,7 @@
 import type { VNode } from 'preact';
 import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
 import { GLOBAL_OBJ } from '@sentry/utils';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
 import { h } from 'preact';
 
 // exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
@@ -53,14 +54,11 @@ const getCanvasRenderSize = (width: number, height: number) => {
 
 export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
   const canvasRef = useRef<HTMLCanvasElement>(null);
-  const currentRatio = useRef<number>(1);
+  const imageRef = useRef<HTMLCanvasElement>(null);
   const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
   const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 });
   const [confirmCrop, setConfirmCrop] = useState(false);
-  const [crop, setCrop] = useState<Rect>({ x: 0, y: 0, width: 0, height: 0 });
-  const imageRef = useRef<HTMLCanvasElement>(null);
   const [image, setImage] = useState<HTMLCanvasElement | null>(screenshotImage);
-  const [corner, setCorner] = useState('topleft');
 
   useEffect(() => {
     const imageCanvas = imageRef.current;
@@ -93,6 +91,7 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
   function setCanvasSize(canvas: HTMLCanvasElement) {
     if (image) {
       const renderSize = getCanvasRenderSize(image.width, image.height);
+
       canvas.style.width = `${renderSize.width}px`;
       canvas.style.height = `${renderSize.height}px`;
       canvas.style.top = '0px';
@@ -109,7 +108,6 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
       ctx.clearRect(0, 0, canvas.width, canvas.height);
 
       const rect = constructRect(rectStart, rectEnd);
-      setCrop(rect);
 
       // draw gray overlay around the selection
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
@@ -130,22 +128,22 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
       switch (corner) {
         case 'topleft':
           setRectStart({
-            x: Math.floor(e.offsetX / currentRatio.current),
-            y: Math.floor(e.offsetY / currentRatio.current),
+            x: Math.floor(e.offsetX),
+            y: Math.floor(e.offsetY),
           });
           break;
         case 'topright':
-          setRectStart(prev => ({ ...prev, y: Math.floor(e.offsetY / currentRatio.current) }));
-          setRectEnd(prev => ({ ...prev, x: Math.floor(e.offsetX / currentRatio.current) }));
+          setRectStart(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
+          setRectEnd(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
           break;
         case 'bottomleft':
-          setRectStart(prev => ({ ...prev, x: Math.floor(e.offsetX / currentRatio.current) }));
-          setRectEnd(prev => ({ ...prev, y: Math.floor(e.offsetY / currentRatio.current) }));
+          setRectStart(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
+          setRectEnd(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
           break;
         case 'bottomright':
           setRectEnd({
-            x: Math.floor(e.offsetX / currentRatio.current),
-            y: Math.floor(e.offsetY / currentRatio.current),
+            x: Math.floor(e.offsetX),
+            y: Math.floor(e.offsetY),
           });
           break;
       }
@@ -157,13 +155,11 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     const handleMouseMove = makeHandleMouseMove(corner);
     const handleMouseUp = () => {
       canvasRef.current?.removeEventListener('mousemove', handleMouseMove);
-      canvasRef.current?.removeEventListener('mouseup', handleMouseUp);
-      e.target?.removeEventListener('mouseup', handleMouseUp);
+      document?.removeEventListener('mouseup', handleMouseUp);
       setConfirmCrop(true);
     };
 
-    canvasRef.current?.addEventListener('mouseup', handleMouseUp);
-    e.target?.addEventListener('mouseup', handleMouseUp);
+    document?.addEventListener('mouseup', handleMouseUp);
     canvasRef.current?.addEventListener('mousemove', handleMouseMove);
   }
 
@@ -171,20 +167,27 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     refreshCanvas();
   }, [rectStart, rectEnd]);
 
-  function submit(rect?: Rect) {
-    const canvas = imageRef.current;
-    if (!rect) {
-      setScreenshotImage(canvas);
-      setImage(canvas);
-      return;
-    }
-    // eslint-disable-next-line no-restricted-globals
+  function submit() {
+    const image = imageRef.current;
+    const rect = constructRect(rectStart, rectEnd);
+
     const cutoutCanvas = document.createElement('canvas');
     cutoutCanvas.width = rect.width;
     cutoutCanvas.height = rect.height;
+
     const cutoutCtx = cutoutCanvas.getContext('2d');
-    if (cutoutCtx && canvas) {
-      cutoutCtx.drawImage(canvas, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
+    if (cutoutCtx && image) {
+      cutoutCtx.drawImage(
+        image,
+        (rect.x / canvasRef.current!.width) * image.width,
+        (rect.y / canvasRef.current!.height) * image.height,
+        (rect.width / canvasRef.current!.width) * image.width,
+        (rect.height / canvasRef.current!.height) * image.height,
+        0,
+        0,
+        rect.width,
+        rect.height,
+      );
     }
 
     setScreenshotImage(cutoutCanvas);
@@ -195,21 +198,34 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
     <div style="padding-right: 16px; position:relative;">
       <canvas ref={imageRef}></canvas>
       <canvas style={{ position: 'absolute' }} ref={canvasRef}></canvas>
-      <CropCorner left={rectStart.x} top={rectStart.y} onGrabButton={onGrabButton} corner="topleft"></CropCorner>
-      <CropCorner left={rectEnd.x} top={rectStart.y} onGrabButton={onGrabButton} corner="topright"></CropCorner>
-      <CropCorner left={rectStart.x} top={rectEnd.y} onGrabButton={onGrabButton} corner="bottomleft"></CropCorner>
-      <CropCorner left={rectEnd.x} top={rectEnd.y} onGrabButton={onGrabButton} corner="bottomright"></CropCorner>
-      {/* <button
-        style={{ width: 30, height: 30, position: 'absolute', left: rectStart.x, top: rectStart.y }}
-        onMouseDown={e => {
-          e.preventDefault();
-          onGrabButton();
-        }}
-        onClick={e => {
-          e.preventDefault();
-          handleMouseUp();
-        }}
-      ></button> */}
+      <CropCorner
+        left={rectStart.x}
+        top={rectStart.y}
+        onGrabButton={onGrabButton}
+        corner="topleft"
+        borderWidth="5px 0px 0px 5px"
+      ></CropCorner>
+      <CropCorner
+        left={rectEnd.x - 30}
+        top={rectStart.y}
+        onGrabButton={onGrabButton}
+        corner="topright"
+        borderWidth="5px 5px 0px 0px"
+      ></CropCorner>
+      <CropCorner
+        left={rectStart.x}
+        top={rectEnd.y - 30}
+        onGrabButton={onGrabButton}
+        corner="bottomleft"
+        borderWidth="0px 0px 5px 5px"
+      ></CropCorner>
+      <CropCorner
+        left={rectEnd.x - 30}
+        top={rectEnd.y - 30}
+        onGrabButton={onGrabButton}
+        corner="bottomright"
+        borderWidth="0px 5px 5px 0px"
+      ></CropCorner>
       <div
         style={{
           position: 'absolute',
@@ -233,7 +249,7 @@ export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props)
           }}
           onClick={e => {
             e.preventDefault();
-            submit(crop);
+            submit();
             setConfirmCrop(false);
           }}
         >
@@ -248,23 +264,32 @@ function CropCorner({
   top,
   left,
   corner,
+  borderWidth,
   onGrabButton,
 }: {
   top: number;
   left: number;
   corner: string;
+  borderWidth: string;
   onGrabButton: (e: Event, corner: string) => void;
 }): VNode {
   return (
     <button
-      style={{ width: 30, height: 30, position: 'absolute', top: top, left: left }}
+      style={{
+        width: 30,
+        height: 30,
+        position: 'absolute',
+        top: top,
+        left: left,
+        background: 'none',
+        borderWidth: borderWidth,
+      }}
       onMouseDown={e => {
         e.preventDefault();
         onGrabButton(e, corner);
       }}
       onClick={e => {
         e.preventDefault();
-        // handleMouseUp();
       }}
     ></button>
   );

From a38d9c5f9dbffcc46ae48d29c489cb81114eeac0 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 1 Mar 2024 10:26:52 -0800
Subject: [PATCH 25/54] disable screenshots in mobile browsers

---
 packages/feedback2/src/core/integration.ts      |  7 +++++--
 .../screenshot/components/ScreenshotEditor.tsx  |  2 +-
 .../screenshot/components/useTakeScreenshot.tsx | 13 +++++++------
 .../feedback2/src/screenshot/integration.ts     |  2 +-
 .../feedback2/src/util/isScreenshotSupported.ts | 17 +++++++++++++++++
 5 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 packages/feedback2/src/util/isScreenshotSupported.ts

diff --git a/packages/feedback2/src/core/integration.ts b/packages/feedback2/src/core/integration.ts
index fb55f82c4fe6..7cf1223587e8 100644
--- a/packages/feedback2/src/core/integration.ts
+++ b/packages/feedback2/src/core/integration.ts
@@ -25,6 +25,7 @@ import type {
   OverrideFeedbackConfiguration,
 } from '../types';
 import { DEBUG_BUILD } from '../util/debug-build';
+import { isScreenshotSupported } from '../util/isScreenshotSupported';
 import { mergeOptions } from '../util/mergeOptions';
 import { Actor } from './components/Actor';
 import { createMainStyles } from './createMainStyles';
@@ -148,6 +149,7 @@ export const _feedback2Integration = (({
     }
     const modalIntegration = client.getIntegrationByName<IFeedback2ModalIntegration>('Feedback2Modal');
     const screenshotIntegration = client.getIntegrationByName<IFeedback2ScreenshotIntegration>('Feedback2Screenshot');
+    const screenshotIsSupported = isScreenshotSupported();
 
     // START TEMP: Error messages
     if (!modalIntegration && showScreenshot && !screenshotIntegration) {
@@ -163,14 +165,15 @@ export const _feedback2Integration = (({
       // TODO: load modalIntegration
       throw new Error('Not implemented yet');
     }
-    if (showScreenshot && !screenshotIntegration) {
+
+    if (showScreenshot && !screenshotIntegration && screenshotIsSupported) {
       // TODO: load screenshotIntegration
       throw new Error('Not implemented yet');
     }
 
     return modalIntegration.createDialog({
       options,
-      screenshotIntegration,
+      screenshotIntegration: screenshotIsSupported ? screenshotIntegration : undefined,
       sendFeedback,
       shadow: _createShadow(options),
     });
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 05af272d1a65..a7c585a3fc00 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -38,7 +38,7 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
           }
           canvas.width = imageSource.videoWidth;
           canvas.height = imageSource.videoHeight;
-          context.drawImage(imageSource, 0, 0);
+          context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
         },
         [canvas],
       ),
diff --git a/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx b/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
index 8bfe3b3c5f14..af59edfc9d42 100644
--- a/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
+++ b/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
@@ -16,19 +16,20 @@ export const useTakeScreenshot = ({ onBeforeScreenshot, onScreenshot, onAfterScr
       onBeforeScreenshot();
       const stream = await NAVIGATOR.mediaDevices.getDisplayMedia({
         video: {
-          width: WINDOW.innerWidth * WINDOW.devicePixelRatio,
-          height: WINDOW.innerHeight * WINDOW.devicePixelRatio,
+          width: WINDOW.innerWidth,
+          height: WINDOW.innerHeight,
         },
         audio: false,
-        // @ts-expect-error Experimental: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
+        // @ts-expect-error experimental flags: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#prefercurrenttab
+        monitorTypeSurfaces: 'exclude',
         preferCurrentTab: true,
+        selfBrowserSurface: 'include',
         surfaceSwitching: 'exclude',
       });
 
+      const video = DOCUMENT.createElement('video');
       await new Promise<void>((resolve, reject) => {
-        const video = DOCUMENT.createElement('video');
-        const videoTrack = stream.getVideoTracks()[0];
-        video.srcObject = new MediaStream([videoTrack]);
+        video.srcObject = stream;
         video.onloadedmetadata = () => {
           onScreenshot(video);
           stream.getTracks().forEach(track => track.stop());
diff --git a/packages/feedback2/src/screenshot/integration.ts b/packages/feedback2/src/screenshot/integration.ts
index f98e2488cb33..be3f4e8391e6 100644
--- a/packages/feedback2/src/screenshot/integration.ts
+++ b/packages/feedback2/src/screenshot/integration.ts
@@ -15,7 +15,7 @@ export const _feedback2ScreenshotIntegration = (() => {
     name: INTEGRATION_NAME,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
     setupOnce() {},
-    createInput: createInput,
+    createInput,
   };
 }) satisfies IntegrationFn;
 
diff --git a/packages/feedback2/src/util/isScreenshotSupported.ts b/packages/feedback2/src/util/isScreenshotSupported.ts
new file mode 100644
index 000000000000..d4e27468fcb0
--- /dev/null
+++ b/packages/feedback2/src/util/isScreenshotSupported.ts
@@ -0,0 +1,17 @@
+import { NAVIGATOR } from '../constants';
+
+/**
+ * Mobile browsers do not support `mediaDevices.getDisplayMedia` even though they have the api implemented
+ * Instead they return things like `NotAllowedError` when called.
+ *
+ * It's simpler for us to browser sniff first, and avoid loading the integration if we can.
+ *
+ * https://stackoverflow.com/a/58879212
+ * https://stackoverflow.com/a/3540295
+ */
+export function isScreenshotSupported(): boolean {
+  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(NAVIGATOR.userAgent)) {
+    return false;
+  }
+  return true;
+}

From 1c94e75c565e99d6e6e555f2d3e215a036c179a8 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 1 Mar 2024 15:32:51 -0800
Subject: [PATCH 26/54] update import path

---
 packages/types/src/envelope.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/packages/types/src/envelope.ts b/packages/types/src/envelope.ts
index 05db8f118c70..fef51b79a2f5 100644
--- a/packages/types/src/envelope.ts
+++ b/packages/types/src/envelope.ts
@@ -2,13 +2,12 @@ import type { SerializedCheckIn } from './checkin';
 import type { ClientReport } from './clientreport';
 import type { DsnComponents } from './dsn';
 import type { Event } from './event';
-import type { FeedbackEvent } from './feedback';
+import type { FeedbackEvent, UserFeedback } from './feedback';
 import type { Profile } from './profiling';
 import type { ReplayEvent, ReplayRecordingData } from './replay';
 import type { SdkInfo } from './sdkinfo';
 import type { SerializedSession, Session, SessionAggregates } from './session';
 import type { Transaction } from './transaction';
-import type { UserFeedback } from './user';
 
 // Based on: https://develop.sentry.dev/sdk/envelopes/
 

From 4312d30f579c6563ab7efa1ac4e7420863f6fccd Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 1 Mar 2024 15:34:33 -0800
Subject: [PATCH 27/54] bump versions of new packages to match latest release

---
 packages/feedback-screenshot/package.json | 8 ++++----
 packages/feedback2/package.json           | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/feedback-screenshot/package.json b/packages/feedback-screenshot/package.json
index bba5dc2908cf..a52708806991 100644
--- a/packages/feedback-screenshot/package.json
+++ b/packages/feedback-screenshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/feedback-screenshot",
-  "version": "7.100.0",
+  "version": "8.0.0-alpha.0",
   "description": "Sentry SDK integration for user feedback screenshots",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
@@ -29,9 +29,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/core": "7.100.0",
-    "@sentry/types": "7.100.0",
-    "@sentry/utils": "7.100.0",
+    "@sentry/core": "8.0.0-alpha.0",
+    "@sentry/types": "8.0.0-alpha.0",
+    "@sentry/utils": "8.0.0-alpha.0",
     "preact": "^10.19.4",
     "preact-compat": "^3.19.0"
   },
diff --git a/packages/feedback2/package.json b/packages/feedback2/package.json
index 416ba4436049..d4b1f5d2ac53 100644
--- a/packages/feedback2/package.json
+++ b/packages/feedback2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/feedback2",
-  "version": "7.100.0",
+  "version": "8.0.0-alpha.0",
   "description": "Sentry SDK integration for user feedback",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
@@ -29,9 +29,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/core": "7.100.0",
-    "@sentry/types": "7.100.0",
-    "@sentry/utils": "7.100.0",
+    "@sentry/core": "8.0.0-alpha.0",
+    "@sentry/types": "8.0.0-alpha.0",
+    "@sentry/utils": "8.0.0-alpha.0",
     "preact": "^10.19.4",
     "preact-compat": "^3.19.0"
   },

From e19a8763d85ec3ae9e5577fdc8f12f732e60e476 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Wed, 6 Mar 2024 01:13:08 -0500
Subject: [PATCH 28/54] cropping works with feedback 2! need to clean up &
 refactor

---
 .../components/ScreenshotEditor.tsx           | 239 +++++++++++++++++-
 1 file changed, 235 insertions(+), 4 deletions(-)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index a7c585a3fc00..198673ad71e2 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -1,8 +1,9 @@
 import type { ComponentType, VNode, h as hType } from 'preact';
-import { useCallback, useEffect, useMemo, useRef } from 'preact/hooks';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshot } from './useTakeScreenshot';
+import { DOCUMENT } from '../../constants';
 
 interface FactoryParams {
   h: typeof hType;
@@ -14,18 +15,146 @@ interface Props {
   onError: (error: Error) => void;
 }
 
+interface Point {
+  x: number;
+  y: number;
+}
+
+interface Rect {
+  height: number;
+  width: number;
+  x: number;
+  y: number;
+}
+
+const constructRect = (start: Point, end: Point): Rect => {
+  return {
+    x: Math.min(start.x, end.x),
+    y: Math.min(start.y, end.y),
+    width: Math.abs(start.x - end.x),
+    height: Math.abs(start.y - end.y),
+  };
+};
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryParams): ComponentType<Props> {
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
-
     const canvasContainerRef = useRef<HTMLDivElement>(null);
+    const cropperRef = useRef<HTMLCanvasElement>(null);
+    const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
+    const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 });
+    const [confirmCrop, setConfirmCrop] = useState(false);
+
     useEffect(() => {
       const container = canvasContainerRef.current;
       container && container.appendChild(canvas);
-      return () => container && container.removeChild(canvas);
+
+      const cropper = cropperRef.current;
+      if (cropper) {
+        cropper!.width = canvas.offsetWidth;
+        cropper!.height = canvas.offsetHeight;
+        cropper!.style.width = `${canvas.offsetWidth}px`;
+        cropper!.style.height = `${canvas.offsetHeight}px`;
+      }
+
+      setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
+      setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
     }, [canvas]);
 
+    function refreshCanvas() {
+      const cropper = cropperRef.current;
+      const ctx = cropper?.getContext('2d');
+      if (cropper && ctx) {
+        ctx.clearRect(0, 0, cropper.width, cropper.height);
+
+        const rect = constructRect(rectStart, rectEnd);
+
+        // draw gray overlay around the selection
+        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+        ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
+        ctx.clearRect(rect.x - canvas.offsetLeft, rect.y - canvas.offsetTop, rect.width, rect.height);
+
+        // draw selection border
+        ctx.strokeStyle = '#ff0000';
+        ctx.lineWidth = 4;
+        ctx.strokeRect(rect.x - canvas.offsetLeft, rect.y - canvas.offsetTop, rect.width, rect.height);
+      }
+    }
+
+    const makeHandleMouseMove = useCallback((corner: string) => {
+      return function (e: MouseEvent) {
+        switch (corner) {
+          case 'topleft':
+            setRectStart({
+              x: canvas.offsetLeft + Math.floor(e.offsetX),
+              y: canvas.offsetTop + Math.floor(e.offsetY),
+            });
+            break;
+          case 'topright':
+            setRectStart(prev => ({ ...prev, y: canvas.offsetTop + Math.floor(e.offsetY) }));
+            setRectEnd(prev => ({ ...prev, x: canvas.offsetLeft + Math.floor(e.offsetX) }));
+            break;
+          case 'bottomleft':
+            setRectStart(prev => ({ ...prev, x: canvas.offsetLeft + Math.floor(e.offsetX) }));
+            setRectEnd(prev => ({ ...prev, y: canvas.offsetTop + Math.floor(e.offsetY) }));
+            break;
+          case 'bottomright':
+            setRectEnd({
+              x: canvas.offsetLeft + Math.floor(e.offsetX),
+              y: canvas.offsetTop + Math.floor(e.offsetY),
+            });
+            break;
+        }
+      };
+    }, []);
+
+    function onGrabButton(e: Event, corner: string) {
+      setConfirmCrop(false);
+      const handleMouseMove = makeHandleMouseMove(corner);
+      const handleMouseUp = () => {
+        canvas?.removeEventListener('mousemove', handleMouseMove);
+        cropperRef.current?.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT?.removeEventListener('mouseup', handleMouseUp);
+        setConfirmCrop(true);
+      };
+
+      DOCUMENT?.addEventListener('mouseup', handleMouseUp);
+      canvas?.addEventListener('mousemove', handleMouseMove);
+      cropperRef.current?.addEventListener('mousemove', handleMouseMove);
+    }
+
+    useEffect(() => {
+      refreshCanvas();
+    }, [rectStart, rectEnd]);
+
+    function submit() {
+      const rect = constructRect(rectStart, rectEnd);
+
+      const cutoutCanvas = DOCUMENT.createElement('canvas');
+      cutoutCanvas.width = rect.width;
+      cutoutCanvas.height = rect.height;
+
+      const cutoutCtx = cutoutCanvas.getContext('2d');
+      if (cutoutCtx && canvas) {
+        cutoutCtx.drawImage(
+          canvas,
+          ((rect.x - canvas.offsetLeft) / canvas.offsetWidth) * canvas.width,
+          ((rect.y - canvas.offsetTop) / canvas.offsetHeight) * canvas.height,
+          (rect.width / canvas.offsetWidth) * canvas.width,
+          (rect.height / canvas.offsetHeight) * canvas.height,
+          0,
+          0,
+          rect.width,
+          rect.height,
+        );
+      }
+      const container = canvasContainerRef.current;
+      container && container.removeChild(canvas);
+      // eslint-disable-next-line no-param-reassign
+      canvas = cutoutCanvas;
+    }
+
     useTakeScreenshot({
       onBeforeScreenshot: useCallback(() => {
         dialog.el.style.display = 'none';
@@ -44,6 +173,12 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
       ),
       onAfterScreenshot: useCallback(() => {
         dialog.el.style.display = 'block';
+        setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
+        setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
+        cropperRef.current!.width = canvas.offsetWidth;
+        cropperRef.current!.height = canvas.offsetHeight;
+        cropperRef.current!.style.width = `${canvas.offsetWidth}px`;
+        cropperRef.current!.style.height = `${canvas.offsetHeight}px`;
       }, []),
       onError: useCallback(error => {
         dialog.el.style.display = 'block';
@@ -54,8 +189,104 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
-        <div class="canvasContainer" ref={canvasContainerRef} />
+        <div class="canvasContainer" ref={canvasContainerRef}>
+          <canvas style={{ position: 'absolute' }} ref={cropperRef}></canvas>
+          <CropCorner
+            left={rectStart.x}
+            top={rectStart.y}
+            onGrabButton={onGrabButton}
+            corner="topleft"
+            borderWidth="5px 0px 0px 5px"
+          ></CropCorner>
+          <CropCorner
+            left={rectEnd.x - 30}
+            top={rectStart.y}
+            onGrabButton={onGrabButton}
+            corner="topright"
+            borderWidth="5px 5px 0px 0px"
+          ></CropCorner>
+          <CropCorner
+            left={rectStart.x}
+            top={rectEnd.y - 30}
+            onGrabButton={onGrabButton}
+            corner="bottomleft"
+            borderWidth="0px 0px 5px 5px"
+          ></CropCorner>
+          <CropCorner
+            left={rectEnd.x - 30}
+            top={rectEnd.y - 30}
+            onGrabButton={onGrabButton}
+            corner="bottomright"
+            borderWidth="0px 5px 5px 0px"
+          ></CropCorner>
+          <div
+            style={{
+              position: 'absolute',
+              left: rectEnd.x,
+              top: rectEnd.y,
+              display: confirmCrop ? 'inline' : 'none',
+            }}
+          >
+            <button
+              onClick={e => {
+                e.preventDefault();
+                setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
+                setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
+                setConfirmCrop(false);
+              }}
+            >
+              Cancel
+            </button>
+            <button
+              style={{
+                background: 'purple',
+              }}
+              onClick={e => {
+                e.preventDefault();
+                submit();
+                setConfirmCrop(false);
+              }}
+            >
+              Submit
+            </button>
+          </div>
+        </div>
       </div>
     );
   };
 }
+
+function CropCorner({
+  top,
+  left,
+  corner,
+  borderWidth,
+  onGrabButton,
+}: {
+  top: number;
+  left: number;
+  corner: string;
+  borderWidth: string;
+  onGrabButton: (e: Event, corner: string) => void;
+}): VNode {
+  return (
+    <button
+      style={{
+        width: 30,
+        height: 30,
+        position: 'absolute',
+        top: top,
+        left: left,
+        background: 'none',
+        borderWidth: borderWidth,
+      }}
+      onMouseDown={e => {
+        e.preventDefault();
+        onGrabButton(e, corner);
+      }}
+      onClick={e => {
+        e.preventDefault();
+      }}
+    ></button>
+  );
+}

From 2649607259ae76e32d7e6079a8c1fc8baddfd80d Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Wed, 6 Mar 2024 19:22:44 -0500
Subject: [PATCH 29/54] clean up

---
 packages/feedback/src/index.ts                |  2 -
 packages/feedback/src/integration.ts          |  8 ---
 packages/feedback/src/sendFeedback.ts         |  3 --
 packages/feedback/src/types/index.ts          |  5 +-
 .../feedback/src/util/handleFeedbackSubmit.ts |  5 +-
 .../feedback/src/util/sendFeedbackRequest.ts  | 40 +-------------
 packages/feedback/src/widget/Dialog.css.ts    | 17 ++----
 packages/feedback/src/widget/Form.ts          | 52 ++-----------------
 packages/feedback/src/widget/createWidget.ts  |  6 +--
 .../components/ScreenshotEditor.tsx           | 23 ++++----
 10 files changed, 27 insertions(+), 134 deletions(-)

diff --git a/packages/feedback/src/index.ts b/packages/feedback/src/index.ts
index dbb24a745cfe..8fcba29c5d0f 100644
--- a/packages/feedback/src/index.ts
+++ b/packages/feedback/src/index.ts
@@ -4,5 +4,3 @@ export {
   Feedback,
   feedbackIntegration,
 } from './integration';
-
-console.log('Feedback 4');
diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts
index 26607cd73eec..b70bf008d24d 100644
--- a/packages/feedback/src/integration.ts
+++ b/packages/feedback/src/integration.ts
@@ -111,8 +111,6 @@ export class Feedback implements Integration {
     onFormOpen,
     onSubmitError,
     onSubmitSuccess,
-
-    // getScreenshotIntegration,
   }: OptionalFeedbackConfiguration = {}) {
     // eslint-disable-next-line deprecation/deprecation
     this.name = Feedback.id;
@@ -160,8 +158,6 @@ export class Feedback implements Integration {
       onFormOpen,
       onSubmitError,
       onSubmitSuccess,
-
-      // getScreenshotIntegration,
     };
   }
 
@@ -186,7 +182,6 @@ export class Feedback implements Integration {
       this._createWidget(this.options);
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
-      console.log(err);
     }
   }
 
@@ -246,7 +241,6 @@ export class Feedback implements Integration {
       });
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
-      console.log(err);
       return null;
     }
   }
@@ -261,7 +255,6 @@ export class Feedback implements Integration {
       return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
     } catch (err) {
       DEBUG_BUILD && logger.error(err);
-      console.log(err);
       return null;
     }
   }
@@ -288,7 +281,6 @@ export class Feedback implements Integration {
         return true;
       }
     } catch (err) {
-      console.log(err);
       DEBUG_BUILD && logger.error(err);
     }
 
diff --git a/packages/feedback/src/sendFeedback.ts b/packages/feedback/src/sendFeedback.ts
index 956f901189cb..ac60415d0462 100644
--- a/packages/feedback/src/sendFeedback.ts
+++ b/packages/feedback/src/sendFeedback.ts
@@ -3,7 +3,6 @@ import { getLocationHref } from '@sentry/utils';
 import { FEEDBACK_API_SOURCE } from './constants';
 import type { SendFeedbackOptions } from './types';
 import { sendFeedbackRequest } from './util/sendFeedbackRequest';
-import type { Attachment } from '@sentry/types';
 
 interface SendFeedbackParams {
   message: string;
@@ -19,7 +18,6 @@ interface SendFeedbackParams {
 export function sendFeedback(
   { name, email, message, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
   options: SendFeedbackOptions = {},
-  screenshots: Attachment[] = [],
 ): ReturnType<typeof sendFeedbackRequest> {
   if (!message) {
     throw new Error('Unable to submit feedback with empty message');
@@ -36,6 +34,5 @@ export function sendFeedback(
       },
     },
     options,
-    screenshots,
   );
 }
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index adb9c4bf341d..c2642b54d09c 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -1,4 +1,4 @@
-import type { Attachment, Primitive } from '@sentry/types';
+import type { Primitive } from '@sentry/types';
 
 import type { ActorComponent } from '../widget/Actor';
 import type { DialogComponent } from '../widget/Dialog';
@@ -21,7 +21,6 @@ export interface SendFeedbackOptions {
    * Should include replay with the feedback?
    */
   includeReplay?: boolean;
-  screenshots?: Attachment[];
 }
 
 /**
@@ -81,8 +80,6 @@ export interface FeedbackGeneralConfiguration {
     email: string;
     name: string;
   };
-
-  // getScreenshotIntegration: () => Integration;
 }
 
 /**
diff --git a/packages/feedback/src/util/handleFeedbackSubmit.ts b/packages/feedback/src/util/handleFeedbackSubmit.ts
index 1143413843f9..abb3aeb1368d 100644
--- a/packages/feedback/src/util/handleFeedbackSubmit.ts
+++ b/packages/feedback/src/util/handleFeedbackSubmit.ts
@@ -1,4 +1,4 @@
-import type { Attachment, TransportMakeRequestResponse } from '@sentry/types';
+import type { TransportMakeRequestResponse } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
 import { FEEDBACK_WIDGET_SOURCE } from '../constants';
@@ -14,7 +14,6 @@ import type { DialogComponent } from '../widget/Dialog';
 export async function handleFeedbackSubmit(
   dialog: DialogComponent | null,
   feedback: FeedbackFormData,
-  screenshots?: Attachment[],
   options?: SendFeedbackOptions,
 ): Promise<TransportMakeRequestResponse | void> {
   if (!dialog) {
@@ -32,7 +31,7 @@ export async function handleFeedbackSubmit(
   dialog.hideError();
 
   try {
-    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options, screenshots);
+    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options);
 
     // Success!
     return resp;
diff --git a/packages/feedback/src/util/sendFeedbackRequest.ts b/packages/feedback/src/util/sendFeedbackRequest.ts
index 8a1a6129aedd..d8f3a880ba2c 100644
--- a/packages/feedback/src/util/sendFeedbackRequest.ts
+++ b/packages/feedback/src/util/sendFeedbackRequest.ts
@@ -1,5 +1,5 @@
-import { createEventEnvelope, getClient, withScope, createAttachmentEnvelope } from '@sentry/core';
-import type { Attachment, FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
+import { createEventEnvelope, getClient, withScope } from '@sentry/core';
+import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
 
 import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
 import type { SendFeedbackData, SendFeedbackOptions } from '../types';
@@ -11,7 +11,6 @@ import { prepareFeedbackEvent } from './prepareFeedbackEvent';
 export async function sendFeedbackRequest(
   { feedback: { message, email, name, source, url } }: SendFeedbackData,
   { includeReplay = true }: SendFeedbackOptions = {},
-  screenshots: Attachment[],
 ): Promise<void | TransportMakeRequestResponse> {
   const client = getClient();
   const transport = client && client.getTransport();
@@ -83,41 +82,6 @@ export async function sendFeedbackRequest(
       throw new Error('Unable to send Feedback');
     }
 
-    if (screenshots) {
-      const attachment_envelope = createAttachmentEnvelope(
-        feedbackEvent,
-        screenshots,
-        dsn,
-        client.getOptions()._metadata,
-        client.getOptions().tunnel,
-      );
-
-      try {
-        response = await transport.send(attachment_envelope);
-      } catch (err) {
-        const error = new Error('Unable to send Feedback screenshot');
-
-        try {
-          // In case browsers don't allow this property to be writable
-          // @ts-expect-error This needs lib es2022 and newer
-          error.cause = err;
-        } catch {
-          // nothing to do
-        }
-        throw error;
-      }
-
-      // TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
-      if (!response) {
-        return;
-      }
-
-      // Require valid status codes, otherwise can assume feedback was not sent successfully
-      if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
-        throw new Error('Unable to send Feedback screenshot');
-      }
-    }
-
     return response;
   });
 }
diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts
index f37242e77b39..b3924f00524a 100644
--- a/packages/feedback/src/widget/Dialog.css.ts
+++ b/packages/feedback/src/widget/Dialog.css.ts
@@ -42,7 +42,8 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
   background-color: var(--background);
   color: var(--foreground);
 
-  max-width: calc(100% - 2rem);
+  width: 320px;
+  max-width: 100%;
   max-height: calc(100% - 2rem);
   display: flex;
   flex-direction: column;
@@ -72,21 +73,11 @@ export function createDialogStyles(d: Document): HTMLStyleElement {
 }
 
 .form {
-  display: flex;
+  display: grid;
   overflow: auto;
-  flex-direction: row;
-  padding: 0 24px 24px;
-}
-
-.screenshot {
-  border-color: var(--submit-border);
-}
-
-.info {
-  display: flex;
   flex-direction: column;
   gap: 16px;
-  width: 272px;
+  padding: 0 24px 24px;
 }
 
 .form__error-container {
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index 37793f57df9e..b62617e0c749 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -1,8 +1,6 @@
-import type { Attachment } from '@sentry/types';
 import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
 import { SubmitButton } from './SubmitButton';
 import { createElement } from './util/createElement';
-import * as ScreenshotIntegration from '@sentry-internal/feedback-screenshot';
 
 export interface FormComponentProps
   extends Pick<
@@ -22,7 +20,7 @@ export interface FormComponentProps
    */
   defaultEmail: string;
   onCancel?: (e: Event) => void;
-  onSubmit?: (feedback: FeedbackFormData, screenshots?: Attachment[]) => void;
+  onSubmit?: (feedback: FeedbackFormData) => void;
 }
 
 interface FormComponent extends FeedbackComponent<HTMLFormElement> {
@@ -45,22 +43,6 @@ function retrieveStringValue(formData: FormData, key: string): string {
   return '';
 }
 
-async function canvasToUint8Array(image: HTMLCanvasElement): Promise<Uint8Array | null> {
-  const canvasToBlob = (canvas: HTMLCanvasElement): Promise<Blob | null> => {
-    return new Promise(resolve => {
-      canvas.toBlob(blob => {
-        resolve(blob);
-      });
-    });
-  };
-  const blob = await canvasToBlob(image);
-  if (blob) {
-    const blobData = await blob.arrayBuffer();
-    return new Uint8Array(blobData);
-  }
-  return null;
-}
-
 /**
  * Creates the form element
  */
@@ -84,15 +66,11 @@ export function Form({
   onCancel,
   onSubmit,
 }: FormComponentProps): FormComponent {
-  let screenshotImage: HTMLCanvasElement | null = null;
-  function setScreenshotImage(newScreenshot: HTMLCanvasElement | null): void {
-    screenshotImage = newScreenshot;
-  }
   const { el: submitEl } = SubmitButton({
     label: submitButtonLabel,
   });
 
-  async function handleSubmit(e: Event): Promise<void> {
+  function handleSubmit(e: Event): void {
     e.preventDefault();
 
     if (!(e.target instanceof HTMLFormElement)) {
@@ -108,16 +86,7 @@ export function Form({
           message: retrieveStringValue(formData, 'message'),
         };
 
-        if (screenshotImage) {
-          const screenshotBlob = await canvasToUint8Array(screenshotImage);
-          if (screenshotBlob) {
-            onSubmit(feedback, [
-              { filename: 'screenshot.png', data: screenshotBlob, contentType: 'application/octet-stream' },
-            ]);
-          }
-        } else {
-          onSubmit(feedback);
-        }
+        onSubmit(feedback);
       }
     } catch {
       // pass
@@ -186,17 +155,6 @@ export function Form({
     cancelButtonLabel,
   );
 
-  const screenshot = createElement('div', { className: 'screenshot' });
-
-  const screenshotButton = createElement('div', { className: 'btn-group' });
-
-  // @ts-expect-error temp
-  ScreenshotIntegration.feedbackScreenshotIntegration().renderScreenshotWidget({
-    croppingRef: screenshot,
-    buttonRef: screenshotButton,
-    props: { screenshotImage, setScreenshotImage },
-  });
-
   const formEl = createElement(
     'form',
     {
@@ -205,8 +163,6 @@ export function Form({
     },
     [
       errorEl,
-      screenshot,
-
       createElement(
         'div',
         {
@@ -268,8 +224,6 @@ export function Form({
             ],
           ),
 
-          screenshotButton,
-
           createElement(
             'div',
             {
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
index 40d5ea82b165..826e2a3abd39 100644
--- a/packages/feedback/src/widget/createWidget.ts
+++ b/packages/feedback/src/widget/createWidget.ts
@@ -1,6 +1,5 @@
 import { getClient, getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
-import type { Attachment } from '@sentry/types';
 import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
 import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
 import type { ActorComponent } from './Actor';
@@ -85,7 +84,7 @@ export function createWidget({
    * Handler for when the feedback form is completed by the user. This will
    * create and send the feedback message as an event.
    */
-  async function _handleFeedbackSubmit(feedback: FeedbackFormData, screenshots?: Attachment[]): Promise<void> {
+  async function _handleFeedbackSubmit(feedback: FeedbackFormData): Promise<void> {
     if (!dialog) {
       return;
     }
@@ -106,7 +105,7 @@ export function createWidget({
       return;
     }
 
-    const result = await handleFeedbackSubmit(dialog, feedback, screenshots);
+    const result = await handleFeedbackSubmit(dialog, feedback);
 
     // Error submitting feedback
     if (!result) {
@@ -229,6 +228,7 @@ export function createWidget({
       handleOpenDialog();
     } catch (err) {
       // TODO: Error handling?
+      logger.error(err);
     }
   }
 
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 198673ad71e2..2c9911bc8eb5 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -3,7 +3,9 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshot } from './useTakeScreenshot';
-import { DOCUMENT } from '../../constants';
+import { DOCUMENT, WINDOW } from '../../constants';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
 
 interface FactoryParams {
   h: typeof hType;
@@ -50,6 +52,13 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
       const container = canvasContainerRef.current;
       container && container.appendChild(canvas);
 
+      resizeCropper();
+    }, [canvas]);
+
+    function resizeCropper() {
+      setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
+      setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
+
       const cropper = cropperRef.current;
       if (cropper) {
         cropper!.width = canvas.offsetWidth;
@@ -57,10 +66,7 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
         cropper!.style.width = `${canvas.offsetWidth}px`;
         cropper!.style.height = `${canvas.offsetHeight}px`;
       }
-
-      setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
-      setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
-    }, [canvas]);
+    }
 
     function refreshCanvas() {
       const cropper = cropperRef.current;
@@ -173,12 +179,7 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
       ),
       onAfterScreenshot: useCallback(() => {
         dialog.el.style.display = 'block';
-        setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
-        setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
-        cropperRef.current!.width = canvas.offsetWidth;
-        cropperRef.current!.height = canvas.offsetHeight;
-        cropperRef.current!.style.width = `${canvas.offsetWidth}px`;
-        cropperRef.current!.style.height = `${canvas.offsetHeight}px`;
+        resizeCropper();
       }, []),
       onError: useCallback(error => {
         dialog.el.style.display = 'block';

From 7d39df412e52539fcdc7b1f37fcfe70b54353985 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Wed, 6 Mar 2024 19:25:04 -0500
Subject: [PATCH 30/54] revert feedback form

---
 packages/feedback/src/widget/Form.ts         | 115 +++++++++----------
 packages/feedback/src/widget/createWidget.ts |   1 +
 2 files changed, 55 insertions(+), 61 deletions(-)

diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
index b62617e0c749..9b90cf547477 100644
--- a/packages/feedback/src/widget/Form.ts
+++ b/packages/feedback/src/widget/Form.ts
@@ -163,76 +163,69 @@ export function Form({
     },
     [
       errorEl,
-      createElement(
-        'div',
-        {
-          className: 'info',
-        },
-        [
-          showName &&
+
+      showName &&
+        createElement(
+          'label',
+          {
+            htmlFor: 'name',
+            className: 'form__label',
+          },
+          [
             createElement(
-              'label',
-              {
-                htmlFor: 'name',
-                className: 'form__label',
-              },
-              [
-                createElement(
-                  'span',
-                  { className: 'form__label__text' },
-                  nameLabel,
-                  isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-                ),
-                nameEl,
-              ],
+              'span',
+              { className: 'form__label__text' },
+              nameLabel,
+              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
             ),
-          !showName && nameEl,
-
-          showEmail &&
+            nameEl,
+          ],
+        ),
+      !showName && nameEl,
+
+      showEmail &&
+        createElement(
+          'label',
+          {
+            htmlFor: 'email',
+            className: 'form__label',
+          },
+          [
             createElement(
-              'label',
-              {
-                htmlFor: 'email',
-                className: 'form__label',
-              },
-              [
-                createElement(
-                  'span',
-                  { className: 'form__label__text' },
-                  emailLabel,
-                  isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-                ),
-                emailEl,
-              ],
+              'span',
+              { className: 'form__label__text' },
+              emailLabel,
+              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
             ),
-          !showEmail && emailEl,
-
-          createElement(
-            'label',
-            {
-              htmlFor: 'message',
-              className: 'form__label',
-            },
-            [
-              createElement(
-                'span',
-                { className: 'form__label__text' },
-                messageLabel,
-                createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-              ),
-              messageEl,
-            ],
-          ),
+            emailEl,
+          ],
+        ),
+      !showEmail && emailEl,
 
+      createElement(
+        'label',
+        {
+          htmlFor: 'message',
+          className: 'form__label',
+        },
+        [
           createElement(
-            'div',
-            {
-              className: 'btn-group',
-            },
-            [submitEl, cancelEl],
+            'span',
+            { className: 'form__label__text' },
+            messageLabel,
+            createElement('span', { className: 'form__label__text--required' }, ' (required)'),
           ),
+          messageEl,
         ],
       ),
+
+      createElement(
+        'div',
+        {
+          className: 'btn-group',
+        },
+        [submitEl, cancelEl],
+      ),
     ],
   );
 
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
index 826e2a3abd39..05b52ca64725 100644
--- a/packages/feedback/src/widget/createWidget.ts
+++ b/packages/feedback/src/widget/createWidget.ts
@@ -1,5 +1,6 @@
 import { getClient, getCurrentScope } from '@sentry/core';
 import { logger } from '@sentry/utils';
+
 import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
 import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
 import type { ActorComponent } from './Actor';

From 8a08bbd2f7ecac6ada77765ef68ad8befbe913b7 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Thu, 7 Mar 2024 01:04:06 -0500
Subject: [PATCH 31/54] some styling

---
 .../components/ScreenshotEditor.tsx           | 46 +++++++++----------
 .../components/ScreenshotInput.css.ts         |  8 ++++
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 2c9911bc8eb5..dbe8aa0dd04e 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -82,8 +82,8 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
         ctx.clearRect(rect.x - canvas.offsetLeft, rect.y - canvas.offsetTop, rect.width, rect.height);
 
         // draw selection border
-        ctx.strokeStyle = '#ff0000';
-        ctx.lineWidth = 4;
+        ctx.strokeStyle = 'purple';
+        ctx.lineWidth = 3;
         ctx.strokeRect(rect.x - canvas.offsetLeft, rect.y - canvas.offsetTop, rect.width, rect.height);
       }
     }
@@ -193,40 +193,37 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
         <div class="canvasContainer" ref={canvasContainerRef}>
           <canvas style={{ position: 'absolute' }} ref={cropperRef}></canvas>
           <CropCorner
-            left={rectStart.x}
-            top={rectStart.y}
+            left={rectStart.x - 3}
+            top={rectStart.y - 3}
             onGrabButton={onGrabButton}
             corner="topleft"
-            borderWidth="5px 0px 0px 5px"
           ></CropCorner>
           <CropCorner
-            left={rectEnd.x - 30}
-            top={rectStart.y}
+            left={rectEnd.x - 30 + 3}
+            top={rectStart.y - 3}
             onGrabButton={onGrabButton}
             corner="topright"
-            borderWidth="5px 5px 0px 0px"
           ></CropCorner>
           <CropCorner
-            left={rectStart.x}
-            top={rectEnd.y - 30}
+            left={rectStart.x - 3}
+            top={rectEnd.y - 30 + 3}
             onGrabButton={onGrabButton}
             corner="bottomleft"
-            borderWidth="0px 0px 5px 5px"
           ></CropCorner>
           <CropCorner
-            left={rectEnd.x - 30}
-            top={rectEnd.y - 30}
+            left={rectEnd.x - 30 + 3}
+            top={rectEnd.y - 30 + 3}
             onGrabButton={onGrabButton}
             corner="bottomright"
-            borderWidth="0px 5px 5px 0px"
           ></CropCorner>
           <div
             style={{
               position: 'absolute',
-              left: rectEnd.x,
-              top: rectEnd.y,
-              display: confirmCrop ? 'inline' : 'none',
+              left: rectEnd.x - 191,
+              top: rectEnd.y + 8,
+              display: confirmCrop ? 'flex' : 'none',
             }}
+            class="crop-btn-group"
           >
             <button
               onClick={e => {
@@ -235,20 +232,19 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
                 setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
                 setConfirmCrop(false);
               }}
+              class="btn btn--default"
             >
               Cancel
             </button>
             <button
-              style={{
-                background: 'purple',
-              }}
               onClick={e => {
                 e.preventDefault();
                 submit();
                 setConfirmCrop(false);
               }}
+              class="btn btn--primary"
             >
-              Submit
+              Confirm
             </button>
           </div>
         </div>
@@ -261,13 +257,11 @@ function CropCorner({
   top,
   left,
   corner,
-  borderWidth,
   onGrabButton,
 }: {
   top: number;
   left: number;
   corner: string;
-  borderWidth: string;
   onGrabButton: (e: Event, corner: string) => void;
 }): VNode {
   return (
@@ -279,7 +273,11 @@ function CropCorner({
         top: top,
         left: left,
         background: 'none',
-        borderWidth: borderWidth,
+        borderTop: corner === 'topleft' || corner === 'topright' ? 'solid purple' : 'none',
+        borderLeft: corner === 'topleft' || corner === 'bottomleft' ? 'solid purple' : 'none',
+        borderRight: corner === 'topright' || corner === 'bottomright' ? 'solid purple' : 'none',
+        borderBottom: corner === 'bottomleft' || corner === 'bottomright' ? 'solid purple' : 'none',
+        borderWidth: '3px',
       }}
       onMouseDown={e => {
         e.preventDefault();
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
index 62c05010e036..e37ed62db35a 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
@@ -46,6 +46,14 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   width: 0; /* reasons... */
   align-self: center;
 }
+
+.crop-btn-group {
+  padding: 8px;
+  gap: 8px;
+  border-radius: var(--form-content-border-radius);
+  background-color: var(--background);
+  width: 175px;
+}
 `;
 
   return style;

From 359a3798e20b202b630d18ab897abcfe5e384089 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 7 Mar 2024 11:23:01 -0800
Subject: [PATCH 32/54] rename to imageBuffer

---
 .../components/ScreenshotEditor.tsx           | 86 ++++++++++---------
 .../feedback2/src/screenshot/createInput.ts   |  6 +-
 2 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index dbe8aa0dd04e..db7863825735 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -1,15 +1,15 @@
 import type { ComponentType, VNode, h as hType } from 'preact';
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import { h } from 'preact';
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { DOCUMENT, WINDOW } from '../../constants';
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshot } from './useTakeScreenshot';
-import { DOCUMENT, WINDOW } from '../../constants';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from 'preact';
 
 interface FactoryParams {
   h: typeof hType;
-  canvas: HTMLCanvasElement;
+  imageBuffer: HTMLCanvasElement;
   dialog: Dialog;
 }
 
@@ -39,7 +39,7 @@ const constructRect = (start: Point, end: Point): Rect => {
 };
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryParams): ComponentType<Props> {
+export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: FactoryParams): ComponentType<Props> {
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
     const canvasContainerRef = useRef<HTMLDivElement>(null);
@@ -50,21 +50,24 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
 
     useEffect(() => {
       const container = canvasContainerRef.current;
-      container && container.appendChild(canvas);
+      container && container.appendChild(imageBuffer);
 
       resizeCropper();
-    }, [canvas]);
+    }, [imageBuffer]);
 
     function resizeCropper() {
-      setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
-      setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
+      setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
+      setRectEnd({
+        x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
+        y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
+      });
 
       const cropper = cropperRef.current;
       if (cropper) {
-        cropper!.width = canvas.offsetWidth;
-        cropper!.height = canvas.offsetHeight;
-        cropper!.style.width = `${canvas.offsetWidth}px`;
-        cropper!.style.height = `${canvas.offsetHeight}px`;
+        cropper!.width = imageBuffer.offsetWidth;
+        cropper!.height = imageBuffer.offsetHeight;
+        cropper!.style.width = `${imageBuffer.offsetWidth}px`;
+        cropper!.style.height = `${imageBuffer.offsetHeight}px`;
       }
     }
 
@@ -78,13 +81,13 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
 
         // draw gray overlay around the selection
         ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
-        ctx.clearRect(rect.x - canvas.offsetLeft, rect.y - canvas.offsetTop, rect.width, rect.height);
+        ctx.fillRect(0, 0, imageBuffer.offsetWidth, imageBuffer.offsetHeight);
+        ctx.clearRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
 
         // draw selection border
         ctx.strokeStyle = 'purple';
         ctx.lineWidth = 3;
-        ctx.strokeRect(rect.x - canvas.offsetLeft, rect.y - canvas.offsetTop, rect.width, rect.height);
+        ctx.strokeRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
       }
     }
 
@@ -93,22 +96,22 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
         switch (corner) {
           case 'topleft':
             setRectStart({
-              x: canvas.offsetLeft + Math.floor(e.offsetX),
-              y: canvas.offsetTop + Math.floor(e.offsetY),
+              x: imageBuffer.offsetLeft + Math.floor(e.offsetX),
+              y: imageBuffer.offsetTop + Math.floor(e.offsetY),
             });
             break;
           case 'topright':
-            setRectStart(prev => ({ ...prev, y: canvas.offsetTop + Math.floor(e.offsetY) }));
-            setRectEnd(prev => ({ ...prev, x: canvas.offsetLeft + Math.floor(e.offsetX) }));
+            setRectStart(prev => ({ ...prev, y: imageBuffer.offsetTop + Math.floor(e.offsetY) }));
+            setRectEnd(prev => ({ ...prev, x: imageBuffer.offsetLeft + Math.floor(e.offsetX) }));
             break;
           case 'bottomleft':
-            setRectStart(prev => ({ ...prev, x: canvas.offsetLeft + Math.floor(e.offsetX) }));
-            setRectEnd(prev => ({ ...prev, y: canvas.offsetTop + Math.floor(e.offsetY) }));
+            setRectStart(prev => ({ ...prev, x: imageBuffer.offsetLeft + Math.floor(e.offsetX) }));
+            setRectEnd(prev => ({ ...prev, y: imageBuffer.offsetTop + Math.floor(e.offsetY) }));
             break;
           case 'bottomright':
             setRectEnd({
-              x: canvas.offsetLeft + Math.floor(e.offsetX),
-              y: canvas.offsetTop + Math.floor(e.offsetY),
+              x: imageBuffer.offsetLeft + Math.floor(e.offsetX),
+              y: imageBuffer.offsetTop + Math.floor(e.offsetY),
             });
             break;
         }
@@ -119,14 +122,14 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
       setConfirmCrop(false);
       const handleMouseMove = makeHandleMouseMove(corner);
       const handleMouseUp = () => {
-        canvas?.removeEventListener('mousemove', handleMouseMove);
+        imageBuffer?.removeEventListener('mousemove', handleMouseMove);
         cropperRef.current?.removeEventListener('mousemove', handleMouseMove);
         DOCUMENT?.removeEventListener('mouseup', handleMouseUp);
         setConfirmCrop(true);
       };
 
       DOCUMENT?.addEventListener('mouseup', handleMouseUp);
-      canvas?.addEventListener('mousemove', handleMouseMove);
+      imageBuffer?.addEventListener('mousemove', handleMouseMove);
       cropperRef.current?.addEventListener('mousemove', handleMouseMove);
     }
 
@@ -142,13 +145,13 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
       cutoutCanvas.height = rect.height;
 
       const cutoutCtx = cutoutCanvas.getContext('2d');
-      if (cutoutCtx && canvas) {
+      if (cutoutCtx && imageBuffer) {
         cutoutCtx.drawImage(
-          canvas,
-          ((rect.x - canvas.offsetLeft) / canvas.offsetWidth) * canvas.width,
-          ((rect.y - canvas.offsetTop) / canvas.offsetHeight) * canvas.height,
-          (rect.width / canvas.offsetWidth) * canvas.width,
-          (rect.height / canvas.offsetHeight) * canvas.height,
+          imageBuffer,
+          ((rect.x - imageBuffer.offsetLeft) / imageBuffer.offsetWidth) * imageBuffer.width,
+          ((rect.y - imageBuffer.offsetTop) / imageBuffer.offsetHeight) * imageBuffer.height,
+          (rect.width / imageBuffer.offsetWidth) * imageBuffer.width,
+          (rect.height / imageBuffer.offsetHeight) * imageBuffer.height,
           0,
           0,
           rect.width,
@@ -156,9 +159,9 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
         );
       }
       const container = canvasContainerRef.current;
-      container && container.removeChild(canvas);
+      container && container.removeChild(imageBuffer);
       // eslint-disable-next-line no-param-reassign
-      canvas = cutoutCanvas;
+      imageBuffer = cutoutCanvas;
     }
 
     useTakeScreenshot({
@@ -167,15 +170,15 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
       }, []),
       onScreenshot: useCallback(
         (imageSource: HTMLVideoElement) => {
-          const context = canvas.getContext('2d');
+          const context = imageBuffer.getContext('2d');
           if (!context) {
             throw new Error('Could not get canvas context');
           }
-          canvas.width = imageSource.videoWidth;
-          canvas.height = imageSource.videoHeight;
+          imageBuffer.width = imageSource.videoWidth;
+          imageBuffer.height = imageSource.videoHeight;
           context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
         },
-        [canvas],
+        [imageBuffer],
       ),
       onAfterScreenshot: useCallback(() => {
         dialog.el.style.display = 'block';
@@ -228,8 +231,11 @@ export function makeScreenshotEditorComponent({ h, canvas, dialog }: FactoryPara
             <button
               onClick={e => {
                 e.preventDefault();
-                setRectStart({ x: canvas.offsetLeft, y: canvas.offsetTop });
-                setRectEnd({ x: canvas.offsetLeft + canvas.offsetWidth, y: canvas.offsetTop + canvas.offsetHeight });
+                setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
+                setRectEnd({
+                  x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
+                  y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
+                });
                 setConfirmCrop(false);
               }}
               class="btn btn--default"
diff --git a/packages/feedback2/src/screenshot/createInput.ts b/packages/feedback2/src/screenshot/createInput.ts
index 97855ada120b..679a82f5dfba 100644
--- a/packages/feedback2/src/screenshot/createInput.ts
+++ b/packages/feedback2/src/screenshot/createInput.ts
@@ -8,14 +8,14 @@ import { makeScreenshotEditorComponent } from './components/ScreenshotEditor';
  *
  */
 export function createInput(h: typeof hType, dialog: Dialog): ScreenshotInput {
-  const canvas = DOCUMENT.createElement('canvas');
+  const imageBuffer = DOCUMENT.createElement('canvas');
 
   return {
-    input: makeScreenshotEditorComponent({ h, canvas, dialog }),
+    input: makeScreenshotEditorComponent({ h, imageBuffer, dialog }),
 
     value: async () => {
       const blob = await new Promise<Parameters<BlobCallback>[0]>(resolve => {
-        canvas.toBlob(resolve, 'image/png');
+        imageBuffer.toBlob(resolve, 'image/png');
       });
       if (blob) {
         const data = new Uint8Array(await blob.arrayBuffer());

From cfdb29e9b34b8c799c33760cc11c73ed22c2a6ee Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 7 Mar 2024 11:25:37 -0800
Subject: [PATCH 33/54] add return types to all the callbacks

---
 .../components/ScreenshotEditor.tsx           | 66 ++++++++++---------
 1 file changed, 35 insertions(+), 31 deletions(-)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index db7863825735..6899b52b3ecf 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -1,8 +1,8 @@
 import type { ComponentType, VNode, h as hType } from 'preact';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from 'preact';
+// biome-ignore lint/nursery/noUnusedImports: reason
+import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { DOCUMENT, WINDOW } from '../../constants';
+import { DOCUMENT } from '../../constants';
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
 import { useTakeScreenshot } from './useTakeScreenshot';
@@ -55,7 +55,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       resizeCropper();
     }, [imageBuffer]);
 
-    function resizeCropper() {
+    function resizeCropper(): void {
       setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
       setRectEnd({
         x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
@@ -64,31 +64,35 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
 
       const cropper = cropperRef.current;
       if (cropper) {
-        cropper!.width = imageBuffer.offsetWidth;
-        cropper!.height = imageBuffer.offsetHeight;
-        cropper!.style.width = `${imageBuffer.offsetWidth}px`;
-        cropper!.style.height = `${imageBuffer.offsetHeight}px`;
+        cropper.width = imageBuffer.offsetWidth;
+        cropper.height = imageBuffer.offsetHeight;
+        cropper.style.width = `${imageBuffer.offsetWidth}px`;
+        cropper.style.height = `${imageBuffer.offsetHeight}px`;
       }
     }
 
-    function refreshCanvas() {
+    function refreshCanvas(): void {
       const cropper = cropperRef.current;
-      const ctx = cropper?.getContext('2d');
-      if (cropper && ctx) {
-        ctx.clearRect(0, 0, cropper.width, cropper.height);
+      if (!cropper) {
+        return;
+      }
+      const ctx = cropper.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+      ctx.clearRect(0, 0, cropper.width, cropper.height);
 
-        const rect = constructRect(rectStart, rectEnd);
+      const rect = constructRect(rectStart, rectEnd);
 
-        // draw gray overlay around the selection
-        ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-        ctx.fillRect(0, 0, imageBuffer.offsetWidth, imageBuffer.offsetHeight);
-        ctx.clearRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
+      // draw gray overlay around the selection
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.fillRect(0, 0, imageBuffer.offsetWidth, imageBuffer.offsetHeight);
+      ctx.clearRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
 
-        // draw selection border
-        ctx.strokeStyle = 'purple';
-        ctx.lineWidth = 3;
-        ctx.strokeRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
-      }
+      // draw selection border
+      ctx.strokeStyle = 'purple';
+      ctx.lineWidth = 3;
+      ctx.strokeRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
     }
 
     const makeHandleMouseMove = useCallback((corner: string) => {
@@ -118,26 +122,26 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       };
     }, []);
 
-    function onGrabButton(e: Event, corner: string) {
+    function onGrabButton(e: Event, corner: string): void {
       setConfirmCrop(false);
       const handleMouseMove = makeHandleMouseMove(corner);
-      const handleMouseUp = () => {
-        imageBuffer?.removeEventListener('mousemove', handleMouseMove);
-        cropperRef.current?.removeEventListener('mousemove', handleMouseMove);
-        DOCUMENT?.removeEventListener('mouseup', handleMouseUp);
+      const handleMouseUp = (): void => {
+        imageBuffer.removeEventListener('mousemove', handleMouseMove);
+        cropperRef.current && cropperRef.current.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
         setConfirmCrop(true);
       };
 
-      DOCUMENT?.addEventListener('mouseup', handleMouseUp);
-      imageBuffer?.addEventListener('mousemove', handleMouseMove);
-      cropperRef.current?.addEventListener('mousemove', handleMouseMove);
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+      imageBuffer.addEventListener('mousemove', handleMouseMove);
+      cropperRef.current && cropperRef.current.addEventListener('mousemove', handleMouseMove);
     }
 
     useEffect(() => {
       refreshCanvas();
     }, [rectStart, rectEnd]);
 
-    function submit() {
+    function submit(): void {
       const rect = constructRect(rectStart, rectEnd);
 
       const cutoutCanvas = DOCUMENT.createElement('canvas');

From 61c9a5aa920630c31f2410385c2ccd07006ee627 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 7 Mar 2024 12:08:49 -0800
Subject: [PATCH 34/54] wip - managing canvas drawing

---
 .../components/ScreenshotEditor.tsx           | 277 +++++++++++-------
 .../components/ScreenshotInput.css.ts         |   7 +-
 2 files changed, 169 insertions(+), 115 deletions(-)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 6899b52b3ecf..d401be99466d 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -38,38 +38,112 @@ const constructRect = (start: Point, end: Point): Rect => {
   };
 };
 
+function drawIntoCanvas(imageSource: HTMLVideoElement, destination: HTMLCanvasElement): void {
+  const context = destination.getContext('2d');
+  if (!context) {
+    throw new Error('Could not get canvas context');
+  }
+  destination.width = imageSource.videoWidth;
+  destination.height = imageSource.videoHeight;
+  context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
+}
+
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: FactoryParams): ComponentType<Props> {
   return function ScreenshotEditor({ onError }: Props): VNode {
     const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
+
     const canvasContainerRef = useRef<HTMLDivElement>(null);
+    const canvasRef = useRef<HTMLCanvasElement>(null);
     const cropperRef = useRef<HTMLCanvasElement>(null);
+
     const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
-    const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 });
+    const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 }); // width/height
     const [confirmCrop, setConfirmCrop] = useState(false);
 
-    useEffect(() => {
-      const container = canvasContainerRef.current;
-      container && container.appendChild(imageBuffer);
+    useTakeScreenshot({
+      onBeforeScreenshot: useCallback(() => {
+        dialog.el.style.display = 'none';
+      }, []),
+      onScreenshot: useCallback(
+        (imageSource: HTMLVideoElement) => {
+          drawIntoCanvas(imageSource, imageBuffer);
 
-      resizeCropper();
-    }, [imageBuffer]);
+          if (canvasRef.current) {
+            drawIntoCanvas(imageSource, canvasRef.current);
+            setRectStart({ x: 0, y: 0 });
+            setRectEnd({ x: imageSource.videoWidth, y: imageSource.videoHeight });
+            const cropper = cropperRef.current;
+            if (cropper) {
+              cropper.width = imageSource.videoWidth;
+              cropper.height = imageSource.videoHeight;
+              cropper.style.width = `${imageSource.videoWidth}px`;
+              cropper.style.height = `${imageSource.videoHeight}px`;
+            }
+          }
+        },
+        [imageBuffer],
+      ),
+      onAfterScreenshot: useCallback(() => {
+        dialog.el.style.display = 'block';
+        // resizeCropper();
+      }, []),
+      onError: useCallback(error => {
+        dialog.el.style.display = 'block';
+        onError(error);
+      }, []),
+    });
 
-    function resizeCropper(): void {
-      setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
-      setRectEnd({
-        x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
-        y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
-      });
+    // useEffect(() => {
+    //   const ctx = canvasRef.current && canvasRef.current.getContext('2d');
+    //   if (ctx) {
+    //     ctx.drawImage(
+    //       imageBuffer,
+    //       0,
+    //       0,
+    //       imageBuffer.width,
+    //       imageBuffer.height,
+    //       0,
+    //       0,
+    //       imageBuffer.width,
+    //       imageBuffer.height,
+    //     );
 
-      const cropper = cropperRef.current;
-      if (cropper) {
-        cropper.width = imageBuffer.offsetWidth;
-        cropper.height = imageBuffer.offsetHeight;
-        cropper.style.width = `${imageBuffer.offsetWidth}px`;
-        cropper.style.height = `${imageBuffer.offsetHeight}px`;
-      }
-    }
+    //     setRectStart({ x: 0, y: 0 });
+    //     setRectEnd({ x: imageBuffer.width, y: imageBuffer.height });
+
+    //     const cropper = cropperRef.current;
+    //     if (cropper) {
+    //       cropper.width = imageBuffer.offsetWidth;
+    //       cropper.height = imageBuffer.offsetHeight;
+    //       cropper.style.width = `${imageBuffer.offsetWidth}px`;
+    //       cropper.style.height = `${imageBuffer.offsetHeight}px`;
+    //     }
+    //   }
+    // }, [canvasRef.current]);
+
+    // useEffect(() => {
+    //   // const container = canvasContainerRef.current;
+    //   // container && container.appendChild(imageBuffer);
+
+    //   resizeCropper();
+    // }, [imageBuffer]);
+
+    // function resizeCropper(): void {
+    //   setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
+    //   setRectEnd({
+    //     x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
+    //     y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
+    //   });
+
+    //   const cropper = cropperRef.current;
+    //   if (cropper) {
+    //     cropper.width = imageBuffer.offsetWidth;
+    //     cropper.height = imageBuffer.offsetHeight;
+    //     cropper.style.width = `${imageBuffer.offsetWidth}px`;
+    //     cropper.style.height = `${imageBuffer.offsetHeight}px`;
+    //   }
+    // }
 
     function refreshCanvas(): void {
       const cropper = cropperRef.current;
@@ -144,13 +218,13 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     function submit(): void {
       const rect = constructRect(rectStart, rectEnd);
 
-      const cutoutCanvas = DOCUMENT.createElement('canvas');
-      cutoutCanvas.width = rect.width;
-      cutoutCanvas.height = rect.height;
+      // const cutoutCanvas = DOCUMENT.createElement('canvas');
 
-      const cutoutCtx = cutoutCanvas.getContext('2d');
-      if (cutoutCtx && imageBuffer) {
-        cutoutCtx.drawImage(
+      // (image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number)
+
+      const imagebufferCtx = imageBuffer.getContext('2d');
+      if (imagebufferCtx) {
+        imagebufferCtx.drawImage(
           imageBuffer,
           ((rect.x - imageBuffer.offsetLeft) / imageBuffer.offsetWidth) * imageBuffer.width,
           ((rect.y - imageBuffer.offsetTop) / imageBuffer.offsetHeight) * imageBuffer.height,
@@ -161,101 +235,80 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
           rect.width,
           rect.height,
         );
+        imageBuffer.width = rect.width;
+        imageBuffer.height = rect.height;
       }
-      const container = canvasContainerRef.current;
-      container && container.removeChild(imageBuffer);
-      // eslint-disable-next-line no-param-reassign
-      imageBuffer = cutoutCanvas;
+      // resizeCropper();
+      // const container = canvasContainerRef.current;
+      // container && container.removeChild(imageBuffer);
     }
 
-    useTakeScreenshot({
-      onBeforeScreenshot: useCallback(() => {
-        dialog.el.style.display = 'none';
-      }, []),
-      onScreenshot: useCallback(
-        (imageSource: HTMLVideoElement) => {
-          const context = imageBuffer.getContext('2d');
-          if (!context) {
-            throw new Error('Could not get canvas context');
-          }
-          imageBuffer.width = imageSource.videoWidth;
-          imageBuffer.height = imageSource.videoHeight;
-          context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
-        },
-        [imageBuffer],
-      ),
-      onAfterScreenshot: useCallback(() => {
-        dialog.el.style.display = 'block';
-        resizeCropper();
-      }, []),
-      onError: useCallback(error => {
-        dialog.el.style.display = 'block';
-        onError(error);
-      }, []),
-    });
-
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
         <div class="canvasContainer" ref={canvasContainerRef}>
-          <canvas style={{ position: 'absolute' }} ref={cropperRef}></canvas>
-          <CropCorner
-            left={rectStart.x - 3}
-            top={rectStart.y - 3}
-            onGrabButton={onGrabButton}
-            corner="topleft"
-          ></CropCorner>
-          <CropCorner
-            left={rectEnd.x - 30 + 3}
-            top={rectStart.y - 3}
-            onGrabButton={onGrabButton}
-            corner="topright"
-          ></CropCorner>
-          <CropCorner
-            left={rectStart.x - 3}
-            top={rectEnd.y - 30 + 3}
-            onGrabButton={onGrabButton}
-            corner="bottomleft"
-          ></CropCorner>
-          <CropCorner
-            left={rectEnd.x - 30 + 3}
-            top={rectEnd.y - 30 + 3}
-            onGrabButton={onGrabButton}
-            corner="bottomright"
-          ></CropCorner>
-          <div
-            style={{
-              position: 'absolute',
-              left: rectEnd.x - 191,
-              top: rectEnd.y + 8,
-              display: confirmCrop ? 'flex' : 'none',
-            }}
-            class="crop-btn-group"
-          >
-            <button
-              onClick={e => {
-                e.preventDefault();
-                setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
-                setRectEnd({
-                  x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
-                  y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
-                });
-                setConfirmCrop(false);
-              }}
-              class="btn btn--default"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={e => {
-                e.preventDefault();
-                submit();
-                setConfirmCrop(false);
+          <canvas ref={canvasRef}></canvas>
+          <canvas ref={cropperRef}></canvas>
+          <div>
+            <CropCorner
+              left={rectStart.x - 3}
+              top={rectStart.y - 3}
+              onGrabButton={onGrabButton}
+              corner="topleft"
+            ></CropCorner>
+            <CropCorner
+              left={rectEnd.x - 30 + 3}
+              top={rectStart.y - 3}
+              onGrabButton={onGrabButton}
+              corner="topright"
+            ></CropCorner>
+            <CropCorner
+              left={rectStart.x - 3}
+              top={rectEnd.y - 30 + 3}
+              onGrabButton={onGrabButton}
+              corner="bottomleft"
+            ></CropCorner>
+            <CropCorner
+              left={rectEnd.x - 30 + 3}
+              top={rectEnd.y - 30 + 3}
+              onGrabButton={onGrabButton}
+              corner="bottomright"
+            ></CropCorner>
+
+            <div
+              style={{
+                position: 'absolute',
+                left: rectEnd.x - 191,
+                top: rectEnd.y + 8,
+                display: confirmCrop ? 'flex' : 'none',
               }}
-              class="btn btn--primary"
+              class="crop-btn-group"
             >
-              Confirm
-            </button>
+              <button
+                onClick={e => {
+                  e.preventDefault();
+                  setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
+                  setRectEnd({
+                    x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
+                    y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
+                  });
+                  setConfirmCrop(false);
+                }}
+                class="btn btn--default"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={e => {
+                  e.preventDefault();
+                  submit();
+                  setConfirmCrop(false);
+                }}
+                class="btn btn--primary"
+              >
+                Confirm
+              </button>
+            </div>
           </div>
         </div>
       </div>
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
index e37ed62db35a..8df9704f824a 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
@@ -37,11 +37,12 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
 }
 
 .canvasContainer {
-  flex: 1 0 auto;
-  display: contents;
+  display: grid;
+  grid-template: 1fr / 1fr;
 }
 
-.canvasContainer canvas {
+.canvasContainer > * {
+  grid-area: 1 / 1;
   flex: 1 0 auto;
   width: 0; /* reasons... */
   align-self: center;

From 3a60a19c3d7577269c6ba018220f455387e1efa0 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 7 Mar 2024 15:16:36 -0800
Subject: [PATCH 35/54] bringing cropping handles inside the modal

---
 .../components/ScreenshotEditor.tsx           | 198 +++++++++---------
 .../components/ScreenshotInput.css.ts         |  10 +-
 .../components/useContainerSize.tsx           |  30 +++
 .../components/useResizeObserver.tsx          |  26 +++
 4 files changed, 160 insertions(+), 104 deletions(-)
 create mode 100644 packages/feedback2/src/screenshot/components/useContainerSize.tsx
 create mode 100644 packages/feedback2/src/screenshot/components/useResizeObserver.tsx

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index d401be99466d..65e9e41d7423 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks'
 import { DOCUMENT } from '../../constants';
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
+import { useContainerSize } from './useContainerSize';
 import { useTakeScreenshot } from './useTakeScreenshot';
 
 interface FactoryParams {
@@ -17,6 +18,11 @@ interface Props {
   onError: (error: Error) => void;
 }
 
+interface Box {
+  width: number;
+  height: number;
+}
+
 interface Point {
   x: number;
   y: number;
@@ -25,14 +31,18 @@ interface Point {
 interface Rect {
   height: number;
   width: number;
-  x: number;
-  y: number;
+  sx: number;
+  sy: number;
+  ex: number;
+  ey: number;
 }
 
 const constructRect = (start: Point, end: Point): Rect => {
   return {
-    x: Math.min(start.x, end.x),
-    y: Math.min(start.y, end.y),
+    sx: Math.min(start.x, end.x),
+    sy: Math.min(start.y, end.y),
+    ex: Math.max(start.x, end.x),
+    ey: Math.max(start.y, end.y),
     width: Math.abs(start.x - end.x),
     height: Math.abs(start.y - end.y),
   };
@@ -56,29 +66,75 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     const canvasContainerRef = useRef<HTMLDivElement>(null);
     const canvasRef = useRef<HTMLCanvasElement>(null);
     const cropperRef = useRef<HTMLCanvasElement>(null);
+    const divRef = useRef<HTMLDivElement>(null);
+
+    const containerSize = useContainerSize(canvasContainerRef);
+    const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+
+    useEffect(() => {
+      if (!canvasRef.current) {
+        return;
+      }
+      canvasRef.current.style.width = `${containerSize.width}px`;
+      canvasRef.current.style.height = `${containerSize.height}px`;
+    }, [canvasRef.current, containerSize]);
 
     const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
-    const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 }); // width/height
+    const [rectEnd, setRectEnd] = useState({ x: containerSize.width, y: containerSize.height });
+    const rect = useMemo(() => constructRect(rectStart, rectEnd), [rectStart, rectEnd]);
     const [confirmCrop, setConfirmCrop] = useState(false);
 
+    useEffect(() => {
+      if (!cropperRef.current || !divRef.current) {
+        return;
+      }
+      const cropper = cropperRef.current;
+
+      const widthRatio = imageSize.width / containerSize.width;
+      const heightRatio = imageSize.height / containerSize.height;
+      if (widthRatio > heightRatio) {
+        cropper.width = containerSize.width;
+        cropper.height = Math.floor(imageSize.height / widthRatio);
+      } else {
+        cropper.width = Math.floor(imageSize.width / heightRatio);
+        cropper.height = containerSize.height;
+      }
+
+      const ctx = cropper.getContext('2d');
+      if (!ctx) {
+        return;
+      }
+      console.log('redraw', cropper.width, cropper.height, rect);
+      // ctx.clearRect(0, 0, cropper.width, cropper.height);
+
+      // draw gray overlay around the selection
+      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
+      ctx.fillRect(0, 0, rect.width, rect.height);
+      ctx.clearRect(rect.sx, rect.sy, rect.width, rect.height);
+
+      // draw selection border
+      ctx.strokeStyle = 'purple';
+      ctx.lineWidth = 3;
+      ctx.strokeRect(rect.sx, rect.sy, rect.width, rect.height);
+    }, [rect, cropperRef.current, containerSize, imageSize]);
+
     useTakeScreenshot({
       onBeforeScreenshot: useCallback(() => {
         dialog.el.style.display = 'none';
       }, []),
       onScreenshot: useCallback(
         (imageSource: HTMLVideoElement) => {
+          setImageSize({
+            width: imageSource.videoWidth,
+            height: imageSource.videoHeight,
+          });
           drawIntoCanvas(imageSource, imageBuffer);
 
           if (canvasRef.current) {
             drawIntoCanvas(imageSource, canvasRef.current);
-            setRectStart({ x: 0, y: 0 });
-            setRectEnd({ x: imageSource.videoWidth, y: imageSource.videoHeight });
-            const cropper = cropperRef.current;
-            if (cropper) {
-              cropper.width = imageSource.videoWidth;
-              cropper.height = imageSource.videoHeight;
-              cropper.style.width = `${imageSource.videoWidth}px`;
-              cropper.style.height = `${imageSource.videoHeight}px`;
+
+            if (divRef.current) {
+              divRef.current.style.aspectRatio = `auto ${imageSource.videoWidth} / ${imageSource.videoHeight}`;
             }
           }
         },
@@ -94,58 +150,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       }, []),
     });
 
-    // useEffect(() => {
-    //   const ctx = canvasRef.current && canvasRef.current.getContext('2d');
-    //   if (ctx) {
-    //     ctx.drawImage(
-    //       imageBuffer,
-    //       0,
-    //       0,
-    //       imageBuffer.width,
-    //       imageBuffer.height,
-    //       0,
-    //       0,
-    //       imageBuffer.width,
-    //       imageBuffer.height,
-    //     );
-
-    //     setRectStart({ x: 0, y: 0 });
-    //     setRectEnd({ x: imageBuffer.width, y: imageBuffer.height });
-
-    //     const cropper = cropperRef.current;
-    //     if (cropper) {
-    //       cropper.width = imageBuffer.offsetWidth;
-    //       cropper.height = imageBuffer.offsetHeight;
-    //       cropper.style.width = `${imageBuffer.offsetWidth}px`;
-    //       cropper.style.height = `${imageBuffer.offsetHeight}px`;
-    //     }
-    //   }
-    // }, [canvasRef.current]);
-
-    // useEffect(() => {
-    //   // const container = canvasContainerRef.current;
-    //   // container && container.appendChild(imageBuffer);
-
-    //   resizeCropper();
-    // }, [imageBuffer]);
-
-    // function resizeCropper(): void {
-    //   setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
-    //   setRectEnd({
-    //     x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
-    //     y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
-    //   });
-
-    //   const cropper = cropperRef.current;
-    //   if (cropper) {
-    //     cropper.width = imageBuffer.offsetWidth;
-    //     cropper.height = imageBuffer.offsetHeight;
-    //     cropper.style.width = `${imageBuffer.offsetWidth}px`;
-    //     cropper.style.height = `${imageBuffer.offsetHeight}px`;
-    //   }
-    // }
-
-    function refreshCanvas(): void {
+    const drawCropBorder = useCallback((rect: Rect): void => {
       const cropper = cropperRef.current;
       if (!cropper) {
         return;
@@ -156,40 +161,38 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       }
       ctx.clearRect(0, 0, cropper.width, cropper.height);
 
-      const rect = constructRect(rectStart, rectEnd);
-
       // draw gray overlay around the selection
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(0, 0, imageBuffer.offsetWidth, imageBuffer.offsetHeight);
-      ctx.clearRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
+      ctx.fillRect(0, 0, rect.width, rect.height);
+      ctx.clearRect(rect.sx, rect.sy, rect.width, rect.height);
 
       // draw selection border
       ctx.strokeStyle = 'purple';
       ctx.lineWidth = 3;
-      ctx.strokeRect(rect.x - imageBuffer.offsetLeft, rect.y - imageBuffer.offsetTop, rect.width, rect.height);
-    }
+      ctx.strokeRect(rect.sx, rect.sy, rect.width, rect.height);
+    }, []);
 
     const makeHandleMouseMove = useCallback((corner: string) => {
       return function (e: MouseEvent) {
         switch (corner) {
           case 'topleft':
             setRectStart({
-              x: imageBuffer.offsetLeft + Math.floor(e.offsetX),
-              y: imageBuffer.offsetTop + Math.floor(e.offsetY),
+              x: Math.max(0, e.offsetX), // but not larger than the width
+              y: Math.max(0, e.offsetY),
             });
             break;
           case 'topright':
-            setRectStart(prev => ({ ...prev, y: imageBuffer.offsetTop + Math.floor(e.offsetY) }));
-            setRectEnd(prev => ({ ...prev, x: imageBuffer.offsetLeft + Math.floor(e.offsetX) }));
+            setRectStart(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
+            setRectEnd(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
             break;
           case 'bottomleft':
-            setRectStart(prev => ({ ...prev, x: imageBuffer.offsetLeft + Math.floor(e.offsetX) }));
-            setRectEnd(prev => ({ ...prev, y: imageBuffer.offsetTop + Math.floor(e.offsetY) }));
+            setRectStart(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
+            setRectEnd(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
             break;
           case 'bottomright':
             setRectEnd({
-              x: imageBuffer.offsetLeft + Math.floor(e.offsetX),
-              y: imageBuffer.offsetTop + Math.floor(e.offsetY),
+              x: Math.floor(e.offsetX),
+              y: Math.floor(e.offsetY),
             });
             break;
         }
@@ -211,10 +214,6 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       cropperRef.current && cropperRef.current.addEventListener('mousemove', handleMouseMove);
     }
 
-    useEffect(() => {
-      refreshCanvas();
-    }, [rectStart, rectEnd]);
-
     function submit(): void {
       const rect = constructRect(rectStart, rectEnd);
 
@@ -226,8 +225,8 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       if (imagebufferCtx) {
         imagebufferCtx.drawImage(
           imageBuffer,
-          ((rect.x - imageBuffer.offsetLeft) / imageBuffer.offsetWidth) * imageBuffer.width,
-          ((rect.y - imageBuffer.offsetTop) / imageBuffer.offsetHeight) * imageBuffer.height,
+          ((rect.sx - imageBuffer.offsetLeft) / imageBuffer.offsetWidth) * imageBuffer.width,
+          ((rect.sy - imageBuffer.offsetTop) / imageBuffer.offsetHeight) * imageBuffer.height,
           (rect.width / imageBuffer.offsetWidth) * imageBuffer.width,
           (rect.height / imageBuffer.offsetHeight) * imageBuffer.height,
           0,
@@ -247,30 +246,25 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
         <div class="canvasContainer" ref={canvasContainerRef}>
-          <canvas ref={canvasRef}></canvas>
-          <canvas ref={cropperRef}></canvas>
-          <div>
-            <CropCorner
-              left={rectStart.x - 3}
-              top={rectStart.y - 3}
-              onGrabButton={onGrabButton}
-              corner="topleft"
-            ></CropCorner>
+          <canvas ref={canvasRef} />
+          <div ref={divRef}>
+            <canvas class="cropper" ref={cropperRef} />
+            <CropCorner left={rect.sx} top={rect.sy} onGrabButton={onGrabButton} corner="topleft"></CropCorner>
             <CropCorner
-              left={rectEnd.x - 30 + 3}
-              top={rectStart.y - 3}
+              left={Math.max(0, rect.ex - 30)}
+              top={rect.sy}
               onGrabButton={onGrabButton}
               corner="topright"
             ></CropCorner>
             <CropCorner
-              left={rectStart.x - 3}
-              top={rectEnd.y - 30 + 3}
+              left={rect.sx}
+              top={Math.max(0, rect.ey - 30)}
               onGrabButton={onGrabButton}
               corner="bottomleft"
             ></CropCorner>
             <CropCorner
-              left={rectEnd.x - 30 + 3}
-              top={rectEnd.y - 30 + 3}
+              left={Math.max(0, rect.ex - 30)}
+              top={Math.max(0, rect.ey - 30)}
               onGrabButton={onGrabButton}
               corner="bottomright"
             ></CropCorner>
@@ -278,8 +272,8 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
             <div
               style={{
                 position: 'absolute',
-                left: rectEnd.x - 191,
-                top: rectEnd.y + 8,
+                left: rect.ex - 191,
+                top: rect.ey + 8,
                 display: confirmCrop ? 'flex' : 'none',
               }}
               class="crop-btn-group"
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
index 8df9704f824a..dc7417e89583 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
@@ -39,15 +39,21 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
 .canvasContainer {
   display: grid;
   grid-template: 1fr / 1fr;
+  flex: 1 0 auto;
 }
 
 .canvasContainer > * {
   grid-area: 1 / 1;
-  flex: 1 0 auto;
-  width: 0; /* reasons... */
+  position: relative;
+  object-fit: contain;
   align-self: center;
 }
 
+.cropper {
+  width: 100%;
+  height: 100%;
+}
+
 .crop-btn-group {
   padding: 8px;
   gap: 8px;
diff --git a/packages/feedback2/src/screenshot/components/useContainerSize.tsx b/packages/feedback2/src/screenshot/components/useContainerSize.tsx
new file mode 100644
index 000000000000..c26c4296d61d
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/useContainerSize.tsx
@@ -0,0 +1,30 @@
+import type { RefObject } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { useResizeObserver } from './useResizeObserver';
+
+interface Box {
+  width: number;
+  height: number;
+}
+
+export function useContainerSize(canvasContainerRef: RefObject<HTMLDivElement>): Box {
+  const [containerSize, setContainerSize] = useState<Box>({ width: 0, height: 0 });
+
+  const onResizeContainer = useCallback(() => {
+    if (canvasContainerRef.current) {
+      setContainerSize({
+        width: canvasContainerRef.current.clientWidth,
+        height: canvasContainerRef.current.clientHeight,
+      });
+    }
+  }, []);
+  useEffect(() => {
+    onResizeContainer();
+  }, [canvasContainerRef.current]);
+  useResizeObserver({
+    elementRef: canvasContainerRef,
+    onResize: onResizeContainer,
+  });
+
+  return containerSize;
+}
diff --git a/packages/feedback2/src/screenshot/components/useResizeObserver.tsx b/packages/feedback2/src/screenshot/components/useResizeObserver.tsx
new file mode 100644
index 000000000000..1c6ef493cda4
--- /dev/null
+++ b/packages/feedback2/src/screenshot/components/useResizeObserver.tsx
@@ -0,0 +1,26 @@
+import type { RefObject } from 'preact';
+import { useEffect, useMemo } from 'preact/hooks';
+
+interface Props<Element extends HTMLElement> {
+  elementRef: RefObject<Element>;
+  onResize: ResizeObserverCallback;
+}
+
+export function useResizeObserver<Element extends HTMLElement>({ elementRef, onResize }: Props<Element>): void {
+  const resizeObserver = useMemo(() => {
+    return new ResizeObserver(onResize);
+  }, [onResize]);
+
+  useEffect(() => {
+    if (elementRef.current) {
+      const elem = elementRef.current;
+      resizeObserver.observe(elem);
+      return () => {
+        resizeObserver.unobserve(elem);
+      };
+    }
+
+    // eslint-disable-next-line @typescript-eslint/no-empty-function
+    return () => {};
+  }, [resizeObserver, elementRef.current]);
+}

From 1bcd4aefac6d741f1f90fdb12b95a4295b65bd13 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 7 Mar 2024 15:29:50 -0800
Subject: [PATCH 36/54] follow rule of hooks in Form, and render the gray
 background always

---
 .../feedback2/src/modal/components/Form.tsx   |  2 +-
 .../components/ScreenshotEditor.tsx           | 44 +++----------------
 2 files changed, 7 insertions(+), 39 deletions(-)

diff --git a/packages/feedback2/src/modal/components/Form.tsx b/packages/feedback2/src/modal/components/Form.tsx
index d4562b0b5ff6..0b2b1bb98fb1 100644
--- a/packages/feedback2/src/modal/components/Form.tsx
+++ b/packages/feedback2/src/modal/components/Form.tsx
@@ -132,7 +132,7 @@ export function Form({
         // pass
       }
     },
-    [onSubmitSuccess, onSubmitError],
+    [includeScreenshotValue, onSubmitSuccess, onSubmitError],
   );
 
   return (
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 65e9e41d7423..0260efeac9e2 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -82,6 +82,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
     const [rectEnd, setRectEnd] = useState({ x: containerSize.width, y: containerSize.height });
     const rect = useMemo(() => constructRect(rectStart, rectEnd), [rectStart, rectEnd]);
+
     const [confirmCrop, setConfirmCrop] = useState(false);
 
     useEffect(() => {
@@ -104,12 +105,10 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       if (!ctx) {
         return;
       }
-      console.log('redraw', cropper.width, cropper.height, rect);
-      // ctx.clearRect(0, 0, cropper.width, cropper.height);
 
       // draw gray overlay around the selection
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(0, 0, rect.width, rect.height);
+      ctx.fillRect(0, 0, containerSize.width, containerSize.height);
       ctx.clearRect(rect.sx, rect.sy, rect.width, rect.height);
 
       // draw selection border
@@ -150,28 +149,6 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       }, []),
     });
 
-    const drawCropBorder = useCallback((rect: Rect): void => {
-      const cropper = cropperRef.current;
-      if (!cropper) {
-        return;
-      }
-      const ctx = cropper.getContext('2d');
-      if (!ctx) {
-        return;
-      }
-      ctx.clearRect(0, 0, cropper.width, cropper.height);
-
-      // draw gray overlay around the selection
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(0, 0, rect.width, rect.height);
-      ctx.clearRect(rect.sx, rect.sy, rect.width, rect.height);
-
-      // draw selection border
-      ctx.strokeStyle = 'purple';
-      ctx.lineWidth = 3;
-      ctx.strokeRect(rect.sx, rect.sy, rect.width, rect.height);
-    }, []);
-
     const makeHandleMouseMove = useCallback((corner: string) => {
       return function (e: MouseEvent) {
         switch (corner) {
@@ -215,16 +192,12 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     }
 
     function submit(): void {
-      const rect = constructRect(rectStart, rectEnd);
-
-      // const cutoutCanvas = DOCUMENT.createElement('canvas');
-
-      // (image: CanvasImageSource, sx: number, sy: number, sw: number, sh: number, dx: number, dy: number, dw: number, dh: number)
-
       const imagebufferCtx = imageBuffer.getContext('2d');
-      if (imagebufferCtx) {
+      if (imagebufferCtx && canvasRef.current) {
+        imageBuffer.width = rect.width;
+        imageBuffer.height = rect.height;
         imagebufferCtx.drawImage(
-          imageBuffer,
+          canvasRef.current,
           ((rect.sx - imageBuffer.offsetLeft) / imageBuffer.offsetWidth) * imageBuffer.width,
           ((rect.sy - imageBuffer.offsetTop) / imageBuffer.offsetHeight) * imageBuffer.height,
           (rect.width / imageBuffer.offsetWidth) * imageBuffer.width,
@@ -234,12 +207,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
           rect.width,
           rect.height,
         );
-        imageBuffer.width = rect.width;
-        imageBuffer.height = rect.height;
       }
-      // resizeCropper();
-      // const container = canvasContainerRef.current;
-      // container && container.removeChild(imageBuffer);
     }
 
     return (

From f6355cb6a27aa3b5a120dcdf76379ff7867d636e Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Thu, 7 Mar 2024 15:33:39 -0800
Subject: [PATCH 37/54] start the selection size as large as possible, reset it
 whenever window size changes

---
 .../feedback2/src/screenshot/components/ScreenshotEditor.tsx  | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 0260efeac9e2..ec8f38489337 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -85,6 +85,10 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
 
     const [confirmCrop, setConfirmCrop] = useState(false);
 
+    useEffect(() => {
+      setRectEnd({ x: containerSize.width, y: containerSize.height });
+    }, [containerSize]);
+
     useEffect(() => {
       if (!cropperRef.current || !divRef.current) {
         return;

From 2786d6ae84062b76825a6fe1b6b2d61cda41329c Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Fri, 8 Mar 2024 15:18:58 -0800
Subject: [PATCH 38/54] bump versions of new packages to match latest release

---
 packages/feedback-screenshot/package.json | 8 ++++----
 packages/feedback2/package.json           | 8 ++++----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/feedback-screenshot/package.json b/packages/feedback-screenshot/package.json
index a52708806991..9c4df9be8e26 100644
--- a/packages/feedback-screenshot/package.json
+++ b/packages/feedback-screenshot/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/feedback-screenshot",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "Sentry SDK integration for user feedback screenshots",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
@@ -29,9 +29,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/core": "8.0.0-alpha.0",
-    "@sentry/types": "8.0.0-alpha.0",
-    "@sentry/utils": "8.0.0-alpha.0",
+    "@sentry/core": "8.0.0-alpha.2",
+    "@sentry/types": "8.0.0-alpha.2",
+    "@sentry/utils": "8.0.0-alpha.2",
     "preact": "^10.19.4",
     "preact-compat": "^3.19.0"
   },
diff --git a/packages/feedback2/package.json b/packages/feedback2/package.json
index d4b1f5d2ac53..9e810ad8e6cf 100644
--- a/packages/feedback2/package.json
+++ b/packages/feedback2/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sentry-internal/feedback2",
-  "version": "8.0.0-alpha.0",
+  "version": "8.0.0-alpha.2",
   "description": "Sentry SDK integration for user feedback",
   "repository": "git://github.com/getsentry/sentry-javascript.git",
   "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
@@ -29,9 +29,9 @@
     "access": "public"
   },
   "dependencies": {
-    "@sentry/core": "8.0.0-alpha.0",
-    "@sentry/types": "8.0.0-alpha.0",
-    "@sentry/utils": "8.0.0-alpha.0",
+    "@sentry/core": "8.0.0-alpha.2",
+    "@sentry/types": "8.0.0-alpha.2",
+    "@sentry/utils": "8.0.0-alpha.2",
     "preact": "^10.19.4",
     "preact-compat": "^3.19.0"
   },

From 824c7b615f55f2caac29c549d3be2861b9c5ab8f Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Sat, 9 Mar 2024 01:24:30 -0500
Subject: [PATCH 39/54] everything functioning including resizing & tall images
 :D

---
 .../src/modal/components/Dialog.css.ts        |   4 +-
 .../components/ScreenshotEditor.tsx           | 365 +++++++++---------
 .../components/ScreenshotInput.css.ts         |  16 +-
 3 files changed, 197 insertions(+), 188 deletions(-)

diff --git a/packages/feedback2/src/modal/components/Dialog.css.ts b/packages/feedback2/src/modal/components/Dialog.css.ts
index 26c405d9ddb3..4d5fe338871b 100644
--- a/packages/feedback2/src/modal/components/Dialog.css.ts
+++ b/packages/feedback2/src/modal/components/Dialog.css.ts
@@ -83,7 +83,7 @@ export function createDialogStyles(): HTMLStyleElement {
   overflow: auto;
   flex-direction: row;
   gap: 16px;
-  flex: 1 0 auto;
+  flex: 1 0;
 }
 
 .form__right {
@@ -93,7 +93,7 @@ export function createDialogStyles(): HTMLStyleElement {
   flex-direction: column;
   justify-content: space-between;
   gap: 16px;
-
+  flex-shrink: 0;
 }
 
 
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index ec8f38489337..32b36111eea7 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -2,10 +2,9 @@ import type { ComponentType, VNode, h as hType } from 'preact';
 // biome-ignore lint/nursery/noUnusedImports: reason
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
-import { DOCUMENT } from '../../constants';
+import { DOCUMENT, WINDOW } from '../../constants';
 import type { Dialog } from '../../types';
 import { createScreenshotInputStyles } from './ScreenshotInput.css';
-import { useContainerSize } from './useContainerSize';
 import { useTakeScreenshot } from './useTakeScreenshot';
 
 interface FactoryParams {
@@ -19,44 +18,40 @@ interface Props {
 }
 
 interface Box {
-  width: number;
-  height: number;
+  startx: number;
+  starty: number;
+  endx: number;
+  endy: number;
 }
 
-interface Point {
+interface Rect {
   x: number;
   y: number;
-}
-
-interface Rect {
   height: number;
   width: number;
-  sx: number;
-  sy: number;
-  ex: number;
-  ey: number;
 }
 
-const constructRect = (start: Point, end: Point): Rect => {
+const constructRect = (box: Box): Rect => {
   return {
-    sx: Math.min(start.x, end.x),
-    sy: Math.min(start.y, end.y),
-    ex: Math.max(start.x, end.x),
-    ey: Math.max(start.y, end.y),
-    width: Math.abs(start.x - end.x),
-    height: Math.abs(start.y - end.y),
+    x: Math.min(box.startx, box.endx),
+    y: Math.min(box.starty, box.endy),
+    width: Math.abs(box.startx - box.endx),
+    height: Math.abs(box.starty - box.endy),
   };
 };
 
-function drawIntoCanvas(imageSource: HTMLVideoElement, destination: HTMLCanvasElement): void {
-  const context = destination.getContext('2d');
-  if (!context) {
-    throw new Error('Could not get canvas context');
+const containedImage = (img: HTMLCanvasElement): Box => {
+  const ratio = img.width / img.height;
+  let width = img.clientHeight * ratio;
+  let height = img.clientHeight;
+  if (width > img.clientWidth) {
+    width = img.clientWidth;
+    height = img.clientWidth / ratio;
   }
-  destination.width = imageSource.videoWidth;
-  destination.height = imageSource.videoHeight;
-  context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
-}
+  const x = (img.clientWidth - width) / 2;
+  const y = (img.clientHeight - height) / 2;
+  return { startx: x, starty: y, endx: width + x, endy: height + y };
+};
 
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
 export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: FactoryParams): ComponentType<Props> {
@@ -64,45 +59,40 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
 
     const canvasContainerRef = useRef<HTMLDivElement>(null);
-    const canvasRef = useRef<HTMLCanvasElement>(null);
-    const cropperRef = useRef<HTMLCanvasElement>(null);
-    const divRef = useRef<HTMLDivElement>(null);
-
-    const containerSize = useContainerSize(canvasContainerRef);
-    const [imageSize, setImageSize] = useState({ width: 0, height: 0 });
+    const croppingRef = useRef<HTMLCanvasElement>(null);
+    const [croppingRect, setCroppingRect] = useState<Box>({ startx: 0, starty: 0, endx: 0, endy: 0 });
+    const [confirmCrop, setConfirmCrop] = useState(false);
 
     useEffect(() => {
-      if (!canvasRef.current) {
-        return;
-      }
-      canvasRef.current.style.width = `${containerSize.width}px`;
-      canvasRef.current.style.height = `${containerSize.height}px`;
-    }, [canvasRef.current, containerSize]);
-
-    const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
-    const [rectEnd, setRectEnd] = useState({ x: containerSize.width, y: containerSize.height });
-    const rect = useMemo(() => constructRect(rectStart, rectEnd), [rectStart, rectEnd]);
+      WINDOW.addEventListener('resize', handleResize, false);
+    }, []);
 
-    const [confirmCrop, setConfirmCrop] = useState(false);
+    const handleResize = useCallback(() => {
+      setCroppingRect(containedImage(imageBuffer));
+      resizeCropper();
+    }, []);
 
     useEffect(() => {
-      setRectEnd({ x: containerSize.width, y: containerSize.height });
-    }, [containerSize]);
+      const container = canvasContainerRef.current;
+      container && container.appendChild(imageBuffer);
+      setCroppingRect(containedImage(imageBuffer));
+      resizeCropper();
+    }, [imageBuffer]);
 
-    useEffect(() => {
-      if (!cropperRef.current || !divRef.current) {
-        return;
+    function resizeCropper(): void {
+      const cropper = croppingRef.current;
+      if (cropper && canvasContainerRef.current) {
+        cropper.width = canvasContainerRef.current.clientWidth;
+        cropper.height = canvasContainerRef.current.clientHeight;
+        cropper.style.width = `${canvasContainerRef.current.clientWidth}px`;
+        cropper.style.height = `${canvasContainerRef.current.clientHeight}px`;
       }
-      const cropper = cropperRef.current;
+    }
 
-      const widthRatio = imageSize.width / containerSize.width;
-      const heightRatio = imageSize.height / containerSize.height;
-      if (widthRatio > heightRatio) {
-        cropper.width = containerSize.width;
-        cropper.height = Math.floor(imageSize.height / widthRatio);
-      } else {
-        cropper.width = Math.floor(imageSize.width / heightRatio);
-        cropper.height = containerSize.height;
+    function refreshCroppingBox(): void {
+      const cropper = croppingRef.current;
+      if (!cropper) {
+        return;
       }
 
       const ctx = cropper.getContext('2d');
@@ -110,71 +100,52 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
         return;
       }
 
+      ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
+
+      const imageDimensions = constructRect(containedImage(imageBuffer));
+      const croppingBox = constructRect(croppingRect);
+
       // draw gray overlay around the selection
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(0, 0, containerSize.width, containerSize.height);
-      ctx.clearRect(rect.sx, rect.sy, rect.width, rect.height);
+      ctx.fillRect(imageDimensions.x, imageDimensions.y, imageDimensions.width, imageDimensions.height);
+      ctx.clearRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
 
       // draw selection border
       ctx.strokeStyle = 'purple';
       ctx.lineWidth = 3;
-      ctx.strokeRect(rect.sx, rect.sy, rect.width, rect.height);
-    }, [rect, cropperRef.current, containerSize, imageSize]);
-
-    useTakeScreenshot({
-      onBeforeScreenshot: useCallback(() => {
-        dialog.el.style.display = 'none';
-      }, []),
-      onScreenshot: useCallback(
-        (imageSource: HTMLVideoElement) => {
-          setImageSize({
-            width: imageSource.videoWidth,
-            height: imageSource.videoHeight,
-          });
-          drawIntoCanvas(imageSource, imageBuffer);
-
-          if (canvasRef.current) {
-            drawIntoCanvas(imageSource, canvasRef.current);
-
-            if (divRef.current) {
-              divRef.current.style.aspectRatio = `auto ${imageSource.videoWidth} / ${imageSource.videoHeight}`;
-            }
-          }
-        },
-        [imageBuffer],
-      ),
-      onAfterScreenshot: useCallback(() => {
-        dialog.el.style.display = 'block';
-        // resizeCropper();
-      }, []),
-      onError: useCallback(error => {
-        dialog.el.style.display = 'block';
-        onError(error);
-      }, []),
-    });
+      ctx.strokeRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
+    }
 
     const makeHandleMouseMove = useCallback((corner: string) => {
       return function (e: MouseEvent) {
         switch (corner) {
           case 'topleft':
-            setRectStart({
-              x: Math.max(0, e.offsetX), // but not larger than the width
-              y: Math.max(0, e.offsetY),
-            });
+            setCroppingRect(prev => ({
+              ...prev,
+              startx: Math.floor(e.offsetX),
+              starty: Math.floor(e.offsetY),
+            }));
             break;
           case 'topright':
-            setRectStart(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
-            setRectEnd(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
+            setCroppingRect(prev => ({
+              ...prev,
+              endx: Math.floor(e.offsetX),
+              starty: Math.floor(e.offsetY),
+            }));
             break;
           case 'bottomleft':
-            setRectStart(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
-            setRectEnd(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
+            setCroppingRect(prev => ({
+              ...prev,
+              startx: Math.floor(e.offsetX),
+              endy: Math.floor(e.offsetY),
+            }));
             break;
           case 'bottomright':
-            setRectEnd({
-              x: Math.floor(e.offsetX),
-              y: Math.floor(e.offsetY),
-            });
+            setCroppingRect(prev => ({
+              ...prev,
+              endx: Math.floor(e.offsetX),
+              endy: Math.floor(e.offsetY),
+            }));
             break;
         }
       };
@@ -184,97 +155,137 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       setConfirmCrop(false);
       const handleMouseMove = makeHandleMouseMove(corner);
       const handleMouseUp = (): void => {
-        imageBuffer.removeEventListener('mousemove', handleMouseMove);
-        cropperRef.current && cropperRef.current.removeEventListener('mousemove', handleMouseMove);
+        croppingRef.current && croppingRef.current.removeEventListener('mousemove', handleMouseMove);
         DOCUMENT.removeEventListener('mouseup', handleMouseUp);
         setConfirmCrop(true);
       };
 
       DOCUMENT.addEventListener('mouseup', handleMouseUp);
-      imageBuffer.addEventListener('mousemove', handleMouseMove);
-      cropperRef.current && cropperRef.current.addEventListener('mousemove', handleMouseMove);
+      croppingRef.current && croppingRef.current.addEventListener('mousemove', handleMouseMove);
     }
 
+    useEffect(() => {
+      refreshCroppingBox();
+    }, [croppingRect]);
+
     function submit(): void {
-      const imagebufferCtx = imageBuffer.getContext('2d');
-      if (imagebufferCtx && canvasRef.current) {
-        imageBuffer.width = rect.width;
-        imageBuffer.height = rect.height;
-        imagebufferCtx.drawImage(
-          canvasRef.current,
-          ((rect.sx - imageBuffer.offsetLeft) / imageBuffer.offsetWidth) * imageBuffer.width,
-          ((rect.sy - imageBuffer.offsetTop) / imageBuffer.offsetHeight) * imageBuffer.height,
-          (rect.width / imageBuffer.offsetWidth) * imageBuffer.width,
-          (rect.height / imageBuffer.offsetHeight) * imageBuffer.height,
+      const cutoutCanvas = DOCUMENT.createElement('canvas');
+      const imageBox = constructRect(containedImage(imageBuffer));
+      const croppingBox = constructRect(croppingRect);
+      cutoutCanvas.width = croppingBox.width;
+      cutoutCanvas.height = croppingBox.height;
+
+      const cutoutCtx = cutoutCanvas.getContext('2d');
+      if (cutoutCtx && imageBuffer) {
+        cutoutCtx.drawImage(
+          imageBuffer,
+          ((croppingBox.x - imageBox.x) / imageBox.width) * imageBuffer.width,
+          ((croppingBox.y - imageBox.y) / imageBox.height) * imageBuffer.height,
+          (croppingBox.width / imageBox.width) * imageBuffer.width,
+          (croppingBox.height / imageBox.height) * imageBuffer.height,
           0,
           0,
-          rect.width,
-          rect.height,
+          croppingBox.width,
+          croppingBox.height,
         );
       }
+
+      const ctx = imageBuffer.getContext('2d');
+      if (ctx) {
+        ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
+        imageBuffer.width = cutoutCanvas.width;
+        imageBuffer.height = cutoutCanvas.height;
+        ctx.drawImage(cutoutCanvas, 0, 0);
+        setCroppingRect(containedImage(imageBuffer));
+        resizeCropper();
+      }
     }
 
+    useTakeScreenshot({
+      onBeforeScreenshot: useCallback(() => {
+        dialog.el.style.display = 'none';
+      }, []),
+      onScreenshot: useCallback(
+        (imageSource: HTMLVideoElement) => {
+          const context = imageBuffer.getContext('2d');
+          if (!context) {
+            throw new Error('Could not get canvas context');
+          }
+          imageBuffer.width = imageSource.videoWidth;
+          imageBuffer.height = imageSource.videoHeight;
+          context.drawImage(imageSource, 0, 0, imageSource.videoWidth, imageSource.videoHeight);
+        },
+        [imageBuffer],
+      ),
+      onAfterScreenshot: useCallback(() => {
+        dialog.el.style.display = 'block';
+        setCroppingRect(containedImage(imageBuffer));
+        resizeCropper();
+      }, []),
+      onError: useCallback(error => {
+        dialog.el.style.display = 'block';
+        onError(error);
+      }, []),
+    });
+
     return (
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
         <div class="canvasContainer" ref={canvasContainerRef}>
-          <canvas ref={canvasRef} />
-          <div ref={divRef}>
-            <canvas class="cropper" ref={cropperRef} />
-            <CropCorner left={rect.sx} top={rect.sy} onGrabButton={onGrabButton} corner="topleft"></CropCorner>
-            <CropCorner
-              left={Math.max(0, rect.ex - 30)}
-              top={rect.sy}
-              onGrabButton={onGrabButton}
-              corner="topright"
-            ></CropCorner>
-            <CropCorner
-              left={rect.sx}
-              top={Math.max(0, rect.ey - 30)}
-              onGrabButton={onGrabButton}
-              corner="bottomleft"
-            ></CropCorner>
-            <CropCorner
-              left={Math.max(0, rect.ex - 30)}
-              top={Math.max(0, rect.ey - 30)}
-              onGrabButton={onGrabButton}
-              corner="bottomright"
-            ></CropCorner>
-
-            <div
-              style={{
-                position: 'absolute',
-                left: rect.ex - 191,
-                top: rect.ey + 8,
-                display: confirmCrop ? 'flex' : 'none',
+          <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
+          <CropCorner
+            left={croppingRect.startx - 3}
+            top={croppingRect.starty - 3}
+            onGrabButton={onGrabButton}
+            corner="topleft"
+          ></CropCorner>
+          <CropCorner
+            left={croppingRect.endx - 30 + 3}
+            top={croppingRect.starty - 3}
+            onGrabButton={onGrabButton}
+            corner="topright"
+          ></CropCorner>
+          <CropCorner
+            left={croppingRect.startx - 3}
+            top={croppingRect.endy - 30 + 3}
+            onGrabButton={onGrabButton}
+            corner="bottomleft"
+          ></CropCorner>
+          <CropCorner
+            left={croppingRect.endx - 30 + 3}
+            top={croppingRect.endy - 30 + 3}
+            onGrabButton={onGrabButton}
+            corner="bottomright"
+          ></CropCorner>
+          <div
+            style={{
+              position: 'absolute',
+              left: croppingRect.endx - 191,
+              top: croppingRect.endy + 8,
+              display: confirmCrop ? 'flex' : 'none',
+            }}
+            class="crop-btn-group"
+          >
+            <button
+              onClick={e => {
+                e.preventDefault();
+                setCroppingRect(containedImage(imageBuffer));
+                setConfirmCrop(false);
+              }}
+              class="btn btn--default"
+            >
+              Cancel
+            </button>
+            <button
+              onClick={e => {
+                e.preventDefault();
+                submit();
+                setConfirmCrop(false);
               }}
-              class="crop-btn-group"
+              class="btn btn--primary"
             >
-              <button
-                onClick={e => {
-                  e.preventDefault();
-                  setRectStart({ x: imageBuffer.offsetLeft, y: imageBuffer.offsetTop });
-                  setRectEnd({
-                    x: imageBuffer.offsetLeft + imageBuffer.offsetWidth,
-                    y: imageBuffer.offsetTop + imageBuffer.offsetHeight,
-                  });
-                  setConfirmCrop(false);
-                }}
-                class="btn btn--default"
-              >
-                Cancel
-              </button>
-              <button
-                onClick={e => {
-                  e.preventDefault();
-                  submit();
-                  setConfirmCrop(false);
-                }}
-                class="btn btn--primary"
-              >
-                Confirm
-              </button>
-            </div>
+              Confirm
+            </button>
           </div>
         </div>
       </div>
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
index dc7417e89583..8fb0418be75b 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
@@ -16,8 +16,7 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
 }
 
 .editor {
-  display: flex;
-  flex: 1 0 auto;
+  flex-grow: 1;
 
   background-color: ${surface200};
   background-image: repeating-linear-gradient(
@@ -37,16 +36,15 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
 }
 
 .canvasContainer {
-  display: grid;
-  grid-template: 1fr / 1fr;
-  flex: 1 0 auto;
+  width: 100%;
+  height: 100%;
+  position: relative;
 }
 
-.canvasContainer > * {
-  grid-area: 1 / 1;
-  position: relative;
+.canvasContainer canvas {
+  width: 100%;
+  height: 100%;
   object-fit: contain;
-  align-self: center;
 }
 
 .cropper {

From b0d2ad54e2f03f4985e20d5cc2c56b11eea27b0e Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Mon, 11 Mar 2024 14:47:53 -0400
Subject: [PATCH 40/54] remove feedback-screenshot

---
 .craft.yml                                    |   4 -
 .github/workflows/build.yml                   |   1 -
 package.json                                  |   1 -
 packages/feedback-screenshot/.eslintignore    |   2 -
 packages/feedback-screenshot/.eslintrc.js     |  25 --
 packages/feedback-screenshot/.gitignore       |   4 -
 packages/feedback-screenshot/LICENSE          |  14 -
 packages/feedback-screenshot/README.md        |  25 --
 packages/feedback-screenshot/jest.config.js   |   6 -
 packages/feedback-screenshot/package.json     |  64 ----
 .../rollup.bundle.config.mjs                  |  17 -
 .../feedback-screenshot/rollup.npm.config.mjs |  20 --
 .../scripts/craft-pre-release.sh              |   8 -
 packages/feedback-screenshot/src/index.ts     |   8 -
 .../feedback-screenshot/src/screenshot.tsx    |  75 -----
 .../src/screenshotButton.tsx                  |  37 ---
 .../src/screenshotWidget.tsx                  | 296 ------------------
 .../src/useTakeScreenshot.tsx                 |  59 ----
 packages/feedback-screenshot/tsconfig.json    |  17 -
 .../feedback-screenshot/tsconfig.test.json    |  15 -
 .../feedback-screenshot/tsconfig.types.json   |  10 -
 21 files changed, 708 deletions(-)
 delete mode 100644 packages/feedback-screenshot/.eslintignore
 delete mode 100644 packages/feedback-screenshot/.eslintrc.js
 delete mode 100644 packages/feedback-screenshot/.gitignore
 delete mode 100644 packages/feedback-screenshot/LICENSE
 delete mode 100644 packages/feedback-screenshot/README.md
 delete mode 100644 packages/feedback-screenshot/jest.config.js
 delete mode 100644 packages/feedback-screenshot/package.json
 delete mode 100644 packages/feedback-screenshot/rollup.bundle.config.mjs
 delete mode 100644 packages/feedback-screenshot/rollup.npm.config.mjs
 delete mode 100644 packages/feedback-screenshot/scripts/craft-pre-release.sh
 delete mode 100644 packages/feedback-screenshot/src/index.ts
 delete mode 100644 packages/feedback-screenshot/src/screenshot.tsx
 delete mode 100644 packages/feedback-screenshot/src/screenshotButton.tsx
 delete mode 100644 packages/feedback-screenshot/src/screenshotWidget.tsx
 delete mode 100644 packages/feedback-screenshot/src/useTakeScreenshot.tsx
 delete mode 100644 packages/feedback-screenshot/tsconfig.json
 delete mode 100644 packages/feedback-screenshot/tsconfig.test.json
 delete mode 100644 packages/feedback-screenshot/tsconfig.types.json

diff --git a/.craft.yml b/.craft.yml
index 91fec357aec7..522b6f125f00 100644
--- a/.craft.yml
+++ b/.craft.yml
@@ -36,10 +36,6 @@ targets:
   - name: npm
     id: '@sentry-internal/replay-canvas'
     includeNames: /^sentry-internal-replay-canvas-\d.*\.tgz$/
-  ## 1.9 FeedbackScreenshot package (browser only)
-  - name: npm
-    id: '@sentry-internal/feedback-screenshot'
-    includeNames: /^sentry-internal-feedback-screenshot-\d.*\.tgz$/
 
   ## 2. Browser & Node SDKs
   - name: npm
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index 9d8d59a85ff5..954734ad0ba0 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -107,7 +107,6 @@ jobs:
               - 'packages/replay/**'
               - 'packages/replay-canvas/**'
               - 'packages/feedback/**'
-              - 'packages/feedback-screenshot/**'
               - 'packages/wasm/**'
             browser_integration:
               - *shared
diff --git a/package.json b/package.json
index 372396409d7f..4c76f86592be 100644
--- a/package.json
+++ b/package.json
@@ -56,7 +56,6 @@
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
     "packages/feedback",
-    "packages/feedback-screenshot",
     "packages/feedback2",
     "packages/gatsby",
     "packages/integration-shims",
diff --git a/packages/feedback-screenshot/.eslintignore b/packages/feedback-screenshot/.eslintignore
deleted file mode 100644
index b38db2f296ff..000000000000
--- a/packages/feedback-screenshot/.eslintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-node_modules/
-build/
diff --git a/packages/feedback-screenshot/.eslintrc.js b/packages/feedback-screenshot/.eslintrc.js
deleted file mode 100644
index eaa6b88347ca..000000000000
--- a/packages/feedback-screenshot/.eslintrc.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
-// lives
-
-// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
-
-module.exports = {
-  extends: ['../../.eslintrc.js'],
-  overrides: [
-    {
-      files: ['src/**/*.ts'],
-      rules: {
-        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
-      },
-    },
-    {
-      files: ['jest.setup.ts', 'jest.config.ts'],
-      parserOptions: {
-        project: ['tsconfig.test.json'],
-      },
-      rules: {
-        'no-console': 'off',
-      },
-    },
-  ],
-};
diff --git a/packages/feedback-screenshot/.gitignore b/packages/feedback-screenshot/.gitignore
deleted file mode 100644
index 363d3467c6fa..000000000000
--- a/packages/feedback-screenshot/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-/*.tgz
-.eslintcache
-build
diff --git a/packages/feedback-screenshot/LICENSE b/packages/feedback-screenshot/LICENSE
deleted file mode 100644
index ea5e82344f87..000000000000
--- a/packages/feedback-screenshot/LICENSE
+++ /dev/null
@@ -1,14 +0,0 @@
-Copyright (c) 2024 Sentry (https://sentry.io) and individual contributors. All rights reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
-rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
-persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
-Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/feedback-screenshot/README.md b/packages/feedback-screenshot/README.md
deleted file mode 100644
index 04caefe7ac31..000000000000
--- a/packages/feedback-screenshot/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-<p align="center">
-  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
-    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
-  </a>
-</p>
-
-# Sentry Integration for Feedback with Screenshot
-
-This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued
-at any time. Please reach out on [GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have
-any feedback/concerns.
-
-To view Feedback in Sentry, your
-[Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
-
-## Installation
-
-Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for
-installation instructions.
-
-## Configuration
-
-The Feedback integration is highly customizable, please read the
-[official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the
-most up-to-date configuration options.
diff --git a/packages/feedback-screenshot/jest.config.js b/packages/feedback-screenshot/jest.config.js
deleted file mode 100644
index cd02790794a7..000000000000
--- a/packages/feedback-screenshot/jest.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const baseConfig = require('../../jest/jest.config.js');
-
-module.exports = {
-  ...baseConfig,
-  testEnvironment: 'jsdom',
-};
diff --git a/packages/feedback-screenshot/package.json b/packages/feedback-screenshot/package.json
deleted file mode 100644
index 9c4df9be8e26..000000000000
--- a/packages/feedback-screenshot/package.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-  "name": "@sentry-internal/feedback-screenshot",
-  "version": "8.0.0-alpha.2",
-  "description": "Sentry SDK integration for user feedback screenshots",
-  "repository": "git://github.com/getsentry/sentry-javascript.git",
-  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
-  "author": "Sentry",
-  "license": "MIT",
-  "engines": {
-    "node": ">=12"
-  },
-  "files": [
-    "cjs",
-    "esm",
-    "types",
-    "types-ts3.8"
-  ],
-  "main": "build/npm/cjs/index.js",
-  "module": "build/npm/esm/index.js",
-  "types": "build/npm/types/index.d.ts",
-  "typesVersions": {
-    "<4.9": {
-      "build/npm/types/index.d.ts": [
-        "build/npm/types-ts3.8/index.d.ts"
-      ]
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@sentry/core": "8.0.0-alpha.2",
-    "@sentry/types": "8.0.0-alpha.2",
-    "@sentry/utils": "8.0.0-alpha.2",
-    "preact": "^10.19.4",
-    "preact-compat": "^3.19.0"
-  },
-  "scripts": {
-    "build": "run-p build:transpile build:types build:bundle",
-    "build:transpile": "rollup -c rollup.npm.config.mjs",
-    "build:bundle": "rollup -c rollup.bundle.config.mjs",
-    "build:dev": "run-p build:transpile build:types",
-    "build:types": "run-s build:types:core build:types:downlevel",
-    "build:types:core": "tsc -p tsconfig.types.json",
-    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
-    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
-    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
-    "build:transpile:watch": "yarn build:transpile --watch",
-    "build:bundle:watch": "yarn build:bundle --watch",
-    "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
-    "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf build sentry-feedback-*.tgz",
-    "fix": "eslint . --format stylish --fix",
-    "lint": "eslint . --format stylish",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
-  },
-  "volta": {
-    "extends": "../../package.json"
-  },
-  "sideEffects": false
-}
diff --git a/packages/feedback-screenshot/rollup.bundle.config.mjs b/packages/feedback-screenshot/rollup.bundle.config.mjs
deleted file mode 100644
index 6bae4e9c57c9..000000000000
--- a/packages/feedback-screenshot/rollup.bundle.config.mjs
+++ /dev/null
@@ -1,17 +0,0 @@
-import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
-
-const baseBundleConfig = makeBaseBundleConfig({
-  bundleType: 'addon',
-  entrypoints: ['src/index.ts'],
-  jsVersion: 'es6',
-  licenseTitle: '@sentry-internal/feedback-screenshot',
-  outputFileBase: () => 'bundles/feedback-screenshot',
-  sucrase: {
-    jsxPragma: 'h',
-    jsxFragmentPragma: 'Fragment',
-  }
-});
-
-const builds = makeBundleConfigVariants(baseBundleConfig);
-
-export default builds;
diff --git a/packages/feedback-screenshot/rollup.npm.config.mjs b/packages/feedback-screenshot/rollup.npm.config.mjs
deleted file mode 100644
index b659c384eff5..000000000000
--- a/packages/feedback-screenshot/rollup.npm.config.mjs
+++ /dev/null
@@ -1,20 +0,0 @@
-import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
-
-export default makeNPMConfigVariants(
-  makeBaseNPMConfig({
-    hasBundles: true,
-    packageSpecificConfig: {
-      output: {
-        // set exports to 'named' or 'auto' so that rollup doesn't warn
-        exports: 'named',
-        // set preserveModules to false because for Replay we actually want
-        // to bundle everything into one file.
-        preserveModules: false,
-      },
-    },
-    sucrase: {
-      jsxPragma: 'h',
-      jsxFragmentPragma: 'Fragment',
-    }
-  }),
-);
diff --git a/packages/feedback-screenshot/scripts/craft-pre-release.sh b/packages/feedback-screenshot/scripts/craft-pre-release.sh
deleted file mode 100644
index bae7c3246cdb..000000000000
--- a/packages/feedback-screenshot/scripts/craft-pre-release.sh
+++ /dev/null
@@ -1,8 +0,0 @@
-#!/bin/bash
-set -eux
-OLD_VERSION="${1}"
-NEW_VERSION="${2}"
-
-# Do not tag and commit changes made by "npm version"
-export npm_config_git_tag_version=false
-npm version "${NEW_VERSION}"
diff --git a/packages/feedback-screenshot/src/index.ts b/packages/feedback-screenshot/src/index.ts
deleted file mode 100644
index ddbdaca3bbde..000000000000
--- a/packages/feedback-screenshot/src/index.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export {
-  // eslint-disable-next-line deprecation/deprecation
-  FeedbackScreenshot,
-  feedbackScreenshotIntegration,
-} from './screenshot';
-export type { FeedbackScreenshotIntegrationOptions } from './screenshot';
-
-console.log('screenshot 11');
diff --git a/packages/feedback-screenshot/src/screenshot.tsx b/packages/feedback-screenshot/src/screenshot.tsx
deleted file mode 100644
index 3cdd91986de9..000000000000
--- a/packages/feedback-screenshot/src/screenshot.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { convertIntegrationFnToClass, defineIntegration } from '@sentry/core';
-import type { Integration, IntegrationClass, IntegrationFn } from '@sentry/types';
-import { ScreenshotButton } from './screenshotButton';
-import { GLOBAL_OBJ } from '@sentry/utils';
-import { h, render } from 'preact';
-
-interface FeedbackScreenshotOptions {
-  buttonRef: HTMLDivElement;
-  croppingRef: HTMLDivElement;
-  props: {
-    screenshotImage: HTMLCanvasElement | null;
-    setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
-  };
-}
-
-export interface FeedbackScreenshotIntegrationOptions {
-  buttonRef: HTMLDivElement;
-  croppingRef: HTMLDivElement;
-  props: {
-    screenshotImage: HTMLCanvasElement | null;
-    setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
-  };
-}
-
-const INTEGRATION_NAME = 'FeedbackScreenshot';
-const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
-
-/** Exported only for type safe tests. */
-export const _feedbackScreenshotIntegration = ((options: FeedbackScreenshotOptions) => {
-  return {
-    name: INTEGRATION_NAME,
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    setupOnce() {},
-    getOptions(): FeedbackScreenshotIntegrationOptions {
-      return {
-        buttonRef: options.buttonRef || WINDOW.document.createElement('div'),
-        croppingRef: options.croppingRef || WINDOW.document.createElement('div'),
-        props: {
-          screenshotImage: options.props.screenshotImage,
-          setScreenshotImage: options.props.setScreenshotImage,
-        },
-      };
-    },
-    renderScreenshotWidget: (options: FeedbackScreenshotOptions) => {
-      return render(
-        <ScreenshotButton
-          croppingRef={options.croppingRef}
-          screenshotImage={options.props.screenshotImage}
-          setScreenshotImage={options.props.setScreenshotImage}
-        />,
-        options.buttonRef,
-      );
-    },
-  };
-}) satisfies IntegrationFn;
-
-/**
- * Add this in addition to `feedbackIntegration()` to allow your users to provide screen shots with their ad-hoc feedback.
- */
-export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration);
-
-/**
- * @deprecated Use `feedbackScreenshotIntegration()` instead
- */
-// eslint-disable-next-line deprecation/deprecation
-export const FeedbackScreenshot = convertIntegrationFnToClass(
-  INTEGRATION_NAME,
-  feedbackScreenshotIntegration,
-) as IntegrationClass<
-  Integration & {
-    getOptions: () => FeedbackScreenshotIntegrationOptions;
-    renderScreenshotWidget: () => void;
-    renderScreenshotButton: () => void;
-  }
->;
diff --git a/packages/feedback-screenshot/src/screenshotButton.tsx b/packages/feedback-screenshot/src/screenshotButton.tsx
deleted file mode 100644
index a2e853f2567d..000000000000
--- a/packages/feedback-screenshot/src/screenshotButton.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import { h, render } from 'preact';
-import { useState, useCallback, useEffect } from 'preact/hooks';
-import { useTakeScreenshot } from './useTakeScreenshot';
-import type { VNode } from 'preact';
-import { ScreenshotWidget } from './screenshotWidget';
-
-type Props = {
-  croppingRef: HTMLDivElement;
-  screenshotImage: HTMLCanvasElement | null;
-  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
-};
-
-export function ScreenshotButton({ croppingRef, screenshotImage, setScreenshotImage }: Props): VNode {
-  const [clicked, setClicked] = useState(false);
-  const { isInProgress, takeScreenshot } = useTakeScreenshot();
-
-  const handleClick = useCallback(async () => {
-    if (!clicked) {
-      const image = await takeScreenshot();
-      setScreenshotImage(image);
-      render(<ScreenshotWidget screenshotImage={image} setScreenshotImage={setScreenshotImage} />, croppingRef);
-    } else {
-      setScreenshotImage(null);
-      render(null, croppingRef);
-    }
-    setClicked(prev => !prev);
-  }, [clicked]);
-
-  return (
-    <label htmlFor="screenshot" className="form__label">
-      <span className="form__label__text">Screenshot</span>
-      <button class="btn btn--default" type="button" onClick={handleClick}>
-        {clicked ? 'Remove' : 'Add'}
-      </button>
-    </label>
-  );
-}
diff --git a/packages/feedback-screenshot/src/screenshotWidget.tsx b/packages/feedback-screenshot/src/screenshotWidget.tsx
deleted file mode 100644
index dfc209b2c5c6..000000000000
--- a/packages/feedback-screenshot/src/screenshotWidget.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import type { VNode } from 'preact';
-import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
-import { GLOBAL_OBJ } from '@sentry/utils';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import { h } from 'preact';
-
-// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
-// prevents the browser package from being bundled in the CDN bundle, and avoids a
-// circular dependency between the browser and feedback packages
-export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
-
-type Props = {
-  screenshotImage: HTMLCanvasElement | null;
-  setScreenshotImage: (screenshot: HTMLCanvasElement | null) => void;
-};
-
-interface Point {
-  x: number;
-  y: number;
-}
-
-export interface Rect {
-  height: number;
-  width: number;
-  x: number;
-  y: number;
-}
-
-const constructRect = (start: Point, end: Point) => {
-  return {
-    x: Math.min(start.x, end.x),
-    y: Math.min(start.y, end.y),
-    width: Math.abs(start.x - end.x),
-    height: Math.abs(start.y - end.y),
-  };
-};
-
-const getCanvasRenderSize = (width: number, height: number) => {
-  const maxWidth = WINDOW.innerWidth;
-  const maxHeight = WINDOW.innerHeight;
-
-  if (width > maxWidth) {
-    height = (maxWidth / width) * height;
-    width = maxWidth;
-  }
-
-  if (height > maxHeight) {
-    width = (maxHeight / height) * width;
-    height = maxHeight;
-  }
-
-  return { width, height };
-};
-
-export function ScreenshotWidget({ screenshotImage, setScreenshotImage }: Props): VNode | null {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const imageRef = useRef<HTMLCanvasElement>(null);
-  const [rectStart, setRectStart] = useState({ x: 0, y: 0 });
-  const [rectEnd, setRectEnd] = useState({ x: 0, y: 0 });
-  const [confirmCrop, setConfirmCrop] = useState(false);
-  const [image, setImage] = useState<HTMLCanvasElement | null>(screenshotImage);
-
-  useEffect(() => {
-    const imageCanvas = imageRef.current;
-    const ctx = imageCanvas?.getContext('2d');
-    const img = new Image();
-
-    if (image) {
-      img.src = image.toDataURL();
-      const renderSize = getCanvasRenderSize(image.width, image.height);
-
-      img.onload = () => {
-        if (imageCanvas && ctx) {
-          imageCanvas.width = img.width;
-          imageCanvas.height = img.height;
-          setCanvasSize(imageCanvas);
-          ctx.drawImage(img, 0, 0);
-        }
-      };
-
-      const canvas = canvasRef.current;
-      if (canvas) {
-        canvas.width = renderSize.width;
-        canvas.height = renderSize.height;
-        setRectStart({ x: 0, y: 0 });
-        setCanvasSize(canvas);
-      }
-    }
-  }, [image]);
-
-  function setCanvasSize(canvas: HTMLCanvasElement) {
-    if (image) {
-      const renderSize = getCanvasRenderSize(image.width, image.height);
-
-      canvas.style.width = `${renderSize.width}px`;
-      canvas.style.height = `${renderSize.height}px`;
-      canvas.style.top = '0px';
-      canvas.style.left = '0px';
-
-      setRectEnd({ x: renderSize.width, y: renderSize.height });
-    }
-  }
-
-  function refreshCanvas() {
-    const canvas = canvasRef.current;
-    const ctx = canvas?.getContext('2d');
-    if (canvas && ctx) {
-      ctx.clearRect(0, 0, canvas.width, canvas.height);
-
-      const rect = constructRect(rectStart, rectEnd);
-
-      // draw gray overlay around the selection
-      ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(0, 0, canvas.width, rect.y);
-      ctx.fillRect(0, rect.y, rect.x, rect.height);
-      ctx.fillRect(rect.x + rect.width, rect.y, canvas.width, rect.height);
-      ctx.fillRect(0, rect.y + rect.height, canvas.width, canvas.height);
-
-      // draw selection border
-      ctx.strokeStyle = '#ff0000';
-      ctx.lineWidth = 6;
-      ctx.strokeRect(rect.x, rect.y, rect.width, rect.height);
-    }
-  }
-
-  const makeHandleMouseMove = useCallback((corner: string) => {
-    return function (e: MouseEvent) {
-      switch (corner) {
-        case 'topleft':
-          setRectStart({
-            x: Math.floor(e.offsetX),
-            y: Math.floor(e.offsetY),
-          });
-          break;
-        case 'topright':
-          setRectStart(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
-          setRectEnd(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
-          break;
-        case 'bottomleft':
-          setRectStart(prev => ({ ...prev, x: Math.floor(e.offsetX) }));
-          setRectEnd(prev => ({ ...prev, y: Math.floor(e.offsetY) }));
-          break;
-        case 'bottomright':
-          setRectEnd({
-            x: Math.floor(e.offsetX),
-            y: Math.floor(e.offsetY),
-          });
-          break;
-      }
-    };
-  }, []);
-
-  function onGrabButton(e: Event, corner: string) {
-    setConfirmCrop(false);
-    const handleMouseMove = makeHandleMouseMove(corner);
-    const handleMouseUp = () => {
-      canvasRef.current?.removeEventListener('mousemove', handleMouseMove);
-      document?.removeEventListener('mouseup', handleMouseUp);
-      setConfirmCrop(true);
-    };
-
-    document?.addEventListener('mouseup', handleMouseUp);
-    canvasRef.current?.addEventListener('mousemove', handleMouseMove);
-  }
-
-  useEffect(() => {
-    refreshCanvas();
-  }, [rectStart, rectEnd]);
-
-  function submit() {
-    const image = imageRef.current;
-    const rect = constructRect(rectStart, rectEnd);
-
-    const cutoutCanvas = document.createElement('canvas');
-    cutoutCanvas.width = rect.width;
-    cutoutCanvas.height = rect.height;
-
-    const cutoutCtx = cutoutCanvas.getContext('2d');
-    if (cutoutCtx && image) {
-      cutoutCtx.drawImage(
-        image,
-        (rect.x / canvasRef.current!.width) * image.width,
-        (rect.y / canvasRef.current!.height) * image.height,
-        (rect.width / canvasRef.current!.width) * image.width,
-        (rect.height / canvasRef.current!.height) * image.height,
-        0,
-        0,
-        rect.width,
-        rect.height,
-      );
-    }
-
-    setScreenshotImage(cutoutCanvas);
-    setImage(cutoutCanvas);
-  }
-
-  return (
-    <div style="padding-right: 16px; position:relative;">
-      <canvas ref={imageRef}></canvas>
-      <canvas style={{ position: 'absolute' }} ref={canvasRef}></canvas>
-      <CropCorner
-        left={rectStart.x}
-        top={rectStart.y}
-        onGrabButton={onGrabButton}
-        corner="topleft"
-        borderWidth="5px 0px 0px 5px"
-      ></CropCorner>
-      <CropCorner
-        left={rectEnd.x - 30}
-        top={rectStart.y}
-        onGrabButton={onGrabButton}
-        corner="topright"
-        borderWidth="5px 5px 0px 0px"
-      ></CropCorner>
-      <CropCorner
-        left={rectStart.x}
-        top={rectEnd.y - 30}
-        onGrabButton={onGrabButton}
-        corner="bottomleft"
-        borderWidth="0px 0px 5px 5px"
-      ></CropCorner>
-      <CropCorner
-        left={rectEnd.x - 30}
-        top={rectEnd.y - 30}
-        onGrabButton={onGrabButton}
-        corner="bottomright"
-        borderWidth="0px 5px 5px 0px"
-      ></CropCorner>
-      <div
-        style={{
-          position: 'absolute',
-          left: rectEnd.x,
-          top: rectEnd.y,
-          display: confirmCrop ? 'inline' : 'none',
-        }}
-      >
-        <button
-          onClick={e => {
-            e.preventDefault();
-            setRectStart({ x: 0, y: 0 });
-            setConfirmCrop(false);
-          }}
-        >
-          Cancel
-        </button>
-        <button
-          style={{
-            background: 'purple',
-          }}
-          onClick={e => {
-            e.preventDefault();
-            submit();
-            setConfirmCrop(false);
-          }}
-        >
-          Submit
-        </button>
-      </div>
-    </div>
-  );
-}
-
-function CropCorner({
-  top,
-  left,
-  corner,
-  borderWidth,
-  onGrabButton,
-}: {
-  top: number;
-  left: number;
-  corner: string;
-  borderWidth: string;
-  onGrabButton: (e: Event, corner: string) => void;
-}): VNode {
-  return (
-    <button
-      style={{
-        width: 30,
-        height: 30,
-        position: 'absolute',
-        top: top,
-        left: left,
-        background: 'none',
-        borderWidth: borderWidth,
-      }}
-      onMouseDown={e => {
-        e.preventDefault();
-        onGrabButton(e, corner);
-      }}
-      onClick={e => {
-        e.preventDefault();
-      }}
-    ></button>
-  );
-}
diff --git a/packages/feedback-screenshot/src/useTakeScreenshot.tsx b/packages/feedback-screenshot/src/useTakeScreenshot.tsx
deleted file mode 100644
index 09fffc535a9e..000000000000
--- a/packages/feedback-screenshot/src/useTakeScreenshot.tsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import { useCallback, useState } from 'preact/hooks';
-import { h } from 'preact';
-
-const takeScreenshot = async (): Promise<HTMLCanvasElement> => {
-  const stream = await navigator.mediaDevices.getDisplayMedia({
-    video: {
-      width: window.innerWidth * window.devicePixelRatio,
-      height: window.innerHeight * window.devicePixelRatio,
-    },
-    audio: false,
-    preferCurrentTab: true,
-    surfaceSwitching: 'exclude',
-  } as any);
-  const videoTrack = stream.getVideoTracks()[0];
-  const canvas = document.createElement('canvas');
-  const context = canvas.getContext('2d');
-  if (!context) {
-    throw new Error('Could not get canvas context');
-  }
-  const video = document.createElement('video');
-  video.srcObject = new MediaStream([videoTrack]);
-
-  await new Promise<void>(resolve => {
-    video.onloadedmetadata = () => {
-      canvas.width = video.videoWidth;
-      canvas.height = video.videoHeight;
-      context.drawImage(video, 0, 0);
-      stream.getTracks().forEach(track => track.stop());
-      resolve();
-    };
-    video.play();
-  });
-
-  return canvas;
-};
-
-export const useTakeScreenshot = () => {
-  const [isInProgress, setIsInProgress] = useState(false);
-
-  const takeScreenshotCallback = useCallback(async (): Promise<HTMLCanvasElement> => {
-    setIsInProgress(true);
-    let image: HTMLCanvasElement | null = null;
-    const style = document.createElement('style');
-    style.innerHTML = '.dialog { display: none; }';
-    document.getElementById('sentry-feedback')?.shadowRoot?.appendChild(style);
-    try {
-      image = await takeScreenshot();
-      document.getElementById('sentry-feedback')?.shadowRoot?.removeChild(style);
-    } catch (error) {
-      setIsInProgress(false);
-      document.getElementById('sentry-feedback')?.shadowRoot?.removeChild(style);
-      throw error;
-    }
-    setIsInProgress(false);
-    return image;
-  }, []);
-
-  return { isInProgress, takeScreenshot: takeScreenshotCallback };
-};
diff --git a/packages/feedback-screenshot/tsconfig.json b/packages/feedback-screenshot/tsconfig.json
deleted file mode 100644
index b71a402a0249..000000000000
--- a/packages/feedback-screenshot/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "module": "esnext",
-
-   /* Preact Config */
-		"jsx": "react-jsx",
-		"jsxImportSource": "preact",
-		"skipLibCheck": true,
-		"baseUrl": "./",
-		"paths": {
-			"react": ["./node_modules/preact/compat/"],
-			"react-dom": ["./node_modules/preact/compat/"]
-		}
-  },
-  "include": ["src/**/*.ts"]
-}
diff --git a/packages/feedback-screenshot/tsconfig.test.json b/packages/feedback-screenshot/tsconfig.test.json
deleted file mode 100644
index ad87caa06c48..000000000000
--- a/packages/feedback-screenshot/tsconfig.test.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-
-  "include": ["test/**/*.ts", "jest.config.ts", "jest.setup.ts"],
-
-  "compilerOptions": {
-    "types": ["node", "jest"],
-    "esModuleInterop": true,
-    "allowJs": true,
-    "noImplicitAny": true,
-    "noImplicitThis": false,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": false
-  }
-}
diff --git a/packages/feedback-screenshot/tsconfig.types.json b/packages/feedback-screenshot/tsconfig.types.json
deleted file mode 100644
index 374fd9bc9364..000000000000
--- a/packages/feedback-screenshot/tsconfig.types.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-
-  "compilerOptions": {
-    "declaration": true,
-    "declarationMap": true,
-    "emitDeclarationOnly": true,
-    "outDir": "build/npm/types"
-  }
-}

From ce0be69fdac10d5190b5fcba7386c7cf85d26d69 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 12 Mar 2024 01:32:51 -0400
Subject: [PATCH 41/54] don't allow crop stuff to go outside of the image

---
 .../components/ScreenshotEditor.tsx           | 186 +++++++++---------
 1 file changed, 96 insertions(+), 90 deletions(-)

diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
index 32b36111eea7..e01c3942572b 100644
--- a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
@@ -59,36 +59,38 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     const styles = useMemo(() => ({ __html: createScreenshotInputStyles().innerText }), []);
 
     const canvasContainerRef = useRef<HTMLDivElement>(null);
+    const cropContainerRef = useRef<HTMLDivElement>(null);
     const croppingRef = useRef<HTMLCanvasElement>(null);
     const [croppingRect, setCroppingRect] = useState<Box>({ startx: 0, starty: 0, endx: 0, endy: 0 });
     const [confirmCrop, setConfirmCrop] = useState(false);
 
     useEffect(() => {
-      WINDOW.addEventListener('resize', handleResize, false);
+      WINDOW.addEventListener('resize', resizeCropper, false);
     }, []);
 
-    const handleResize = useCallback(() => {
-      setCroppingRect(containedImage(imageBuffer));
-      resizeCropper();
-    }, []);
-
-    useEffect(() => {
-      const container = canvasContainerRef.current;
-      container && container.appendChild(imageBuffer);
-      setCroppingRect(containedImage(imageBuffer));
-      resizeCropper();
-    }, [imageBuffer]);
-
     function resizeCropper(): void {
       const cropper = croppingRef.current;
-      if (cropper && canvasContainerRef.current) {
-        cropper.width = canvasContainerRef.current.clientWidth;
-        cropper.height = canvasContainerRef.current.clientHeight;
-        cropper.style.width = `${canvasContainerRef.current.clientWidth}px`;
-        cropper.style.height = `${canvasContainerRef.current.clientHeight}px`;
+      const imageDimensions = constructRect(containedImage(imageBuffer));
+      if (cropper) {
+        cropper.width = imageDimensions.width;
+        cropper.height = imageDimensions.height;
       }
+
+      const cropButton = cropContainerRef.current;
+      if (cropButton) {
+        cropButton.style.width = `${imageDimensions.width}px`;
+        cropButton.style.height = `${imageDimensions.height}px`;
+        cropButton.style.left = `${imageDimensions.x}px`;
+        cropButton.style.top = `${imageDimensions.y}px`;
+      }
+
+      setCroppingRect({ startx: 0, starty: 0, endx: imageDimensions.width, endy: imageDimensions.height });
     }
 
+    useEffect(() => {
+      refreshCroppingBox();
+    }, [croppingRect]);
+
     function refreshCroppingBox(): void {
       const cropper = croppingRef.current;
       if (!cropper) {
@@ -99,15 +101,14 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       if (!ctx) {
         return;
       }
-
-      ctx.clearRect(0, 0, imageBuffer.width, imageBuffer.height);
-
       const imageDimensions = constructRect(containedImage(imageBuffer));
       const croppingBox = constructRect(croppingRect);
 
+      ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);
+
       // draw gray overlay around the selection
       ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
-      ctx.fillRect(imageDimensions.x, imageDimensions.y, imageDimensions.width, imageDimensions.height);
+      ctx.fillRect(0, 0, imageDimensions.width, imageDimensions.height);
       ctx.clearRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
 
       // draw selection border
@@ -122,29 +123,29 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
           case 'topleft':
             setCroppingRect(prev => ({
               ...prev,
-              startx: Math.floor(e.offsetX),
-              starty: Math.floor(e.offsetY),
+              startx: e.offsetX,
+              starty: e.offsetY,
             }));
             break;
           case 'topright':
             setCroppingRect(prev => ({
               ...prev,
-              endx: Math.floor(e.offsetX),
-              starty: Math.floor(e.offsetY),
+              endx: e.offsetX,
+              starty: e.offsetY,
             }));
             break;
           case 'bottomleft':
             setCroppingRect(prev => ({
               ...prev,
-              startx: Math.floor(e.offsetX),
-              endy: Math.floor(e.offsetY),
+              startx: e.offsetX,
+              endy: e.offsetY,
             }));
             break;
           case 'bottomright':
             setCroppingRect(prev => ({
               ...prev,
-              endx: Math.floor(e.offsetX),
-              endy: Math.floor(e.offsetY),
+              endx: e.offsetX,
+              endy: e.offsetY,
             }));
             break;
         }
@@ -164,10 +165,6 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       croppingRef.current && croppingRef.current.addEventListener('mousemove', handleMouseMove);
     }
 
-    useEffect(() => {
-      refreshCroppingBox();
-    }, [croppingRect]);
-
     function submit(): void {
       const cutoutCanvas = DOCUMENT.createElement('canvas');
       const imageBox = constructRect(containedImage(imageBuffer));
@@ -179,8 +176,8 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       if (cutoutCtx && imageBuffer) {
         cutoutCtx.drawImage(
           imageBuffer,
-          ((croppingBox.x - imageBox.x) / imageBox.width) * imageBuffer.width,
-          ((croppingBox.y - imageBox.y) / imageBox.height) * imageBuffer.height,
+          (croppingBox.x / imageBox.width) * imageBuffer.width,
+          (croppingBox.y / imageBox.height) * imageBuffer.height,
           (croppingBox.width / imageBox.width) * imageBuffer.width,
           (croppingBox.height / imageBox.height) * imageBuffer.height,
           0,
@@ -196,7 +193,6 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
         imageBuffer.width = cutoutCanvas.width;
         imageBuffer.height = cutoutCanvas.height;
         ctx.drawImage(cutoutCanvas, 0, 0);
-        setCroppingRect(containedImage(imageBuffer));
         resizeCropper();
       }
     }
@@ -219,7 +215,8 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       ),
       onAfterScreenshot: useCallback(() => {
         dialog.el.style.display = 'block';
-        setCroppingRect(containedImage(imageBuffer));
+        const container = canvasContainerRef.current;
+        container && container.appendChild(imageBuffer);
         resizeCropper();
       }, []),
       onError: useCallback(error => {
@@ -232,60 +229,69 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       <div class="editor">
         <style dangerouslySetInnerHTML={styles} />
         <div class="canvasContainer" ref={canvasContainerRef}>
-          <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
-          <CropCorner
-            left={croppingRect.startx - 3}
-            top={croppingRect.starty - 3}
-            onGrabButton={onGrabButton}
-            corner="topleft"
-          ></CropCorner>
-          <CropCorner
-            left={croppingRect.endx - 30 + 3}
-            top={croppingRect.starty - 3}
-            onGrabButton={onGrabButton}
-            corner="topright"
-          ></CropCorner>
-          <CropCorner
-            left={croppingRect.startx - 3}
-            top={croppingRect.endy - 30 + 3}
-            onGrabButton={onGrabButton}
-            corner="bottomleft"
-          ></CropCorner>
-          <CropCorner
-            left={croppingRect.endx - 30 + 3}
-            top={croppingRect.endy - 30 + 3}
-            onGrabButton={onGrabButton}
-            corner="bottomright"
-          ></CropCorner>
-          <div
-            style={{
-              position: 'absolute',
-              left: croppingRect.endx - 191,
-              top: croppingRect.endy + 8,
-              display: confirmCrop ? 'flex' : 'none',
-            }}
-            class="crop-btn-group"
-          >
-            <button
-              onClick={e => {
-                e.preventDefault();
-                setCroppingRect(containedImage(imageBuffer));
-                setConfirmCrop(false);
-              }}
-              class="btn btn--default"
-            >
-              Cancel
-            </button>
-            <button
-              onClick={e => {
-                e.preventDefault();
-                submit();
-                setConfirmCrop(false);
+          <div class="cropButtonContainer" style={{ position: 'absolute' }} ref={cropContainerRef}>
+            <canvas style={{ position: 'absolute' }} ref={croppingRef}></canvas>
+            <CropCorner
+              left={croppingRect.startx}
+              top={croppingRect.starty}
+              onGrabButton={onGrabButton}
+              corner="topleft"
+            ></CropCorner>
+            <CropCorner
+              left={croppingRect.endx - 30}
+              top={croppingRect.starty}
+              onGrabButton={onGrabButton}
+              corner="topright"
+            ></CropCorner>
+            <CropCorner
+              left={croppingRect.startx}
+              top={croppingRect.endy - 30}
+              onGrabButton={onGrabButton}
+              corner="bottomleft"
+            ></CropCorner>
+            <CropCorner
+              left={croppingRect.endx - 30}
+              top={croppingRect.endy - 30}
+              onGrabButton={onGrabButton}
+              corner="bottomright"
+            ></CropCorner>
+            <div
+              style={{
+                position: 'absolute',
+                left: croppingRect.endx - 191,
+                top: croppingRect.endy + 8,
+                display: confirmCrop ? 'flex' : 'none',
               }}
-              class="btn btn--primary"
+              class="crop-btn-group"
             >
-              Confirm
-            </button>
+              <button
+                onClick={e => {
+                  e.preventDefault();
+                  if (croppingRef.current) {
+                    setCroppingRect({
+                      startx: 0,
+                      starty: 0,
+                      endx: croppingRef.current.width,
+                      endy: croppingRef.current.height,
+                    });
+                  }
+                  setConfirmCrop(false);
+                }}
+                class="btn btn--default"
+              >
+                Cancel
+              </button>
+              <button
+                onClick={e => {
+                  e.preventDefault();
+                  submit();
+                  setConfirmCrop(false);
+                }}
+                class="btn btn--primary"
+              >
+                Confirm
+              </button>
+            </div>
           </div>
         </div>
       </div>

From c106fd6e52c1998722f29dd05d7ae8921ce18338 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Tue, 12 Mar 2024 09:01:26 -0700
Subject: [PATCH 42/54] rename feedback2 to feedback

---
 .size-limit.js                                |  17 +-
 package.json                                  |   1 -
 packages/feedback/.eslintrc.js                |  23 +-
 packages/feedback/package.json                |  30 +-
 packages/feedback/rollup.bundle.config.mjs    |  23 +-
 packages/feedback/rollup.npm.config.mjs       |   4 +
 packages/feedback/src/constants.ts            |  76 ----
 .../src/constants/index.ts                    |   0
 .../src/constants/theme.ts                    |   0
 .../src/core/components/Actor.css.ts          |   0
 .../src/core/components/Actor.ts              |   0
 .../src/core/components/FeedbackIcon.ts       |   0
 .../src/core/createMainStyles.ts              |   0
 .../src/core/integration.ts                   |  18 +-
 .../src/core/sendFeedback.ts                  |   0
 packages/feedback/src/index.ts                |   9 +-
 packages/feedback/src/integration.ts          | 385 ------------------
 .../src/modal/components/Dialog.css.ts        |   0
 .../src/modal/components/DialogContainer.tsx  |   0
 .../src/modal/components/DialogContent.tsx    |   0
 .../src/modal/components/DialogHeader.tsx     |   0
 .../src/modal/components/Form.tsx             |   0
 .../src/modal/components/Icon.ts              |   0
 .../src/modal/components/SentryLogo.ts        |   0
 .../src/modal/components/SuccessIcon.ts       |   0
 .../src/modal/createDialog.tsx                |   4 +-
 .../src/modal/integration.ts                  |  10 +-
 .../components/ScreenshotEditor.tsx           |   0
 .../components/ScreenshotInput.css.ts         |   0
 .../components/useContainerSize.tsx           |   0
 .../components/useResizeObserver.tsx          |   0
 .../components/useTakeScreenshot.tsx          |   0
 .../src/screenshot/createInput.ts             |   0
 .../src/screenshot/integration.ts             |  10 +-
 packages/feedback/src/sendFeedback.ts         |  38 --
 .../src/types/config.ts                       |   0
 .../{feedback2 => feedback}/src/types/form.ts |   0
 packages/feedback/src/types/index.ts          | 359 +++-------------
 .../src/types/theme.ts                        |   0
 .../feedback/src/{ => util}/debug-build.ts    |   0
 .../feedback/src/util/handleFeedbackSubmit.ts |  44 --
 .../src/util/isScreenshotSupported.ts         |   0
 packages/feedback/src/util/mergeOptions.ts    |  22 +-
 .../feedback/src/util/prepareFeedbackEvent.ts |  11 +-
 .../feedback/src/util/sendFeedbackRequest.ts  | 125 ------
 .../src/util/validate.ts                      |   0
 packages/feedback/src/widget/Actor.css.ts     |  54 ---
 packages/feedback/src/widget/Actor.ts         |  63 ---
 packages/feedback/src/widget/Dialog.css.ts    | 200 ---------
 packages/feedback/src/widget/Dialog.ts        | 162 --------
 packages/feedback/src/widget/Form.ts          | 239 -----------
 packages/feedback/src/widget/Icon.ts          |  57 ---
 packages/feedback/src/widget/Logo.ts          |  59 ---
 packages/feedback/src/widget/Main.css.ts      |  83 ----
 packages/feedback/src/widget/SubmitButton.ts  |  27 --
 packages/feedback/src/widget/SuccessIcon.ts   |  63 ---
 .../feedback/src/widget/SuccessMessage.ts     |  44 --
 .../feedback/src/widget/createShadowHost.ts   |  36 --
 packages/feedback/src/widget/createWidget.ts  | 298 --------------
 .../feedback/src/widget/util/createElement.ts |  55 ---
 packages/feedback/test/index.ts               |   0
 packages/feedback/test/integration.test.ts    | 128 ------
 packages/feedback/test/sendFeedback.test.ts   |  44 --
 .../unit/util/prepareFeedbackEvent.test.ts    |  70 ----
 packages/feedback/test/utils/TestClient.ts    |  43 --
 packages/feedback/test/utils/mockSdk.ts       |  53 ---
 packages/feedback/test/widget/Actor.test.ts   |  42 --
 packages/feedback/test/widget/Dialog.test.ts  |  97 -----
 packages/feedback/test/widget/Form.test.ts    | 139 -------
 .../feedback/test/widget/SubmitButton.test.ts |  22 -
 .../test/widget/SuccessMessage.test.ts        |  32 --
 .../feedback/test/widget/createWidget.test.ts | 359 ----------------
 packages/feedback/tsconfig.json               |  14 +-
 packages/feedback2/.eslintignore              |   2 -
 packages/feedback2/.eslintrc.js               |  25 --
 packages/feedback2/.gitignore                 |   4 -
 packages/feedback2/LICENSE                    |  14 -
 packages/feedback2/README.md                  |  20 -
 packages/feedback2/jest.config.js             |   6 -
 packages/feedback2/package.json               |  64 ---
 packages/feedback2/rollup.bundle.config.mjs   |  15 -
 packages/feedback2/rollup.npm.config.mjs      |  20 -
 packages/feedback2/src/index.ts               |   7 -
 packages/feedback2/src/types/index.ts         | 101 -----
 packages/feedback2/src/util/debug-build.ts    |   8 -
 packages/feedback2/src/util/mergeOptions.ts   |  42 --
 .../src/util/prepareFeedbackEvent.ts          |  43 --
 .../feedback2/src/util/setAttributesNS.ts     |   9 -
 packages/feedback2/tsconfig.json              |  17 -
 packages/feedback2/tsconfig.test.json         |  15 -
 packages/feedback2/tsconfig.types.json        |  10 -
 91 files changed, 170 insertions(+), 3944 deletions(-)
 delete mode 100644 packages/feedback/src/constants.ts
 rename packages/{feedback2 => feedback}/src/constants/index.ts (100%)
 rename packages/{feedback2 => feedback}/src/constants/theme.ts (100%)
 rename packages/{feedback2 => feedback}/src/core/components/Actor.css.ts (100%)
 rename packages/{feedback2 => feedback}/src/core/components/Actor.ts (100%)
 rename packages/{feedback2 => feedback}/src/core/components/FeedbackIcon.ts (100%)
 rename packages/{feedback2 => feedback}/src/core/createMainStyles.ts (100%)
 rename packages/{feedback2 => feedback}/src/core/integration.ts (93%)
 rename packages/{feedback2 => feedback}/src/core/sendFeedback.ts (100%)
 delete mode 100644 packages/feedback/src/integration.ts
 rename packages/{feedback2 => feedback}/src/modal/components/Dialog.css.ts (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/DialogContainer.tsx (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/DialogContent.tsx (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/DialogHeader.tsx (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/Form.tsx (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/Icon.ts (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/SentryLogo.ts (100%)
 rename packages/{feedback2 => feedback}/src/modal/components/SuccessIcon.ts (100%)
 rename packages/{feedback2 => feedback}/src/modal/createDialog.tsx (95%)
 rename packages/{feedback2 => feedback}/src/modal/integration.ts (54%)
 rename packages/{feedback2 => feedback}/src/screenshot/components/ScreenshotEditor.tsx (100%)
 rename packages/{feedback2 => feedback}/src/screenshot/components/ScreenshotInput.css.ts (100%)
 rename packages/{feedback2 => feedback}/src/screenshot/components/useContainerSize.tsx (100%)
 rename packages/{feedback2 => feedback}/src/screenshot/components/useResizeObserver.tsx (100%)
 rename packages/{feedback2 => feedback}/src/screenshot/components/useTakeScreenshot.tsx (100%)
 rename packages/{feedback2 => feedback}/src/screenshot/createInput.ts (100%)
 rename packages/{feedback2 => feedback}/src/screenshot/integration.ts (52%)
 delete mode 100644 packages/feedback/src/sendFeedback.ts
 rename packages/{feedback2 => feedback}/src/types/config.ts (100%)
 rename packages/{feedback2 => feedback}/src/types/form.ts (100%)
 rename packages/{feedback2 => feedback}/src/types/theme.ts (100%)
 rename packages/feedback/src/{ => util}/debug-build.ts (100%)
 delete mode 100644 packages/feedback/src/util/handleFeedbackSubmit.ts
 rename packages/{feedback2 => feedback}/src/util/isScreenshotSupported.ts (100%)
 delete mode 100644 packages/feedback/src/util/sendFeedbackRequest.ts
 rename packages/{feedback2 => feedback}/src/util/validate.ts (100%)
 delete mode 100644 packages/feedback/src/widget/Actor.css.ts
 delete mode 100644 packages/feedback/src/widget/Actor.ts
 delete mode 100644 packages/feedback/src/widget/Dialog.css.ts
 delete mode 100644 packages/feedback/src/widget/Dialog.ts
 delete mode 100644 packages/feedback/src/widget/Form.ts
 delete mode 100644 packages/feedback/src/widget/Icon.ts
 delete mode 100644 packages/feedback/src/widget/Logo.ts
 delete mode 100644 packages/feedback/src/widget/Main.css.ts
 delete mode 100644 packages/feedback/src/widget/SubmitButton.ts
 delete mode 100644 packages/feedback/src/widget/SuccessIcon.ts
 delete mode 100644 packages/feedback/src/widget/SuccessMessage.ts
 delete mode 100644 packages/feedback/src/widget/createShadowHost.ts
 delete mode 100644 packages/feedback/src/widget/createWidget.ts
 delete mode 100644 packages/feedback/src/widget/util/createElement.ts
 delete mode 100644 packages/feedback/test/index.ts
 delete mode 100644 packages/feedback/test/integration.test.ts
 delete mode 100644 packages/feedback/test/sendFeedback.test.ts
 delete mode 100644 packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts
 delete mode 100644 packages/feedback/test/utils/TestClient.ts
 delete mode 100644 packages/feedback/test/utils/mockSdk.ts
 delete mode 100644 packages/feedback/test/widget/Actor.test.ts
 delete mode 100644 packages/feedback/test/widget/Dialog.test.ts
 delete mode 100644 packages/feedback/test/widget/Form.test.ts
 delete mode 100644 packages/feedback/test/widget/SubmitButton.test.ts
 delete mode 100644 packages/feedback/test/widget/SuccessMessage.test.ts
 delete mode 100644 packages/feedback/test/widget/createWidget.test.ts
 delete mode 100644 packages/feedback2/.eslintignore
 delete mode 100644 packages/feedback2/.eslintrc.js
 delete mode 100644 packages/feedback2/.gitignore
 delete mode 100644 packages/feedback2/LICENSE
 delete mode 100644 packages/feedback2/README.md
 delete mode 100644 packages/feedback2/jest.config.js
 delete mode 100644 packages/feedback2/package.json
 delete mode 100644 packages/feedback2/rollup.bundle.config.mjs
 delete mode 100644 packages/feedback2/rollup.npm.config.mjs
 delete mode 100644 packages/feedback2/src/index.ts
 delete mode 100644 packages/feedback2/src/types/index.ts
 delete mode 100644 packages/feedback2/src/util/debug-build.ts
 delete mode 100644 packages/feedback2/src/util/mergeOptions.ts
 delete mode 100644 packages/feedback2/src/util/prepareFeedbackEvent.ts
 delete mode 100644 packages/feedback2/src/util/setAttributesNS.ts
 delete mode 100644 packages/feedback2/tsconfig.json
 delete mode 100644 packages/feedback2/tsconfig.test.json
 delete mode 100644 packages/feedback2/tsconfig.types.json

diff --git a/.size-limit.js b/.size-limit.js
index 1aa930cb10f8..c984f999e15a 100644
--- a/.size-limit.js
+++ b/.size-limit.js
@@ -55,30 +55,23 @@ module.exports = [
     limit: '35 KB',
   },
   {
-    name: '@sentry/browser (incl. Feedback) - Webpack (gzipped)',
+    name: '@sentry/browser (incl. feedbackIntegration) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
     import: '{ init, feedbackIntegration }',
     gzip: true,
     limit: '50 KB',
   },
   {
-    name: '@sentry/browser (incl. feedback2Integration) - Webpack (gzipped)',
+    name: '@sentry/browser (incl. feedbackModalIntegration) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
-    import: '{ init, feedback2Integration }',
+    import: '{ init, feedbackIntegration, feedbackModalIntegration }',
     gzip: true,
     limit: '50 KB',
   },
   {
-    name: '@sentry/browser (incl. feedback2ModalIntegration) - Webpack (gzipped)',
+    name: '@sentry/browser (incl. feedbackScreenshotIntegration) - Webpack (gzipped)',
     path: 'packages/browser/build/npm/esm/index.js',
-    import: '{ init, feedback2Integration, feedback2ModalIntegration }',
-    gzip: true,
-    limit: '50 KB',
-  },
-  {
-    name: '@sentry/browser (incl. feedback2ScreenshotIntegration) - Webpack (gzipped)',
-    path: 'packages/browser/build/npm/esm/index.js',
-    import: '{ init, feedback2Integration, feedback2ModalIntegration, feedback2ScreenshotIntegration }',
+    import: '{ init, feedbackIntegration, feedbackModalIntegration, feedbackScreenshotIntegration }',
     gzip: true,
     limit: '50 KB',
   },
diff --git a/package.json b/package.json
index 223ccd543a62..c2aa2e4879c9 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,6 @@
     "packages/eslint-config-sdk",
     "packages/eslint-plugin-sdk",
     "packages/feedback",
-    "packages/feedback2",
     "packages/gatsby",
     "packages/google-cloud",
     "packages/integration-shims",
diff --git a/packages/feedback/.eslintrc.js b/packages/feedback/.eslintrc.js
index cf9985e769c0..ef2ed992265c 100644
--- a/packages/feedback/.eslintrc.js
+++ b/packages/feedback/.eslintrc.js
@@ -7,29 +7,18 @@ module.exports = {
   extends: ['../../.eslintrc.js'],
   overrides: [
     {
-      files: ['jest.setup.ts', 'jest.config.ts'],
-      parserOptions: {
-        project: ['tsconfig.test.json'],
-      },
+      files: ['src/**/*.ts', 'src/**/*.tsx'],
       rules: {
-        'no-console': 'off',
+        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
       },
     },
     {
-      files: ['test/**/*.ts'],
-
-      rules: {
-        // most of these errors come from `new Promise(process.nextTick)`
-        '@typescript-eslint/unbound-method': 'off',
-        // TODO: decide if we want to enable this again after the migration
-        // We can take the freedom to be a bit more lenient with tests
-        '@typescript-eslint/no-floating-promises': 'off',
+      files: ['jest.setup.ts', 'jest.config.ts'],
+      parserOptions: {
+        project: ['tsconfig.test.json'],
       },
-    },
-    {
-      files: ['src/types/deprecated.ts'],
       rules: {
-        '@typescript-eslint/naming-convention': 'off',
+        'no-console': 'off',
       },
     },
   ],
diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index bf75b64913f2..2bb7564437b2 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -18,19 +18,6 @@
   "main": "build/npm/cjs/index.js",
   "module": "build/npm/esm/index.js",
   "types": "build/npm/types/index.d.ts",
-  "exports": {
-    "./package.json": "./package.json",
-    ".": {
-      "import": {
-        "types": "./build/npm/types/index.d.ts",
-        "default": "./build/npm/esm/index.js"
-      },
-      "require": {
-        "types": "./build/npm/types/index.d.ts",
-        "default": "./build/npm/cjs/index.js"
-      }
-    }
-  },
   "typesVersions": {
     "<4.9": {
       "build/npm/types/index.d.ts": [
@@ -38,13 +25,28 @@
       ]
     }
   },
+  "exports": {
+   "./package.json": "./package.json",
+   ".": {
+     "import": {
+       "types": "./build/npm/types/index.d.ts",
+       "default": "./build/npm/esm/index.js"
+     },
+     "require": {
+       "types": "./build/npm/types/index.d.ts",
+       "default": "./build/npm/cjs/index.js"
+     }
+   }
+  },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
     "@sentry/core": "8.0.0-alpha.2",
     "@sentry/types": "8.0.0-alpha.2",
-    "@sentry/utils": "8.0.0-alpha.2"
+    "@sentry/utils": "8.0.0-alpha.2",
+    "preact": "^10.19.4",
+    "preact-compat": "^3.19.0"
   },
   "scripts": {
     "build": "run-p build:transpile build:types build:bundle",
diff --git a/packages/feedback/rollup.bundle.config.mjs b/packages/feedback/rollup.bundle.config.mjs
index d35b834711c6..f5794d328409 100644
--- a/packages/feedback/rollup.bundle.config.mjs
+++ b/packages/feedback/rollup.bundle.config.mjs
@@ -1,12 +1,15 @@
 import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
 
-const baseBundleConfig = makeBaseBundleConfig({
-  bundleType: 'addon',
-  entrypoints: ['src/index.ts'],
-  licenseTitle: '@sentry-internal/feedback',
-  outputFileBase: () => 'bundles/feedback',
-});
-
-const builds = makeBundleConfigVariants(baseBundleConfig);
-
-export default builds;
+export default makeBundleConfigVariants(
+  makeBaseBundleConfig({
+    bundleType: 'addon',
+    entrypoints: ['src/index.ts'],
+    jsVersion: 'es6',
+    licenseTitle: '@sentry-internal/feedback',
+    outputFileBase: () => 'bundles/feedback',
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
+  }),
+);
diff --git a/packages/feedback/rollup.npm.config.mjs b/packages/feedback/rollup.npm.config.mjs
index 5a1800f23b08..3dc031c5ff82 100644
--- a/packages/feedback/rollup.npm.config.mjs
+++ b/packages/feedback/rollup.npm.config.mjs
@@ -12,5 +12,9 @@ export default makeNPMConfigVariants(
         preserveModules: false,
       },
     },
+    sucrase: {
+      jsxPragma: 'h',
+      jsxFragmentPragma: 'Fragment',
+    },
   }),
 );
diff --git a/packages/feedback/src/constants.ts b/packages/feedback/src/constants.ts
deleted file mode 100644
index 07782968375f..000000000000
--- a/packages/feedback/src/constants.ts
+++ /dev/null
@@ -1,76 +0,0 @@
-import { GLOBAL_OBJ } from '@sentry/utils';
-
-// exporting a separate copy of `WINDOW` rather than exporting the one from `@sentry/browser`
-// prevents the browser package from being bundled in the CDN bundle, and avoids a
-// circular dependency between the browser and feedback packages
-export const WINDOW = GLOBAL_OBJ as typeof GLOBAL_OBJ & Window;
-
-const LIGHT_BACKGROUND = '#ffffff';
-const INHERIT = 'inherit';
-const SUBMIT_COLOR = 'rgba(108, 95, 199, 1)';
-const LIGHT_THEME = {
-  fontFamily: "system-ui, 'Helvetica Neue', Arial, sans-serif",
-  fontSize: '14px',
-
-  background: LIGHT_BACKGROUND,
-  backgroundHover: '#f6f6f7',
-  foreground: '#2b2233',
-  border: '1.5px solid rgba(41, 35, 47, 0.13)',
-  borderRadius: '12px',
-  boxShadow: '0px 4px 24px 0px rgba(43, 34, 51, 0.12)',
-
-  success: '#268d75',
-  error: '#df3338',
-
-  submitBackground: 'rgba(88, 74, 192, 1)',
-  submitBackgroundHover: SUBMIT_COLOR,
-  submitBorder: SUBMIT_COLOR,
-  submitOutlineFocus: '#29232f',
-  submitForeground: LIGHT_BACKGROUND,
-  submitForegroundHover: LIGHT_BACKGROUND,
-
-  cancelBackground: 'transparent',
-  cancelBackgroundHover: 'var(--background-hover)',
-  cancelBorder: 'var(--border)',
-  cancelOutlineFocus: 'var(--input-outline-focus)',
-  cancelForeground: 'var(--foreground)',
-  cancelForegroundHover: 'var(--foreground)',
-
-  inputBackground: INHERIT,
-  inputForeground: INHERIT,
-  inputBorder: 'var(--border)',
-  inputOutlineFocus: SUBMIT_COLOR,
-
-  formBorderRadius: '20px',
-  formContentBorderRadius: '6px',
-};
-
-export const DEFAULT_THEME = {
-  light: LIGHT_THEME,
-  dark: {
-    ...LIGHT_THEME,
-
-    background: '#29232f',
-    backgroundHover: '#352f3b',
-    foreground: '#ebe6ef',
-    border: '1.5px solid rgba(235, 230, 239, 0.15)',
-
-    success: '#2da98c',
-    error: '#f55459',
-  },
-};
-
-export const ACTOR_LABEL = 'Report a Bug';
-export const CANCEL_BUTTON_LABEL = 'Cancel';
-export const SUBMIT_BUTTON_LABEL = 'Send Bug Report';
-export const FORM_TITLE = 'Report a Bug';
-export const EMAIL_PLACEHOLDER = 'your.email@example.org';
-export const EMAIL_LABEL = 'Email';
-export const MESSAGE_PLACEHOLDER = "What's the bug? What did you expect?";
-export const MESSAGE_LABEL = 'Description';
-export const NAME_PLACEHOLDER = 'Your Name';
-export const NAME_LABEL = 'Name';
-export const SUCCESS_MESSAGE_TEXT = 'Thank you for your report!';
-
-export const FEEDBACK_WIDGET_SOURCE = 'widget';
-export const FEEDBACK_API_SOURCE = 'api';
diff --git a/packages/feedback2/src/constants/index.ts b/packages/feedback/src/constants/index.ts
similarity index 100%
rename from packages/feedback2/src/constants/index.ts
rename to packages/feedback/src/constants/index.ts
diff --git a/packages/feedback2/src/constants/theme.ts b/packages/feedback/src/constants/theme.ts
similarity index 100%
rename from packages/feedback2/src/constants/theme.ts
rename to packages/feedback/src/constants/theme.ts
diff --git a/packages/feedback2/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
similarity index 100%
rename from packages/feedback2/src/core/components/Actor.css.ts
rename to packages/feedback/src/core/components/Actor.css.ts
diff --git a/packages/feedback2/src/core/components/Actor.ts b/packages/feedback/src/core/components/Actor.ts
similarity index 100%
rename from packages/feedback2/src/core/components/Actor.ts
rename to packages/feedback/src/core/components/Actor.ts
diff --git a/packages/feedback2/src/core/components/FeedbackIcon.ts b/packages/feedback/src/core/components/FeedbackIcon.ts
similarity index 100%
rename from packages/feedback2/src/core/components/FeedbackIcon.ts
rename to packages/feedback/src/core/components/FeedbackIcon.ts
diff --git a/packages/feedback2/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts
similarity index 100%
rename from packages/feedback2/src/core/createMainStyles.ts
rename to packages/feedback/src/core/createMainStyles.ts
diff --git a/packages/feedback2/src/core/integration.ts b/packages/feedback/src/core/integration.ts
similarity index 93%
rename from packages/feedback2/src/core/integration.ts
rename to packages/feedback/src/core/integration.ts
index 7cf1223587e8..489bfd32728d 100644
--- a/packages/feedback2/src/core/integration.ts
+++ b/packages/feedback/src/core/integration.ts
@@ -16,8 +16,8 @@ import {
   SUBMIT_BUTTON_LABEL,
   SUCCESS_MESSAGE_TEXT,
 } from '../constants';
-import type { IFeedback2ModalIntegration } from '../modal/integration';
-import type { IFeedback2ScreenshotIntegration } from '../screenshot/integration';
+import type { IFeedbackModalIntegration } from '../modal/integration';
+import type { IFeedbackScreenshotIntegration } from '../screenshot/integration';
 import type {
   Dialog,
   FeedbackInternalOptions,
@@ -33,7 +33,7 @@ import { sendFeedback } from './sendFeedback';
 
 type Unsubscribe = () => void;
 
-interface PublicFeedback2Integration {
+interface PublicFeedbackIntegration {
   attachTo: (el: Element | string, optionOverrides: OverrideFeedbackConfiguration) => () => void;
   createWidget: (optionOverrides: OverrideFeedbackConfiguration & { shouldCreateActor?: boolean }) => Promise<Dialog>;
   getWidget: () => Dialog | null;
@@ -42,9 +42,9 @@ interface PublicFeedback2Integration {
   closeDialog: () => void;
   removeWidget: () => void;
 }
-export type IFeedback2Integration = IntegrationFnResult & PublicFeedback2Integration;
+export type IFeedbackIntegration = IntegrationFnResult & PublicFeedbackIntegration;
 
-export const _feedback2Integration = (({
+export const _feedbackIntegration = (({
   // FeedbackGeneralConfiguration
   id = 'sentry-feedback',
   showBranding = true,
@@ -147,8 +147,8 @@ export const _feedback2Integration = (({
     if (!client) {
       throw new Error('Sentry Client is not initialized correctly');
     }
-    const modalIntegration = client.getIntegrationByName<IFeedback2ModalIntegration>('Feedback2Modal');
-    const screenshotIntegration = client.getIntegrationByName<IFeedback2ScreenshotIntegration>('Feedback2Screenshot');
+    const modalIntegration = client.getIntegrationByName<IFeedbackModalIntegration>('FeedbackModal');
+    const screenshotIntegration = client.getIntegrationByName<IFeedbackScreenshotIntegration>('FeedbackScreenshot');
     const screenshotIsSupported = isScreenshotSupported();
 
     // START TEMP: Error messages
@@ -239,7 +239,7 @@ export const _feedback2Integration = (({
   };
 
   return {
-    name: 'Feedback2',
+    name: 'Feedback',
     setupOnce() {
       if (!isBrowser() || !_options.autoInject) {
         return;
@@ -277,4 +277,4 @@ export const _feedback2Integration = (({
   };
 }) satisfies IntegrationFn;
 
-export const feedback2Integration = defineIntegration(_feedback2Integration);
+export const feedbackIntegration = defineIntegration(_feedbackIntegration);
diff --git a/packages/feedback2/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts
similarity index 100%
rename from packages/feedback2/src/core/sendFeedback.ts
rename to packages/feedback/src/core/sendFeedback.ts
diff --git a/packages/feedback/src/index.ts b/packages/feedback/src/index.ts
index 9d14c45ab186..e8233ec2455e 100644
--- a/packages/feedback/src/index.ts
+++ b/packages/feedback/src/index.ts
@@ -1,2 +1,7 @@
-export { sendFeedback } from './sendFeedback';
-export { feedbackIntegration } from './integration';
+export { sendFeedback } from './core/sendFeedback';
+export { feedbackIntegration } from './core/integration';
+export { feedbackModalIntegration } from './modal/integration';
+export { feedbackScreenshotIntegration } from './screenshot/integration';
+
+export type { OptionalFeedbackConfiguration } from './types';
+export type { IFeedbackIntegration } from './core/integration';
diff --git a/packages/feedback/src/integration.ts b/packages/feedback/src/integration.ts
deleted file mode 100644
index 91a5da323212..000000000000
--- a/packages/feedback/src/integration.ts
+++ /dev/null
@@ -1,385 +0,0 @@
-import type { Integration, IntegrationFn } from '@sentry/types';
-import { isBrowser, logger } from '@sentry/utils';
-
-import {
-  ACTOR_LABEL,
-  CANCEL_BUTTON_LABEL,
-  DEFAULT_THEME,
-  EMAIL_LABEL,
-  EMAIL_PLACEHOLDER,
-  FORM_TITLE,
-  MESSAGE_LABEL,
-  MESSAGE_PLACEHOLDER,
-  NAME_LABEL,
-  NAME_PLACEHOLDER,
-  SUBMIT_BUTTON_LABEL,
-  SUCCESS_MESSAGE_TEXT,
-  WINDOW,
-} from './constants';
-import { DEBUG_BUILD } from './debug-build';
-import type { FeedbackInternalOptions, FeedbackWidget, OptionalFeedbackConfiguration } from './types';
-import { mergeOptions } from './util/mergeOptions';
-import { createActorStyles } from './widget/Actor.css';
-import { createShadowHost } from './widget/createShadowHost';
-import { createWidget } from './widget/createWidget';
-
-const doc = WINDOW.document;
-
-/**
- * Feedback integration. When added as an integration to the SDK, it will
- * inject a button in the bottom-right corner of the window that opens a
- * feedback modal when clicked.
- */
-export const feedbackIntegration = ((options?: OptionalFeedbackConfiguration) => {
-  return new Feedback(options);
-}) satisfies IntegrationFn;
-
-// TODO: Rewrite this to be functional integration
-class Feedback implements Integration {
-  /**
-   * @inheritDoc
-   */
-  public static id: string = 'Feedback';
-
-  /**
-   * @inheritDoc
-   */
-  public name: string;
-
-  /**
-   * Feedback configuration options
-   */
-  public options: FeedbackInternalOptions;
-
-  /**
-   * Reference to widget element that is created when autoInject is true
-   */
-  private _widget: FeedbackWidget | null;
-
-  /**
-   * List of all widgets that are created from the integration
-   */
-  private _widgets: Set<FeedbackWidget>;
-
-  /**
-   * Reference to the host element where widget is inserted
-   */
-  private _host: HTMLDivElement | null;
-
-  /**
-   * Refernce to Shadow DOM root
-   */
-  private _shadow: ShadowRoot | null;
-
-  /**
-   * Tracks if actor styles have ever been inserted into shadow DOM
-   */
-  private _hasInsertedActorStyles: boolean;
-
-  public constructor({
-    autoInject = true,
-    id = 'sentry-feedback',
-    isEmailRequired = false,
-    isNameRequired = false,
-    showBranding = true,
-    showEmail = true,
-    showName = true,
-    useSentryUser = {
-      email: 'email',
-      name: 'username',
-    },
-
-    themeDark,
-    themeLight,
-    colorScheme = 'system',
-
-    buttonLabel = ACTOR_LABEL,
-    cancelButtonLabel = CANCEL_BUTTON_LABEL,
-    submitButtonLabel = SUBMIT_BUTTON_LABEL,
-    formTitle = FORM_TITLE,
-    emailPlaceholder = EMAIL_PLACEHOLDER,
-    emailLabel = EMAIL_LABEL,
-    messagePlaceholder = MESSAGE_PLACEHOLDER,
-    messageLabel = MESSAGE_LABEL,
-    namePlaceholder = NAME_PLACEHOLDER,
-    nameLabel = NAME_LABEL,
-    successMessageText = SUCCESS_MESSAGE_TEXT,
-
-    onFormClose,
-    onFormOpen,
-    onSubmitError,
-    onSubmitSuccess,
-  }: OptionalFeedbackConfiguration = {}) {
-    this.name = Feedback.id;
-
-    // tsc fails if these are not initialized explicitly constructor, e.g. can't call `_initialize()`
-    this._host = null;
-    this._shadow = null;
-    this._widget = null;
-    this._widgets = new Set();
-    this._hasInsertedActorStyles = false;
-
-    this.options = {
-      autoInject,
-      showBranding,
-      id,
-      isEmailRequired,
-      isNameRequired,
-      showEmail,
-      showName,
-      useSentryUser,
-
-      colorScheme,
-      themeDark: {
-        ...DEFAULT_THEME.dark,
-        ...themeDark,
-      },
-      themeLight: {
-        ...DEFAULT_THEME.light,
-        ...themeLight,
-      },
-
-      buttonLabel,
-      cancelButtonLabel,
-      submitButtonLabel,
-      formTitle,
-      emailLabel,
-      emailPlaceholder,
-      messageLabel,
-      messagePlaceholder,
-      nameLabel,
-      namePlaceholder,
-      successMessageText,
-
-      onFormClose,
-      onFormOpen,
-      onSubmitError,
-      onSubmitSuccess,
-    };
-  }
-
-  /**
-   * Setup and initialize feedback container
-   */
-  public setupOnce(): void {
-    if (!isBrowser()) {
-      return;
-    }
-
-    try {
-      this._cleanupWidgetIfExists();
-
-      const { autoInject } = this.options;
-
-      if (!autoInject) {
-        // Nothing to do here
-        return;
-      }
-
-      this._createWidget(this.options);
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-    }
-  }
-
-  /**
-   * Allows user to open the dialog box. Creates a new widget if
-   * `autoInject` was false, otherwise re-uses the default widget that was
-   * created during initialization of the integration.
-   */
-  public openDialog(): void {
-    if (!this._widget) {
-      this._createWidget({ ...this.options, shouldCreateActor: false });
-    }
-
-    if (!this._widget) {
-      return;
-    }
-
-    this._widget.openDialog();
-  }
-
-  /**
-   * Closes the dialog for the default widget, if it exists
-   */
-  public closeDialog(): void {
-    if (!this._widget) {
-      // Nothing to do if widget does not exist
-      return;
-    }
-
-    this._widget.closeDialog();
-  }
-
-  /**
-   * Adds click listener to attached element to open a feedback dialog
-   */
-  public attachTo(el: Element | string, optionOverrides?: OptionalFeedbackConfiguration): FeedbackWidget | null {
-    try {
-      const options = mergeOptions(this.options, optionOverrides || {});
-
-      return this._ensureShadowHost<FeedbackWidget | null>(options, ({ shadow }) => {
-        const targetEl =
-          typeof el === 'string' ? doc.querySelector(el) : typeof el.addEventListener === 'function' ? el : null;
-
-        if (!targetEl) {
-          DEBUG_BUILD && logger.error('[Feedback] Unable to attach to target element');
-          return null;
-        }
-
-        const widget = createWidget({ shadow, options, attachTo: targetEl });
-        this._widgets.add(widget);
-
-        if (!this._widget) {
-          this._widget = widget;
-        }
-
-        return widget;
-      });
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-      return null;
-    }
-  }
-
-  /**
-   * Creates a new widget. Accepts partial options to override any options passed to constructor.
-   */
-  public createWidget(
-    optionOverrides?: OptionalFeedbackConfiguration & { shouldCreateActor?: boolean },
-  ): FeedbackWidget | null {
-    try {
-      return this._createWidget(mergeOptions(this.options, optionOverrides || {}));
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-      return null;
-    }
-  }
-
-  /**
-   * Removes a single widget
-   */
-  public removeWidget(widget: FeedbackWidget | null | undefined): boolean {
-    if (!widget) {
-      return false;
-    }
-
-    try {
-      if (this._widgets.has(widget)) {
-        widget.removeActor();
-        widget.removeDialog();
-        this._widgets.delete(widget);
-
-        if (this._widget === widget) {
-          // TODO: is more clean-up needed? e.g. call remove()
-          this._widget = null;
-        }
-
-        return true;
-      }
-    } catch (err) {
-      DEBUG_BUILD && logger.error(err);
-    }
-
-    return false;
-  }
-
-  /**
-   * Returns the default (first-created) widget
-   */
-  public getWidget(): FeedbackWidget | null {
-    return this._widget;
-  }
-
-  /**
-   * Removes the Feedback integration (including host, shadow DOM, and all widgets)
-   */
-  public remove(): void {
-    if (this._host) {
-      this._host.remove();
-    }
-    this._initialize();
-  }
-
-  /**
-   * Initializes values of protected properties
-   */
-  protected _initialize(): void {
-    this._host = null;
-    this._shadow = null;
-    this._widget = null;
-    this._widgets = new Set();
-    this._hasInsertedActorStyles = false;
-  }
-
-  /**
-   * Clean-up the widget if it already exists in the DOM. This shouldn't happen
-   * in prod, but can happen in development with hot module reloading.
-   */
-  protected _cleanupWidgetIfExists(): void {
-    if (this._host) {
-      this.remove();
-    }
-    const existingFeedback = doc.querySelector(`#${this.options.id}`);
-    if (existingFeedback) {
-      existingFeedback.remove();
-    }
-  }
-
-  /**
-   * Creates a new widget, after ensuring shadow DOM exists
-   */
-  protected _createWidget(options: FeedbackInternalOptions & { shouldCreateActor?: boolean }): FeedbackWidget | null {
-    return this._ensureShadowHost<FeedbackWidget>(options, ({ shadow }) => {
-      const widget = createWidget({ shadow, options });
-
-      if (!this._hasInsertedActorStyles && widget.actor) {
-        shadow.appendChild(createActorStyles(doc));
-        this._hasInsertedActorStyles = true;
-      }
-
-      this._widgets.add(widget);
-
-      if (!this._widget) {
-        this._widget = widget;
-      }
-
-      return widget;
-    });
-  }
-
-  /**
-   * Ensures that shadow DOM exists and is added to the DOM
-   */
-  protected _ensureShadowHost<T>(
-    options: FeedbackInternalOptions,
-    cb: (createShadowHostResult: ReturnType<typeof createShadowHost>) => T,
-  ): T | null {
-    let needsAppendHost = false;
-
-    // Don't create if it already exists
-    if (!this._shadow || !this._host) {
-      const { id, colorScheme, themeLight, themeDark } = options;
-      const { shadow, host } = createShadowHost({
-        id,
-        colorScheme,
-        themeLight,
-        themeDark,
-      });
-      this._shadow = shadow;
-      this._host = host;
-      needsAppendHost = true;
-    }
-
-    // set data attribute on host for different themes
-    this._host.dataset.sentryFeedbackColorscheme = options.colorScheme;
-
-    const result = cb({ shadow: this._shadow, host: this._host });
-
-    if (needsAppendHost) {
-      doc.body.appendChild(this._host);
-    }
-
-    return result;
-  }
-}
diff --git a/packages/feedback2/src/modal/components/Dialog.css.ts b/packages/feedback/src/modal/components/Dialog.css.ts
similarity index 100%
rename from packages/feedback2/src/modal/components/Dialog.css.ts
rename to packages/feedback/src/modal/components/Dialog.css.ts
diff --git a/packages/feedback2/src/modal/components/DialogContainer.tsx b/packages/feedback/src/modal/components/DialogContainer.tsx
similarity index 100%
rename from packages/feedback2/src/modal/components/DialogContainer.tsx
rename to packages/feedback/src/modal/components/DialogContainer.tsx
diff --git a/packages/feedback2/src/modal/components/DialogContent.tsx b/packages/feedback/src/modal/components/DialogContent.tsx
similarity index 100%
rename from packages/feedback2/src/modal/components/DialogContent.tsx
rename to packages/feedback/src/modal/components/DialogContent.tsx
diff --git a/packages/feedback2/src/modal/components/DialogHeader.tsx b/packages/feedback/src/modal/components/DialogHeader.tsx
similarity index 100%
rename from packages/feedback2/src/modal/components/DialogHeader.tsx
rename to packages/feedback/src/modal/components/DialogHeader.tsx
diff --git a/packages/feedback2/src/modal/components/Form.tsx b/packages/feedback/src/modal/components/Form.tsx
similarity index 100%
rename from packages/feedback2/src/modal/components/Form.tsx
rename to packages/feedback/src/modal/components/Form.tsx
diff --git a/packages/feedback2/src/modal/components/Icon.ts b/packages/feedback/src/modal/components/Icon.ts
similarity index 100%
rename from packages/feedback2/src/modal/components/Icon.ts
rename to packages/feedback/src/modal/components/Icon.ts
diff --git a/packages/feedback2/src/modal/components/SentryLogo.ts b/packages/feedback/src/modal/components/SentryLogo.ts
similarity index 100%
rename from packages/feedback2/src/modal/components/SentryLogo.ts
rename to packages/feedback/src/modal/components/SentryLogo.ts
diff --git a/packages/feedback2/src/modal/components/SuccessIcon.ts b/packages/feedback/src/modal/components/SuccessIcon.ts
similarity index 100%
rename from packages/feedback2/src/modal/components/SuccessIcon.ts
rename to packages/feedback/src/modal/components/SuccessIcon.ts
diff --git a/packages/feedback2/src/modal/createDialog.tsx b/packages/feedback/src/modal/createDialog.tsx
similarity index 95%
rename from packages/feedback2/src/modal/createDialog.tsx
rename to packages/feedback/src/modal/createDialog.tsx
index c0299c2edd30..d0c65389e006 100644
--- a/packages/feedback2/src/modal/createDialog.tsx
+++ b/packages/feedback/src/modal/createDialog.tsx
@@ -2,14 +2,14 @@ import { getCurrentScope } from '@sentry/core';
 import { h, render } from 'preact';
 import { DOCUMENT } from '../constants';
 import type { sendFeedback as sendFeedbackFn } from '../core/sendFeedback';
-import type { IFeedback2ScreenshotIntegration } from '../screenshot/integration';
+import type { IFeedbackScreenshotIntegration } from '../screenshot/integration';
 import type { Dialog, FeedbackFormData, FeedbackInternalOptions } from '../types';
 import { createDialogStyles } from './components/Dialog.css';
 import { DialogComponent } from './components/DialogContainer';
 
 interface Props {
   options: FeedbackInternalOptions;
-  screenshotIntegration: IFeedback2ScreenshotIntegration | undefined;
+  screenshotIntegration: IFeedbackScreenshotIntegration | undefined;
   sendFeedback: typeof sendFeedbackFn;
   shadow: ShadowRoot;
 }
diff --git a/packages/feedback2/src/modal/integration.ts b/packages/feedback/src/modal/integration.ts
similarity index 54%
rename from packages/feedback2/src/modal/integration.ts
rename to packages/feedback/src/modal/integration.ts
index 33accceda743..67f2c327db5b 100644
--- a/packages/feedback2/src/modal/integration.ts
+++ b/packages/feedback/src/modal/integration.ts
@@ -2,15 +2,15 @@ import { defineIntegration } from '@sentry/core';
 import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
 import { createDialog } from './createDialog';
 
-interface PublicFeedback2ModalIntegration {
+interface PublicFeedbackModalIntegration {
   createDialog: typeof createDialog;
 }
 
-const INTEGRATION_NAME = 'Feedback2Modal';
+const INTEGRATION_NAME = 'FeedbackModal';
 
-export type IFeedback2ModalIntegration = IntegrationFnResult & PublicFeedback2ModalIntegration;
+export type IFeedbackModalIntegration = IntegrationFnResult & PublicFeedbackModalIntegration;
 
-export const _feedback2ModalIntegration = (() => {
+export const _feedbackModalIntegration = (() => {
   return {
     name: INTEGRATION_NAME,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -19,4 +19,4 @@ export const _feedback2ModalIntegration = (() => {
   };
 }) satisfies IntegrationFn;
 
-export const feedback2ModalIntegration = defineIntegration(_feedback2ModalIntegration);
+export const feedbackModalIntegration = defineIntegration(_feedbackModalIntegration);
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
similarity index 100%
rename from packages/feedback2/src/screenshot/components/ScreenshotEditor.tsx
rename to packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
diff --git a/packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
similarity index 100%
rename from packages/feedback2/src/screenshot/components/ScreenshotInput.css.ts
rename to packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
diff --git a/packages/feedback2/src/screenshot/components/useContainerSize.tsx b/packages/feedback/src/screenshot/components/useContainerSize.tsx
similarity index 100%
rename from packages/feedback2/src/screenshot/components/useContainerSize.tsx
rename to packages/feedback/src/screenshot/components/useContainerSize.tsx
diff --git a/packages/feedback2/src/screenshot/components/useResizeObserver.tsx b/packages/feedback/src/screenshot/components/useResizeObserver.tsx
similarity index 100%
rename from packages/feedback2/src/screenshot/components/useResizeObserver.tsx
rename to packages/feedback/src/screenshot/components/useResizeObserver.tsx
diff --git a/packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx b/packages/feedback/src/screenshot/components/useTakeScreenshot.tsx
similarity index 100%
rename from packages/feedback2/src/screenshot/components/useTakeScreenshot.tsx
rename to packages/feedback/src/screenshot/components/useTakeScreenshot.tsx
diff --git a/packages/feedback2/src/screenshot/createInput.ts b/packages/feedback/src/screenshot/createInput.ts
similarity index 100%
rename from packages/feedback2/src/screenshot/createInput.ts
rename to packages/feedback/src/screenshot/createInput.ts
diff --git a/packages/feedback2/src/screenshot/integration.ts b/packages/feedback/src/screenshot/integration.ts
similarity index 52%
rename from packages/feedback2/src/screenshot/integration.ts
rename to packages/feedback/src/screenshot/integration.ts
index be3f4e8391e6..93fb5b605e04 100644
--- a/packages/feedback2/src/screenshot/integration.ts
+++ b/packages/feedback/src/screenshot/integration.ts
@@ -2,15 +2,15 @@ import { defineIntegration } from '@sentry/core';
 import type { IntegrationFn, IntegrationFnResult } from '@sentry/types';
 import { createInput } from './createInput';
 
-interface PublicFeedback2ScreenshotIntegration {
+interface PublicFeedbackScreenshotIntegration {
   createInput: typeof createInput;
 }
 
-const INTEGRATION_NAME = 'Feedback2Screenshot';
+const INTEGRATION_NAME = 'FeedbackScreenshot';
 
-export type IFeedback2ScreenshotIntegration = IntegrationFnResult & PublicFeedback2ScreenshotIntegration;
+export type IFeedbackScreenshotIntegration = IntegrationFnResult & PublicFeedbackScreenshotIntegration;
 
-export const _feedback2ScreenshotIntegration = (() => {
+export const _feedbackScreenshotIntegration = (() => {
   return {
     name: INTEGRATION_NAME,
     // eslint-disable-next-line @typescript-eslint/no-empty-function
@@ -19,4 +19,4 @@ export const _feedback2ScreenshotIntegration = (() => {
   };
 }) satisfies IntegrationFn;
 
-export const feedback2ScreenshotIntegration = defineIntegration(_feedback2ScreenshotIntegration);
+export const feedbackScreenshotIntegration = defineIntegration(_feedbackScreenshotIntegration);
diff --git a/packages/feedback/src/sendFeedback.ts b/packages/feedback/src/sendFeedback.ts
deleted file mode 100644
index ac60415d0462..000000000000
--- a/packages/feedback/src/sendFeedback.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-import { getLocationHref } from '@sentry/utils';
-
-import { FEEDBACK_API_SOURCE } from './constants';
-import type { SendFeedbackOptions } from './types';
-import { sendFeedbackRequest } from './util/sendFeedbackRequest';
-
-interface SendFeedbackParams {
-  message: string;
-  name?: string;
-  email?: string;
-  url?: string;
-  source?: string;
-}
-
-/**
- * Public API to send a Feedback item to Sentry
- */
-export function sendFeedback(
-  { name, email, message, source = FEEDBACK_API_SOURCE, url = getLocationHref() }: SendFeedbackParams,
-  options: SendFeedbackOptions = {},
-): ReturnType<typeof sendFeedbackRequest> {
-  if (!message) {
-    throw new Error('Unable to submit feedback with empty message');
-  }
-
-  return sendFeedbackRequest(
-    {
-      feedback: {
-        name,
-        email,
-        message,
-        url,
-        source,
-      },
-    },
-    options,
-  );
-}
diff --git a/packages/feedback2/src/types/config.ts b/packages/feedback/src/types/config.ts
similarity index 100%
rename from packages/feedback2/src/types/config.ts
rename to packages/feedback/src/types/config.ts
diff --git a/packages/feedback2/src/types/form.ts b/packages/feedback/src/types/form.ts
similarity index 100%
rename from packages/feedback2/src/types/form.ts
rename to packages/feedback/src/types/form.ts
diff --git a/packages/feedback/src/types/index.ts b/packages/feedback/src/types/index.ts
index c2642b54d09c..cee1bae6ab87 100644
--- a/packages/feedback/src/types/index.ts
+++ b/packages/feedback/src/types/index.ts
@@ -1,179 +1,19 @@
-import type { Primitive } from '@sentry/types';
-
-import type { ActorComponent } from '../widget/Actor';
-import type { DialogComponent } from '../widget/Dialog';
-
-export type SentryTags = { [key: string]: Primitive } | undefined;
-
-export interface SendFeedbackData {
-  feedback: {
-    message: string;
-    url: string;
-    email?: string;
-    replay_id?: string;
-    name?: string;
-    source?: string;
-  };
-}
-
-export interface SendFeedbackOptions {
-  /**
-   * Should include replay with the feedback?
-   */
-  includeReplay?: boolean;
-}
-
-/**
- * Feedback data expected from UI/form
- */
-export interface FeedbackFormData {
-  message: string;
-  email?: string;
-  name?: string;
-}
-
-/**
- * General feedback configuration
- */
-export interface FeedbackGeneralConfiguration {
-  /**
-   * id to use for the main widget container (this will host the shadow DOM)
-   */
-  id: string;
-
-  /**
-   * Show the Sentry branding
-   */
-  showBranding: boolean;
-
-  /**
-   * Auto-inject default Feedback actor button to the DOM when integration is
-   * added.
-   */
-  autoInject: boolean;
-
-  /**
-   * Should the email field be required?
-   */
-  isEmailRequired: boolean;
-
-  /**
-   * Should the name field be required?
-   */
-  isNameRequired: boolean;
-
-  /**
-   * Should the email input field be visible? Note: email will still be collected if set via `Sentry.setUser()`
-   */
-  showEmail: boolean;
-
-  /**
-   * Should the name input field be visible? Note: name will still be collected if set via `Sentry.setUser()`
-   */
-  showName: boolean;
-
-  /**
-   * Fill in email/name input fields with Sentry user context if it exists.
-   * The value of the email/name keys represent the properties of your user context.
-   */
-  useSentryUser: {
-    email: string;
-    name: string;
-  };
-}
-
-/**
- * Theme-related configuration
- */
-export interface FeedbackThemeConfiguration {
-  /**
-   * The colorscheme to use. "system" will choose the scheme based on the user's system settings
-   */
-  colorScheme: 'system' | 'light' | 'dark';
-
-  /**
-   * Light theme customization, will be merged with default theme values.
-   */
-  themeLight: FeedbackTheme;
-  /**
-   * Dark theme customization, will be merged with default theme values.
-   */
+import type { Attachment } from '@sentry/types';
+import type { ComponentType } from 'preact';
+import type {
+  FeedbackCallbacks,
+  FeedbackGeneralConfiguration,
+  FeedbackTextConfiguration,
+  FeedbackThemeConfiguration,
+} from './config';
+import type { FeedbackTheme } from './theme';
+
+export type { FeedbackFormData } from './form';
+
+export { FeedbackTheme };
+export interface FeedbackThemes {
   themeDark: FeedbackTheme;
-}
-
-/**
- * All of the different text labels that can be customized
- */
-export interface FeedbackTextConfiguration {
-  /**
-   * The label for the Feedback widget button that opens the dialog
-   */
-  buttonLabel: string;
-  /**
-   * The label for the Feedback form cancel button that closes dialog
-   */
-  cancelButtonLabel: string;
-  /**
-   * The label for the Feedback form submit button that sends feedback
-   */
-  submitButtonLabel: string;
-  /**
-   * The title of the Feedback form
-   */
-  formTitle: string;
-  /**
-   * Label for the email input
-   */
-  emailLabel: string;
-  /**
-   * Placeholder text for Feedback email input
-   */
-  emailPlaceholder: string;
-  /**
-   * Label for the message input
-   */
-  messageLabel: string;
-  /**
-   * Placeholder text for Feedback message input
-   */
-  messagePlaceholder: string;
-  /**
-   * Label for the name input
-   */
-  nameLabel: string;
-  /**
-   * Placeholder text for Feedback name input
-   */
-  namePlaceholder: string;
-  /**
-   * Message after feedback was sent successfully
-   */
-  successMessageText: string;
-}
-
-/**
- * The public callbacks available for the feedback integration
- */
-export interface FeedbackCallbacks {
-  /**
-   * Callback when form is closed
-   */
-  onFormClose?: () => void;
-
-  /**
-   * Callback when form is opened
-   */
-  onFormOpen?: () => void;
-
-  /**
-   * Callback when feedback is successfully submitted
-   */
-  onSubmitSuccess?: () => void;
-
-  /**
-   * Callback when feedback is unsuccessfully submitted
-   */
-  onSubmitError?: () => void;
+  themeLight: FeedbackTheme;
 }
 
 /**
@@ -187,6 +27,8 @@ export interface FeedbackInternalOptions
 
 /**
  * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
  */
 export interface OptionalFeedbackConfiguration
   extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
@@ -194,149 +36,66 @@ export interface OptionalFeedbackConfiguration
   themeDark?: Partial<FeedbackTheme>;
 }
 
-export interface FeedbackTheme {
-  /**
-   * Font family for widget
-   */
-  fontFamily: string;
-  /**
-   * Font size for widget
-   */
-  fontSize: string;
-  /**
-   * Background color for actor and dialog
-   */
-  background: string;
-  /**
-   * Background color on hover
-   */
-  backgroundHover: string;
-  /**
-   * Border styling for actor and dialog
-   */
-  border: string;
-  /**
-   * Border radius styling for actor
-   */
-  borderRadius: string;
-  /**
-   * Box shadow for actor and dialog
-   */
-  boxShadow: string;
-  /**
-   * Foreground color (i.e. text color)
-   */
-  foreground: string;
-  /**
-   * Success color
-   */
-  success: string;
-  /**
-   * Error color
-   */
-  error: string;
+/**
+ * Partial configuration that overrides default configuration values
+ *
+ * This is the config that gets passed into the integration constructor
+ */
+export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;
 
-  /**
-   * Background color for the submit button
-   */
-  submitBackground: string;
-  /**
-   * Background color when hovering over the submit button
-   */
-  submitBackgroundHover: string;
-  /**
-   * Border style for the submit button
-   */
-  submitBorder: string;
-  /**
-   * Border style for the submit button, in the focued state
-   */
-  submitOutlineFocus: string;
-  /**
-   * Foreground color for the submit button
-   */
-  submitForeground: string;
+export interface SendFeedbackParams {
+  message: string;
+  name?: string;
+  email?: string;
+  attachments?: Attachment[];
+  url?: string;
+  source?: string;
+}
 
+export interface SendFeedbackOptions {
   /**
-   * Foreground color for the submit button, in the hover state
+   * Should include replay with the feedback?
    */
-  submitForegroundHover: string;
+  includeReplay?: boolean;
+}
 
+export interface Dialog {
   /**
-   * Background color for the cancel button
-   */
-  cancelBackground: string;
-  /**
-   * Background color when hovering over the cancel button
+   * The HTMLElement that is containing all the form content
    */
-  cancelBackgroundHover: string;
-  /**
-   * Border style for the cancel button
-   */
-  cancelBorder: string;
-  /**
-   * Border style for the cancel button, in the focued state
-   */
-  cancelOutlineFocus: string;
-  /**
-   * Foreground color for the cancel button
-   */
-  cancelForeground: string;
-  /**
-   * Foreground color for the cancel button, in the hover state
-   */
-  cancelForegroundHover: string;
+  el: HTMLElement;
 
   /**
-   * Background color for form inputs
+   * Insert the Dialog into the Shadow DOM.
+   *
+   * The Dialog starts in the `closed` state where no inner HTML is rendered.
    */
-  inputBackground: string;
+  appendToDom: () => void;
+
   /**
-   * Foreground color for form inputs
+   * Remove the dialog from the Shadow DOM
    */
-  inputForeground: string;
+  removeFromDom: () => void;
+
   /**
-   * Border styles for form inputs
+   * Open/Show the dialog & form inside it
    */
-  inputBorder: string;
+  open: () => void;
+
   /**
-   * Border styles for form inputs when focused
+   * Close/Hide the dialog & form inside it
    */
-  inputOutlineFocus: string;
+  close: () => void;
+}
+
+export interface ScreenshotInput {
   /**
-   * Border radius for dialog
+   * The preact component
    */
-  formBorderRadius: string;
+  input: ComponentType<{ onError: (error: Error) => void }>;
+
   /**
-   * Border radius for form inputs
+   * The image/screenshot bytes
    */
-  formContentBorderRadius: string;
-}
-
-export interface FeedbackThemes {
-  dark: FeedbackTheme;
-  light: FeedbackTheme;
-}
-
-export interface FeedbackComponent<T extends HTMLElement> {
-  el: T | null;
-}
-
-/**
- * A widget consists of:
- *   - actor button [that opens dialog]
- *   - dialog + feedback form
- *   - shadow root?
- */
-export interface FeedbackWidget {
-  actor: ActorComponent | undefined;
-  dialog: DialogComponent | undefined;
-
-  showActor: () => void;
-  hideActor: () => void;
-  removeActor: () => void;
-
-  openDialog: () => void;
-  closeDialog: () => void;
-  removeDialog: () => void;
+  value: () => Promise<Attachment | undefined>;
 }
diff --git a/packages/feedback2/src/types/theme.ts b/packages/feedback/src/types/theme.ts
similarity index 100%
rename from packages/feedback2/src/types/theme.ts
rename to packages/feedback/src/types/theme.ts
diff --git a/packages/feedback/src/debug-build.ts b/packages/feedback/src/util/debug-build.ts
similarity index 100%
rename from packages/feedback/src/debug-build.ts
rename to packages/feedback/src/util/debug-build.ts
diff --git a/packages/feedback/src/util/handleFeedbackSubmit.ts b/packages/feedback/src/util/handleFeedbackSubmit.ts
deleted file mode 100644
index a3bf57fcbfa0..000000000000
--- a/packages/feedback/src/util/handleFeedbackSubmit.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { TransportMakeRequestResponse } from '@sentry/types';
-import { logger, resolvedSyncPromise } from '@sentry/utils';
-
-import { FEEDBACK_WIDGET_SOURCE } from '../constants';
-import { DEBUG_BUILD } from '../debug-build';
-import { sendFeedback } from '../sendFeedback';
-import type { FeedbackFormData, SendFeedbackOptions } from '../types';
-import type { DialogComponent } from '../widget/Dialog';
-
-/**
- * Handles UI behavior of dialog when feedback is submitted, calls
- * `sendFeedback` to send feedback.
- */
-export async function handleFeedbackSubmit(
-  dialog: DialogComponent | null,
-  feedback: FeedbackFormData,
-  options?: SendFeedbackOptions,
-): Promise<TransportMakeRequestResponse> {
-  if (!dialog) {
-    // Not sure when this would happen
-    return resolvedSyncPromise({});
-  }
-
-  const showFetchError = (): void => {
-    if (!dialog) {
-      return;
-    }
-    dialog.showError('There was a problem submitting feedback, please wait and try again.');
-  };
-
-  dialog.hideError();
-
-  try {
-    const resp = await sendFeedback({ ...feedback, source: FEEDBACK_WIDGET_SOURCE }, options);
-
-    // Success!
-    return resp;
-  } catch (err) {
-    DEBUG_BUILD && logger.error(err);
-    showFetchError();
-  }
-
-  return resolvedSyncPromise({});
-}
diff --git a/packages/feedback2/src/util/isScreenshotSupported.ts b/packages/feedback/src/util/isScreenshotSupported.ts
similarity index 100%
rename from packages/feedback2/src/util/isScreenshotSupported.ts
rename to packages/feedback/src/util/isScreenshotSupported.ts
diff --git a/packages/feedback/src/util/mergeOptions.ts b/packages/feedback/src/util/mergeOptions.ts
index bfaae524c7f6..da7f4c271f14 100644
--- a/packages/feedback/src/util/mergeOptions.ts
+++ b/packages/feedback/src/util/mergeOptions.ts
@@ -1,4 +1,4 @@
-import type { FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
+import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
 
 /**
  * Quick and dirty deep merge for the Feedback integration options
@@ -10,6 +10,26 @@ export function mergeOptions(
   return {
     ...defaultOptions,
     ...optionOverrides,
+    onFormOpen: () => {
+      optionOverrides.onFormOpen && optionOverrides.onFormOpen();
+      defaultOptions.onFormOpen && defaultOptions.onFormOpen();
+    },
+    onFormClose: () => {
+      optionOverrides.onFormClose && optionOverrides.onFormClose();
+      defaultOptions.onFormClose && defaultOptions.onFormClose();
+    },
+    onSubmitSuccess: (data: FeedbackFormData) => {
+      optionOverrides.onSubmitSuccess && optionOverrides.onSubmitSuccess(data);
+      defaultOptions.onSubmitSuccess && defaultOptions.onSubmitSuccess(data);
+    },
+    onSubmitError: (error: Error) => {
+      optionOverrides.onSubmitError && optionOverrides.onSubmitError(error);
+      defaultOptions.onSubmitError && defaultOptions.onSubmitError(error);
+    },
+    onFormSubmitted: () => {
+      optionOverrides.onFormSubmitted && optionOverrides.onFormSubmitted();
+      defaultOptions.onFormSubmitted && defaultOptions.onFormSubmitted();
+    },
     themeDark: {
       ...defaultOptions.themeDark,
       ...optionOverrides.themeDark,
diff --git a/packages/feedback/src/util/prepareFeedbackEvent.ts b/packages/feedback/src/util/prepareFeedbackEvent.ts
index 65a61085bda3..0d66d251c6ff 100644
--- a/packages/feedback/src/util/prepareFeedbackEvent.ts
+++ b/packages/feedback/src/util/prepareFeedbackEvent.ts
@@ -1,5 +1,4 @@
-import { getIsolationScope } from '@sentry/core';
-import { prepareEvent } from '@sentry/core';
+import { getIsolationScope, prepareEvent } from '@sentry/core';
 import type { Client, FeedbackEvent, Scope } from '@sentry/types';
 
 interface PrepareFeedbackEventParams {
@@ -14,9 +13,11 @@ export async function prepareFeedbackEvent({
   client,
   scope,
   event,
-}: PrepareFeedbackEventParams): Promise<FeedbackEvent | null> {
+}: PrepareFeedbackEventParams): Promise<FeedbackEvent> {
   const eventHint = {};
-  client.emit('preprocessEvent', event, eventHint);
+  if (client.emit) {
+    client.emit('preprocessEvent', event, eventHint);
+  }
 
   const preparedEvent = (await prepareEvent(
     client.getOptions(),
@@ -30,7 +31,7 @@ export async function prepareFeedbackEvent({
   if (preparedEvent === null) {
     // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
     client.recordDroppedEvent('event_processor', 'feedback', event);
-    return null;
+    throw new Error('Unable to prepare event');
   }
 
   // This normally happens in browser client "_prepareEvent"
diff --git a/packages/feedback/src/util/sendFeedbackRequest.ts b/packages/feedback/src/util/sendFeedbackRequest.ts
deleted file mode 100644
index 341611d94085..000000000000
--- a/packages/feedback/src/util/sendFeedbackRequest.ts
+++ /dev/null
@@ -1,125 +0,0 @@
-import { createEventEnvelope, getClient, withScope } from '@sentry/core';
-import type { FeedbackEvent, TransportMakeRequestResponse } from '@sentry/types';
-import { resolvedSyncPromise } from '@sentry/utils';
-
-import { FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE } from '../constants';
-import type { SendFeedbackData, SendFeedbackOptions } from '../types';
-import { prepareFeedbackEvent } from './prepareFeedbackEvent';
-
-/**
- * Send feedback using transport
- */
-export async function sendFeedbackRequest(
-  { feedback: { message, email, name, source, url } }: SendFeedbackData,
-  { includeReplay = true }: SendFeedbackOptions = {},
-): Promise<TransportMakeRequestResponse> {
-  const client = getClient();
-  const transport = client && client.getTransport();
-  const dsn = client && client.getDsn();
-
-  if (!client || !transport || !dsn) {
-    return resolvedSyncPromise({});
-  }
-
-  const baseEvent: FeedbackEvent = {
-    contexts: {
-      feedback: {
-        contact_email: email,
-        name,
-        message,
-        url,
-        source,
-      },
-    },
-    type: 'feedback',
-  };
-
-  return withScope(async scope => {
-    // No use for breadcrumbs in feedback
-    scope.clearBreadcrumbs();
-
-    if ([FEEDBACK_API_SOURCE, FEEDBACK_WIDGET_SOURCE].includes(String(source))) {
-      scope.setLevel('info');
-    }
-
-    const feedbackEvent = await prepareFeedbackEvent({
-      scope,
-      client,
-      event: baseEvent,
-    });
-
-    if (!feedbackEvent) {
-      return resolvedSyncPromise({});
-    }
-
-    client.emit('beforeSendFeedback', feedbackEvent, { includeReplay: Boolean(includeReplay) });
-
-    const envelope = createEventEnvelope(feedbackEvent, dsn, client.getOptions()._metadata, client.getOptions().tunnel);
-
-    let response: TransportMakeRequestResponse;
-
-    try {
-      response = await transport.send(envelope);
-    } catch (err) {
-      const error = new Error('Unable to send Feedback');
-
-      try {
-        // In case browsers don't allow this property to be writable
-        // @ts-expect-error This needs lib es2022 and newer
-        error.cause = err;
-      } catch {
-        // nothing to do
-      }
-      throw error;
-    }
-
-    // Require valid status codes, otherwise can assume feedback was not sent successfully
-    if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
-      throw new Error('Unable to send Feedback');
-    }
-
-    return response;
-  });
-}
-
-/*
- * For reference, the fully built event looks something like this:
- * {
- *     "type": "feedback",
- *     "event_id": "d2132d31b39445f1938d7e21b6bf0ec4",
- *     "timestamp": 1597977777.6189718,
- *     "dist": "1.12",
- *     "platform": "javascript",
- *     "environment": "production",
- *     "release": 42,
- *     "tags": {"transaction": "/organizations/:orgId/performance/:eventSlug/"},
- *     "sdk": {"name": "name", "version": "version"},
- *     "user": {
- *         "id": "123",
- *         "username": "user",
- *         "email": "user@site.com",
- *         "ip_address": "192.168.11.12",
- *     },
- *     "request": {
- *         "url": None,
- *         "headers": {
- *             "user-Agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.5 Safari/605.1.15"
- *         },
- *     },
- *     "contexts": {
- *         "feedback": {
- *             "message": "test message",
- *             "contact_email": "test@example.com",
- *             "type": "feedback",
- *         },
- *         "trace": {
- *             "trace_id": "4C79F60C11214EB38604F4AE0781BFB2",
- *             "span_id": "FA90FDEAD5F74052",
- *             "type": "trace",
- *         },
- *         "replay": {
- *             "replay_id": "e2d42047b1c5431c8cba85ee2a8ab25d",
- *         },
- *     },
- *   }
- */
diff --git a/packages/feedback2/src/util/validate.ts b/packages/feedback/src/util/validate.ts
similarity index 100%
rename from packages/feedback2/src/util/validate.ts
rename to packages/feedback/src/util/validate.ts
diff --git a/packages/feedback/src/widget/Actor.css.ts b/packages/feedback/src/widget/Actor.css.ts
deleted file mode 100644
index 44bd60a3418e..000000000000
--- a/packages/feedback/src/widget/Actor.css.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Creates <style> element for widget actor (button that opens the dialog)
- */
-export function createActorStyles(d: Document): HTMLStyleElement {
-  const style = d.createElement('style');
-  style.textContent = `
-.widget__actor {
-  line-height: 25px;
-
-  display: flex;
-  align-items: center;
-  gap: 8px;
-
-  border-radius: var(--border-radius);
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 12px 16px;
-  text-decoration: none;
-  z-index: 9000;
-
-  color: var(--foreground);
-  background-color: var(--background);
-  border: var(--border);
-  box-shadow: var(--box-shadow);
-  opacity: 1;
-  transition: opacity 0.1s ease-in-out;
-}
-
-.widget__actor:hover {
-  background-color: var(--background-hover);
-}
-
-.widget__actor svg {
-  width: 16px;
-  height: 16px;
-}
-
-.widget__actor--hidden {
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-
-.widget__actor__text {
-}
-
-.feedback-icon path {
-  fill: var(--foreground);
-}
-`;
-
-  return style;
-}
diff --git a/packages/feedback/src/widget/Actor.ts b/packages/feedback/src/widget/Actor.ts
deleted file mode 100644
index 2b3239006e0b..000000000000
--- a/packages/feedback/src/widget/Actor.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
-import { Icon } from './Icon';
-import { createElement } from './util/createElement';
-
-export interface ActorProps extends Pick<FeedbackInternalOptions, 'buttonLabel'> {
-  onClick?: (e: MouseEvent) => void;
-}
-
-export interface ActorComponent extends FeedbackComponent<HTMLButtonElement> {
-  /**
-   * Shows the actor element
-   */
-  show: () => void;
-  /**
-   * Hides the actor element
-   */
-  hide: () => void;
-}
-
-/**
- *
- */
-export function Actor({ buttonLabel, onClick }: ActorProps): ActorComponent {
-  function _handleClick(e: MouseEvent): void {
-    onClick && onClick(e);
-  }
-
-  const el = createElement(
-    'button',
-    {
-      type: 'button',
-      className: 'widget__actor',
-      ['aria-label']: buttonLabel,
-      ['aria-hidden']: 'false',
-    },
-    Icon().el,
-    buttonLabel
-      ? createElement(
-          'span',
-          {
-            className: 'widget__actor__text',
-          },
-          buttonLabel,
-        )
-      : null,
-  );
-
-  el.addEventListener('click', _handleClick);
-
-  return {
-    get el() {
-      return el;
-    },
-    show: (): void => {
-      el.classList.remove('widget__actor--hidden');
-      el.setAttribute('aria-hidden', 'false');
-    },
-    hide: (): void => {
-      el.classList.add('widget__actor--hidden');
-      el.setAttribute('aria-hidden', 'true');
-    },
-  };
-}
diff --git a/packages/feedback/src/widget/Dialog.css.ts b/packages/feedback/src/widget/Dialog.css.ts
deleted file mode 100644
index b3924f00524a..000000000000
--- a/packages/feedback/src/widget/Dialog.css.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * Creates <style> element for widget dialog
- */
-export function createDialogStyles(d: Document): HTMLStyleElement {
-  const style = d.createElement('style');
-
-  style.textContent = `
-.dialog {
-  line-height: 25px;
-  background-color: rgba(0, 0, 0, 0.05);
-  border: none;
-  position: fixed;
-  inset: 0;
-  z-index: 10000;
-  width: 100vw;
-  height: 100vh;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  opacity: 1;
-  transition: opacity 0.2s ease-in-out;
-}
-
-.dialog:not([open]) {
-  opacity: 0;
-  pointer-events: none;
-  visibility: hidden;
-}
-.dialog:not([open]) .dialog__content {
-  transform: translate(0, -16px) scale(0.98);
-}
-
-.dialog__content {
-  position: fixed;
-  left: var(--left);
-  right: var(--right);
-  bottom: var(--bottom);
-  top: var(--top);
-
-  border: var(--border);
-  border-radius: var(--form-border-radius);
-  background-color: var(--background);
-  color: var(--foreground);
-
-  width: 320px;
-  max-width: 100%;
-  max-height: calc(100% - 2rem);
-  display: flex;
-  flex-direction: column;
-  box-shadow: var(--box-shadow);
-  transition: transform 0.2s ease-in-out;
-  transform: translate(0, 0) scale(1);
-}
-
-.dialog__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 20px;
-  font-weight: 600;
-  padding: 24px 24px 0 24px;
-  margin: 0;
-  margin-bottom: 16px;
-}
-
-.brand-link {
-  display: inline-flex;
-}
-
-.error {
-  color: var(--error);
-  margin-bottom: 16px;
-}
-
-.form {
-  display: grid;
-  overflow: auto;
-  flex-direction: column;
-  gap: 16px;
-  padding: 0 24px 24px;
-}
-
-.form__error-container {
-  color: var(--error);
-}
-
-.form__error-container--hidden {
-  display: none;
-}
-
-.form__label {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  margin: 0px;
-}
-
-.form__label__text {
-  display: grid;
-  gap: 4px;
-  align-items: center;
-  grid-auto-flow: column;
-  grid-auto-columns: max-content;
-}
-
-.form__label__text--required {
-  font-size: 0.85em;
-}
-
-.form__input {
-  font-family: inherit;
-  line-height: inherit;
-  background-color: var(--input-background);
-  box-sizing: border-box;
-  border: var(--input-border);
-  border-radius: var(--form-content-border-radius);
-  color: var(--input-foreground);
-  font-size: 14px;
-  font-weight: 500;
-  padding: 6px 12px;
-}
-
-.form__input:focus-visible {
-  outline: 1px auto var(--input-outline-focus);
-}
-
-.form__input--textarea {
-  font-family: inherit;
-  resize: vertical;
-}
-
-.btn-group {
-  display: grid;
-  gap: 8px;
-  margin-top: 8px;
-}
-
-.btn {
-  line-height: inherit;
-  border: var(--cancel-border);
-  border-radius: var(--form-content-border-radius);
-  cursor: pointer;
-  font-size: 14px;
-  font-weight: 600;
-  padding: 6px 16px;
-}
-.btn[disabled] {
-  opacity: 0.6;
-  pointer-events: none;
-}
-
-.btn--primary {
-  background-color: var(--submit-background);
-  border-color: var(--submit-border);
-  color: var(--submit-foreground);
-}
-.btn--primary:hover {
-  background-color: var(--submit-background-hover);
-  color: var(--submit-foreground-hover);
-}
-.btn--primary:focus-visible {
-  outline: 1px auto var(--submit-outline-focus);
-}
-
-.btn--default {
-  background-color: var(--cancel-background);
-  color: var(--cancel-foreground);
-  font-weight: 500;
-}
-.btn--default:hover {
-  background-color: var(--cancel-background-hover);
-  color: var(--cancel-foreground-hover);
-}
-.btn--default:focus-visible {
-  outline: 1px auto var(--cancel-outline-focus);
-}
-
-.success-message {
-  background-color: var(--background);
-  border: var(--border);
-  border-radius: var(--border-radius);
-  box-shadow: var(--box-shadow);
-  font-weight: 600;
-  color: var(--success);
-  padding: 12px 24px;
-  line-height: 25px;
-  display: grid;
-  align-items: center;
-  grid-auto-flow: column;
-  gap: 6px;
-  cursor: default;
-}
-
-.success-icon path {
-  fill: var(--success);
-}
-`;
-
-  return style;
-}
diff --git a/packages/feedback/src/widget/Dialog.ts b/packages/feedback/src/widget/Dialog.ts
deleted file mode 100644
index 84b4318b34d1..000000000000
--- a/packages/feedback/src/widget/Dialog.ts
+++ /dev/null
@@ -1,162 +0,0 @@
-import type { FeedbackComponent, FeedbackInternalOptions } from '../types';
-import type { FormComponentProps } from './Form';
-import { Form } from './Form';
-import { Logo } from './Logo';
-import { createElement } from './util/createElement';
-
-export interface DialogProps
-  extends FormComponentProps,
-    Pick<FeedbackInternalOptions, 'formTitle' | 'showBranding' | 'colorScheme'> {
-  onClosed?: () => void;
-}
-
-export interface DialogComponent extends FeedbackComponent<HTMLDialogElement> {
-  /**
-   * Shows the error message
-   */
-  showError: (message: string) => void;
-
-  /**
-   * Hides the error message
-   */
-  hideError: () => void;
-
-  /**
-   * Opens and shows the dialog and form
-   */
-  open: () => void;
-
-  /**
-   * Closes the dialog and form
-   */
-  close: () => void;
-
-  /**
-   * Check if dialog is currently opened
-   */
-  checkIsOpen: () => boolean;
-}
-
-/**
- * Feedback dialog component that has the form
- */
-export function Dialog({
-  formTitle,
-  showBranding,
-  showName,
-  showEmail,
-  isNameRequired,
-  isEmailRequired,
-  colorScheme,
-  defaultName,
-  defaultEmail,
-  onClosed,
-  onCancel,
-  onSubmit,
-  ...textLabels
-}: DialogProps): DialogComponent {
-  let el: HTMLDialogElement | null = null;
-
-  /**
-   * Handles when the dialog is clicked. In our case, the dialog is the
-   * semi-transparent bg behind the form. We want clicks outside of the form to
-   * hide the form.
-   */
-  function handleDialogClick(): void {
-    close();
-
-    // Only this should trigger `onClose`, we don't want the `close()` method to
-    // trigger it, otherwise it can cause cycles.
-    onClosed && onClosed();
-  }
-
-  /**
-   * Close the dialog
-   */
-  function close(): void {
-    if (el) {
-      el.open = false;
-    }
-  }
-
-  /**
-   * Opens the dialog
-   */
-  function open(): void {
-    if (el) {
-      el.open = true;
-    }
-  }
-
-  /**
-   * Check if dialog is currently opened
-   */
-  function checkIsOpen(): boolean {
-    return (el && el.open === true) || false;
-  }
-
-  const {
-    el: formEl,
-    showError,
-    hideError,
-  } = Form({
-    showEmail,
-    showName,
-    isEmailRequired,
-    isNameRequired,
-
-    defaultName,
-    defaultEmail,
-    onSubmit,
-    onCancel,
-    ...textLabels,
-  });
-
-  el = createElement(
-    'dialog',
-    {
-      className: 'dialog',
-      open: true,
-      onClick: handleDialogClick,
-    },
-    createElement(
-      'div',
-      {
-        className: 'dialog__content',
-        onClick: e => {
-          // Stop event propagation so clicks on content modal do not propagate to dialog (which will close dialog)
-          e.stopPropagation();
-        },
-      },
-      createElement(
-        'h2',
-        { className: 'dialog__header' },
-        formTitle,
-        showBranding &&
-          createElement(
-            'a',
-            {
-              className: 'brand-link',
-              target: '_blank',
-              href: 'https://sentry.io/welcome/',
-              title: 'Powered by Sentry',
-              rel: 'noopener noreferrer',
-            },
-            Logo({ colorScheme }).el,
-          ),
-      ),
-      formEl,
-    ),
-  );
-
-  return {
-    get el() {
-      return el;
-    },
-    showError,
-    hideError,
-    open,
-    close,
-    checkIsOpen,
-  };
-}
diff --git a/packages/feedback/src/widget/Form.ts b/packages/feedback/src/widget/Form.ts
deleted file mode 100644
index 9b90cf547477..000000000000
--- a/packages/feedback/src/widget/Form.ts
+++ /dev/null
@@ -1,239 +0,0 @@
-import type { FeedbackComponent, FeedbackFormData, FeedbackInternalOptions, FeedbackTextConfiguration } from '../types';
-import { SubmitButton } from './SubmitButton';
-import { createElement } from './util/createElement';
-
-export interface FormComponentProps
-  extends Pick<
-    FeedbackInternalOptions,
-    | 'showName'
-    | 'showEmail'
-    | 'isNameRequired'
-    | 'isEmailRequired'
-    | Exclude<keyof FeedbackTextConfiguration, 'buttonLabel' | 'formTitle' | 'successMessageText'>
-  > {
-  /**
-   * A default name value to render the input with. Empty strings are ok.
-   */
-  defaultName: string;
-  /**
-   * A default email value to render the input with. Empty strings are ok.
-   */
-  defaultEmail: string;
-  onCancel?: (e: Event) => void;
-  onSubmit?: (feedback: FeedbackFormData) => void;
-}
-
-interface FormComponent extends FeedbackComponent<HTMLFormElement> {
-  /**
-   * Shows the error message
-   */
-  showError: (message: string) => void;
-
-  /**
-   * Hides the error message
-   */
-  hideError: () => void;
-}
-
-function retrieveStringValue(formData: FormData, key: string): string {
-  const value = formData.get(key);
-  if (typeof value === 'string') {
-    return value.trim();
-  }
-  return '';
-}
-
-/**
- * Creates the form element
- */
-export function Form({
-  nameLabel,
-  namePlaceholder,
-  emailLabel,
-  emailPlaceholder,
-  messageLabel,
-  messagePlaceholder,
-  cancelButtonLabel,
-  submitButtonLabel,
-
-  showName,
-  showEmail,
-  isNameRequired,
-  isEmailRequired,
-
-  defaultName,
-  defaultEmail,
-  onCancel,
-  onSubmit,
-}: FormComponentProps): FormComponent {
-  const { el: submitEl } = SubmitButton({
-    label: submitButtonLabel,
-  });
-
-  function handleSubmit(e: Event): void {
-    e.preventDefault();
-
-    if (!(e.target instanceof HTMLFormElement)) {
-      return;
-    }
-
-    try {
-      if (onSubmit) {
-        const formData = new FormData(e.target as HTMLFormElement);
-        const feedback = {
-          name: retrieveStringValue(formData, 'name'),
-          email: retrieveStringValue(formData, 'email'),
-          message: retrieveStringValue(formData, 'message'),
-        };
-
-        onSubmit(feedback);
-      }
-    } catch {
-      // pass
-    }
-  }
-
-  const errorEl = createElement('div', {
-    className: 'form__error-container form__error-container--hidden',
-    ['aria-hidden']: 'true',
-  });
-
-  function showError(message: string): void {
-    errorEl.textContent = message;
-    errorEl.classList.remove('form__error-container--hidden');
-    errorEl.setAttribute('aria-hidden', 'false');
-  }
-
-  function hideError(): void {
-    errorEl.textContent = '';
-    errorEl.classList.add('form__error-container--hidden');
-    errorEl.setAttribute('aria-hidden', 'true');
-  }
-
-  const nameEl = createElement('input', {
-    id: 'name',
-    type: showName ? 'text' : 'hidden',
-    ['aria-hidden']: showName ? 'false' : 'true',
-    name: 'name',
-    required: isNameRequired,
-    className: 'form__input',
-    placeholder: namePlaceholder,
-    value: defaultName,
-  });
-
-  const emailEl = createElement('input', {
-    id: 'email',
-    type: showEmail ? 'text' : 'hidden',
-    ['aria-hidden']: showEmail ? 'false' : 'true',
-    name: 'email',
-    required: isEmailRequired,
-    className: 'form__input',
-    placeholder: emailPlaceholder,
-    value: defaultEmail,
-  });
-
-  const messageEl = createElement('textarea', {
-    id: 'message',
-    autoFocus: 'true',
-    rows: '5',
-    name: 'message',
-    required: true,
-    className: 'form__input form__input--textarea',
-    placeholder: messagePlaceholder,
-  });
-
-  const cancelEl = createElement(
-    'button',
-    {
-      type: 'button',
-      className: 'btn btn--default',
-      ['aria-label']: cancelButtonLabel,
-      onClick: (e: Event) => {
-        onCancel && onCancel(e);
-      },
-    },
-    cancelButtonLabel,
-  );
-
-  const formEl = createElement(
-    'form',
-    {
-      className: 'form',
-      onSubmit: handleSubmit,
-    },
-    [
-      errorEl,
-
-      showName &&
-        createElement(
-          'label',
-          {
-            htmlFor: 'name',
-            className: 'form__label',
-          },
-          [
-            createElement(
-              'span',
-              { className: 'form__label__text' },
-              nameLabel,
-              isNameRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-            ),
-            nameEl,
-          ],
-        ),
-      !showName && nameEl,
-
-      showEmail &&
-        createElement(
-          'label',
-          {
-            htmlFor: 'email',
-            className: 'form__label',
-          },
-          [
-            createElement(
-              'span',
-              { className: 'form__label__text' },
-              emailLabel,
-              isEmailRequired && createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-            ),
-            emailEl,
-          ],
-        ),
-      !showEmail && emailEl,
-
-      createElement(
-        'label',
-        {
-          htmlFor: 'message',
-          className: 'form__label',
-        },
-        [
-          createElement(
-            'span',
-            { className: 'form__label__text' },
-            messageLabel,
-            createElement('span', { className: 'form__label__text--required' }, ' (required)'),
-          ),
-          messageEl,
-        ],
-      ),
-
-      createElement(
-        'div',
-        {
-          className: 'btn-group',
-        },
-        [submitEl, cancelEl],
-      ),
-    ],
-  );
-
-  return {
-    get el() {
-      return formEl;
-    },
-    showError,
-    hideError,
-  };
-}
diff --git a/packages/feedback/src/widget/Icon.ts b/packages/feedback/src/widget/Icon.ts
deleted file mode 100644
index 29b2d25bee8d..000000000000
--- a/packages/feedback/src/widget/Icon.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-import { WINDOW } from '../constants';
-import { setAttributesNS } from '../util/setAttributesNS';
-
-const SIZE = 20;
-const XMLNS = 'http://www.w3.org/2000/svg';
-
-interface IconReturn {
-  el: SVGElement;
-}
-
-/**
- * Feedback Icon
- */
-export function Icon(): IconReturn {
-  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
-    WINDOW.document.createElementNS(XMLNS, tagName);
-  const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'feedback-icon',
-    width: `${SIZE}`,
-    height: `${SIZE}`,
-    viewBox: `0 0 ${SIZE} ${SIZE}`,
-    fill: 'none',
-  });
-
-  const g = setAttributesNS(createElementNS('g'), {
-    clipPath: 'url(#clip0_57_80)',
-  });
-
-  const path = setAttributesNS(createElementNS('path'), {
-    ['fill-rule']: 'evenodd',
-    ['clip-rule']: 'evenodd',
-    d: 'M15.6622 15H12.3997C12.2129 14.9959 12.031 14.9396 11.8747 14.8375L8.04965 12.2H7.49956V19.1C7.4875 19.3348 7.3888 19.5568 7.22256 19.723C7.05632 19.8892 6.83435 19.9879 6.59956 20H2.04956C1.80193 19.9968 1.56535 19.8969 1.39023 19.7218C1.21511 19.5467 1.1153 19.3101 1.11206 19.0625V12.2H0.949652C0.824431 12.2017 0.700142 12.1783 0.584123 12.1311C0.468104 12.084 0.362708 12.014 0.274155 11.9255C0.185602 11.8369 0.115689 11.7315 0.0685419 11.6155C0.0213952 11.4995 -0.00202913 11.3752 -0.00034808 11.25V3.75C-0.00900498 3.62067 0.0092504 3.49095 0.0532651 3.36904C0.0972798 3.24712 0.166097 3.13566 0.255372 3.04168C0.344646 2.94771 0.452437 2.87327 0.571937 2.82307C0.691437 2.77286 0.82005 2.74798 0.949652 2.75H8.04965L11.8747 0.1625C12.031 0.0603649 12.2129 0.00407221 12.3997 0H15.6622C15.9098 0.00323746 16.1464 0.103049 16.3215 0.278167C16.4966 0.453286 16.5964 0.689866 16.5997 0.9375V3.25269C17.3969 3.42959 18.1345 3.83026 18.7211 4.41679C19.5322 5.22788 19.9878 6.32796 19.9878 7.47502C19.9878 8.62209 19.5322 9.72217 18.7211 10.5333C18.1345 11.1198 17.3969 11.5205 16.5997 11.6974V14.0125C16.6047 14.1393 16.5842 14.2659 16.5395 14.3847C16.4948 14.5035 16.4268 14.6121 16.3394 14.7042C16.252 14.7962 16.147 14.8698 16.0307 14.9206C15.9144 14.9714 15.7891 14.9984 15.6622 15ZM1.89695 10.325H1.88715V4.625H8.33715C8.52423 4.62301 8.70666 4.56654 8.86215 4.4625L12.6872 1.875H14.7247V13.125H12.6872L8.86215 10.4875C8.70666 10.3835 8.52423 10.327 8.33715 10.325H2.20217C2.15205 10.3167 2.10102 10.3125 2.04956 10.3125C1.9981 10.3125 1.94708 10.3167 1.89695 10.325ZM2.98706 12.2V18.1625H5.66206V12.2H2.98706ZM16.5997 9.93612V5.01393C16.6536 5.02355 16.7072 5.03495 16.7605 5.04814C17.1202 5.13709 17.4556 5.30487 17.7425 5.53934C18.0293 5.77381 18.2605 6.06912 18.4192 6.40389C18.578 6.73866 18.6603 7.10452 18.6603 7.47502C18.6603 7.84552 18.578 8.21139 18.4192 8.54616C18.2605 8.88093 18.0293 9.17624 17.7425 9.41071C17.4556 9.64518 17.1202 9.81296 16.7605 9.90191C16.7072 9.91509 16.6536 9.9265 16.5997 9.93612Z',
-  });
-  svg.appendChild(g).appendChild(path);
-
-  const speakerDefs = createElementNS('defs');
-  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
-    id: 'clip0_57_80',
-  });
-
-  const speakerRect = setAttributesNS(createElementNS('rect'), {
-    width: `${SIZE}`,
-    height: `${SIZE}`,
-    fill: 'white',
-  });
-
-  speakerClipPathDef.appendChild(speakerRect);
-  speakerDefs.appendChild(speakerClipPathDef);
-
-  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
-
-  return {
-    get el() {
-      return svg;
-    },
-  };
-}
diff --git a/packages/feedback/src/widget/Logo.ts b/packages/feedback/src/widget/Logo.ts
deleted file mode 100644
index 9e286a970961..000000000000
--- a/packages/feedback/src/widget/Logo.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { WINDOW } from '../constants';
-import type { FeedbackInternalOptions } from '../types';
-import { setAttributesNS } from '../util/setAttributesNS';
-
-const XMLNS = 'http://www.w3.org/2000/svg';
-
-interface IconReturn {
-  el: SVGElement;
-}
-
-type Props = Pick<FeedbackInternalOptions, 'colorScheme'>;
-
-/**
- * Sentry Logo
- */
-export function Logo({ colorScheme }: Props): IconReturn {
-  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
-    WINDOW.document.createElementNS(XMLNS, tagName);
-  const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'sentry-logo',
-    width: '32',
-    height: '30',
-    viewBox: '0 0 72 66',
-    fill: 'none',
-  });
-
-  const path = setAttributesNS(createElementNS('path'), {
-    transform: 'translate(11, 11)',
-    d: 'M29,2.26a4.67,4.67,0,0,0-8,0L14.42,13.53A32.21,32.21,0,0,1,32.17,40.19H27.55A27.68,27.68,0,0,0,12.09,17.47L6,28a15.92,15.92,0,0,1,9.23,12.17H4.62A.76.76,0,0,1,4,39.06l2.94-5a10.74,10.74,0,0,0-3.36-1.9l-2.91,5a4.54,4.54,0,0,0,1.69,6.24A4.66,4.66,0,0,0,4.62,44H19.15a19.4,19.4,0,0,0-8-17.31l2.31-4A23.87,23.87,0,0,1,23.76,44H36.07a35.88,35.88,0,0,0-16.41-31.8l4.67-8a.77.77,0,0,1,1.05-.27c.53.29,20.29,34.77,20.66,35.17a.76.76,0,0,1-.68,1.13H40.6q.09,1.91,0,3.81h4.78A4.59,4.59,0,0,0,50,39.43a4.49,4.49,0,0,0-.62-2.28Z',
-  });
-  svg.append(path);
-
-  const defs = createElementNS('defs');
-  const style = createElementNS('style');
-
-  style.textContent = `
-    path {
-      fill: ${colorScheme === 'dark' ? '#fff' : '#362d59'};
-    }`;
-
-  if (colorScheme === 'system') {
-    style.textContent += `
-    @media (prefers-color-scheme: dark) {
-      path: {
-        fill: '#fff';
-      }
-    }
-    `;
-  }
-
-  defs.append(style);
-  svg.append(defs);
-
-  return {
-    get el() {
-      return svg;
-    },
-  };
-}
diff --git a/packages/feedback/src/widget/Main.css.ts b/packages/feedback/src/widget/Main.css.ts
deleted file mode 100644
index 32bb8048e678..000000000000
--- a/packages/feedback/src/widget/Main.css.ts
+++ /dev/null
@@ -1,83 +0,0 @@
-import type { FeedbackTheme, FeedbackThemes } from '../types';
-
-function getThemedCssVariables(theme: FeedbackTheme): string {
-  return `
-  --background: ${theme.background};
-  --background-hover: ${theme.backgroundHover};
-  --foreground: ${theme.foreground};
-  --error: ${theme.error};
-  --success: ${theme.success};
-  --border: ${theme.border};
-  --border-radius: ${theme.borderRadius};
-  --box-shadow: ${theme.boxShadow};
-
-  --submit-background: ${theme.submitBackground};
-  --submit-background-hover: ${theme.submitBackgroundHover};
-  --submit-border: ${theme.submitBorder};
-  --submit-outline-focus: ${theme.submitOutlineFocus};
-  --submit-foreground: ${theme.submitForeground};
-  --submit-foreground-hover: ${theme.submitForegroundHover};
-
-  --cancel-background: ${theme.cancelBackground};
-  --cancel-background-hover: ${theme.cancelBackgroundHover};
-  --cancel-border: ${theme.cancelBorder};
-  --cancel-outline-focus: ${theme.cancelOutlineFocus};
-  --cancel-foreground: ${theme.cancelForeground};
-  --cancel-foreground-hover: ${theme.cancelForegroundHover};
-
-  --input-background: ${theme.inputBackground};
-  --input-foreground: ${theme.inputForeground};
-  --input-border: ${theme.inputBorder};
-  --input-outline-focus: ${theme.inputOutlineFocus};
-
-  --form-border-radius: ${theme.formBorderRadius};
-  --form-content-border-radius: ${theme.formContentBorderRadius};
-  `;
-}
-
-/**
- * Creates <style> element for widget actor (button that opens the dialog)
- */
-export function createMainStyles(
-  d: Document,
-  colorScheme: 'system' | 'dark' | 'light',
-  themes: FeedbackThemes,
-): HTMLStyleElement {
-  const style = d.createElement('style');
-  style.textContent = `
-:host {
-  --bottom: 1rem;
-  --right: 1rem;
-  --top: auto;
-  --left: auto;
-  --z-index: 100000;
-  --font-family: ${themes.light.fontFamily};
-  --font-size: ${themes.light.fontSize};
-
-  position: fixed;
-  left: var(--left);
-  right: var(--right);
-  bottom: var(--bottom);
-  top: var(--top);
-  z-index: var(--z-index);
-
-  font-family: var(--font-family);
-  font-size: var(--font-size);
-
-  ${getThemedCssVariables(colorScheme === 'dark' ? themes.dark : themes.light)}
-}
-
-${
-  colorScheme === 'system'
-    ? `
-@media (prefers-color-scheme: dark) {
-  :host {
-    ${getThemedCssVariables(themes.dark)}
-  }
-}`
-    : ''
-}
-}`;
-
-  return style;
-}
diff --git a/packages/feedback/src/widget/SubmitButton.ts b/packages/feedback/src/widget/SubmitButton.ts
deleted file mode 100644
index aa654f61f903..000000000000
--- a/packages/feedback/src/widget/SubmitButton.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import type { FeedbackComponent } from '../types';
-import { createElement } from './util/createElement';
-
-export interface SubmitButtonProps {
-  label: string;
-}
-
-type SubmitButtonComponent = FeedbackComponent<HTMLButtonElement>;
-
-/**
- *
- */
-export function SubmitButton({ label }: SubmitButtonProps): SubmitButtonComponent {
-  const el = createElement(
-    'button',
-    {
-      type: 'submit',
-      className: 'btn btn--primary',
-      ['aria-label']: label,
-    },
-    label,
-  );
-
-  return {
-    el,
-  };
-}
diff --git a/packages/feedback/src/widget/SuccessIcon.ts b/packages/feedback/src/widget/SuccessIcon.ts
deleted file mode 100644
index 6092481672b9..000000000000
--- a/packages/feedback/src/widget/SuccessIcon.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { WINDOW } from '../constants';
-import { setAttributesNS } from '../util/setAttributesNS';
-
-const WIDTH = 16;
-const HEIGHT = 17;
-const XMLNS = 'http://www.w3.org/2000/svg';
-
-interface IconReturn {
-  el: SVGElement;
-}
-
-/**
- * Success Icon (checkmark)
- */
-export function SuccessIcon(): IconReturn {
-  const createElementNS = <K extends keyof SVGElementTagNameMap>(tagName: K): SVGElementTagNameMap[K] =>
-    WINDOW.document.createElementNS(XMLNS, tagName);
-  const svg = setAttributesNS(createElementNS('svg'), {
-    class: 'success-icon',
-    width: `${WIDTH}`,
-    height: `${HEIGHT}`,
-    viewBox: `0 0 ${WIDTH} ${HEIGHT}`,
-    fill: 'none',
-  });
-
-  const g = setAttributesNS(createElementNS('g'), {
-    clipPath: 'url(#clip0_57_156)',
-  });
-
-  const path2 = setAttributesNS(createElementNS('path'), {
-    ['fill-rule']: 'evenodd',
-    ['clip-rule']: 'evenodd',
-    d: 'M3.55544 15.1518C4.87103 16.0308 6.41775 16.5 8 16.5C10.1217 16.5 12.1566 15.6571 13.6569 14.1569C15.1571 12.6566 16 10.6217 16 8.5C16 6.91775 15.5308 5.37103 14.6518 4.05544C13.7727 2.73985 12.5233 1.71447 11.0615 1.10897C9.59966 0.503466 7.99113 0.34504 6.43928 0.653721C4.88743 0.962403 3.46197 1.72433 2.34315 2.84315C1.22433 3.96197 0.462403 5.38743 0.153721 6.93928C-0.15496 8.49113 0.00346625 10.0997 0.608967 11.5615C1.21447 13.0233 2.23985 14.2727 3.55544 15.1518ZM4.40546 3.1204C5.46945 2.40946 6.72036 2.03 8 2.03C9.71595 2.03 11.3616 2.71166 12.575 3.92502C13.7883 5.13838 14.47 6.78405 14.47 8.5C14.47 9.77965 14.0905 11.0306 13.3796 12.0945C12.6687 13.1585 11.6582 13.9878 10.476 14.4775C9.29373 14.9672 7.99283 15.0953 6.73777 14.8457C5.48271 14.596 4.32987 13.9798 3.42502 13.075C2.52018 12.1701 1.90397 11.0173 1.65432 9.76224C1.40468 8.50718 1.5328 7.20628 2.0225 6.02404C2.5122 4.8418 3.34148 3.83133 4.40546 3.1204Z',
-  });
-  const path = setAttributesNS(createElementNS('path'), {
-    d: 'M6.68775 12.4297C6.78586 12.4745 6.89218 12.4984 7 12.5C7.11275 12.4955 7.22315 12.4664 7.32337 12.4145C7.4236 12.3627 7.51121 12.2894 7.58 12.2L12 5.63999C12.0848 5.47724 12.1071 5.28902 12.0625 5.11098C12.0178 4.93294 11.9095 4.77744 11.7579 4.67392C11.6064 4.57041 11.4221 4.52608 11.24 4.54931C11.0579 4.57254 10.8907 4.66173 10.77 4.79999L6.88 10.57L5.13 8.56999C5.06508 8.49566 4.98613 8.43488 4.89768 8.39111C4.80922 8.34735 4.713 8.32148 4.61453 8.31498C4.51605 8.30847 4.41727 8.32147 4.32382 8.35322C4.23038 8.38497 4.14413 8.43484 4.07 8.49999C3.92511 8.63217 3.83692 8.81523 3.82387 9.01092C3.81083 9.2066 3.87393 9.39976 4 9.54999L6.43 12.24C6.50187 12.3204 6.58964 12.385 6.68775 12.4297Z',
-  });
-
-  svg.appendChild(g).append(path, path2);
-
-  const speakerDefs = createElementNS('defs');
-  const speakerClipPathDef = setAttributesNS(createElementNS('clipPath'), {
-    id: 'clip0_57_156',
-  });
-
-  const speakerRect = setAttributesNS(createElementNS('rect'), {
-    width: `${WIDTH}`,
-    height: `${WIDTH}`,
-    fill: 'white',
-    transform: 'translate(0 0.5)',
-  });
-
-  speakerClipPathDef.appendChild(speakerRect);
-  speakerDefs.appendChild(speakerClipPathDef);
-
-  svg.appendChild(speakerDefs).appendChild(speakerClipPathDef).appendChild(speakerRect);
-
-  return {
-    get el() {
-      return svg;
-    },
-  };
-}
diff --git a/packages/feedback/src/widget/SuccessMessage.ts b/packages/feedback/src/widget/SuccessMessage.ts
deleted file mode 100644
index fddf46bcce71..000000000000
--- a/packages/feedback/src/widget/SuccessMessage.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import type { FeedbackComponent } from '../types';
-import { SuccessIcon } from './SuccessIcon';
-import { createElement } from './util/createElement';
-
-export interface SuccessMessageProps {
-  message: string;
-  onRemove?: () => void;
-}
-
-interface SuccessMessageComponent extends FeedbackComponent<HTMLDivElement> {
-  /**
-   * Removes the component
-   */
-  remove: () => void;
-}
-
-/**
- * Feedback dialog component that has the form
- */
-export function SuccessMessage({ message, onRemove }: SuccessMessageProps): SuccessMessageComponent {
-  function remove(): void {
-    if (!el) {
-      return;
-    }
-
-    el.remove();
-    onRemove && onRemove();
-  }
-
-  const el = createElement(
-    'div',
-    {
-      className: 'success-message',
-      onClick: remove,
-    },
-    SuccessIcon().el,
-    message,
-  );
-
-  return {
-    el,
-    remove,
-  };
-}
diff --git a/packages/feedback/src/widget/createShadowHost.ts b/packages/feedback/src/widget/createShadowHost.ts
deleted file mode 100644
index a418906d4b5a..000000000000
--- a/packages/feedback/src/widget/createShadowHost.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import { logger } from '@sentry/utils';
-
-import { WINDOW } from '../constants';
-import type { FeedbackInternalOptions } from '../types';
-import { createDialogStyles } from './Dialog.css';
-import { createMainStyles } from './Main.css';
-
-type CreateShadowHostParams = Pick<FeedbackInternalOptions, 'id' | 'colorScheme' | 'themeDark' | 'themeLight'>;
-
-/**
- * Creates shadow host
- */
-export function createShadowHost({ id, colorScheme, themeDark, themeLight }: CreateShadowHostParams): {
-  shadow: ShadowRoot;
-  host: HTMLDivElement;
-} {
-  try {
-    const doc = WINDOW.document;
-
-    // Create the host
-    const host = doc.createElement('div');
-    host.id = id;
-
-    // Create the shadow root
-    const shadow = host.attachShadow({ mode: 'open' });
-
-    shadow.appendChild(createMainStyles(doc, colorScheme, { dark: themeDark, light: themeLight }));
-    shadow.appendChild(createDialogStyles(doc));
-
-    return { shadow, host };
-  } catch {
-    // Shadow DOM probably not supported
-    logger.warn('[Feedback] Browser does not support shadow DOM API');
-    throw new Error('Browser does not support shadow DOM API.');
-  }
-}
diff --git a/packages/feedback/src/widget/createWidget.ts b/packages/feedback/src/widget/createWidget.ts
deleted file mode 100644
index 1f6ed91bf04e..000000000000
--- a/packages/feedback/src/widget/createWidget.ts
+++ /dev/null
@@ -1,298 +0,0 @@
-import { getClient, getCurrentScope } from '@sentry/core';
-import { logger } from '@sentry/utils';
-
-import type { FeedbackFormData, FeedbackInternalOptions, FeedbackWidget } from '../types';
-import { handleFeedbackSubmit } from '../util/handleFeedbackSubmit';
-import type { ActorComponent } from './Actor';
-import { Actor } from './Actor';
-import type { DialogComponent } from './Dialog';
-import { Dialog } from './Dialog';
-import { SuccessMessage } from './SuccessMessage';
-
-import { DEBUG_BUILD } from '../debug-build';
-
-interface CreateWidgetParams {
-  /**
-   * Shadow DOM to append to
-   */
-  shadow: ShadowRoot;
-
-  /**
-   * Feedback integration options
-   */
-  options: FeedbackInternalOptions & { shouldCreateActor?: boolean };
-
-  /**
-   * An element to attach to, that when clicked, will open a dialog
-   */
-  attachTo?: Element;
-
-  /**
-   * If false, will not create an actor
-   */
-  shouldCreateActor?: boolean;
-}
-
-/**
- * Creates a new widget. Returns public methods that control widget behavior.
- */
-export function createWidget({
-  shadow,
-  options: { shouldCreateActor = true, ...options },
-  attachTo,
-}: CreateWidgetParams): FeedbackWidget {
-  let actor: ActorComponent | undefined;
-  let dialog: DialogComponent | undefined;
-  let isDialogOpen: boolean = false;
-
-  /**
-   * Show the success message for 5 seconds
-   */
-  function showSuccessMessage(): void {
-    if (!shadow) {
-      return;
-    }
-
-    try {
-      const success = SuccessMessage({
-        message: options.successMessageText,
-        onRemove: () => {
-          if (timeoutId) {
-            clearTimeout(timeoutId);
-          }
-          showActor();
-        },
-      });
-
-      if (!success.el) {
-        throw new Error('Unable to show success message');
-      }
-
-      shadow.appendChild(success.el);
-
-      const timeoutId = setTimeout(() => {
-        if (success) {
-          success.remove();
-        }
-      }, 5000);
-    } catch (err) {
-      // TODO: error handling
-      logger.error(err);
-    }
-  }
-
-  /**
-   * Handler for when the feedback form is completed by the user. This will
-   * create and send the feedback message as an event.
-   */
-  async function _handleFeedbackSubmit(feedback: FeedbackFormData): Promise<void> {
-    if (!dialog) {
-      return;
-    }
-
-    // Simple validation for now, just check for non-empty required fields
-    const emptyField = [];
-    if (options.isNameRequired && !feedback.name) {
-      emptyField.push(options.nameLabel);
-    }
-    if (options.isEmailRequired && !feedback.email) {
-      emptyField.push(options.emailLabel);
-    }
-    if (!feedback.message) {
-      emptyField.push(options.messageLabel);
-    }
-    if (emptyField.length > 0) {
-      dialog.showError(`Please enter in the following required fields: ${emptyField.join(', ')}`);
-      return;
-    }
-
-    const result = await handleFeedbackSubmit(dialog, feedback);
-
-    // Error submitting feedback
-    if (!result || Object.keys(result).length === 0) {
-      if (options.onSubmitError) {
-        options.onSubmitError();
-      }
-
-      return;
-    }
-
-    // Success
-    removeDialog();
-    showSuccessMessage();
-
-    if (options.onSubmitSuccess) {
-      options.onSubmitSuccess();
-    }
-  }
-
-  /**
-   * Internal handler when dialog is opened
-   */
-  function handleOpenDialog(): void {
-    // Flush replay if integration exists
-    const client = getClient();
-    const replay = client && client.getIntegrationByName<{ name: string; flush: () => Promise<void> }>('Replay');
-    if (!replay) {
-      return;
-    }
-    replay.flush().catch(err => {
-      DEBUG_BUILD && logger.error(err);
-    });
-  }
-
-  /**
-   * Displays the default actor
-   */
-  function showActor(): void {
-    actor && actor.show();
-  }
-
-  /**
-   * Hides the default actor
-   */
-  function hideActor(): void {
-    actor && actor.hide();
-  }
-
-  /**
-   * Removes the default actor element
-   */
-  function removeActor(): void {
-    actor && actor.el && actor.el.remove();
-  }
-
-  /**
-   *
-   */
-  function openDialog(): void {
-    try {
-      if (dialog) {
-        dialog.open();
-        isDialogOpen = true;
-        if (options.onFormOpen) {
-          options.onFormOpen();
-        }
-        handleOpenDialog();
-        return;
-      }
-
-      const userKey = options.useSentryUser;
-      const scope = getCurrentScope();
-      const user = scope && scope.getUser();
-
-      dialog = Dialog({
-        colorScheme: options.colorScheme,
-        showBranding: options.showBranding,
-        showName: options.showName || options.isNameRequired,
-        showEmail: options.showEmail || options.isEmailRequired,
-        isNameRequired: options.isNameRequired,
-        isEmailRequired: options.isEmailRequired,
-        formTitle: options.formTitle,
-        cancelButtonLabel: options.cancelButtonLabel,
-        submitButtonLabel: options.submitButtonLabel,
-        emailLabel: options.emailLabel,
-        emailPlaceholder: options.emailPlaceholder,
-        messageLabel: options.messageLabel,
-        messagePlaceholder: options.messagePlaceholder,
-        nameLabel: options.nameLabel,
-        namePlaceholder: options.namePlaceholder,
-        defaultName: (userKey && user && user[userKey.name]) || '',
-        defaultEmail: (userKey && user && user[userKey.email]) || '',
-        onClosed: () => {
-          showActor();
-          isDialogOpen = false;
-
-          if (options.onFormClose) {
-            options.onFormClose();
-          }
-        },
-        onCancel: () => {
-          closeDialog();
-          showActor();
-        },
-        onSubmit: _handleFeedbackSubmit,
-      });
-
-      if (!dialog.el) {
-        throw new Error('Unable to open Feedback dialog');
-      }
-
-      shadow.appendChild(dialog.el);
-
-      // Hides the default actor whenever dialog is opened
-      hideActor();
-
-      if (options.onFormOpen) {
-        options.onFormOpen();
-      }
-      handleOpenDialog();
-    } catch (err) {
-      // TODO: Error handling?
-      logger.error(err);
-    }
-  }
-
-  /**
-   * Closes the dialog
-   */
-  function closeDialog(): void {
-    if (dialog) {
-      dialog.close();
-      isDialogOpen = false;
-
-      if (options.onFormClose) {
-        options.onFormClose();
-      }
-    }
-  }
-
-  /**
-   * Removes the dialog element from DOM
-   */
-  function removeDialog(): void {
-    if (dialog) {
-      closeDialog();
-      const dialogEl = dialog.el;
-      dialogEl && dialogEl.remove();
-      dialog = undefined;
-    }
-  }
-
-  /**
-   *
-   */
-  function handleActorClick(): void {
-    // Open dialog
-    if (!isDialogOpen) {
-      openDialog();
-    }
-
-    // Hide actor button
-    hideActor();
-  }
-
-  if (attachTo) {
-    attachTo.addEventListener('click', handleActorClick);
-  } else if (shouldCreateActor) {
-    actor = Actor({ buttonLabel: options.buttonLabel, onClick: handleActorClick });
-    actor.el && shadow.appendChild(actor.el);
-  }
-
-  return {
-    get actor() {
-      return actor;
-    },
-    get dialog() {
-      return dialog;
-    },
-
-    showActor,
-    hideActor,
-    removeActor,
-
-    openDialog,
-    closeDialog,
-    removeDialog,
-  };
-}
diff --git a/packages/feedback/src/widget/util/createElement.ts b/packages/feedback/src/widget/util/createElement.ts
deleted file mode 100644
index e070e9a9553f..000000000000
--- a/packages/feedback/src/widget/util/createElement.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { WINDOW } from '../../constants';
-
-/**
- * Helper function to create an element. Could be used as a JSX factory
- * (i.e. React-like syntax).
- */
-export function createElement<K extends keyof HTMLElementTagNameMap>(
-  tagName: K,
-  attributes: { [key: string]: string | boolean | EventListenerOrEventListenerObject } | null,
-  ...children: any
-): HTMLElementTagNameMap[K] {
-  const doc = WINDOW.document;
-  const element = doc.createElement(tagName);
-
-  if (attributes) {
-    Object.entries(attributes).forEach(([attribute, attributeValue]) => {
-      if (attribute === 'className' && typeof attributeValue === 'string') {
-        // JSX does not allow class as a valid name
-        element.setAttribute('class', attributeValue);
-      } else if (typeof attributeValue === 'boolean' && attributeValue) {
-        element.setAttribute(attribute, '');
-      } else if (typeof attributeValue === 'string') {
-        element.setAttribute(attribute, attributeValue);
-      } else if (attribute.startsWith('on') && typeof attributeValue === 'function') {
-        element.addEventListener(attribute.substring(2).toLowerCase(), attributeValue);
-      }
-    });
-  }
-  for (const child of children) {
-    appendChild(element, child);
-  }
-
-  return element;
-}
-
-function appendChild(parent: Node, child: any): void {
-  const doc = WINDOW.document;
-  if (typeof child === 'undefined' || child === null) {
-    return;
-  }
-
-  if (Array.isArray(child)) {
-    for (const value of child) {
-      appendChild(parent, value);
-    }
-  } else if (child === false) {
-    // do nothing if child evaluated to false
-  } else if (typeof child === 'string') {
-    parent.appendChild(doc.createTextNode(child));
-  } else if (child instanceof Node) {
-    parent.appendChild(child);
-  } else {
-    parent.appendChild(doc.createTextNode(String(child)));
-  }
-}
diff --git a/packages/feedback/test/index.ts b/packages/feedback/test/index.ts
deleted file mode 100644
index e69de29bb2d1..000000000000
diff --git a/packages/feedback/test/integration.test.ts b/packages/feedback/test/integration.test.ts
deleted file mode 100644
index 4a651a8ef7be..000000000000
--- a/packages/feedback/test/integration.test.ts
+++ /dev/null
@@ -1,128 +0,0 @@
-import * as SentryUtils from '@sentry/utils';
-
-import { ACTOR_LABEL } from '../src/constants';
-import { feedbackIntegration } from '../src/integration';
-
-jest.spyOn(SentryUtils, 'isBrowser').mockImplementation(() => true);
-
-jest.mock('../src/util/sendFeedbackRequest', () => {
-  const original = jest.requireActual('../src/util/sendFeedbackRequest');
-  return {
-    ...original,
-    sendFeedbackRequest: jest.fn(),
-  };
-});
-
-describe('Feedback integration', () => {
-  let feedback: ReturnType<typeof feedbackIntegration>;
-
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  afterEach(() => {
-    if (feedback) {
-      feedback.remove();
-    }
-  });
-
-  it('autoinjects widget with actor', () => {
-    feedback = feedbackIntegration();
-    feedback.setupOnce();
-    const widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeInstanceOf(HTMLButtonElement);
-    const actorEl = widget?.actor?.el as HTMLButtonElement;
-    expect(actorEl.textContent).toBe(ACTOR_LABEL);
-    // No dialog until actor is clicked
-    expect(widget?.dialog).toBeUndefined();
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(actorEl)).toBe(true);
-  });
-
-  it('does not create a widget with `autoInject: false`', () => {
-    feedback = feedbackIntegration({ autoInject: false });
-    feedback.setupOnce();
-    const widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeUndefined();
-    // No dialog until actor is clicked
-    expect(widget?.dialog).toBeUndefined();
-  });
-
-  it('opens (and closes) dialog when calling `openDialog` without injecting an actor', () => {
-    feedback = feedbackIntegration({ autoInject: false });
-    feedback.setupOnce();
-
-    let widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeUndefined();
-    // No dialog until actor is clicked
-    expect(widget?.dialog).toBeUndefined();
-
-    feedback.openDialog();
-    widget = feedback.getWidget();
-    expect(widget?.actor?.el).toBeUndefined();
-    expect(widget?.dialog).not.toBeUndefined();
-    expect(widget?.dialog?.checkIsOpen()).toBe(true);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widget.dialog.el)).toBe(true);
-
-    feedback.closeDialog();
-    expect(widget?.dialog?.checkIsOpen()).toBe(false);
-  });
-
-  it('attaches to a custom actor element', () => {
-    const onFormOpen = jest.fn();
-    // This element is in the normal DOM
-    const myActor = document.createElement('div');
-    myActor.textContent = 'my button';
-
-    feedback = feedbackIntegration({ autoInject: false });
-    let widget = feedback.getWidget();
-    expect(widget).toBe(null);
-
-    feedback.attachTo(myActor, { onFormOpen });
-
-    myActor.dispatchEvent(new Event('click'));
-
-    widget = feedback.getWidget();
-
-    expect(widget?.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget?.dialog?.el?.open).toBe(true);
-    expect(onFormOpen).toHaveBeenCalledTimes(1);
-    // This is all we do with `attachTo` (open dialog)
-  });
-
-  it('creates multiple widgets and removes them', () => {
-    feedback = feedbackIntegration({ autoInject: false });
-
-    feedback.createWidget();
-    expect(feedback.getWidget()?.actor?.el).toBeInstanceOf(HTMLButtonElement);
-    // @ts-expect-error  _widgets is private
-    expect(feedback._widgets.size).toBe(1);
-
-    feedback.createWidget();
-    // @ts-expect-error  _widgets is private
-    expect(feedback._widgets.size).toBe(2);
-
-    // @ts-expect-error  _widgets is private
-    const widgets = Array.from(feedback._widgets.values());
-    expect(widgets[0]).not.toEqual(widgets[1]);
-
-    // Both actors will be in the DOM
-
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[0].actor.el)).toBe(true);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[1].actor.el)).toBe(true);
-
-    feedback.removeWidget(widgets[0]);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[0].actor.el)).toBe(false);
-
-    feedback.removeWidget(widgets[1]);
-    // @ts-expect-error _shadow is private
-    expect(feedback._shadow.contains(widgets[1].actor.el)).toBe(false);
-
-    // @ts-expect-error  _widgets is private
-    expect(feedback._widgets.size).toBe(0);
-  });
-});
diff --git a/packages/feedback/test/sendFeedback.test.ts b/packages/feedback/test/sendFeedback.test.ts
deleted file mode 100644
index e7c836527089..000000000000
--- a/packages/feedback/test/sendFeedback.test.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-import { getClient } from '@sentry/core';
-
-import { sendFeedback } from '../src/sendFeedback';
-import { mockSdk } from './utils/mockSdk';
-
-describe('sendFeedback', () => {
-  it('sends feedback', async () => {
-    mockSdk();
-    const mockTransport = jest.spyOn(getClient()!.getTransport()!, 'send');
-
-    await sendFeedback({
-      name: 'doe',
-      email: 're@example.org',
-      message: 'mi',
-    });
-    expect(mockTransport).toHaveBeenCalledWith([
-      { event_id: expect.any(String), sent_at: expect.any(String) },
-      [
-        [
-          { type: 'feedback' },
-          {
-            breadcrumbs: undefined,
-            contexts: {
-              feedback: {
-                contact_email: 're@example.org',
-                message: 'mi',
-                name: 'doe',
-                replay_id: undefined,
-                source: 'api',
-                url: 'http://localhost/',
-              },
-            },
-            level: 'info',
-            environment: 'production',
-            event_id: expect.any(String),
-            platform: 'javascript',
-            timestamp: expect.any(Number),
-            type: 'feedback',
-          },
-        ],
-      ],
-    ]);
-  });
-});
diff --git a/packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts b/packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts
deleted file mode 100644
index 165e3af0588d..000000000000
--- a/packages/feedback/test/unit/util/prepareFeedbackEvent.test.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { setCurrentClient } from '@sentry/core';
-import { getCurrentScope } from '@sentry/core';
-import type { FeedbackEvent, Scope } from '@sentry/types';
-
-import { prepareFeedbackEvent } from '../../../src/util/prepareFeedbackEvent';
-import { TestClient, getDefaultClientOptions } from '../../utils/TestClient';
-
-describe('Unit | util | prepareFeedbackEvent', () => {
-  let client: TestClient;
-  let scope: Scope;
-
-  beforeEach(() => {
-    client = new TestClient(getDefaultClientOptions());
-    setCurrentClient(client);
-    client.init();
-    scope = getCurrentScope();
-  });
-
-  afterEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('works', async () => {
-    expect(client).toBeDefined();
-    expect(scope).toBeDefined();
-
-    const replayId = 'replay-ID';
-    const event: FeedbackEvent = {
-      timestamp: 1670837008.634,
-      event_id: 'feedback-ID',
-      type: 'feedback',
-      contexts: {
-        feedback: {
-          contact_email: 'test@test.com',
-          message: 'looks great!',
-          replay_id: replayId,
-          url: 'https://sentry.io/',
-        },
-        replay: {
-          error_sample_rate: 1.0,
-          session_sample_rate: 0.1,
-        },
-      },
-    };
-
-    const feedbackEvent = await prepareFeedbackEvent({ scope, client, event });
-
-    expect(feedbackEvent).toEqual({
-      timestamp: 1670837008.634,
-      event_id: 'feedback-ID',
-      platform: 'javascript',
-      environment: 'production',
-      contexts: {
-        feedback: {
-          contact_email: 'test@test.com',
-          message: 'looks great!',
-          replay_id: replayId,
-          url: 'https://sentry.io/',
-        },
-        replay: {
-          error_sample_rate: 1.0,
-          session_sample_rate: 0.1,
-        },
-      },
-      sdkProcessingMetadata: expect.any(Object),
-      breadcrumbs: undefined,
-      type: 'feedback',
-    });
-  });
-});
diff --git a/packages/feedback/test/utils/TestClient.ts b/packages/feedback/test/utils/TestClient.ts
deleted file mode 100644
index 61156a3be8b0..000000000000
--- a/packages/feedback/test/utils/TestClient.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { BaseClient, createTransport, initAndBind } from '@sentry/core';
-import type { BrowserClientReplayOptions, ClientOptions, Event, SeverityLevel } from '@sentry/types';
-import { resolvedSyncPromise } from '@sentry/utils';
-
-export interface TestClientOptions extends ClientOptions, BrowserClientReplayOptions {}
-
-export class TestClient extends BaseClient<TestClientOptions> {
-  public constructor(options: TestClientOptions) {
-    super(options);
-  }
-
-  public eventFromException(exception: any): PromiseLike<Event> {
-    return resolvedSyncPromise({
-      exception: {
-        values: [
-          {
-            type: exception.name,
-            value: exception.message,
-            /* eslint-enable @typescript-eslint/no-unsafe-member-access */
-          },
-        ],
-      },
-    });
-  }
-
-  public eventFromMessage(message: string, level: SeverityLevel = 'info'): PromiseLike<Event> {
-    return resolvedSyncPromise({ message, level });
-  }
-}
-
-export function init(options: TestClientOptions): void {
-  initAndBind(TestClient, options);
-}
-
-export function getDefaultClientOptions(options: Partial<ClientOptions> = {}): ClientOptions {
-  return {
-    integrations: [],
-    dsn: 'https://username@domain/123',
-    transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => resolvedSyncPromise({})),
-    stackParser: () => [],
-    ...options,
-  };
-}
diff --git a/packages/feedback/test/utils/mockSdk.ts b/packages/feedback/test/utils/mockSdk.ts
deleted file mode 100644
index c6afbc018317..000000000000
--- a/packages/feedback/test/utils/mockSdk.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-import type { Envelope, Transport, TransportMakeRequestResponse } from '@sentry/types';
-
-import type { TestClientOptions } from '../utils/TestClient';
-import { getDefaultClientOptions, init } from '../utils/TestClient';
-
-export interface MockSdkParams {
-  sentryOptions?: Partial<TestClientOptions>;
-}
-
-class MockTransport implements Transport {
-  send: (request: Envelope) => PromiseLike<TransportMakeRequestResponse>;
-
-  constructor() {
-    this.send = jest.fn(async () => {
-      return {
-        statusCode: 200,
-      };
-    });
-  }
-
-  async flush() {
-    return true;
-  }
-  async sendEvent(_e: Event) {
-    return {
-      status: 'skipped',
-      event: 'ok',
-      type: 'transaction',
-    };
-  }
-  async sendSession() {
-    return;
-  }
-  async recordLostEvent() {
-    return;
-  }
-  async close() {
-    return;
-  }
-}
-
-export async function mockSdk({ sentryOptions }: MockSdkParams = {}): Promise<void> {
-  init({
-    ...getDefaultClientOptions(),
-    dsn: 'https://dsn@ingest.f00.f00/1',
-    autoSessionTracking: false,
-    sendClientReports: false,
-    transport: () => new MockTransport(),
-    replaysSessionSampleRate: 0.0,
-    replaysOnErrorSampleRate: 0.0,
-    ...sentryOptions,
-  });
-}
diff --git a/packages/feedback/test/widget/Actor.test.ts b/packages/feedback/test/widget/Actor.test.ts
deleted file mode 100644
index a1209a561654..000000000000
--- a/packages/feedback/test/widget/Actor.test.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import { ACTOR_LABEL } from '../../src/constants';
-import type { ActorProps } from '../../src/widget/Actor';
-import { Actor } from '../../src/widget/Actor';
-
-function renderActor(props?: Partial<ActorProps>) {
-  return Actor({
-    buttonLabel: ACTOR_LABEL,
-    ...props,
-  });
-}
-
-describe('Actor', () => {
-  it('renders the actor button', () => {
-    const actorComponent = renderActor();
-
-    expect(actorComponent.el).toBeInstanceOf(HTMLButtonElement);
-    expect(actorComponent.el?.textContent).toBe(ACTOR_LABEL);
-  });
-
-  it('calls `onClick` callback when clicked on', () => {
-    const onClick = jest.fn();
-    const actorComponent = renderActor({
-      onClick,
-    });
-
-    const event = new Event('click');
-    actorComponent.el?.dispatchEvent(event);
-    expect(onClick).toHaveBeenCalledWith(event);
-  });
-
-  it('can manually show and hide the actor', () => {
-    const actorComponent = renderActor();
-
-    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('false');
-
-    actorComponent.hide();
-    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('true');
-
-    actorComponent.show();
-    expect(actorComponent.el?.getAttribute('aria-hidden')).toBe('false');
-  });
-});
diff --git a/packages/feedback/test/widget/Dialog.test.ts b/packages/feedback/test/widget/Dialog.test.ts
deleted file mode 100644
index 69a333f69813..000000000000
--- a/packages/feedback/test/widget/Dialog.test.ts
+++ /dev/null
@@ -1,97 +0,0 @@
-import type { DialogProps } from '../../src/widget/Dialog';
-import { Dialog } from '../../src/widget/Dialog';
-
-type NonNullableFields<T> = {
-  [P in keyof T]: NonNullable<T[P]>;
-};
-
-function renderDialog({
-  showName = true,
-  showEmail = true,
-  showBranding = false,
-  isNameRequired = false,
-  isEmailRequired = false,
-  formTitle = 'Feedback',
-  defaultName = 'Foo Bar',
-  defaultEmail = 'foo@example.com',
-  colorScheme = 'light',
-  nameLabel = 'Name',
-  namePlaceholder = 'Your full name',
-  emailLabel = 'Email',
-  emailPlaceholder = 'foo@example.org',
-  messageLabel = 'Description',
-  messagePlaceholder = 'What is the issue?',
-  cancelButtonLabel = 'Cancel!',
-  submitButtonLabel = 'Submit!',
-  ...rest
-}: Partial<DialogProps> = {}) {
-  return Dialog({
-    formTitle,
-
-    showName,
-    showEmail,
-    isNameRequired,
-    isEmailRequired,
-    showBranding,
-    defaultName,
-    defaultEmail,
-    colorScheme,
-    nameLabel,
-    namePlaceholder,
-    emailLabel,
-    emailPlaceholder,
-    messageLabel,
-    messagePlaceholder,
-    cancelButtonLabel,
-    submitButtonLabel,
-    ...rest,
-  }) as NonNullableFields<ReturnType<typeof Dialog>>;
-}
-
-describe('Dialog', () => {
-  it('renders the dialog w/ form', () => {
-    const dialogComponent = renderDialog({
-      formTitle: 'Feedback!',
-    });
-
-    expect(dialogComponent.el).toBeInstanceOf(HTMLDialogElement);
-    expect(dialogComponent.el.querySelector('form')).toBeInstanceOf(HTMLFormElement);
-    expect(dialogComponent.el.querySelector('h2')?.textContent).toBe('Feedback!');
-  });
-
-  it('can open and close dialog', () => {
-    const dialogComponent = renderDialog();
-
-    expect(dialogComponent.checkIsOpen()).toBe(true);
-
-    dialogComponent.close();
-    expect(dialogComponent.checkIsOpen()).toBe(false);
-
-    dialogComponent.open();
-    expect(dialogComponent.checkIsOpen()).toBe(true);
-  });
-
-  it('calls `onClosed` callback when clicked', () => {
-    const onClosed = jest.fn();
-    const dialogComponent = renderDialog({
-      onClosed,
-    });
-
-    dialogComponent.el.dispatchEvent(new Event('click'));
-    expect(onClosed).toHaveBeenCalledWith();
-  });
-
-  it('stops event propagation when dialog contents is clicked', () => {
-    const onClosed = jest.fn();
-    const dialogComponent = renderDialog({
-      onClosed,
-    });
-
-    const event = new Event('click');
-    jest.spyOn(event, 'stopPropagation');
-    dialogComponent.el.querySelector('.dialog__content')?.dispatchEvent(event);
-
-    expect(event.stopPropagation).toHaveBeenCalled();
-    expect(onClosed).not.toHaveBeenCalled();
-  });
-});
diff --git a/packages/feedback/test/widget/Form.test.ts b/packages/feedback/test/widget/Form.test.ts
deleted file mode 100644
index 7b45cabd8503..000000000000
--- a/packages/feedback/test/widget/Form.test.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-import type { FormComponentProps } from '../../src/widget/Form';
-import { Form } from '../../src/widget/Form';
-
-type NonNullableFields<T> = {
-  [P in keyof T]: NonNullable<T[P]>;
-};
-
-function renderForm({
-  showName = true,
-  showEmail = true,
-  isNameRequired = false,
-  isEmailRequired = false,
-  defaultName = 'Foo Bar',
-  defaultEmail = 'foo@example.com',
-  nameLabel = 'Name',
-  namePlaceholder = 'Your full name',
-  emailLabel = 'Email',
-  emailPlaceholder = 'foo@example.org',
-  messageLabel = 'Description',
-  messagePlaceholder = 'What is the issue?',
-  cancelButtonLabel = 'Cancel!',
-  submitButtonLabel = 'Submit!',
-  ...rest
-}: Partial<FormComponentProps> = {}) {
-  return Form({
-    showName,
-    showEmail,
-    isNameRequired,
-    isEmailRequired,
-    defaultName,
-    defaultEmail,
-    nameLabel,
-    namePlaceholder,
-    emailLabel,
-    emailPlaceholder,
-    messageLabel,
-    messagePlaceholder,
-    cancelButtonLabel,
-    submitButtonLabel,
-    ...rest,
-  }) as NonNullableFields<ReturnType<typeof Form>>;
-}
-
-describe('Form', () => {
-  it('renders a form', () => {
-    const formComponent = renderForm();
-
-    expect(formComponent.el).toBeInstanceOf(HTMLFormElement);
-    const nameInput = formComponent.el.querySelector('[name="name"][type="text"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"][type="text"]') as HTMLInputElement;
-    expect(nameInput).not.toBeNull();
-    expect(emailInput).not.toBeNull();
-    expect(nameInput.value).toBe('Foo Bar');
-    expect(emailInput.value).toBe('foo@example.com');
-    expect(formComponent.el.querySelector('[name="message"]')).not.toBeNull();
-
-    const button = formComponent.el.querySelector('button[type="submit"]') as HTMLButtonElement | null;
-    expect(button?.textContent).toBe('Submit!');
-    expect(formComponent.el.querySelector('button[type="button"]')?.textContent).toBe('Cancel!');
-  });
-
-  it('can hide name and email inputs', () => {
-    const formComponent = renderForm({
-      showName: false,
-      showEmail: false,
-    });
-
-    const nameInput = formComponent.el.querySelector('[name="name"][type="hidden"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"][type="hidden"]') as HTMLInputElement;
-    expect(nameInput).not.toBeNull();
-    expect(emailInput).not.toBeNull();
-    expect(nameInput.value).toBe('Foo Bar');
-    expect(emailInput.value).toBe('foo@example.com');
-    expect(formComponent.el.querySelector('[name="message"]')).not.toBeNull();
-  });
-
-  it('can change text labels', () => {
-    const formComponent = renderForm({
-      nameLabel: 'Name!',
-      namePlaceholder: 'Your full name!',
-      emailLabel: 'Email!',
-      emailPlaceholder: 'foo@example.org!',
-      messageLabel: 'Description!',
-      messagePlaceholder: 'What is the issue?!',
-      isNameRequired: true,
-      isEmailRequired: true,
-    });
-
-    const nameLabel = formComponent.el.querySelector('label[htmlFor="name"]') as HTMLLabelElement;
-    const emailLabel = formComponent.el.querySelector('label[htmlFor="email"]') as HTMLLabelElement;
-    const messageLabel = formComponent.el.querySelector('label[htmlFor="message"]') as HTMLLabelElement;
-    expect(nameLabel.textContent).toBe('Name! (required)');
-    expect(emailLabel.textContent).toBe('Email! (required)');
-    expect(messageLabel.textContent).toBe('Description! (required)');
-
-    const nameInput = formComponent.el.querySelector('[name="name"]') as HTMLInputElement;
-    const emailInput = formComponent.el.querySelector('[name="email"]') as HTMLInputElement;
-    const messageInput = formComponent.el.querySelector('[name="message"]') as HTMLTextAreaElement;
-
-    expect(nameInput.placeholder).toBe('Your full name!');
-    expect(emailInput.placeholder).toBe('foo@example.org!');
-    expect(messageInput.placeholder).toBe('What is the issue?!');
-  });
-
-  it('can show error', () => {
-    const formComponent = renderForm();
-    const errorEl = formComponent.el.querySelector('.form__error-container') as HTMLDivElement;
-    expect(errorEl.getAttribute('aria-hidden')).toBe('true');
-
-    formComponent.showError('My Error');
-    expect(errorEl.getAttribute('aria-hidden')).toBe('false');
-    expect(errorEl.textContent).toBe('My Error');
-
-    formComponent.hideError();
-    expect(errorEl.getAttribute('aria-hidden')).toBe('true');
-    expect(errorEl.textContent).toBe('');
-  });
-
-  it('calls `onCancel` callback', () => {
-    const onCancel = jest.fn(() => {});
-    const formComponent = renderForm({ onCancel });
-    (formComponent.el.querySelector('button[type="button"]') as HTMLButtonElement)?.click();
-    expect(onCancel).toHaveBeenCalled();
-  });
-
-  it('calls `onSubmit` callback when submitting', () => {
-    const onSubmit = jest.fn();
-    const formComponent = renderForm({ onSubmit });
-    const submitEvent = new Event('submit');
-
-    formComponent.el.dispatchEvent(submitEvent);
-
-    expect(onSubmit).toHaveBeenCalledWith({
-      email: 'foo@example.com',
-      message: '',
-      name: 'Foo Bar',
-    });
-  });
-});
diff --git a/packages/feedback/test/widget/SubmitButton.test.ts b/packages/feedback/test/widget/SubmitButton.test.ts
deleted file mode 100644
index d01b6006ae4a..000000000000
--- a/packages/feedback/test/widget/SubmitButton.test.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { SUBMIT_BUTTON_LABEL } from '../../src/constants';
-import type { SubmitButtonProps } from '../../src/widget/SubmitButton';
-import { SubmitButton } from '../../src/widget/SubmitButton';
-
-function renderSubmitButton(props?: Partial<SubmitButtonProps>) {
-  return SubmitButton({
-    label: SUBMIT_BUTTON_LABEL,
-    ...props,
-  });
-}
-
-describe('SubmitButton', () => {
-  it('renders the submit button, disabled by default', () => {
-    const submitButtonComponent = renderSubmitButton();
-
-    expect(submitButtonComponent.el).toBeInstanceOf(HTMLButtonElement);
-    if (!submitButtonComponent.el) {
-      throw new Error('Element does not exist');
-    }
-    expect(submitButtonComponent.el.textContent).toBe(SUBMIT_BUTTON_LABEL);
-  });
-});
diff --git a/packages/feedback/test/widget/SuccessMessage.test.ts b/packages/feedback/test/widget/SuccessMessage.test.ts
deleted file mode 100644
index 48c51dc992b9..000000000000
--- a/packages/feedback/test/widget/SuccessMessage.test.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { SUCCESS_MESSAGE_TEXT } from '../../src/constants';
-import type { SuccessMessageProps } from '../../src/widget/SuccessMessage';
-import { SuccessMessage } from '../../src/widget/SuccessMessage';
-
-function renderSuccessMessage(props?: Partial<SuccessMessageProps>) {
-  return SuccessMessage({
-    message: SUCCESS_MESSAGE_TEXT,
-    ...props,
-  });
-}
-
-describe('SuccessMessage', () => {
-  it('renders the submit button, disabled by default', () => {
-    const successMessageComponent = renderSuccessMessage();
-
-    expect(successMessageComponent.el).toBeInstanceOf(HTMLDivElement);
-    expect(successMessageComponent.el?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
-  });
-
-  it('removes element and calls `onRemove` callback when clicked', () => {
-    const onRemove = jest.fn();
-    const successMessageComponent = renderSuccessMessage({
-      onRemove,
-    });
-
-    successMessageComponent.el && document.body.appendChild(successMessageComponent.el);
-    expect(document.querySelector('.success-message')).not.toBeNull();
-    successMessageComponent.el?.dispatchEvent(new Event('click'));
-    expect(document.querySelector('.success-message')).toBeNull();
-    expect(onRemove).toHaveBeenCalledWith();
-  });
-});
diff --git a/packages/feedback/test/widget/createWidget.test.ts b/packages/feedback/test/widget/createWidget.test.ts
deleted file mode 100644
index 0fba6f452084..000000000000
--- a/packages/feedback/test/widget/createWidget.test.ts
+++ /dev/null
@@ -1,359 +0,0 @@
-import {
-  ACTOR_LABEL,
-  CANCEL_BUTTON_LABEL,
-  DEFAULT_THEME,
-  EMAIL_LABEL,
-  EMAIL_PLACEHOLDER,
-  FORM_TITLE,
-  MESSAGE_LABEL,
-  MESSAGE_PLACEHOLDER,
-  NAME_LABEL,
-  NAME_PLACEHOLDER,
-  SUBMIT_BUTTON_LABEL,
-  SUCCESS_MESSAGE_TEXT,
-} from '../../src/constants';
-import type { FeedbackInternalOptions } from '../../src/types';
-import { sendFeedbackRequest } from '../../src/util/sendFeedbackRequest';
-import { createShadowHost } from '../../src/widget/createShadowHost';
-import { createWidget } from '../../src/widget/createWidget';
-
-const flushPromises = () => new Promise(jest.requireActual('timers').setImmediate);
-jest.useFakeTimers();
-
-const DEFAULT_OPTIONS = {
-  id: 'sentry-feedback',
-  autoInject: true,
-  showEmail: true,
-  showName: true,
-  showBranding: false,
-  useSentryUser: {
-    email: 'email',
-    name: 'username',
-  },
-  isEmailRequired: false,
-  isNameRequired: false,
-
-  themeDark: DEFAULT_THEME.dark,
-  themeLight: DEFAULT_THEME.light,
-  colorScheme: 'system' as const,
-
-  buttonLabel: ACTOR_LABEL,
-  cancelButtonLabel: CANCEL_BUTTON_LABEL,
-  submitButtonLabel: SUBMIT_BUTTON_LABEL,
-  formTitle: FORM_TITLE,
-  emailPlaceholder: EMAIL_PLACEHOLDER,
-  emailLabel: EMAIL_LABEL,
-  messagePlaceholder: MESSAGE_PLACEHOLDER,
-  messageLabel: MESSAGE_LABEL,
-  namePlaceholder: NAME_PLACEHOLDER,
-  nameLabel: NAME_LABEL,
-  successMessageText: SUCCESS_MESSAGE_TEXT,
-
-  onFormClose: jest.fn(),
-  onFormOpen: jest.fn(),
-  onSubmitError: jest.fn(),
-  onSubmitSuccess: jest.fn(),
-};
-
-jest.mock('../../src/util/sendFeedbackRequest', () => {
-  const original = jest.requireActual('../../src/util/sendFeedbackRequest');
-  return {
-    ...original,
-    sendFeedbackRequest: jest.fn(),
-  };
-});
-
-function createShadowAndWidget(
-  feedbackOptions?: Partial<FeedbackInternalOptions> & { shouldCreateActor?: boolean },
-  createWidgetOptions?: Partial<Parameters<typeof createWidget>[0]>,
-) {
-  const { shadow } = createShadowHost({
-    id: 'feedback',
-    colorScheme: 'system',
-    themeLight: DEFAULT_THEME.light,
-    themeDark: DEFAULT_THEME.dark,
-  });
-  const widget = createWidget({
-    shadow,
-    options: {
-      ...DEFAULT_OPTIONS,
-      ...feedbackOptions,
-    },
-    ...createWidgetOptions,
-  });
-
-  return { shadow, widget };
-}
-
-describe('createWidget', () => {
-  beforeEach(() => {
-    jest.clearAllMocks();
-  });
-
-  it('creates widget with actor', () => {
-    const { shadow, widget } = createShadowAndWidget();
-    expect(widget.actor?.el).toBeInstanceOf(HTMLButtonElement);
-    const actorEl = widget.actor?.el as HTMLButtonElement;
-    expect(actorEl.textContent).toBe(DEFAULT_OPTIONS.buttonLabel);
-    // No dialog until actor is clicked
-    expect(widget.dialog).toBeUndefined();
-    expect(shadow.contains(actorEl)).toBe(true);
-  });
-
-  it('creates widget without actor', () => {
-    const { widget } = createShadowAndWidget({
-      shouldCreateActor: false,
-    });
-    expect(widget.actor?.el).toBeUndefined();
-    // No dialog until actor is clicked
-    expect(widget.dialog).toBeUndefined();
-  });
-
-  it('clicking on actor opens dialog and hides the actor', () => {
-    const onFormOpen = jest.fn();
-    const { widget } = createShadowAndWidget({ onFormOpen });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    // Dialog is now visible
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-
-    // Actor should be hidden
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-
-    expect(onFormOpen).toHaveBeenCalledTimes(1);
-  });
-
-  it('submits feedback successfully', async () => {
-    const onSubmitSuccess = jest.fn(() => {});
-    const { shadow, widget } = createShadowAndWidget({
-      onSubmitSuccess,
-    });
-
-    (sendFeedbackRequest as jest.Mock).mockImplementation(() => {
-      return Promise.resolve({ statusCode: 200 });
-    });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    const nameEl = widget.dialog?.el?.querySelector('[name="name"]') as HTMLInputElement;
-    nameEl.value = 'Jane Doe';
-    const emailEl = widget.dialog?.el?.querySelector('[name="email"]') as HTMLInputElement;
-    emailEl.value = 'jane@example.com';
-    const messageEl = widget.dialog?.el?.querySelector('[name="message"]') as HTMLTextAreaElement;
-    messageEl.value = 'My feedback';
-
-    nameEl.dispatchEvent(new Event('change'));
-    emailEl.dispatchEvent(new Event('change'));
-    messageEl.dispatchEvent(new Event('change'));
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledWith(
-      {
-        feedback: {
-          name: 'Jane Doe',
-          email: 'jane@example.com',
-          message: 'My feedback',
-          url: 'http://localhost/',
-          source: 'widget',
-        },
-      },
-      {},
-    );
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(1);
-
-    expect(widget.dialog).toBeUndefined();
-    expect(shadow.querySelector('.success-message')?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
-
-    jest.runAllTimers();
-    expect(shadow.querySelector('.success-message')).toBeNull();
-  });
-
-  it('only submits feedback successfully when all required fields are filled', async () => {
-    const onSubmitSuccess = jest.fn(() => {});
-    const { shadow, widget } = createShadowAndWidget({
-      isNameRequired: true,
-      isEmailRequired: true,
-      onSubmitSuccess,
-    });
-
-    (sendFeedbackRequest as jest.Mock).mockImplementation(() => {
-      return Promise.resolve({ statusCode: 200 });
-    });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    const nameEl = widget.dialog?.el?.querySelector('[name="name"]') as HTMLInputElement;
-    const emailEl = widget.dialog?.el?.querySelector('[name="email"]') as HTMLInputElement;
-    const messageEl = widget.dialog?.el?.querySelector('[name="message"]') as HTMLTextAreaElement;
-
-    nameEl.value = '';
-    emailEl.value = '';
-    messageEl.value = '';
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledTimes(0);
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(0);
-
-    nameEl.value = '';
-    emailEl.value = '';
-    messageEl.value = 'My feedback';
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledTimes(0);
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(0);
-
-    nameEl.value = 'Jane Doe';
-    emailEl.value = 'jane@example.com';
-    messageEl.value = 'My feedback';
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledWith(
-      {
-        feedback: {
-          name: 'Jane Doe',
-          email: 'jane@example.com',
-          message: 'My feedback',
-          url: 'http://localhost/',
-          source: 'widget',
-        },
-      },
-      {},
-    );
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-    expect(onSubmitSuccess).toHaveBeenCalledTimes(1);
-
-    expect(widget.dialog).toBeUndefined();
-    expect(shadow.querySelector('.success-message')?.textContent).toBe(SUCCESS_MESSAGE_TEXT);
-
-    jest.runAllTimers();
-    expect(shadow.querySelector('.success-message')).toBeNull();
-  });
-
-  it('submits feedback with error on request', async () => {
-    const onSubmitError = jest.fn(() => {});
-    const { shadow, widget } = createShadowAndWidget({
-      onSubmitError,
-    });
-
-    (sendFeedbackRequest as jest.Mock).mockImplementation(() => {
-      throw new Error('Unable to send feedback');
-    });
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-
-    const messageEl = widget.dialog?.el?.querySelector('[name="message"]') as HTMLTextAreaElement;
-    messageEl.value = 'My feedback';
-
-    messageEl.dispatchEvent(new Event('change'));
-
-    widget.dialog?.el?.querySelector('form')?.dispatchEvent(new Event('submit'));
-    expect(sendFeedbackRequest).toHaveBeenCalledWith(
-      {
-        feedback: {
-          name: '',
-          email: '',
-          message: 'My feedback',
-          url: 'http://localhost/',
-          source: 'widget',
-        },
-      },
-      {},
-    );
-
-    // sendFeedbackRequest is async
-    await flushPromises();
-
-    expect(onSubmitError).toHaveBeenCalledTimes(1);
-
-    expect(widget.dialog).not.toBeUndefined();
-    expect(shadow.querySelector('.form__error-container')?.textContent).toBe(
-      'There was a problem submitting feedback, please wait and try again.',
-    );
-  });
-
-  it('closes when Cancel button is clicked', () => {
-    const onFormClose = jest.fn();
-    const { widget } = createShadowAndWidget({ onFormClose });
-
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-
-    // Click cancel button
-    widget.dialog?.el?.querySelector('[aria-label="Cancel"]')?.dispatchEvent(new Event('click'));
-
-    // Element/component should still exist, but it will be in a closed state
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(false);
-    expect(onFormClose).toHaveBeenCalledTimes(1);
-
-    // Actor should now be visible too
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('false');
-
-    // Open it up again
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('closes when dialog (background)) is clicked', () => {
-    const onFormClose = jest.fn();
-    const { widget } = createShadowAndWidget({ onFormClose });
-
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-
-    // Click the actual dialog element (which serves as modal backdrop)
-    widget.dialog?.el?.dispatchEvent(new Event('click'));
-
-    // Element/component should still exist, but it will be in a closed state
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(false);
-    expect(onFormClose).toHaveBeenCalledTimes(1);
-
-    // Actor should now be visible too
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('false');
-
-    // Open it up again
-    widget.actor?.el?.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(widget.actor?.el?.getAttribute('aria-hidden')).toBe('true');
-  });
-
-  it('attaches to a custom actor element', () => {
-    const onFormOpen = jest.fn();
-    // This element is in the normal DOM
-    const myActor = document.createElement('div');
-    myActor.textContent = 'my button';
-
-    const { widget } = createShadowAndWidget(
-      {
-        autoInject: false,
-        onFormOpen,
-      },
-      {
-        attachTo: myActor,
-      },
-    );
-
-    myActor.dispatchEvent(new Event('click'));
-    expect(widget.dialog?.el).toBeInstanceOf(HTMLDialogElement);
-    expect(widget.dialog?.el?.open).toBe(true);
-    expect(onFormOpen).toHaveBeenCalledTimes(1);
-    // This is all we do with `attachTo` (open dialog)
-  });
-});
diff --git a/packages/feedback/tsconfig.json b/packages/feedback/tsconfig.json
index f8f54556da93..446432e02a39 100644
--- a/packages/feedback/tsconfig.json
+++ b/packages/feedback/tsconfig.json
@@ -1,7 +1,17 @@
 {
   "extends": "../../tsconfig.json",
   "compilerOptions": {
-    "module": "esnext"
+    "module": "esnext",
+
+   /* Preact Config */
+		"jsx": "react-jsx",
+		"jsxImportSource": "preact",
+		"skipLibCheck": true,
+		"baseUrl": "./",
+		"paths": {
+			"react": ["./node_modules/preact/compat/"],
+			"react-dom": ["./node_modules/preact/compat/"]
+		}
   },
-  "include": ["src/**/*.ts"]
+  "include": ["src/**/*.ts","src/**/*.tsx"]
 }
diff --git a/packages/feedback2/.eslintignore b/packages/feedback2/.eslintignore
deleted file mode 100644
index b38db2f296ff..000000000000
--- a/packages/feedback2/.eslintignore
+++ /dev/null
@@ -1,2 +0,0 @@
-node_modules/
-build/
diff --git a/packages/feedback2/.eslintrc.js b/packages/feedback2/.eslintrc.js
deleted file mode 100644
index ef2ed992265c..000000000000
--- a/packages/feedback2/.eslintrc.js
+++ /dev/null
@@ -1,25 +0,0 @@
-// Note: All paths are relative to the directory in which eslint is being run, rather than the directory where this file
-// lives
-
-// ESLint config docs: https://eslint.org/docs/user-guide/configuring/
-
-module.exports = {
-  extends: ['../../.eslintrc.js'],
-  overrides: [
-    {
-      files: ['src/**/*.ts', 'src/**/*.tsx'],
-      rules: {
-        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
-      },
-    },
-    {
-      files: ['jest.setup.ts', 'jest.config.ts'],
-      parserOptions: {
-        project: ['tsconfig.test.json'],
-      },
-      rules: {
-        'no-console': 'off',
-      },
-    },
-  ],
-};
diff --git a/packages/feedback2/.gitignore b/packages/feedback2/.gitignore
deleted file mode 100644
index 363d3467c6fa..000000000000
--- a/packages/feedback2/.gitignore
+++ /dev/null
@@ -1,4 +0,0 @@
-node_modules
-/*.tgz
-.eslintcache
-build
diff --git a/packages/feedback2/LICENSE b/packages/feedback2/LICENSE
deleted file mode 100644
index d11896ba1181..000000000000
--- a/packages/feedback2/LICENSE
+++ /dev/null
@@ -1,14 +0,0 @@
-Copyright (c) 2023 Sentry (https://sentry.io) and individual contributors. All rights reserved.
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
-documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
-rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
-persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
-Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
-WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
diff --git a/packages/feedback2/README.md b/packages/feedback2/README.md
deleted file mode 100644
index fb5b20400a71..000000000000
--- a/packages/feedback2/README.md
+++ /dev/null
@@ -1,20 +0,0 @@
-<p align="center">
-  <a href="https://sentry.io/?utm_source=github&utm_medium=logo" target="_blank">
-    <img src="https://sentry-brand.storage.googleapis.com/sentry-wordmark-dark-280x84.png" alt="Sentry" width="280" height="84">
-  </a>
-</p>
-
-# Sentry Integration for Feedback
-
-This SDK is **considered experimental and in a beta state**. It may experience breaking changes, and may be discontinued at any time. Please reach out on
-[GitHub](https://github.com/getsentry/sentry-javascript/issues/new/choose) if you have any feedback/concerns.
-
-To view Feedback in Sentry, your [Sentry organization must be an early adopter](https://docs.sentry.io/product/accounts/early-adopter-features/).
-
-## Installation
-
-Please read the [offical integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/) for installation instructions.
-
-## Configuration
-
-The Feedback integration is highly customizable, please read the [official integration documentation](https://docs.sentry.io/platforms/javascript/user-feedback/configuration/) for the most up-to-date configuration options.
diff --git a/packages/feedback2/jest.config.js b/packages/feedback2/jest.config.js
deleted file mode 100644
index cd02790794a7..000000000000
--- a/packages/feedback2/jest.config.js
+++ /dev/null
@@ -1,6 +0,0 @@
-const baseConfig = require('../../jest/jest.config.js');
-
-module.exports = {
-  ...baseConfig,
-  testEnvironment: 'jsdom',
-};
diff --git a/packages/feedback2/package.json b/packages/feedback2/package.json
deleted file mode 100644
index 9e810ad8e6cf..000000000000
--- a/packages/feedback2/package.json
+++ /dev/null
@@ -1,64 +0,0 @@
-{
-  "name": "@sentry-internal/feedback2",
-  "version": "8.0.0-alpha.2",
-  "description": "Sentry SDK integration for user feedback",
-  "repository": "git://github.com/getsentry/sentry-javascript.git",
-  "homepage": "https://github.com/getsentry/sentry-javascript/tree/master/packages/feedback",
-  "author": "Sentry",
-  "license": "MIT",
-  "engines": {
-    "node": ">=12"
-  },
-  "files": [
-    "cjs",
-    "esm",
-    "types",
-    "types-ts3.8"
-  ],
-  "main": "build/npm/cjs/index.js",
-  "module": "build/npm/esm/index.js",
-  "types": "build/npm/types/index.d.ts",
-  "typesVersions": {
-    "<4.9": {
-      "build/npm/types/index.d.ts": [
-        "build/npm/types-ts3.8/index.d.ts"
-      ]
-    }
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@sentry/core": "8.0.0-alpha.2",
-    "@sentry/types": "8.0.0-alpha.2",
-    "@sentry/utils": "8.0.0-alpha.2",
-    "preact": "^10.19.4",
-    "preact-compat": "^3.19.0"
-  },
-  "scripts": {
-    "build": "run-p build:transpile build:types build:bundle",
-    "build:transpile": "rollup -c rollup.npm.config.mjs",
-    "build:bundle": "rollup -c rollup.bundle.config.mjs",
-    "build:dev": "run-p build:transpile build:types",
-    "build:types": "run-s build:types:core build:types:downlevel",
-    "build:types:core": "tsc -p tsconfig.types.json",
-    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
-    "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
-    "build:dev:watch": "run-p build:transpile:watch build:types:watch",
-    "build:transpile:watch": "yarn build:transpile --watch",
-    "build:bundle:watch": "yarn build:bundle --watch",
-    "build:types:watch": "tsc -p tsconfig.types.json --watch",
-    "build:tarball": "ts-node ../../scripts/prepack.ts --bundles && npm pack ./build/npm",
-    "circularDepCheck": "madge --circular src/index.ts",
-    "clean": "rimraf build sentry-feedback-*.tgz",
-    "fix": "eslint . --format stylish --fix",
-    "lint": "eslint . --format stylish",
-    "test": "jest",
-    "test:watch": "jest --watch",
-    "yalc:publish": "ts-node ../../scripts/prepack.ts --bundles && yalc publish ./build/npm --push --sig"
-  },
-  "volta": {
-    "extends": "../../package.json"
-  },
-  "sideEffects": false
-}
diff --git a/packages/feedback2/rollup.bundle.config.mjs b/packages/feedback2/rollup.bundle.config.mjs
deleted file mode 100644
index 32c9684415bf..000000000000
--- a/packages/feedback2/rollup.bundle.config.mjs
+++ /dev/null
@@ -1,15 +0,0 @@
-import { makeBaseBundleConfig, makeBundleConfigVariants } from '@sentry-internal/rollup-utils';
-
-export default makeBundleConfigVariants(
-  makeBaseBundleConfig({
-    bundleType: 'addon',
-    entrypoints: ['src/index.ts'],
-    jsVersion: 'es6',
-    licenseTitle: '@sentry-internal/feedback2',
-    outputFileBase: () => 'bundles/feedback2',
-    sucrase: {
-      jsxPragma: 'h',
-      jsxFragmentPragma: 'Fragment',
-    },
-  }),
-);
diff --git a/packages/feedback2/rollup.npm.config.mjs b/packages/feedback2/rollup.npm.config.mjs
deleted file mode 100644
index 80f2406e78db..000000000000
--- a/packages/feedback2/rollup.npm.config.mjs
+++ /dev/null
@@ -1,20 +0,0 @@
-import { makeBaseNPMConfig, makeNPMConfigVariants } from '@sentry-internal/rollup-utils';
-
-export default makeNPMConfigVariants(
-  makeBaseNPMConfig({
-    hasBundles: true,
-    packageSpecificConfig: {
-      output: {
-        // set exports to 'named' or 'auto' so that rollup doesn't warn
-        exports: 'named',
-        // set preserveModules to false because for Feedback we actually want
-        // to bundle everything into one file.
-        preserveModules: false,
-      },
-    },
-    sucrase: {
-      jsxPragma: 'h',
-      jsxFragmentPragma: 'Fragment',
-    },
-  }),
-);
diff --git a/packages/feedback2/src/index.ts b/packages/feedback2/src/index.ts
deleted file mode 100644
index bc57808e7b95..000000000000
--- a/packages/feedback2/src/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export { sendFeedback } from './core/sendFeedback';
-export { feedback2Integration } from './core/integration';
-export { feedback2ModalIntegration } from './modal/integration';
-export { feedback2ScreenshotIntegration } from './screenshot/integration';
-
-export type { OptionalFeedbackConfiguration } from './types';
-export type { IFeedback2Integration } from './core/integration';
diff --git a/packages/feedback2/src/types/index.ts b/packages/feedback2/src/types/index.ts
deleted file mode 100644
index cee1bae6ab87..000000000000
--- a/packages/feedback2/src/types/index.ts
+++ /dev/null
@@ -1,101 +0,0 @@
-import type { Attachment } from '@sentry/types';
-import type { ComponentType } from 'preact';
-import type {
-  FeedbackCallbacks,
-  FeedbackGeneralConfiguration,
-  FeedbackTextConfiguration,
-  FeedbackThemeConfiguration,
-} from './config';
-import type { FeedbackTheme } from './theme';
-
-export type { FeedbackFormData } from './form';
-
-export { FeedbackTheme };
-export interface FeedbackThemes {
-  themeDark: FeedbackTheme;
-  themeLight: FeedbackTheme;
-}
-
-/**
- * The integration's internal `options` member where every value should be set
- */
-export interface FeedbackInternalOptions
-  extends FeedbackGeneralConfiguration,
-    FeedbackThemeConfiguration,
-    FeedbackTextConfiguration,
-    FeedbackCallbacks {}
-
-/**
- * Partial configuration that overrides default configuration values
- *
- * This is the config that gets passed into the integration constructor
- */
-export interface OptionalFeedbackConfiguration
-  extends Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'> {
-  themeLight?: Partial<FeedbackTheme>;
-  themeDark?: Partial<FeedbackTheme>;
-}
-
-/**
- * Partial configuration that overrides default configuration values
- *
- * This is the config that gets passed into the integration constructor
- */
-export type OverrideFeedbackConfiguration = Omit<Partial<FeedbackInternalOptions>, 'themeLight' | 'themeDark'>;
-
-export interface SendFeedbackParams {
-  message: string;
-  name?: string;
-  email?: string;
-  attachments?: Attachment[];
-  url?: string;
-  source?: string;
-}
-
-export interface SendFeedbackOptions {
-  /**
-   * Should include replay with the feedback?
-   */
-  includeReplay?: boolean;
-}
-
-export interface Dialog {
-  /**
-   * The HTMLElement that is containing all the form content
-   */
-  el: HTMLElement;
-
-  /**
-   * Insert the Dialog into the Shadow DOM.
-   *
-   * The Dialog starts in the `closed` state where no inner HTML is rendered.
-   */
-  appendToDom: () => void;
-
-  /**
-   * Remove the dialog from the Shadow DOM
-   */
-  removeFromDom: () => void;
-
-  /**
-   * Open/Show the dialog & form inside it
-   */
-  open: () => void;
-
-  /**
-   * Close/Hide the dialog & form inside it
-   */
-  close: () => void;
-}
-
-export interface ScreenshotInput {
-  /**
-   * The preact component
-   */
-  input: ComponentType<{ onError: (error: Error) => void }>;
-
-  /**
-   * The image/screenshot bytes
-   */
-  value: () => Promise<Attachment | undefined>;
-}
diff --git a/packages/feedback2/src/util/debug-build.ts b/packages/feedback2/src/util/debug-build.ts
deleted file mode 100644
index 60aa50940582..000000000000
--- a/packages/feedback2/src/util/debug-build.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-declare const __DEBUG_BUILD__: boolean;
-
-/**
- * This serves as a build time flag that will be true by default, but false in non-debug builds or if users replace `__SENTRY_DEBUG__` in their generated code.
- *
- * ATTENTION: This constant must never cross package boundaries (i.e. be exported) to guarantee that it can be used for tree shaking.
- */
-export const DEBUG_BUILD = __DEBUG_BUILD__;
diff --git a/packages/feedback2/src/util/mergeOptions.ts b/packages/feedback2/src/util/mergeOptions.ts
deleted file mode 100644
index da7f4c271f14..000000000000
--- a/packages/feedback2/src/util/mergeOptions.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { FeedbackFormData, FeedbackInternalOptions, OptionalFeedbackConfiguration } from '../types';
-
-/**
- * Quick and dirty deep merge for the Feedback integration options
- */
-export function mergeOptions(
-  defaultOptions: FeedbackInternalOptions,
-  optionOverrides: OptionalFeedbackConfiguration,
-): FeedbackInternalOptions {
-  return {
-    ...defaultOptions,
-    ...optionOverrides,
-    onFormOpen: () => {
-      optionOverrides.onFormOpen && optionOverrides.onFormOpen();
-      defaultOptions.onFormOpen && defaultOptions.onFormOpen();
-    },
-    onFormClose: () => {
-      optionOverrides.onFormClose && optionOverrides.onFormClose();
-      defaultOptions.onFormClose && defaultOptions.onFormClose();
-    },
-    onSubmitSuccess: (data: FeedbackFormData) => {
-      optionOverrides.onSubmitSuccess && optionOverrides.onSubmitSuccess(data);
-      defaultOptions.onSubmitSuccess && defaultOptions.onSubmitSuccess(data);
-    },
-    onSubmitError: (error: Error) => {
-      optionOverrides.onSubmitError && optionOverrides.onSubmitError(error);
-      defaultOptions.onSubmitError && defaultOptions.onSubmitError(error);
-    },
-    onFormSubmitted: () => {
-      optionOverrides.onFormSubmitted && optionOverrides.onFormSubmitted();
-      defaultOptions.onFormSubmitted && defaultOptions.onFormSubmitted();
-    },
-    themeDark: {
-      ...defaultOptions.themeDark,
-      ...optionOverrides.themeDark,
-    },
-    themeLight: {
-      ...defaultOptions.themeLight,
-      ...optionOverrides.themeLight,
-    },
-  };
-}
diff --git a/packages/feedback2/src/util/prepareFeedbackEvent.ts b/packages/feedback2/src/util/prepareFeedbackEvent.ts
deleted file mode 100644
index 0d66d251c6ff..000000000000
--- a/packages/feedback2/src/util/prepareFeedbackEvent.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import { getIsolationScope, prepareEvent } from '@sentry/core';
-import type { Client, FeedbackEvent, Scope } from '@sentry/types';
-
-interface PrepareFeedbackEventParams {
-  client: Client;
-  event: FeedbackEvent;
-  scope: Scope;
-}
-/**
- * Prepare a feedback event & enrich it with the SDK metadata.
- */
-export async function prepareFeedbackEvent({
-  client,
-  scope,
-  event,
-}: PrepareFeedbackEventParams): Promise<FeedbackEvent> {
-  const eventHint = {};
-  if (client.emit) {
-    client.emit('preprocessEvent', event, eventHint);
-  }
-
-  const preparedEvent = (await prepareEvent(
-    client.getOptions(),
-    event,
-    eventHint,
-    scope,
-    client,
-    getIsolationScope(),
-  )) as FeedbackEvent | null;
-
-  if (preparedEvent === null) {
-    // Taken from baseclient's `_processEvent` method, where this is handled for errors/transactions
-    client.recordDroppedEvent('event_processor', 'feedback', event);
-    throw new Error('Unable to prepare event');
-  }
-
-  // This normally happens in browser client "_prepareEvent"
-  // but since we do not use this private method from the client, but rather the plain import
-  // we need to do this manually.
-  preparedEvent.platform = preparedEvent.platform || 'javascript';
-
-  return preparedEvent;
-}
diff --git a/packages/feedback2/src/util/setAttributesNS.ts b/packages/feedback2/src/util/setAttributesNS.ts
deleted file mode 100644
index 74f0889a1f83..000000000000
--- a/packages/feedback2/src/util/setAttributesNS.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Helper function to set a dict of attributes on element (w/ specified namespace)
- */
-export function setAttributesNS<T extends SVGElement>(el: T, attributes: Record<string, string>): T {
-  Object.entries(attributes).forEach(([key, val]) => {
-    el.setAttributeNS(null, key, val);
-  });
-  return el;
-}
diff --git a/packages/feedback2/tsconfig.json b/packages/feedback2/tsconfig.json
deleted file mode 100644
index 446432e02a39..000000000000
--- a/packages/feedback2/tsconfig.json
+++ /dev/null
@@ -1,17 +0,0 @@
-{
-  "extends": "../../tsconfig.json",
-  "compilerOptions": {
-    "module": "esnext",
-
-   /* Preact Config */
-		"jsx": "react-jsx",
-		"jsxImportSource": "preact",
-		"skipLibCheck": true,
-		"baseUrl": "./",
-		"paths": {
-			"react": ["./node_modules/preact/compat/"],
-			"react-dom": ["./node_modules/preact/compat/"]
-		}
-  },
-  "include": ["src/**/*.ts","src/**/*.tsx"]
-}
diff --git a/packages/feedback2/tsconfig.test.json b/packages/feedback2/tsconfig.test.json
deleted file mode 100644
index ad87caa06c48..000000000000
--- a/packages/feedback2/tsconfig.test.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-
-  "include": ["test/**/*.ts", "jest.config.ts", "jest.setup.ts"],
-
-  "compilerOptions": {
-    "types": ["node", "jest"],
-    "esModuleInterop": true,
-    "allowJs": true,
-    "noImplicitAny": true,
-    "noImplicitThis": false,
-    "strictNullChecks": true,
-    "strictPropertyInitialization": false
-  }
-}
diff --git a/packages/feedback2/tsconfig.types.json b/packages/feedback2/tsconfig.types.json
deleted file mode 100644
index 374fd9bc9364..000000000000
--- a/packages/feedback2/tsconfig.types.json
+++ /dev/null
@@ -1,10 +0,0 @@
-{
-  "extends": "./tsconfig.json",
-
-  "compilerOptions": {
-    "declaration": true,
-    "declarationMap": true,
-    "emitDeclarationOnly": true,
-    "outDir": "build/npm/types"
-  }
-}

From c73ab4b95f5060269afdfb7b83f17e5d133b5064 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 12 Mar 2024 14:07:08 -0400
Subject: [PATCH 43/54] crop buttons don't move past the other crop buttons

---
 .../components/ScreenshotEditor.tsx           | 20 +++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index e01c3942572b..b878da368294 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -123,29 +123,29 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
           case 'topleft':
             setCroppingRect(prev => ({
               ...prev,
-              startx: e.offsetX,
-              starty: e.offsetY,
+              startx: Math.min(e.offsetX, prev.endx - 30),
+              starty: Math.min(e.offsetY, prev.endy - 30),
             }));
             break;
           case 'topright':
             setCroppingRect(prev => ({
               ...prev,
-              endx: e.offsetX,
-              starty: e.offsetY,
+              endx: Math.max(e.offsetX, prev.startx + 30),
+              starty: Math.min(e.offsetY, prev.endy - 30),
             }));
             break;
           case 'bottomleft':
             setCroppingRect(prev => ({
               ...prev,
-              startx: e.offsetX,
-              endy: e.offsetY,
+              startx: Math.min(e.offsetX, prev.endx - 30),
+              endy: Math.max(e.offsetY, prev.starty + 30),
             }));
             break;
           case 'bottomright':
             setCroppingRect(prev => ({
               ...prev,
-              endx: e.offsetX,
-              endy: e.offsetY,
+              endx: Math.max(e.offsetX, prev.startx + 30),
+              endy: Math.max(e.offsetY, prev.starty + 30),
             }));
             break;
         }
@@ -258,8 +258,8 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
             <div
               style={{
                 position: 'absolute',
-                left: croppingRect.endx - 191,
-                top: croppingRect.endy + 8,
+                left: Math.max(0, croppingRect.endx - 191),
+                top: Math.max(0, croppingRect.endy + 8),
                 display: confirmCrop ? 'flex' : 'none',
               }}
               class="crop-btn-group"

From 84ed105e768a5f2f7756d7715e26f75f743fd7c6 Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 12 Mar 2024 16:25:07 -0400
Subject: [PATCH 44/54] disable lint & move styling

---
 .../components/ScreenshotEditor.tsx           | 46 ++++++++-----------
 .../components/ScreenshotInput.css.ts         |  8 ++++
 .../components/useContainerSize.tsx           | 30 ------------
 .../components/useResizeObserver.tsx          | 26 -----------
 4 files changed, 27 insertions(+), 83 deletions(-)
 delete mode 100644 packages/feedback/src/screenshot/components/useContainerSize.tsx
 delete mode 100644 packages/feedback/src/screenshot/components/useResizeObserver.tsx

diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index b878da368294..ad53235621ac 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -1,5 +1,5 @@
+// eslint-disable max-lines
 import type { ComponentType, VNode, h as hType } from 'preact';
-// biome-ignore lint/nursery/noUnusedImports: reason
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';
@@ -40,7 +40,7 @@ const constructRect = (box: Box): Rect => {
   };
 };
 
-const containedImage = (img: HTMLCanvasElement): Box => {
+const getContainedSize = (img: HTMLCanvasElement): Box => {
   const ratio = img.width / img.height;
   let width = img.clientHeight * ratio;
   let height = img.clientHeight;
@@ -70,7 +70,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
 
     function resizeCropper(): void {
       const cropper = croppingRef.current;
-      const imageDimensions = constructRect(containedImage(imageBuffer));
+      const imageDimensions = constructRect(getContainedSize(imageBuffer));
       if (cropper) {
         cropper.width = imageDimensions.width;
         cropper.height = imageDimensions.height;
@@ -88,10 +88,6 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
     }
 
     useEffect(() => {
-      refreshCroppingBox();
-    }, [croppingRect]);
-
-    function refreshCroppingBox(): void {
       const cropper = croppingRef.current;
       if (!cropper) {
         return;
@@ -101,7 +97,7 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       if (!ctx) {
         return;
       }
-      const imageDimensions = constructRect(containedImage(imageBuffer));
+      const imageDimensions = constructRect(getContainedSize(imageBuffer));
       const croppingBox = constructRect(croppingRect);
 
       ctx.clearRect(0, 0, imageDimensions.width, imageDimensions.height);
@@ -115,6 +111,19 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       ctx.strokeStyle = 'purple';
       ctx.lineWidth = 3;
       ctx.strokeRect(croppingBox.x, croppingBox.y, croppingBox.width, croppingBox.height);
+    }, [croppingRect]);
+
+    function onGrabButton(e: Event, corner: string): void {
+      setConfirmCrop(false);
+      const handleMouseMove = makeHandleMouseMove(corner);
+      const handleMouseUp = (): void => {
+        croppingRef.current && croppingRef.current.removeEventListener('mousemove', handleMouseMove);
+        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
+        setConfirmCrop(true);
+      };
+
+      DOCUMENT.addEventListener('mouseup', handleMouseUp);
+      croppingRef.current && croppingRef.current.addEventListener('mousemove', handleMouseMove);
     }
 
     const makeHandleMouseMove = useCallback((corner: string) => {
@@ -152,22 +161,9 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
       };
     }, []);
 
-    function onGrabButton(e: Event, corner: string): void {
-      setConfirmCrop(false);
-      const handleMouseMove = makeHandleMouseMove(corner);
-      const handleMouseUp = (): void => {
-        croppingRef.current && croppingRef.current.removeEventListener('mousemove', handleMouseMove);
-        DOCUMENT.removeEventListener('mouseup', handleMouseUp);
-        setConfirmCrop(true);
-      };
-
-      DOCUMENT.addEventListener('mouseup', handleMouseUp);
-      croppingRef.current && croppingRef.current.addEventListener('mousemove', handleMouseMove);
-    }
-
     function submit(): void {
       const cutoutCanvas = DOCUMENT.createElement('canvas');
-      const imageBox = constructRect(containedImage(imageBuffer));
+      const imageBox = constructRect(getContainedSize(imageBuffer));
       const croppingBox = constructRect(croppingRect);
       cutoutCanvas.width = croppingBox.width;
       cutoutCanvas.height = croppingBox.height;
@@ -257,7 +253,6 @@ export function makeScreenshotEditorComponent({ h, imageBuffer, dialog }: Factor
             ></CropCorner>
             <div
               style={{
-                position: 'absolute',
                 left: Math.max(0, croppingRect.endx - 191),
                 top: Math.max(0, croppingRect.endy + 8),
                 display: confirmCrop ? 'flex' : 'none',
@@ -312,13 +307,10 @@ function CropCorner({
 }): VNode {
   return (
     <button
+      class="crop-btn"
       style={{
-        width: 30,
-        height: 30,
-        position: 'absolute',
         top: top,
         left: left,
-        background: 'none',
         borderTop: corner === 'topleft' || corner === 'topright' ? 'solid purple' : 'none',
         borderLeft: corner === 'topleft' || corner === 'bottomleft' ? 'solid purple' : 'none',
         borderRight: corner === 'topright' || corner === 'bottomright' ? 'solid purple' : 'none',
diff --git a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
index 8fb0418be75b..6ac3d6750010 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
+++ b/packages/feedback/src/screenshot/components/ScreenshotInput.css.ts
@@ -58,6 +58,14 @@ export function createScreenshotInputStyles(): HTMLStyleElement {
   border-radius: var(--form-content-border-radius);
   background-color: var(--background);
   width: 175px;
+  position: absolute;
+}
+
+.crop-btn {
+  width: 30px;
+  height: 30px;
+  position: absolute;
+  background: none;
 }
 `;
 
diff --git a/packages/feedback/src/screenshot/components/useContainerSize.tsx b/packages/feedback/src/screenshot/components/useContainerSize.tsx
deleted file mode 100644
index c26c4296d61d..000000000000
--- a/packages/feedback/src/screenshot/components/useContainerSize.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import type { RefObject } from 'preact';
-import { useCallback, useEffect, useState } from 'preact/hooks';
-import { useResizeObserver } from './useResizeObserver';
-
-interface Box {
-  width: number;
-  height: number;
-}
-
-export function useContainerSize(canvasContainerRef: RefObject<HTMLDivElement>): Box {
-  const [containerSize, setContainerSize] = useState<Box>({ width: 0, height: 0 });
-
-  const onResizeContainer = useCallback(() => {
-    if (canvasContainerRef.current) {
-      setContainerSize({
-        width: canvasContainerRef.current.clientWidth,
-        height: canvasContainerRef.current.clientHeight,
-      });
-    }
-  }, []);
-  useEffect(() => {
-    onResizeContainer();
-  }, [canvasContainerRef.current]);
-  useResizeObserver({
-    elementRef: canvasContainerRef,
-    onResize: onResizeContainer,
-  });
-
-  return containerSize;
-}
diff --git a/packages/feedback/src/screenshot/components/useResizeObserver.tsx b/packages/feedback/src/screenshot/components/useResizeObserver.tsx
deleted file mode 100644
index 1c6ef493cda4..000000000000
--- a/packages/feedback/src/screenshot/components/useResizeObserver.tsx
+++ /dev/null
@@ -1,26 +0,0 @@
-import type { RefObject } from 'preact';
-import { useEffect, useMemo } from 'preact/hooks';
-
-interface Props<Element extends HTMLElement> {
-  elementRef: RefObject<Element>;
-  onResize: ResizeObserverCallback;
-}
-
-export function useResizeObserver<Element extends HTMLElement>({ elementRef, onResize }: Props<Element>): void {
-  const resizeObserver = useMemo(() => {
-    return new ResizeObserver(onResize);
-  }, [onResize]);
-
-  useEffect(() => {
-    if (elementRef.current) {
-      const elem = elementRef.current;
-      resizeObserver.observe(elem);
-      return () => {
-        resizeObserver.unobserve(elem);
-      };
-    }
-
-    // eslint-disable-next-line @typescript-eslint/no-empty-function
-    return () => {};
-  }, [resizeObserver, elementRef.current]);
-}

From 40cc76a85914d6628061f09f617a13f8fcf13d5f Mon Sep 17 00:00:00 2001
From: Catherine Lee <55311782+c298lee@users.noreply.github.com>
Date: Tue, 12 Mar 2024 17:23:06 -0400
Subject: [PATCH 45/54] ignore file check and fix name

---
 packages/feedback/src/modal/components/DialogContainer.tsx    | 4 ++--
 .../feedback/src/screenshot/components/ScreenshotEditor.tsx   | 1 +
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/modal/components/DialogContainer.tsx b/packages/feedback/src/modal/components/DialogContainer.tsx
index 5888ec9a0663..9c178ea9de2d 100644
--- a/packages/feedback/src/modal/components/DialogContainer.tsx
+++ b/packages/feedback/src/modal/components/DialogContainer.tsx
@@ -22,7 +22,7 @@ export function DialogComponent({ open, onFormSubmitted, successMessageText, ...
 
   const [timeoutId, setTimeoutId] = useState<NodeJS.Timeout | null>(null);
 
-  const handlOnSuccessClick = useCallback(() => {
+  const handleOnSuccessClick = useCallback(() => {
     if (timeoutId) {
       clearTimeout(timeoutId);
       setTimeoutId(null);
@@ -41,7 +41,7 @@ export function DialogComponent({ open, onFormSubmitted, successMessageText, ...
   return (
     <Fragment>
       {timeoutId ? (
-        <div class="success-message" onClick={handlOnSuccessClick}>
+        <div class="success-message" onClick={handleOnSuccessClick}>
           {successMessageText}
           <span class="success-icon" dangerouslySetInnerHTML={successIconHtml} />
         </div>
diff --git a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
index ad53235621ac..d3753631ec1c 100644
--- a/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
+++ b/packages/feedback/src/screenshot/components/ScreenshotEditor.tsx
@@ -1,5 +1,6 @@
 // eslint-disable max-lines
 import type { ComponentType, VNode, h as hType } from 'preact';
+// biome-ignore lint: needed for preact
 import { h } from 'preact'; // eslint-disable-line @typescript-eslint/no-unused-vars
 import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
 import { DOCUMENT, WINDOW } from '../../constants';

From 24b3956c860d9c356d50d94aa1549889be371fbe Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 06:49:28 -0700
Subject: [PATCH 46/54] remove extra eslint rules, re-arrange package.json to
 keep diff tidy

---
 packages/feedback/.eslintrc.js |  9 ---------
 packages/feedback/package.json | 14 +++++++-------
 2 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/feedback/.eslintrc.js b/packages/feedback/.eslintrc.js
index ef2ed992265c..0b547ffc828c 100644
--- a/packages/feedback/.eslintrc.js
+++ b/packages/feedback/.eslintrc.js
@@ -6,20 +6,11 @@
 module.exports = {
   extends: ['../../.eslintrc.js'],
   overrides: [
-    {
-      files: ['src/**/*.ts', 'src/**/*.tsx'],
-      rules: {
-        '@sentry-internal/sdk/no-unsupported-es6-methods': 'off',
-      },
-    },
     {
       files: ['jest.setup.ts', 'jest.config.ts'],
       parserOptions: {
         project: ['tsconfig.test.json'],
       },
-      rules: {
-        'no-console': 'off',
-      },
     },
   ],
 };
diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 2bb7564437b2..ac92e9a59b0a 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -18,13 +18,6 @@
   "main": "build/npm/cjs/index.js",
   "module": "build/npm/esm/index.js",
   "types": "build/npm/types/index.d.ts",
-  "typesVersions": {
-    "<4.9": {
-      "build/npm/types/index.d.ts": [
-        "build/npm/types-ts3.8/index.d.ts"
-      ]
-    }
-  },
   "exports": {
    "./package.json": "./package.json",
    ".": {
@@ -38,6 +31,13 @@
      }
    }
   },
+  "typesVersions": {
+    "<4.9": {
+      "build/npm/types/index.d.ts": [
+        "build/npm/types-ts3.8/index.d.ts"
+      ]
+    }
+  },
   "publishConfig": {
     "access": "public"
   },

From 50fad97f6dcb3dc6a22cd52f3008a8b6e4596a18 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 06:51:41 -0700
Subject: [PATCH 47/54] rm extra css comment, and rm unneeded line-move

---
 packages/feedback/src/core/components/Actor.css.ts | 3 ++-
 packages/feedback/src/core/createMainStyles.ts     | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/feedback/src/core/components/Actor.css.ts b/packages/feedback/src/core/components/Actor.css.ts
index 9ae8df503cc9..4e7a9466cd1e 100644
--- a/packages/feedback/src/core/components/Actor.css.ts
+++ b/packages/feedback/src/core/components/Actor.css.ts
@@ -19,7 +19,7 @@ export function createActorStyles(): HTMLStyleElement {
   display: flex;
   align-items: center;
   gap: 8px;
-  z-index: 9000;
+
 
   border-radius: var(--border-radius);
   cursor: pointer;
@@ -27,6 +27,7 @@ export function createActorStyles(): HTMLStyleElement {
   font-weight: 600;
   padding: 12px 16px;
   text-decoration: none;
+  z-index: 9000;
 
   color: var(--foreground);
   background-color: var(--background);
diff --git a/packages/feedback/src/core/createMainStyles.ts b/packages/feedback/src/core/createMainStyles.ts
index 87cf8c0605a0..9eb5bd4dc2ab 100644
--- a/packages/feedback/src/core/createMainStyles.ts
+++ b/packages/feedback/src/core/createMainStyles.ts
@@ -44,7 +44,7 @@ export function createMainStyles(colorScheme: 'system' | 'dark' | 'light', theme
   style.textContent = `
 :host {
   --bottom: 1rem;
-  --right: 1rem; /* this is the font-size of the page, not the shadowroot */
+  --right: 1rem;
   --top: auto;
   --left: auto;
   --z-index: 100000;

From 75a37f8c097fe3a44712a269e1197a66dffd39a2 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 06:54:59 -0700
Subject: [PATCH 48/54] fix indent

---
 packages/feedback/package.json | 22 +++++++++++-----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index ac92e9a59b0a..3acd83204006 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -19,17 +19,17 @@
   "module": "build/npm/esm/index.js",
   "types": "build/npm/types/index.d.ts",
   "exports": {
-   "./package.json": "./package.json",
-   ".": {
-     "import": {
-       "types": "./build/npm/types/index.d.ts",
-       "default": "./build/npm/esm/index.js"
-     },
-     "require": {
-       "types": "./build/npm/types/index.d.ts",
-       "default": "./build/npm/cjs/index.js"
-     }
-   }
+    "./package.json": "./package.json",
+    ".": {
+      "import": {
+        "types": "./build/npm/types/index.d.ts",
+        "default": "./build/npm/esm/index.js"
+      },
+      "require": {
+        "types": "./build/npm/types/index.d.ts",
+        "default": "./build/npm/cjs/index.js"
+      }
+    }
   },
   "typesVersions": {
     "<4.9": {

From fc8b8c7cb1fb67cfff2b712881c35ca82aad6eb5 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 07:01:13 -0700
Subject: [PATCH 49/54] fix indent

---
 packages/feedback/tsconfig.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/feedback/tsconfig.json b/packages/feedback/tsconfig.json
index 446432e02a39..8b434e67edd4 100644
--- a/packages/feedback/tsconfig.json
+++ b/packages/feedback/tsconfig.json
@@ -3,7 +3,7 @@
   "compilerOptions": {
     "module": "esnext",
 
-   /* Preact Config */
+    /* Preact Config */
 		"jsx": "react-jsx",
 		"jsxImportSource": "preact",
 		"skipLibCheck": true,

From 1621e61875ef13e10c27186ccfe7a749a37901b4 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 07:03:18 -0700
Subject: [PATCH 50/54] convert indent to spaces

---
 packages/feedback/tsconfig.json | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/feedback/tsconfig.json b/packages/feedback/tsconfig.json
index 8b434e67edd4..c1fc08578508 100644
--- a/packages/feedback/tsconfig.json
+++ b/packages/feedback/tsconfig.json
@@ -4,14 +4,14 @@
     "module": "esnext",
 
     /* Preact Config */
-		"jsx": "react-jsx",
-		"jsxImportSource": "preact",
-		"skipLibCheck": true,
-		"baseUrl": "./",
-		"paths": {
-			"react": ["./node_modules/preact/compat/"],
-			"react-dom": ["./node_modules/preact/compat/"]
-		}
+    "jsx": "react-jsx",
+    "jsxImportSource": "preact",
+    "skipLibCheck": true,
+    "baseUrl": "./",
+    "paths": {
+      "react": ["./node_modules/preact/compat/"],
+      "react-dom": ["./node_modules/preact/compat/"]
+    }
   },
   "include": ["src/**/*.ts","src/**/*.tsx"]
 }

From b5ed59626b287d278b82957894a38130aae97706 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 07:05:12 -0700
Subject: [PATCH 51/54] add specific error message when response.statusCode ===
 0

---
 packages/feedback/src/core/sendFeedback.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/packages/feedback/src/core/sendFeedback.ts b/packages/feedback/src/core/sendFeedback.ts
index db879f29a821..f3310303082a 100644
--- a/packages/feedback/src/core/sendFeedback.ts
+++ b/packages/feedback/src/core/sendFeedback.ts
@@ -73,13 +73,13 @@ export async function sendFeedback(
         );
       }
 
-      // TODO (v8): we can remove this guard once transport.send's type signature doesn't include void anymore
-      if (!response) {
-        throw new Error('Unable to send Feedback');
-      }
-
       // Require valid status codes, otherwise can assume feedback was not sent successfully
       if (typeof response.statusCode === 'number' && (response.statusCode < 200 || response.statusCode >= 300)) {
+        if (response.statusCode === 0) {
+          throw new Error(
+            'Unable to send Feedback. This is because of network issues, or because you are using an ad-blocker.',
+          );
+        }
         throw new Error('Unable to send Feedback. Invalid response from server.');
       }
 

From b33d2df6fc45b0c3d374bbb6db0e29c54dfc1060 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 09:17:48 -0700
Subject: [PATCH 52/54] keep the original test for sendFeedback()

---
 packages/feedback/src/core/TestClient.ts      | 59 +++++++++++++++++++
 packages/feedback/src/core/mockSdk.ts         | 56 ++++++++++++++++++
 .../feedback/src/core/sendFeedback.test.ts    | 44 ++++++++++++++
 3 files changed, 159 insertions(+)
 create mode 100644 packages/feedback/src/core/TestClient.ts
 create mode 100644 packages/feedback/src/core/mockSdk.ts
 create mode 100644 packages/feedback/src/core/sendFeedback.test.ts

diff --git a/packages/feedback/src/core/TestClient.ts b/packages/feedback/src/core/TestClient.ts
new file mode 100644
index 000000000000..39ed51fcff67
--- /dev/null
+++ b/packages/feedback/src/core/TestClient.ts
@@ -0,0 +1,59 @@
+import { BaseClient, createTransport, initAndBind } from '@sentry/core';
+import type { BrowserClientReplayOptions, ClientOptions, Event, SeverityLevel } from '@sentry/types';
+import { resolvedSyncPromise } from '@sentry/utils';
+
+export interface TestClientOptions extends ClientOptions, BrowserClientReplayOptions {}
+
+/**
+ *
+ */
+export class TestClient extends BaseClient<TestClientOptions> {
+  public constructor(options: TestClientOptions) {
+    super(options);
+  }
+
+  /**
+   *
+   */
+  public eventFromException(exception: any): PromiseLike<Event> {
+    return resolvedSyncPromise({
+      exception: {
+        values: [
+          {
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            type: exception.name,
+            // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+            value: exception.message,
+          },
+        ],
+      },
+    });
+  }
+
+  /**
+   *
+   */
+  public eventFromMessage(message: string, level: SeverityLevel = 'info'): PromiseLike<Event> {
+    return resolvedSyncPromise({ message, level });
+  }
+}
+
+/**
+ *
+ */
+export function init(options: TestClientOptions): void {
+  initAndBind(TestClient, options);
+}
+
+/**
+ *
+ */
+export function getDefaultClientOptions(options: Partial<ClientOptions> = {}): ClientOptions {
+  return {
+    integrations: [],
+    dsn: 'https://username@domain/123',
+    transport: () => createTransport({ recordDroppedEvent: () => undefined }, _ => resolvedSyncPromise({})),
+    stackParser: () => [],
+    ...options,
+  };
+}
diff --git a/packages/feedback/src/core/mockSdk.ts b/packages/feedback/src/core/mockSdk.ts
new file mode 100644
index 000000000000..cb9b2a982397
--- /dev/null
+++ b/packages/feedback/src/core/mockSdk.ts
@@ -0,0 +1,56 @@
+import type { Envelope, Transport, TransportMakeRequestResponse } from '@sentry/types';
+
+import type { TestClientOptions } from './TestClient';
+import { getDefaultClientOptions, init } from './TestClient';
+
+export interface MockSdkParams {
+  sentryOptions?: Partial<TestClientOptions>;
+}
+
+class MockTransport implements Transport {
+  public send: (request: Envelope) => PromiseLike<TransportMakeRequestResponse>;
+
+  public constructor() {
+    this.send = jest.fn(async () => {
+      return {
+        statusCode: 200,
+      };
+    });
+  }
+
+  public async flush(): Promise<boolean> {
+    return true;
+  }
+  public async sendEvent(_e: Event): Promise<unknown> {
+    return {
+      status: 'skipped',
+      event: 'ok',
+      type: 'transaction',
+    };
+  }
+  public async sendSession(): Promise<void> {
+    return;
+  }
+  public async recordLostEvent(): Promise<void> {
+    return;
+  }
+  public async close(): Promise<void> {
+    return;
+  }
+}
+
+/**
+ *
+ */
+export async function mockSdk({ sentryOptions }: MockSdkParams = {}): Promise<void> {
+  init({
+    ...getDefaultClientOptions(),
+    dsn: 'https://dsn@ingest.f00.f00/1',
+    autoSessionTracking: false,
+    sendClientReports: false,
+    transport: () => new MockTransport(),
+    replaysSessionSampleRate: 0.0,
+    replaysOnErrorSampleRate: 0.0,
+    ...sentryOptions,
+  });
+}
diff --git a/packages/feedback/src/core/sendFeedback.test.ts b/packages/feedback/src/core/sendFeedback.test.ts
new file mode 100644
index 000000000000..1b0ad480ca4e
--- /dev/null
+++ b/packages/feedback/src/core/sendFeedback.test.ts
@@ -0,0 +1,44 @@
+import { getClient } from '@sentry/core';
+
+import { mockSdk } from './mockSdk';
+import { sendFeedback } from './sendFeedback';
+
+describe('sendFeedback', () => {
+  it('sends feedback', async () => {
+    mockSdk();
+    const mockTransport = jest.spyOn(getClient()!.getTransport()!, 'send');
+
+    await sendFeedback({
+      name: 'doe',
+      email: 're@example.org',
+      message: 'mi',
+    });
+    expect(mockTransport).toHaveBeenCalledWith([
+      { event_id: expect.any(String), sent_at: expect.any(String) },
+      [
+        [
+          { type: 'feedback' },
+          {
+            breadcrumbs: undefined,
+            contexts: {
+              feedback: {
+                contact_email: 're@example.org',
+                message: 'mi',
+                name: 'doe',
+                replay_id: undefined,
+                source: 'api',
+                url: 'http://localhost/',
+              },
+            },
+            level: 'info',
+            environment: 'production',
+            event_id: expect.any(String),
+            platform: 'javascript',
+            timestamp: expect.any(Number),
+            type: 'feedback',
+          },
+        ],
+      ],
+    ]);
+  });
+});

From b2016cf5ecda51ac44661119e407055a26dc0310 Mon Sep 17 00:00:00 2001
From: Ryan Albrecht <ryan.albrecht@sentry.io>
Date: Wed, 13 Mar 2024 09:57:38 -0700
Subject: [PATCH 53/54] drop preact-compat, we use sucrase and set `jsxPragma:
 h,`

---
 packages/feedback/package.json |  3 +--
 yarn.lock                      | 48 +---------------------------------
 2 files changed, 2 insertions(+), 49 deletions(-)

diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 3acd83204006..2a7060f5d815 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -45,8 +45,7 @@
     "@sentry/core": "8.0.0-alpha.2",
     "@sentry/types": "8.0.0-alpha.2",
     "@sentry/utils": "8.0.0-alpha.2",
-    "preact": "^10.19.4",
-    "preact-compat": "^3.19.0"
+    "preact": "^10.19.4"
   },
   "scripts": {
     "build": "run-p build:transpile build:types build:bundle",
diff --git a/yarn.lock b/yarn.lock
index 0bb09071541c..e23dcd03aca4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -18463,13 +18463,6 @@ image-size@~0.5.0:
   resolved "https://registry.yarnpkg.com/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
   integrity sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=
 
-immutability-helper@^2.7.1:
-  version "2.9.1"
-  resolved "https://registry.yarnpkg.com/immutability-helper/-/immutability-helper-2.9.1.tgz#71c423ba387e67b6c6ceba0650572f2a2a6727df"
-  integrity sha512-r/RmRG8xO06s/k+PIaif2r5rGc3j4Yhc01jSBfwPCXDLYZwp/yxralI37Df1mwmuzcCsen/E/ITKcTEvc1PQmQ==
-  dependencies:
-    invariant "^2.2.0"
-
 immutable@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0.tgz#b86f78de6adef3608395efb269a91462797e2c23"
@@ -18778,7 +18771,7 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
-invariant@^2.2.0, invariant@^2.2.1, invariant@^2.2.2:
+invariant@^2.2.1, invariant@^2.2.2:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -26575,35 +26568,6 @@ postgres-range@^1.1.1:
   resolved "https://registry.yarnpkg.com/postgres-range/-/postgres-range-1.1.3.tgz#9ccd7b01ca2789eb3c2e0888b3184225fa859f76"
   integrity sha512-VdlZoocy5lCP0c/t66xAfclglEapXPCIVhqqJRncYpvbCgImF0w67aPKfbqUMr72tO2k5q0TdTZwCLjPTI6C9g==
 
-preact-compat@^3.19.0:
-  version "3.19.0"
-  resolved "https://registry.yarnpkg.com/preact-compat/-/preact-compat-3.19.0.tgz#a71457b6a3bf051690a4411603bc2085aa061c2f"
-  integrity sha512-f83A4hIhH8Uzhb9GbIcGk8SM19ffWlwP9mDaYwQdRnMdekZwcCA7eIAbeV4EMQaV9C0Yuy8iKgBAtyTKPZQt/Q==
-  dependencies:
-    immutability-helper "^2.7.1"
-    preact-context "^1.1.3"
-    preact-render-to-string "^3.8.2"
-    preact-transition-group "^1.1.1"
-    prop-types "^15.6.2"
-    standalone-react-addons-pure-render-mixin "^0.1.1"
-
-preact-context@^1.1.3:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/preact-context/-/preact-context-1.1.4.tgz#866ebd35bef5788f73fc453f06f01b03ddf8f4ff"
-  integrity sha512-gcCjPJ65R0MiW9hDu8W/3WAmyTElIvwLyEO6oLQiM6/TbLKLxCpBCWV8GJjx52TTEyUr60HLDcmoCXZlslelzQ==
-
-preact-render-to-string@^3.8.2:
-  version "3.8.2"
-  resolved "https://registry.yarnpkg.com/preact-render-to-string/-/preact-render-to-string-3.8.2.tgz#bd72964d705a57da3a9e72098acaa073dd3ceff9"
-  integrity sha512-przuZPajiurStGgxMoJP0EJeC4xj5CgHv+M7GfF3YxAdhGgEWAkhOSE0xympAFN20uMayntBZpttIZqqLl77fw==
-  dependencies:
-    pretty-format "^3.5.1"
-
-preact-transition-group@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/preact-transition-group/-/preact-transition-group-1.1.1.tgz#f0a49327ea515ece34ea2be864c4a7d29e5d6e10"
-  integrity sha512-v89XLodCvylf5lMrhI+LqIhDsAjWfiDKV4keAU+L5yDtxmqn8uvjZXn+haKMEG0x0PZz81own19SuNJD5NlOFQ==
-
 preact@^10.19.4:
   version "10.19.4"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.19.4.tgz#735d331d5b1bd2182cc36f2ba481fd6f0da3fe3b"
@@ -26726,11 +26690,6 @@ pretty-format@^29.7.0:
     ansi-styles "^5.0.0"
     react-is "^18.0.0"
 
-pretty-format@^3.5.1:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-3.8.0.tgz#bfbed56d5e9a776645f4b1ff7aa1a3ac4fa3c385"
-  integrity sha512-WuxUnVtlWL1OfZFQFuqvnvs6MiAGk9UNsBostyBOB0Is9wb5uRESevA6rnl/rkksXaGX3GzZhPup5d6Vp1nFew==
-
 pretty-ms@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/pretty-ms/-/pretty-ms-7.0.1.tgz#7d903eaab281f7d8e03c66f867e239dc32fb73e8"
@@ -29861,11 +29820,6 @@ stagehand@^1.0.0:
   dependencies:
     debug "^4.1.0"
 
-standalone-react-addons-pure-render-mixin@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/standalone-react-addons-pure-render-mixin/-/standalone-react-addons-pure-render-mixin-0.1.1.tgz#3c7409f4c79c40de9ac72c616cf679a994f37551"
-  integrity sha512-HFkwqpJmvz4vxHyzdeUcjtsp8Am+NauLXdU2/YXT1/InPbszaRo1cLPAy/58H7oOPNNjteqHcv04JEw+d9C+Xw==
-
 static-extend@^0.1.1:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6"

From 45916035fe85115d855b1bdb8ad4cab390f95ae9 Mon Sep 17 00:00:00 2001
From: Abhijeet Prasad <aprasad@sentry.io>
Date: Thu, 14 Mar 2024 10:29:06 -0400
Subject: [PATCH 54/54] Try aliasing preact typescript declaration to fix ts
 errors (#11088)

Right now the feedback PR fails ts3.8 e2e tests. This is because of TS issues, preact types do not work well with older
TS types:

```
> @sentry-internal/ts3.8-test@ type-check /home/runner/work/sentry-javascript/sentry-javascript/dev-packages/e2e-tests/test-applications/generic-ts3.8
> tsc --project tsconfig.json

##[debug]Dropping file value '/home/runner/work/sentry-javascript/sentry-javascript/node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts'. Path does not exist
Error: node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts(1462,3): error TS2304: Cannot find name 'SubmitEvent'.
##[debug]Dropping file value '/home/runner/work/sentry-javascript/sentry-javascript/node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts'. Path does not exist
Error: node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts(1479,25): error TS2304: Cannot find name 'PictureInPictureEvent'.
##[debug]Dropping file value '/home/runner/work/sentry-javascript/sentry-javascript/node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts'. Path does not exist
Error: node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts(2549,65): error TS2304: Cannot find name 'MathMLElement'.
##[debug]Dropping file value '/home/runner/work/sentry-javascript/sentry-javascript/node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts'. Path does not exist
Error: node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts(2565,49): error TS2304: Cannot find name 'MathMLElement'.
##[debug]Dropping file value '/home/runner/work/sentry-javascript/sentry-javascript/node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts'. Path does not exist
Error: node_modules/.pnpm/registry.npmjs.org+preact@10.19.6/node_modules/preact/src/jsx.d.ts(2571,52): error TS2304: Cannot find name 'MathMLElement'.
```

Essentially these types don't work on older versions and because the
feedback package is depended on by the browser package, we will break a
certain set of our users. We have to fix this before we can ship because
of the browser package dependency.

To get around this, we do a workaround with
`packages/feedback/scripts/shim-preact-export.js`. Essentially we shim
the preact type in our exports, which should change what the declaration
files themselves point to. So something like the following:

```ts
import type { ComponentChildren, VNode } from 'preact';
```

turns into

```ts
// no preact to be seen!
type ComponentChildren: any;
type VNode: any;
```
---
 packages/feedback/package.json                |  2 +-
 .../feedback/scripts/shim-preact-export.js    | 75 +++++++++++++++++++
 2 files changed, 76 insertions(+), 1 deletion(-)
 create mode 100644 packages/feedback/scripts/shim-preact-export.js

diff --git a/packages/feedback/package.json b/packages/feedback/package.json
index 2a7060f5d815..48d41f588447 100644
--- a/packages/feedback/package.json
+++ b/packages/feedback/package.json
@@ -54,7 +54,7 @@
     "build:dev": "run-p build:transpile build:types",
     "build:types": "run-s build:types:core build:types:downlevel",
     "build:types:core": "tsc -p tsconfig.types.json",
-    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8",
+    "build:types:downlevel": "yarn downlevel-dts build/npm/types build/npm/types-ts3.8 --to ts3.8 && yarn node ./scripts/shim-preact-export.js",
     "build:watch": "run-p build:transpile:watch build:bundle:watch build:types:watch",
     "build:dev:watch": "run-p build:transpile:watch build:types:watch",
     "build:transpile:watch": "yarn build:transpile --watch",
diff --git a/packages/feedback/scripts/shim-preact-export.js b/packages/feedback/scripts/shim-preact-export.js
new file mode 100644
index 000000000000..bd74e4da0a05
--- /dev/null
+++ b/packages/feedback/scripts/shim-preact-export.js
@@ -0,0 +1,75 @@
+// preact does not support more modern TypeScript versions, which breaks our users that depend on older
+// TypeScript versions. To fix this, we shim the types from preact to be any and remove the dependency on preact
+// for types directly. This script is meant to be run after the build/npm/types-ts3.8 directory is created.
+
+// Path: build/npm/types-ts3.8/global.d.ts
+
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * This regex looks for preact imports we can replace and shim out.
+ *
+ * Example:
+ * import { ComponentChildren, VNode } from 'preact';
+ */
+const preactImportRegex = /import\s*{\s*([\w\s,]+)\s*}\s*from\s*'preact'\s*;?/;
+
+function walk(dir) {
+  const files = fs.readdirSync(dir);
+  files.forEach(file => {
+    const filePath = path.join(dir, file);
+    const stat = fs.lstatSync(filePath);
+    if (stat.isDirectory()) {
+      walk(filePath);
+    } else {
+      if (filePath.endsWith('.d.ts')) {
+        const content = fs.readFileSync(filePath, 'utf8');
+        const capture = preactImportRegex.exec(content);
+        if (capture) {
+          const groups = capture[1].split(',').map(s => s.trim());
+
+          // This generates a shim snippet to replace the type imports from preact
+          // It generates a snippet based on the capture groups of preactImportRegex.
+          //
+          // Example:
+          //
+          // import type { ComponentChildren, VNode } from 'preact';
+          // becomes
+          // type ComponentChildren: any;
+          // type VNode: any;
+          const snippet = groups.reduce((acc, curr) => {
+            const searchableValue = curr.includes(' as ') ? curr.split(' as ')[1] : curr;
+
+            // look to see if imported as value, then we have to use declare const
+            if (content.includes(`typeof ${searchableValue}`)) {
+              return `${acc}declare const ${searchableValue}: any;\n`;
+            }
+
+            // look to see if generic type like Foo<T>
+            if (content.includes(`${searchableValue}<`)) {
+              return `${acc}type ${searchableValue}<T> = any;\n`;
+            }
+
+            // otherwise we can just leave as type
+            return `${acc}type ${searchableValue} = any;\n`;
+          }, '');
+
+          // we then can remove the import from preact
+          const newContent = content.replace(preactImportRegex, '// replaced import from preact');
+
+          // and write the new content to the file
+          fs.writeFileSync(filePath, snippet + newContent, 'utf8');
+        }
+      }
+    }
+  });
+}
+
+function run() {
+  // recurse through build/npm/types-ts3.8 directory
+  const dir = path.join('build', 'npm', 'types-ts3.8');
+  walk(dir);
+}
+
+run();