[pull] master from supabase:master

apps/design-system/__registry__/index.tsx

@@ -148,17 +148,6 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
-    "alert-destructive": {
-      name: "alert-destructive",
-      type: "components:example",
-      registryDependencies: ["alert"],
-      component: React.lazy(() => import("@/registry/default/example/alert-destructive")),
-      source: "",
-      files: ["registry/default/example/alert-destructive.tsx"],
-      category: "undefined",
-      subcategory: "undefined",
-      chunks: []
-    },
     "alert-dialog-demo": {
       name: "alert-dialog-demo",
       type: "components:example",

apps/design-system/components/side-navigation.tsx

@@ -1,5 +1,5 @@
-import { docsConfig } from '@/config/docs'
 import NavigationItem from '@/components/side-navigation-item'
+import { docsConfig } from '@/config/docs'
 
 function SideNavigation() {
   return (
@@ -9,7 +9,16 @@ function SideNavigation() {
           <div className="font-mono uppercase text-xs text-foreground-lighter/75 mb-2 px-6 tracking-widest">
             {section.title}
           </div>
-          {section.items.map((item, i) => (
+          {(section.sortOrder === 'alphabetical'
+            ? (() => {
+                const priorityItems = section.items.filter((item) => item.priority)
+                const regularItems = section.items
+                  .filter((item) => !item.priority)
+                  .sort((a, b) => a.title.localeCompare(b.title))
+                return [...priorityItems, ...regularItems]
+              })()
+            : section.items
+          ).map((item, i) => (
             <NavigationItem item={item} key={`${item.href}-${i}`} />
           ))}
         </div>

apps/design-system/config/docs.ts

@@ -9,6 +9,7 @@ export const docsConfig: DocsConfig = {
   sidebarNav: [
     {
       title: 'Getting Started',
+      sortOrder: 'manual',
       items: [
         {
           title: 'Introduction',
@@ -49,11 +50,13 @@ export const docsConfig: DocsConfig = {
     },
     {
       title: 'UI Patterns',
+      sortOrder: 'alphabetical',
       items: [
         {
           title: 'Introduction',
-          href: '/docs/ui-patterns/ui-pattern-components',
+          href: '/docs/ui-patterns/ui-patterns',
           items: [],
+          priority: true,
         },
         {
           title: 'Navigation',
@@ -79,11 +82,13 @@ export const docsConfig: DocsConfig = {
     },
     {
       title: 'Fragment Components',
+      sortOrder: 'alphabetical',
       items: [
         {
           title: 'Introduction',
           href: '/docs/fragments/fragment-components',
           items: [],
+          priority: true,
         },
         {
           title: 'Admonition',
@@ -174,11 +179,13 @@ export const docsConfig: DocsConfig = {
     },
     {
       title: 'Atom Components',
+      sortOrder: 'alphabetical',
       items: [
         {
           title: 'Introduction',
           href: '/docs/components/atom-components',
           items: [],
+          priority: true,
         },
         {
           title: 'Accordion',

apps/design-system/content/docs/components/alert.mdx

@@ -7,47 +7,19 @@ source:
   shadcn: true
 ---
 
-The primitive component that forms [Admonition](../fragments/admonition). Do not use this component unless you are intentionally deviating from our consistent callout pattern.
+Alert forms the core primitives for [Admonition](../fragments/admonition). Use the Admonition component unless you must deviate from our consistent patterns. Examples where Alert might make sense include:
 
-<ComponentPreview
-  name="alert-demo"
-  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
-  peekCode
-  wide
-/>
+- Bespoke icon requirement
+- Highly custom internal contents
 
-## Installation
-
-<Tabs defaultValue="cli">
+<ComponentPreview name="alert-demo" peekCode wide />
 
-<TabsList>
-  <TabsTrigger value="cli">CLI</TabsTrigger>
-  <TabsTrigger value="manual">Manual</TabsTrigger>
-</TabsList>
-<TabsContent value="cli">
+## Installation
 
 ```bash
 npx shadcn-ui@latest add alert
 ```
 
-</TabsContent>
-
-<TabsContent value="manual">
-
-<Steps>
-
-<Step>Copy and paste the following code into your project.</Step>
-
-<ComponentSource name="alert" />
-
-<Step>Update the import paths to match your project setup.</Step>
-
-</Steps>
-
-</TabsContent>
-
-</Tabs>
-
 ## Usage
 
 ```tsx
@@ -63,19 +35,3 @@ import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
   </AlertDescription>
 </Alert>
 ```
-
-## Examples
-
-### Default
-
-<ComponentPreview
-  name="alert-demo"
-  description="An alert with an icon, title and description. The title says 'Heads up!' and the description is 'You can add components to your app using the cli.'."
-/>
-
-### Destructive
-
-<ComponentPreview
-  name="alert-destructive"
-  description="An alert with a destructive variant. The title says 'Delete this item?' and the description is 'This action cannot be undone.'."
-/>

apps/design-system/content/docs/fragments/admonition.mdx

@@ -4,7 +4,7 @@ description: Displays a callout for user attention.
 fragment: true
 ---
 
-Admonition provides focus for situations that require a callout. Use this instead of [Alert](../components/alert) unless you specifically need the primitives.
+Admonition provides focus for situations that require a callout.
 
 <ComponentPreview
   name="admonition-demo"
@@ -13,6 +13,8 @@ Admonition provides focus for situations that require a callout. Use this instea
   wide
 />
 
+Use Admonition instead of [Alert](../components/alert) unless you specifically need the primitives. If in doubt, stick with Admonition.
+
 ## Usage
 
 ```tsx
@@ -54,6 +56,13 @@ Only ever use the `primary` (green) button `type` on a `default` Admonition. Eve
   className="[&_.preview>[data-orientation=vertical]]:sm:max-w-[70%]"
 />
 
+There are several components that wrap the `warning` Admonition type with reusable text or functionality. These include:
+
+- AlertError
+- NoPermission
+
+AlertError for example rolls up consistent error handling and support contact methods.
+
 ### Destructive
 
 <ComponentPreview

apps/design-system/content/docs/ui-patterns/empty-states.mdx

@@ -14,15 +14,15 @@ There are two ways an empty state may be displayed in cases where there is no da
 
 ### Initial state
 
-Perhaps the user has not yet created any data. The presentation of this empty state depends on the context of the list and the type of data it contains.
+Perhaps the user has not yet created any data. The presentation of this empty state depends on the context of the list and the type of data it contains. Be mindful of the journey to rendering an empty state and any possible layout shift along the way.
 
 #### Presentational
 
 The user may be learning about a feature for the first time, and could benefit from lightweight feature education or onboarding. Use the dedicated [EmptyStatePresentational](../fragments/empty-state-presentational) component in this case, putting emphasis on an action the user can take.
 
 <ComponentPreview name="empty-state-presentational-icon" peekCode wide />
 
-Remember to use active language in these cases. For example: “Create a vector bucket” instead of “No vector buckets found”. The latter is more appropriate in table-based presentations, as described below.
+Remember to use active language in presentational empty states. For example: “Create a vector bucket” instead of “No vector buckets found”. The latter is more appropriate in table-based presentations, as described below.
 
 #### Informational
 

apps/design-system/content/docs/ui-patterns/ui-pattern-components.mdx → apps/design-system/content/docs/ui-patterns/ui-patterns.mdx

@@ -1,9 +1,9 @@
 ---
-title: UI Pattern components
-description: Higher-level design patterns that guide how to compose components together to solve common interface problems.
+title: UI patterns
+description: Higher-level guidance on how to compose components together to solve common interface problems.
 ---
 
-UI Patterns are reusable design solutions that combine multiple components from our design system to address common interface challenges. Unlike atom components (basic building blocks like buttons and inputs) or fragment components (pre-built composite components), UI patterns provide guidelines and best practices for structuring entire interface sections.
+UI patterns are reusable design solutions that combine multiple components from our design system to address common interface challenges. Unlike atom components (basic building blocks like buttons and inputs) or fragment components (pre-built composite components), UI patterns provide guidelines and best practices for structuring entire interface sections.
 
 These patterns help ensure consistency across Supabase products by establishing standard approaches for:
 

apps/design-system/registry/default/example/admonition-demo.tsx

@@ -1,4 +1,3 @@
-import Link from 'next/link'
 import { Button } from 'ui'
 import { Admonition } from 'ui-patterns/admonition'
 
@@ -7,20 +6,10 @@ export default function AdmonitionDemo() {
     <Admonition
       type="default"
       layout="horizontal"
-      className="mb-12 [&>div]:!translate-y-0"
       title="OAuth Server is disabled"
       description="Enable OAuth Server to make your project act as an identity provider for
             third-party applications."
-      actions={
-        <Button asChild type="default">
-          <Link
-            href={`/`}
-            onClick={(e) => e.preventDefault()} // Just for demo
-          >
-            OAuth Server Settings
-          </Link>
-        </Button>
-      }
+      actions={<Button type="default">OAuth Server Settings</Button>}
     />
   )
 }

apps/design-system/registry/default/example/alert-demo.tsx

@@ -1,14 +1,13 @@
 import { Terminal } from 'lucide-react'
-
 import { Alert_Shadcn_, AlertDescription_Shadcn_, AlertTitle_Shadcn_ } from 'ui'
 
 export default function AlertDemo() {
   return (
     <Alert_Shadcn_>
-      <Terminal className="h-4 w-4" />
+      <Terminal size={16} />
       <AlertTitle_Shadcn_>Heads up!</AlertTitle_Shadcn_>
       <AlertDescription_Shadcn_>
-        You can add components to your app using the cli.
+        You can also add components to your app using the CLI.
       </AlertDescription_Shadcn_>
     </Alert_Shadcn_>
   )

apps/design-system/registry/examples.ts

@@ -37,12 +37,6 @@ export const examples: Registry = [
     registryDependencies: ['alert'],
     files: ['example/alert-demo.tsx'],
   },
-  {
-    name: 'alert-destructive',
-    type: 'components:example',
-    registryDependencies: ['alert'],
-    files: ['example/alert-destructive.tsx'],
-  },
   {
     name: 'alert-dialog-demo',
     type: 'components:example',

apps/design-system/types/nav.ts

@@ -7,10 +7,12 @@ export interface NavItem {
   external?: boolean
   icon?: any // to do: clean up later | keyof typeof Icons
   label?: string
+  priority?: boolean // If true, item appears first even when section is sorted alphabetically
 }
 
 export interface NavItemWithChildren extends NavItem {
   items: NavItemWithChildren[]
+  sortOrder?: 'manual' | 'alphabetical' // Sidebar navigation sort order for top-level sections
 }
 
 export interface MainNavItem extends NavItem {}

apps/docs/features/docs/MdxBase.shared.tsx

@@ -1,11 +1,11 @@
 import { ArrowDown, Check, X } from 'lucide-react'
 import Link from 'next/link'
 import { Button, Image } from 'ui'
-import { Heading } from 'ui/src/components/CustomHTMLElements'
-import { Admonition } from 'ui-patterns/admonition'
+import { Admonition, type AdmonitionProps } from 'ui-patterns/admonition'
 import { GlassPanel } from 'ui-patterns/GlassPanel'
 import { IconPanel } from 'ui-patterns/IconPanel'
 import SqlToRest from 'ui-patterns/SqlToRest'
+import { Heading } from 'ui/src/components/CustomHTMLElements'
 import { AiPromptsIndex } from '~/app/guides/getting-started/ai-prompts/[slug]/AiPromptsIndex'
 import { AppleSecretGenerator } from '~/components/AppleSecretGenerator'
 import AuthProviders from '~/components/AuthProviders'
@@ -32,10 +32,15 @@ import { TabPanel, Tabs } from '~/features/ui/Tabs'
 import { ErrorCodes } from '../ui/ErrorCodes'
 import { McpConfigPanel } from '../ui/McpConfigPanel'
 
+// Wrap Admonition for Docs-specific styling (within MDX prose, requires a margin-bottom)
+const AdmonitionWithMargin = (props: AdmonitionProps) => {
+  return <Admonition {...props} className="mb-8" />
+}
+
 const components = {
   Accordion,
   AccordionItem,
-  Admonition,
+  Admonition: AdmonitionWithMargin,
   AiPromptsIndex,
   AuthSmsProviderConfig,
   AppleSecretGenerator,

apps/studio/components/grid/SupabaseGrid.tsx

@@ -20,6 +20,7 @@ import { Header, HeaderProps } from './components/header/Header'
 import { RowContextMenu } from './components/menu/RowContextMenu'
 import { GridProps } from './types'
 
+import { keepPreviousData } from '@tanstack/react-query'
 import { useSelectedProjectQuery } from 'hooks/misc/useSelectedProject'
 import { useTableFilter } from './hooks/useTableFilter'
 import { useTableSort } from './hooks/useTableSort'
@@ -54,7 +55,14 @@ export const SupabaseGrid = ({
     : { warning: null }
   const tableQueriesEnabled = msSqlWarning.warning === null
 
-  const { data, error, isSuccess, isError, isLoading, isRefetching } = useTableRowsQuery(
+  const {
+    data,
+    error,
+    isSuccess,
+    isError,
+    isPending: isLoading,
+    isRefetching,
+  } = useTableRowsQuery(
     {
       projectRef: project?.ref,
       connectionString: project?.connectionString,
@@ -66,7 +74,7 @@ export const SupabaseGrid = ({
       roleImpersonationState: roleImpersonationState as RoleImpersonationState,
     },
     {
-      keepPreviousData: true,
+      placeholderData: keepPreviousData,
       enabled: tableQueriesEnabled,
       retry: (_, error: any) => {
         const doesNotExistError = error && error.message?.includes('does not exist')