add ark ui and migrate most components

.cursor/mcp.json

@@ -5,6 +5,10 @@
       "command": "node",
       "args": ["/Users/jacobmaynard/Documents/Repos/corates/packages/mcp/server.js"],
       "env": {}
+    },
+    "ark-ui": {
+      "command": "npx",
+      "args": ["-y", "@ark-ui/mcp"]
     }
   }
 }

.cursor/rules/corates.mdc

@@ -15,7 +15,7 @@ The project is split into multiple packages under the `packages/` directory:
 - `/web`: Frontend application built with SolidJS
 - `/workers`: Backend services, API endpoints, and database migrations
 - `/landing`: Marketing and landing site
-- `/ui`: Shared UI component library built with Zag.js
+- `/ui`: Shared UI component library built with Ark UI
 - `/shared`: Shared TypeScript utilities and error definitions
 - `/mcp`: MCP server for development tools and documentation
 
@@ -48,7 +48,7 @@ Do not worry about migrations (client side or backend) unless specifically instr
 - **Zod**: Schema and input validation (backend)
 - **Drizzle ORM**: ALL database interactions and migrations
 - **Better-Auth**: Authentication and user management
-- **Zag.js**: UI components from `@corates/ui` package (NOT from local components)
+- **Ark UI**: UI components from `@corates/ui` package
 - **solid-icons**: Icon library (e.g., `solid-icons/bi`, `solid-icons/fi`)
 
 ### Code Comments
@@ -81,14 +81,14 @@ retries += 1
 
 ### UI Components
 
-**Zag components are in `@corates/ui` package, NOT in local components.**
+**Ark UI components are in `@corates/ui` package, NOT in local components.**
 
 ```js
 // CORRECT
 import { Dialog, Select, Toast } from '@corates/ui';
 
 // WRONG
-import { Dialog } from '@/components/zag/Dialog.jsx';
+import { Dialog } from '@/components/ark/Dialog.jsx';
 ```
 
 See `ui-components.mdc` for detailed component usage patterns.
@@ -112,7 +112,7 @@ See `solidjs.mdc` for detailed reactivity patterns and examples.
 
 ## Documentation
 
-- **ALWAYS use Corates MCP tools** for Better-Auth, Drizzle, Icons, linting, and Zag documentation
+- **ALWAYS use Corates MCP tools or other MCP** for Better-Auth, Drizzle, Icons, linting, and Ark UI documentation
 - Reference `style-guide.md` for UI styling guidelines
 - Reference `docs/error-handling-guide.md` for error handling patterns
 - See `TESTING.md` for testing guidelines (do NOT add tests unless asked)

.cursor/rules/ui-components.mdc

@@ -1,14 +1,14 @@
 ---
 alwaysApply: false
-description: "UI component usage patterns including Zag.js components, solid-icons, and import aliases"
+description: "UI component usage patterns including Ark UI components, solid-icons, and import aliases"
 globs: packages/web/**, packages/ui/**
 ---
 
 # UI Components
 
-## Zag.js Components
+## Ark UI Components
 
-**Zag components are in `@corates/ui` package, NOT in local components.**
+**UI components are in `@corates/ui` package, built with Ark UI (and some remaining Zag.js components). NOT in local components.**
 
 ```js
 // CORRECT - Import from @corates/ui
@@ -21,7 +21,7 @@ import { Dialog } from 'packages/web/src/components/zag/Dialog.jsx';
 
 ### Available Components
 
-See `packages/ui/src/zag/index.js` for all available components. Common ones:
+See `packages/ui/src/zag/index.js` for all available components. Most components have been migrated to Ark UI. Common ones:
 - `Dialog`, `ConfirmDialog`, `useConfirmDialog`
 - `Select`, `Combobox`
 - `Toast`, `toaster`, `showToast`

README.md

@@ -14,7 +14,7 @@ CoRATES is a web application designed to streamline the entire quality and risk-
 
 ## Tech Stack
 
-- **Frontend**: SolidJS, SolidStart, Tailwind CSS, Vite, Zag
+- **Frontend**: SolidJS, SolidStart, Tailwind CSS, Vite, Ark UI
 - **Backend**: Cloudflare Workers, Durable Objects
 - **Database**: Cloudflare D1 (SQLite)
 - **Storage**: Cloudflare R2 (PDF documents)

docs/architecture/diagrams.md

@@ -10,11 +10,12 @@ Mermaid diagrams to help new contributors understand the CoRATES application arc
 
 ## Diagrams
 
-| #   | Diagram                                                     | Description                                  |
-| --- | ----------------------------------------------------------- | -------------------------------------------- |
-| 1   | [Package Architecture](diagrams/01-package-architecture.md) | Monorepo structure and package relationships |
-| 2   | [System Architecture](diagrams/02-system-architecture.md)   | Frontend, backend, and storage layers        |
-| 3   | [Sync Flow](diagrams/03-sync-flow.md)                       | Local-first CRDT sync with Yjs               |
-| 4   | [Data Model](diagrams/04-data-model.md)                     | Entity relationships and storage             |
-| 5   | [Frontend Routes](diagrams/05-frontend-routes.md)           | Application routing structure                |
-| 6   | [API Routes](diagrams/06-api-routes.md)                     | Backend endpoints and middleware             |
+| #   | Diagram                                                     | Description                                                          |
+| --- | ----------------------------------------------------------- | -------------------------------------------------------------------- |
+| 1   | [Package Architecture](diagrams/01-package-architecture.md) | Monorepo structure and package relationships                         |
+| 2   | [System Architecture](diagrams/02-system-architecture.md)   | Frontend, backend, and storage layers                                |
+| 3   | [Sync Flow](diagrams/03-sync-flow.md)                       | Local-first CRDT sync with Yjs                                       |
+| 4   | [Data Model](diagrams/04-data-model.md)                     | Entity relationships and storage                                     |
+| 5   | [Frontend Routes](diagrams/05-frontend-routes.md)           | Application routing structure                                        |
+| 6   | [API Routes](diagrams/06-api-routes.md)                     | Backend endpoints and middleware                                     |
+| 7   | [API Actions](diagrams/07-api-actions.md)                   | All actions and failure points for projects, studies, and checklists |

docs/architecture/diagrams/01-package-architecture.md

@@ -36,6 +36,6 @@ graph TB
 | `web`     | Main SolidJS application               | SolidJS, Vite, Tailwind  |
 | `workers` | Backend API and real-time sync         | Hono, Cloudflare Workers |
 | `landing` | Marketing site (includes web app)      | SolidStart               |
-| `ui`      | Shared component library               | SolidJS, Zag.js          |
+| `ui`      | Shared component library               | SolidJS, Ark UI          |
 | `shared`  | Shared error definitions and utilities | TypeScript               |
 | `mcp`     | Development tooling (docs, linting)    | Node.js                  |

docs/architecture/diagrams/02-system-architecture.md

@@ -44,7 +44,7 @@ flowchart TB
 
 ### Frontend (SolidJS)
 
-- **UI Components**: Zag.js-based accessible components
+- **UI Components**: Ark UI-based accessible components
 - **Stores**: Centralized state management (no prop drilling)
 - **Yjs Client**: CRDT sync with local IndexedDB persistence for project content
 - **Notification WebSocket**: Real-time connection to UserSession for user-level notifications (project invites, etc.)