Build real apps on top of your data

import { createHavenAppClient } from "mindoodb-app-sdk";

const app = await createHavenAppClient({ appName: "contacts-viewer" });

// Launch context tells you who you are, what you can see, and how to render.
const { user, theme, viewport, databases } = app.launchContext;

// Read the first granted database under the permissions Haven gave us.
const [contacts] = databases;
for await (const doc of contacts.listDocuments({ filter: { type: "contact" } })) {
  console.log(doc.getData().name);
}

// React to host events (user toggled dark mode, workspace was resized, ...).
app.events.on("theme", (t) => document.body.dataset.theme = t);

# Role
You are writing a MindooDB App that runs inside Haven.

# Context - read these before you write any code
- https://mindoodb.com/llms-full.txt
  Full platform context: Haven bridge, MindooDB App SDK API, permissions model, examples.
- https://github.com/klehmann/mindoodb-app-example
  Reference app. Fork its project layout, build setup, and SDK usage patterns.

# Task
Create a new local project called "mindoodb-app-samplecontacts" by copying the
"mindoodb-app-example" repository as the starting template.

Build a modern, attractive contacts app with the following features:
1. Create, edit, and delete contact documents with these fields:
   lastName, firstName, street, zip, city, email.
2. List view, sortable by any of the fields above, defaulting to lastName then firstName.
3. Database selection: read the list of databases exposed by the SDK launch context
   and let the user pick which one to read and write contacts from. Persist the
   choice so it is remembered on the next launch. If only one database is available,
   use it automatically; if none are available, show a clear empty state.
4. Incremental full-text search across all fields, powered by Flexsearch.
   The index must be built incrementally from the SDK changefeed - do not rebuild it on every change.
   See the MindooDB app example for the exact indexing pattern.
5. Detail/edit view for a single contact.

# Tech stack (inherited from mindoodb-app-example, do not switch)
- Vue 3 (3.5+) + Vite + TypeScript.
- PrimeVue 4 for UI components and theming.
- mindoodb-app-sdk for all Haven and database access.
- flexsearch for the search index.
- Deployable to Cloudflare Pages via Wrangler, like the example.

# UX requirements
- Responsive design that works on phone, tablet, and desktop.
- Animated transitions for list updates, dialogs, and theme changes.
- Respect Haven's light/dark theme via the SDK launchContext.theme and the live "theme" event.

# Rules
- Only use the mindoodb-app-sdk APIs documented in llms-full.txt.
- Do not call MindooDB directly. The Haven bridge is the only data path.
- Use the permissions object from launchContext to enable or disable Create, Edit, and Delete
  buttons. If the app does not have a permission, the corresponding UI must be hidden or disabled.
- Keep the app offline-capable: writes must go through the SDK so Haven can sync them later.
- No secrets or API keys in the code.

# Deliverables
- A runnable project with "npm run dev:local" against a local Haven instance (hot reload).
- A "npm run build" output deployable to Cloudflare Pages.
- A short README with setup, dev, and deploy instructions.
- Clear TypeScript types for the Contact document shape.