feat: add spreadsheet support with Excel-like editing

Dockerfile

@@ -1,5 +1,5 @@
 # Multi-stage build for React app
-FROM node:20-alpine AS builder
+FROM node:22-alpine AS builder
 
 # Install pnpm
 RUN corepack enable && corepack prepare pnpm@9.15.0 --activate

README.md

@@ -5,7 +5,7 @@
 [![Version](https://img.shields.io/github/v/release/typelets/typelets-app)](https://github.com/typelets/typelets-app/releases)
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
 [![CI](https://github.com/typelets/typelets-app/actions/workflows/release.yml/badge.svg)](https://github.com/typelets/typelets-app/actions)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](CONTRIBUTING.md)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/typelets/typelets-app/pulls)
 [![React](https://img.shields.io/badge/React-19-blue?logo=react)](https://react.dev/)
 [![TypeScript](https://img.shields.io/badge/TypeScript-5.8-blue?logo=typescript)](https://www.typescriptlang.org/)
 [![Vite](https://img.shields.io/badge/Vite-7-646CFF?logo=vite)](https://vitejs.dev/)
@@ -31,13 +31,13 @@ Available on iOS and Android with the same powerful features and encryption.
 - [Download on the App Store](https://apps.apple.com/us/app/typelets/id6753926295)
 - [Get it on Google Play](https://play.google.com/store/apps/details?id=com.typelets.notes&pcampaignid=web_share)
 
-<p align="center">
+<div align="center">
   <img src="https://typelets.com/assets/images/mobile/screenshot-1.png" width="250" alt="Mobile Screenshot 1"/>
   &nbsp;&nbsp;
   <img src="https://typelets.com/assets/images/mobile/screenshot-2.png" width="250" alt="Mobile Screenshot 2"/>
   &nbsp;&nbsp;
   <img src="https://typelets.com/assets/images/mobile/screenshot-3.png" width="250" alt="Mobile Screenshot 3"/>
-</p>
+</div>
 
 
 - 📱 Native iOS and Android apps
@@ -118,7 +118,19 @@ Available on iOS and Android with the same powerful features and encryption.
 - 🔒 **Secure Sandboxed Execution** - Code runs in isolated environments via Piston API on EC2
 - 📋 **Error Handling** - Clear error messages and compilation details for debugging
 
-### 📊 Diagram Support
+### 📊 Spreadsheet Support
+
+Create powerful spreadsheets directly in your notes:
+
+- 📊 **Excel-like editing** - Full spreadsheet functionality with formulas, formatting, and cell styling
+- 🔢 **Formula support** - Use familiar spreadsheet formulas for calculations
+- 📋 **Multiple sheets** - Organize data across multiple worksheets
+- 🎨 **Cell formatting** - Bold, colors, borders, alignment, and number formats
+- 🔒 **Encrypted storage** - Spreadsheet data is encrypted like all your notes
+- 🌐 **Public sharing** - Share spreadsheets publicly with read-only access
+- 🚀 **Quick create** - Use the "New Spreadsheet" button to get started
+
+### 📈 Diagram Support
 
 ![Create Diagram Demo](https://github.com/typelets/typelets-app/blob/main/assets/diagram-demo.gif)
 

index.html

@@ -4,8 +4,8 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <!-- Basic Index -->
-  <title>Secure Encrypted Notes - Typelets | iOS, Android & Web | Zero-Knowledge AES-256</title>
-  <meta name="description" content="Secure encrypted notes with zero-knowledge privacy and integrated code execution for developers. Available on iOS, Android, and Web." />
+  <title>Typelets Secure Workspace | iOS, Android & Web | Zero-Knowledge AES-256</title>
+  <meta name="description" content="Secure encrypted workspace with documents, spreadsheets, diagrams, and code execution. Zero-knowledge privacy. Available on iOS, Android, and Web." />
   <meta name="keywords" content="encrypted notes, secure notes app, privacy, end-to-end encryption, note taking, markdown editor, offline notes, AES-256 encryption, zero-knowledge, private notes" />
   <meta name="author" content="Typelets" />
   <meta name="application-name" content="Typelets" />
@@ -21,16 +21,16 @@
   <meta name="apple-mobile-web-app-title" content="Typelets" />
   <!-- Open Graph -->
   <meta property="og:type" content="website" />
-  <meta property="og:title" content="Secure Encrypted Notes - Typelets | Zero-Knowledge AES-256" />
-  <meta property="og:description" content="Secure encrypted notes with zero-knowledge privacy and integrated code execution for developers. Available on iOS, Android, and Web." />
+  <meta property="og:title" content="Typelets Secure Workspace | Zero-Knowledge AES-256" />
+  <meta property="og:description" content="Secure encrypted workspace with documents, spreadsheets, diagrams, and code execution. Zero-knowledge privacy. Available on iOS, Android, and Web." />
   <meta property="og:url" content="https://app.typelets.com" />
   <meta property="og:image" content="https://app.typelets.com/og-image.jpg" />
   <meta property="og:site_name" content="Typelets" />
   <meta property="og:locale" content="en_US" />
   <!-- Twitter Card -->
   <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Secure Encrypted Notes - Typelets | Zero-Knowledge AES-256" />
-  <meta name="twitter:description" content="Secure encrypted notes with zero-knowledge privacy and integrated code execution for developers. Available on iOS, Android, and Web." />
+  <meta name="twitter:title" content="Typelets Secure Workspace | Zero-Knowledge AES-256" />
+  <meta name="twitter:description" content="Secure encrypted workspace with documents, spreadsheets, diagrams, and code execution. Zero-knowledge privacy. Available on iOS, Android, and Web." />
   <meta name="twitter:image" content="https://app.typelets.com/og-image.jpg" />
   <meta name="twitter:site" content="@typelets" />
   <meta name="twitter:creator" content="@typelets" />
@@ -54,21 +54,18 @@
     }
     html {
       background-color: oklch(0.145 0 0);
-      color-scheme: dark;
     }
     /* noinspection CssUnusedSymbol */
     html.light {
       --background: oklch(1 0 0);
       --foreground: oklch(0.145 0 0);
       background-color: oklch(1 0 0);
-      color-scheme: light;
     }
     /* noinspection CssUnusedSymbol */
     html.dark {
       --background: oklch(0.145 0 0);
       --foreground: oklch(0.985 0 0);
       background-color: oklch(0.145 0 0);
-      color-scheme: dark;
     }
     body {
       margin: 0;

package.json

@@ -63,6 +63,11 @@
   },
   "dependencies": {
     "@clerk/clerk-react": "^5.47.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@mdi/js": "^7.4.47",
+    "@mdi/react": "^1.6.1",
     "@monaco-editor/react": "^4.7.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-dialog": "^1.1.15",
@@ -82,6 +87,10 @@
     "@tiptap/extension-horizontal-rule": "^3.4.4",
     "@tiptap/extension-image": "^3.4.4",
     "@tiptap/extension-link": "^3.4.4",
+    "@tiptap/extension-table": "^3.11.1",
+    "@tiptap/extension-table-cell": "^3.11.1",
+    "@tiptap/extension-table-header": "^3.11.1",
+    "@tiptap/extension-table-row": "^3.11.1",
     "@tiptap/extension-task-item": "^3.4.4",
     "@tiptap/extension-task-list": "^3.4.4",
     "@tiptap/extension-text-style": "^3.4.4",
@@ -92,6 +101,18 @@
     "@tiptap/suggestion": "^3.4.4",
     "@types/dompurify": "^3.2.0",
     "@unhead/react": "^2.0.17",
+    "@univerjs/core": "^0.12.3",
+    "@univerjs/design": "^0.12.3",
+    "@univerjs/docs": "^0.12.3",
+    "@univerjs/docs-ui": "^0.12.3",
+    "@univerjs/engine-formula": "^0.12.3",
+    "@univerjs/engine-render": "^0.12.3",
+    "@univerjs/preset-sheets-core": "^0.12.3",
+    "@univerjs/presets": "^0.12.3",
+    "@univerjs/sheets": "^0.12.3",
+    "@univerjs/sheets-formula": "^0.12.3",
+    "@univerjs/sheets-ui": "^0.12.3",
+    "@univerjs/ui": "^0.12.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "dompurify": "^3.3.0",