ref(scraps): Move the form system into the package

.agents/skills/generate-frontend-forms/SKILL.md

@@ -1113,13 +1113,13 @@ When creating auto-save fields:
 
 ## File References
 
-| File                                                   | Purpose                     |
-| ------------------------------------------------------ | --------------------------- |
-| `static/app/components/core/form/scrapsForm.tsx`       | Main form hook              |
-| `static/app/components/core/form/autoSaveForm.tsx`     | Auto-save wrapper           |
-| `static/app/components/core/form/formErrorContext.tsx` | Host error-mapper contract  |
-| `static/app/scrapsProviders/formError.tsx`             | Sentry request-error mapper |
-| `static/app/components/core/form/field/*.tsx`          | Individual field components |
-| `static/app/components/core/form/layout/index.tsx`     | Layout components           |
-| `static/app/components/core/form/displayField.tsx`     | Display-only layouts        |
-| `static/app/components/core/form/form.stories.tsx`     | Usage examples              |
+| File                                                         | Purpose                     |
+| ------------------------------------------------------------ | --------------------------- |
+| `static/packages/scraps/src/form/scrapsForm.tsx`             | Main form hook              |
+| `static/packages/scraps/src/form/autoSaveForm.tsx`           | Auto-save wrapper           |
+| `static/packages/scraps/src/form/formErrorContext/index.tsx` | Host error-mapper contract  |
+| `static/app/scrapsProviders/formError.tsx`                   | Sentry request-error mapper |
+| `static/packages/scraps/src/form/field/*.tsx`                | Individual field components |
+| `static/packages/scraps/src/form/layout/index.tsx`           | Layout components           |
+| `static/packages/scraps/src/form/displayField.tsx`           | Display-only layouts        |
+| `static/app/components/core/form/form.mdx`                   | Usage examples              |

.agents/skills/migrate-frontend-forms/SKILL.md

@@ -619,7 +619,7 @@ Sentry's SettingsSearch allows users to search for individual settings fields. W
 `FormSearch` is a **build-time marker component** — it has zero runtime behavior and simply renders its children unchanged. Its `route` prop is read by a static extraction script to associate form fields with their navigation route, enabling them to appear in SettingsSearch results.
 
 ```tsx
-import {FormSearch} from 'sentry/components/core/form';
+import {FormSearch} from '@sentry/scraps/form';
 
 <FormSearch route="/settings/account/details/">
   <FieldGroup title={t('Account Details')}>

static/app/components/actions/archive.tsx

@@ -2,6 +2,7 @@ import styled from '@emotion/styled';
 import {IconChevron} from '@sentry/icons/chevron';
 
 import {Button, ButtonBar} from '@sentry/scraps/button';
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import type {MenuItemProps} from '@sentry/scraps/dropdownMenu';
 import {DropdownMenu} from '@sentry/scraps/dropdownMenu';
 import {Flex} from '@sentry/scraps/layout';
@@ -10,7 +11,6 @@ import {openModal} from '@sentry/scraps/modal';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 import type {SelectValue} from '@sentry/scraps/select';
 
-import {openConfirmModal} from 'sentry/components/confirm';
 import {CustomIgnoreCountModal} from 'sentry/components/customIgnoreCountModal';
 import {CustomIgnoreDurationModal} from 'sentry/components/customIgnoreDurationModal';
 import {t, tct, tn} from 'sentry/locale';

static/app/components/actions/confirmableAction.tsx

@@ -1,6 +1,6 @@
 import {Fragment} from 'react';
 
-import {Confirm} from 'sentry/components/confirm';
+import {Confirm} from '@sentry/scraps/confirm';
 
 type ConfirmProps = React.ComponentProps<typeof Confirm>;
 type Props = {

static/app/components/actions/resolve.tsx

@@ -5,14 +5,14 @@ import {IconChevron} from '@sentry/icons/chevron';
 import {IconReleases} from '@sentry/icons/releases';
 
 import {Button, ButtonBar, LinkButton} from '@sentry/scraps/button';
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import type {MenuItemProps} from '@sentry/scraps/dropdownMenu';
 import {DropdownMenu} from '@sentry/scraps/dropdownMenu';
 import {Flex} from '@sentry/scraps/layout';
 import {useModal} from '@sentry/scraps/modal';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
-import {openConfirmModal} from 'sentry/components/confirm';
 import {CustomCommitsResolutionModal} from 'sentry/components/customCommitsResolutionModal';
 import {CustomResolutionModal} from 'sentry/components/customResolutionModal';
 import {t} from 'sentry/locale';

static/app/components/backendJsonFormAdapter/tableAdapter.tsx

@@ -3,12 +3,12 @@ import {IconDelete} from '@sentry/icons/delete';
 
 import {Alert} from '@sentry/scraps/alert';
 import {Button} from '@sentry/scraps/button';
+import {Confirm} from '@sentry/scraps/confirm';
 import {Input} from '@sentry/scraps/input';
 import {Flex, Stack} from '@sentry/scraps/layout';
 import {singleLineRenderer} from '@sentry/scraps/markdown';
 import {Text} from '@sentry/scraps/text';
 
-import {Confirm} from 'sentry/components/confirm';
 import {t} from 'sentry/locale';
 
 import type {JsonFormAdapterFieldConfig} from './types';

static/app/components/confirm.spec.tsx

@@ -9,7 +9,7 @@ import {
   waitFor,
 } from 'sentry-test/reactTestingLibrary';
 
-import {Confirm} from './confirm';
+import {Confirm} from '@sentry/scraps/confirm';
 
 describe('Confirm', () => {
   beforeEach(() => {

static/app/components/confirm.stories.tsx

@@ -2,12 +2,11 @@ import {Fragment, useState} from 'react';
 import styled from '@emotion/styled';
 
 import {Button} from '@sentry/scraps/button';
+import {Confirm, openConfirmModal} from '@sentry/scraps/confirm';
 import {Link} from '@sentry/scraps/link';
 
 import * as Storybook from 'sentry/stories';
 
-import {Confirm, openConfirmModal} from './confirm';
-
 export default Storybook.story('Confirm', story => {
   story('Triggers', () => {
     const [state, setState] = useState('empty');

static/app/components/confirmDelete.tsx

@@ -2,12 +2,12 @@ import {Fragment, useId} from 'react';
 
 import {Alert} from '@sentry/scraps/alert';
 import {InlineCode} from '@sentry/scraps/code';
+import {Confirm} from '@sentry/scraps/confirm';
 import {Input} from '@sentry/scraps/input';
 
 import {t} from 'sentry/locale';
 
 import {FieldGroup} from './forms/fieldGroup';
-import {Confirm} from './confirm';
 
 interface Props extends Omit<
   React.ComponentProps<typeof Confirm>,

static/app/components/core/form/autoSaveForm.mdx

@@ -4,7 +4,7 @@ description: A field component that automatically saves changes individually, fo
 category: forms
 source: '@sentry/scraps/form'
 resources:
-  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/form/autoSaveForm.tsx
+  js: https://github.com/getsentry/sentry/blob/master/static/packages/scraps/src/form/autoSaveForm.tsx
 ---
 
 import {Container} from '@sentry/scraps/layout';

static/app/components/core/form/displayField.mdx

@@ -2,24 +2,24 @@
 title: DisplayField
 description: Display information alongside form inputs with matching responsive layouts.
 category: forms
-source: '@sentry/scraps/formPresentation'
+source: '@sentry/scraps/form'
 resources:
-  js: https://github.com/getsentry/sentry/blob/master/static/packages/scraps/src/formPresentation/displayField.tsx
+  js: https://github.com/getsentry/sentry/blob/master/static/packages/scraps/src/form/displayField.tsx
 ---
 
-import {DisplayField} from '@sentry/scraps/formPresentation';
+import {DisplayField} from '@sentry/scraps/form';
 import {Container} from '@sentry/scraps/layout';
 
 import * as Storybook from 'sentry/stories';
 
-import documentation from '!!type-loader!@sentry/scraps/formPresentation';
+import documentation from '!!type-loader!@sentry/scraps/form/displayField';
 
 export {documentation};
 
 Use `DisplayField.Row` or `DisplayField.Stack` for information such as creation dates and account metadata shown alongside form inputs. Both render a description list with a term and its details. They work without a form provider and do not register a value, run validation, or manage focus.
 
 ```jsx
-import {DisplayField} from '@sentry/scraps/formPresentation';
+import {DisplayField} from '@sentry/scraps/form';
 
 <DisplayField.Row label="Created">January 1, 2025</DisplayField.Row>;
 ```

static/app/components/core/form/field/inputField.spec.tsx

@@ -3,8 +3,7 @@ import {expectTypeOf} from 'expect-type';
 import {render, screen, userEvent} from 'sentry-test/reactTestingLibrary';
 
 import {defaultFormOptions, useScrapsForm} from '@sentry/scraps/form';
-
-import type {InputFieldProps} from './inputField';
+import type {InputFieldProps} from '@sentry/scraps/form/field/inputField';
 
 function TestForm() {
   const form = useScrapsForm({

static/app/components/core/form/fields.mdx

@@ -4,7 +4,7 @@ description: Reference for all available form field components and how to create
 category: forms
 source: '@sentry/scraps/form'
 resources:
-  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/form/field
+  js: https://github.com/getsentry/sentry/blob/master/static/packages/scraps/src/form/field
 ---
 
 import {Container} from '@sentry/scraps/layout';

static/app/components/core/form/form.mdx

@@ -4,7 +4,7 @@ description: A form system built on TanStack React Form and Zod for building val
 category: forms
 source: '@sentry/scraps/form'
 resources:
-  js: https://github.com/getsentry/sentry/blob/master/static/app/components/core/form/scrapsForm.tsx
+  js: https://github.com/getsentry/sentry/blob/master/static/packages/scraps/src/form/scrapsForm.tsx
 ---
 
 import {Container} from '@sentry/scraps/layout';

static/app/components/events/eventAttachmentActions.tsx

@@ -3,10 +3,10 @@ import {IconDownload} from '@sentry/icons/download';
 import {IconShow} from '@sentry/icons/show';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {Confirm} from '@sentry/scraps/confirm';
 import {Grid} from '@sentry/scraps/layout';
 
 import {useRole} from 'sentry/components/acl/useRole';
-import {Confirm} from 'sentry/components/confirm';
 import {t} from 'sentry/locale';
 import type {IssueAttachment} from 'sentry/types/group';
 import {useOrganization} from 'sentry/utils/useOrganization';

static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx

@@ -4,14 +4,14 @@ import {IconChevron} from '@sentry/icons/chevron';
 import {IconEllipsis} from '@sentry/icons/ellipsis';
 
 import {Button} from '@sentry/scraps/button';
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import {DropdownMenu} from '@sentry/scraps/dropdownMenu';
 import {Container, Flex, Grid, Stack} from '@sentry/scraps/layout';
 import {OverlayTrigger} from '@sentry/scraps/overlayTrigger';
 import {PanelProvider} from '@sentry/scraps/panelProvider';
 import {Text} from '@sentry/scraps/text';
 
 import {useRole} from 'sentry/components/acl/useRole';
-import {openConfirmModal} from 'sentry/components/confirm';
 import {ImageViewer} from 'sentry/components/events/attachmentViewers/imageViewer';
 import {
   imageMimeTypes,

static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx

@@ -4,11 +4,11 @@ import {css} from '@emotion/react';
 import styled from '@emotion/styled';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {Confirm} from '@sentry/scraps/confirm';
 import {useHotkeys} from '@sentry/scraps/hotkey';
 import {Stack, Grid} from '@sentry/scraps/layout';
 import type {ModalRenderProps} from '@sentry/scraps/modal';
 
-import {Confirm} from 'sentry/components/confirm';
 import {DateTime} from 'sentry/components/dateTime';
 import {ImageViewer} from 'sentry/components/events/attachmentViewers/imageViewer';
 import {webmMimeTypes} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';

static/app/components/events/interfaces/debugMeta/debugImageDetails/candidate/actions.tsx

@@ -2,12 +2,12 @@ import {IconDelete} from '@sentry/icons/delete';
 import {IconDownload} from '@sentry/icons/download';
 
 import {Button, LinkButton} from '@sentry/scraps/button';
+import {Confirm} from '@sentry/scraps/confirm';
 import {Grid} from '@sentry/scraps/layout';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {Access} from 'sentry/components/acl/access';
 import {useRole} from 'sentry/components/acl/useRole';
-import {Confirm} from 'sentry/components/confirm';
 import {t} from 'sentry/locale';
 import type {ImageCandidate} from 'sentry/types/debugImage';
 import {CandidateDownloadStatus} from 'sentry/types/debugImage';

static/app/components/feedback/feedbackItem/screenshotSection.tsx

@@ -2,10 +2,10 @@ import styled from '@emotion/styled';
 import {IconDelete} from '@sentry/icons/delete';
 
 import {Button} from '@sentry/scraps/button';
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import {useModal} from '@sentry/scraps/modal';
 
 import {useDeleteEventAttachmentOptimistic} from 'sentry/actionCreators/events';
-import {openConfirmModal} from 'sentry/components/confirm';
 import {t} from 'sentry/locale';
 import type {Event} from 'sentry/types/event';
 import type {Organization} from 'sentry/types/organization';

static/app/components/feedback/list/useBulkEditFeedbacks.tsx

@@ -1,9 +1,9 @@
 import {useCallback, useMemo} from 'react';
 import {useQueryState} from 'nuqs';
 
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import {toast} from '@sentry/scraps/toast';
 
-import {openConfirmModal} from 'sentry/components/confirm';
 import {useDeleteFeedback} from 'sentry/components/feedback/useDeleteFeedback';
 import {useMutateFeedback} from 'sentry/components/feedback/useMutateFeedback';
 import {t, tct, tn} from 'sentry/locale';

static/app/components/feedback/useDeleteFeedback.tsx

@@ -1,9 +1,9 @@
 import {useCallback} from 'react';
 
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import {toast} from '@sentry/scraps/toast';
 
 import {bulkDelete} from 'sentry/actionCreators/group';
-import {openConfirmModal} from 'sentry/components/confirm';
 import {t} from 'sentry/locale';
 import {normalizeUrl} from 'sentry/utils/url/normalizeUrl';
 import {useApi} from 'sentry/utils/useApi';

static/app/components/forms/fields/booleanField.tsx

@@ -1,9 +1,9 @@
 import type {FormEvent, ReactNode} from 'react';
 
+import {Confirm} from '@sentry/scraps/confirm';
 import {Switch, type SwitchProps} from '@sentry/scraps/switch';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
-import {Confirm} from 'sentry/components/confirm';
 import {FormField} from 'sentry/components/forms/formField';
 
 // XXX(epurkhiser): This is wrong, it should not be inheriting these props

static/app/components/forms/fields/selectField.tsx

@@ -1,11 +1,11 @@
 import {Component, createContext, useContext} from 'react';
 
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import {Flex} from '@sentry/scraps/layout';
 import type {ControlProps, SelectValue} from '@sentry/scraps/select';
 import {Select} from '@sentry/scraps/select';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
-import {openConfirmModal} from 'sentry/components/confirm';
 import {FormField} from 'sentry/components/forms/formField';
 import {FormFieldControlState} from 'sentry/components/forms/formField/controlState';
 import {t} from 'sentry/locale';

static/app/components/forms/fields/tableField.tsx

@@ -5,11 +5,11 @@ import {IconDelete} from '@sentry/icons/delete';
 
 import {Alert} from '@sentry/scraps/alert';
 import {Button} from '@sentry/scraps/button';
+import {Confirm} from '@sentry/scraps/confirm';
 import {Input} from '@sentry/scraps/input';
 import {Flex} from '@sentry/scraps/layout';
 import {singleLineRenderer} from '@sentry/scraps/markdown';
 
-import {Confirm} from 'sentry/components/confirm';
 import {FormField} from 'sentry/components/forms/formField';
 import type {TableType} from 'sentry/components/forms/types';
 import {t} from 'sentry/locale';

static/app/components/notificationActions/notificationActionItem.tsx

@@ -6,6 +6,7 @@ import {useMutation} from '@tanstack/react-query';
 
 import {Badge} from '@sentry/scraps/badge';
 import {Button} from '@sentry/scraps/button';
+import {openConfirmModal} from '@sentry/scraps/confirm';
 import type {MenuItemProps} from '@sentry/scraps/dropdownMenu';
 import {DropdownMenu} from '@sentry/scraps/dropdownMenu';
 import {Flex, Grid} from '@sentry/scraps/layout';
@@ -14,7 +15,6 @@ import {toast} from '@sentry/scraps/toast';
 import {Tooltip} from '@sentry/scraps/tooltip';
 
 import {Card} from 'sentry/components/card';
-import {openConfirmModal} from 'sentry/components/confirm';
 import {PluginIcon} from 'sentry/icons/pluginIcon';
 import {t} from 'sentry/locale';
 import type {