[pull] master from supabase:master

apps/design-system/__registry__/index.tsx

@@ -2568,6 +2568,116 @@ export const Index: Record<string, any> = {
       subcategory: "undefined",
       chunks: []
     },
+    "mermaid-demo": {
+      name: "mermaid-demo",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-demo")),
+      source: "",
+      files: ["registry/default/example/mermaid-demo.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-flowchart": {
+      name: "mermaid-flowchart",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-flowchart")),
+      source: "",
+      files: ["registry/default/example/mermaid-flowchart.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-er-diagram": {
+      name: "mermaid-er-diagram",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-er-diagram")),
+      source: "",
+      files: ["registry/default/example/mermaid-er-diagram.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-sequence-async": {
+      name: "mermaid-sequence-async",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-sequence-async")),
+      source: "",
+      files: ["registry/default/example/mermaid-sequence-async.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-sequence-sync": {
+      name: "mermaid-sequence-sync",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-sequence-sync")),
+      source: "",
+      files: ["registry/default/example/mermaid-sequence-sync.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-oauth-flow": {
+      name: "mermaid-oauth-flow",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-oauth-flow")),
+      source: "",
+      files: ["registry/default/example/mermaid-oauth-flow.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-flowchart-subgraph": {
+      name: "mermaid-flowchart-subgraph",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-flowchart-subgraph")),
+      source: "",
+      files: ["registry/default/example/mermaid-flowchart-subgraph.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-sequence-api": {
+      name: "mermaid-sequence-api",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-sequence-api")),
+      source: "",
+      files: ["registry/default/example/mermaid-sequence-api.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-er-simple": {
+      name: "mermaid-er-simple",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-er-simple")),
+      source: "",
+      files: ["registry/default/example/mermaid-er-simple.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
+    "mermaid-basic": {
+      name: "mermaid-basic",
+      type: "components:example",
+      registryDependencies: ["mermaid"],
+      component: React.lazy(() => import("@/registry/default/example/mermaid-basic")),
+      source: "",
+      files: ["registry/default/example/mermaid-basic.tsx"],
+      category: "undefined",
+      subcategory: "undefined",
+      chunks: []
+    },
     "chart-area-axes": {
       name: "chart-area-axes",
       type: "components:block",

apps/design-system/config/docs.ts

@@ -317,6 +317,12 @@ export const docsConfig: DocsConfig = {
           href: '/docs/components/label',
           items: [],
         },
+        {
+          title: 'Mermaid',
+          href: '/docs/components/mermaid',
+          items: [],
+          label: 'New',
+        },
         {
           title: 'Menubar',
           href: '/docs/components/menubar',

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

@@ -0,0 +1,121 @@
+---
+title: Mermaid
+description: Render diagrams from text using Mermaid syntax.
+component: true
+---
+
+<ComponentPreview name="mermaid-basic" peekCode wide />
+
+## Usage
+
+### In MDX (Blog Posts)
+
+The simplest way to add diagrams in blog posts is with a fenced code block using the `mermaid` language tag:
+
+````mdx
+```mermaid
+flowchart LR
+    A[User Request] --> B{Authenticated?}
+    B -->|Yes| C[Process Request]
+    B -->|No| D[Return 401]
+```
+````
+
+This is automatically rendered as a diagram. No imports needed.
+
+### As a Component
+
+For more control, import and use the component directly:
+
+```tsx
+import { Mermaid } from 'ui'
+
+export function MyDiagram() {
+  return (
+    <Mermaid
+      chart={`
+flowchart LR
+    A[User Request] --> B{Authenticated?}
+    B -->|Yes| C[Process Request]
+    B -->|No| D[Return 401]
+`}
+    />
+  )
+}
+```
+
+Use the component when you need to pass props like `className`, conditionally render, or integrate with React logic.
+
+## Flowcharts
+
+Use `flowchart` or `graph` to create flowcharts with nodes and edges. Supports decision diamonds, different node shapes, and directional layouts (TD, LR, etc).
+[View Mermaid flowchart docs](https://mermaid.js.org/syntax/flowchart.html)
+
+A basic request flow showing conditional branching with a decision node (`{}`), demonstrating how to visualize auth checks and data flow.
+
+<ComponentPreview name="mermaid-flowchart" />
+
+### With Subgraphs
+
+Group related nodes into labeled subgraphs to show system boundaries. Useful for depicting frontend/backend separation or microservice architecture.
+
+<ComponentPreview name="mermaid-flowchart-subgraph" />
+
+### Supabase Architecture
+
+Shows how client requests flow through the API Gateway to core services (Auth, PostgREST, Realtime) which all connect to PostgreSQL.
+
+<ComponentPreview name="mermaid-demo" />
+
+### OAuth Authorization Flow
+
+Illustrates the OAuth 2.0 authorization code flow, showing the handoff between a third-party app, your authorization endpoint, and Supabase Auth for token exchange.
+
+<ComponentPreview name="mermaid-oauth-flow" />
+
+## ER Diagrams
+
+Use `erDiagram` to create entity-relationship diagrams showing database schemas. Great for documenting table relationships and foreign keys.
+[View Mermaid ER diagram docs](https://mermaid.js.org/syntax/entityRelationshipDiagram.html)
+
+A simple e-commerce schema showing cardinality between customers, orders, products, and line items using crow's foot notation.
+
+<ComponentPreview name="mermaid-er-simple" />
+
+### With Attributes
+
+Include column definitions with types and constraints (PK, FK) to create more detailed schema documentation.
+
+<ComponentPreview name="mermaid-er-diagram" />
+
+## Sequence Diagrams
+
+Use `sequenceDiagram` to show interactions between participants over time. Ideal for documenting API flows, authentication handshakes, or any request/response patterns.
+[View Mermaid sequence diagram docs](https://mermaid.js.org/syntax/sequenceDiagram.html)
+
+A typical authenticated API request showing JWT validation, database insert, and response flow between Client, API, Auth, and DB participants.
+
+<ComponentPreview name="mermaid-sequence-api" />
+
+### Async Streaming (FDW)
+
+Shows how Foreign Data Wrappers can stream data asynchronously using bounded channels, with parallel execution indicated by the `par` block.
+
+<ComponentPreview name="mermaid-sequence-async" />
+
+### Sync Blocking (FDW)
+
+Contrasts with async by showing traditional blocking FDW behavior where all rows are fetched and buffered before processing.
+
+<ComponentPreview name="mermaid-sequence-sync" />
+
+## Props
+
+| Prop        | Type     | Description                          |
+| ----------- | -------- | ------------------------------------ |
+| `chart`     | `string` | The Mermaid diagram definition       |
+| `className` | `string` | Optional CSS class for the container |
+
+## Learn More
+
+See the [Mermaid documentation](https://mermaid.js.org/intro/) for full syntax reference and additional diagram types.

apps/design-system/registry/default/example/mermaid-basic.tsx

@@ -0,0 +1,16 @@
+import { Mermaid } from 'ui'
+
+export default function MermaidBasic() {
+  return (
+    <Mermaid
+      chart={`
+flowchart TD
+    A[Start] --> B{Is it working?}
+    B -->|Yes| C[Great!]
+    B -->|No| D[Debug]
+    D --> B
+    C --> E[End]
+`}
+    />
+  )
+}

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

@@ -0,0 +1,30 @@
+import { Mermaid } from 'ui'
+
+export default function MermaidDemo() {
+  return (
+    <Mermaid
+      chart={`
+flowchart TB
+    Client[Your Application]
+
+
+    Gateway[API Gateway]
+    Auth[Auth]
+    API[PostgREST]
+    Realtime[Realtime]
+    PgBouncer[PgBouncer]
+    Postgres[(PostgreSQL)]
+
+    Client --> Gateway
+    Client --> PgBouncer
+    Client <--> Realtime
+    Gateway --> Auth
+    Gateway --> API
+    Auth --> Postgres
+    API --> Postgres
+    Realtime <--> Postgres
+    PgBouncer --> Postgres
+`}
+    />
+  )
+}

apps/design-system/registry/default/example/mermaid-er-diagram.tsx

@@ -0,0 +1,31 @@
+import { Mermaid } from 'ui'
+
+export default function MermaidERDiagram() {
+  return (
+    <Mermaid
+      chart={`
+erDiagram
+    USERS ||--o{ POSTS : creates
+    USERS ||--o{ COMMENTS : writes
+    POSTS ||--o{ COMMENTS : has
+    USERS {
+        uuid id PK
+        string email
+        timestamp created_at
+    }
+    POSTS {
+        uuid id PK
+        uuid user_id FK
+        string title
+        text content
+    }
+    COMMENTS {
+        uuid id PK
+        uuid user_id FK
+        uuid post_id FK
+        text content
+    }
+`}
+    />
+  )
+}

apps/design-system/registry/default/example/mermaid-er-simple.tsx

@@ -0,0 +1,14 @@
+import { Mermaid } from 'ui'
+
+export default function MermaidErSimple() {
+  return (
+    <Mermaid
+      chart={`
+erDiagram
+    CUSTOMER ||--o{ ORDER : places
+    ORDER ||--|{ LINE_ITEM : contains
+    PRODUCT ||--o{ LINE_ITEM : "ordered in"
+`}
+    />
+  )
+}

apps/design-system/registry/default/example/mermaid-flowchart-subgraph.tsx

@@ -0,0 +1,21 @@
+import { Mermaid } from 'ui'
+
+export default function MermaidFlowchartSubgraph() {
+  return (
+    <Mermaid
+      chart={`
+flowchart LR
+    subgraph Frontend
+        A[React App] --> B[API Client]
+    end
+
+    subgraph Backend
+        C[Edge Functions] --> D[Database]
+        C --> E[Storage]
+    end
+
+    B --> C
+`}
+    />
+  )
+}

apps/design-system/registry/default/example/mermaid-flowchart.tsx

@@ -0,0 +1,16 @@
+import { Mermaid } from 'ui'
+
+export default function MermaidFlowchart() {
+  return (
+    <Mermaid
+      chart={`
+flowchart TD
+    A[Client Request] --> B{Auth Check}
+    B -->|Valid| C[Query Postgres]
+    B -->|Invalid| D[Return 401]
+    C --> E[Apply RLS Policies]
+    E --> F[Return Data]
+`}
+    />
+  )
+}