Update Version: 1.4.5

README.md

@@ -1,6 +1,6 @@
 # TypstDrive
 
-[![Version](https://img.shields.io/badge/version-1.4.0-blue.svg)](https://github.com/your-username/typstdrive)
+[![Version](https://img.shields.io/badge/version-1.4.5-blue.svg)](https://github.com/your-username/typstdrive)
 [![Typst Version](https://img.shields.io/badge/Typst-0.14.2-239dad?logo=typst&logoColor=white)](https://typst.app/)
 [![Rust](https://img.shields.io/badge/Rust-1.82+-orange?logo=rust&logoColor=white)](https://www.rust-lang.org/)
 [![SvelteKit](https://img.shields.io/badge/SvelteKit-5-ff3e00?logo=svelte)](https://kit.svelte.dev/)
@@ -18,7 +18,8 @@ TypstDrive is a collaborative web editor for Typst. With built-in dark mode, mul
 - **Instant Preview**: Compile Typst to SVG on the fly with sub-second latency, featuring interactive document zoom controls and a collapsible preview pane.
 - **Customizable Themes**: Choose from multiple editor themes (Catppuccin, Arch Linux, Cerberus) and toggle global dark mode.
 - **Export Options**: Export your compiled documents directly to PDF, PNG, SVG, HTML, Markdown, Word, or LaTeX formats using internal conversion and Pandoc integrations.
-- **User Authentication & Document Access**: Secure accounts, workspaces, and sharing features via email-based collaborator invitations (Editor or Viewer roles) for all your documents.
+- **Document Sharing**: Invite collaborators by email with Editor or Viewer roles. Collaborators' uploaded fonts and images are available to the compiler. A dedicated "Shared with me" folder on the dashboard surfaces all documents others have shared with you. Manage and remove collaborators directly from the Share modal in the editor.
+- **Public REST API**: Programmatically render Typst documents to PNG or PDF via `POST /v1/render`. Manage API keys from the Settings panel, with a live usage chart supporting 1-hour, 1-day, and 1-week views. Full API reference available at `/api-docs`.
 - **Admin System**: First-run setup wizard creates an admin account. Admins can manage all users, create new accounts with temporary passwords, toggle admin privileges, and delete accounts from the Settings panel.
 - **Presentation Mode**: Turn your documents into instant slideshows with built-in slide controls and a live drawing/annotation tool overlay.
 - **Asset Management**: Upload and seamlessly use custom fonts and images directly within your documents.
@@ -169,5 +170,5 @@ The frontend dev server proxies API calls to `localhost:3000` automatically.
 </p>
 <p align="center">
   <img src="preview/dashboard.png" alt="Dashboard view" width="49%">
-  <img src="preview/register.png" alt="Authentication view" width="49%">
+  <img src="preview/login.png" alt="Authentication view" width="49%">
 </p>

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "typstdrive",
 	"private": true,
-	"version": "1.4.0",
+	"version": "1.4.5",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev --host",
@@ -14,30 +14,32 @@
 	"devDependencies": {
 		"@sveltejs/adapter-auto": "^7.0.1",
 		"@sveltejs/adapter-static": "^3.0.10",
-		"@sveltejs/kit": "^2.56.1",
+		"@sveltejs/kit": "^2.60.1",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
 		"@tailwindcss/forms": "^0.5.11",
 		"@tailwindcss/typography": "^0.5.19",
-		"@tailwindcss/vite": "^4.2.2",
-		"svelte": "^5.55.1",
-		"svelte-check": "^4.4.6",
-		"tailwindcss": "^4.2.2",
+		"@tailwindcss/vite": "^4.3.0",
+		"svelte": "^5.55.9",
+		"svelte-check": "^4.4.8",
+		"tailwindcss": "^4.3.0",
 		"typescript": "^5.9.3",
-		"vite": "^7.3.2",
+		"vite": "^7.3.3",
 		"vite-plugin-top-level-await": "^1.6.0",
 		"vite-plugin-wasm": "^3.6.0"
 	},
 	"dependencies": {
-		"@codemirror/autocomplete": "^6.20.1",
+		"@codemirror/autocomplete": "^6.20.2",
 		"@codemirror/commands": "^6.10.3",
 		"@codemirror/lang-rust": "^6.0.2",
-		"@codemirror/lint": "^6.9.5",
-		"@codemirror/lsp-client": "^6.2.2",
+		"@codemirror/lint": "^6.9.6",
+		"@codemirror/lsp-client": "^6.2.4",
 		"@codemirror/state": "^6.6.0",
-		"@codemirror/view": "^6.41.0",
+		"@codemirror/view": "^6.43.0",
 		"@iconify/svelte": "^5.2.1",
+		"chart.js": "^4.5.1",
 		"codemirror": "^6.0.2",
 		"codemirror-lang-typst": "^0.4.0",
+		"highlight.js": "^11.11.1",
 		"y-codemirror.next": "^0.3.5",
 		"y-websocket": "^3.0.0",
 		"yjs": "^13.6.30"

server/Cargo.toml

@@ -1,6 +1,6 @@
 [package]
 name = "server"
-version = "1.4.0"
+version = "1.4.5"
 edition = "2021"
 
 [dependencies]
@@ -33,3 +33,5 @@ yrs-axum = "0.8"
 typst-assets = { version = "0.14.2", features = ["fonts"] }
 tokio-stream = "0.1.18"
 tempfile = "3.27.0"
+sha2 = "0.10"
+base64 = "0.22"

server/src/api_keys.rs

@@ -0,0 +1,236 @@
+use axum::{
+    extract::{Path, Query, State},
+    http::StatusCode,
+    Json,
+};
+use std::collections::HashMap;
+use axum_extra::extract::cookie::SignedCookieJar;
+use sha2::{Sha256, Digest};
+use uuid::Uuid;
+
+use crate::{
+    models::{ApiKeyView, CreateApiKeyRequest, UsagePoint},
+    AppState,
+};
+
+fn get_user_id(jar: &SignedCookieJar) -> Option<String> {
+    jar.get("session_user_id").map(|c| c.value().to_string())
+}
+
+pub fn hash_key(key: &str) -> String {
+    format!("{:x}", Sha256::digest(key.as_bytes()))
+}
+
+fn generate_api_key() -> String {
+    format!(
+        "td_{}{}",
+        Uuid::new_v4().to_string().replace("-", ""),
+        Uuid::new_v4().to_string().replace("-", "")
+    )
+}
+
+pub async fn list_keys(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+) -> Result<Json<Vec<ApiKeyView>>, (StatusCode, String)> {
+    let user_id = get_user_id(&jar)
+        .ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    let keys = sqlx::query_as::<_, ApiKeyView>(
+        "SELECT id, name, key_prefix, created_at, last_used_at, rate_limit FROM api_keys WHERE user_id = ? ORDER BY created_at DESC"
+    )
+    .bind(&user_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(keys))
+}
+
+pub async fn create_key(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+    Json(payload): Json<CreateApiKeyRequest>,
+) -> Result<(StatusCode, Json<serde_json::Value>), (StatusCode, String)> {
+    let user_id = get_user_id(&jar)
+        .ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    if payload.name.trim().is_empty() {
+        return Err((StatusCode::BAD_REQUEST, "Key name cannot be empty".to_string()));
+    }
+
+    let existing: Option<(i64,)> = sqlx::query_as("SELECT COUNT(*) FROM api_keys WHERE user_id = ?")
+        .bind(&user_id)
+        .fetch_optional(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if let Some((count,)) = existing {
+        if count >= 10 {
+            return Err((StatusCode::CONFLICT, "Maximum of 10 API keys per account".to_string()));
+        }
+    }
+
+    let key = generate_api_key();
+    let hash = hash_key(&key);
+    let prefix = key[..11].to_string(); // "td_" + 8 hex chars
+    let id = Uuid::new_v4().to_string();
+    let now = chrono::Utc::now().to_rfc3339();
+
+    sqlx::query(
+        "INSERT INTO api_keys (id, user_id, name, key_hash, key_prefix, created_at) VALUES (?, ?, ?, ?, ?, ?)"
+    )
+    .bind(&id)
+    .bind(&user_id)
+    .bind(&payload.name)
+    .bind(&hash)
+    .bind(&prefix)
+    .bind(&now)
+    .execute(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok((StatusCode::CREATED, Json(serde_json::json!({
+        "id": id,
+        "name": payload.name,
+        "key": key,
+        "prefix": prefix,
+        "created_at": now,
+        "rate_limit": 60,
+    }))))
+}
+
+pub async fn get_aggregate_usage(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+    Query(params): Query<HashMap<String, String>>,
+) -> Result<Json<Vec<UsagePoint>>, (StatusCode, String)> {
+    let user_id = get_user_id(&jar)
+        .ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    let period = params.get("period").map(|s| s.as_str()).unwrap_or("1week");
+
+    let usage = match period {
+        "1hr" => {
+            let cutoff = (chrono::Utc::now() - chrono::TimeDelta::hours(1))
+                .format("%Y-%m-%d %H:%M")
+                .to_string();
+            sqlx::query_as::<_, UsagePoint>(
+                "SELECT minute as date, SUM(count) as count
+                 FROM api_key_usage_detail
+                 WHERE key_id IN (SELECT id FROM api_keys WHERE user_id = ?) AND minute >= ?
+                 GROUP BY minute
+                 ORDER BY minute ASC"
+            )
+            .bind(&user_id)
+            .bind(&cutoff)
+            .fetch_all(&state.db)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+        }
+        "1day" => {
+            let cutoff = (chrono::Utc::now() - chrono::TimeDelta::hours(24))
+                .format("%Y-%m-%d %H:%M")
+                .to_string();
+            sqlx::query_as::<_, UsagePoint>(
+                "SELECT SUBSTR(minute, 1, 13) as date, SUM(count) as count
+                 FROM api_key_usage_detail
+                 WHERE key_id IN (SELECT id FROM api_keys WHERE user_id = ?) AND minute >= ?
+                 GROUP BY SUBSTR(minute, 1, 13)
+                 ORDER BY date ASC"
+            )
+            .bind(&user_id)
+            .bind(&cutoff)
+            .fetch_all(&state.db)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+        }
+        _ => {
+            let cutoff = (chrono::Utc::now() - chrono::TimeDelta::days(6))
+                .format("%Y-%m-%d")
+                .to_string();
+            sqlx::query_as::<_, UsagePoint>(
+                "SELECT date, SUM(count) as count
+                 FROM api_key_usage
+                 WHERE key_id IN (SELECT id FROM api_keys WHERE user_id = ?) AND date >= ?
+                 GROUP BY date
+                 ORDER BY date ASC"
+            )
+            .bind(&user_id)
+            .bind(&cutoff)
+            .fetch_all(&state.db)
+            .await
+            .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+        }
+    };
+
+    Ok(Json(usage))
+}
+
+pub async fn regenerate_key(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+    Path(key_id): Path<String>,
+) -> Result<Json<serde_json::Value>, (StatusCode, String)> {
+    let user_id = get_user_id(&jar)
+        .ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    let row: Option<(String,)> = sqlx::query_as(
+        "SELECT name FROM api_keys WHERE id = ? AND user_id = ?"
+    )
+    .bind(&key_id)
+    .bind(&user_id)
+    .fetch_optional(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    let (name,) = row.ok_or((StatusCode::NOT_FOUND, "API key not found".to_string()))?;
+
+    let new_key = generate_api_key();
+    let new_hash = hash_key(&new_key);
+    let new_prefix = new_key[..11].to_string();
+    let now = chrono::Utc::now().to_rfc3339();
+
+    sqlx::query(
+        "UPDATE api_keys SET key_hash = ?, key_prefix = ?, created_at = ?, last_used_at = NULL WHERE id = ? AND user_id = ?"
+    )
+    .bind(&new_hash)
+    .bind(&new_prefix)
+    .bind(&now)
+    .bind(&key_id)
+    .bind(&user_id)
+    .execute(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(serde_json::json!({
+        "id": key_id,
+        "name": name,
+        "key": new_key,
+        "prefix": new_prefix,
+        "created_at": now,
+        "rate_limit": 60,
+    })))
+}
+
+pub async fn delete_key(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+    Path(key_id): Path<String>,
+) -> Result<StatusCode, (StatusCode, String)> {
+    let user_id = get_user_id(&jar)
+        .ok_or((StatusCode::UNAUTHORIZED, "Not authenticated".to_string()))?;
+
+    let result = sqlx::query("DELETE FROM api_keys WHERE id = ? AND user_id = ?")
+        .bind(&key_id)
+        .bind(&user_id)
+        .execute(&state.db)
+        .await
+        .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if result.rows_affected() == 0 {
+        return Err((StatusCode::NOT_FOUND, "API key not found".to_string()));
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}

server/src/collab.rs

@@ -8,7 +8,7 @@ use serde::Deserialize;
 use uuid::Uuid;
 
 use crate::{
-    models::{Collaborator, Comment, CreateCommentRequest, Invitation, InviteRequest, UpdateCommentRequest},
+    models::{Collaborator, CollaboratorView, Comment, CreateCommentRequest, Invitation, InviteRequest, UpdateCommentRequest},
     AppState,
 };
 
@@ -32,7 +32,7 @@ pub async fn invite_collaborator(
         return Err((StatusCode::FORBIDDEN, "Only the owner can invite collaborators".to_string()));
     }
 
-    let invited_user = sqlx::query_as::<_, crate::models::User>("SELECT id, username, email, password_hash FROM users WHERE email = ?")
+    let invited_user = sqlx::query_as::<_, crate::models::User>("SELECT id, username, email, password_hash, is_admin FROM users WHERE email = ?")
         .bind(&payload.email)
         .fetch_optional(&state.db)
         .await
@@ -103,6 +103,82 @@ pub async fn accept_invite(
     Ok(Json(collab))
 }
 
+pub async fn list_collaborators(
+    State(state): State<AppState>,
+    Path(doc_id): Path<String>,
+    jar: SignedCookieJar,
+) -> Result<Json<Vec<CollaboratorView>>, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    // Only owner or collaborators on the document can see the list
+    let has_access = sqlx::query_scalar::<_, i64>(
+        "SELECT COUNT(*) FROM documents WHERE id = ? AND owner_id = ? \
+         UNION ALL SELECT COUNT(*) FROM collaborators WHERE document_id = ? AND user_id = ?"
+    )
+    .bind(&doc_id).bind(&user_id).bind(&doc_id).bind(&user_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?
+    .into_iter().sum::<i64>() > 0;
+
+    if !has_access {
+        return Err((StatusCode::FORBIDDEN, "Access denied".to_string()));
+    }
+
+    let collaborators = sqlx::query_as::<_, CollaboratorView>(
+        "SELECT c.id, c.user_id, u.username, u.email, c.role, c.created_at \
+         FROM collaborators c \
+         INNER JOIN users u ON u.id = c.user_id \
+         WHERE c.document_id = ? \
+         ORDER BY c.created_at ASC"
+    )
+    .bind(&doc_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(collaborators))
+}
+
+pub async fn remove_collaborator(
+    State(state): State<AppState>,
+    Path((doc_id, collab_id)): Path<(String, String)>,
+    jar: SignedCookieJar,
+) -> Result<StatusCode, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    // Only the document owner can remove collaborators
+    let is_owner = sqlx::query_scalar::<_, i64>(
+        "SELECT COUNT(*) FROM documents WHERE id = ? AND owner_id = ?"
+    )
+    .bind(&doc_id)
+    .bind(&user_id)
+    .fetch_one(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))? > 0;
+
+    if !is_owner {
+        return Err((StatusCode::FORBIDDEN, "Only the document owner can remove collaborators".to_string()));
+    }
+
+    let result = sqlx::query(
+        "DELETE FROM collaborators WHERE id = ? AND document_id = ?"
+    )
+    .bind(&collab_id)
+    .bind(&doc_id)
+    .execute(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    if result.rows_affected() == 0 {
+        return Err((StatusCode::NOT_FOUND, "Collaborator not found".to_string()));
+    }
+
+    Ok(StatusCode::NO_CONTENT)
+}
+
 pub async fn get_comments(
     State(state): State<AppState>,
     Path(doc_id): Path<String>,

server/src/db/postgres.rs

@@ -76,6 +76,35 @@ pub async fn init_schema(pool: &AnyPool) {
             content TEXT NOT NULL,
             created_at TEXT DEFAULT to_char(NOW(), 'YYYY-MM-DD HH24:MI:SS')
         )",
+        "CREATE TABLE IF NOT EXISTS api_keys (
+            id TEXT PRIMARY KEY,
+            user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            name TEXT NOT NULL,
+            key_hash TEXT NOT NULL UNIQUE,
+            key_prefix TEXT NOT NULL,
+            created_at TEXT NOT NULL,
+            last_used_at TEXT,
+            rate_limit INTEGER NOT NULL DEFAULT 60
+        )",
+        "CREATE TABLE IF NOT EXISTS api_render_cache (
+            id TEXT PRIMARY KEY,
+            content_hash TEXT NOT NULL UNIQUE,
+            format TEXT NOT NULL,
+            data BYTEA NOT NULL,
+            created_at TEXT NOT NULL
+        )",
+        "CREATE TABLE IF NOT EXISTS api_key_usage (
+            key_id TEXT NOT NULL REFERENCES api_keys(id) ON DELETE CASCADE,
+            date TEXT NOT NULL,
+            count INTEGER NOT NULL DEFAULT 1,
+            PRIMARY KEY(key_id, date)
+        )",
+        "CREATE TABLE IF NOT EXISTS api_key_usage_detail (
+            key_id TEXT NOT NULL REFERENCES api_keys(id) ON DELETE CASCADE,
+            minute TEXT NOT NULL,
+            count INTEGER NOT NULL DEFAULT 1,
+            PRIMARY KEY(key_id, minute)
+        )",
     ];
 
     for stmt in &statements {

server/src/db/sqlite.rs

@@ -81,6 +81,35 @@ pub async fn init_schema(pool: &AnyPool) {
             content TEXT NOT NULL,
             created_at TEXT DEFAULT (strftime('%Y-%m-%d %H:%M:%S', 'now'))
         )",
+        "CREATE TABLE IF NOT EXISTS api_keys (
+            id TEXT PRIMARY KEY,
+            user_id TEXT NOT NULL REFERENCES users(id) ON DELETE CASCADE,
+            name TEXT NOT NULL,
+            key_hash TEXT NOT NULL UNIQUE,
+            key_prefix TEXT NOT NULL,
+            created_at TEXT NOT NULL,
+            last_used_at TEXT,
+            rate_limit INTEGER NOT NULL DEFAULT 60
+        )",
+        "CREATE TABLE IF NOT EXISTS api_render_cache (
+            id TEXT PRIMARY KEY,
+            content_hash TEXT NOT NULL UNIQUE,
+            format TEXT NOT NULL,
+            data BLOB NOT NULL,
+            created_at TEXT NOT NULL
+        )",
+        "CREATE TABLE IF NOT EXISTS api_key_usage (
+            key_id TEXT NOT NULL REFERENCES api_keys(id) ON DELETE CASCADE,
+            date TEXT NOT NULL,
+            count INTEGER NOT NULL DEFAULT 1,
+            PRIMARY KEY(key_id, date)
+        )",
+        "CREATE TABLE IF NOT EXISTS api_key_usage_detail (
+            key_id TEXT NOT NULL REFERENCES api_keys(id) ON DELETE CASCADE,
+            minute TEXT NOT NULL,
+            count INTEGER NOT NULL DEFAULT 1,
+            PRIMARY KEY(key_id, minute)
+        )",
     ];
 
     for stmt in &statements {

server/src/docs.rs

@@ -17,6 +17,28 @@ pub struct ListDocsQuery {
     pub folder_id: Option<String>,
 }
 
+pub async fn list_shared_documents(
+    State(state): State<AppState>,
+    jar: SignedCookieJar,
+) -> Result<Json<Vec<Document>>, (StatusCode, String)> {
+    let user_id = jar.get("session_user_id").map(|c| c.value().to_string())
+        .ok_or((StatusCode::UNAUTHORIZED, "Not logged in".to_string()))?;
+
+    let docs = sqlx::query_as::<_, Document>(
+        "SELECT d.id, d.owner_id, d.folder_id, d.title, d.content, d.thumbnail_svg, \
+         d.public_role, d.created_at, d.updated_at, c.role as effective_role \
+         FROM documents d \
+         INNER JOIN collaborators c ON c.document_id = d.id AND c.user_id = ? \
+         ORDER BY d.updated_at DESC"
+    )
+    .bind(&user_id)
+    .fetch_all(&state.db)
+    .await
+    .map_err(|e| (StatusCode::INTERNAL_SERVER_ERROR, e.to_string()))?;
+
+    Ok(Json(docs))
+}
+
 pub async fn list_documents(
     axum::extract::Query(query): axum::extract::Query<ListDocsQuery>,
     State(state): State<AppState>,

server/src/handlers.rs

@@ -208,7 +208,7 @@ pub async fn compile_handler(
 
             if has_access {
                 if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = ?")
-                    .bind(doc.owner_id)
+                    .bind(&doc.owner_id)
                     .fetch_all(&state.db)
                     .await
                 {
@@ -216,6 +216,19 @@ pub async fn compile_handler(
                         files_map.insert(name, data);
                     }
                 }
+                // Also include files uploaded by collaborators specifically for this document
+                if let Ok(collab_files) = sqlx::query_as::<_, (String, Vec<u8>)>(
+                    "SELECT name, data FROM files WHERE document_id = ? AND owner_id != ?"
+                )
+                .bind(doc_id)
+                .bind(&doc.owner_id)
+                .fetch_all(&state.db)
+                .await
+                {
+                    for (name, data) in collab_files {
+                        files_map.insert(name, data);
+                    }
+                }
             }
         }
     }
@@ -298,7 +311,7 @@ pub async fn export_handler(
 
             if has_access {
                 if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>("SELECT name, data FROM files WHERE owner_id = ?")
-                    .bind(doc.owner_id)
+                    .bind(&doc.owner_id)
                     .fetch_all(&state.db)
                     .await
                 {
@@ -306,6 +319,18 @@ pub async fn export_handler(
                         files_map.insert(name, data);
                     }
                 }
+                if let Ok(collab_files) = sqlx::query_as::<_, (String, Vec<u8>)>(
+                    "SELECT name, data FROM files WHERE document_id = ? AND owner_id != ?"
+                )
+                .bind(doc_id)
+                .bind(&doc.owner_id)
+                .fetch_all(&state.db)
+                .await
+                {
+                    for (name, data) in collab_files {
+                        files_map.insert(name, data);
+                    }
+                }
             }
         }
     }

server/src/main.rs

@@ -13,6 +13,7 @@ use tower_http::trace::TraceLayer;
 use tracing_subscriber::{layer::SubscriberExt, util::SubscriberInitExt};
 
 mod admin;
+mod api_keys;
 mod auth;
 mod compiler;
 mod db;
@@ -21,6 +22,7 @@ mod folders;
 mod files;
 mod handlers;
 mod models;
+mod public_api;
 mod setup;
 mod world;
 mod collab;
@@ -28,6 +30,8 @@ mod collab;
 use compiler::TypstCompiler;
 use handlers::{compile_handler, export_handler, yjs_handler};
 
+pub type RateLimiterMap = Arc<Mutex<HashMap<String, (u32, std::time::Instant)>>>;
+
 #[derive(Clone)]
 pub struct AppState {
     pub compiler: Arc<Mutex<TypstCompiler>>,
@@ -35,6 +39,7 @@ pub struct AppState {
     pub db: AnyPool,
     pub key: Key,
     pub registration_enabled: bool,
+    pub rate_limiter: RateLimiterMap,
 }
 
 impl axum::extract::FromRef<AppState> for Key {
@@ -84,6 +89,7 @@ async fn main() {
         db,
         key,
         registration_enabled,
+        rate_limiter: Arc::new(Mutex::new(HashMap::new())),
     };
 
     let api_routes = Router::new()
@@ -107,14 +113,24 @@ async fn main() {
         .route("/files", get(files::list_files).post(files::upload_file_global))
         .route("/files/{id}", delete(files::delete_file).patch(files::update_file))
         .route("/files/{id}/data", get(files::get_file_data))
+        .route("/docs/shared", get(docs::list_shared_documents))
         .route("/docs", get(docs::list_documents).post(docs::create_document))
         .route("/docs/accept-invite", get(collab::accept_invite))
         .route("/docs/{id}", get(docs::get_document).delete(docs::delete_document).patch(docs::update_document))
         .route("/docs/{id}/files", post(docs::upload_file))
+        .route("/docs/{id}/collaborators", get(collab::list_collaborators))
+        .route("/docs/{id}/collaborators/{collab_id}", delete(collab::remove_collaborator))
         .route("/docs/{id}/invite", post(collab::invite_collaborator))
         .route("/docs/{id}/comments", get(collab::get_comments).post(collab::add_comment))
         .route("/docs/{id}/versions", get(collab::get_versions).post(collab::create_version))
-        .route("/comments/{id}", patch(collab::update_comment).delete(collab::delete_comment));
+        .route("/comments/{id}", patch(collab::update_comment).delete(collab::delete_comment))
+        .route("/keys", get(api_keys::list_keys).post(api_keys::create_key))
+        .route("/keys/usage", get(api_keys::get_aggregate_usage))
+        .route("/keys/{id}", delete(api_keys::delete_key))
+        .route("/keys/{id}/regenerate", post(api_keys::regenerate_key));
+
+    let v1_routes = Router::new()
+        .route("/render", post(public_api::render_handler));
 
     let yjs_routes = Router::new()
         .route("/{id}", get(yjs_handler));
@@ -123,6 +139,7 @@ async fn main() {
 
     let app = Router::new()
         .nest("/api", api_routes.layer(TraceLayer::new_for_http()))
+        .nest("/v1", v1_routes.layer(TraceLayer::new_for_http()))
         .nest("/yjs", yjs_routes.layer(TraceLayer::new_for_http()))
         .fallback_service(ServeDir::new(&static_dir).fallback(ServeFile::new(format!("{}/index.html", static_dir))))
         .with_state(state);

server/src/models.rs

@@ -133,6 +133,16 @@ pub struct Collaborator {
     pub created_at: String,
 }
 
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct CollaboratorView {
+    pub id: String,
+    pub user_id: String,
+    pub username: String,
+    pub email: String,
+    pub role: String,
+    pub created_at: String,
+}
+
 #[derive(Debug, Serialize, Deserialize, FromRow)]
 pub struct Invitation {
     pub id: String,
@@ -195,6 +205,27 @@ pub struct AdminCreateUserRequest {
     pub is_admin: Option<bool>,
 }
 
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct UsagePoint {
+    pub date: String,
+    pub count: i64,
+}
+
+#[derive(Debug, Serialize, Deserialize, FromRow)]
+pub struct ApiKeyView {
+    pub id: String,
+    pub name: String,
+    pub key_prefix: String,
+    pub created_at: String,
+    pub last_used_at: Option<String>,
+    pub rate_limit: i64,
+}
+
+#[derive(Debug, Serialize, Deserialize)]
+pub struct CreateApiKeyRequest {
+    pub name: String,
+}
+
 #[derive(Debug, Serialize, Deserialize)]
 pub struct SetupRequest {
     pub username: String,

server/src/public_api.rs

@@ -0,0 +1,211 @@
+use axum::{
+    extract::State,
+    http::{header, StatusCode},
+    response::IntoResponse,
+    Json,
+};
+use base64::{Engine as _, engine::general_purpose::STANDARD as BASE64};
+use serde::Deserialize;
+use sha2::{Sha256, Digest};
+use std::collections::HashMap;
+use uuid::Uuid;
+
+use crate::{api_keys::hash_key, AppState};
+
+#[derive(Deserialize)]
+pub struct RenderRequest {
+    pub code: String,
+    pub format: String,
+    pub files: Option<Vec<InlineFile>>,
+}
+
+#[derive(Deserialize)]
+pub struct InlineFile {
+    pub name: String,
+    pub data: String, // base64-encoded
+}
+
+fn compute_cache_key(format: &str, code: &str, files: &Option<Vec<InlineFile>>) -> String {
+    let mut hasher = Sha256::new();
+    hasher.update(format.as_bytes());
+    hasher.update(b"\x00");
+    hasher.update(code.as_bytes());
+    if let Some(files) = files {
+        let mut pairs: Vec<_> = files.iter().map(|f| (f.name.as_str(), f.data.as_str())).collect();
+        pairs.sort_by_key(|(n, _)| *n);
+        for (name, data) in pairs {
+            hasher.update(b"\x01");
+            hasher.update(name.as_bytes());
+            hasher.update(data.as_bytes());
+        }
+    }
+    format!("{:x}", hasher.finalize())
+}
+
+pub async fn render_handler(
+    State(state): State<AppState>,
+    headers: axum::http::HeaderMap,
+    Json(payload): Json<RenderRequest>,
+) -> impl IntoResponse {
+    // Extract Bearer token
+    let api_key = match headers
+        .get("Authorization")
+        .and_then(|v| v.to_str().ok())
+        .filter(|v| v.starts_with("Bearer "))
+        .map(|v| v[7..].to_string())
+    {
+        Some(k) => k,
+        None => return (StatusCode::UNAUTHORIZED, "Missing or invalid Authorization header. Use: Authorization: Bearer <api-key>").into_response(),
+    };
+
+    if payload.format != "png" && payload.format != "pdf" {
+        return (StatusCode::BAD_REQUEST, "Invalid format. Must be 'png' or 'pdf'").into_response();
+    }
+
+    if payload.code.trim().is_empty() {
+        return (StatusCode::BAD_REQUEST, "code cannot be empty").into_response();
+    }
+
+    let key_hash = hash_key(&api_key);
+
+    let key_row = sqlx::query_as::<_, (String, String, i64)>(
+        "SELECT id, user_id, rate_limit FROM api_keys WHERE key_hash = ?"
+    )
+    .bind(&key_hash)
+    .fetch_optional(&state.db)
+    .await;
+
+    let (key_id, user_id, rate_limit) = match key_row {
+        Ok(Some(row)) => row,
+        Ok(None) => return (StatusCode::UNAUTHORIZED, "Invalid API key").into_response(),
+        Err(e) => {
+            let msg = format!("Database error: {}", e);
+            return (StatusCode::INTERNAL_SERVER_ERROR, msg).into_response();
+        }
+    };
+
+    // Rate limiting: fixed window of 60 seconds
+    {
+        let mut limiter = state.rate_limiter.lock().await;
+        let now = std::time::Instant::now();
+        let window = std::time::Duration::from_secs(60);
+        let entry = limiter.entry(key_id.clone()).or_insert((0u32, now));
+        if now.duration_since(entry.1) > window {
+            entry.0 = 1;
+            entry.1 = now;
+        } else if entry.0 < rate_limit as u32 {
+            entry.0 += 1;
+        } else {
+            return (StatusCode::TOO_MANY_REQUESTS, "Rate limit exceeded. Max requests per minute reached.").into_response();
+        }
+    }
+
+    let now = chrono::Utc::now();
+    let now_str = now.to_rfc3339();
+    let today = now.format("%Y-%m-%d").to_string();
+
+    let _ = sqlx::query("UPDATE api_keys SET last_used_at = ? WHERE id = ?")
+        .bind(&now_str)
+        .bind(&key_id)
+        .execute(&state.db)
+        .await;
+
+    let _ = sqlx::query(
+        "INSERT INTO api_key_usage (key_id, date, count) VALUES (?, ?, 1) \
+         ON CONFLICT (key_id, date) DO UPDATE SET count = api_key_usage.count + 1"
+    )
+    .bind(&key_id)
+    .bind(&today)
+    .execute(&state.db)
+    .await;
+
+    let minute_str = now.format("%Y-%m-%d %H:%M").to_string();
+    let _ = sqlx::query(
+        "INSERT INTO api_key_usage_detail (key_id, minute, count) VALUES (?, ?, 1) \
+         ON CONFLICT (key_id, minute) DO UPDATE SET count = api_key_usage_detail.count + 1"
+    )
+    .bind(&key_id)
+    .bind(&minute_str)
+    .execute(&state.db)
+    .await;
+
+    let cutoff_minute = (chrono::Utc::now() - chrono::TimeDelta::hours(25))
+        .format("%Y-%m-%d %H:%M")
+        .to_string();
+    let _ = sqlx::query("DELETE FROM api_key_usage_detail WHERE minute < ?")
+        .bind(&cutoff_minute)
+        .execute(&state.db)
+        .await;
+
+    // Check cache
+    let cache_key = compute_cache_key(&payload.format, &payload.code, &payload.files);
+    let content_type: &'static str = if payload.format == "pdf" { "application/pdf" } else { "image/png" };
+
+    if let Ok(Some((data, created_at))) = sqlx::query_as::<_, (Vec<u8>, String)>(
+        "SELECT data, created_at FROM api_render_cache WHERE content_hash = ? AND format = ?"
+    )
+    .bind(&cache_key)
+    .bind(&payload.format)
+    .fetch_optional(&state.db)
+    .await
+    {
+        if let Ok(parsed) = chrono::DateTime::parse_from_rfc3339(&created_at) {
+            let age = chrono::Utc::now().signed_duration_since(parsed.with_timezone(&chrono::Utc));
+            if age.num_seconds() < 3600 {
+                return (StatusCode::OK, [(header::CONTENT_TYPE, content_type)], data).into_response();
+            }
+        }
+    }
+
+    // Load user's account files
+    let mut files_map: HashMap<String, Vec<u8>> = HashMap::new();
+    if let Ok(files) = sqlx::query_as::<_, (String, Vec<u8>)>(
+        "SELECT name, data FROM files WHERE owner_id = ?"
+    )
+    .bind(&user_id)
+    .fetch_all(&state.db)
+    .await
+    {
+        for (name, data) in files {
+            files_map.insert(name, data);
+        }
+    }
+
+    // Inline files override account files
+    if let Some(inline_files) = &payload.files {
+        for f in inline_files {
+            if let Ok(decoded) = BASE64.decode(&f.data) {
+                files_map.insert(f.name.clone(), decoded);
+            }
+        }
+    }
+
+    // Compile
+    let compiler = state.compiler.lock().await;
+    let result = match payload.format.as_str() {
+        "pdf" => compiler.export_pdf(payload.code.clone(), files_map),
+        "png" => compiler.export_png(payload.code.clone(), files_map),
+        _ => unreachable!(),
+    };
+    drop(compiler);
+
+    match result {
+        Ok(data) => {
+            // Store in cache (ignore errors — concurrent inserts are fine)
+            let cache_id = Uuid::new_v4().to_string();
+            let _ = sqlx::query(
+                "INSERT INTO api_render_cache (id, content_hash, format, data, created_at) VALUES (?, ?, ?, ?, ?)"
+            )
+            .bind(&cache_id)
+            .bind(&cache_key)
+            .bind(&payload.format)
+            .bind(&data)
+            .bind(&now_str)
+            .execute(&state.db)
+            .await;
+
+            (StatusCode::OK, [(header::CONTENT_TYPE, content_type)], data).into_response()
+        }
+        Err(_) => (StatusCode::UNPROCESSABLE_ENTITY, "Typst compilation failed. Check your code for errors.").into_response(),
+    }
+}

src/lib/components/CommentsSidebar.svelte

@@ -96,7 +96,6 @@
 </script>
 
 <div class="fixed right-0 top-0 bottom-0 w-80 bg-[var(--theme-bg)] backdrop-blur-xl border-l shadow-2xl flex flex-col z-[70] transform transition-transform duration-300 border-[var(--theme-border)]">
-	<!-- Header -->
 	<div class="flex items-center justify-between px-4 py-3 border-b bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
 		<div class="flex items-center gap-2">
 			<Icon icon="mdi:comment-text-multiple-outline" class="text-lg" />
@@ -108,7 +107,6 @@
 		</button>
 	</div>
 
-	<!-- Feed -->
 	<div class="flex-1 overflow-y-auto p-4 space-y-4">
 		{#if loading}
 			<div class="flex justify-center items-center h-full">
@@ -137,7 +135,6 @@
 							</div>
 						</div>
 						
-						<!-- Actions -->
 						<div class="flex opacity-0 group-hover:opacity-100 transition-opacity gap-1">
 							{#if $userStore?.id === comment.user_id}
 								<button onclick={() => deleteComment(comment.id)} class="p-1 hover:text-red-500 rounded hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors" title="Delete">
@@ -155,7 +152,6 @@
 		{/if}
 	</div>
 
-	<!-- Input Area -->
 	<div class="p-4 border-t bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
 		<div class="relative">
 			<textarea

src/lib/components/Editor.svelte

@@ -248,9 +248,6 @@
 						const msg = JSON.parse(data);
 						if (msg.type === 'init') {
 							lspInitialized = true;
-							
-							// Recreate the client because the backend started a completely new LSP process
-							// which requires a fresh 'initialize' handshake.
 							client = new LSPClient({
 								rootUri: msg.rootUri,
 								timeout: 10000,
@@ -262,9 +259,7 @@
 							});
 							return;
 						}
-					} catch (err) {
-						// Fallthrough
-					}
+					} catch (err) {}
 				}
 				
 				let processedData = data;
@@ -281,9 +276,7 @@
 				for (let h of lsHandlers) h(processedData);
 			};
 
-			lsSocket.onopen = () => {
-				// Waiting for init message from server
-			};
+			lsSocket.onopen = () => {};
 		}
 		
 		connectLsp();

src/lib/components/PresentationMode.svelte

@@ -14,7 +14,6 @@
 	let isDrawing = false;
 	let currentPath = $state<{x: number, y: number}[]>([]);
 	
-	// New feature states
 	let tool = $state<'pen' | 'highlighter' | 'eraser' | 'laser'>('laser');
 	let selectedColor = $state('#ef4444');
 	let showGrid = $state(false);
@@ -23,7 +22,6 @@
 	
 	const colors = ['#ef4444', '#f97316', '#eab308', '#22c55e', '#3b82f6', '#a855f7', '#ffffff', '#000000'];
 
-	// Map from slide index to image data url so we can persist drawings when switching slides
 	let drawings = $state<Record<number, string>>({});
 	let undoStack = $state<Record<number, string[]>>({});
 	let redoStack = $state<Record<number, string[]>>({});
@@ -41,7 +39,6 @@
 	}
 
 	onMount(() => {
-		// Find the preview svgs from the main DOM
 		const previewContainers = document.querySelectorAll('.preview-container svg');
 		const svgStrings: string[] = [];
 		previewContainers.forEach(container => {
@@ -49,7 +46,6 @@
 		});
 		svgs = svgStrings;
 
-		// Request fullscreen
 		const el = document.getElementById('presentation-container');
 		if (el && el.requestFullscreen) {
 			el.requestFullscreen().catch(err => console.error(err));
@@ -104,7 +100,6 @@
 
 	$effect(() => {
 		if (canvas && currentSlide !== undefined && !showGrid) {
-			// Resize canvas to match the svg
 			const svgEl = document.getElementById('presentation-svg')?.querySelector('svg');
 			if (svgEl) {
 				const rect = svgEl.getBoundingClientRect();
@@ -126,7 +121,6 @@
 					ctx.lineCap = 'round';
 					ctx.lineJoin = 'round';
 					
-					// Load previous drawing if any
 					if (drawings[currentSlide]) {
 						const img = new Image();
 						img.onload = () => {
@@ -302,7 +296,6 @@
 
 <div id="presentation-container" class="fixed inset-0 z-[100] flex flex-col items-center justify-center">
 	
-	<!-- Laser Pointer Overlay -->
 	{#if tool === 'laser' && laserPos.visible && !showGrid}
 		<div 
 			class="pointer-events-none fixed z-[150] w-3 h-3 bg-red-500 rounded-full shadow-[0_0_15px_5px_rgba(239,68,68,0.8)] -translate-x-1/2 -translate-y-1/2"
@@ -310,7 +303,6 @@
 		></div>
 	{/if}
 
-	<!-- Thumbnail Grid UI -->
 	{#if showGrid}
 		<div class="absolute inset-0 z-[50] p-8 overflow-y-auto">
 			<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-6 max-w-7xl mx-auto pb-24">
@@ -331,7 +323,6 @@
 		</div>
 	{/if}
 
-	<!-- Top toolbar -->
 	<div class="absolute top-0 inset-x-0 h-16 bg-gradient-to-b from-black/80 to-transparent flex items-center justify-between px-6 transition-opacity duration-300 z-[110] {uiVisible || showGrid ? 'opacity-100' : 'opacity-0'}">
 		<div class="flex items-center gap-4 bg-zinc-900/80 backdrop-blur-md px-4 py-2 rounded-xl border shadow-2xl border-[var(--theme-border)]">
 			<button class="p-2 rounded-lg transition-colors {tool === 'laser' ? 'bg-red-500/20 text-red-400' : 'text-gray-300 hover:bg-white/10'}" onclick={() => tool = 'laser'} title="Laser Pointer">
@@ -383,19 +374,16 @@
 		</div>
 	</div>
 
-	<!-- Slide Area -->
 	<div class="relative w-full h-full flex items-center justify-center p-8">
 		{#if svgs.length > 0 && !showGrid}
 			<div id="presentation-svg" class="relative max-h-full max-w-full shadow-2xl flex items-center justify-center bg-[var(--theme-bg)] text-[var(--theme-text)]">
 				{@html svgs[currentSlide]}
 				
-				<!-- Drawing Canvas Overlay -->
 				<canvas 
 					bind:this={canvas} 
 					class="absolute inset-0 z-10 touch-none pointer-events-none"
 				></canvas>
 
-				<!-- Active Stroke Canvas Overlay -->
 				<canvas 
 					bind:this={activeCanvas} 
 					class="absolute inset-0 z-20 touch-none {tool === 'laser' ? 'cursor-none' : 'cursor-crosshair'}"
@@ -413,7 +401,6 @@
 		{/if}
 	</div>
 
-	<!-- Bottom Navigation -->
 	{#if svgs.length > 0}
 		<div class="absolute bottom-6 flex items-center gap-4 bg-zinc-900/80 backdrop-blur-md px-6 py-3 rounded-full border shadow-2xl transition-opacity duration-300 z-[110] {uiVisible || showGrid ? 'opacity-100' : 'opacity-0'} border-[var(--theme-border)]">
 			{#if svgs.length > 1}

src/lib/components/ShareModal.svelte

@@ -5,15 +5,41 @@
     
     let { onClose, docId = undefined } = $props<{ onClose: () => void, docId?: string }>();
 
+    type CollaboratorView = { id: string; user_id: string; username: string; email: string; role: string; created_at: string };
+
     let link = $state('');
     let copied = $state(false);
     let role = $state('editor');
 
+    let collaborators = $state<CollaboratorView[]>([]);
+    let collabLoading = $state(false);
+    let removingId = $state<string | null>(null);
+
     let inviteEmail = $state('');
     let inviteRole = $state('editor');
     let inviteStatus = $state<'idle' | 'loading' | 'success' | 'error'>('idle');
     let inviteMessage = $state('');
     
+    async function loadCollaborators() {
+        if (!docId) return;
+        collabLoading = true;
+        try {
+            const res = await fetch(`/api/docs/${docId}/collaborators`);
+            if (res.ok) collaborators = await res.json();
+        } catch {}
+        collabLoading = false;
+    }
+
+    async function removeCollaborator(collab: CollaboratorView) {
+        if (!docId) return;
+        removingId = collab.id;
+        try {
+            const res = await fetch(`/api/docs/${docId}/collaborators/${collab.id}`, { method: 'DELETE' });
+            if (res.ok) collaborators = collaborators.filter(c => c.id !== collab.id);
+        } catch {}
+        removingId = null;
+    }
+
     async function inviteUser(e: Event) {
         e.preventDefault();
         if (!docId || !inviteEmail.trim()) return;
@@ -24,9 +50,7 @@
         try {
             const res = await fetch(`/api/docs/${docId}/invite`, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json'
-                },
+                headers: { 'Content-Type': 'application/json' },
                 body: JSON.stringify({ email: inviteEmail.trim(), role: inviteRole })
             });
 
@@ -34,25 +58,23 @@
                 inviteStatus = 'success';
                 inviteMessage = 'User invited successfully!';
                 inviteEmail = '';
+                loadCollaborators();
             } else {
                 const text = await res.text();
                 inviteStatus = 'error';
                 inviteMessage = text || 'Failed to invite user';
             }
         } catch (err) {
-            console.error(err);
             inviteStatus = 'error';
             inviteMessage = 'Network error occurred';
         }
     }
 
     onMount(() => {
-        
         const baseUrl = window.location.origin;
         const docUrl = docId ? `${baseUrl}/doc/${docId}` : window.location.href;
-        
-        
         link = `${docUrl}?role=${role}`;
+        loadCollaborators();
     });
     
     $effect(() => {
@@ -125,6 +147,44 @@
                 {/if}
             </div>
 
+            {#if collabLoading}
+                <div class="flex items-center gap-2 text-sm text-gray-400 dark:text-gray-500 py-1">
+                    <Icon icon="mdi:loading" class="animate-spin text-base" />
+                    Loading collaborators...
+                </div>
+            {:else if collaborators.length > 0}
+                <div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
+                <div class="space-y-2">
+                    <div class="text-sm font-semibold text-[var(--theme-text)]" style="color: var(--theme-text);">People with access</div>
+                    {#each collaborators as collab (collab.id)}
+                        <div class="flex items-center gap-3 py-1.5">
+                            <div class="w-8 h-8 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 text-sm font-bold flex-shrink-0">
+                                {collab.username[0].toUpperCase()}
+                            </div>
+                            <div class="flex-1 min-w-0">
+                                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{collab.username}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400 truncate">{collab.email}</p>
+                            </div>
+                            <span class="text-xs font-semibold px-2 py-0.5 rounded-full flex-shrink-0 {collab.role === 'editor' ? 'bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-400'}">
+                                {collab.role}
+                            </span>
+                            <button
+                                onclick={() => removeCollaborator(collab)}
+                                disabled={removingId === collab.id}
+                                title="Remove collaborator"
+                                class="flex-shrink-0 p-1 rounded text-gray-400 hover:text-red-500 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors disabled:opacity-40"
+                            >
+                                {#if removingId === collab.id}
+                                    <Icon icon="mdi:loading" class="text-base animate-spin" />
+                                {:else}
+                                    <Icon icon="mdi:close" class="text-base" />
+                                {/if}
+                            </button>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+
             <div class="h-px bg-gray-200 dark:bg-zinc-800/50"></div>
 
             <div class="space-y-3">

src/lib/components/Toolbar.svelte

@@ -414,7 +414,6 @@
 						{title}
 					</h1>
 
-					<!-- Sync status removed from here and moved to Footer -->
 				</div>
 
 				
@@ -716,7 +715,7 @@
 </header>
 
 {#if isShareModalOpen}
-	<ShareModal onClose={() => (isShareModalOpen = false)} />
+	<ShareModal {docId} onClose={() => (isShareModalOpen = false)} />
 {/if}
 
 {#if isPageSettingsOpen}

src/lib/components/VersionHistorySidebar.svelte

@@ -55,7 +55,6 @@
 </script>
 
 <div class="fixed right-0 top-0 bottom-0 w-80 bg-[var(--theme-bg)] backdrop-blur-xl border-l shadow-2xl flex flex-col z-[70] transform transition-transform duration-300 border-[var(--theme-border)]">
-	<!-- Header -->
 	<div class="flex items-center justify-between px-4 py-3 border-b bg-gray-50/50 bg-[var(--theme-bg)] text-[var(--theme-text)] border-[var(--theme-border)]">
 		<div class="flex items-center gap-2">
 			<Icon icon="mdi:history" class="text-lg" />
@@ -67,7 +66,6 @@
 		</button>
 	</div>
 
-	<!-- Feed -->
 	<div class="flex-1 overflow-y-auto p-4 space-y-4">
 		{#if loading}
 			<div class="flex justify-center items-center h-full">

src/lib/components/dashboard/CreateDocModal.svelte

@@ -13,9 +13,9 @@
     }
 </script>
 
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="bg-white/80 dark:bg-black/40 backdrop-blur-xl rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-doc-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-5 border-b border-gray-100 dark:border-white/10">
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
+    <div tabindex="-1" class="bg-[var(--theme-bg)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-doc-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
+        <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-white/10">
             <h2 id="create-doc-title" class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                 <Icon icon="mdi:file-document-plus" class="text-blue-500 text-xl" />
                 Create Document
@@ -33,7 +33,7 @@
                     type="text" 
                     required
                     bind:value={newDocTitle}
-                    class="w-full bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                    class="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                     placeholder="Untitled Document"
                 />
             </div>

src/lib/components/dashboard/CreateFolderModal.svelte

@@ -13,9 +13,9 @@
     }
 </script>
 
-<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
-    <div tabindex="-1" class="bg-white/80 dark:bg-black/40 backdrop-blur-xl rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-folder-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
-        <div class="flex justify-between items-center p-5 border-b border-gray-100 dark:border-white/10">
+<div class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4 animate-in fade-in duration-200" role="presentation" onclick={onClose}>
+    <div tabindex="-1" class="bg-[var(--theme-bg)] rounded-xl shadow-2xl border border-gray-200 dark:border-white/10 w-full max-w-md overflow-hidden" role="dialog" aria-modal="true" aria-labelledby="create-folder-title" onclick={(e) => e.stopPropagation()} onkeydown={(e) => { if (e.key === 'Escape') onClose(); }}>
+        <div class="flex justify-between items-center p-5 border-b border-gray-200 dark:border-white/10">
             <h2 id="create-folder-title" class="text-lg font-semibold text-gray-900 dark:text-white flex items-center gap-2">
                 <Icon icon="mdi:folder-plus" class="text-yellow-500 text-xl" />
                 Create Folder
@@ -33,7 +33,7 @@
                     type="text" 
                     required
                     bind:value={newFolderName}
-                    class="w-full bg-transparent border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                    class="w-full bg-black/5 dark:bg-white/5 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white text-sm rounded-lg px-4 py-2.5 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
                     placeholder="New Folder"
                 />
             </div>

src/lib/components/dashboard/DocCard.svelte

@@ -21,7 +21,6 @@
         } else {
             const button = e.currentTarget as HTMLElement;
             const rect = button.getBoundingClientRect();
-            // If there's less than 200px below the button, open upwards
             if (window.innerHeight - rect.bottom < 200) {
                 dropUp = true;
             } else {
@@ -70,21 +69,21 @@
                 </button>
                 
                 {#if activeMenu === doc.id}
-                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-white dark:bg-zinc-800 rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
-                        <button onclick={(e) => { e.stopPropagation(); openInfo(doc, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-2">
+                    <div class="absolute right-0 {dropUp ? 'bottom-full mb-1' : 'top-full mt-1'} w-48 bg-[var(--theme-bg)] rounded-xl shadow-xl border border-gray-200 dark:border-white/10 py-1 z-[100]">
+                        <button onclick={(e) => { e.stopPropagation(); openInfo(doc, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:information-outline" class="text-lg text-blue-500" />
                             View Info
                         </button>
-                        <button onclick={(e) => { e.stopPropagation(); openRename(doc.id, doc.title, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={(e) => { e.stopPropagation(); openRename(doc.id, doc.title, 'document'); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:pencil-outline" class="text-lg text-yellow-500" />
                             Rename
                         </button>
-                        <button onclick={(e) => { e.stopPropagation(); shareItem(doc); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-white/5 flex items-center gap-2">
+                        <button onclick={(e) => { e.stopPropagation(); shareItem(doc); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:share-variant-outline" class="text-lg text-green-500" />
                             Share
                         </button>
-                        <div class="h-px bg-gray-100 dark:bg-white/10 my-1"></div>
-                        <button onclick={(e) => { e.stopPropagation(); deleteDoc(doc.id, doc.title); }} class="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/10 flex items-center gap-2">
+                        <div class="h-px bg-gray-200 dark:bg-white/10 my-1"></div>
+                        <button onclick={(e) => { e.stopPropagation(); deleteDoc(doc.id, doc.title); }} class="w-full text-left px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-500/10 flex items-center gap-2">
                             <Icon icon="mdi:trash-can-outline" class="text-lg" />
                             Delete
                         </button>

src/lib/components/dashboard/Navbar.svelte

@@ -24,6 +24,9 @@
         <div class="h-6 w-px bg-gray-300 dark:bg-white/20"></div>
 
         
+        <a href="/api-docs" class="text-sm font-medium text-gray-600 hover:text-green-600 dark:text-gray-300 dark:hover:text-green-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="API Docs">
+            <Icon icon="mdi:api" class="text-xl" />
+        </a>
         <a href="https://typst.app/docs/" target="_blank" rel="noopener noreferrer" class="text-sm font-medium text-gray-600 hover:text-blue-500 dark:text-gray-300 dark:hover:text-blue-400 transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-3 py-2 rounded-lg flex items-center gap-2 border border-transparent dark:border-white/10" title="Typst Docs">
             <Icon icon="mdi:book-open-page-variant-outline" class="text-xl" />
         </a>

src/routes/api-docs/+page.svelte

@@ -0,0 +1,426 @@
+<script lang="ts">
+    import { goto } from '$app/navigation';
+    import { page } from '$app/stores';
+    import Icon from '@iconify/svelte';
+    import Footer from '$lib/components/Footer.svelte';
+    import hljs from 'highlight.js/lib/core';
+    import bash from 'highlight.js/lib/languages/bash';
+    import javascript from 'highlight.js/lib/languages/javascript';
+    import python from 'highlight.js/lib/languages/python';
+    import json from 'highlight.js/lib/languages/json';
+
+    hljs.registerLanguage('bash', bash);
+    hljs.registerLanguage('javascript', javascript);
+    hljs.registerLanguage('python', python);
+    hljs.registerLanguage('json', json);
+
+    let activeSection = $state('overview');
+    let copiedSnippet = $state<string | null>(null);
+
+    let baseUrl = $derived($page.url.origin);
+
+    let curlPng = $derived(`curl -X POST ${baseUrl}/v1/render \\
+  -H "Authorization: Bearer td_your_api_key_here" \\
+  -H "Content-Type: application/json" \\
+  -d '{"code":"#set page(width:200pt,height:80pt)\\nHello, *World*!","format":"png"}' \\
+  --output hello.png`);
+
+    let curlPdf = $derived(`curl -X POST ${baseUrl}/v1/render \\
+  -H "Authorization: Bearer td_your_api_key_here" \\
+  -H "Content-Type: application/json" \\
+  -d '{"code":"= My Report\\n\\nSome body text.","format":"pdf"}' \\
+  --output report.pdf`);
+
+    let jsExample = $derived(`const response = await fetch('${baseUrl}/v1/render', {
+  method: 'POST',
+  headers: {
+    'Authorization': 'Bearer td_your_api_key_here',
+    'Content-Type': 'application/json',
+  },
+  body: JSON.stringify({
+    code: '#set page(width: 200pt, height: 80pt)\\nHello, *World*!',
+    format: 'png',
+  }),
+});
+
+if (!response.ok) throw new Error(await response.text());
+
+const blob = await response.blob();
+document.querySelector('img').src = URL.createObjectURL(blob);`);
+
+    let pythonExample = $derived(`import httpx
+
+response = httpx.post(
+    "${baseUrl}/v1/render",
+    headers={"Authorization": "Bearer td_your_api_key_here"},
+    json={
+        "code": "= My Report\\\\n\\\\nSome body text.",
+        "format": "pdf",
+    },
+)
+response.raise_for_status()
+
+with open("report.pdf", "wb") as f:
+    f.write(response.content)`);
+
+    let filesExample = $derived(`import base64, httpx
+
+with open("logo.png", "rb") as f:
+    logo_b64 = base64.b64encode(f.read()).decode()
+
+response = httpx.post(
+    "${baseUrl}/v1/render",
+    headers={"Authorization": "Bearer td_your_api_key_here"},
+    json={
+        "code": """
+#set page(width: 300pt, height: 200pt)
+#image("logo.png", width: 80pt)
+= My Report
+Some body text.
+""",
+        "format": "png",
+        "files": [{"name": "logo.png", "data": logo_b64}],
+    },
+)
+response.raise_for_status()
+with open("output.png", "wb") as f:
+    f.write(response.content)`);
+
+    const requestSchemaJson = `{
+  "code":   "string",          // Typst markup (required)
+  "format": "png" | "pdf",    // Output format (required)
+  "files":  [                  // Optional inline assets
+    {
+      "name": "string",        // Filename used in Typst code
+      "data": "string"         // Base64-encoded file content
+    }
+  ]
+}`;
+
+    // Highlighted versions (derived so they update if baseUrl changes)
+    let hCurlPng    = $derived(hljs.highlight(curlPng,          { language: 'bash'       }).value);
+    let hCurlPdf    = $derived(hljs.highlight(curlPdf,          { language: 'bash'       }).value);
+    let hJs         = $derived(hljs.highlight(jsExample,        { language: 'javascript' }).value);
+    let hPython     = $derived(hljs.highlight(pythonExample,    { language: 'python'     }).value);
+    let hFiles      = $derived(hljs.highlight(filesExample,     { language: 'python'     }).value);
+    let hSchema     = $derived(hljs.highlight(requestSchemaJson,{ language: 'json'       }).value);
+
+    async function copy(id: string, text: string) {
+        await navigator.clipboard.writeText(text);
+        copiedSnippet = id;
+        setTimeout(() => copiedSnippet = null, 2000);
+    }
+
+    const navSections = [
+        { id: 'overview',    label: 'Overview',        icon: 'mdi:book-open-outline'      },
+        { id: 'auth',        label: 'Authentication',  icon: 'mdi:key-outline'            },
+        { id: 'endpoint',    label: 'POST /v1/render', icon: 'mdi:api'                    },
+        { id: 'examples',    label: 'Examples',        icon: 'mdi:code-braces'            },
+        { id: 'rate-limits', label: 'Rate Limits',     icon: 'mdi:speedometer'            },
+        { id: 'errors',      label: 'Error Reference', icon: 'mdi:alert-circle-outline'   },
+    ];
+</script>
+
+<svelte:head>
+    <title>API Docs - TypstDrive</title>
+    <meta name="description" content="TypstDrive Render API documentation." />
+</svelte:head>
+
+<style>
+    :global(.hljs) {
+        color: #abb2bf;
+        background: #1e2127;
+    }
+    :global(.hljs-comment), :global(.hljs-quote) { color: #5c6370; font-style: italic; }
+    :global(.hljs-doctag), :global(.hljs-keyword), :global(.hljs-formula) { color: #c678dd; }
+    :global(.hljs-section), :global(.hljs-name), :global(.hljs-selector-tag),
+    :global(.hljs-deletion), :global(.hljs-subst) { color: #e06c75; }
+    :global(.hljs-literal) { color: #56b6c2; }
+    :global(.hljs-string), :global(.hljs-regexp), :global(.hljs-addition),
+    :global(.hljs-attribute), :global(.hljs-meta .hljs-string) { color: #98c379; }
+    :global(.hljs-attr), :global(.hljs-variable), :global(.hljs-template-variable),
+    :global(.hljs-type), :global(.hljs-selector-class), :global(.hljs-selector-attr),
+    :global(.hljs-selector-pseudo), :global(.hljs-number) { color: #d19a66; }
+    :global(.hljs-symbol), :global(.hljs-bullet), :global(.hljs-link),
+    :global(.hljs-meta), :global(.hljs-selector-id), :global(.hljs-title) { color: #61aeee; }
+    :global(.hljs-built_in), :global(.hljs-title.class_), :global(.hljs-class .hljs-title) { color: #e6c07b; }
+    :global(.hljs-emphasis) { font-style: italic; }
+    :global(.hljs-strong) { font-weight: bold; }
+    :global(.hljs-link) { text-decoration: underline; }
+</style>
+
+<div class="min-h-screen flex flex-col">
+    <nav class="bg-[var(--theme-bg)] shadow-sm border-b border-gray-200 dark:border-white/10 px-6 py-4 flex justify-between items-center sticky top-0 z-10 transition-colors duration-200 flex-shrink-0">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-white flex items-center gap-3">
+            <Icon icon="mdi:api" class="text-blue-600 dark:text-blue-400 text-3xl" />
+            API Reference
+        </h1>
+        <button onclick={() => goto('/dashboard')} class="text-sm font-medium text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white transition-colors bg-gray-100 hover:bg-gray-200 dark:bg-white/5 dark:hover:bg-white/10 px-4 py-2 rounded-lg flex items-center gap-2">
+            <Icon icon="mdi:arrow-left" class="text-lg" />
+            Back to Dashboard
+        </button>
+    </nav>
+
+    <div class="flex flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 gap-8">
+        <aside class="w-56 flex-shrink-0 hidden md:block">
+            <nav class="sticky top-24 space-y-1">
+                {#each navSections as section}
+                    <button
+                        onclick={() => activeSection = section.id}
+                        class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium transition-all duration-150 {activeSection === section.id
+                            ? 'bg-blue-600 text-white shadow-sm'
+                            : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5'}"
+                    >
+                        <Icon icon={section.icon} class="text-lg flex-shrink-0" />
+                        {section.label}
+                    </button>
+                {/each}
+                <div class="pt-4 mt-4 border-t border-gray-200 dark:border-white/10">
+                    <a href="/settings" class="w-full flex items-center gap-3 px-4 py-2.5 rounded-xl text-sm font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-white/5 transition-all duration-150">
+                        <Icon icon="mdi:key-plus" class="text-lg flex-shrink-0" />
+                        Manage API Keys
+                    </a>
+                </div>
+            </nav>
+        </aside>
+
+        <main class="flex-1 min-w-0 space-y-6 pb-16">
+
+            <div class="md:hidden flex gap-2 flex-wrap">
+                {#each navSections as section}
+                    <button
+                        onclick={() => activeSection = section.id}
+                        class="px-3 py-1.5 rounded-lg text-xs font-medium transition-colors {activeSection === section.id ? 'bg-blue-600 text-white' : 'bg-gray-100 dark:bg-white/10 text-gray-600 dark:text-gray-300'}"
+                    >
+                        {section.label}
+                    </button>
+                {/each}
+            </div>
+
+            {#if activeSection === 'overview'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <Icon icon="mdi:book-open-outline" class="text-2xl text-blue-500" />
+                        Overview
+                    </h2>
+                    <p class="text-gray-600 dark:text-gray-300 mb-6">
+                        The TypstDrive Render API lets you compile Typst markup into PNG images or PDF documents programmatically.
+                        Authenticate with an API key and POST Typst code — get back binary output.
+                    </p>
+                    <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-6">
+                        <div class="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-800/30">
+                            <Icon icon="mdi:image-outline" class="text-2xl text-blue-500 mb-2" />
+                            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">PNG output</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">First page rendered at 2× scale</p>
+                        </div>
+                        <div class="p-4 rounded-xl bg-purple-50 dark:bg-purple-900/10 border border-purple-100 dark:border-purple-800/30">
+                            <Icon icon="mdi:file-pdf-box" class="text-2xl text-purple-500 mb-2" />
+                            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">PDF output</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Full multi-page PDF document</p>
+                        </div>
+                        <div class="p-4 rounded-xl bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30">
+                            <Icon icon="mdi:lightning-bolt" class="text-2xl text-green-500 mb-2" />
+                            <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">Cached results</p>
+                            <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">Identical inputs skip recompilation</p>
+                        </div>
+                    </div>
+                    <div class="bg-gray-50 dark:bg-black/30 rounded-xl p-4 border border-gray-200 dark:border-white/10">
+                        <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">Base URL</p>
+                        <code class="font-mono text-sm text-blue-600 dark:text-blue-400">{baseUrl}</code>
+                    </div>
+                </div>
+            {/if}
+
+            {#if activeSection === 'auth'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-4 flex items-center gap-2">
+                        <Icon icon="mdi:key-outline" class="text-2xl text-blue-500" />
+                        Authentication
+                    </h2>
+                    <p class="text-gray-600 dark:text-gray-300 mb-6">
+                        All requests must include an API key in the <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">Authorization</code> header.
+                    </p>
+                    <div class="space-y-4">
+                        <div>
+                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">Header format</p>
+                            <pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-3 text-xs font-mono leading-relaxed rounded-xl">{@html hljs.highlight('Authorization: Bearer td_your_api_key_here', { language: 'bash' }).value}</code></pre>
+                        </div>
+                        <div class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 flex gap-3">
+                            <Icon icon="mdi:information-outline" class="text-amber-500 text-xl flex-shrink-0 mt-0.5" />
+                            <div class="text-sm text-amber-800 dark:text-amber-300">
+                                <p class="font-semibold mb-1">Keep your keys secret</p>
+                                <p>API keys grant access to your account's uploaded files during compilation. Never expose them in client-side code or commit them to version control.</p>
+                            </div>
+                        </div>
+                        <div>
+                            <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Managing keys</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400">
+                                Create, regenerate, and revoke keys in
+                                <a href="/settings" class="text-blue-600 dark:text-blue-400 hover:underline">Settings → API Keys</a>.
+                                The full key is shown only once at creation time.
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            {/if}
+
+            {#if activeSection === 'endpoint'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8 space-y-6">
+                    <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                        <Icon icon="mdi:api" class="text-2xl text-blue-500" />
+                        POST /v1/render
+                    </h2>
+
+                    <div>
+                        <div class="flex items-center gap-2 mb-3">
+                            <span class="px-2 py-0.5 text-xs font-bold bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 rounded-md">POST</span>
+                            <code class="font-mono text-sm text-gray-800 dark:text-gray-200">/v1/render</code>
+                        </div>
+                        <p class="text-sm text-gray-600 dark:text-gray-400">
+                            Compile Typst markup and return rendered binary output as PNG or PDF.
+                            Results are cached for 1 hour — identical inputs return the cached result without recompiling.
+                        </p>
+                    </div>
+
+                    <div class="h-px bg-gray-200 dark:bg-white/10"></div>
+
+                    <div>
+                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Request headers</p>
+                        <div class="overflow-x-auto">
+                            <table class="w-full text-sm">
+                                <thead>
+                                    <tr class="border-b border-gray-200 dark:border-white/10">
+                                        <th class="text-left py-2 pr-4 font-semibold text-gray-700 dark:text-gray-300 w-40">Header</th>
+                                        <th class="text-left py-2 font-semibold text-gray-700 dark:text-gray-300">Value</th>
+                                    </tr>
+                                </thead>
+                                <tbody class="text-gray-600 dark:text-gray-400">
+                                    <tr class="border-b border-gray-100 dark:border-white/5">
+                                        <td class="py-2 pr-4 font-mono text-xs">Authorization</td>
+                                        <td class="py-2"><code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">Bearer &lt;api-key&gt;</code> — required</td>
+                                    </tr>
+                                    <tr>
+                                        <td class="py-2 pr-4 font-mono text-xs">Content-Type</td>
+                                        <td class="py-2"><code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">application/json</code> — required</td>
+                                    </tr>
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+
+                    <div>
+                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Request body</p>
+                        <pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-4 text-xs font-mono leading-relaxed rounded-xl">{@html hSchema}</code></pre>
+                    </div>
+
+                    <div>
+                        <p class="text-sm font-bold text-gray-800 dark:text-gray-200 mb-3">Response</p>
+                        <div class="p-3 rounded-lg bg-green-50 dark:bg-green-900/10 border border-green-100 dark:border-green-800/30 text-sm">
+                            <span class="font-mono text-xs font-bold text-green-700 dark:text-green-400">200 OK</span>
+                            <span class="text-gray-600 dark:text-gray-400 ml-2">Binary body with <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">Content-Type: image/png</code> or <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-2 rounded">application/pdf</code></span>
+                        </div>
+                    </div>
+
+                    <div class="p-4 rounded-xl bg-blue-50 dark:bg-blue-900/10 border border-blue-100 dark:border-blue-800/30 text-sm text-blue-800 dark:text-blue-300">
+                        <p class="font-semibold mb-1 flex items-center gap-2"><Icon icon="mdi:folder-account-outline" class="text-base" /> Account files available automatically</p>
+                        <p>Files uploaded to your TypstDrive account are available by filename inside your Typst code. Pass additional files inline via the <code class="font-mono text-xs bg-blue-100 dark:bg-blue-800/40 px-1 rounded">files</code> array to supplement or override them.</p>
+                    </div>
+                </div>
+            {/if}
+
+            {#if activeSection === 'examples'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8 space-y-8">
+                    <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                        <Icon icon="mdi:code-braces" class="text-2xl text-blue-500" />
+                        Examples
+                    </h2>
+
+                    {#each [
+                        { id: 'curl-png', label: 'cURL — render PNG',         icon: 'mdi:bash',                iconColor: 'text-gray-400', code: hCurlPng,  raw: curlPng     },
+                        { id: 'curl-pdf', label: 'cURL — render PDF',         icon: 'mdi:bash',                iconColor: 'text-gray-400', code: hCurlPdf,  raw: curlPdf     },
+                        { id: 'js',       label: 'JavaScript / TypeScript',   icon: 'mdi:language-javascript', iconColor: 'text-yellow-400', code: hJs,      raw: jsExample   },
+                        { id: 'python',   label: 'Python (httpx)',             icon: 'mdi:language-python',     iconColor: 'text-blue-400',  code: hPython,  raw: pythonExample},
+                        { id: 'files',    label: 'Python — with inline files', icon: 'mdi:file-image-outline',  iconColor: 'text-purple-400', code: hFiles,  raw: filesExample },
+                    ] as ex}
+                        <div>
+                            <div class="flex items-center justify-between mb-2">
+                                <p class="text-sm font-bold text-gray-800 dark:text-gray-200 flex items-center gap-2">
+                                    <Icon icon={ex.icon} class="text-lg {ex.iconColor}" />
+                                    {ex.label}
+                                </p>
+                                <button onclick={() => copy(ex.id, ex.raw)} class="flex items-center gap-1 text-xs text-gray-500 dark:text-gray-400 hover:text-blue-600 dark:hover:text-blue-400 transition-colors px-2 py-1 rounded-md hover:bg-gray-100 dark:hover:bg-white/10">
+                                    <Icon icon={copiedSnippet === ex.id ? 'mdi:check' : 'mdi:content-copy'} class="text-sm" />
+                                    {copiedSnippet === ex.id ? 'Copied!' : 'Copy'}
+                                </button>
+                            </div>
+                            <pre class="rounded-xl border border-gray-700 overflow-x-auto"><code class="hljs block px-4 py-4 text-xs font-mono leading-relaxed rounded-xl">{@html ex.code}</code></pre>
+                        </div>
+                    {/each}
+                </div>
+            {/if}
+
+            {#if activeSection === 'rate-limits'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
+                        <Icon icon="mdi:speedometer" class="text-2xl text-blue-500" />
+                        Rate Limits
+                    </h2>
+                    <div class="grid grid-cols-1 sm:grid-cols-2 gap-4 mb-6">
+                        <div class="p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
+                            <p class="text-2xl font-bold text-gray-900 dark:text-white">60</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">requests / minute per key</p>
+                        </div>
+                        <div class="p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
+                            <p class="text-2xl font-bold text-gray-900 dark:text-white">10</p>
+                            <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">API keys per account</p>
+                        </div>
+                    </div>
+                    <div class="p-4 rounded-xl bg-amber-50 dark:bg-amber-900/10 border border-amber-200 dark:border-amber-700/30 text-sm text-amber-800 dark:text-amber-300 mb-4">
+                        <p class="font-semibold mb-1">Caching saves quota</p>
+                        <p>Identical inputs (same code + files) skip recompilation and are served from cache for up to 1 hour. Cached responses return instantly and do not consume your rate limit.</p>
+                    </div>
+                    <div>
+                        <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-2">When exceeded</p>
+                        <div class="p-3 rounded-lg bg-red-50 dark:bg-red-900/10 border border-red-100 dark:border-red-800/30 text-sm">
+                            <code class="font-mono text-xs font-bold text-red-700 dark:text-red-400">429 Too Many Requests</code>
+                            <span class="text-gray-600 dark:text-gray-400 ml-2">— wait for the current 60-second window to reset.</span>
+                        </div>
+                    </div>
+                </div>
+            {/if}
+
+            {#if activeSection === 'errors'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 p-6 sm:p-8">
+                    <h2 class="text-xl font-bold text-gray-900 dark:text-white mb-6 flex items-center gap-2">
+                        <Icon icon="mdi:alert-circle-outline" class="text-2xl text-blue-500" />
+                        Error Reference
+                    </h2>
+                    <div class="space-y-3">
+                        {#each [
+                            { code: '400', name: 'Bad Request',           desc: 'Invalid format value, empty code, or malformed JSON body.'                              },
+                            { code: '401', name: 'Unauthorized',          desc: 'Missing or invalid Authorization header, or unknown API key.'                           },
+                            { code: '422', name: 'Unprocessable Entity',  desc: 'Your Typst code compiled with errors. Fix the markup and retry.'                        },
+                            { code: '429', name: 'Too Many Requests',     desc: 'Rate limit exceeded. Wait for the current 60-second window to reset.'                   },
+                            { code: '500', name: 'Internal Server Error', desc: 'Unexpected server error. Try again after a short delay.'                                },
+                        ] as err}
+                            <div class="flex items-start gap-4 p-4 rounded-xl border border-gray-100 dark:border-white/10 bg-gray-50 dark:bg-black/20">
+                                <code class="font-mono text-sm font-bold text-gray-800 dark:text-gray-200 flex-shrink-0 w-8">{err.code}</code>
+                                <div>
+                                    <p class="text-sm font-semibold text-gray-800 dark:text-gray-200">{err.name}</p>
+                                    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{err.desc}</p>
+                                </div>
+                            </div>
+                        {/each}
+                    </div>
+                    <div class="mt-6 p-4 rounded-xl bg-gray-50 dark:bg-black/30 border border-gray-200 dark:border-white/10">
+                        <p class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-1">Error body</p>
+                        <p class="text-sm text-gray-500 dark:text-gray-400">Error responses return plain text describing the issue — no JSON envelope.</p>
+                    </div>
+                </div>
+            {/if}
+
+        </main>
+    </div>
+
+    <Footer />
+</div>

src/routes/dashboard/+page.svelte

@@ -161,6 +161,7 @@
     }
 
     function navigateToBreadcrumb(index: number) {
+        inSharedDrive = false;
         if (index === -1) {
             folderPath = [];
             currentFolderId = null;
@@ -314,6 +315,26 @@
         }
     }
 
+    let inSharedDrive = $state(false);
+    let sharedDocs = $state<any[]>([]);
+    let sharedDocsLoading = $state(false);
+
+    async function loadSharedDocs() {
+        sharedDocsLoading = true;
+        try {
+            const res = await fetch('/api/docs/shared');
+            if (res.ok) sharedDocs = await res.json();
+        } catch {}
+        sharedDocsLoading = false;
+    }
+
+    function enterSharedDrive() {
+        inSharedDrive = true;
+        folderPath = [];
+        currentFolderId = null;
+        loadSharedDocs();
+    }
+
     let showShareModal = $state(false);
     let shareTarget = $state<any>(null);
 
@@ -337,7 +358,6 @@
             try {
                 data = JSON.parse(dataString);
             } catch (err) {
-                // For backward compatibility if it's just an id
                 data = { type: 'document', id: dataString };
             }
 
@@ -389,21 +409,21 @@
                 </button>
 
                 {#if showPlusDropdown}
-                    <div class="absolute right-0 mt-2 w-48 bg-white dark:bg-zinc-800 rounded-lg shadow-xl border border-gray-100 dark:border-zinc-700 py-1 z-20">
-                        <button onclick={openCreateModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-700 flex items-center gap-2">
+                    <div class="absolute right-0 mt-2 w-48 bg-[var(--theme-bg)] rounded-lg shadow-xl border border-gray-200 dark:border-white/10 py-1 z-20">
+                        <button onclick={openCreateModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:file-document-plus" class="text-lg text-blue-500" />
                             New Document
                         </button>
-                        <button onclick={openCreateFolderModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-700 flex items-center gap-2">
+                        <button onclick={openCreateFolderModal} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:folder-plus" class="text-lg text-yellow-500" />
                             New Folder
                         </button>
-                        <button onclick={() => { showPlusDropdown = false; fileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-700 flex items-center gap-2">
+                        <button onclick={() => { showPlusDropdown = false; fileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2">
                             <Icon icon="mdi:upload" class="text-lg text-green-500" />
                             Upload File
                         </button>
-                        <div class="h-px bg-gray-100 dark:bg-zinc-700 my-1"></div>
-                        <button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-zinc-700 flex items-center gap-2" disabled={isImporting}>
+                        <div class="h-px bg-gray-200 dark:bg-white/10 my-1"></div>
+                        <button onclick={() => { showPlusDropdown = false; importFileInput?.click(); }} class="w-full text-left px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-black/5 dark:hover:bg-white/5 flex items-center gap-2" disabled={isImporting}>
                             {#if isImporting}
                                 <Icon icon="mdi:loading" class="text-lg text-purple-500 animate-spin" />
                                 Importing...
@@ -429,48 +449,86 @@
                 class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === -1 ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
                 <Icon icon="mdi:home" class="text-lg inline-block pb-0.5" /> Home
             </button>
-            {#each folderPath as folder, index}
+            {#if inSharedDrive}
                 <Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
-                <button 
-                    onclick={() => navigateToBreadcrumb(index)} 
-                    ondragover={(e) => { e.preventDefault(); dragOverBreadcrumbIndex = index; }}
-                    ondragleave={() => dragOverBreadcrumbIndex = null}
-                    ondrop={(e) => handleDrop(e, folder.id)}
-                    class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === index ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
-                    {folder.name}
-                </button>
-            {/each}
+                <span class="font-medium text-purple-600 dark:text-purple-400 flex items-center gap-1 px-2 py-1">
+                    <Icon icon="mdi:folder-account" class="text-base" /> Shared with me
+                </span>
+            {:else}
+                {#each folderPath as folder, index}
+                    <Icon icon="mdi:chevron-right" class="text-lg text-gray-400" />
+                    <button
+                        onclick={() => navigateToBreadcrumb(index)}
+                        ondragover={(e) => { e.preventDefault(); dragOverBreadcrumbIndex = index; }}
+                        ondragleave={() => dragOverBreadcrumbIndex = null}
+                        ondrop={(e) => handleDrop(e, folder.id)}
+                        class="hover:text-blue-600 dark:hover:text-blue-400 font-medium transition-colors px-2 py-1 rounded {dragOverBreadcrumbIndex === index ? 'bg-blue-100 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300' : ''}">
+                        {folder.name}
+                    </button>
+                {/each}
+            {/if}
         </div>
 
-        {#if loading}
+        {#if inSharedDrive}
+            {#if sharedDocsLoading}
+                <div class="min-h-[50vh] flex items-center justify-center">
+                    <div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
+                        <Icon icon="mdi:loading" class="text-4xl animate-spin" />
+                        <p class="text-lg font-medium">Loading shared documents...</p>
+                    </div>
+                </div>
+            {:else if sharedDocs.length === 0}
+                <div class="min-h-[50vh] flex items-center justify-center">
+                    <div class="text-center p-12 bg-white/50 dark:bg-black/20 rounded-2xl shadow-sm border border-gray-200 dark:border-white/10 max-w-md w-full">
+                        <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-purple-100/50 dark:bg-purple-900/20 text-purple-600 dark:text-purple-400 mb-6">
+                            <Icon icon="mdi:folder-account-outline" class="text-4xl" />
+                        </div>
+                        <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No shared documents</h3>
+                        <p class="text-gray-500 dark:text-gray-400">Documents shared with you by other users will appear here.</p>
+                    </div>
+                </div>
+            {:else}
+                <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+                    {#each sharedDocs as doc}
+                        <DocCard
+                            {doc}
+                            {activeMenu}
+                            setActiveMenu={(id) => activeMenu = id}
+                            {openInfo}
+                            openRename={() => {}}
+                            {shareItem}
+                            deleteDoc={() => {}}
+                        />
+                    {/each}
+                </div>
+            {/if}
+
+        {:else if loading}
             <div class="min-h-[50vh] flex items-center justify-center">
                 <div class="flex flex-col items-center gap-4 text-gray-500 dark:text-gray-400 animate-pulse">
                     <Icon icon="mdi:loading" class="text-4xl animate-spin" />
                     <p class="text-lg font-medium">Loading your workspace...</p>
                 </div>
             </div>
-        {:else if documents.length === 0 && folders.length === 0 && files.length === 0 && currentFolderId === null}
-            <div class="min-h-[50vh] flex items-center justify-center">
-                <div class="text-center p-12 bg-white/50 dark:bg-black/20 backdrop-blur-sm rounded-2xl shadow-sm border border-gray-200 dark:border-white/10 max-w-md w-full">
-                    <div class="inline-flex items-center justify-center w-20 h-20 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 mb-6">
-                        <Icon icon="mdi:file-document-outline" class="text-4xl" />
-                    </div>
-                    <h3 class="text-xl font-bold text-gray-900 dark:text-white mb-2">No documents yet</h3>
-                    <p class="text-gray-500 dark:text-gray-400 mb-8">Get started by creating your first Typst document. It's fast, collaborative, and beautiful.</p>
-                    <button onclick={openCreateModal} class="w-full flex items-center justify-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-6 py-3 rounded-lg shadow-sm text-base font-medium transition-colors">
-                        <Icon icon="mdi:plus" class="text-xl" />
-                        Create Document
-                    </button>
-                </div>
-            </div>
         {:else}
-            
-            {#if folders.length > 0}
+            {#if currentFolderId === null || folders.length > 0}
                 <div class="mb-8">
-                    <div class="px-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300">
-                        Folders
-                    </div>
+                    <div class="px-2 py-3 text-sm font-semibold text-gray-700 dark:text-gray-300">Folders</div>
                     <div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                        {#if currentFolderId === null}
+                            <div
+                                class="flex flex-row items-center p-3 bg-white/50 dark:bg-black/20 border border-gray-200 dark:border-white/10 rounded-xl shadow-sm hover:shadow-md cursor-pointer group transition-all duration-200 hover:-translate-y-0.5 hover:border-purple-300 dark:hover:border-purple-500/30"
+                                role="button"
+                                tabindex="0"
+                                onclick={enterSharedDrive}
+                                onkeydown={(e) => e.key === 'Enter' && enterSharedDrive()}
+                            >
+                                <div class="flex items-center justify-center w-10 h-10 bg-purple-50 dark:bg-purple-500/10 rounded-lg group-hover:scale-105 transition-transform pointer-events-none shrink-0 mr-3">
+                                    <Icon icon="mdi:folder-account" class="text-2xl text-purple-500" />
+                                </div>
+                                <span class="font-medium text-gray-900 dark:text-white text-sm truncate w-full pointer-events-none">Shared with me</span>
+                            </div>
+                        {/if}
                         {#each folders as folder}
                             <FolderRow
                                 {folder}
@@ -485,7 +543,6 @@
                 </div>
             {/if}
 
-            
             {#if documents.length > 0 || files.length > 0}
                 <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
                     {#each documents as doc}
@@ -499,17 +556,28 @@
                             {deleteDoc}
                         />
                     {/each}
-
                     {#each files as file}
                         <FileCard {file} {deleteFile} />
                     {/each}
                 </div>
             {/if}
 
-            {#if documents.length === 0 && folders.length === 0 && files.length === 0}
-                <div class="min-h-[50vh] flex items-center justify-center">
+            {#if documents.length === 0 && files.length === 0 && currentFolderId !== null && folders.length === 0}
+                <div class="min-h-[30vh] flex items-center justify-center">
                     <p class="text-gray-500 dark:text-gray-400">This folder is empty.</p>
                 </div>
+            {:else if documents.length === 0 && files.length === 0 && folders.length === 0 && currentFolderId === null}
+                <div class="text-center py-12">
+                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100/50 dark:bg-blue-900/20 text-blue-600 dark:text-blue-400 mb-4">
+                        <Icon icon="mdi:file-document-outline" class="text-3xl" />
+                    </div>
+                    <h3 class="text-lg font-bold text-gray-900 dark:text-white mb-1">No documents yet</h3>
+                    <p class="text-gray-500 dark:text-gray-400 mb-6 text-sm">Create your first Typst document to get started.</p>
+                    <button onclick={openCreateModal} class="inline-flex items-center gap-2 bg-blue-600 hover:bg-blue-700 text-white px-5 py-2.5 rounded-lg shadow-sm text-sm font-medium transition-colors">
+                        <Icon icon="mdi:plus" class="text-lg" />
+                        Create Document
+                    </button>
+                </div>
             {/if}
         {/if}
 

src/routes/doc/[id]/+page.svelte

@@ -24,7 +24,6 @@
 		const view = $editorViewStore;
 		if (!view) return;
 		
-		// Ensure context menu only triggers on editor
 		const target = e.target as HTMLElement;
 		if (!target.closest('.cm-editor') && !target.closest('.cm-content')) return;
 
@@ -148,7 +147,6 @@
 	<DocFooter />
 </div>
 
-<!-- Custom Context Menu for Editor -->
 {#if contextMenu.show}
 	<div 
 		class="fixed z-[9999] bg-[var(--theme-bg)] text-[var(--theme-text)] rounded-lg shadow-xl border border-[var(--theme-border)] py-1 min-w-[200px] overflow-hidden" 

src/routes/register/+page.svelte

@@ -36,7 +36,6 @@
                 return;
             }
             
-            // Auto login after successful registration using email
             const loginRes = await fetch('/api/auth/login', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
@@ -65,7 +64,6 @@
 
 <div class="min-h-screen flex flex-col relative overflow-hidden">
     <div class="flex-grow flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 relative z-10">
-        <!-- Background decorative elements -->
         <div class="absolute -top-40 right-20 w-96 h-96 bg-emerald-400/20 dark:bg-emerald-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
         <div class="absolute top-40 -left-20 w-96 h-96 bg-teal-400/20 dark:bg-teal-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>
         <div class="absolute -bottom-40 right-40 w-96 h-96 bg-blue-400/20 dark:bg-blue-600/10 rounded-full blur-3xl mix-blend-multiply z-0"></div>

src/routes/settings/+page.svelte

@@ -1,10 +1,12 @@
 <script lang="ts">
     import { goto } from '$app/navigation';
-    import { onMount } from 'svelte';
+    import { onMount, onDestroy } from 'svelte';
     import { userStore } from '$lib/ts/auth';
     import Icon from '@iconify/svelte';
     import ThemePicker from '$lib/components/ThemePicker.svelte';
     import Footer from '$lib/components/Footer.svelte';
+    import { Chart, LineController, LineElement, PointElement, CategoryScale, LinearScale, Filler, Tooltip } from 'chart.js';
+    Chart.register(LineController, LineElement, PointElement, CategoryScale, LinearScale, Filler, Tooltip);
 
     type AdminUser = {
         id: string;
@@ -14,6 +16,15 @@
         created_at: string;
     };
 
+    type ApiKey = {
+        id: string;
+        name: string;
+        key_prefix: string;
+        created_at: string;
+        last_used_at: string | null;
+        rate_limit: number;
+    };
+
     let activeSection = $state('account');
 
     let username = $state('');
@@ -37,6 +48,28 @@
     let deletingUserId = $state<string | null>(null);
     let confirmDeleteId = $state<string | null>(null);
 
+    let apiKeys = $state<ApiKey[]>([]);
+    let apiKeysLoading = $state(false);
+    let apiKeysError = $state('');
+    let showCreateKeyForm = $state(false);
+    let createKeyName = $state('');
+    let createKeyError = $state('');
+    let createKeyLoading = $state(false);
+    let newlyCreatedKey = $state<{ key: string; name: string } | null>(null);
+    let confirmDeleteKeyId = $state<string | null>(null);
+    let deletingKeyId = $state<string | null>(null);
+    let copiedKey = $state(false);
+    let confirmRegenerateId = $state<string | null>(null);
+    let regeneratingKeyId = $state<string | null>(null);
+
+    type UsagePoint = { date: string; count: number };
+    type UsagePeriod = '1hr' | '1day' | '1week';
+    let usageData = $state<UsagePoint[]>([]);
+    let usageLoading = $state(false);
+    let usagePeriod = $state<UsagePeriod>('1week');
+    let chartCanvas = $state<HTMLCanvasElement | null>(null);
+    let chartInstance: Chart | null = null;
+
     let showCreateForm = $state(false);
     let createUsername = $state('');
     let createEmail = $state('');
@@ -67,6 +100,172 @@
         } catch {}
     });
 
+    async function loadApiKeys() {
+        apiKeysLoading = true;
+        apiKeysError = '';
+        try {
+            const res = await fetch('/api/keys');
+            if (res.ok) {
+                apiKeys = await res.json();
+            } else {
+                apiKeysError = 'Failed to load API keys.';
+            }
+        } catch {
+            apiKeysError = 'Network error.';
+        }
+        apiKeysLoading = false;
+    }
+
+    async function createApiKey(e: Event) {
+        e.preventDefault();
+        createKeyError = '';
+        createKeyLoading = true;
+        try {
+            const res = await fetch('/api/keys', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ name: createKeyName })
+            });
+            if (!res.ok) {
+                createKeyError = await res.text() || 'Failed to create key.';
+            } else {
+                const data = await res.json();
+                newlyCreatedKey = { key: data.key, name: data.name };
+                apiKeys = [...apiKeys, {
+                    id: data.id,
+                    name: data.name,
+                    key_prefix: data.prefix,
+                    created_at: data.created_at,
+                    last_used_at: null,
+                    rate_limit: data.rate_limit,
+                }];
+                showCreateKeyForm = false;
+                createKeyName = '';
+                copiedKey = false;
+            }
+        } catch {
+            createKeyError = 'Network error.';
+        }
+        createKeyLoading = false;
+    }
+
+    async function deleteApiKey(id: string) {
+        deletingKeyId = id;
+        try {
+            const res = await fetch(`/api/keys/${id}`, { method: 'DELETE' });
+            if (res.ok) {
+                apiKeys = apiKeys.filter(k => k.id !== id);
+            }
+        } catch {}
+        deletingKeyId = null;
+        confirmDeleteKeyId = null;
+    }
+
+    async function copyKey(key: string) {
+        await navigator.clipboard.writeText(key);
+        copiedKey = true;
+        setTimeout(() => copiedKey = false, 2000);
+    }
+
+    async function regenerateApiKey(id: string) {
+        regeneratingKeyId = id;
+        try {
+            const res = await fetch(`/api/keys/${id}/regenerate`, { method: 'POST' });
+            if (res.ok) {
+                const data = await res.json();
+                newlyCreatedKey = { key: data.key, name: data.name };
+                apiKeys = apiKeys.map(k => k.id === id ? {
+                    ...k, key_prefix: data.prefix, created_at: data.created_at, last_used_at: null
+                } : k);
+                copiedKey = false;
+            }
+        } catch {}
+        regeneratingKeyId = null;
+        confirmRegenerateId = null;
+    }
+
+    async function loadUsage(period: UsagePeriod) {
+        usageLoading = true;
+        try {
+            const res = await fetch(`/api/keys/usage?period=${period}`);
+            if (res.ok) usageData = await res.json();
+        } catch {}
+        usageLoading = false;
+    }
+
+    function pad(n: number) { return String(n).padStart(2, '0'); }
+
+    function buildChartData(period: UsagePeriod) {
+        const labels: string[] = [];
+        const counts: number[] = [];
+        if (period === '1hr') {
+            const now = new Date();
+            const baseMs = now.getTime() - (now.getUTCSeconds() * 1000 + now.getUTCMilliseconds());
+            for (let i = 59; i >= 0; i--) {
+                const d = new Date(baseMs - i * 60000);
+                const key = `${d.getUTCFullYear()}-${pad(d.getUTCMonth()+1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`;
+                labels.push(`${pad(d.getUTCHours())}:${pad(d.getUTCMinutes())}`);
+                const pt = usageData.find(p => p.date === key);
+                counts.push(pt ? pt.count : 0);
+            }
+        } else if (period === '1day') {
+            const now = new Date();
+            const baseMs = now.getTime() - (now.getUTCMinutes() * 60000 + now.getUTCSeconds() * 1000 + now.getUTCMilliseconds());
+            for (let i = 23; i >= 0; i--) {
+                const d = new Date(baseMs - i * 3600000);
+                const key = `${d.getUTCFullYear()}-${pad(d.getUTCMonth()+1)}-${pad(d.getUTCDate())} ${pad(d.getUTCHours())}`;
+                labels.push(`${pad(d.getUTCHours())}:00`);
+                const pt = usageData.find(p => p.date === key);
+                counts.push(pt ? pt.count : 0);
+            }
+        } else {
+            for (let i = 6; i >= 0; i--) {
+                const d = new Date();
+                d.setDate(d.getDate() - i);
+                const iso = d.toISOString().split('T')[0];
+                labels.push(iso.slice(5));
+                const pt = usageData.find(p => p.date === iso);
+                counts.push(pt ? pt.count : 0);
+            }
+        }
+        return { labels, counts };
+    }
+
+    $effect(() => {
+        if (!chartCanvas) return;
+        const { labels, counts } = buildChartData(usagePeriod);
+        if (chartInstance) chartInstance.destroy();
+        chartInstance = new Chart(chartCanvas, {
+            type: 'line',
+            data: {
+                labels,
+                datasets: [{
+                    label: 'Requests',
+                    data: counts,
+                    fill: true,
+                    backgroundColor: 'rgba(59,130,246,0.12)',
+                    borderColor: 'rgba(59,130,246,0.85)',
+                    pointBackgroundColor: 'rgba(59,130,246,0.9)',
+                    pointRadius: usagePeriod === '1hr' ? 2 : 3,
+                    tension: 0.35,
+                }]
+            },
+            options: {
+                responsive: true,
+                maintainAspectRatio: false,
+                plugins: { legend: { display: false }, tooltip: { callbacks: {
+                    title: (items) => items[0].label,
+                    label: (item) => ` ${item.raw} request${(item.raw as number) !== 1 ? 's' : ''}`,
+                }}},
+                scales: {
+                    y: { beginAtZero: true, ticks: { stepSize: 1, color: '#9ca3af', font: { size: 10 } }, grid: { color: 'rgba(156,163,175,0.1)' } },
+                    x: { ticks: { color: '#9ca3af', font: { size: 10 }, maxTicksLimit: usagePeriod === '1hr' ? 12 : 8 }, grid: { display: false } }
+                }
+            }
+        });
+        return () => { chartInstance?.destroy(); chartInstance = null; };
+    });
+
     async function loadAdminUsers() {
         adminLoading = true;
         adminError = '';
@@ -83,6 +282,18 @@
         adminLoading = false;
     }
 
+    $effect(() => {
+        if (activeSection === 'api-keys') {
+            loadApiKeys();
+        }
+    });
+
+    $effect(() => {
+        if (activeSection === 'api-keys') {
+            loadUsage(usagePeriod);
+        }
+    });
+
     $effect(() => {
         if (activeSection === 'admin' && $userStore?.is_admin) {
             loadAdminUsers();
@@ -196,6 +407,7 @@
         { id: 'account', label: 'Account', icon: 'mdi:account-outline' },
         { id: 'theme', label: 'Theme', icon: 'mdi:palette-outline' },
         { id: 'storage', label: 'Storage', icon: 'mdi:harddisk' },
+        { id: 'api-keys', label: 'API Keys', icon: 'mdi:key-outline' },
         ...($userStore?.is_admin ? [{ id: 'admin', label: 'Admin', icon: 'mdi:shield-crown-outline' }] : [])
     ]);
 </script>
@@ -218,7 +430,6 @@
     </nav>
 
     <div class="flex flex-1 max-w-6xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8 gap-8">
-        <!-- Sidebar -->
         <aside class="w-56 flex-shrink-0">
             <nav class="sticky top-24 space-y-1">
                 {#each navItems as item}
@@ -245,10 +456,8 @@
             </nav>
         </aside>
 
-        <!-- Main content -->
         <main class="flex-1 min-w-0 space-y-6 pb-16">
 
-            <!-- Account Section -->
             {#if activeSection === 'account'}
                 <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
                     <div class="p-6 sm:p-8">
@@ -342,7 +551,6 @@
                 </div>
             {/if}
 
-            <!-- Theme Section -->
             {#if activeSection === 'theme'}
                 <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
                     <div class="p-6 sm:p-8">
@@ -356,7 +564,6 @@
                 </div>
             {/if}
 
-            <!-- Storage Section -->
             {#if activeSection === 'storage'}
                 <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
                     <div class="p-6 sm:p-8">
@@ -394,7 +601,215 @@
                 </div>
             {/if}
 
-            <!-- Admin Section -->
+            {#if activeSection === 'api-keys'}
+                <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
+                    <div class="p-6 sm:p-8">
+                        <div class="flex items-center justify-between mb-2">
+                            <h2 class="text-xl font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                                <Icon icon="mdi:key-outline" class="text-2xl text-blue-500 dark:text-blue-400" />
+                                API Keys
+                            </h2>
+                            <button
+                                onclick={() => { showCreateKeyForm = !showCreateKeyForm; createKeyError = ''; newlyCreatedKey = null; }}
+                                class="flex items-center gap-1.5 px-3 py-1.5 text-sm font-semibold rounded-lg transition-colors {showCreateKeyForm ? 'bg-gray-200 dark:bg-white/10 text-gray-700 dark:text-gray-300' : 'bg-blue-600 hover:bg-blue-700 text-white shadow-sm'}"
+                            >
+                                <Icon icon={showCreateKeyForm ? 'mdi:close' : 'mdi:plus'} class="text-base" />
+                                {showCreateKeyForm ? 'Cancel' : 'New Key'}
+                            </button>
+                        </div>
+                        <p class="text-sm text-gray-500 dark:text-gray-400 mb-4">
+                            Use API keys to render Typst documents programmatically via <code class="font-mono text-xs bg-gray-100 dark:bg-white/10 px-1.5 py-0.5 rounded">POST /v1/render</code>.
+                            Each key allows up to 60 requests/minute.
+                            <a href="/api-docs" class="text-blue-600 dark:text-blue-400 hover:underline ml-1">View API docs →</a>
+                        </p>
+
+                        <div class="mb-6 p-4 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/30">
+                            <div class="flex items-center justify-between mb-3">
+                                <p class="text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                                    Requests — {usagePeriod === '1hr' ? 'Last 60 Min' : usagePeriod === '1day' ? 'Last 24 Hours' : 'Last 7 Days'}
+                                    {#if usageData.length > 0}
+                                        <span class="ml-2 normal-case font-normal text-gray-400 dark:text-gray-500">
+                                            ({usageData.reduce((s, p) => s + p.count, 0)} total)
+                                        </span>
+                                    {/if}
+                                </p>
+                                <div class="flex items-center gap-1">
+                                    {#each ([['1hr', '1 hr'], ['1day', '1 day'], ['1week', '1 week']] as const) as [val, label]}
+                                        <button
+                                            onclick={() => usagePeriod = val}
+                                            class="px-2 py-0.5 text-xs font-semibold rounded-md transition-colors {usagePeriod === val ? 'bg-blue-600 text-white' : 'text-gray-500 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-white/10'}"
+                                        >{label}</button>
+                                    {/each}
+                                </div>
+                            </div>
+                            <div class="h-32">
+                                {#if usageLoading}
+                                    <div class="h-full flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
+                                        <Icon icon="mdi:loading" class="animate-spin mr-2" /> Loading...
+                                    </div>
+                                {:else if usageData.length === 0}
+                                    <div class="h-full flex items-center justify-center text-gray-400 dark:text-gray-500 text-sm">
+                                        No usage yet — make your first API call to see data here.
+                                    </div>
+                                {:else}
+                                    <canvas bind:this={chartCanvas}></canvas>
+                                {/if}
+                            </div>
+                        </div>
+
+                        {#if newlyCreatedKey}
+                            <div class="mb-6 p-4 rounded-xl border border-green-200 dark:border-green-700/50 bg-green-50 dark:bg-green-900/10">
+                                <div class="flex items-start justify-between gap-4 mb-2">
+                                    <div>
+                                        <p class="text-sm font-bold text-green-800 dark:text-green-300 flex items-center gap-2">
+                                            <Icon icon="mdi:check-circle" class="text-lg" />
+                                            Key created: {newlyCreatedKey.name}
+                                        </p>
+                                        <p class="text-xs text-green-700 dark:text-green-400 mt-0.5">Copy this key now — it will not be shown again.</p>
+                                    </div>
+                                    <button onclick={() => newlyCreatedKey = null} class="text-green-600 dark:text-green-400 hover:text-green-800 dark:hover:text-green-200 flex-shrink-0">
+                                        <Icon icon="mdi:close" class="text-lg" />
+                                    </button>
+                                </div>
+                                <div class="flex items-center gap-2 mt-3">
+                                    <code class="flex-1 font-mono text-xs bg-white dark:bg-black/40 border border-green-200 dark:border-green-700/50 text-gray-800 dark:text-gray-200 px-3 py-2 rounded-lg break-all">{newlyCreatedKey.key}</code>
+                                    <button
+                                        onclick={() => copyKey(newlyCreatedKey!.key)}
+                                        class="flex-shrink-0 flex items-center gap-1.5 px-3 py-2 text-sm font-semibold rounded-lg transition-colors {copiedKey ? 'bg-green-600 text-white' : 'bg-gray-200 dark:bg-white/10 hover:bg-gray-300 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300'}"
+                                    >
+                                        <Icon icon={copiedKey ? 'mdi:check' : 'mdi:content-copy'} class="text-base" />
+                                        {copiedKey ? 'Copied!' : 'Copy'}
+                                    </button>
+                                </div>
+                            </div>
+                        {/if}
+
+                        {#if showCreateKeyForm}
+                            <form onsubmit={createApiKey} class="mb-6 p-4 rounded-xl border border-blue-200 dark:border-blue-800/50 bg-blue-50/50 dark:bg-blue-900/10 space-y-3">
+                                <h3 class="text-sm font-bold text-gray-900 dark:text-white flex items-center gap-2">
+                                    <Icon icon="mdi:key-plus" class="text-blue-500" />
+                                    Create API Key
+                                </h3>
+                                {#if createKeyError}
+                                    <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 px-3 py-2 rounded-lg text-sm">{createKeyError}</div>
+                                {/if}
+                                <div class="flex items-end gap-3">
+                                    <div class="flex-1">
+                                        <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Key Name</label>
+                                        <input
+                                            type="text"
+                                            required
+                                            bind:value={createKeyName}
+                                            placeholder="e.g. My App, CI Pipeline"
+                                            class="w-full bg-white dark:bg-black/40 border border-gray-300 dark:border-white/20 text-gray-900 dark:text-white rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition-colors"
+                                        />
+                                    </div>
+                                    <button
+                                        type="submit"
+                                        disabled={createKeyLoading || !createKeyName.trim()}
+                                        class="flex items-center gap-2 px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:opacity-50 text-white text-sm font-semibold rounded-lg transition-colors shadow-sm"
+                                    >
+                                        {#if createKeyLoading}
+                                            <Icon icon="mdi:loading" class="animate-spin text-base" />
+                                            Creating...
+                                        {:else}
+                                            <Icon icon="mdi:key-plus" class="text-base" />
+                                            Create
+                                        {/if}
+                                    </button>
+                                </div>
+                            </form>
+                        {/if}
+
+                        {#if apiKeysError}
+                            <div class="bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 p-3 rounded-lg text-sm mb-4">{apiKeysError}</div>
+                        {/if}
+
+                        {#if apiKeysLoading}
+                            <div class="flex items-center justify-center py-12 text-gray-400 dark:text-gray-500">
+                                <Icon icon="mdi:loading" class="animate-spin text-2xl mr-2" />
+                                Loading keys...
+                            </div>
+                        {:else if apiKeys.length === 0}
+                            <div class="text-center py-12 text-gray-400 dark:text-gray-500">
+                                <Icon icon="mdi:key-outline" class="text-4xl mb-2 opacity-40" />
+                                <p class="text-sm">No API keys yet. Create one to get started.</p>
+                            </div>
+                        {:else}
+                            <div class="space-y-2">
+                                {#each apiKeys as key (key.id)}
+                                    <div class="flex items-center gap-4 px-4 py-3 rounded-xl border border-gray-200 dark:border-white/10 bg-gray-50 dark:bg-black/20">
+                                        <div class="h-9 w-9 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center text-blue-600 dark:text-blue-400 flex-shrink-0">
+                                            <Icon icon="mdi:key" class="text-lg" />
+                                        </div>
+                                        <div class="flex-1 min-w-0">
+                                            <p class="text-sm font-semibold text-gray-900 dark:text-white truncate">{key.name}</p>
+                                            <p class="text-xs font-mono text-gray-500 dark:text-gray-400">{key.key_prefix}... · {key.rate_limit}/min</p>
+                                        </div>
+                                        <div class="text-right flex-shrink-0 hidden sm:block">
+                                            <p class="text-xs text-gray-400 dark:text-gray-500">Created {formatDate(key.created_at)}</p>
+                                            <p class="text-xs text-gray-400 dark:text-gray-500">{key.last_used_at ? `Last used ${formatDate(key.last_used_at)}` : 'Never used'}</p>
+                                        </div>
+                                        <div class="flex items-center gap-1 flex-shrink-0">
+                                            {#if confirmRegenerateId === key.id}
+                                                <div class="flex items-center gap-1">
+                                                    <span class="text-xs text-gray-500 dark:text-gray-400">Regenerate?</span>
+                                                    <button
+                                                        onclick={() => regenerateApiKey(key.id)}
+                                                        disabled={regeneratingKeyId === key.id}
+                                                        class="text-xs px-2 py-1 rounded-md bg-amber-500 hover:bg-amber-600 text-white font-semibold transition-colors disabled:opacity-50"
+                                                    >
+                                                        {regeneratingKeyId === key.id ? '...' : 'Yes'}
+                                                    </button>
+                                                    <button
+                                                        onclick={() => confirmRegenerateId = null}
+                                                        class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
+                                                    >
+                                                        No
+                                                    </button>
+                                                </div>
+                                            {:else if confirmDeleteKeyId === key.id}
+                                                <div class="flex items-center gap-1">
+                                                    <span class="text-xs text-gray-500 dark:text-gray-400">Delete?</span>
+                                                    <button
+                                                        onclick={() => deleteApiKey(key.id)}
+                                                        disabled={deletingKeyId === key.id}
+                                                        class="text-xs px-2 py-1 rounded-md bg-red-600 hover:bg-red-700 text-white font-semibold transition-colors disabled:opacity-50"
+                                                    >
+                                                        {deletingKeyId === key.id ? '...' : 'Yes'}
+                                                    </button>
+                                                    <button
+                                                        onclick={() => confirmDeleteKeyId = null}
+                                                        class="text-xs px-2 py-1 rounded-md bg-gray-200 hover:bg-gray-300 dark:bg-white/10 dark:hover:bg-white/20 text-gray-700 dark:text-gray-300 font-semibold transition-colors"
+                                                    >
+                                                        No
+                                                    </button>
+                                                </div>
+                                            {:else}
+                                                <button
+                                                    onclick={() => { confirmRegenerateId = key.id; confirmDeleteKeyId = null; }}
+                                                    title="Regenerate key"
+                                                    class="p-1.5 rounded-lg text-gray-400 hover:text-amber-600 dark:hover:text-amber-400 hover:bg-amber-50 dark:hover:bg-amber-500/10 transition-colors"
+                                                >
+                                                    <Icon icon="mdi:refresh" class="text-lg" />
+                                                </button>
+                                                <button
+                                                    onclick={() => { confirmDeleteKeyId = key.id; confirmRegenerateId = null; }}
+                                                    title="Revoke key"
+                                                    class="p-1.5 rounded-lg text-gray-400 hover:text-red-600 dark:hover:text-red-400 hover:bg-red-50 dark:hover:bg-red-500/10 transition-colors"
+                                                >
+                                                    <Icon icon="mdi:delete-outline" class="text-lg" />
+                                                </button>
+                                            {/if}
+                                        </div>
+                                    </div>
+                                {/each}
+                            </div>
+                        {/if}
+                    </div>
+                </div>
+            {/if}
+
             {#if activeSection === 'admin' && $userStore?.is_admin}
                 <div class="bg-white dark:bg-black/20 rounded-xl shadow-sm border border-gray-200 dark:border-white/10 overflow-hidden">
                     <div class="p-6 sm:p-8">