[pull] master from supabase:master

.cursor/rules/studio/forms/RULE.md

@@ -1,5 +1,5 @@
 ---
-description: "Studio: form patterns (page layouts + side panels) and react-hook-form conventions"
+description: 'Studio: form patterns (page layouts + side panels) and react-hook-form conventions'
 globs:
   - apps/studio/**/*.{ts,tsx}
 alwaysApply: false
@@ -29,7 +29,6 @@ Use the Design System UI pattern docs as the source of truth:
 
 ## Actions and state
 
-- Handle dirty state (`form.formState.isDirty`) to show Cancel and to disable Save.
+- Handle dirty state by destructuring `isDirty` from `formState` (`const { isDirty } = form.formState`) then use it to show Cancel and to disable Save.
 - Show loading on submit buttons via `loading`.
 - When submit button is outside the `<form>`, set a stable `formId` and use the button’s `form` prop.
-

apps/design-system/content/docs/ui-patterns/forms.mdx

@@ -49,7 +49,7 @@ Use the shared [Key/Value Field Array](../fragments/key-value-field-array) fragm
 
 4. **Use Cards for grouping**: Wrap form sections in `Card` components with `CardContent` and `CardFooter` for actions.
 
-5. **Handle dirty state**: Show cancel buttons and disable save buttons based on `form.formState.isDirty`.
+5. **Handle dirty state**: Show cancel buttons and disable save buttons based on `form.formState.isDirty`. Make sure you destructure `isDirty` from `form.formState` (see https://react-hook-form.com/docs/useform/formstate)
 
 6. **Error handling**: Always use mutations with `onSuccess` and `onError` callbacks that show toast notifications.
 

apps/design-system/content/docs/ui-patterns/modality.mdx

@@ -104,8 +104,13 @@ Studio implementation (preferred in Studio code):
 import { DiscardChangesConfirmationDialog } from 'components/ui-patterns/Dialogs/DiscardChangesConfirmationDialog'
 import { useConfirmOnClose } from 'hooks/ui/useConfirmOnClose'
 
+const form = useForm(...)
+// Always destructure formState values otherwise they won't be updated
+// See https://react-hook-form.com/docs/useform/formstate
+const { isDirty } = form.formState
+
 const { confirmOnClose, handleOpenChange, modalProps } = useConfirmOnClose({
-  checkIsDirty: () => form.formState.isDirty,
+  checkIsDirty: () => isDirty,
   onClose,
 })
 

apps/design-system/package.json

@@ -8,7 +8,7 @@
     "dev": "next dev --turbopack --port 3003",
     "dev:full": "concurrently \"pnpm dev\" \"pnpm content:dev\"",
     "build": "pnpm run content:build && pnpm run build:registry && next build --turbopack",
-    "build:registry": "tsx --tsconfig ./tsconfig.scripts.json ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
+    "build:registry": "tsx ./scripts/build-registry.mts && prettier --log-level silent --write \"registry/**/*.{ts,tsx,mdx}\" --cache",
     "start": "next start",
     "lint": "eslint .",
     "content:dev": "contentlayer2 dev",

apps/design-system/registry/default/example/error-display-demo.tsx

@@ -1,4 +1,4 @@
-import { ErrorDisplay } from 'ui-patterns/ErrorDisplay'
+import { ErrorDisplay } from 'ui-patterns/ErrorDisplay/ErrorDisplay'
 
 export default function ErrorDisplayDemo() {
   return (

apps/design-system/registry/default/example/error-display-with-children.tsx

@@ -1,4 +1,4 @@
-import { ErrorDisplay } from 'ui-patterns/ErrorDisplay'
+import { ErrorDisplay } from 'ui-patterns/ErrorDisplay/ErrorDisplay'
 
 export default function ErrorDisplayWithChildren() {
   return (

apps/design-system/tsconfig.json

@@ -1,40 +1,23 @@
 {
   "$schema": "https://json.schemastore.org/tsconfig",
-  "extends": "tsconfig/base.json",
+  "extends": "tsconfig/nextjs.json",
   "compilerOptions": {
-    "target": "es5",
+    "allowJs": false,
     "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noEmit": true,
-    "incremental": true,
-    "esModuleInterop": true,
-    "module": "esnext",
-    "moduleResolution": "bundler",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "jsx": "preserve",
     "paths": {
       "@/*": ["./*"],
       "@ui/*": ["./../../packages/ui/src/*"], // handle ui package paths
       "contentlayer/generated": ["./.contentlayer/generated"],
       "icons/*": ["./../../packages/icons/*"]
     },
-    "plugins": [
-      {
-        "name": "next"
-      }
-    ]
+    "plugins": [{ "name": "next" }]
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated",
-    "./../../packages/ui/src/**/*.d.ts"
+    ".contentlayer/generated"
   ],
   "exclude": ["node_modules", "./scripts/build-registry.mts"]
 }

apps/design-system/types/assets.d.ts

@@ -0,0 +1,4 @@
+declare module '*.scss' {
+  export const styles: Record<string, string>
+  export default styles
+}

apps/docs/.gitignore

@@ -32,6 +32,7 @@ public/llms.txt
 public/llms/
 # Generated guide markdown files
 public/docs/
+public/docs.tar.gz
 
 # Copied examples folder
 /examples/

apps/docs/app/layout.tsx

@@ -1,18 +1,17 @@
-import '@code-hike/mdx/styles'
+import '@code-hike/mdx/styles.css'
 import 'config/code-hike.scss'
 import 'ui-patterns/ShimmeringLoader/index.css'
 import '../styles/main.scss'
 import '../styles/new-docs.scss'
 import '../styles/prism-okaidia.scss'
 
-import { TelemetryTagManager } from 'common'
-
-import { genFaviconData } from 'common/MetaFavicons/app-router'
-import type { Metadata, Viewport } from 'next'
 import { GlobalProviders } from '~/features/app.providers'
 import { TopNavSkeleton } from '~/layouts/MainSkeleton'
 import { BASE_PATH, IS_PRODUCTION } from '~/lib/constants'
 import { getCustomContent } from '~/lib/custom-content/getCustomContent'
+import { TelemetryTagManager } from 'common'
+import { genFaviconData } from 'common/MetaFavicons/app-router'
+import type { Metadata, Viewport } from 'next'
 
 const { metadataApplicationName, metadataTitle } = getCustomContent([
   'metadata:application_name',