Merge branch 'master' into mrduncan/recommended-sort

Author: mrduncan

.agents/skills/cell-architecture/SKILL.md

@@ -51,7 +51,7 @@ import {Container} from '@sentry/scraps/layout';
 
 // ❌ Don't create styled components
 const Component = styled('div')`
-  padding: ${space(2)};
+  padding: ${p => p.theme.space.md};
   border: 1px solid ${p => p.theme.tokens.border.primary};
 `;
 
@@ -119,7 +119,7 @@ import {Grid} from '@sentry/scraps/layout';
 const Component = styled('div')`
   display: grid;
   grid-template-columns: repeat(3, 1fr);
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.md};
 `;
 
 // ✅ Use Grid primitive
@@ -147,7 +147,7 @@ import {Stack} from '@sentry/scraps/layout';
 const Component = styled('div')`
   display: flex;
   flex-direction: column;
-  gap: ${space(2)};
+  gap: ${p => p.theme.space.md};
 `;
 
 // ✅ Use Stack primitive (automatically column direction)
@@ -204,7 +204,7 @@ import {Text} from '@sentry/scraps/text';
 // ❌ Don't create styled text components
 const Label = styled('span')`
   color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.fontSizes.small};
+  font-size: ${p => p.theme.font.size.sm};
 `;
 
 // ❌ Don't use raw elements
@@ -242,7 +242,7 @@ import {Heading} from '@sentry/scraps/text';
 
 // ❌ Don't style heading elements
 const Title = styled('h2')`
-  font-size: ${p => p.theme.fontSize.md};
+  font-size: ${p => p.theme.font.size.md};
   font-weight: bold;
 `;
 
@@ -401,7 +401,7 @@ Container supports `margin` props but they are deprecated. Use `gap` on parent c
 ```tsx
 // ❌ Don't use margin between children
 const Child = styled('div')`
-  margin-right: ${p => p.theme.spacing.lg};
+  margin-right: ${p => p.theme.space.lg};
 `;
 
 // ✅ Use gap on parent container
@@ -421,7 +421,7 @@ const Component = styled('div')`
   display: flex;
   flex-direction: column;
   color: ${p => p.theme.tokens.content.secondary};
-  font-size: ${p => p.theme.fontSize.lg};
+  font-size: ${p => p.theme.font.size.lg};
 `;
 
 // ✅ Split into layout and typography primitives

.agents/skills/design-system/SKILL.md

@@ -732,6 +732,20 @@ function MyForm() {
 }
 ```
 
+### Resetting After Save
+
+When a form stays on the page after submission (e.g., settings pages), call `form.reset()` after a successful mutation. This re-syncs the form with updated `defaultValues` so it becomes pristine again — any UI that depends on the form being dirty (like conditionally shown Save/Cancel buttons) will update correctly.
+
+```tsx
+onSubmit: ({value}) =>
+  mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {}),
+```
+
+> **Note**: `AutoSaveForm` handles this automatically. You only need to add this when using `useScrapsForm`.
+
 ### Submit Button
 
 ```tsx
@@ -828,7 +842,11 @@ onSubmit: ({value}) => {
   // Return the promise to keep form.isSubmitting working
   // Add .catch(() => {}) to avoid unhandled rejection - error handling
   // is done by TanStack Query (onError callback, mutation.isError state)
-  return mutation.mutateAsync(value).catch(() => {});
+  // Add .then(() => form.reset()) if the form stays on the page after save
+  return mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {});
 };
 ```
 
@@ -915,6 +933,23 @@ const opts = mutationOptions({
 
 Make sure the zod schema's types are compatible with the API type. For example, if the API expects a string union like `'off' | 'low' | 'high'`, use `z.enum(['off', 'low', 'high'])` instead of `z.string()`.
 
+### Form Reset After Save
+
+```tsx
+// ❌ Don't forget to reset forms that stay on the page after save
+onSubmit: ({value}) => {
+  return mutation.mutateAsync(value).catch(() => {});
+};
+
+// ✅ Call form.reset() after successful save to sync with updated defaultValues
+onSubmit: ({value}) => {
+  return mutation
+    .mutateAsync(value)
+    .then(() => form.reset())
+    .catch(() => {});
+};
+```
+
 ### Layout Choice
 
 ```tsx
@@ -941,6 +976,7 @@ When creating a new form:
 - [ ] Choose appropriate layout (Stack or Row)
 - [ ] Handle server errors with `setFieldErrors`
 - [ ] Add `<form.SubmitButton>` for submission
+- [ ] Call `form.reset()` after successful mutation if the form stays on the page
 
 When creating auto-save fields: