[pull] master from supabase:master

apps/design-system/registry/default/example/resizable-demo-with-handle.tsx

@@ -2,22 +2,22 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 
 export default function ResizableDemo() {
   return (
-    <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
-      <ResizablePanel defaultSize={50}>
+    <ResizablePanelGroup orientation="horizontal" className="max-w-md rounded-lg border">
+      <ResizablePanel defaultSize="50">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="50">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel defaultSize="25">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Two</span>
             </div>
           </ResizablePanel>
           <ResizableHandle withHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize="75">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Three</span>
             </div>

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

@@ -2,22 +2,22 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 
 export default function ResizableDemo() {
   return (
-    <ResizablePanelGroup direction="horizontal" className="max-w-md rounded-lg border">
-      <ResizablePanel defaultSize={50}>
+    <ResizablePanelGroup orientation="horizontal" className="max-w-md rounded-lg border">
+      <ResizablePanel defaultSize="50">
         <div className="flex h-[200px] items-center justify-center p-6">
           <span className="font-semibold">One</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={50}>
-        <ResizablePanelGroup direction="vertical">
-          <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="50">
+        <ResizablePanelGroup orientation="vertical">
+          <ResizablePanel defaultSize="25">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Two</span>
             </div>
           </ResizablePanel>
           <ResizableHandle />
-          <ResizablePanel defaultSize={75}>
+          <ResizablePanel defaultSize="75">
             <div className="flex h-full items-center justify-center p-6">
               <span className="font-semibold">Three</span>
             </div>

apps/design-system/registry/default/example/resizable-handle.tsx

@@ -3,16 +3,16 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 export default function ResizableDemo() {
   return (
     <ResizablePanelGroup
-      direction="horizontal"
+      orientation="horizontal"
       className="min-h-[200px] max-w-md rounded-lg border"
     >
-      <ResizablePanel defaultSize={25}>
+      <ResizablePanel defaultSize="25">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Sidebar</span>
         </div>
       </ResizablePanel>
       <ResizableHandle withHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>

apps/design-system/registry/default/example/resizable-vertical.tsx

@@ -2,14 +2,17 @@ import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from 'ui'
 
 export default function ResizableDemo() {
   return (
-    <ResizablePanelGroup direction="vertical" className="min-h-[200px] max-w-md rounded-lg border">
-      <ResizablePanel defaultSize={25}>
+    <ResizablePanelGroup
+      orientation="vertical"
+      className="min-h-[200px] max-w-md rounded-lg border"
+    >
+      <ResizablePanel defaultSize="25">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Header</span>
         </div>
       </ResizablePanel>
       <ResizableHandle />
-      <ResizablePanel defaultSize={75}>
+      <ResizablePanel defaultSize="75">
         <div className="flex h-full items-center justify-center p-6">
           <span className="font-semibold">Content</span>
         </div>

apps/docs/app/contributing/content.mdx

@@ -335,7 +335,9 @@ If your image has alternate light and dark versions, or you want to make it zoom
     dark: '/docs/img/supabase-architecture.svg',
     light: '/docs/img/supabase-architecture--light.svg',
   }}
-  zoomable
+  width={1600}
+  height={767}
+
 />
 ```
 
@@ -345,7 +347,9 @@ If your image has alternate light and dark versions, or you want to make it zoom
     dark: '/docs/img/supabase-architecture.svg',
     light: '/docs/img/supabase-architecture--light.svg',
   }}
-  zoomable
+  width={1600}
+  height={767}
+
 />
 
 ### Project Variables

apps/docs/components/Image.tsx

@@ -0,0 +1,64 @@
+'use client'
+
+import { useTheme } from 'next-themes'
+import NextImage, { ImageProps as NextImageProps } from 'next/image'
+
+interface StaticImageData {
+  src: string
+  height: number
+  width: number
+  blurDataURL?: string
+  blurWidth?: number
+  blurHeight?: number
+}
+
+interface StaticRequire {
+  default: StaticImageData
+}
+type StaticImport = StaticRequire | StaticImageData
+
+type SourceType =
+  | string
+  | {
+      dark: string | StaticImport
+      light: string | StaticImport
+    }
+
+export interface ImageProps extends Omit<NextImageProps, 'src'> {
+  src: SourceType
+  caption?: string
+  containerClassName?: string
+}
+
+/**
+ *
+ * This is a shrunk version of the `ui` package Image component. Because of
+ * Cumulative Layout Shift caused by problems stated in this PR
+ * https://github.com/supabase/supabase/pull/43026/ that's affecting hash
+ * navigation, and the need to support captions and light/dark image versions.
+ *
+ * Ideally we should solve these issues in that component and re-use it again,
+ * making sure it doesn't affect other projects consuming the component.
+ *
+ */
+const Image = ({ src, alt = '', ...props }: ImageProps) => {
+  const { resolvedTheme } = useTheme()
+  const source =
+    typeof src === 'string' ? src : resolvedTheme?.includes('dark') ? src.dark : src.light
+
+  return (
+    <figure className={props.containerClassName}>
+      <NextImage
+        key={resolvedTheme}
+        alt={alt}
+        src={source}
+        className={props.className}
+        style={props.style}
+        {...props}
+      />
+      {props.caption && <figcaption className="text-center">{props.caption}</figcaption>}
+    </figure>
+  )
+}
+
+export default Image

apps/docs/content/guides/ai/choosing-compute-addon.mdx

@@ -126,7 +126,9 @@ It is possible to upload more vectors to a single table if Memory allows it (for
     light: '/docs/img/ai/instance-type/hnsw-dims--light.png',
     dark: '/docs/img/ai/instance-type/hnsw-dims--dark.png',
   }}
-  zoomable
+  width={1427}
+  height={862}
+
 />
 
 ## IVFFlat
@@ -260,7 +262,9 @@ For 1,000,000 vectors 40 probes results to accuracy of 0.98. Note that exact val
     light: '/docs/img/ai/going-prod/size-to-rps--light.png',
     dark: '/docs/img/ai/going-prod/size-to-rps--dark.png',
   }}
-  zoomable
+  width={1427}
+  height={862}
+
 />
 
 <Admonition type="note">
@@ -296,7 +300,9 @@ You can increase the Requests per Second by increasing `m` and `ef_construction`
     light: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--light.png',
     dark: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--dark.png',
   }}
-  zoomable
+  width={1052}
+  height={796}
+
 />
 
 </TabPanel>
@@ -308,7 +314,9 @@ You can increase the Requests per Second by increasing `m` and `ef_construction`
     light: '/docs/img/ai/instance-type/lists-for-1m--light.png',
     dark: '/docs/img/ai/instance-type/lists-for-1m--dark.png',
   }}
-  zoomable
+  width={1032}
+  height={796}
+
 />
 
 </TabPanel>
@@ -327,7 +335,9 @@ We follow techniques outlined in the [ANN Benchmarks](https://github.com/erikber
     dark: '/docs/img/ai/instance-type/vecs-benchmark--dark.png',
   }}
   className="max-h-[650px]"
-  zoomable
+  width={1196}
+  height={1194}
+
 />
 
 Each test is run for a minimum of 30-40 minutes. They include a series of experiments executed at different concurrency levels to measure the engine's performance under different load types. The results are then averaged.

apps/docs/content/guides/ai/engineering-for-scale.mdx

@@ -20,7 +20,9 @@ If you've used [Vecs](/docs/guides/ai/vecs-python-client) to create 3 different
     light: '/docs/img/ai/scaling/engineering-for-scale--single-database--light.png',
     dark: '/docs/img/ai/scaling/engineering-for-scale--single-database--dark.png',
   }}
-  zoomable
+  width={1600}
+  height={1145}
+
 />
 
 For example, with 3 collections, called `docs`, `posts`, and `images`, we could expose the "docs" inside the public schema like this:
@@ -55,7 +57,9 @@ As you move into production, we recommend splitting your collections into separa
     light: '/docs/img/ai/scaling/engineering-for-scale--with-secondaries--light.png',
     dark: '/docs/img/ai/scaling/engineering-for-scale--with-secondaries--dark.png',
   }}
-  zoomable
+  width={1600}
+  height={1641}
+
 />
 
 You can use as many secondary databases as you need to manage your collections. With this architecture, you have 2 options for accessing collections within your application:
@@ -138,5 +142,7 @@ This diagram provides an example architecture that allows you to access the coll
     light: '/docs/img/ai/scaling/engineering-for-scale--multi-database--light.png',
     dark: '/docs/img/ai/scaling/engineering-for-scale--multi-database--dark.png',
   }}
-  zoomable
+  width={1600}
+  height={1754}
+
 />

apps/docs/content/guides/ai/examples/building-chatgpt-plugins.mdx

@@ -37,7 +37,9 @@ We'll be saving the Postgres documentation in Postgres, and ChatGPT will be retr
     light: '/docs/img/ai/chatgpt-plugins/chatgpt-plugin-scheme--light.png',
     dark: '/docs/img/ai/chatgpt-plugins/chatgpt-plugin-scheme--dark.png',
   }}
-  zoomable
+
+  width={1196}
+  height={1194}
 />
 
 ### Step 1: Fork the ChatGPT Retrieval Plugin repository

apps/docs/content/guides/ai/going-to-prod.mdx

@@ -34,7 +34,9 @@ On the other hand, if you need to scale your application, you will need to [crea
     light: '/docs/img/ai/going-prod/dbpedia-ivfflat-vs-hnsw-4xl--light.png',
     dark: '/docs/img/ai/going-prod/dbpedia-ivfflat-vs-hnsw-4xl--dark.png',
   }}
-  zoomable
+  width={1052}
+  height={796}
+
 />
 
 ## HNSW, understanding `ef_construction`, `ef_search`, and `m`
@@ -55,7 +57,9 @@ Search parameters:
     light: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--light.png',
     dark: '/docs/img/ai/going-prod/dbpedia-hnsw-build-parameters--dark.png',
   }}
-  zoomable
+  width={1052}
+  height={796}
+
 />
 
 ## IVFFlat, understanding `probes` and `lists`
@@ -76,7 +80,9 @@ You can find more examples of how `lists` and `probes` constants affect accuracy
     light: '/docs/img/ai/going-prod/lists-count--light.png',
     dark: '/docs/img/ai/going-prod/lists-count--dark.png',
   }}
-  zoomable
+  width={1467}
+  height={808}
+
 />
 
 ## Performance tips when using indexes
@@ -117,5 +123,7 @@ Or take a look at our [pgvector 0.5.0 performance](/blog/increase-performance-pg
     light: '/docs/img/ai/going-prod/size-to-rps--light.png',
     dark: '/docs/img/ai/going-prod/size-to-rps--dark.png',
   }}
-  zoomable
+  width={1427}
+  height={862}
+
 />

apps/docs/content/guides/ai/vector-indexes/hnsw-indexes.mdx

@@ -81,6 +81,8 @@ Skip lists are multi-layer linked lists. The bottom layer is a regular linked li
     light: '/docs/img/ai/vector-indexes/hnsw-indexes/skip-list--light.png',
     dark: '/docs/img/ai/vector-indexes/hnsw-indexes/skip-list--dark.png',
   }}
+  width={1400}
+  height={700}
 />
 
 When searching for an element, the algorithm begins at the top layer and traverses its linked list horizontally. If the target element is found, the algorithm stops and returns it. Otherwise if the next element in the list is greater than the target (or `NULL`), the algorithm drops down to the next layer below. Since each layer below is less sparse than the layer above (with the bottom layer connecting all elements), the target will eventually be found. Skip lists offer O(log n) average complexity for both search and insertion/deletion.
@@ -93,7 +95,9 @@ A navigable small world (NSW) is a special type of proximity graph that also inc
   alt="visual of an example navigable small world graph"
   src="/docs/img/ai/vector-indexes/hnsw-indexes/nsw.png"
   className="max-h-[600px] mx-auto"
-  zoomable
+  width={1016}
+  height={759}
+
 />
 
 The “navigable” part of NSW specifically refers to the ability to logarithmically scale the greedy search algorithm on the graph, an algorithm that attempts to make only the locally optimal choice at each hop. Without this property, the graph may still be considered a small world with short paths between far-away nodes, but the greedy algorithm tends to miss them. Greedy search is ideal for NSW because it is quick to navigate and has low computational costs.

apps/docs/content/guides/auth/architecture.mdx

@@ -16,6 +16,8 @@ There are four major layers to Supabase Auth:
     dark: '/docs/img/supabase-architecture.svg',
     light: '/docs/img/supabase-architecture--light.svg',
   }}
+  width={1600}
+  height={767}
 />
 
 ## Client layer

apps/docs/content/guides/auth/auth-mfa/phone.mdx

@@ -19,6 +19,8 @@ Below is a flow chart illustrating how the Enrollment and Verify APIs work in th
     dark: '/docs/img/guides/auth-mfa/auth-mfa-phone-flow.svg',
   }}
   containerClassName="max-w-[700px]"
+  width={93}
+  height={150}
 />
 
 ### Add enrollment flow

apps/docs/content/guides/auth/auth-mfa/totp.mdx

@@ -19,6 +19,8 @@ Below is a flow chart illustrating how the Enrollment, Challenge, and Verify API
     dark: '/docs/img/guides/auth-mfa/auth-mfa-flow.svg',
   }}
   containerClassName="max-w-[700px]"
+  width={111}
+  height={150}
 />
 
 [TOTP MFA API](/docs/reference/javascript/auth-mfa-api) is free to use and is enabled on all Supabase projects by default.

apps/docs/content/guides/auth/signing-keys.mdx

@@ -83,6 +83,8 @@ Key rotation and revocation are one of the most important processes for maintain
     dark: '/docs/img/guides/auth-signing-keys/states.svg',
   }}
   containerClassName="max-w-[300px] min-w-[180px]"
+  width={336}
+  height={766}
 />
 
 <div>

apps/docs/content/guides/cron.mdx

@@ -13,6 +13,8 @@ Cron Jobs can be created via SQL or the [Integrations -> Cron](/dashboard/projec
     dark: '/docs/img/guides/cron/cron.jpg',
     light: '/docs/img/guides/cron/cron--light.jpg',
   }}
+  width={2072}
+  height={1457}
 />
 
 Every Job can run SQL snippets or database functions with zero network latency or make an HTTP request, such as invoking a Supabase Edge Function, with ease.