[pull] master from supabase:master

apps/docs/content/guides/ai.mdx

@@ -31,7 +31,7 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
 {/* <!-- vale off --> */}
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {examples.map((x) => (
+  {aiExamples.map((x) => (
     <div className="col-span-4" key={x.href}>
       <Link href={x.href} passHref>
         <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
@@ -42,48 +42,14 @@ Check out all of the AI [templates and examples](https://github.com/supabase/sup
   ))}
 </div>
 
-export const examples = [
-  {
-    name: 'Headless Vector Search',
-    description: 'A toolkit to perform vector similarity search on your knowledge base embeddings.',
-    href: '/guides/ai/examples/headless-vector-search',
-  },
-  {
-    name: 'Image Search with OpenAI CLIP',
-    description: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.',
-    href: '/guides/ai/examples/image-search-openai-clip',
-  },
-  {
-    name: 'Hugging Face inference',
-    description: 'Generate image captions using Hugging Face.',
-    href: '/guides/ai/examples/huggingface-image-captioning',
-  },
-  {
-    name: 'OpenAI completions',
-    description: 'Generate GPT text completions using OpenAI in Edge Functions.',
-    href: '/guides/ai/examples/openai',
-  },
-  {
-    name: 'Building ChatGPT Plugins',
-    description: 'Use Supabase as a Retrieval Store for your ChatGPT plugin.',
-    href: '/guides/ai/examples/building-chatgpt-plugins',
-  },
-  {
-    name: 'Vector search with Next.js and OpenAI',
-    description:
-      'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.',
-    href: '/guides/ai/examples/nextjs-vector-search',
-  },
-]
-
 {/* <!-- vale on --> */}
 
 ## Integrations
 
 {/* <!-- vale off --> */}
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {integrations.map((x) => (
+  {aiIntegrations.map((x) => (
     <div className="col-span-4" key={x.href}>
       <Link href={x.href} passHref>
         <GlassPanel title={x.name}>{x.description}</GlassPanel>
@@ -92,38 +58,6 @@ export const examples = [
   ))}
 </div>
 
-export const integrations = [
-  {
-    name: 'OpenAI',
-    description:
-      'OpenAI is an AI research and deployment company. Supabase provides a simple way to use OpenAI in your applications.',
-    href: '/guides/ai/examples/building-chatgpt-plugins',
-  },
-  {
-    name: 'Amazon Bedrock',
-    description:
-      'A fully managed service that offers a choice of high-performing foundation models from leading AI companies.',
-    href: '/guides/ai/integrations/amazon-bedrock',
-  },
-  {
-    name: 'Hugging Face',
-    description:
-      "Hugging Face is an open-source provider of NLP technologies. Supabase provides a simple way to use Hugging Face's models in your applications.",
-    href: '/guides/ai/hugging-face',
-  },
-  {
-    name: 'LangChain',
-    description:
-      'LangChain is a language-agnostic, open-source, and self-hosted API for text translation, summarization, and sentiment analysis.',
-    href: '/guides/ai/langchain',
-  },
-  {
-    name: 'LlamaIndex',
-    description: 'LlamaIndex is a data framework for your LLM applications.',
-    href: '/guides/ai/integrations/llamaindex',
-  },
-]
-
 {/* <!-- vale on --> */}
 
 ## Case studies

apps/docs/content/guides/self-hosting.mdx

@@ -34,7 +34,7 @@ The fastest and recommended way to self-host Supabase is using Docker.
 There are several other ways to deploy Supabase with the help of community-driven projects. These projects may be outdated and are seeking active maintainers. If you're interested in maintaining one of these projects, [contact the Community team](/open-source/contributing/supasquad).
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {community.map((x) => (
+  {selfHostingCommunity.map((x) => (
     <div className="md:col-span-6 xl:col-span-3" key={x.href}>
       <Link href={x.href} passHref>
         <GlassPanel
@@ -54,19 +54,6 @@ There are several other ways to deploy Supabase with the help of community-drive
 
 </div>
 
-export const community = [
-  {
-    name: 'Kubernetes',
-    description: 'Helm charts to deploy a Supabase on Kubernetes.',
-    href: 'https://github.com/supabase-community/supabase-kubernetes',
-  },
-  {
-    name: 'Traefik',
-    description: 'A self-hosted Supabase setup with Traefik as a reverse proxy.',
-    href: 'https://github.com/supabase-community/supabase-traefik',
-  },
-]
-
 ## About self-hosting
 
 Self-hosting is a good fit if you need full control over your data, have compliance requirements that prevent using managed services, or want to run Supabase in an isolated environment.

apps/docs/content/guides/storage.mdx

@@ -71,7 +71,7 @@ Specialized storage for vector embeddings and similarity search operations. Desi
 Check out all of the Storage [templates and examples](https://github.com/supabase/supabase/tree/master/examples/storage) in our GitHub repository.
 
 <div className="grid md:grid-cols-12 gap-4 not-prose">
-  {examples.map((x) => (
+  {storageExamples.map((x) => (
     <div className="col-span-12" key={x.href}>
       <Link href={x.href} passHref>
         <GlassPanel icon={'/docs/img/icons/github-icon'} hasLightIcon={true} title={x.name}>
@@ -82,15 +82,6 @@ Check out all of the Storage [templates and examples](https://github.com/supabas
   ))}
 </div>
 
-export const examples = [
-  {
-    name: 'Resumable Uploads with Uppy',
-    description:
-      'Use Uppy to upload files to Supabase Storage using the TUS protocol (resumable uploads).',
-    href: 'https://github.com/supabase/supabase/tree/master/examples/storage/resumable-upload-uppy',
-  },
-]
-
 ## Resources
 
 Find the source code and documentation in the Supabase GitHub repository.

apps/docs/features/docs/MdxBase.tsx

@@ -1,17 +1,17 @@
+import { preprocessMdxWithDefaults } from '~/features/directives/utils'
+import { components } from '~/features/docs/MdxBase.shared'
+import { guidesData } from '~/lib/guidesData'
+import { SerializeOptions } from '~/types/next-mdx-remote-serialize'
+import { isFeatureEnabled } from 'common'
 import { MDXRemote } from 'next-mdx-remote/rsc'
 import { type ComponentProps } from 'react'
 import rehypeKatex from 'rehype-katex'
 import remarkGfm from 'remark-gfm'
 import remarkMath from 'remark-math'
 
-import { isFeatureEnabled } from 'common'
-import { preprocessMdxWithDefaults } from '~/features/directives/utils'
-import { components } from '~/features/docs/MdxBase.shared'
-import { SerializeOptions } from '~/types/next-mdx-remote-serialize'
-
 const mdxOptions: SerializeOptions = {
+  blockJS: false,
   mdxOptions: {
-    useDynamicImport: true,
     remarkPlugins: [[remarkMath, { singleDollarTextMath: false }], remarkGfm],
     rehypePlugins: [rehypeKatex as any],
   },
@@ -40,7 +40,7 @@ const MDXRemoteBase = async ({
   } = mdxOptions
 
   const finalOptions = {
-    scope: { isFeatureEnabled },
+    scope: { isFeatureEnabled, ...guidesData },
     ...mdxOptions,
     ...otherOptions,
     mdxOptions: {

apps/docs/lib/docs.ts

@@ -126,8 +126,8 @@ export async function getGuidesStaticProps(
   }
 
   const mdxOptions: SerializeOptions = {
+    blockJS: false,
     mdxOptions: {
-      useDynamicImport: true,
       remarkPlugins: [[remarkMath, { singleDollarTextMath: false }], remarkGfm],
       rehypePlugins: [rehypeKatex as any],
     },

apps/docs/lib/guidesData.ts

@@ -0,0 +1,102 @@
+/**
+ * Data used in guide MDX files.
+ *
+ * This data is passed to MDX files via scope to avoid using `export const`
+ * within MDX content, which is not supported by next-mdx-remote.
+ *
+ * @see https://github.com/hashicorp/next-mdx-remote#import--export
+ */
+
+export const guidesData = {
+  // apps/docs/content/guides/self-hosting.mdx
+  selfHostingCommunity: [
+    {
+      name: 'Kubernetes',
+      description: 'Helm charts to deploy a Supabase on Kubernetes.',
+      href: 'https://github.com/supabase-community/supabase-kubernetes',
+    },
+    {
+      name: 'Traefik',
+      description: 'A self-hosted Supabase setup with Traefik as a reverse proxy.',
+      href: 'https://github.com/supabase-community/supabase-traefik',
+    },
+  ],
+
+  // apps/docs/content/guides/ai.mdx
+  aiExamples: [
+    {
+      name: 'Headless Vector Search',
+      description:
+        'A toolkit to perform vector similarity search on your knowledge base embeddings.',
+      href: '/guides/ai/examples/headless-vector-search',
+    },
+    {
+      name: 'Image Search with OpenAI CLIP',
+      description: 'Implement image search with the OpenAI CLIP Model and Supabase Vector.',
+      href: '/guides/ai/examples/image-search-openai-clip',
+    },
+    {
+      name: 'Hugging Face inference',
+      description: 'Generate image captions using Hugging Face.',
+      href: '/guides/ai/examples/huggingface-image-captioning',
+    },
+    {
+      name: 'OpenAI completions',
+      description: 'Generate GPT text completions using OpenAI in Edge Functions.',
+      href: '/guides/ai/examples/openai',
+    },
+    {
+      name: 'Building ChatGPT Plugins',
+      description: 'Use Supabase as a Retrieval Store for your ChatGPT plugin.',
+      href: '/guides/ai/examples/building-chatgpt-plugins',
+    },
+    {
+      name: 'Vector search with Next.js and OpenAI',
+      description:
+        'Learn how to build a ChatGPT-style doc search powered by Next.js, OpenAI, and Supabase.',
+      href: '/guides/ai/examples/nextjs-vector-search',
+    },
+  ],
+
+  aiIntegrations: [
+    {
+      name: 'OpenAI',
+      description:
+        'OpenAI is an AI research and deployment company. Supabase provides a simple way to use OpenAI in your applications.',
+      href: '/guides/ai/examples/building-chatgpt-plugins',
+    },
+    {
+      name: 'Amazon Bedrock',
+      description:
+        'A fully managed service that offers a choice of high-performing foundation models from leading AI companies.',
+      href: '/guides/ai/integrations/amazon-bedrock',
+    },
+    {
+      name: 'Hugging Face',
+      description:
+        "Hugging Face is an open-source provider of NLP technologies. Supabase provides a simple way to use Hugging Face's models in your applications.",
+      href: '/guides/ai/hugging-face',
+    },
+    {
+      name: 'LangChain',
+      description:
+        'LangChain is a language-agnostic, open-source, and self-hosted API for text translation, summarization, and sentiment analysis.',
+      href: '/guides/ai/langchain',
+    },
+    {
+      name: 'LlamaIndex',
+      description: 'LlamaIndex is a data framework for your LLM applications.',
+      href: '/guides/ai/integrations/llamaindex',
+    },
+  ],
+
+  // apps/docs/content/guides/storage.mdx
+  storageExamples: [
+    {
+      name: 'Resumable Uploads with Uppy',
+      description:
+        'Use Uppy to upload files to Supabase Storage using the TUS protocol (resumable uploads).',
+      href: 'https://github.com/supabase/supabase/tree/master/examples/storage/resumable-upload-uppy',
+    },
+  ],
+}

apps/docs/lib/mdx/generateRefMarkdown.tsx

@@ -40,13 +40,12 @@ async function generateRefMarkdown(sections: ICommonMarkdown[], slug: string) {
         // introPage: introPages.includes(x),
         content: content
           ? await serialize(content ?? '', {
+              blockJS: false,
               // MDX's available options, see the MDX docs for more info.
               // https://mdxjs.com/packages/mdx/#compilefile-options
               mdxOptions: {
-                useDynamicImport: true,
                 remarkPlugins: [remarkGfm],
               },
-              // Indicates whether or not to parse the frontmatter from the mdx source
             })
           : null,
       })

apps/docs/package.json

@@ -43,8 +43,8 @@
   },
   "dependencies": {
     "@har-sdk/openapi-sampler": "^2.2.0",
-    "@mdx-js/loader": "^2.1.5",
-    "@mdx-js/react": "^2.3.0",
+    "@mdx-js/loader": "^3.0.0",
+    "@mdx-js/react": "^3.0.0",
     "@next/bundle-analyzer": "15.3.1",
     "@next/mdx": "15.3.1",
     "@octokit/auth-app": "^7.0.0",
@@ -91,7 +91,7 @@
     "micromark-extension-gfm": "^2.0.3",
     "micromark-extension-mdxjs": "^1.0.0",
     "next": "catalog:",
-    "next-mdx-remote": "^4.4.1",
+    "next-mdx-remote": "^6.0.0",
     "next-plugin-yaml": "^1.0.1",
     "next-themes": "^0.3.0",
     "nuqs": "^1.19.1",
@@ -108,7 +108,7 @@
     "rehype-slug": "^5.1.0",
     "remark": "^14.0.2",
     "remark-emoji": "^3.1.2",
-    "remark-gfm": "^3.0.1",
+    "remark-gfm": "^4.0.0",
     "remark-math": "^6.0.0",
     "server-only": "^0.0.1",
     "shared-data": "workspace:*",

apps/studio/components/grid/components/header/filter/FilterPopoverNew.tsx

@@ -5,15 +5,15 @@ import { format } from 'date-fns'
 import { Loader2 } from 'lucide-react'
 import { useCallback, useMemo, useState } from 'react'
 import { useTableEditorTableStateSnapshot } from 'state/table-editor-table'
-import { Button, Calendar } from 'ui'
+import { AiIconAnimation, Button, Calendar } from 'ui'
 import {
   CustomOptionProps,
   FilterBar,
   FilterGroup,
   FilterOption,
   FilterProperty,
-  SerializableFilterProperty,
   isGroup,
+  SerializableFilterProperty,
   updateGroupAtPath,
 } from 'ui-patterns'
 
@@ -190,7 +190,9 @@ export const FilterPopoverNew = ({ isRefetching = false }: FilterPopoverProps) =
     [generateFilters, serializableFilterProperties, handleFilterChange, setFreeformText]
   )
 
-  const icon = isRefetching ? (
+  const icon = isGenerating ? (
+    <AiIconAnimation size={16} loading />
+  ) : isRefetching ? (
     <Loader2 className="animate-spin text-brand h-4 w-4 shrink-0" aria-label="Loading table data" />
   ) : null