Echte apps op je eigen gegevens

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

// 1. Connect to Haven over the MessagePort bridge.
const bridge = createMindooDBAppBridge();
const session = await bridge.connect();

// 2. The launch context tells you who you are, what you were granted,
//    and how to render.
const ctx = await session.getLaunchContext();
const { user, theme, viewport, databases } = ctx;

// 3. Open a granted database and read a page of documents. Capabilities are
//    per database, so check before offering Create / Edit / Delete.
const db = await session.openDatabase(databases[0].id);
const canCreate = databases[0].capabilities.includes("create");

const result = await db.documents.list({ limit: 25 });
for (const doc of result.items) {
  console.log(doc.id, doc.data);
}

// 4. React to host events (user toggled dark mode, tile was resized, ...).
const stopTheme = session.onThemeChange((next) => {
  document.documentElement.dataset.theme = next.mode;
});

# 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, with pnpm as the package manager.
- PrimeVue 4 for UI components and theming.
- mindoodb-app-sdk for all Haven and database access.
- flexsearch for the search index.
- Deployed to Cloudflare Workers static assets 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: read the initial mode from
  "(await session.getLaunchContext()).theme" and subscribe to live changes with
  "session.onThemeChange(...)".

# Rules
- Only use the mindoodb-app-sdk APIs documented in llms-full.txt. If a method is not in
  the SDK type definitions, it does not exist - do not invent host APIs.
- Do not call MindooDB directly. The Haven bridge is the only data path.
- Gate Create, Edit, and Delete on the granted capabilities in
  "launchContext.databases[].capabilities". If a capability is missing, the corresponding
  UI must be hidden or disabled.
- Keep "public/haven-app.json" in sync with the databases the app actually opens - Haven
  reads that file when a user installs the app, and an install is the only moment a
  permission can be granted. A later deploy that asks for more does not get it.
- 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: "pnpm install" then "pnpm dev".
- A "pnpm build" output deployable with "pnpm deploy" (wrangler).
- A short README with setup, dev, and deploy instructions.
- Clear TypeScript types for the Contact document shape.