### Install Dependencies with Bun

Source: https://github.com/macintushar/draw/blob/main/README.md

Install all project dependencies using Bun. This command should be run after cloning the repository.

```bash
bun install
```

--------------------------------

### Build the App with Bun

Source: https://github.com/macintushar/draw/blob/main/README.md

Use this command to build the application for deployment. Ensure Bun is installed.

```bash
bun run build
```

--------------------------------

### Set Up Environment Variables

Source: https://github.com/macintushar/draw/blob/main/README.md

Copy the example environment file to create your own. This file should contain your Supabase and Sentry credentials.

```bash
cp .env.example .env
```

--------------------------------

### Run the Development Server

Source: https://github.com/macintushar/draw/blob/main/README.md

Start the development server to run the application locally. The app will be accessible at http://localhost:5173.

```bash
bun run dev
```

--------------------------------

### Rename Environment File

Source: https://github.com/macintushar/draw/blob/main/docs/docker.md

Rename the example environment file to .env to configure your Draw instance.

```bash
mv .env.example .env
```

--------------------------------

### Start Draw with Docker Compose

Source: https://github.com/macintushar/draw/blob/main/docs/docker.md

This command starts the Draw application in detached mode using Docker Compose.

```bash
docker-compose up -d
```

--------------------------------

### Retrieve User Profile

Source: https://context7.com/macintushar/draw/llms.txt

Fetches current user profile or session data. Includes an example of integration with TanStack Query.

```typescript
// src/db/auth.ts
export async function getUser() {
  const { data, error } = await supabase.auth.getUser();
  return { data, error };
}

export async function getLocalUser() {
  const { data, error } = await supabase.auth.getSession();
  return { data, error };
}

// Usage with TanStack Query:
import { useQuery } from "@tanstack/react-query";
import { getUser } from "@/db/auth";

const { data, isLoading } = useQuery({
  queryKey: ["user"],
  queryFn: getUser,
  refetchOnMount: true,
  refetchOnWindowFocus: true,
});

// Access user data:
const userName = data?.data?.user?.user_metadata.name;
const userEmail = data?.data?.user?.email;
```

--------------------------------

### Convert Mermaid Syntax to Excalidraw Elements

Source: https://context7.com/macintushar/draw/llms.txt

Converts Mermaid diagram syntax into Excalidraw elements. Ensure Excalidraw and the mermaid-to-excalidraw library are installed. The function parses the syntax and updates the Excalidraw scene.

```typescript
// src/views/Mermaid.tsx
import { parseMermaidToExcalidraw } from "@excalidraw/mermaid-to-excalidraw";
import { convertToExcalidrawElements, Excalidraw } from "@excalidraw/excalidraw";
import { ExcalidrawImperativeAPI } from "@excalidraw/excalidraw/types";
import { createNewPage } from "@/db/draw";
import { useState } from "react";

export default function Mermaid() {
  const [mermaidSyntax, setMermaidSyntax] = useState("");
  const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI>();

  async function generateExcalidraw() {
    if (mermaidSyntax.length > 0) {
      try {
        const { elements, files } = await parseMermaidToExcalidraw(mermaidSyntax);
        const convertedElements = convertToExcalidrawElements(elements);

        excalidrawAPI?.updateScene({
          elements: convertedElements,
          appState: { fileHandle: files },
        });
      } catch (e) {
        console.error("Conversion error:", e);
      }
    }
  }

  async function handleSaveAsNewPage() {
    const elements = excalidrawAPI?.getSceneElements();
    const files = excalidrawAPI?.getFiles();
    const result = await createNewPage(elements, files);

    if (result.data?.[0]?.page_id) {
      // Navigate to new page
    }
  }

  return (
    <div>
      <textarea
        onChange={(e) => setMermaidSyntax(e.target.value)}
        placeholder="Enter Mermaid syntax..."
      />
      <button onClick={generateExcalidraw}>Convert to Excalidraw</button>
      <Excalidraw excalidrawAPI={(api) => setExcalidrawAPI(api)} />
    </div>
  );
}

// Example Mermaid syntax:
const exampleMermaid = "
flowchart TD
    A[Start] --> B{Is it working?}
    B -->|Yes| C[Great!]
    B -->|No| D[Debug]
    D --> B
";

```

--------------------------------

### Get Single Drawing Page Data

Source: https://context7.com/macintushar/draw/llms.txt

Retrieves the Excalidraw elements and files for a specific drawing page by its ID. This function is designed for use with TanStack Query.

```typescript
// src/db/draw.ts
export async function getDrawData(id: string): Promise<DBResponse> {
  const { data, error } = await supabase
    .from(DB_NAME)
    .select()
    .eq("page_id", id);

  return { data, error };
}
```

```typescript
// Usage with TanStack Query:
import { useQuery } from "@tanstack/react-query";
import { getDrawData } from "@/db/draw";

const { data, isLoading } = useQuery({
  queryKey: ["page", pageId],
  queryFn: () => getDrawData(pageId),
});

// Access drawing elements:
if (data?.data) {
  const pageData = data.data[0].page_elements;
  const elements = pageData.elements || [];
  const files = pageData.files || {};
  const pageName = data.data[0].name;
}
```

--------------------------------

### Get All Drawing Pages

Source: https://context7.com/macintushar/draw/llms.txt

Retrieves all drawing pages for a specific user, ordered by last update time, excluding soft-deleted pages. This function is intended for use with TanStack Query for efficient data fetching.

```typescript
// src/db/draw.ts
import { supabase } from "./supabase";

export const DB_NAME = "draw";

export async function getPages(user_id: string): Promise<DBResponse> {
  const { data, error } = await supabase
    .from(DB_NAME)
    .select()
    .order("updated_at", { ascending: false })
    .eq("user_id", user_id)
    .eq("is_deleted", false);

  return { data, error };
}
```

```typescript
// Usage with TanStack Query:
import { useQuery } from "@tanstack/react-query";
import { getPages } from "@/db/draw";
import { getLocalUser } from "@/db/auth";

const { data, isLoading, refetch } = useQuery({
  queryKey: ["pages"],
  queryFn: async () => {
    const user_session = await getLocalUser();
    if (!user_session.error && user_session.data.session) {
      return getPages(user_session.data.session.user?.id ?? "");
    }
    return null;
  },
  refetchOnMount: true,
  refetchOnWindowFocus: true,
});

// Render pages:
data?.data?.map((page) => (
  <div key={page.page_id}>
    <h3>{page.name}</h3>
    <p>Updated: {page.updated_at}</p>
  </div>
));
```

--------------------------------

### Initialize Supabase Client

Source: https://context7.com/macintushar/draw/llms.txt

Configures the Supabase client using environment variables. Requires VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY to be defined in the .env file.

```typescript
// src/db/supabase.ts
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

// Environment variables required (.env file):
// VITE_SUPABASE_URL="https://your-project.supabase.co"
// VITE_SUPABASE_ANON_KEY="your-anon-key"
// VITE_SENTRY_DSN="your-sentry-dsn"
```

--------------------------------

### Docker Deployment for Draw

Source: https://context7.com/macintushar/draw/llms.txt

Steps to clone the repository, configure environment variables, and deploy the Draw application using Docker Compose. Remember to edit the .env file with your Supabase and Sentry credentials.

```bash
# Clone the repository
git clone https://github.com/macintushar/draw.git
cd draw

# Configure environment variables
mv .env.example .env
# Edit .env with your Supabase credentials:
# VITE_SUPABASE_URL="https://your-project.supabase.co"
# VITE_SUPABASE_ANON_KEY="your-anon-key"
# VITE_SENTRY_DSN="your-sentry-dsn"

# Start Draw
docker-compose up -d

# Access the UI at http://localhost:3729

# Stop Draw
docker-compose down

# Upgrade Draw
docker-compose pull && docker-compose up -d
```

--------------------------------

### POST /draw/create

Source: https://context7.com/macintushar/draw/llms.txt

Creates a new drawing page for the authenticated user with optional initial elements and files.

```APIDOC
## POST /draw/create

### Description
Creates a new drawing page for the authenticated user. Optionally accepts initial drawing elements and binary files.

### Method
POST

### Parameters
#### Request Body
- **elements** (readonly NonDeletedExcalidrawElement[]) - Optional - Initial drawing elements.
- **files** (BinaryFiles) - Optional - Initial binary files associated with the drawing.

### Response
#### Success Response (200)
- **data** (Array) - Contains the created page object including page_id.
- **error** (Object) - Null if successful.

#### Response Example
{
  "data": [{"page_id": "uuid-123"}],
  "error": null
}
```

--------------------------------

### Upgrade Draw

Source: https://github.com/macintushar/draw/blob/main/docs/docker.md

To upgrade Draw, pull the latest Docker images and restart the containers.

```bash
docker-compose pull && docker-compose up -d
```

--------------------------------

### Register New User

Source: https://context7.com/macintushar/draw/llms.txt

Registers a user with name, email, and password, storing the name in user metadata.

```typescript
// src/db/auth.ts
export async function signUp(name: string, email: string, password: string) {
  const { data, error } = await supabase.auth.signUp({
    email: email,
    password: password,
    options: {
      data: {
        name: name,
      },
    },
  });
  return { data, error };
}

// Usage example:
import { signUp } from "@/db/auth";

async function handleSignUp(name: string, email: string, password: string) {
  const result = await signUp(name, email, password);

  if (result.data.session) {
    console.log("User registered successfully");
    // Navigate to /pages
  }

  if (result.error) {
    console.error("Sign up failed:", result.error.message);
  }
}
```

--------------------------------

### Clone the Draw Repository

Source: https://github.com/macintushar/draw/blob/main/docs/docker.md

Use this command to clone the Draw repository from GitHub.

```bash
git clone https://github.com/macintushar/draw.git
cd draw
```

--------------------------------

### Supabase Client Configuration

Source: https://context7.com/macintushar/draw/llms.txt

Configuration for the Supabase client, including environment variables required for connecting to the Supabase backend.

```APIDOC
## Supabase Client Configuration

The Supabase client is initialized with environment variables for secure backend connectivity to handle authentication and database operations.

### Environment Variables Required
- `VITE_SUPABASE_URL`: Your Supabase project URL.
- `VITE_SUPABASE_ANON_KEY`: Your Supabase anon key.
- `VITE_SENTRY_DSN`: Your Sentry DSN (optional).

### Code Example
```typescript
// src/db/supabase.ts
import { createClient } from "@supabase/supabase-js";

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY;

export const supabase = createClient(supabaseUrl, supabaseAnonKey);
```
```

--------------------------------

### Create New Drawing Page

Source: https://context7.com/macintushar/draw/llms.txt

Creates a new drawing page for the authenticated user. Use this to initialize a new drawing canvas. Requires Supabase authentication.

```typescript
// src/db/draw.ts
import { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
import { BinaryFiles } from "@excalidraw/excalidraw/types";

export type ExcalidrawData = {
  elements: readonly NonDeletedExcalidrawElement[];
  appState?: Record<string, unknown>;
  files?: BinaryFiles;
};

export async function createNewPage(
  elements?: readonly NonDeletedExcalidrawElement[],
  files?: BinaryFiles,
): Promise<DBResponse> {
  const { data: profile, error: profileError } = await supabase.auth.getUser();
  if (profile) {
    const excalidrawData: ExcalidrawData = {
      elements: elements || [],
      files: files || {}
    };
    const { data, error } = await supabase
      .from(DB_NAME)
      .insert({ user_id: profile.user?.id, page_elements: excalidrawData })
      .select();
    return { data, error };
  }
  return { data: null, error: profileError };
}
```

```typescript
// Usage:
import { createNewPage } from "@/db/draw";
import { useNavigate } from "@tanstack/react-router";

const navigate = useNavigate();

async function handleCreatePage() {
  const result = await createNewPage();

  if (result.data && result.data[0]?.page_id) {
    navigate({ to: "/page/$id", params: { id: result.data[0].page_id } });
    toast("Successfully created a new page!");
  }

  if (result.error) {
    toast("Error", { description: result.error.message });
  }
}
```

```typescript
// Create page with initial content (from Mermaid conversion):
async function createPageWithContent(elements, files) {
  const result = await createNewPage(elements, files);
  if (result.data?.[0]?.page_id) {
    navigate({ to: "/page/$id", params: { id: result.data[0].page_id } });
  }
}
```

--------------------------------

### Excalidraw Theme Provider with Persistence

Source: https://context7.com/macintushar/draw/llms.txt

Manages application-wide dark/light theme using React context. It persists the theme choice in localStorage and synchronizes it with Excalidraw. Ensure the provider wraps your application components.

```typescript
// src/components/theme-provider.tsx
import { createContext, useContext, useEffect, useState } from "react";

type Theme = "dark" | "light";

type ThemeProviderState = {
  theme: Theme;
  setTheme: (theme: Theme) => void;
};

const ThemeProviderContext = createContext<ThemeProviderState>({
  theme: "dark",
  setTheme: () => null,
});

export function ThemeProvider({
  children,
  defaultTheme = "dark",
  storageKey = "vite-ui-theme",
}) {
  const [theme, setTheme] = useState<Theme>(
    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme,
  );

  useEffect(() => {
    document.documentElement.classList.remove("light", "dark");
    document.documentElement.classList.add(theme);
  }, [theme]);

  return (
    <ThemeProviderContext.Provider
      value={{
        theme,
        setTheme: (theme: Theme) => {
          localStorage.setItem(storageKey, theme);
          setTheme(theme);
        },
      }}
    >
      {children}
    </ThemeProviderContext.Provider>
  );
}

export const useTheme = () => useContext(ThemeProviderContext);

// Usage in components:
import { useTheme } from "@/components/theme-provider";

function MyComponent() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
      Toggle Theme (Current: {theme})
    </button>
  );
}

```

--------------------------------

### Create Draw Table in Supabase

Source: https://github.com/macintushar/draw/blob/main/docs/supabase.md

Defines the 'draw' table structure with columns for creation timestamp, page elements, page ID, user ID, name, update timestamp, and deletion status. Includes primary key and foreign key constraints.

```sql
CREATE TABLE draw (
  created_at timestamp with time zone NOT NULL DEFAULT now(),
  page_elements jsonb NULL,
  page_id uuid NOT NULL DEFAULT gen_random_uuid(),
  user_id uuid NULL,
  name text NOT NULL DEFAULT 'New Page',
  updated_at timestamp with time zone NOT NULL DEFAULT now(),
  is_deleted boolean NOT NULL DEFAULT false,
  CONSTRAINT draw_pkey PRIMARY KEY (page_id),
  CONSTRAINT draw_user_id_fkey FOREIGN KEY (user_id) REFERENCES auth.users(id) ON UPDATE CASCADE
);
```

--------------------------------

### Authenticate User Login

Source: https://context7.com/macintushar/draw/llms.txt

Handles user sign-in via email and password. Returns session data or an error object.

```typescript
// src/db/auth.ts
import { supabase } from "./supabase";

export async function login(email: string, password: string) {
  const { data, error } = await supabase.auth.signInWithPassword({
    email: email,
    password: password,
  });
  return { data, error };
}

// Usage in component:
import { login } from "@/db/auth";
import { toast } from "sonner";

async function handleLogin(email: string, password: string) {
  const result = await login(email, password);

  if (result.data.session) {
    toast("Signed In!");
    // Navigate to pages
  }

  if (result.error) {
    toast("Authentication Error", { description: result.error.message });
  }
}
```

--------------------------------

### User Authentication API

Source: https://context7.com/macintushar/draw/llms.txt

APIs for handling user authentication, including login, sign-up, logout, and retrieving user data.

```APIDOC
## POST /auth/login

### Description
Authenticates a user with email and password using Supabase Auth, returning session data on success or an error object on failure.

### Method
POST

### Endpoint
`/auth/login`

### Parameters
#### Request Body
- **email** (string) - Required - The user's email address.
- **password** (string) - Required - The user's password.

### Request Example
```json
{
  "email": "user@example.com",
  "password": "securepassword"
}
```

### Response
#### Success Response (200)
- **data** (object) - Contains session information if login is successful.
- **error** (object) - Contains error details if login fails.

#### Response Example
```json
{
  "data": {
    "session": {
      "access_token": "...",
      "refresh_token": "...",
      "user": {
        "id": "...",
        "email": "user@example.com",
        "user_metadata": {
          "name": "John Doe"
        }
      }
    }
  },
  "error": null
}
```

## POST /auth/signup

### Description
Registers a new user with name, email, and password. The name is stored in user metadata for profile display purposes.

### Method
POST

### Endpoint
`/auth/signup`

### Parameters
#### Request Body
- **name** (string) - Required - The user's full name.
- **email** (string) - Required - The user's email address.
- **password** (string) - Required - The user's password.

### Request Example
```json
{
  "name": "Jane Doe",
  "email": "jane.doe@example.com",
  "password": "strongpassword"
}
```

### Response
#### Success Response (200)
- **data** (object) - Contains session information if sign-up is successful.
- **error** (object) - Contains error details if sign-up fails.

#### Response Example
```json
{
  "data": {
    "session": {
      "access_token": "...",
      "refresh_token": "...",
      "user": {
        "id": "...",
        "email": "jane.doe@example.com",
        "user_metadata": {
          "name": "Jane Doe"
        }
      }
    }
  },
  "error": null
}
```

## POST /auth/logout

### Description
Signs out the current user and clears their session from Supabase Auth.

### Method
POST

### Endpoint
`/auth/logout`

### Response
#### Success Response (200)
- **error** (object) - Null if logout is successful, otherwise contains error details.

#### Response Example
```json
{
  "error": null
}
```

## GET /auth/user

### Description
Retrieves the authenticated user's profile information from Supabase Auth.

### Method
GET

### Endpoint
`/auth/user`

### Response
#### Success Response (200)
- **data** (object) - Contains user data including email and metadata.
- **error** (object) - Contains error details if fetching user fails.

#### Response Example
```json
{
  "data": {
    "user": {
      "id": "...",
      "email": "user@example.com",
      "user_metadata": {
        "name": "John Doe"
      }
    }
  },
  "error": null
}
```

## GET /auth/session

### Description
Retrieves the current user's session information from Supabase Auth. This is useful for client-side state management.

### Method
GET

### Endpoint
`/auth/session`

### Response
#### Success Response (200)
- **data** (object) - Contains session details.
- **error** (object) - Contains error details if fetching session fails.

#### Response Example
```json
{
  "data": {
    "session": {
      "access_token": "...",
      "refresh_token": "..."
    }
  },
  "error": null
}
```
```

--------------------------------

### Implement Zustand Draw Data Store

Source: https://context7.com/macintushar/draw/llms.txt

Defines a persistent store for managing drawing elements, timestamps, and binary files. Uses timestamp comparison to prevent overwriting newer data with stale local state.

```typescript
// src/stores/drawDataStore.ts
import { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
import { BinaryFiles } from "@excalidraw/excalidraw/types";
import { create } from "zustand";
import { persist } from "zustand/middleware";

export type DrawData = {
  [page_id: string]: {
    elements: readonly NonDeletedExcalidrawElement[];
    updatedAt: string;
    name: string;
    files?: BinaryFiles;
  };
};

type DrawDataStore = {
  data: DrawData;
  setPageData: (
    page_id: string,
    elements: readonly NonDeletedExcalidrawElement[],
    updatedAt: string,
    name: string,
    files?: BinaryFiles,
  ) => void;
  getPageData: (page_id: string) => DrawData[string] | undefined;
};

const drawDataStore = create<DrawDataStore>()(
  persist(
    (set, get) => ({
      data: {},
      setPageData: (page_id, elements, updatedAt, name, files) =>
        set((state) => {
          const currentData = state.data[page_id];
          if (!currentData || new Date(updatedAt) > new Date(currentData.updatedAt)) {
            return {
              data: {
                ...state.data,
                [page_id]: { elements, updatedAt, name, files },
              },
            };
          }
          return state;
        }),
      getPageData: (page_id) => get().data[page_id],
    }),
    { name: "draw-data-store" },
  ),
);

export { drawDataStore };

// Usage - Save locally then sync to API:
import { drawDataStore } from "@/stores/drawDataStore";

const saveDrawing = (pageId, elements, name, files) => {
  const updatedAt = new Date().toISOString();

  // Save locally first (offline-first approach)
  drawDataStore.getState().setPageData(pageId, elements, updatedAt, name, files);

  // Then sync to API
  setDrawData(pageId, elements, name, files);
};

// Load from local storage on mount:
const localData = drawDataStore.getState().getPageData(pageId);
if (localData) {
  excalidrawAPI.updateScene({ elements: localData.elements });
}
```

--------------------------------

### Integrate Excalidraw in React Page Component

Source: https://context7.com/macintushar/draw/llms.txt

Main canvas component featuring auto-save functionality, local caching via Zustand, and theme synchronization.

```typescript
// src/views/Page.tsx
import { Excalidraw, WelcomeScreen } from "@excalidraw/excalidraw";
import { ExcalidrawImperativeAPI, BinaryFiles } from "@excalidraw/excalidraw/types";
import { NonDeletedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
import { useQuery, useMutation } from "@tanstack/react-query";
import { getDrawData, setDrawData } from "@/db/draw";
import { drawDataStore } from "@/stores/drawDataStore";
import { useTheme } from "@/components/theme-provider";
import { useState, useEffect, useCallback } from "react";

export default function Page({ id }: { id: string }) {
  const [excalidrawAPI, setExcalidrawAPI] = useState<ExcalidrawImperativeAPI | null>(null);
  const [name, setName] = useState("");
  const { theme } = useTheme();

  // Fetch page data
  const { data, isLoading } = useQuery({
    queryKey: ["page", id],
    queryFn: () => getDrawData(id),
  });

  // Save mutation
  const mutation = useMutation({
    mutationFn: (data: { elements: NonDeletedExcalidrawElement[]; name: string; files?: BinaryFiles }) =>
      setDrawData(id, data.elements, data.name, data.files),
  });

  // Auto-save every 3 seconds
  const setSceneData = useCallback(async () => {
    if (excalidrawAPI) {
      const scene = excalidrawAPI.getSceneElements();
      const files = excalidrawAPI.getFiles();
      const updatedAt = new Date().toISOString();

      // Save locally first
      drawDataStore.getState().setPageData(id, scene, updatedAt, name, files);

      // Sync to API
      mutation.mutate({ elements: scene as NonDeletedExcalidrawElement[], name, files });
    }
  }, [excalidrawAPI, id, name, mutation]);

  useEffect(() => {
    const interval = setInterval(setSceneData, 3000);
    return () => clearInterval(interval);
  }, [setSceneData]);

  // Update scene when data loads
  useEffect(() => {
    if (data?.data && excalidrawAPI) {
      const pageData = data.data[0].page_elements;
      excalidrawAPI.updateScene({
        elements: pageData.elements || [],
        appState: { theme },
      });
      if (pageData.files) {
        excalidrawAPI.addFiles(Object.values(pageData.files));
      }
      setName(data.data[0].name);
    }
  }, [data, excalidrawAPI, theme]);

  return (
    <Excalidraw
      excalidrawAPI={(api) => setExcalidrawAPI(api)}
      initialData={{ appState: { theme } }}
      theme={theme === "dark" ? "dark" : "light"}
      autoFocus
    >
      <WelcomeScreen />
    </Excalidraw>
  );
}
```

--------------------------------

### Supabase Database Schema and RLS Policies

Source: https://context7.com/macintushar/draw/llms.txt

SQL schema for the 'draw' table and Row Level Security policies to manage access control. Ensure Supabase is configured for authentication.

```sql
-- Create the draw table
CREATE TABLE draw (
  created_at timestamp with time zone NOT NULL DEFAULT now(),
  page_elements jsonb NULL,
  page_id uuid NOT NULL DEFAULT gen_random_uuid(),
  user_id uuid NULL,
  name text NOT NULL DEFAULT 'New Page',
  updated_at timestamp with time zone NOT NULL DEFAULT now(),
  is_deleted boolean NOT NULL DEFAULT false,
  CONSTRAINT draw_pkey PRIMARY KEY (page_id),
  CONSTRAINT draw_user_id_fkey FOREIGN KEY (user_id) REFERENCES auth.users(id) ON UPDATE CASCADE
);

-- Enable Row Level Security
ALTER TABLE "draw" ENABLE ROW LEVEL SECURITY;

-- RLS Policies
CREATE POLICY "Enable read access for all users" ON draw
FOR SELECT TO public USING (true);

CREATE POLICY "Enable insert for authenticated users only" ON draw
FOR INSERT TO authenticated WITH CHECK (true);

CREATE POLICY "Enable update for authenticated users only" ON draw
FOR UPDATE TO authenticated
USING ((SELECT auth.uid()) = user_id)
WITH CHECK (true);

CREATE POLICY "Enable delete for users based on user_id" ON draw
FOR DELETE TO authenticated
USING ((SELECT auth.uid()) = user_id);
```

--------------------------------

### PUT /draw/update

Source: https://context7.com/macintushar/draw/llms.txt

Saves drawing elements, name, and files to an existing page with a timestamp update.

```APIDOC
## PUT /draw/update

### Description
Updates an existing drawing page with new elements, a name, and associated files. Updates the 'updated_at' timestamp.

### Method
PUT

### Parameters
#### Request Body
- **id** (string) - Required - The unique identifier of the page.
- **elements** (readonly NonDeletedExcalidrawElement[]) - Required - The updated drawing elements.
- **name** (string) - Required - The name of the page.
- **files** (BinaryFiles) - Optional - The updated binary files.

### Response
#### Success Response (200)
- **data** (Array) - The updated page record.
- **error** (Object) - Null if successful.
```

--------------------------------

### Stop Draw with Docker Compose

Source: https://github.com/macintushar/draw/blob/main/docs/docker.md

Use this command to stop the Draw application when it is running with Docker Compose.

```bash
docker-compose down
```

--------------------------------

### Supabase RLS Policies for Draw Table

Source: https://github.com/macintushar/draw/blob/main/docs/supabase.md

Configures Row Level Security (RLS) policies for the 'draw' table to manage data access. Policies include read access for all users, insert for authenticated users, update for the owning user, and delete for the owning user.

```sql
CREATE POLICY "Enable read access for all users" ON draw
FOR SELECT
TO public
USING (true);
```

```sql
CREATE POLICY "Enable insert for authenticated users only" ON draw
FOR INSERT
TO authenticated
WITH CHECK (true);
```

```sql
CREATE POLICY "Enable update for authenticated users only" ON draw
FOR UPDATE
TO authenticated
USING ((select auth.uid()) = user_id)
WITH CHECK (true);
```

```sql
CREATE POLICY "Enable delete for users based on user_id" ON draw
FOR DELETE
TO authenticated
USING ((select auth.uid()) = user_id);
```

--------------------------------

### Check Authentication Status Hook

Source: https://context7.com/macintushar/draw/llms.txt

Verifies if a user is currently authenticated by checking their session status. This hook is useful for protecting routes in frameworks like TanStack Router.

```typescript
// src/hooks/isAuthenticated.tsx
import { supabase } from "@/db/supabase";

export default async function isAuthenticated() {
  const { data, error } = await supabase.auth.getUser();
  if (data.user) return true;
  if (error) return false;
  return false;
}
```

```typescript
// Usage in TanStack Router for protected routes:
import isAuthenticated from "@/hooks/isAuthenticated";
import { createFileRoute, redirect } from "@tanstack/react-router";

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async () => {
    const authenticated = await isAuthenticated();
    if (!authenticated) {
      throw redirect({
        to: "/",
        replace: true,
      });
    }
  },
  component: Layout,
});
```

--------------------------------

### Update User Profile in Supabase Auth

Source: https://context7.com/macintushar/draw/llms.txt

Updates the authenticated user's email and name metadata. Ensure you have imported the necessary functions and the query client for invalidation.

```typescript
// src/db/auth.ts
export async function updateUser(name: string, email: string) {
  const { data, error } = await supabase.auth.updateUser({
    email: email,
    data: {
      name: name,
    },
  });
  return { data, error };
}
```

```typescript
// Usage:
import { updateUser } from "@/db/auth";
import { queryClient } from "@/main";

async function handleProfileUpdate(name: string, email: string) {
  const result = await updateUser(name, email);

  if (result.data.user) {
    queryClient.invalidateQueries({ queryKey: ["profile"] });
    console.log("Profile updated!");
  }

  if (result.error) {
    console.error("Update failed:", result.error.message);
  }
}
```

--------------------------------

### Sign Out User

Source: https://context7.com/macintushar/draw/llms.txt

Clears the current user session from Supabase Auth.

```typescript
// src/db/auth.ts
export async function logout() {
  const { error } = await supabase.auth.signOut();
  return { error };
}

// Usage:
import { logout } from "@/db/auth";

async function handleLogout() {
  const { error } = await logout();
  if (!error) {
    // Redirect to home page
  }
}
```

--------------------------------

### Save/Update Drawing Page Data

Source: https://context7.com/macintushar/draw/llms.txt

Saves drawing elements, name, and files to an existing page, updating the `updated_at` timestamp. Use this to persist changes to a drawing. Requires the page ID.

```typescript
// src/db/draw.ts
export async function setDrawData(
  id: string,
  elements: readonly NonDeletedExcalidrawElement[],
  name: string,
  files?: BinaryFiles,
): Promise<DBResponse> {
  const updateTime = new Date().toISOString();
  const excalidrawData: ExcalidrawData = {
    elements,
    files: files || {}
  };
  const { data, error } = await supabase
    .from(DB_NAME)
    .update({ name: name, page_elements: excalidrawData, updated_at: updateTime })
    .eq("page_id", id)
    .select();

  return { data, error };
}
```

```typescript
// Usage with TanStack Query mutation:
import { useMutation } from "@tanstack/react-query";
import { setDrawData } from "@/db/draw";

const mutation = useMutation({
  mutationFn: (data: {
    elements: NonDeletedExcalidrawElement[];
    name: string;
    files?: BinaryFiles;
  }) => setDrawData(pageId, data.elements, data.name, data.files),
  onSuccess: () => {
    console.log("Saved successfully");
  },
  onError: (error: Error) => {
    toast("Save error", { description: error.message });
  },
});

// Trigger save:
mutation.mutate({
  elements: excalidrawAPI.getSceneElements(),
  name: pageName,
  files: excalidrawAPI.getFiles(),
});
```

--------------------------------

### DELETE /draw/delete

Source: https://context7.com/macintushar/draw/llms.txt

Soft-deletes a drawing page by setting the is_deleted flag to true.

```APIDOC
## DELETE /draw/delete

### Description
Performs a soft-delete on a drawing page by updating the 'is_deleted' flag to true in the database.

### Method
DELETE

### Parameters
#### Path Parameters
- **id** (string) - Required - The unique identifier of the page to delete.

### Response
#### Success Response (200)
- **data** (null) - Indicates successful operation.
- **error** (Object) - Null if successful.
```

--------------------------------

### Zod Schemas for Form Validation

Source: https://context7.com/macintushar/draw/llms.txt

Defines Zod schemas for validating user input in authentication and profile forms. Includes schemas for email, password complexity, login, sign-up, and profile updates. These can be used with libraries like react-hook-form.

```typescript
// src/lib/schemas.ts
import { z } from "zod";

export const emailSchema = z.string().email();

export const checkPasswordSchema = z
  .string()
  .min(8, "Password must be at least 8 characters long")
  .max(100, "Password must not exceed 100 characters")
  .regex(/[A-Z]/, "Password must contain at least one uppercase letter")
  .regex(/[a-z]/, "Password must contain at least one lowercase letter")
  .regex(/[0-9]/, "Password must contain at least one number")
  .regex(/[^A-Za-z0-9]/, "Password must contain at least one special character");

export const loginSchema = z.object({
  email: emailSchema,
  password: z.string(),
});

export const signUpSchema = z.object({
  name: z.string().min(1, "Name must be at least 1 character"),
  email: emailSchema,
  password: z.string(),
});

export const updateProfileSchema = z.object({
  name: z.string().min(1, "Name must be at least 1 character"),
  email: emailSchema,
});

// Usage with react-hook-form:
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { loginSchema } from "@/lib/schemas";

const form = useForm<z.infer<typeof loginSchema>>({
  resolver: zodResolver(loginSchema),
});

```

--------------------------------

### Enable Row Level Security (RLS) for Draw Table

Source: https://github.com/macintushar/draw/blob/main/docs/supabase.md

Enables Row Level Security (RLS) on the 'draw' table. This feature controls access to rows based on defined policies.

```sql
alter table "draw" enable row level security;
```

--------------------------------

### Delete Drawing Page

Source: https://context7.com/macintushar/draw/llms.txt

Soft-deletes a drawing page by setting the `is_deleted` flag to true. Use this for a soft delete functionality. Requires the page ID.

```typescript
// src/db/draw.ts
export async function deletePage(id: string): Promise<DBResponse> {
  const { error } = await supabase
    .from(DB_NAME)
    .update({ is_deleted: true })
    .eq("page_id", id);

  return { data: null, error };
}
```

```typescript
// Usage:
import { deletePage } from "@/db/draw";

async function handlePageDelete(pageId: string, refetchPages: () => void) {
  const result = await deletePage(pageId);

  if (result.data === null && !result.error) {
    toast("Successfully deleted the page!");
    refetchPages();
  }

  if (result.error) {
    toast("Error", { description: result.error.message });
  }
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.