music mobile fix

.gitea/workflows/publish-codemirror-helix.yml

@@ -0,0 +1,48 @@
+name: Publish codemirror-helix
+
+# Releases the packages/codemirror-helix workspace package to npm.
+# Trigger by pushing a tag like `codemirror-helix-v0.1.0` whose version
+# matches packages/codemirror-helix/package.json.
+on:
+  push:
+    tags:
+      - "codemirror-helix-v*"
+
+jobs:
+  publish:
+    runs-on: x86
+
+    defaults:
+      run:
+        working-directory: packages/codemirror-helix
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: oven-sh/setup-bun@v2
+        with:
+          bun-version: latest
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 24
+          registry-url: "https://registry.npmjs.org"
+
+      # Workspace install must happen at the monorepo root.
+      - name: Install dependencies
+        working-directory: .
+        run: bun install --frozen-lockfile
+
+      - name: Check tag matches package version
+        run: |
+          PACKAGE_VERSION="$(node -p "require('./package.json').version")"
+          TAG_NAME="${GITHUB_REF_NAME:-${GITHUB_REF#refs/tags/}}"
+          test "codemirror-helix-v${PACKAGE_VERSION}" = "${TAG_NAME}"
+
+      - name: Build
+        run: bun run build
+
+      - name: Publish
+        run: npm publish --access public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}

.gitignore

@@ -48,3 +48,6 @@ yarn-error.log*
 /.clerk/
 .worktrees
 .claudesession
+
+# built workspace packages (rebuilt by helix:build / package CI)
+/packages/*/dist

package.json

@@ -3,8 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "type": "module",
+  "workspaces": ["packages/*"],
   "scripts": {
-    "build": "next build",
+    "build": "bun run helix:build && next build",
+    "helix:build": "bun run --cwd packages/codemirror-helix build",
     "build:ffmpeg-worker": "bun build node_modules/@ffmpeg/ffmpeg/dist/esm/worker.js --target browser --format esm --minify --outfile public/ffmpeg/worker.js",
     "check": "biome check .",
     "check:unsafe": "biome check --write --unsafe .",
@@ -13,7 +15,7 @@
     "db:migrate": "drizzle-kit migrate",
     "db:push": "drizzle-kit push",
     "db:studio": "drizzle-kit studio",
-    "dev": "next dev --turbo",
+    "dev": "bun run helix:build && next dev --turbo",
     "preview": "next build && next start",
     "start": "next start",
     "typecheck": "tsc --noEmit",
@@ -23,6 +25,13 @@
     "@ai-sdk/openai": "^3.0.67",
     "@ai-sdk/react": "^3.0.195",
     "@clerk/nextjs": "^7.4.2",
+    "@codemirror/autocomplete": "^6.20.3",
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
     "@electric-sql/pglite": "^0.4.6",
     "@ffmpeg/ffmpeg": "^0.12.15",
     "@ffmpeg/util": "^0.12.2",
@@ -31,7 +40,11 @@
     "@fortawesome/react-fontawesome": "^3.3.1",
     "@gsap/react": "^2.1.2",
     "@hookform/resolvers": "^5.4.0",
+    "@mdx-js/loader": "^3.1.1",
+    "@mdx-js/mdx": "^3.1.1",
+    "@mdx-js/react": "^3.1.1",
     "@neondatabase/serverless": "^1.1.0",
+    "@next/mdx": "^16.2.9",
     "@radix-ui/react-accordion": "^1.2.12",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.8",
@@ -67,7 +80,10 @@
     "@trpc/next": "^11.17.0",
     "@trpc/react-query": "^11.17.0",
     "@trpc/server": "^11.17.0",
+    "@types/mdx": "^2.0.14",
+    "@uiw/react-codemirror": "^4.25.10",
     "@uiw/react-md-editor": "^4.1.1",
+    "@gregorlohaus/codemirror-helix": "workspace:*",
     "@uploadthing/react": "^7.3.3",
     "@vercel/speed-insights": "^2.0.0",
     "ai": "^6.0.193",
@@ -94,7 +110,6 @@
     "react-day-picker": "^10.0.1",
     "react-dom": "^19.2.6",
     "react-hook-form": "^7.77.0",
-    "react-markdown": "^10.1.0",
     "react-resizable-panels": "^4.11.2",
     "recharts": "3.8.1",
     "rehype-highlight": "^7.0.2",
@@ -103,11 +118,13 @@
     "server-only": "^0.0.1",
     "shadcn": "^4.10.0",
     "sonner": "^2.0.7",
+    "superjson": "^2.2.6",
     "tailwind-merge": "^3.6.0",
     "tailwindcss-motion": "^1.1.1",
     "type-fest": "^5.7.0",
     "uploadthing": "^7.7.4",
     "vaul": "^1.1.2",
+    "wavesurfer.js": "^7.12.8",
     "zod": "^4.4.3"
   },
   "devDependencies": {

packages/codemirror-helix/.gitignore

@@ -0,0 +1,10 @@
+# build output (rebuilt by `bun run build` / helix:build / publish CI)
+dist/
+
+# dependencies
+node_modules/
+
+# logs / caches
+*.log
+.DS_Store
+*.tsbuildinfo

packages/codemirror-helix/README.md

@@ -0,0 +1,69 @@
+# @gregorlohaus/codemirror-helix
+
+[Helix](https://helix-editor.com/)-style modal editing for [CodeMirror 6](https://codemirror.net/).
+
+Selection-first editing with multiple selections, Normal/Insert/Select modes,
+goto & match modes, textobjects, surround, registers, counts, and search.
+
+> A **core motions subset** — broad coverage of everyday Helix keys, not full
+> parity. No tree-sitter textobjects, LSP gotos, macros, or jumplist.
+
+## Install
+
+```sh
+bun add @gregorlohaus/codemirror-helix
+# peers: @codemirror/{state,view,commands,language,search}
+```
+
+## Usage
+
+```ts
+import { EditorView, basicSetup } from "codemirror";
+import { helix } from "@gregorlohaus/codemirror-helix";
+
+new EditorView({
+  doc: "hello world",
+  extensions: [basicSetup, helix()],
+  parent: document.body,
+});
+```
+
+`helix()` needs a selection drawer for multi-cursor rendering — `basicSetup`
+(or `drawSelection()`) covers it.
+
+### Options
+
+```ts
+helix({
+  startInInsert: false, // start in Normal mode (default)
+  statusBar: true,      // show the bottom mode line
+  // Let an open autocomplete popup eat the first Escape instead of leaving Insert:
+  escapeGuard: (state) => completionStatus(state) === "active",
+});
+```
+
+## Keys
+
+Starts in **Normal** mode. The status line shows the mode, pending count,
+register, and selection count.
+
+| Group | Keys |
+| --- | --- |
+| Modes | `i`/`a` insert before/after, `I`/`A` line start/end, `o`/`O` open line, `v` select (extend), `Esc` normal |
+| Motion | `h j k l`, `w W b B e E`, `f t F T {char}`, `Alt-.` repeat find, `Home`/`End`, counts (`3w`) |
+| Goto `g` | `gg`/`Ng` line, `ge` end, `gh`/`gl` line ends, `gs` first non-blank, `gt`/`gc`/`gb` view top/center/bottom |
+| Select | `x` line (repeat extends), `X` line bounds, `%` all, `;` collapse, `Alt-;` flip, `Alt-:` forward, `,` keep primary, `Alt-,` remove primary, `(`/`)` rotate, `_` trim |
+| Multi | `s` select regex, `S` split, `K`/`Alt-K` keep/remove, `C` copy selection below, `Alt-C` above |
+| Match `m` | `mm` matching bracket, `mi{o}`/`ma{o}` inside/around (`w W p ( [ { < " ' \` m`), `ms{c}` surround, `md{c}` delete, `mr{c}{c}` replace |
+| Edit | `d` delete, `c` change, `y` yank, `p`/`P` paste, `R` replace w/ register, `r{c}` replace char, `~`/`` ` ``/`Alt-`` ` `` case, `J` join, `>`/`<` indent, `u`/`U` undo/redo |
+| Registers | `"{c}` select register for the next yank/delete/paste |
+| Search | `/` `?` search, `n`/`N` next/prev, `*` search selection |
+| View | `zz`/`zt`/`zb` center/top/bottom, `Ctrl-d`/`Ctrl-u` half page, `Ctrl-f`/`Ctrl-b` page |
+| Clipboard | `space y` copy, `space p`/`space P` paste (system clipboard) |
+
+`s`/`S`/`K`/`Alt-K` open a prompt and preview live as you type the regex;
+`Enter` commits, `Esc` restores the original selection.
+
+## License
+
+MIT

packages/codemirror-helix/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@gregorlohaus/codemirror-helix",
+  "version": "0.1.0",
+  "description": "Helix-editor-style modal editing for CodeMirror 6 (multiple selections, select mode, goto/match modes, textobjects, surround, registers, search).",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": ["dist", "README.md"],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsc -p tsconfig.json",
+    "prepublishOnly": "tsc -p tsconfig.json"
+  },
+  "keywords": [
+    "codemirror",
+    "codemirror6",
+    "helix",
+    "modal",
+    "vim",
+    "editor",
+    "keybindings"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitea.gregorlohaus.com/gregor/gregorlohaus.com",
+    "directory": "packages/codemirror-helix"
+  },
+  "peerDependencies": {
+    "@codemirror/commands": "^6.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/search": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0"
+  },
+  "devDependencies": {
+    "@codemirror/commands": "^6.10.3",
+    "@codemirror/language": "^6.12.3",
+    "@codemirror/search": "^6.5.6",
+    "@codemirror/state": "^6.6.0",
+    "@codemirror/view": "^6.43.1",
+    "typescript": "^5.6.0"
+  }
+}

packages/codemirror-helix/src/commands.ts

@@ -0,0 +1,593 @@
+import {
+  EditorSelection,
+  type ChangeSpec,
+  type EditorState,
+  type SelectionRange,
+} from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import { indentLess, indentMore, redo, undo } from "@codemirror/commands";
+import { findNext, findPrevious, SearchQuery, setSearchQuery } from "@codemirror/search";
+import {
+  clearPending,
+  getHelix,
+  helixEffect,
+  readRegister,
+  setRegister,
+  type HelixMode,
+} from "./state";
+import * as M from "./motions";
+
+const settle = { ...clearPending() };
+
+function clamp(n: number, state: EditorState): number {
+  return Math.max(0, Math.min(n, state.doc.length));
+}
+
+function rangesText(state: EditorState, ranges: readonly SelectionRange[]): string {
+  return ranges.map((r) => state.doc.sliceString(r.from, r.to)).join("\n");
+}
+
+function maybeClipboard(register: string | null, text: string) {
+  if ((register === "+" || register === "*") && typeof navigator !== "undefined" && navigator.clipboard) {
+    void navigator.clipboard.writeText(text).catch(() => {});
+  }
+}
+
+/** After leaving an edit, choose the resting mode. */
+function restMode(current: HelixMode, target?: HelixMode): HelixMode {
+  if (target) return target;
+  return current === "select" ? "normal" : current;
+}
+
+// --- motion application ------------------------------------------------------
+
+export type PointFn = (state: EditorState, pos: number) => number;
+
+export interface MotionOpts {
+  extend: boolean;
+  span: boolean; // word-like: selects the traversed span in normal mode
+  count: number;
+}
+
+export function moveByPoint(view: EditorView, fn: PointFn, opts: MotionOpts) {
+  const { state } = view;
+  const selection = EditorSelection.create(
+    state.selection.ranges.map((r) => {
+      let head = r.head;
+      for (let i = 0; i < Math.max(1, opts.count); i++) head = fn(state, head);
+      head = clamp(head, state);
+      const anchor = opts.extend ? r.anchor : opts.span ? r.head : head;
+      return EditorSelection.range(clamp(anchor, state), head);
+    }),
+    state.selection.mainIndex,
+  );
+  view.dispatch({ selection, scrollIntoView: true });
+}
+
+export function moveVertical(view: EditorView, forward: boolean, opts: { extend: boolean; count: number }) {
+  const selection = EditorSelection.create(
+    view.state.selection.ranges.map((r) => {
+      let cur: SelectionRange = EditorSelection.cursor(r.head);
+      for (let i = 0; i < Math.max(1, opts.count); i++) cur = view.moveVertically(cur, forward);
+      return opts.extend
+        ? EditorSelection.range(r.anchor, cur.head)
+        : EditorSelection.cursor(cur.head);
+    }),
+    view.state.selection.mainIndex,
+  );
+  view.dispatch({ selection, scrollIntoView: true });
+}
+
+// --- insertion entry points --------------------------------------------------
+
+export function enterInsert(view: EditorView, posOf: (state: EditorState, r: SelectionRange) => number) {
+  const { state } = view;
+  const selection = EditorSelection.create(
+    state.selection.ranges.map((r) => EditorSelection.cursor(clamp(posOf(state, r), state))),
+    state.selection.mainIndex,
+  );
+  view.dispatch({ selection, effects: helixEffect.of({ mode: "insert", ...settle }) });
+}
+
+export function openLine(view: EditorView, above: boolean) {
+  const { state } = view;
+  const seen = new Set<number>();
+  const changes: ChangeSpec[] = [];
+  for (const r of state.selection.ranges) {
+    const line = state.doc.lineAt(r.head);
+    if (seen.has(line.number)) continue;
+    seen.add(line.number);
+    const indent = line.text.match(/^\s*/)?.[0] ?? "";
+    changes.push(above ? { from: line.from, insert: `${indent}\n` } : { from: line.to, insert: `\n${indent}` });
+  }
+  const changeSet = state.changes(changes);
+  // Place a cursor on each newly opened line.
+  const selection = EditorSelection.create(
+    [...seen].map((n) => {
+      const line = state.doc.line(n);
+      const pos = above ? line.from : line.to;
+      const mapped = changeSet.mapPos(pos, 1);
+      return EditorSelection.cursor(mapped);
+    }),
+  );
+  view.dispatch({
+    changes: changeSet,
+    selection,
+    effects: helixEffect.of({ mode: "insert", ...settle }),
+    scrollIntoView: true,
+  });
+}
+
+// --- delete / change / yank / paste -----------------------------------------
+
+interface DeleteOpts {
+  insert?: boolean; // change (c)
+}
+
+export function deleteSelection(view: EditorView, opts: DeleteOpts = {}) {
+  const { state } = view;
+  const helix = getHelix(state);
+  const specs = state.selection.ranges.map((r) => ({
+    from: r.from,
+    to: r.empty ? Math.min(r.to + 1, state.doc.length) : r.to,
+  }));
+  const yanked = specs.map((s) => state.doc.sliceString(s.from, s.to)).join("\n");
+  const changeSet = state.changes(specs.map((s) => ({ from: s.from, to: s.to, insert: "" })));
+  const selection = EditorSelection.create(
+    specs.map((s) => EditorSelection.cursor(changeSet.mapPos(s.from, -1))),
+    state.selection.mainIndex,
+  );
+  view.dispatch({
+    changes: changeSet,
+    selection,
+    effects: [
+      setRegister.of({ name: helix.register ?? '"', text: yanked }),
+      helixEffect.of({ mode: opts.insert ? "insert" : restMode(helix.mode), ...settle }),
+    ],
+    scrollIntoView: true,
+  });
+  maybeClipboard(helix.register, yanked);
+}
+
+export function yankSelection(view: EditorView) {
+  const { state } = view;
+  const helix = getHelix(state);
+  const text = rangesText(state, state.selection.ranges);
+  view.dispatch({
+    effects: [
+      setRegister.of({ name: helix.register ?? '"', text }),
+      helixEffect.of({ mode: restMode(helix.mode), ...settle }),
+    ],
+  });
+  maybeClipboard(helix.register, text);
+}
+
+export function paste(view: EditorView, before: boolean) {
+  const { state } = view;
+  const helix = getHelix(state);
+  const text = readRegister(state, helix.register);
+  if (!text) return;
+  const linewise = text.endsWith("\n");
+  const changes: { from: number; to: number; insert: string }[] = [];
+  for (const r of state.selection.ranges) {
+    if (linewise) {
+      const line = state.doc.lineAt(before ? r.from : r.to);
+      if (before) changes.push({ from: line.from, to: line.from, insert: text });
+      else changes.push({ from: line.to, to: line.to, insert: `\n${text.replace(/\n$/, "")}` });
+    } else {
+      const at = before ? r.from : r.to;
+      changes.push({ from: at, to: at, insert: text });
+    }
+  }
+  const changeSet = state.changes(changes);
+  view.dispatch({
+    changes: changeSet,
+    selection: state.selection.map(changeSet),
+    effects: helixEffect.of(settle),
+    scrollIntoView: true,
+  });
+}
+
+/** R: replace selections with the register contents. */
+export function replaceWithYank(view: EditorView) {
+  const { state } = view;
+  const helix = getHelix(state);
+  const text = readRegister(state, helix.register);
+  if (!text) return;
+  const changes = state.selection.ranges.map((r) => ({ from: r.from, to: r.to, insert: text }));
+  const changeSet = state.changes(changes);
+  view.dispatch({
+    changes: changeSet,
+    selection: state.selection.map(changeSet),
+    effects: helixEffect.of(settle),
+    scrollIntoView: true,
+  });
+}
+
+/** r{char}: replace every selected character with `char`. */
+export function replaceChar(view: EditorView, char: string) {
+  if (char.length !== 1) return;
+  const { state } = view;
+  const changes = state.selection.ranges
+    .map((r) => {
+      const from = r.from;
+      const to = r.empty ? Math.min(r.to + 1, state.doc.length) : r.to;
+      const text = state.doc.sliceString(from, to).replace(/[^\n]/g, char);
+      return { from, to, insert: text };
+    })
+    .filter((c) => c.to > c.from);
+  if (!changes.length) return;
+  view.dispatch({ changes, effects: helixEffect.of(settle) });
+}
+
+type CaseMode = "toggle" | "lower" | "upper";
+
+export function changeCase(view: EditorView, mode: CaseMode) {
+  const { state } = view;
+  const changes = state.selection.ranges
+    .map((r) => {
+      const from = r.from;
+      const to = r.empty ? Math.min(r.to + 1, state.doc.length) : r.to;
+      const text = state.doc.sliceString(from, to);
+      const next =
+        mode === "lower"
+          ? text.toLowerCase()
+          : mode === "upper"
+            ? text.toUpperCase()
+            : text.replace(/[a-zA-Z]/g, (c) => (c === c.toLowerCase() ? c.toUpperCase() : c.toLowerCase()));
+      return { from, to, insert: next };
+    })
+    .filter((c) => c.to > c.from);
+  if (!changes.length) return;
+  view.dispatch({ changes, effects: helixEffect.of(settle) });
+}
+
+/** J: join the lines spanned by each selection into one. */
+export function joinLines(view: EditorView) {
+  const { state } = view;
+  const changes: ChangeSpec[] = [];
+  for (const r of state.selection.ranges) {
+    const startLine = state.doc.lineAt(r.from).number;
+    const endLine = state.doc.lineAt(r.to).number;
+    const last = Math.max(endLine, startLine + 1);
+    for (let n = startLine; n < last && n < state.doc.lines; n++) {
+      const line = state.doc.line(n);
+      const nextLine = state.doc.line(n + 1);
+      const trimmed = nextLine.text.match(/^\s*/)?.[0].length ?? 0;
+      changes.push({ from: line.to, to: nextLine.from + trimmed, insert: " " });
+    }
+  }
+  if (!changes.length) return;
+  view.dispatch({ changes, effects: helixEffect.of(settle), scrollIntoView: true });
+}
+
+export function indent(view: EditorView, less: boolean) {
+  (less ? indentLess : indentMore)(view);
+  view.dispatch({ effects: helixEffect.of(settle) });
+}
+
+export function undoCmd(view: EditorView) {
+  undo(view);
+}
+export function redoCmd(view: EditorView) {
+  redo(view);
+}
+
+// --- selection manipulation --------------------------------------------------
+
+function setSelection(view: EditorView, ranges: SelectionRange[], mainIndex?: number) {
+  if (!ranges.length) return;
+  view.dispatch({
+    selection: EditorSelection.create(ranges, mainIndex ?? ranges.length - 1),
+    scrollIntoView: true,
+  });
+}
+
+export function collapseToCursor(view: EditorView) {
+  setSelection(
+    view,
+    view.state.selection.ranges.map((r) => EditorSelection.cursor(r.head)),
+    view.state.selection.mainIndex,
+  );
+}
+
+export function flipSelections(view: EditorView) {
+  setSelection(
+    view,
+    view.state.selection.ranges.map((r) => EditorSelection.range(r.head, r.anchor)),
+    view.state.selection.mainIndex,
+  );
+}
+
+export function ensureForward(view: EditorView) {
+  setSelection(
+    view,
+    view.state.selection.ranges.map((r) => EditorSelection.range(r.from, r.to)),
+    view.state.selection.mainIndex,
+  );
+}
+
+export function keepPrimary(view: EditorView) {
+  const main = view.state.selection.main;
+  setSelection(view, [main], 0);
+}
+
+export function removePrimary(view: EditorView) {
+  const { ranges, mainIndex } = view.state.selection;
+  if (ranges.length < 2) return;
+  const remaining = ranges.filter((_, i) => i !== mainIndex);
+  setSelection(view, remaining, Math.min(mainIndex, remaining.length - 1));
+}
+
+export function rotatePrimary(view: EditorView, forward: boolean) {
+  const { ranges, mainIndex } = view.state.selection;
+  if (ranges.length < 2) return;
+  const next = (mainIndex + (forward ? 1 : -1) + ranges.length) % ranges.length;
+  setSelection(view, [...ranges], next);
+}
+
+export function selectAll(view: EditorView) {
+  setSelection(view, [EditorSelection.range(0, view.state.doc.length)], 0);
+}
+
+export function trimSelections(view: EditorView) {
+  const { state } = view;
+  const ranges: SelectionRange[] = [];
+  for (const r of state.selection.ranges) {
+    const text = state.doc.sliceString(r.from, r.to);
+    const lead = text.match(/^\s*/)?.[0].length ?? 0;
+    const trail = text.match(/\s*$/)?.[0].length ?? 0;
+    const from = r.from + lead;
+    const to = Math.max(from, r.to - trail);
+    ranges.push(EditorSelection.range(from, to));
+  }
+  setSelection(view, ranges, state.selection.mainIndex);
+}
+
+/** x: extend each selection to whole line(s); repeat grows downward. */
+export function selectLine(view: EditorView, count: number) {
+  const { state } = view;
+  const ranges = state.selection.ranges.map((r) => {
+    const startLine = state.doc.lineAt(r.from);
+    let endLine = state.doc.lineAt(r.to);
+    const from = startLine.from;
+    let to = Math.min(endLine.to + 1, state.doc.length);
+    const whole = r.from === from && r.to === to;
+    const steps = whole ? Math.max(1, count) : Math.max(0, count - 1);
+    for (let i = 0; i < steps && endLine.number < state.doc.lines; i++) {
+      endLine = state.doc.line(endLine.number + 1);
+      to = Math.min(endLine.to + 1, state.doc.length);
+    }
+    return EditorSelection.range(from, to);
+  });
+  setSelection(view, ranges, state.selection.mainIndex);
+}
+
+/** X: extend selections to cover full lines without crossing into the next. */
+export function extendToLineBounds(view: EditorView) {
+  const { state } = view;
+  const ranges = state.selection.ranges.map((r) =>
+    EditorSelection.range(state.doc.lineAt(r.from).from, state.doc.lineAt(r.to).to),
+  );
+  setSelection(view, ranges, state.selection.mainIndex);
+}
+
+/** C / Alt-C: copy each selection onto the next/previous line at the same columns. */
+export function copySelectionToLine(view: EditorView, below: boolean) {
+  const { state } = view;
+  const additions: SelectionRange[] = [];
+  for (const r of state.selection.ranges) {
+    const anchorLine = state.doc.lineAt(r.anchor);
+    const headLine = state.doc.lineAt(r.head);
+    const anchorCol = r.anchor - anchorLine.from;
+    const headCol = r.head - headLine.from;
+    const targetAnchorNo = anchorLine.number + (below ? 1 : -1);
+    const targetHeadNo = headLine.number + (below ? 1 : -1);
+    if (targetAnchorNo < 1 || targetAnchorNo > state.doc.lines) continue;
+    if (targetHeadNo < 1 || targetHeadNo > state.doc.lines) continue;
+    const ta = state.doc.line(targetAnchorNo);
+    const th = state.doc.line(targetHeadNo);
+    additions.push(
+      EditorSelection.range(
+        Math.min(ta.from + anchorCol, ta.to),
+        Math.min(th.from + headCol, th.to),
+      ),
+    );
+  }
+  if (!additions.length) return;
+  const all = [...state.selection.ranges, ...additions];
+  setSelection(view, all, all.length - 1);
+}
+
+function restoreBase(view: EditorView, base: EditorSelection) {
+  view.dispatch({ selection: base, scrollIntoView: true });
+}
+
+/**
+ * s: keep only the regex matches found within each selection of `base`.
+ * `base` is the selection captured when the prompt opened, so this can be
+ * called live on every keystroke without compounding.
+ */
+export function selectRegexInSelections(
+  view: EditorView,
+  pattern: string,
+  base: EditorSelection = view.state.selection,
+) {
+  if (!pattern) return restoreBase(view, base);
+  let re: RegExp;
+  try {
+    re = new RegExp(pattern, "g");
+  } catch {
+    return; // incomplete/invalid regex: leave the last good preview in place
+  }
+  const { state } = view;
+  const ranges: SelectionRange[] = [];
+  for (const r of base.ranges) {
+    const text = state.doc.sliceString(r.from, r.to);
+    for (const m of text.matchAll(re)) {
+      const from = r.from + (m.index ?? 0);
+      const to = from + m[0].length;
+      ranges.push(EditorSelection.range(from, Math.max(from, to)));
+      if (m[0].length === 0) re.lastIndex++;
+    }
+  }
+  if (ranges.length) setSelection(view, ranges, ranges.length - 1);
+  else restoreBase(view, base);
+}
+
+/** S: split each selection of `base` on the regex, keeping the pieces between. */
+export function splitOnRegex(
+  view: EditorView,
+  pattern: string,
+  base: EditorSelection = view.state.selection,
+) {
+  if (!pattern) return restoreBase(view, base);
+  let re: RegExp;
+  try {
+    re = new RegExp(pattern, "g");
+  } catch {
+    return;
+  }
+  const { state } = view;
+  const ranges: SelectionRange[] = [];
+  for (const r of base.ranges) {
+    const text = state.doc.sliceString(r.from, r.to);
+    let last = 0;
+    for (const m of text.matchAll(re)) {
+      const idx = m.index ?? 0;
+      ranges.push(EditorSelection.range(r.from + last, r.from + idx));
+      last = idx + m[0].length;
+      if (m[0].length === 0) re.lastIndex++;
+    }
+    ranges.push(EditorSelection.range(r.from + last, r.to));
+  }
+  const filtered = ranges.filter((r) => r.to >= r.from);
+  if (filtered.length) setSelection(view, filtered, filtered.length - 1);
+  else restoreBase(view, base);
+}
+
+/** Keep (or remove) selections of `base` whose text matches the regex. */
+export function filterSelections(
+  view: EditorView,
+  pattern: string,
+  keep: boolean,
+  base: EditorSelection = view.state.selection,
+) {
+  if (!pattern) return restoreBase(view, base);
+  let re: RegExp;
+  try {
+    re = new RegExp(pattern);
+  } catch {
+    return;
+  }
+  const { state } = view;
+  const ranges = base.ranges.filter((r) => {
+    const matches = re.test(state.doc.sliceString(r.from, r.to));
+    return keep ? matches : !matches;
+  });
+  if (ranges.length) setSelection(view, ranges, ranges.length - 1);
+  else restoreBase(view, base);
+}
+
+// --- surround ----------------------------------------------------------------
+
+const SURROUND_PAIRS: Record<string, [string, string]> = {
+  "(": ["(", ")"],
+  ")": ["(", ")"],
+  "[": ["[", "]"],
+  "]": ["[", "]"],
+  "{": ["{", "}"],
+  "}": ["{", "}"],
+  "<": ["<", ">"],
+  ">": ["<", ">"],
+};
+
+function surroundPair(ch: string): [string, string] {
+  return SURROUND_PAIRS[ch] ?? [ch, ch];
+}
+
+/** ms{char}: wrap each selection in the chosen pair. */
+export function surroundAdd(view: EditorView, ch: string) {
+  const [open, close] = surroundPair(ch);
+  const { state } = view;
+  const changes: ChangeSpec[] = [];
+  for (const r of state.selection.ranges) {
+    changes.push({ from: r.from, insert: open });
+    changes.push({ from: r.to, insert: close });
+  }
+  const changeSet = state.changes(changes);
+  view.dispatch({
+    changes: changeSet,
+    selection: state.selection.map(changeSet),
+    effects: helixEffect.of(settle),
+  });
+}
+
+/** md{char}: remove the surrounding pair around each selection. */
+export function surroundDelete(view: EditorView, ch: string) {
+  const [open, close] = surroundPair(ch);
+  const { state } = view;
+  const changes: { from: number; to: number; insert: string }[] = [];
+  for (const r of state.selection.ranges) {
+    const openPos = M.findOpen(state, r.head, open, close);
+    const closePos = openPos === null ? null : M.findClose(state, openPos, open, close);
+    if (openPos === null || closePos === null) continue;
+    changes.push({ from: openPos, to: openPos + 1, insert: "" });
+    changes.push({ from: closePos, to: closePos + 1, insert: "" });
+  }
+  if (!changes.length) return;
+  view.dispatch({ changes, effects: helixEffect.of(settle) });
+}
+
+/** mr{from}{to}: replace the surrounding pair. */
+export function surroundReplace(view: EditorView, fromCh: string, toCh: string) {
+  const [open, close] = surroundPair(fromCh);
+  const [newOpen, newClose] = surroundPair(toCh);
+  const { state } = view;
+  const changes: { from: number; to: number; insert: string }[] = [];
+  for (const r of state.selection.ranges) {
+    const openPos = M.findOpen(state, r.head, open, close);
+    const closePos = openPos === null ? null : M.findClose(state, openPos, open, close);
+    if (openPos === null || closePos === null) continue;
+    changes.push({ from: openPos, to: openPos + 1, insert: newOpen });
+    changes.push({ from: closePos, to: closePos + 1, insert: newClose });
+  }
+  if (!changes.length) return;
+  view.dispatch({ changes, effects: helixEffect.of(settle) });
+}
+
+// --- search ------------------------------------------------------------------
+
+export function runSearch(view: EditorView, query: string, reverse: boolean) {
+  if (!query) return;
+  view.dispatch({ effects: setSearchQuery.of(new SearchQuery({ search: query, regexp: true })) });
+  (reverse ? findPrevious : findNext)(view);
+}
+
+export function searchNext(view: EditorView, reverse: boolean) {
+  (reverse ? findPrevious : findNext)(view);
+}
+
+export function searchSelection(view: EditorView, reverse: boolean) {
+  const text = view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to);
+  if (!text) return;
+  view.dispatch({
+    effects: setSearchQuery.of(new SearchQuery({ search: text, regexp: false })),
+  });
+  (reverse ? findPrevious : findNext)(view);
+}
+
+// --- view scrolling ----------------------------------------------------------
+
+export function scrollTo(view: EditorView, y: "center" | "start" | "end") {
+  const pos = view.state.selection.main.head;
+  view.dispatch({ effects: EditorView.scrollIntoView(pos, { y }) });
+}
+
+export function halfPage(view: EditorView, forward: boolean, extend: boolean) {
+  const lineHeight = view.defaultLineHeight || 16;
+  const lines = Math.max(1, Math.floor(view.dom.clientHeight / lineHeight / 2));
+  moveVertical(view, forward, { extend, count: lines });
+}
+
+export { restMode };

packages/codemirror-helix/src/index.ts

@@ -0,0 +1,51 @@
+import { EditorState, type Extension } from "@codemirror/state";
+import { search } from "@codemirror/search";
+import { helixState, registersField } from "./state";
+import { blockCursor, helixStatusPanel, helixTheme, modeEditorClass } from "./view";
+import { helixPrompt } from "./prompt";
+import { helixKeymap, type HelixOptions } from "./keymap";
+
+export interface HelixConfig extends HelixOptions {
+  /** Render the bottom status line. Default: true. */
+  statusBar?: boolean;
+  /** Start the editor in Insert mode instead of Normal. Default: false. */
+  startInInsert?: boolean;
+}
+
+/**
+ * Helix-style modal editing for CodeMirror 6.
+ *
+ * Add to a CodeMirror instance's `extensions`. Requires a selection drawer
+ * (CodeMirror's `basicSetup` or `drawSelection()`) for multi-cursor rendering.
+ *
+ * ```ts
+ * import { basicSetup } from "codemirror";
+ * import { helix } from "codemirror-helix";
+ *
+ * new EditorView({ extensions: [basicSetup, helix()], parent });
+ * ```
+ */
+export function helix(config: HelixConfig = {}): Extension {
+  return [
+    EditorState.allowMultipleSelections.of(true),
+    helixState.init(() => ({
+      mode: config.startInInsert ? "insert" : "normal",
+      pending: null,
+      count: 0,
+      register: null,
+      lastFind: null,
+    })),
+    registersField,
+    search(),
+    helixKeymap(config),
+    blockCursor,
+    modeEditorClass,
+    helixTheme,
+    ...(config.statusBar === false ? [] : [helixStatusPanel]),
+    helixPrompt,
+  ];
+}
+
+export { getMode, getHelix, helixState } from "./state";
+export type { HelixMode, HelixStateValue } from "./state";
+export type { HelixOptions } from "./keymap";

packages/codemirror-helix/src/keymap.ts

@@ -0,0 +1,562 @@
+import { EditorSelection, Prec, type EditorState, type Extension } from "@codemirror/state";
+import { EditorView } from "@codemirror/view";
+import {
+  clearPending,
+  getHelix,
+  helixEffect,
+  type HelixStateValue,
+  type Pending,
+} from "./state";
+import * as C from "./commands";
+import * as M from "./motions";
+import { textObject } from "./textobjects";
+import { openPrompt } from "./prompt";
+
+export interface HelixOptions {
+  /**
+   * Return true to let a pressed Escape fall through to other handlers instead
+   * of leaving Insert mode — e.g. when an autocompletion popup is open.
+   */
+  escapeGuard?: (state: EditorState) => boolean;
+}
+
+function reset(view: EditorView, extra: Partial<HelixStateValue> = {}) {
+  view.dispatch({ effects: helixEffect.of({ ...clearPending(), ...extra }) });
+}
+
+function setPending(view: EditorView, pending: Pending) {
+  view.dispatch({ effects: helixEffect.of({ pending }) });
+}
+
+// --- find char ---------------------------------------------------------------
+
+function doFind(view: EditorView, kind: "f" | "t" | "F" | "T", char: string, helix: HelixStateValue) {
+  const fn: C.PointFn = (state, pos) => {
+    const found = M.findCharOnLine(state, pos, char, kind);
+    return found === null ? pos : found;
+  };
+  C.moveByPoint(view, fn, { extend: helix.mode === "select", span: false, count: helix.count || 1 });
+}
+
+// --- goto mode ---------------------------------------------------------------
+
+function gotoAbsolute(view: EditorView, pos: number, select: boolean) {
+  const anchor = select ? view.state.selection.main.anchor : pos;
+  view.dispatch({ selection: EditorSelection.range(anchor, pos), scrollIntoView: true });
+}
+
+function doGoto(view: EditorView, key: string, helix: HelixStateValue) {
+  const select = helix.mode === "select";
+  const { state } = view;
+  switch (key) {
+    case "h":
+      C.moveByPoint(view, (s, p) => s.doc.lineAt(p).from, { extend: select, span: false, count: 1 });
+      break;
+    case "l":
+      C.moveByPoint(view, (s, p) => s.doc.lineAt(p).to, { extend: select, span: false, count: 1 });
+      break;
+    case "s":
+      C.moveByPoint(view, (s, p) => M.firstNonBlank(s, s.doc.lineAt(p).number), {
+        extend: select,
+        span: false,
+        count: 1,
+      });
+      break;
+    case "g":
+      gotoAbsolute(view, helix.count > 0 ? state.doc.line(Math.min(helix.count, state.doc.lines)).from : 0, select);
+      break;
+    case "e":
+      gotoAbsolute(view, state.doc.length, select);
+      break;
+    case "t":
+      gotoAbsolute(view, state.doc.lineAt(view.viewport.from).from, select);
+      break;
+    case "b":
+      gotoAbsolute(view, state.doc.lineAt(view.viewport.to).from, select);
+      break;
+    case "c":
+      gotoAbsolute(view, state.doc.lineAt(Math.floor((view.viewport.from + view.viewport.to) / 2)).from, select);
+      break;
+    default:
+      break;
+  }
+}
+
+// --- match mode --------------------------------------------------------------
+
+function doMatch(view: EditorView, key: string, helix: HelixStateValue) {
+  switch (key) {
+    case "m":
+      C.moveByPoint(
+        view,
+        (s, p) => {
+          const m = M.matchingBracket(s, p);
+          return m === null ? p : m;
+        },
+        { extend: helix.mode === "select", span: false, count: 1 },
+      );
+      reset(view);
+      return;
+    case "i":
+      setPending(view, { type: "textobject", around: false });
+      return;
+    case "a":
+      setPending(view, { type: "textobject", around: true });
+      return;
+    case "s":
+      setPending(view, { type: "surround-add" });
+      return;
+    case "d":
+      setPending(view, { type: "surround-delete" });
+      return;
+    case "r":
+      setPending(view, { type: "surround-replace" });
+      return;
+    default:
+      reset(view);
+  }
+}
+
+function doTextObject(view: EditorView, key: string, around: boolean) {
+  const { state } = view;
+  const ranges = state.selection.ranges.map((r) => {
+    const span = textObject(state, r, key, around);
+    return span ? EditorSelection.range(span.from, span.to) : r;
+  });
+  view.dispatch({
+    selection: EditorSelection.create(ranges, state.selection.mainIndex),
+    scrollIntoView: true,
+  });
+}
+
+// --- view mode (z) -----------------------------------------------------------
+
+function doView(view: EditorView, key: string) {
+  if (key === "z") C.scrollTo(view, "center");
+  else if (key === "t") C.scrollTo(view, "start");
+  else if (key === "b") C.scrollTo(view, "end");
+}
+
+// --- space menu (clipboard subset) ------------------------------------------
+
+function doSpace(view: EditorView, key: string) {
+  const text = view.state.sliceDoc(view.state.selection.main.from, view.state.selection.main.to);
+  if (key === "y") {
+    if (typeof navigator !== "undefined" && navigator.clipboard && text) {
+      void navigator.clipboard.writeText(text).catch(() => {});
+    }
+  } else if (key === "p" || key === "P") {
+    if (typeof navigator !== "undefined" && navigator.clipboard) {
+      void navigator.clipboard.readText().then((clip) => {
+        if (!clip) return;
+        const changes = view.state.selection.ranges.map((r) => {
+          const at = key === "P" ? r.from : r.to;
+          return { from: at, to: at, insert: clip };
+        });
+        const set = view.state.changes(changes);
+        view.dispatch({ changes: set, selection: view.state.selection.map(set) });
+      });
+    }
+  }
+}
+
+// --- pending dispatch --------------------------------------------------------
+
+function handlePending(view: EditorView, pending: Pending, key: string, helix: HelixStateValue) {
+  switch (pending.type) {
+    case "register":
+      if (key.length === 1) view.dispatch({ effects: helixEffect.of({ register: key, pending: null }) });
+      else reset(view);
+      return;
+    case "find":
+      if (key.length === 1) {
+        doFind(view, pending.kind, key, helix);
+        reset(view, { lastFind: { kind: pending.kind, char: key } });
+      } else reset(view);
+      return;
+    case "replace":
+      if (key.length === 1) C.replaceChar(view, key);
+      reset(view);
+      return;
+    case "g":
+      doGoto(view, key, helix);
+      reset(view);
+      return;
+    case "z":
+      doView(view, key);
+      reset(view);
+      return;
+    case "space":
+      doSpace(view, key);
+      reset(view);
+      return;
+    case "m":
+      doMatch(view, key, helix);
+      return;
+    case "textobject":
+      doTextObject(view, key, pending.around);
+      reset(view);
+      return;
+    case "surround-add":
+      if (key.length === 1) C.surroundAdd(view, key);
+      reset(view);
+      return;
+    case "surround-delete":
+      if (key.length === 1) C.surroundDelete(view, key);
+      reset(view);
+      return;
+    case "surround-replace":
+      if (pending.from === undefined) {
+        view.dispatch({ effects: helixEffect.of({ pending: { type: "surround-replace", from: key } }) });
+      } else {
+        C.surroundReplace(view, pending.from, key);
+        reset(view);
+      }
+      return;
+  }
+}
+
+// --- terminal commands -------------------------------------------------------
+
+function handleAlt(view: EditorView, key: string, helix: HelixStateValue): boolean {
+  switch (key) {
+    case ";":
+      C.flipSelections(view);
+      return true;
+    case ":":
+      C.ensureForward(view);
+      return true;
+    case ",":
+      C.removePrimary(view);
+      return true;
+    case "c":
+    case "C":
+      C.copySelectionToLine(view, false);
+      return true;
+    case "`":
+      C.changeCase(view, "upper");
+      return true;
+    case ".":
+      if (helix.lastFind) doFind(view, helix.lastFind.kind, helix.lastFind.char, helix);
+      return true;
+    case "k":
+    case "K": {
+      const base = view.state.selection;
+      openPrompt(view, {
+        label: "remove:",
+        onChange: (p) => C.filterSelections(view, p, false, base),
+        onSubmit: (p) => C.filterSelections(view, p, false, base),
+        onCancel: () => view.dispatch({ selection: base }),
+      });
+      return true;
+    }
+    default:
+      return false;
+  }
+}
+
+function handleCommand(view: EditorView, key: string, event: KeyboardEvent, helix: HelixStateValue): boolean {
+  const extend = helix.mode === "select";
+  const count = helix.count || 1;
+
+  if (event.altKey) return handleAlt(view, key, helix);
+
+  switch (key) {
+    // movement
+    case "h":
+    case "ArrowLeft":
+      C.moveByPoint(view, (_s, p) => Math.max(0, p - 1), { extend, span: false, count });
+      return true;
+    case "l":
+    case "ArrowRight":
+      C.moveByPoint(view, (s, p) => Math.min(s.doc.length, p + 1), { extend, span: false, count });
+      return true;
+    case "j":
+    case "ArrowDown":
+      C.moveVertical(view, true, { extend, count });
+      return true;
+    case "k":
+    case "ArrowUp":
+      C.moveVertical(view, false, { extend, count });
+      return true;
+    case "w":
+      C.moveByPoint(view, (s, p) => M.nextWordStart(s, p, false), { extend, span: true, count });
+      return true;
+    case "W":
+      C.moveByPoint(view, (s, p) => M.nextWordStart(s, p, true), { extend, span: true, count });
+      return true;
+    case "b":
+      C.moveByPoint(view, (s, p) => M.prevWordStart(s, p, false), { extend, span: true, count });
+      return true;
+    case "B":
+      C.moveByPoint(view, (s, p) => M.prevWordStart(s, p, true), { extend, span: true, count });
+      return true;
+    case "e":
+      C.moveByPoint(view, (s, p) => M.nextWordEnd(s, p, false), { extend, span: true, count });
+      return true;
+    case "E":
+      C.moveByPoint(view, (s, p) => M.nextWordEnd(s, p, true), { extend, span: true, count });
+      return true;
+    case "Home":
+      C.moveByPoint(view, (s, p) => s.doc.lineAt(p).from, { extend, span: false, count: 1 });
+      return true;
+    case "End":
+      C.moveByPoint(view, (s, p) => s.doc.lineAt(p).to, { extend, span: false, count: 1 });
+      return true;
+
+    // selection manipulation
+    case "x":
+      C.selectLine(view, count);
+      return true;
+    case "X":
+      C.extendToLineBounds(view);
+      return true;
+    case "%":
+      C.selectAll(view);
+      return true;
+    case ";":
+      C.collapseToCursor(view);
+      return true;
+    case ",":
+      C.keepPrimary(view);
+      return true;
+    case "(":
+      C.rotatePrimary(view, false);
+      return true;
+    case ")":
+      C.rotatePrimary(view, true);
+      return true;
+    case "_":
+      C.trimSelections(view);
+      return true;
+    case "C":
+      C.copySelectionToLine(view, true);
+      return true;
+
+    // mode switches
+    case "v":
+      view.dispatch({ effects: helixEffect.of({ mode: extend ? "normal" : "select" }) });
+      return true;
+    case "i":
+      C.enterInsert(view, (_s, r) => r.from);
+      return true;
+    case "a":
+      C.enterInsert(view, (_s, r) => r.to);
+      return true;
+    case "I":
+      C.enterInsert(view, (s, r) => M.firstNonBlank(s, s.doc.lineAt(r.head).number));
+      return true;
+    case "A":
+      C.enterInsert(view, (s, r) => s.doc.lineAt(r.head).to);
+      return true;
+    case "o":
+      C.openLine(view, false);
+      return true;
+    case "O":
+      C.openLine(view, true);
+      return true;
+
+    // edits
+    case "d":
+    case "Delete":
+      C.deleteSelection(view);
+      return true;
+    case "c":
+      C.deleteSelection(view, { insert: true });
+      return true;
+    case "y":
+      C.yankSelection(view);
+      return true;
+    case "p":
+      C.paste(view, false);
+      return true;
+    case "P":
+      C.paste(view, true);
+      return true;
+    case "R":
+      C.replaceWithYank(view);
+      return true;
+    case "~":
+      C.changeCase(view, "toggle");
+      return true;
+    case "`":
+      C.changeCase(view, "lower");
+      return true;
+    case "J":
+      C.joinLines(view);
+      return true;
+    case ">":
+      C.indent(view, false);
+      return true;
+    case "<":
+      C.indent(view, true);
+      return true;
+    case "u":
+      C.undoCmd(view);
+      return true;
+    case "U":
+      C.redoCmd(view);
+      return true;
+
+    // search
+    case "/":
+      openPrompt(view, { label: "/", onSubmit: (q) => C.runSearch(view, q, false) });
+      return true;
+    case "?":
+      openPrompt(view, { label: "?", onSubmit: (q) => C.runSearch(view, q, true) });
+      return true;
+    case "n":
+      C.searchNext(view, false);
+      return true;
+    case "N":
+      C.searchNext(view, true);
+      return true;
+    case "*":
+      C.searchSelection(view, false);
+      return true;
+
+    // regex selection (live preview against the selection captured here)
+    case "s": {
+      const base = view.state.selection;
+      openPrompt(view, {
+        label: "select:",
+        onChange: (p) => C.selectRegexInSelections(view, p, base),
+        onSubmit: (p) => C.selectRegexInSelections(view, p, base),
+        onCancel: () => view.dispatch({ selection: base }),
+      });
+      return true;
+    }
+    case "S": {
+      const base = view.state.selection;
+      openPrompt(view, {
+        label: "split:",
+        onChange: (p) => C.splitOnRegex(view, p, base),
+        onSubmit: (p) => C.splitOnRegex(view, p, base),
+        onCancel: () => view.dispatch({ selection: base }),
+      });
+      return true;
+    }
+    case "K": {
+      const base = view.state.selection;
+      openPrompt(view, {
+        label: "keep:",
+        onChange: (p) => C.filterSelections(view, p, true, base),
+        onSubmit: (p) => C.filterSelections(view, p, true, base),
+        onCancel: () => view.dispatch({ selection: base }),
+      });
+      return true;
+    }
+
+    case "Escape":
+      C.collapseToCursor(view);
+      view.dispatch({ effects: helixEffect.of({ mode: "normal", ...clearPending() }) });
+      return true;
+
+    default:
+      return false;
+  }
+}
+
+function handleCtrl(view: EditorView, key: string, helix: HelixStateValue): boolean {
+  const extend = helix.mode === "select";
+  switch (key) {
+    case "d":
+      C.halfPage(view, true, extend);
+      return true;
+    case "u":
+      C.halfPage(view, false, extend);
+      return true;
+    case "f":
+      C.moveVertical(view, true, { extend, count: 20 });
+      return true;
+    case "b":
+      C.moveVertical(view, false, { extend, count: 20 });
+      return true;
+    default:
+      return false;
+  }
+}
+
+// --- top-level keydown -------------------------------------------------------
+
+export function helixKeymap(options: HelixOptions = {}): Extension {
+  return Prec.highest(
+    EditorView.domEventHandlers({
+      keydown(event, view) {
+        if (event.isComposing) return false;
+        const helix = getHelix(view.state);
+
+        if (helix.mode === "insert") {
+          if (event.key === "Escape") {
+            if (options.escapeGuard?.(view.state)) return false;
+            view.dispatch({ effects: helixEffect.of({ mode: "normal", ...clearPending() }) });
+            event.preventDefault();
+            return true;
+          }
+          return false;
+        }
+
+        if (event.metaKey) return false;
+
+        const key = event.key;
+
+        if (helix.pending) {
+          event.preventDefault();
+          handlePending(view, helix.pending, key, helix);
+          return true;
+        }
+
+        if (event.ctrlKey) {
+          if (handleCtrl(view, key, helix)) {
+            event.preventDefault();
+            reset(view);
+            return true;
+          }
+          return false;
+        }
+
+        // count digits (0 only continues an existing count)
+        if (!event.altKey && /^[0-9]$/.test(key) && !(key === "0" && helix.count === 0)) {
+          event.preventDefault();
+          view.dispatch({ effects: helixEffect.of({ count: helix.count * 10 + Number(key) }) });
+          return true;
+        }
+
+        // prefixes awaiting another key
+        if (!event.altKey) {
+          const prefix: Record<string, Pending> = {
+            g: { type: "g" },
+            m: { type: "m" },
+            z: { type: "z" },
+            " ": { type: "space" },
+            '"': { type: "register" },
+            f: { type: "find", kind: "f" },
+            t: { type: "find", kind: "t" },
+            F: { type: "find", kind: "F" },
+            T: { type: "find", kind: "T" },
+            r: { type: "replace" },
+          };
+          const pending = prefix[key];
+          if (pending) {
+            setPending(view, pending);
+            event.preventDefault();
+            return true;
+          }
+        }
+
+        if (handleCommand(view, key, event, helix)) {
+          event.preventDefault();
+          reset(view);
+          return true;
+        }
+
+        // Swallow stray printable keys so Normal/Select mode never types.
+        if (key.length === 1 || ["Enter", "Backspace", "Tab", "Delete"].includes(key)) {
+          event.preventDefault();
+          return true;
+        }
+        return false;
+      },
+    }),
+  );
+}

packages/codemirror-helix/src/motions.ts

@@ -0,0 +1,180 @@
+import type { EditorState } from "@codemirror/state";
+
+export type CharClass = "space" | "word" | "punct";
+
+export function charAt(state: EditorState, i: number): string {
+  return i >= 0 && i < state.doc.length ? state.doc.sliceString(i, i + 1) : "";
+}
+
+export function classOf(ch: string): CharClass {
+  if (ch === "" || /\s/.test(ch)) return "space";
+  if (/[\p{L}\p{N}_]/u.test(ch)) return "word";
+  return "punct";
+}
+
+// For WORD (big) motions only whitespace separates tokens.
+function bigClassOf(ch: string): CharClass {
+  return ch === "" || /\s/.test(ch) ? "space" : "word";
+}
+
+function classAt(state: EditorState, i: number, big: boolean): CharClass {
+  const ch = charAt(state, i);
+  return big ? bigClassOf(ch) : classOf(ch);
+}
+
+/** Helix `w`/`W`: move to the start of the next word. */
+export function nextWordStart(state: EditorState, pos: number, big: boolean): number {
+  const len = state.doc.length;
+  let i = pos;
+  if (i >= len) return len;
+  if (classAt(state, i, big) === "space") {
+    while (i < len && classAt(state, i, big) === "space") i++;
+  } else {
+    const cls = classAt(state, i, big);
+    while (i < len && classAt(state, i, big) === cls) i++;
+    while (i < len && classAt(state, i, big) === "space") i++;
+  }
+  return i;
+}
+
+/** Helix `b`/`B`: move to the start of the previous word. */
+export function prevWordStart(state: EditorState, pos: number, big: boolean): number {
+  let i = pos;
+  if (i <= 0) return 0;
+  i--;
+  while (i > 0 && classAt(state, i, big) === "space") i--;
+  const cls = classAt(state, i, big);
+  while (i > 0 && classAt(state, i - 1, big) === cls) i--;
+  return i;
+}
+
+/** Helix `e`/`E`: move to the end of the next word. */
+export function nextWordEnd(state: EditorState, pos: number, big: boolean): number {
+  const len = state.doc.length;
+  let i = pos + 1;
+  while (i < len && classAt(state, i, big) === "space") i++;
+  const cls = classAt(state, i, big);
+  while (i < len && classAt(state, i, big) === cls) i++;
+  return Math.min(i, len);
+}
+
+export function firstNonBlank(state: EditorState, line: number): number {
+  const l = state.doc.line(line);
+  return l.from + (l.text.match(/^\s*/)?.[0].length ?? 0);
+}
+
+/** f/t/F/T: find `target` from `pos`. Returns null if not found on the line. */
+export function findCharOnLine(
+  state: EditorState,
+  pos: number,
+  target: string,
+  kind: "f" | "t" | "F" | "T",
+): number | null {
+  const line = state.doc.lineAt(pos);
+  const forward = kind === "f" || kind === "t";
+  const till = kind === "t" || kind === "T";
+
+  if (forward) {
+    let i = pos + 1;
+    // `t` should skip an adjacent target so repeated presses advance.
+    if (till && charAt(state, i) === target) i++;
+    for (; i <= line.to; i++) {
+      if (charAt(state, i) === target) return till ? i - 1 : i;
+    }
+  } else {
+    let i = pos - 1;
+    if (till && charAt(state, i) === target) i--;
+    for (; i >= line.from; i--) {
+      if (charAt(state, i) === target) return till ? i + 1 : i;
+    }
+  }
+  return null;
+}
+
+const PAIRS: Record<string, { open: string; close: string }> = {
+  "(": { open: "(", close: ")" },
+  ")": { open: "(", close: ")" },
+  "[": { open: "[", close: "]" },
+  "]": { open: "[", close: "]" },
+  "{": { open: "{", close: "}" },
+  "}": { open: "{", close: "}" },
+  "<": { open: "<", close: ">" },
+  ">": { open: "<", close: ">" },
+};
+
+export function pairFor(ch: string): { open: string; close: string } | null {
+  return PAIRS[ch] ?? null;
+}
+
+/** Scan forward for the close that matches an open at/after `pos` (nesting-aware). */
+export function findClose(state: EditorState, from: number, open: string, close: string): number | null {
+  const len = state.doc.length;
+  let depth = 0;
+  for (let i = from; i < len; i++) {
+    const ch = charAt(state, i);
+    if (ch === open) depth++;
+    else if (ch === close) {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return null;
+}
+
+/** Scan backward for the open that matches a close at/before `pos` (nesting-aware). */
+export function findOpen(state: EditorState, from: number, open: string, close: string): number | null {
+  let depth = 0;
+  for (let i = from; i >= 0; i--) {
+    const ch = charAt(state, i);
+    if (ch === close) depth++;
+    else if (ch === open) {
+      depth--;
+      if (depth === 0) return i;
+    }
+  }
+  return null;
+}
+
+/** `mm`: position of the bracket matching the one at/under `pos`, or null. */
+export function matchingBracket(state: EditorState, pos: number): number | null {
+  for (const probe of [pos, pos - 1]) {
+    const ch = charAt(state, probe);
+    const pair = pairFor(ch);
+    if (!pair) continue;
+    if (ch === pair.open) return findClose2(state, probe, pair.open, pair.close);
+    return findOpen2(state, probe, pair.open, pair.close);
+  }
+  return null;
+}
+
+function findClose2(state: EditorState, openPos: number, open: string, close: string): number | null {
+  const len = state.doc.length;
+  let depth = 0;
+  for (let i = openPos; i < len; i++) {
+    const ch = charAt(state, i);
+    if (ch === open) depth++;
+    else if (ch === close && --depth === 0) return i;
+  }
+  return null;
+}
+
+function findOpen2(state: EditorState, closePos: number, open: string, close: string): number | null {
+  let depth = 0;
+  for (let i = closePos; i >= 0; i--) {
+    const ch = charAt(state, i);
+    if (ch === close) depth++;
+    else if (ch === open && --depth === 0) return i;
+  }
+  return null;
+}
+
+/** Paragraph bounds (blank-line delimited) containing `pos`. */
+export function paragraphAt(state: EditorState, pos: number): { from: number; to: number } {
+  const { doc } = state;
+  let startLine = doc.lineAt(pos).number;
+  let endLine = startLine;
+  const blank = (n: number) => doc.line(n).text.trim() === "";
+  while (startLine > 1 && !blank(startLine - 1)) startLine--;
+  while (endLine < doc.lines && !blank(endLine + 1)) endLine++;
+  return { from: doc.line(startLine).from, to: doc.line(endLine).to };
+}

packages/codemirror-helix/src/prompt.ts

@@ -0,0 +1,83 @@
+import { StateEffect, StateField } from "@codemirror/state";
+import { EditorView, showPanel, type Panel } from "@codemirror/view";
+
+export interface PromptConfig {
+  label: string;
+  initial?: string;
+  onSubmit: (value: string, view: EditorView) => void;
+  onChange?: (value: string, view: EditorView) => void;
+  onCancel?: (view: EditorView) => void;
+}
+
+const openPromptEffect = StateEffect.define<PromptConfig>();
+const closePromptEffect = StateEffect.define<null>();
+
+const promptState = StateField.define<PromptConfig | null>({
+  create: () => null,
+  update(value, tr) {
+    for (const effect of tr.effects) {
+      if (effect.is(openPromptEffect)) return effect.value;
+      if (effect.is(closePromptEffect)) return null;
+    }
+    return value;
+  },
+});
+
+export function openPrompt(view: EditorView, config: PromptConfig) {
+  view.dispatch({ effects: openPromptEffect.of(config) });
+  // Focus after the panel mounts.
+  requestAnimationFrame(() => {
+    const input = view.dom.querySelector<HTMLInputElement>(".cm-helix-prompt input");
+    input?.focus();
+    input?.select();
+  });
+}
+
+function closePrompt(view: EditorView) {
+  view.dispatch({ effects: closePromptEffect.of(null) });
+  view.focus();
+}
+
+function promptPanel(view: EditorView): Panel {
+  const config = view.state.field(promptState);
+  const dom = document.createElement("form");
+  dom.className = "cm-helix-prompt";
+
+  const label = document.createElement("label");
+  label.textContent = config?.label ?? "";
+  const input = document.createElement("input");
+  input.type = "text";
+  input.value = config?.initial ?? "";
+  input.spellcheck = false;
+  input.autocomplete = "off";
+
+  dom.append(label, input);
+
+  input.addEventListener("input", () => {
+    view.state.field(promptState)?.onChange?.(input.value, view);
+  });
+  input.addEventListener("keydown", (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const current = view.state.field(promptState);
+      closePrompt(view);
+      current?.onSubmit(input.value, view);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      const current = view.state.field(promptState);
+      closePrompt(view);
+      current?.onCancel?.(view);
+    }
+  });
+
+  return { dom, top: false };
+}
+
+export const helixPrompt = [
+  promptState,
+  showPanel.from(promptState, (config) => (config ? promptPanel : null)),
+];
+
+export function isPromptOpen(view: EditorView): boolean {
+  return view.state.field(promptState) !== null;
+}

packages/codemirror-helix/src/state.ts

@@ -0,0 +1,87 @@
+import { StateEffect, StateField, type EditorState } from "@codemirror/state";
+
+export type HelixMode = "normal" | "insert" | "select";
+
+/** A multi-key prefix or a command waiting for one more keystroke. */
+export type Pending =
+  | { type: "g" } // goto mode
+  | { type: "m" } // match mode
+  | { type: "z" } // view mode
+  | { type: "space" } // space menu (minimal)
+  | { type: "find"; kind: "f" | "t" | "F" | "T" } // awaiting target char
+  | { type: "replace" } // r{char}
+  | { type: "register" } // "{char}
+  | { type: "textobject"; around: boolean } // mi{o} / ma{o}
+  | { type: "surround-add" } // ms{char}
+  | { type: "surround-delete" } // md{char}
+  | { type: "surround-replace"; from?: string }; // mr{from}{to}
+
+export interface LastFind {
+  kind: "f" | "t" | "F" | "T";
+  char: string;
+}
+
+export interface HelixStateValue {
+  mode: HelixMode;
+  pending: Pending | null;
+  count: number; // 0 = no explicit count
+  register: string | null; // selected register for next yank/paste/delete
+  lastFind: LastFind | null;
+}
+
+const initial: HelixStateValue = {
+  mode: "normal",
+  pending: null,
+  count: 0,
+  register: null,
+  lastFind: null,
+};
+
+/** Patch the transient Helix state. */
+export const helixEffect = StateEffect.define<Partial<HelixStateValue>>();
+
+export const helixState = StateField.define<HelixStateValue>({
+  create: () => initial,
+  update(value, tr) {
+    let next = value;
+    for (const effect of tr.effects) {
+      if (effect.is(helixEffect)) next = { ...next, ...effect.value };
+    }
+    return next;
+  },
+});
+
+export function getHelix(state: EditorState): HelixStateValue {
+  return state.field(helixState);
+}
+
+export function getMode(state: EditorState): HelixMode {
+  return state.field(helixState).mode;
+}
+
+// --- registers ---------------------------------------------------------------
+
+export const setRegister = StateEffect.define<{ name: string; text: string }>();
+
+export const registersField = StateField.define<Map<string, string>>({
+  create: () => new Map(),
+  update(value, tr) {
+    let next = value;
+    for (const effect of tr.effects) {
+      if (effect.is(setRegister)) {
+        next = new Map(next);
+        next.set(effect.value.name, effect.value.text);
+      }
+    }
+    return next;
+  },
+});
+
+export function readRegister(state: EditorState, name: string | null): string {
+  return state.field(registersField).get(name ?? '"') ?? "";
+}
+
+/** Clear any pending prefix / count / register selection. */
+export function clearPending(): Partial<HelixStateValue> {
+  return { pending: null, count: 0, register: null };
+}

packages/codemirror-helix/src/textobjects.ts

@@ -0,0 +1,127 @@
+import type { EditorState, SelectionRange } from "@codemirror/state";
+import { charAt, classOf, findClose, findOpen, pairFor, paragraphAt } from "./motions";
+
+export interface Span {
+  from: number;
+  to: number;
+}
+
+function wordSpan(state: EditorState, pos: number, around: boolean): Span | null {
+  const cls = classOf(charAt(state, pos));
+  if (cls === "space") return null;
+  let from = pos;
+  let to = pos;
+  while (from > 0 && classOf(charAt(state, from - 1)) === cls) from--;
+  while (to < state.doc.length && classOf(charAt(state, to)) === cls) to++;
+  if (around) {
+    const start = to;
+    while (to < state.doc.length && classOf(charAt(state, to)) === "space") to++;
+    if (to === start) while (from > 0 && classOf(charAt(state, from - 1)) === "space") from--;
+  }
+  return { from, to };
+}
+
+function pairSpan(
+  state: EditorState,
+  pos: number,
+  open: string,
+  close: string,
+  around: boolean,
+): Span | null {
+  // If we sit on a bracket, anchor the search to it.
+  const here = charAt(state, pos);
+  const openPos =
+    here === open ? pos : findOpen(state, here === close ? pos - 1 : pos, open, close);
+  if (openPos === null) return null;
+  const closePos = findClose(state, openPos, open, close);
+  if (closePos === null) return null;
+  return around ? { from: openPos, to: closePos + 1 } : { from: openPos + 1, to: closePos };
+}
+
+function quoteSpan(state: EditorState, pos: number, quote: string, around: boolean): Span | null {
+  const line = state.doc.lineAt(pos);
+  const positions: number[] = [];
+  for (let i = line.from; i <= line.to; i++) if (charAt(state, i) === quote) positions.push(i);
+  for (let i = 0; i + 1 < positions.length; i += 2) {
+    const a = positions[i]!;
+    const b = positions[i + 1]!;
+    if (pos >= a && pos <= b + 1) {
+      return around ? { from: a, to: b + 1 } : { from: a + 1, to: b };
+    }
+  }
+  return null;
+}
+
+function paragraphSpan(state: EditorState, pos: number, around: boolean): Span {
+  const span = paragraphAt(state, pos);
+  if (!around) return span;
+  let to = span.to;
+  while (to < state.doc.length && state.doc.lineAt(to + 1).text.trim() === "") {
+    to = state.doc.lineAt(to + 1).to;
+  }
+  return { from: span.from, to };
+}
+
+const QUOTES = new Set(['"', "'", "`"]);
+
+/** Innermost enclosing bracket/quote pair (Helix `mi m` / `ma m`). */
+function nearestPair(state: EditorState, pos: number, around: boolean): Span | null {
+  const candidates: Span[] = [];
+  for (const ch of ["(", "[", "{", "<"]) {
+    const span = pairSpan(state, pos, ch, pairFor(ch)!.close, around);
+    if (span) candidates.push(span);
+  }
+  for (const q of QUOTES) {
+    const span = quoteSpan(state, pos, q, around);
+    if (span) candidates.push(span);
+  }
+  if (!candidates.length) return null;
+  // Smallest enclosing span wins.
+  return candidates.sort((a, b) => b.from - a.from || a.to - b.to)[0]!;
+}
+
+/**
+ * Resolve a Helix textobject for `mi{obj}` / `ma{obj}`.
+ * Returns null when nothing sensible encloses the cursor.
+ */
+export function textObject(
+  state: EditorState,
+  range: SelectionRange,
+  obj: string,
+  around: boolean,
+): Span | null {
+  const pos = range.head > range.from ? range.head - 1 : range.head;
+  switch (obj) {
+    case "w":
+    case "W":
+      return wordSpan(state, range.head, around);
+    case "p":
+      return paragraphSpan(state, range.head, around);
+    case "(":
+    case ")":
+    case "b":
+      return pairSpan(state, pos, "(", ")", around);
+    case "{":
+    case "}":
+    case "B":
+      return pairSpan(state, pos, "{", "}", around);
+    case "[":
+    case "]":
+      return pairSpan(state, pos, "[", "]", around);
+    case "<":
+    case ">":
+      return pairSpan(state, pos, "<", ">", around);
+    case '"':
+      return quoteSpan(state, range.head, '"', around);
+    case "'":
+      return quoteSpan(state, range.head, "'", around);
+    case "`":
+      return quoteSpan(state, range.head, "`", around);
+    case "m":
+      return nearestPair(state, pos, around);
+    default:
+      return null;
+  }
+}
+
+export { pairFor } from "./motions";

packages/codemirror-helix/src/view.ts

@@ -0,0 +1,123 @@
+import {
+  Decoration,
+  EditorView,
+  ViewPlugin,
+  WidgetType,
+  showPanel,
+  type DecorationSet,
+  type Panel,
+  type ViewUpdate,
+} from "@codemirror/view";
+import { getMode, helixState } from "./state";
+
+class EolCursorWidget extends WidgetType {
+  toDOM() {
+    const span = document.createElement("span");
+    span.className = "cm-helix-block cm-helix-block-eol";
+    span.textContent = " ";
+    return span;
+  }
+  ignoreEvent() {
+    return true;
+  }
+}
+
+const blockMark = Decoration.mark({ class: "cm-helix-block" });
+const selectionMark = Decoration.mark({ class: "cm-helix-selection" });
+const eolCursor = Decoration.widget({ widget: new EolCursorWidget(), side: 1 });
+
+// Draws the selection ranges + a block cursor at each head while in
+// normal/select mode. We render the selection ourselves (rather than relying
+// on drawSelection, which the host theme can leave invisible) so multi-cursor
+// selections are always clearly highlighted.
+export const blockCursor = ViewPlugin.fromClass(
+  class {
+    decorations: DecorationSet;
+    constructor(view: EditorView) {
+      this.decorations = this.build(view);
+    }
+    update(update: ViewUpdate) {
+      if (
+        update.docChanged ||
+        update.selectionSet ||
+        update.viewportChanged ||
+        update.startState.field(helixState).mode !== update.state.field(helixState).mode
+      ) {
+        this.decorations = this.build(update.view);
+      }
+    }
+    build(view: EditorView): DecorationSet {
+      if (getMode(view.state) === "insert") return Decoration.none;
+      const deco: ReturnType<typeof blockMark.range>[] = [];
+      for (const range of view.state.selection.ranges) {
+        if (!range.empty) deco.push(selectionMark.range(range.from, range.to));
+        const pos = range.head;
+        const line = view.state.doc.lineAt(pos);
+        deco.push(pos < line.to ? blockMark.range(pos, pos + 1) : eolCursor.range(pos));
+      }
+      return Decoration.set(deco, true);
+    }
+  },
+  { decorations: (plugin) => plugin.decorations },
+);
+
+export const modeEditorClass = EditorView.editorAttributes.compute([helixState], (state) => ({
+  class: `cm-helix cm-helix-${getMode(state)}`,
+}));
+
+function statusPanel(view: EditorView): Panel {
+  const dom = document.createElement("div");
+  dom.className = "cm-helix-status";
+  const render = () => {
+    const s = view.state.field(helixState);
+    const label = s.mode === "insert" ? "INS" : s.mode === "select" ? "SEL" : "NOR";
+    const count = s.count ? ` ${s.count}` : "";
+    const reg = s.register ? ` "${s.register}` : "";
+    const pend = s.pending ? ` ${s.pending.type}` : "";
+    const sels = view.state.selection.ranges.length;
+    const multi = sels > 1 ? `  ${sels} sels` : "";
+    dom.textContent = `${label}${count}${reg}${pend}${multi}`;
+    dom.dataset.mode = s.mode;
+  };
+  render();
+  return {
+    dom,
+    update: (u) => {
+      if (u.docChanged || u.selectionSet || u.transactions.length) render();
+    },
+  };
+}
+
+export const helixStatusPanel = showPanel.of(statusPanel);
+
+export const helixTheme = EditorView.baseTheme({
+  "&.cm-helix-normal .cm-cursor, &.cm-helix-normal .cm-cursorLayer": { display: "none" },
+  "&.cm-helix-select .cm-cursor, &.cm-helix-select .cm-cursorLayer": { display: "none" },
+  ".cm-helix-selection": { backgroundColor: "rgba(120,160,255,0.32)" },
+  ".cm-helix-block": { backgroundColor: "rgba(125,165,255,0.7)", borderRadius: "1px" },
+  ".cm-helix-block-eol": { display: "inline-block", width: "0.55em" },
+  ".cm-helix-status": {
+    padding: "1px 10px",
+    font: "11px ui-monospace, SFMono-Regular, Menlo, monospace",
+    letterSpacing: "0.05em",
+  },
+  ".cm-helix-status[data-mode=insert]": { color: "#16a34a" },
+  ".cm-helix-status[data-mode=select]": { color: "#d97706" },
+  ".cm-helix-status[data-mode=normal]": { color: "#2563eb" },
+  ".cm-helix-prompt": {
+    display: "flex",
+    gap: "0.5em",
+    alignItems: "center",
+    padding: "2px 10px",
+    font: "12px ui-monospace, SFMono-Regular, Menlo, monospace",
+  },
+  ".cm-helix-prompt label": { opacity: 0.7 },
+  ".cm-helix-prompt input": {
+    flex: "1",
+    border: "none",
+    outline: "none",
+    background: "transparent",
+    color: "inherit",
+    font: "inherit",
+  },
+});

packages/codemirror-helix/tsconfig.json

@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "outDir": "dist",
+    "rootDir": "src",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "forceConsistentCasingInFileNames": true
+  },
+  "include": ["src"]
+}

src/app/_components/Animated/AnimateIn.tsx

@@ -1,62 +1,46 @@
-import { useGSAP } from "@gsap/react";
+"use client"
 import { useRef, type HTMLAttributes, type ReactNode } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import { SplitText } from "gsap/SplitText";
 import gsap from 'gsap'
 import { cn } from "~/lib/utils";
+import { useReveal } from "./useReveal";
+
 const AnimateTextIn = ({
   children,
   animation = "type",
   position = 0,
-  tlId = undefined,
   speed = 1,
   scrollOnly = false,
+  once = false,
+  debugId,
   className
 }: {
   children: ReactNode,
   animation?: "type" | "slide",
   position?: gsap.Position,
-  tlId?: string,
   scrollOnly?: boolean,
+  once?: boolean,
+  debugId?: string,
   speed?: number,
   className?: HTMLAttributes<HTMLDivElement>['className']
 }) => {
   const el = useRef<HTMLDivElement>(null)
-  const gsapContext = useGsapContext();
-  useGSAP(() => {
-    const rect = el.current?.getBoundingClientRect()
-    const scroller = gsapContext?.getScroller()
-    console.log(scroller)
-    let viewportTop = 0
-    let viewportBottom = window.innerHeight
-    if (scroller && scroller instanceof Element) {
-      const scrollerRect = scroller.getBoundingClientRect()
-      viewportTop = scrollerRect.top
-      viewportBottom = scrollerRect.top + scrollerRect.height
-    }
-    const isInView = rect && rect.bottom > viewportTop && rect.top < viewportBottom
-    console.log(isInView)
-    const chars = new SplitText(el.current, { type: 'chars' })
-    gsapContext?.addAnimation(gsap.to(el.current, { opacity: 100, duration: 0 }), 0, tlId)
-    const fromVars = animation === "slide"
-      ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
-      : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut', onComplete: () => chars.revert() }
-    if (isInView && !scrollOnly) {
-      gsapContext?.addAnimation(gsap.from(chars.chars, fromVars), position, tlId)
-    } else {
-      gsap.from(chars.chars,
-        {
-          ...fromVars,
-          scrollTrigger: {
-            trigger: el.current,
-            start: 'top bottom',
-            end: 'bottom top',
-            toggleActions: "play reverse play reverse",
-            scroller
-          }
-        })
-    }
-  }, { dependencies: [] })
+  useReveal(el, {
+    position,
+    scrollOnly,
+    once,
+    debugId: debugId ?? `text-${position}`,
+    makeReveal: (node) => {
+      // The wrapper starts at opacity 0 (so there's no flash of unsplit text);
+      // reveal the wrapper and let the per-character tween do the animation.
+      gsap.set(node, { opacity: 1 })
+      const split = new SplitText(node, { type: 'chars' })
+      const fromVars = animation === "slide"
+        ? { opacity: 0, x: -10, duration: 0.2 * speed, stagger: { each: 0.08 * speed }, ease: 'bounce.inOut' }
+        : { opacity: 0, duration: 0.01 * speed, stagger: { each: 0.04 * speed }, ease: 'bounce.inOut' }
+      return gsap.from(split.chars, { ...fromVars, paused: true })
+    },
+  })
   return (
     <div ref={el} className={cn(className, "opacity-0")}>
       {children}

src/app/_components/Animated/AnimatePopUp.tsx

@@ -6,16 +6,22 @@ const AnimatePopUp = ({
   position,
   className,
   duration=1,
-  ease='elastic'
+  ease='elastic',
+  scrollOnly=false,
+  once=false,
+  debugId,
 }:{
     children:ReactNode
     position:gsap.Position,
     className?:HTMLAttributes<HTMLDivElement>['className']
     duration?:number,
-    ease?:gsap.EaseString|gsap.EaseFunction
+    ease?:gsap.EaseString|gsap.EaseFunction,
+    scrollOnly?:boolean,
+    once?:boolean,
+    debugId?:string,
   }) => {
   return (
-    <AnimatedDiv children={children} position={position} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
+    <AnimatedDiv children={children} position={position} scrollOnly={scrollOnly} once={once} debugId={debugId} className={cn(className,'h-0 translate-y-[50] overflow-hidden')} height='auto' y={0} overflow='' ease={ease} duration={duration} />
   )
 }
 

src/app/_components/Animated/AnimatedDiv.tsx

@@ -1,36 +1,40 @@
+"use client"
 import gsap from "gsap";
-import { type HTMLAttributes,
-type ReactNode, useLayoutEffect, useRef } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
+import { type HTMLAttributes, type ReactNode, useRef } from "react";
+import { useReveal } from "./useReveal";
+
 const AnimatedDiv = (
   {
     children,
     position,
     className,
-    animationMode='to',
+    animationMode = 'to',
+    scrollOnly = false,
+    once = false,
+    debugId,
     ...tweenVars
   }:
   gsap.TweenVars & {
-    children:ReactNode,
-    position:gsap.Position,
-    animationMode?: 'from'|'to',
-    className?:HTMLAttributes<HTMLDivElement>['className']
+    children: ReactNode,
+    position: gsap.Position,
+    animationMode?: 'from' | 'to',
+    scrollOnly?: boolean,
+    once?: boolean,
+    debugId?: string,
+    className?: HTMLAttributes<HTMLDivElement>['className']
   }
 ) => {
-  const div = useRef<HTMLDivElement>(null);
-  const gsapContext = useGsapContext()
-  useLayoutEffect(() => {
-    let tween:gsap.core.Tween;
-    switch(animationMode) {
-      case 'from':
-        tween = gsap.from(div.current,tweenVars);
-        break;
-      case 'to':
-        tween = gsap.to(div.current,tweenVars);
-        break;
-    }
-    gsapContext?.addAnimation(tween,position)
-  },[])
+  const div = useRef<HTMLDivElement>(null)
+  useReveal(div, {
+    position,
+    scrollOnly,
+    once,
+    debugId,
+    makeReveal: (el) =>
+      animationMode === 'from'
+        ? gsap.from(el, { ...tweenVars, paused: true })
+        : gsap.to(el, { ...tweenVars, paused: true }),
+  })
   return (
     <div ref={div} className={className}>
       {children}

src/app/_components/Animated/useReveal.ts

@@ -0,0 +1,134 @@
+'use client'
+
+import { useGSAP } from "@gsap/react"
+import { ScrollTrigger } from "gsap/all"
+import type { RefObject } from "react"
+import { GSAP_DEBUG, nearestScroller, useGsapContext } from "~/app/_providers/GsapProvicer"
+
+export type UseRevealOptions = {
+  position: gsap.Position
+  /** Skip the orchestrated entrance and let ScrollTrigger drive from the start. */
+  scrollOnly?: boolean
+  /**
+   * Reveal once and keep it: after the element animates in (entrance or first
+   * scroll-in) it never reverses on leave. Default false = animate out at the
+   * top and back in on scroll-up.
+   */
+  once?: boolean
+  debugId?: string
+  /**
+   * Build the hidden -> shown animation for `el`. It must be a single,
+   * *independent* animation (not added to any timeline): `play()` reveals,
+   * `reverse()` hides. The hook pauses it, schedules its entrance through the
+   * shared timeline, and lets a ScrollTrigger drive the very same animation on
+   * scroll — so the two modes never fight over the element.
+   */
+  makeReveal: (el: HTMLElement) => gsap.core.Tween | gsap.core.Timeline
+}
+
+/**
+ * Shared reveal behavior for cards, text and pop-ups: an element in view at
+ * load plays an orchestrated timeline entrance, then hands the *same* tween to
+ * a ScrollTrigger that animates it out at the top and back in on scroll-up. An
+ * element off-screen at load is ScrollTrigger-driven from the start.
+ */
+export function useReveal(
+  ref: RefObject<HTMLElement | null>,
+  { position, scrollOnly = false, once = false, debugId, makeReveal }: UseRevealOptions,
+) {
+  const ctx = useGsapContext()
+  useGSAP(() => {
+    const el = ref.current
+    if (!el || !ctx) {
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:skip]", { debugId, hasEl: !!el, hasCtx: !!ctx })
+      return
+    }
+
+    const scroller = nearestScroller(el)
+    const scrollerEl = scroller instanceof Element ? scroller : undefined
+
+    const rect = el.getBoundingClientRect()
+    let top = 0
+    let bottom = window.innerHeight
+    if (scrollerEl) {
+      const r = scrollerEl.getBoundingClientRect()
+      top = r.top
+      bottom = r.top + r.height
+    }
+    const isInView = rect.bottom > top && rect.top < bottom
+    if (GSAP_DEBUG) {
+      const scrollerRect = scrollerEl?.getBoundingClientRect()
+      console.log("[cv-debug][useReveal:register]", {
+        debugId,
+        position,
+        scrollOnly,
+        once,
+        isInView,
+        rect: { top: rect.top, bottom: rect.bottom, height: rect.height },
+        viewport: { top, bottom },
+        scroller:
+          scroller === window
+            ? "window"
+            : {
+                slot: scrollerEl?.getAttribute("data-slot"),
+                className: scrollerEl?.className,
+                clientHeight: scrollerEl?.clientHeight,
+                scrollHeight: scrollerEl?.scrollHeight,
+                rect: scrollerRect ? { top: scrollerRect.top, bottom: scrollerRect.bottom, height: scrollerRect.height } : undefined,
+              },
+      })
+    }
+
+    const reveal = makeReveal(el)
+    // A reveal that animates height (pop-ups) shifts every trigger below it.
+    // Re-measure as it animates so positions track the real layout instead of
+    // only correcting at the very end. requestRefresh is throttled + deferred to
+    // the next frame, so this won't re-enter a ScrollTrigger callback.
+    reveal.eventCallback("onUpdate", () => ctx.requestRefresh())
+    reveal.pause()
+
+    const baseTrigger = {
+      trigger: el,
+      start: "top bottom",
+      end: "bottom top",
+      scroller: scrollerEl,
+      markers: GSAP_DEBUG,
+      id: GSAP_DEBUG ? debugId : undefined,
+    }
+    // Full behavior: in at the bottom, out at the top, and back on scroll-up.
+    const addReplayTrigger = () =>
+      ScrollTrigger.create({
+        ...baseTrigger,
+        onEnter: () => reveal.play(),
+        onEnterBack: () => reveal.play(),
+        onLeave: () => reveal.reverse(),
+        onLeaveBack: () => reveal.reverse(),
+      })
+
+    if (isInView && !scrollOnly) {
+      // The shared timeline only decides *when* the entrance starts; the reveal
+      // plays independently so the ScrollTrigger can take it over afterwards.
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:schedule]", { debugId, position })
+      ctx.schedule(() => reveal.play(), position)
+      // `once` elements keep their revealed state — no scroll trigger at all.
+      if (!once) {
+        if (GSAP_DEBUG) console.log("[cv-debug][useReveal:onReady]", { debugId })
+        ctx.onReady(addReplayTrigger)
+      }
+    } else if (isInView) {
+      // scrollOnly + already on screen: no enter crossing will fire, so reveal
+      // now. Keep a trigger for scroll-out unless this is a `once` element.
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:play-now]", { debugId, position })
+      reveal.play()
+      if (!once) addReplayTrigger()
+    } else if (once) {
+      // Off-screen: reveal when first reached, then self-destruct so it never
+      // reverses.
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:scroll-once]", { debugId, position })
+      ScrollTrigger.create({ ...baseTrigger, once: true, onEnter: () => reveal.play() })
+    } else {
+      if (GSAP_DEBUG) console.log("[cv-debug][useReveal:scroll-trigger-only]", { debugId, position })
+      addReplayTrigger()
+    }
+  }, { dependencies: [] })
+}

src/app/_components/Form/Components/FormScaffold.tsx

@@ -15,7 +15,7 @@ export default function FormScaffold<T extends FieldValues,>(params: {
 }) {
   const { form, onSubmit, title, id, className, children } = params
   return (
-    <Card.Card className={className ? className : "w-5/6 lg:w-1/2"}>
+    <Card.Card className={className ? className : "w-full"}>
       <Card.CardHeader>
         <Card.CardTitle>
           <DependentText bool={id ? true : false} true={`Update ${title}`} false={`Create ${title}`} />

src/app/_components/Form/Fields/MdeFormField.tsx

@@ -1,57 +1,72 @@
 "use client";
 
-import MDEditor from "@uiw/react-md-editor";
+import CodeMirror from "@uiw/react-codemirror";
+import { markdown } from "@codemirror/lang-markdown";
+import { autocompletion, completionStatus } from "@codemirror/autocomplete";
+import { EditorView } from "@codemirror/view";
+import { helix } from "@gregorlohaus/codemirror-helix";
 import { Maximize2, Minimize2 } from "lucide-react";
-import { useEffect, useState, type ReactElement, type TextareaHTMLAttributes } from "react";
+import { useEffect, useMemo, useState, type ReactElement } from "react";
 import { createPortal } from "react-dom";
 import type { Control, FieldValues, Path } from "react-hook-form";
 import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
 import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 import {
-  InternalLinkTextarea,
   type AutocompleteTriggerConfig,
   type MdeAutocompleteSuggestion,
 } from "./InternalLinkTextarea";
+import { mdxCompletionSource } from "./codemirror/mdxAutocomplete";
 
 export default function MdeFormField<T extends FieldValues>(params: {
-  control: Control<T>,
-  name: Path<T>,
-  label: string,
-  dataColorMode: "dark"|"light",
-  autocompleteSuggestions?: MdeAutocompleteSuggestion[],
-  triggerConfigs?: AutocompleteTriggerConfig[],
-  renderPreview?: (source: string) => ReactElement,
+  control: Control<T>;
+  name: Path<T>;
+  label: string;
+  dataColorMode: "dark" | "light";
+  autocompleteSuggestions?: MdeAutocompleteSuggestion[];
+  triggerConfigs?: AutocompleteTriggerConfig[];
+  renderPreview?: (source: string) => ReactElement;
 }) {
-  const [fullscreen, setFullscreen] = useState(false)
-  const [mounted, setMounted] = useState(false)
+  const [fullscreen, setFullscreen] = useState(false);
+  const [mounted, setMounted] = useState(false);
 
   useEffect(() => {
-    setMounted(true)
-  }, [])
+    setMounted(true);
+  }, []);
 
   useEffect(() => {
-    if (!fullscreen) return
-
-    const originalOverflow = document.body.style.overflow
-    document.body.style.overflow = "hidden"
-
+    if (!fullscreen) return;
+    const originalOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
     return () => {
-      document.body.style.overflow = originalOverflow
-    }
-  }, [fullscreen])
+      document.body.style.overflow = originalOverflow;
+    };
+  }, [fullscreen]);
+
+  const extensions = useMemo(
+    () => [
+      markdown(),
+      EditorView.lineWrapping,
+      helix({ escapeGuard: (state) => completionStatus(state) === "active" }),
+      autocompletion({
+        override: [mdxCompletionSource(params.autocompleteSuggestions ?? [], params.triggerConfigs)],
+        activateOnTyping: true,
+        defaultKeymap: true,
+      }),
+    ],
+    [params.autocompleteSuggestions, params.triggerConfigs],
+  );
 
   return (
     <FormField
       control={params.control}
       name={params.name}
       render={({ field }) => {
+        const source: string = field.value ?? "";
         const editor = (
           <FormItem className={cn(fullscreen && "mde-form-field-fullscreen")}>
             <div className="flex shrink-0 items-center justify-between gap-2">
-              <FormLabel>
-                {params.label}
-              </FormLabel>
+              <FormLabel>{params.label}</FormLabel>
               <Button
                 type="button"
                 variant="outline"
@@ -63,37 +78,48 @@ export default function MdeFormField<T extends FieldValues>(params: {
               </Button>
             </div>
             <FormControl className={cn(fullscreen && "min-h-0 flex-1")}>
-              <MDEditor
-                className={cn(fullscreen && "mde-form-field-editor-fullscreen min-h-0 flex-1")}
-                height={fullscreen ? "calc(100vh - 72px)" : undefined}
-                visibleDragbar={!fullscreen}
-                value={field.value ? field.value : ""}
-                onChange={field.onChange}
-                data-color-mode={params.dataColorMode}
-                commandsFilter={(command) => command.name === "fullscreen" ? false : command}
-                components={{
-                  textarea: (props) => (
-                    <InternalLinkTextarea
-                      {...(props as TextareaHTMLAttributes<HTMLTextAreaElement>)}
-                      suggestions={params.autocompleteSuggestions ?? []}
-                      triggerConfigs={params.triggerConfigs}
-                    />
-                  ),
-                  preview: params.renderPreview
-                    ? (source) => params.renderPreview?.(source) ?? <></>
-                    : undefined,
-                }}
-              />
+              <div
+                className={cn(
+                  "flex flex-wrap gap-4",
+                  fullscreen ? "min-h-0 flex-1 items-stretch" : "items-start",
+                )}
+              >
+                <div className="min-w-[18rem] flex-1 overflow-hidden rounded-md border">
+                  <CodeMirror
+                    value={source}
+                    onChange={(value) => field.onChange(value)}
+                    extensions={extensions}
+                    theme={params.dataColorMode === "dark" ? "dark" : "light"}
+                    height={fullscreen ? "calc(100vh - 96px)" : "360px"}
+                    basicSetup={{
+                      lineNumbers: false,
+                      foldGutter: false,
+                      highlightActiveLine: false,
+                      highlightActiveLineGutter: false,
+                    }}
+                  />
+                </div>
+                {params.renderPreview && (
+                  <div
+                    className={cn(
+                      "prose dark:prose-invert min-w-[18rem] max-w-none flex-1 overflow-auto rounded-md border p-4",
+                      fullscreen ? "min-h-0" : "max-h-[360px]",
+                    )}
+                  >
+                    {params.renderPreview(source)}
+                  </div>
+                )}
+              </div>
             </FormControl>
           </FormItem>
-        )
+        );
 
         if (fullscreen && mounted) {
-          return createPortal(editor, document.body)
+          return createPortal(editor, document.body);
         }
 
-        return editor
+        return editor;
       }}
     />
-  )
+  );
 }

src/app/_components/Form/Fields/codemirror/mdxAutocomplete.ts

@@ -0,0 +1,85 @@
+import { EditorSelection } from "@codemirror/state";
+import type { Completion, CompletionSource } from "@codemirror/autocomplete";
+import {
+  AUTOCOMPLETE_CURSOR_MARKER,
+  type AutocompleteTriggerConfig,
+  type MdeAutocompleteSuggestion,
+} from "../InternalLinkTextarea";
+
+// Re-implements the textarea autocomplete (trigger tokens like `<`, `[[`, `!`)
+// as a CodeMirror completion source, driven by the exact same suggestion data
+// produced by `useMdxEditorFieldProps`.
+
+type ResolvedTrigger = { trigger: string };
+
+function resolveTriggers(
+  suggestions: MdeAutocompleteSuggestion[],
+  triggerConfigs: AutocompleteTriggerConfig[] | undefined,
+): (AutocompleteTriggerConfig & ResolvedTrigger)[] {
+  const map = new Map<string, AutocompleteTriggerConfig>();
+  for (const config of triggerConfigs ?? []) map.set(config.trigger, config);
+  for (const suggestion of suggestions) {
+    if (!map.has(suggestion.trigger)) {
+      map.set(suggestion.trigger, { trigger: suggestion.trigger, label: suggestion.trigger });
+    }
+  }
+  // Longer triggers first so `[[` wins over a hypothetical `[`.
+  return Array.from(map.values()).sort((a, b) => b.trigger.length - a.trigger.length);
+}
+
+function toCompletion(suggestion: MdeAutocompleteSuggestion, triggerStart: number): Completion {
+  const group = suggestion.group.toLowerCase();
+  const type = group === "component" ? "class" : group === "markdown" ? "keyword" : "variable";
+  return {
+    label: suggestion.label,
+    detail: suggestion.detail,
+    type,
+    apply: (view, _completion, _from, to) => {
+      const markerIndex = suggestion.value.indexOf(AUTOCOMPLETE_CURSOR_MARKER);
+      const inserted =
+        markerIndex === -1 ? suggestion.value : suggestion.value.replace(AUTOCOMPLETE_CURSOR_MARKER, "");
+      const cursor = triggerStart + (markerIndex === -1 ? inserted.length : markerIndex);
+      view.dispatch({
+        changes: { from: triggerStart, to, insert: inserted },
+        selection: EditorSelection.cursor(cursor),
+      });
+    },
+  };
+}
+
+export function mdxCompletionSource(
+  suggestions: MdeAutocompleteSuggestion[],
+  triggerConfigs?: AutocompleteTriggerConfig[],
+): CompletionSource {
+  const triggers = resolveTriggers(suggestions, triggerConfigs);
+
+  return (context) => {
+    const before = context.state.sliceDoc(0, context.pos);
+
+    const active = triggers
+      .map((config) => ({ config, start: before.lastIndexOf(config.trigger) }))
+      .filter((candidate) => candidate.start !== -1)
+      .sort((a, b) => b.start - a.start)[0];
+
+    if (!active) return null;
+
+    const queryStart = active.start + active.config.trigger.length;
+    const query = before.slice(queryStart);
+    if (query.includes("\n")) return null;
+    if (active.config.isQueryValid && !active.config.isQueryValid(query)) return null;
+
+    const options = suggestions
+      .filter((suggestion) => suggestion.trigger === active.config.trigger)
+      .map((suggestion) => toCompletion(suggestion, active.start));
+
+    if (!options.length) return null;
+
+    return {
+      from: queryStart,
+      to: context.pos,
+      options,
+      // Keep the popup open while the query stays a single token.
+      validFor: /^[^\s>\]\)]*$/,
+    };
+  };
+}

src/app/_components/Home/HomeHero.tsx

@@ -0,0 +1,122 @@
+"use client";
+
+import { useGSAP } from "@gsap/react";
+import gsap from "gsap";
+import Link from "next/link";
+import { useRef } from "react";
+
+// The centerpiece is the site's own "G" mark (public/GLIcon.svg). GSAP draws the
+// outline on with a stroke-dash trick, fades the fill in, then keeps everything
+// gently alive (the logo floats). A curved arrow in the lower-right corner, with
+// its label above the tail, points at the chat FAB to nudge people toward the
+// assistant.
+export default function HomeHero() {
+	const root = useRef<HTMLDivElement>(null);
+	const gPath = useRef<SVGPathElement>(null);
+
+	useGSAP(
+		() => {
+			const logo = gPath.current;
+
+			if (logo) {
+				const len = logo.getTotalLength();
+				gsap.set(logo, { strokeDasharray: len, strokeDashoffset: len });
+			}
+			gsap.set(".hero-fill", { fillOpacity: 0 });
+
+			const tl = gsap.timeline({ defaults: { ease: "power3.out" } });
+
+			if (logo) tl.to(logo, { strokeDashoffset: 0, duration: 1.3 }, 0.25);
+			tl.to(".hero-fill", { fillOpacity: 1, duration: 0.6 }, "-=0.35");
+			tl.from(".hero-line", { yPercent: 120, opacity: 0, duration: 0.7, stagger: 0.12 }, "-=0.25");
+			tl.from(".hero-arrow-label", { yPercent: 120, opacity: 0, duration: 0.6 }, "-=0.1");
+			tl.from(
+				".hero-arrow-svg",
+				{ opacity: 0, scale: 0.7, transformOrigin: "top left", duration: 0.6 },
+				"<+=0.1",
+			);
+
+			// Idle life — runs forever once the entrance has settled.
+			gsap.to(".hero-logo", { y: -12, duration: 3.2, ease: "sine.inOut", yoyo: true, repeat: -1 });
+			gsap.to(".hero-arrow-wrap", { y: 10, duration: 1.5, ease: "sine.inOut", yoyo: true, repeat: -1 });
+		},
+		{ scope: root },
+	);
+
+	return (
+		<div
+			ref={root}
+			className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden px-6 text-center"
+		>
+			{/* Logo */}
+			<div className="hero-logo relative h-56 w-56 sm:h-64 sm:w-64">
+				<svg
+					className="absolute inset-0 h-full w-full p-10 text-foreground"
+					viewBox="0 0 74.193405 74.232162"
+					aria-label="Gregor Lohaus logo"
+				>
+					<g transform="translate(-24.550957,-64.437925)">
+						<path
+							ref={gPath}
+							className="hero-fill"
+							d="m 61.66652,64.437927 c -20.498425,1.81e-4 -37.115669,16.617653 -37.115564,37.116083 -1.05e-4,20.49842 16.617139,37.1159 37.115564,37.11608 16.081184,-0.0265 30.316081,-10.4061 35.258313,-25.70903 1.144195,-3.51294 1.757471,-7.1771 1.819527,-10.87117 H 87.864404 67.217603 v 10.87117 h 17.977714 c -4.361366,9.03731 -13.494221,14.79672 -23.528797,14.83786 -14.494622,0 -26.244916,-11.75029 -26.244909,-26.24491 -7e-6,-14.494627 11.750287,-26.244918 26.244909,-26.244912 z"
+							fill="currentColor"
+							stroke="currentColor"
+							strokeWidth="0.9"
+						/>
+						<rect
+							className="hero-fill"
+							width="31.802109"
+							height="11.397169"
+							x="-96.2453"
+							y="67.460899"
+							transform="rotate(-90)"
+							fill="currentColor"
+						/>
+					</g>
+				</svg>
+			</div>
+
+			{/* Headline */}
+			<div className="mt-10 max-w-xl">
+				<h1 className="overflow-hidden pb-2">
+					<span className="hero-line block text-4xl font-semibold leading-tight tracking-tight sm:text-6xl">
+						Gregor Lohaus
+					</span>
+				</h1>
+				<div className="mt-4 overflow-hidden">
+					<p className="hero-line text-lg text-muted-foreground sm:text-xl">
+						Full Stack Developer
+					</p>
+				</div>
+			</div>
+
+			{/* Lower-right arrow pointing at the chat FAB */}
+			<Link
+				href="/assistant"
+				aria-label="Chat with my AI assistant"
+				className="hero-arrow-wrap absolute bottom-10 right-8 z-40 flex flex-col items-start text-foreground transition-opacity hover:opacity-80 sm:right-16"
+			>
+				<span className="mb-1 max-w-[11rem] -translate-x-20 -translate-y-2 overflow-hidden sm:-translate-x-24">
+					<span className="hero-arrow-label block font-semibold leading-snug text-foreground drop-shadow-[0_2px_10px_rgba(0,0,0,0.7)] sm:text-lg">
+						Chat with my AI&nbsp;assistant
+					</span>
+				</span>
+				<svg
+					className="hero-arrow-svg h-28 w-32 drop-shadow-[0_2px_10px_rgba(0,0,0,0.4)] sm:h-32 sm:w-36"
+					viewBox="0 0 776.09175 693.66538"
+					fill="currentColor"
+					aria-hidden="true"
+				>
+					<g transform="matrix(2.7190747,0,0,3.1037754,-326.9763,-1172.9045)">
+						<path
+							fillRule="evenodd"
+							clipRule="evenodd"
+							d="m 130.838,381.118 c 1.125,28.749 5.277,54.82 12.695,78.018 7.205,22.53 18.847,40.222 36.812,53.747 52.018,39.16 153.369,16.572 153.369,16.572 l -4.632,-32.843 72.918,42.778 -58.597,58.775 -3.85,-27.303 c 0,0 -100.347,18.529 -163.905,-34.881 -37.659,-31.646 -53.293,-84.021 -51.593,-153.962 0.266,-0.247 4.728,-0.908 6.783,-0.901 z"
+						/>
+					</g>
+				</svg>
+			</Link>
+		</div>
+	);
+}

src/app/_components/MdeFormField.tsx

@@ -1,25 +0,0 @@
-import MDEditor from "@uiw/react-md-editor";
-import type { Control, FieldValues, Path } from "react-hook-form";
-import { FormControl, FormField, FormItem, FormLabel } from "~/components/ui/form";
-export default function MdeFormField<T extends FieldValues>(params: { control: Control<T>, name: Path<T>, label: string, dataColorMode: "dark"|"light" }) {
-  return (
-    <FormField
-      control={params.control}
-      name={params.name}
-      render={({ field }) => (
-        <FormItem>
-          <FormLabel>
-            {params.label}
-          </FormLabel>
-          <FormControl>
-            <MDEditor
-              value={field.value ? field.value : ""}
-              onChange={field.onChange}
-              data-color-mode={params.dataColorMode}
-            />
-          </FormControl>
-        </FormItem>
-      )}
-    />
-  )
-}

src/app/_providers/GsapProvicer.tsx

@@ -9,11 +9,51 @@ gsap.registerPlugin(useGSAP)
 gsap.registerPlugin(ScrollTrigger)
 gsap.registerPlugin(SplitText)
 gsap.registerPlugin(GSDevTools)
+
+// iOS Safari shows/hides its address bar at the scroll extremes, which resizes
+// the viewport and makes ScrollTrigger refresh + fire spurious onLeave/onEnter
+// toggles (text animating out at the bottom and not coming back). Ignoring those
+// mobile-toolbar resizes keeps the real enter/leave reverse behavior intact.
+ScrollTrigger.config({ ignoreMobileResize: true })
+
+// Flip to true to draw ScrollTrigger start/end markers on every animated
+// element and mount the GSDevTools timeline scrubber. Handy for seeing exactly
+// where each card's enter/exit lines sit relative to the viewport.
+export const GSAP_DEBUG = false
+
+export function nearestScroller(el: Element): Element | Window {
+  let node: Element | null = el.parentElement
+  while (node) {
+    if (node.getAttribute('data-slot') === 'scroll-area-viewport') {
+      const viewport = node as HTMLElement
+      const rect = viewport.getBoundingClientRect()
+      const hasUsableBox = rect.width > 0 && rect.height > 0
+      const canScroll =
+        viewport.scrollHeight > viewport.clientHeight ||
+        viewport.scrollWidth > viewport.clientWidth
+
+      if (hasUsableBox && canScroll) return viewport
+    }
+    node = node.parentElement
+  }
+  return window
+}
+
 const GsapContext = createContext<{
+  // Add a real animation (with its own duration) to the entrance timeline.
   addAnimation: (
     animation: gsap.core.TimelineChild,
     position: gsap.Position
   ) => void,
+  // Schedule a zero-duration callback at `position` — used to *start* an
+  // independent reveal tween so the timeline only orchestrates timing.
+  schedule: (fn: () => void, position: gsap.Position) => void,
+  // Run `cb` once the entrance is done (timeline complete or first user scroll).
+  onReady: (cb: () => void) => void,
+  // Re-measure all ScrollTriggers (throttled to once per frame). Call it
+  // whenever an animation changes content height so trigger positions stay
+  // aligned with the real layout.
+  requestRefresh: () => void,
   resetTimeline: () => void,
   resumeTimeline: () => void,
   getScroller: () => Element | Window | null
@@ -26,14 +66,24 @@ export function useGsapContext() {
 export const useTimeLine = (dep:any,all?:boolean) => {
   const gsapContext = useGsapContext()
     useEffect(() => {
+      if (GSAP_DEBUG) {
+        console.log("[cv-debug][useTimeLine:effect]", {
+          hasDep: !!dep,
+          isArray: dep instanceof Array,
+          length: dep instanceof Array ? dep.length : undefined,
+          all,
+        })
+      }
       if (dep instanceof Array && all) {
         let acc = true;
         let allDepsSatisfied = dep.reduce((p,c) => c !== undefined && p ,acc )
         if (allDepsSatisfied) {
+          if (GSAP_DEBUG) console.log("[cv-debug][useTimeLine:resume-all]")
           gsapContext?.resumeTimeline()
         }
       } else {
         if (dep) {
+          if (GSAP_DEBUG) console.log("[cv-debug][useTimeLine:resume]")
           gsapContext?.resumeTimeline()
         }
       }
@@ -70,29 +120,174 @@ export default function GsapProvider({ children }: { children: ReactNode }) {
     // }
     return scrollerRef.current
   }, [])
+  const devToolsCreated = useRef(false)
   useGSAP(() => {
     if (!tl.current) {
       tl.current = gsap.timeline({ paused: true })
     }
-    return () => { console.log("gsap cleanup") }
+    if (GSAP_DEBUG && tl.current && !devToolsCreated.current) {
+      devToolsCreated.current = true
+      GSDevTools.create({ animation: tl.current })
+    }
+    return () => { if (GSAP_DEBUG) console.log("gsap cleanup") }
   })
 
-  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
-    console.log("add animation to:", position, tl.current !== undefined)
-    tl.current?.add(animation, position);
+  // Handoff: fire registered callbacks once, when the entrance finishes.
+  const readyFired = useRef(false)
+  const readyCbs = useRef<Array<() => void>>([])
+  const fireReady = useCallback(() => {
+    if (readyFired.current) return
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:ready]", {
+        callbacks: readyCbs.current.length,
+        duration: tl.current?.duration(),
+        progress: tl.current?.progress(),
+      })
+    }
+    readyFired.current = true
+    readyCbs.current.forEach((cb) => cb())
+    readyCbs.current = []
   },[])
+  const onReady = useCallback((cb: () => void) => {
+    if (GSAP_DEBUG) console.log("[cv-debug][gsap:onReady]", { readyFired: readyFired.current })
+    if (readyFired.current) cb()
+    else readyCbs.current.push(cb)
+  },[])
+
+  const addAnimation = useCallback((animation: gsap.core.TimelineChild, position: gsap.Position) => {
+    // Content can mount in waves (e.g. nested queries resolving after the
+    // entrance already played). Parking a tween in a finished, paused timeline
+    // would freeze it at its from-state, so once the entrance is done let the
+    // (live) tween play on its own instead.
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:addAnimation]", {
+        position,
+        readyFired: readyFired.current,
+        durationBefore: tl.current?.duration(),
+      })
+    }
+    if (readyFired.current) return
+    tl.current?.add(animation, position);
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:addAnimation:done]", {
+        position,
+        durationAfter: tl.current?.duration(),
+        children: tl.current?.getChildren(false, true, true).length,
+      })
+    }
+  },[])
+  const schedule = useCallback((fn: () => void, position: gsap.Position) => {
+    // Same late-arrival case: a callback added past the playhead never fires, so
+    // run the reveal immediately once the entrance has finished.
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:schedule]", {
+        position,
+        readyFired: readyFired.current,
+        durationBefore: tl.current?.duration(),
+        childrenBefore: tl.current?.getChildren(false, true, true).length,
+      })
+    }
+    if (readyFired.current) { fn(); return }
+    tl.current?.add(fn, position)
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:schedule:done]", {
+        position,
+        durationAfter: tl.current?.duration(),
+        childrenAfter: tl.current?.getChildren(false, true, true).length,
+      })
+    }
+  },[])
+
+  // Throttle ScrollTrigger.refresh() to once per frame so the ResizeObserver
+  // can fire freely while content height animates.
+  const refreshQueued = useRef(false)
+  const scheduleRefresh = useCallback(() => {
+    if (refreshQueued.current) return
+    refreshQueued.current = true
+    requestAnimationFrame(() => {
+      refreshQueued.current = false
+      ScrollTrigger.refresh()
+    })
+  },[])
+
+  const scrollCleanup = useRef<(() => void) | null>(null)
+  const resizeObserver = useRef<ResizeObserver | null>(null)
+
   const resetTimeline = useCallback(() => {
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:reset]", {
+        duration: tl.current?.duration(),
+        progress: tl.current?.progress(),
+      })
+    }
     tl.current?.kill()
     tl.current?.revert()
     ScrollTrigger.getAll().forEach(st => st.kill())
+    resizeObserver.current?.disconnect()
+    scrollCleanup.current?.()
+    scrollCleanup.current = null
+    readyFired.current = false
+    readyCbs.current = []
     tl.current = gsap.timeline({paused:true})
   },[])
+
   const resumeTimeline = useCallback(() => {
-    console.log("resuming timeline:",tl.current)
-    tl.current?.resume()
-  },[])
+    const t = tl.current
+    if (!t) {
+      if (GSAP_DEBUG) console.log("[cv-debug][gsap:resume:skip-no-timeline]")
+      return
+    }
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:resume:start]", {
+        duration: t.duration(),
+        progress: t.progress(),
+        paused: t.paused(),
+        readyFired: readyFired.current,
+        children: t.getChildren(false, true, true).length,
+      })
+    }
+    // When the orchestrated entrance finishes, hand off to scroll control and
+    // realign triggers against the now-settled layout.
+    t.eventCallback("onComplete", () => { fireReady(); ScrollTrigger.refresh() })
+
+    const scroller = getScroller()
+    // If the user scrolls before the entrance finishes, snap it to the end and
+    // switch to scroll control so the timeline and ScrollTriggers never fight
+    // over the same elements.
+    scrollCleanup.current?.()
+    const onFirstScroll = () => { t.progress(1); fireReady() }
+    scroller?.addEventListener("scroll", onFirstScroll, { once: true, passive: true })
+    scrollCleanup.current = () => scroller?.removeEventListener("scroll", onFirstScroll)
+
+    // Continuously realign triggers while content height changes — entrance
+    // growth, scroll-driven collapses, late-loading media.
+    if (scroller instanceof Element) {
+      const target = scroller.firstElementChild ?? scroller
+      resizeObserver.current?.disconnect()
+      resizeObserver.current = new ResizeObserver(scheduleRefresh)
+      resizeObserver.current.observe(target)
+    }
+
+    t.resume()
+    if (GSAP_DEBUG) {
+      console.log("[cv-debug][gsap:resume:after]", {
+        duration: t.duration(),
+        progress: t.progress(),
+        paused: t.paused(),
+      })
+    }
+  },[getScroller, fireReady, scheduleRefresh])
+
+  // Fonts/markdown/images loading also change content height after the triggers
+  // were created; refresh so start/end stay aligned with the real card sizes.
+  useEffect(() => {
+    const refresh = () => ScrollTrigger.refresh()
+    window.addEventListener("load", refresh)
+    document.fonts?.ready.then(refresh).catch(() => {})
+    return () => window.removeEventListener("load", refresh)
+  }, [])
   return (
-    <GsapContext.Provider value={{ addAnimation, resetTimeline, resumeTimeline, getScroller }}>
+    <GsapContext.Provider value={{ addAnimation, schedule, onReady, requestRefresh: scheduleRefresh, resetTimeline, resumeTimeline, getScroller }}>
       {children}
     </GsapContext.Provider>
   )

src/app/_trpc/ServerClient.ts

@@ -1,22 +1,3 @@
-import { httpBatchLink } from "@trpc/client";
 import { trpcRouter } from "~/server/routers/_app";
 
-function getBaseUrl() {
-  if (typeof window !== 'undefined')
-    // browser should use relative path
-    return '';
-  if (process.env.VERCEL_URL)
-    // reference for vercel.com
-    return `https://${process.env.VERCEL_URL}`;
-  if (process.env.RENDER_INTERNAL_HOSTNAME)
-    // reference for render.com
-    return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`;
-  // assume localhost
-  return `http://localhost:${process.env.PORT ?? 3000}`;
-};
-
-export const servTrpc = trpcRouter.createCaller({
-  links: [
-    httpBatchLink({url: `${getBaseUrl()}/api/trpc`}),
-  ],
-});
+export const servTrpc = trpcRouter.createCaller({});

src/app/_trpc/TrpcProvider.tsx

@@ -3,6 +3,7 @@ import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryStreamedHydration } from '@tanstack/react-query-next-experimental'
 import { httpBatchLink } from "@trpc/client";
 import React, { useState } from "react"
+import superjson from "superjson";
 import { trpc } from "./Client";
 import getBaseUrl from "~/app/_trpc/GetBaseUrl";
 let clientQueryClient: QueryClient | undefined = undefined;
@@ -33,6 +34,7 @@ export default function TrpcProvider({ children }: { children: React.ReactNode }
       links: [
         httpBatchLink({
           url: `${baseUrl}/api/trpc`,
+          transformer: superjson,
         }),
       ],
     })

src/app/actions/cancelMeeting.ts

@@ -0,0 +1,25 @@
+'use server'
+import { getGoogleCalendarClient, getGoogleCalendarId } from '~/server/googleCalendar'
+
+export async function cancelMeeting({ eventId }: { eventId: string }) {
+	try {
+		const calendar = getGoogleCalendarClient()
+
+		await calendar.events.delete({
+			calendarId: getGoogleCalendarId(),
+			eventId,
+		})
+
+		return {
+			success: true,
+			eventId,
+			message: 'Meeting removed from Gregor availability calendar.',
+		}
+	} catch (error) {
+		console.error('Failed to cancel meeting:', error)
+		return {
+			success: false,
+			error: 'Failed to remove the meeting from Gregor availability calendar.',
+		}
+	}
+}

src/app/actions/scheduleMeeting.ts

@@ -1,7 +1,34 @@
 'use server'
-import { clerkClient, auth } from '@clerk/nextjs/server'
-import { google } from 'googleapis'
 import { env } from '~/env'
+import { getGoogleCalendarClient, getGoogleCalendarId } from '~/server/googleCalendar'
+
+function googleCalendarDate(date: Date) {
+	return date.toISOString().replace(/[-:]|\.\d{3}/g, '')
+}
+
+function createGoogleCalendarTemplateLink({
+	title,
+	description,
+	startTime,
+	endTime,
+	gregorEmail,
+}: {
+	title: string
+	description: string
+	startTime: Date
+	endTime: Date
+	gregorEmail: string
+}) {
+	const params = new URLSearchParams({
+		action: 'TEMPLATE',
+		text: title,
+		dates: `${googleCalendarDate(startTime)}/${googleCalendarDate(endTime)}`,
+		details: description,
+		add: gregorEmail,
+	})
+
+	return `https://calendar.google.com/calendar/render?${params.toString()}`
+}
 
 export async function scheduleMeeting({
 	title,
@@ -19,56 +46,39 @@ export async function scheduleMeeting({
 	attendeeName?: string
 }) {
 	try {
-		const clerk = await clerkClient()
-		const userAuth = await auth()
-		const user = await clerk.users.getUser(userAuth.userId?userAuth.userId:"")
-		// Get admin's Google OAuth token to create the event on Gregor's calendar
-		const adminTokenResponse = await clerk.users.getUserOauthAccessToken(
-			env.ADMIN_USER_CLERK_ID,
-			'oauth_google',
-		)
-		const adminToken = adminTokenResponse.data[0]
-
-		if (!adminToken?.token) {
-			return { success: false, error: 'Admin Google Calendar not connected. Ensure the admin account is linked with Google and has calendar scope enabled.' }
-		}
-
-		// Try to resolve visitor's Google email for the invite
-		let visitorEmail: string | undefined = attendeeEmail
-		if (!visitorEmail) {
-			visitorEmail = user?.emailAddresses.at(0)?.emailAddress ?? undefined
-		}
-
-		const oAuth2Client = new google.auth.OAuth2()
-		oAuth2Client.setCredentials({ access_token: adminToken.token })
-		const calendar = google.calendar({ version: 'v3', auth: oAuth2Client })
+		const calendar = getGoogleCalendarClient()
 
 		const startTime = new Date(dateTime)
 		const endTime = new Date(startTime.getTime() + durationMinutes * 60 * 1000)
+		const attendeeNote = attendeeEmail
+			? `\n\nVisitor: ${attendeeName ?? 'Unknown'} <${attendeeEmail}>`
+			: ''
+		const eventDescription = `${description}${attendeeNote}`
 
-		const attendees: { email: string; displayName?: string }[] = []
-		if (visitorEmail) {
-			attendees.push({ email: visitorEmail, displayName: attendeeName })
+		const eventRequest = {
+			summary: title,
+			description: eventDescription,
+			start: { dateTime: startTime.toISOString(), timeZone: 'UTC' },
+			end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
 		}
-
 		const event = await calendar.events.insert({
-			calendarId: 'primary',
-			sendUpdates: 'all',
-			requestBody: {
-				summary: title,
-				description,
-				start: { dateTime: startTime.toISOString(), timeZone: 'UTC' },
-				end: { dateTime: endTime.toISOString(), timeZone: 'UTC' },
-				attendees,
-			},
-			sendNotifications: true
+			calendarId: getGoogleCalendarId(),
+			requestBody: eventRequest,
+		})
+
+		const addToCalendarLink = createGoogleCalendarTemplateLink({
+			title,
+			description,
+			startTime,
+			endTime,
+			gregorEmail: env.GREGOR_MEETING_EMAIL,
 		})
 
 		return {
 			success: true,
 			eventId: event.data.id,
-			htmlLink: event.data.htmlLink,
-			message: `Meeting "${title}" scheduled for ${startTime.toLocaleString()}${visitorEmail ? `. Invite sent to ${visitorEmail}.` : '.'}`,
+			addToCalendarLink,
+			message: `Meeting "${title}" scheduled for ${startTime.toLocaleString()}.${attendeeEmail ? ` Visitor email noted: ${attendeeEmail}.` : ''} The add-to-calendar link invites ${env.GREGOR_MEETING_EMAIL}.`,
 		}
 	} catch (error) {
 		console.error('Failed to schedule meeting:', error)

src/app/admin/_components/MdxComponentReference.tsx

@@ -0,0 +1,118 @@
+import { ChevronsUpDown } from "lucide-react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "~/components/ui/collapsible";
+
+const examples = [
+  {
+    name: "Lead",
+    description: "Intro paragraph with larger muted text.",
+    code: `<Lead>
+Short opening summary.
+</Lead>`,
+  },
+  {
+    name: "Callout",
+    description: "Highlighted note, tip, or warning block.",
+    code: `<Callout title="Heads up" variant="note">
+Important context for readers.
+</Callout>
+
+<Callout title="Tip" variant="tip">
+A practical recommendation.
+</Callout>
+
+<Callout title="Careful" variant="warning">
+A caveat or tradeoff.
+</Callout>`,
+  },
+  {
+    name: "ButtonLink",
+    description: "Button-styled internal or external link.",
+    code: `<ButtonLink href="/projects">
+View projects
+</ButtonLink>
+
+<ButtonLink href="https://example.com" variant="outline">
+External resource
+</ButtonLink>`,
+  },
+  {
+    name: "Figure",
+    description: "Image with optional caption.",
+    code: `<Figure
+  src="https://example.com/image.jpg"
+  alt="Describe the image"
+  caption="Optional caption"
+/>`,
+  },
+  {
+    name: "Layout / Row / Column",
+    description: "Border-less flex layout. Columns sit side by side and wrap when narrow.",
+    code: `<Layout>
+<Row>
+<Column>
+
+- First list item
+- Second list item
+
+</Column>
+<Column>
+
+- Another list
+- Side by side
+
+</Column>
+</Row>
+</Layout>`,
+  },
+  {
+    name: "PullQuote",
+    description: "Large emphasized quote or takeaway.",
+    code: `<PullQuote>
+A highlighted quote or strong takeaway.
+</PullQuote>`,
+  },
+  {
+    name: "TagList",
+    description: "Inline list of tag badges.",
+    code: `<TagList tags={["nextjs", "mdx", "uploadthing"]} />`,
+  },
+  {
+    name: "Badge",
+    description: "Small inline label.",
+    code: `<Badge variant="outline">Next.js</Badge>`,
+  },
+];
+
+export default function MdxComponentReference() {
+  return (
+    <Collapsible className="rounded-lg border">
+      <CollapsibleTrigger className="flex w-full items-center justify-between gap-2 p-4 text-left">
+        <h2 className="text-base font-semibold">MDX Components</h2>
+        <ChevronsUpDown className="size-4 shrink-0 text-muted-foreground" />
+      </CollapsibleTrigger>
+      <CollapsibleContent className="px-4 pb-4">
+        <p className="text-muted-foreground text-sm">
+          Components available inside MDX content. Type <code className="rounded bg-muted px-1">[[</code> for internal links or <code className="rounded bg-muted px-1">&lt;</code> for component snippets.
+        </p>
+        <Accordion type="single" collapsible className="mt-3">
+          {examples.map((example) => (
+            <AccordionItem key={example.name} value={example.name}>
+              <AccordionTrigger>
+                <span>
+                  <span className="block">{example.name}</span>
+                  <span className="text-muted-foreground block text-xs font-normal">{example.description}</span>
+                </span>
+              </AccordionTrigger>
+              <AccordionContent>
+                <pre className="bg-muted overflow-x-auto rounded-md p-3 text-xs">
+                  <code>{example.code}</code>
+                </pre>
+              </AccordionContent>
+            </AccordionItem>
+          ))}
+        </Accordion>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}

src/app/admin/_components/MdxEditorPreview.tsx

@@ -4,9 +4,9 @@ import { useEffect, useState } from 'react'
 import { MDXRemote } from 'next-mdx-remote'
 import { serialize } from 'next-mdx-remote/serialize'
 import type { MDXRemoteSerializeResult } from 'next-mdx-remote'
-import { mdxComponents } from '~/app/blog/_components/mdx-components'
+import { mdxComponents } from '~/components/mdx-components'
 
-export default function BlogMdxEditorPreview(params: { source: string }) {
+export default function MdxEditorPreview(params: { source: string }) {
   const [compiled, setCompiled] = useState<MDXRemoteSerializeResult | null>(null)
   const [error, setError] = useState<string | null>(null)
 

src/app/admin/_components/useMdxEditorFieldProps.tsx

@@ -0,0 +1,164 @@
+'use client'
+
+import { trpc } from '~/app/_trpc/Client'
+import type { RouterOutputs } from '~/server/routers/_app'
+import {
+  AUTOCOMPLETE_CURSOR_MARKER,
+  linkSuggestionsToAutocomplete,
+  type AutocompleteTriggerConfig,
+  type InternalLinkSuggestion,
+  type MdeAutocompleteSuggestion,
+} from '~/app/_components/Form/Fields/InternalLinkTextarea'
+import MdxEditorPreview from './MdxEditorPreview'
+
+function internalLinkSuggestions(params: {
+  posts?: RouterOutputs['blog']['list'],
+  projects?: RouterOutputs['projectv2']['listWithStack'],
+}): InternalLinkSuggestion[] {
+  const postLinks = params.posts?.map((post) => ({
+    label: post.title,
+    href: `/blog/${post.slug}`,
+    group: 'Blog',
+  })) ?? []
+
+  const projectLinks = params.projects?.map((project) => ({
+    label: project.title,
+    href: `/projects#${project.id}`,
+    group: 'Project',
+  })) ?? []
+
+  return [...postLinks, ...projectLinks]
+}
+
+const mdxAutocompleteSuggestions: MdeAutocompleteSuggestion[] = [
+  {
+    label: 'Lead',
+    value: `<Lead>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Lead>`,
+    detail: 'Intro paragraph with larger muted text.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Callout note',
+    value: `<Callout title="Heads up" variant="note">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
+    detail: 'Highlighted note block.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Callout tip',
+    value: `<Callout title="Tip" variant="tip">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
+    detail: 'Highlighted tip block.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Callout warning',
+    value: `<Callout title="Careful" variant="warning">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
+    detail: 'Highlighted warning block.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'ButtonLink',
+    value: `<ButtonLink href="${AUTOCOMPLETE_CURSOR_MARKER}">\nView projects\n</ButtonLink>`,
+    detail: 'Button-styled internal or external link.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Figure',
+    value: `<Figure\n  src="${AUTOCOMPLETE_CURSOR_MARKER}"\n  alt="Describe the image"\n  caption="Optional caption"\n/>`,
+    detail: 'Image with optional caption.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Layout',
+    value: `<Layout>\n<Row>\n<Column>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Column>\n<Column>\n\n</Column>\n</Row>\n</Layout>`,
+    detail: 'Flex layout wrapper with side-by-side, wrapping columns.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Row',
+    value: `<Row>\n<Column>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Column>\n<Column>\n\n</Column>\n</Row>`,
+    detail: 'Side-by-side columns that wrap when narrow.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Column',
+    value: `<Column>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Column>`,
+    detail: 'Vertically stacked column within a Row.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'PullQuote',
+    value: `<PullQuote>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</PullQuote>`,
+    detail: 'Large emphasized quote.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'TagList',
+    value: `<TagList tags={[${AUTOCOMPLETE_CURSOR_MARKER}]} />`,
+    detail: 'Inline list of tag badges.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Badge',
+    value: `<Badge variant="outline">${AUTOCOMPLETE_CURSOR_MARKER}</Badge>`,
+    detail: 'Small inline label.',
+    group: 'Component',
+    trigger: '<',
+  },
+  {
+    label: 'Image',
+    value: `![Image](${AUTOCOMPLETE_CURSOR_MARKER})`,
+    detail: 'Markdown image',
+    group: 'Markdown',
+    trigger: '!',
+  },
+]
+
+const mdxTriggerConfigs: AutocompleteTriggerConfig[] = [
+  {
+    trigger: '[[',
+    label: 'Internal links',
+    isQueryValid: (query) => !query.includes(']'),
+  },
+  {
+    trigger: '<',
+    label: 'MDX components',
+    isQueryValid: (query) => !/[\s>]/.test(query),
+  },
+  {
+    trigger: '!',
+    label: 'Markdown',
+    isQueryValid: (query) => !/[\s\)]/.test(query),
+  },
+]
+
+/**
+ * Shared props for an MDX-aware `MdeFormField`: internal-link + component
+ * autocomplete, trigger configs, and a live MDX preview. Used by every admin
+ * form that edits MDX content (blog, project, cv entry).
+ */
+export function useMdxEditorFieldProps() {
+  const posts = trpc.blog.list.useQuery(undefined, { refetchInterval: 5000 })
+  const projects = trpc.projectv2.listWithStack.useQuery()
+
+  const autocompleteSuggestions = [
+    ...linkSuggestionsToAutocomplete(internalLinkSuggestions({ posts: posts.data, projects: projects.data })),
+    ...mdxAutocompleteSuggestions,
+  ]
+
+  return {
+    autocompleteSuggestions,
+    triggerConfigs: mdxTriggerConfigs,
+    renderPreview: (source: string) => <MdxEditorPreview source={source} />,
+  }
+}

src/app/admin/blog/_components/CreateUpdateForm.tsx

@@ -10,15 +10,8 @@ import { TextInputFormField, MdeFormField } from '~/app/_components/Form/Fields'
 import { usePathname, useRouter } from 'next/navigation'
 import { useTheme } from 'next-themes'
 import type { RouterOutputs } from '~/server/routers/_app'
-import MdxComponentReference from './MdxComponentReference'
-import BlogMdxEditorPreview from './BlogMdxEditorPreview'
-import {
-  AUTOCOMPLETE_CURSOR_MARKER,
-  linkSuggestionsToAutocomplete,
-  type AutocompleteTriggerConfig,
-  type InternalLinkSuggestion,
-  type MdeAutocompleteSuggestion,
-} from '~/app/_components/Form/Fields/InternalLinkTextarea'
+import MdxComponentReference from '~/app/admin/_components/MdxComponentReference'
+import { useMdxEditorFieldProps } from '~/app/admin/_components/useMdxEditorFieldProps'
 
 type BlogPost = RouterOutputs['blog']['bySlug']
 
@@ -35,116 +28,6 @@ function parseTags(value: string | undefined): string[] {
   return value?.split(',').map((tag) => tag.trim()).filter(Boolean) ?? []
 }
 
-function internalLinkSuggestions(params: {
-  posts?: RouterOutputs['blog']['list'],
-  projects?: RouterOutputs['projectv2']['listWithStack'],
-}): InternalLinkSuggestion[] {
-  const postLinks = params.posts?.map((post) => ({
-    label: post.title,
-    href: `/blog/${post.slug}`,
-    group: 'Blog',
-  })) ?? []
-
-  const projectLinks = params.projects?.map((project) => ({
-    label: project.title,
-    href: `/projects#${project.id}`,
-    group: 'Project',
-  })) ?? []
-
-  return [...postLinks, ...projectLinks]
-}
-
-const blogAutocompleteSuggestions: MdeAutocompleteSuggestion[] = [
-  {
-    label: 'Lead',
-    value: `<Lead>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Lead>`,
-    detail: 'Intro paragraph with larger muted text.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'Callout note',
-    value: `<Callout title="Heads up" variant="note">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
-    detail: 'Highlighted note block.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'Callout tip',
-    value: `<Callout title="Tip" variant="tip">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
-    detail: 'Highlighted tip block.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'Callout warning',
-    value: `<Callout title="Careful" variant="warning">\n${AUTOCOMPLETE_CURSOR_MARKER}\n</Callout>`,
-    detail: 'Highlighted warning block.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'ButtonLink',
-    value: `<ButtonLink href="${AUTOCOMPLETE_CURSOR_MARKER}">\nView projects\n</ButtonLink>`,
-    detail: 'Button-styled internal or external link.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'Figure',
-    value: `<Figure\n  src="${AUTOCOMPLETE_CURSOR_MARKER}"\n  alt="Describe the image"\n  caption="Optional caption"\n/>`,
-    detail: 'Image with optional caption.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'PullQuote',
-    value: `<PullQuote>\n${AUTOCOMPLETE_CURSOR_MARKER}\n</PullQuote>`,
-    detail: 'Large emphasized quote.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'TagList',
-    value: `<TagList tags={[${AUTOCOMPLETE_CURSOR_MARKER}]} />`,
-    detail: 'Inline list of tag badges.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'Badge',
-    value: `<Badge variant="outline">${AUTOCOMPLETE_CURSOR_MARKER}</Badge>`,
-    detail: 'Small inline label.',
-    group: 'Component',
-    trigger: '<',
-  },
-  {
-    label: 'Image',
-    value: `![Image](${AUTOCOMPLETE_CURSOR_MARKER})`,
-    detail: 'Markdown image',
-    group: 'Markdown',
-    trigger: '!',
-  },
-]
-
-const blogTriggerConfigs: AutocompleteTriggerConfig[] = [
-  {
-    trigger: '[[',
-    label: 'Internal links',
-    isQueryValid: (query) => !query.includes(']'),
-  },
-  {
-    trigger: '<',
-    label: 'MDX components',
-    isQueryValid: (query) => !/[\s>]/.test(query),
-  },
-  {
-    trigger: '!',
-    label: 'Markdown',
-    isQueryValid: (query) => !/[\s\)]/.test(query),
-  },
-]
-
 export default function CreateUpdateBlogForm(params: { className?: string, entity?: BlogPost }) {
   const [slug, setSlug] = useState<string | undefined>(params.entity?.slug)
   const [originalSlug, setOriginalSlug] = useState<string | undefined>(params.entity?.slug)
@@ -162,12 +45,7 @@ export default function CreateUpdateBlogForm(params: { className?: string, entit
   })
   const path = usePathname()
   const router = useRouter()
-  const posts = trpc.blog.list.useQuery(undefined, { refetchInterval: 5000 })
-  const projects = trpc.projectv2.listWithStack.useQuery()
-  const autocompleteSuggestions = [
-    ...linkSuggestionsToAutocomplete(internalLinkSuggestions({ posts: posts.data, projects: projects.data })),
-    ...blogAutocompleteSuggestions,
-  ]
+  const mdxEditorProps = useMdxEditorFieldProps()
 
   const createMutation = trpc.blog.insert.useMutation({
     onSuccess: (data) => {
@@ -226,9 +104,7 @@ export default function CreateUpdateBlogForm(params: { className?: string, entit
             name='content'
             label='Content'
             dataColorMode={(theme as 'dark' | 'light') ?? 'dark'}
-            autocompleteSuggestions={autocompleteSuggestions}
-            triggerConfigs={blogTriggerConfigs}
-            renderPreview={(source) => <BlogMdxEditorPreview source={source} />}
+            {...mdxEditorProps}
           />
         </FormScaffold>
       </div>

src/app/admin/blog/_components/MdxComponentReference.tsx

@@ -1,91 +0,0 @@
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "~/components/ui/accordion";
-
-const examples = [
-  {
-    name: "Lead",
-    description: "Intro paragraph with larger muted text.",
-    code: `<Lead>
-Short opening summary for the post.
-</Lead>`,
-  },
-  {
-    name: "Callout",
-    description: "Highlighted note, tip, or warning block.",
-    code: `<Callout title="Heads up" variant="note">
-Important context for readers.
-</Callout>
-
-<Callout title="Tip" variant="tip">
-A practical recommendation.
-</Callout>
-
-<Callout title="Careful" variant="warning">
-A caveat or tradeoff.
-</Callout>`,
-  },
-  {
-    name: "ButtonLink",
-    description: "Button-styled internal or external link.",
-    code: `<ButtonLink href="/projects">
-View projects
-</ButtonLink>
-
-<ButtonLink href="https://example.com" variant="outline">
-External resource
-</ButtonLink>`,
-  },
-  {
-    name: "Figure",
-    description: "Image with optional caption.",
-    code: `<Figure
-  src="https://example.com/image.jpg"
-  alt="Describe the image"
-  caption="Optional caption"
-/>`,
-  },
-  {
-    name: "PullQuote",
-    description: "Large emphasized quote or takeaway.",
-    code: `<PullQuote>
-A highlighted quote or strong takeaway.
-</PullQuote>`,
-  },
-  {
-    name: "TagList",
-    description: "Inline list of tag badges inside the post body.",
-    code: `<TagList tags={["nextjs", "mdx", "uploadthing"]} />`,
-  },
-  {
-    name: "Badge",
-    description: "Small inline label.",
-    code: `<Badge variant="outline">Next.js</Badge>`,
-  },
-];
-
-export default function MdxComponentReference() {
-  return (
-    <section className="rounded-lg border p-4">
-      <h2 className="text-base font-semibold">MDX Components</h2>
-      <p className="text-muted-foreground mt-1 text-sm">
-        Components available inside blog post content. Type <code className="rounded bg-muted px-1">[[</code> for internal links or <code className="rounded bg-muted px-1">&lt;</code> for component snippets.
-      </p>
-      <Accordion type="single" collapsible className="mt-3">
-        {examples.map((example) => (
-          <AccordionItem key={example.name} value={example.name}>
-            <AccordionTrigger>
-              <span>
-                <span className="block">{example.name}</span>
-                <span className="text-muted-foreground block text-xs font-normal">{example.description}</span>
-              </span>
-            </AccordionTrigger>
-            <AccordionContent>
-              <pre className="bg-muted overflow-x-auto rounded-md p-3 text-xs">
-                <code>{example.code}</code>
-              </pre>
-            </AccordionContent>
-          </AccordionItem>
-        ))}
-      </Accordion>
-    </section>
-  );
-}

src/app/admin/chat/_components/ModelSelector.tsx

@@ -0,0 +1,48 @@
+'use client'
+import { trpc } from '~/app/_trpc/Client'
+import {
+	Select,
+	SelectContent,
+	SelectItem,
+	SelectTrigger,
+	SelectValue,
+} from '~/components/ui/select'
+
+export default function ModelSelector({ initialValue }: { initialValue: string }) {
+	const utils = trpc.useUtils()
+	const { data: models, isLoading, error } = trpc.chat.listModels.useQuery()
+	const { data: model = initialValue } = trpc.chat.getModel.useQuery(undefined, {
+		initialData: initialValue,
+	})
+
+	const mutation = trpc.chat.updateModel.useMutation({
+		onSuccess: () => utils.chat.getModel.invalidate(),
+	})
+
+	// Ensure the currently-saved model is always selectable, even if the
+	// OpenAI list doesn't include it (e.g. a deprecated model).
+	const options = Array.from(new Set([model, ...(models ?? [])])).filter(Boolean)
+
+	return (
+		<div className="flex flex-col gap-2">
+			<Select value={model} onValueChange={(v) => mutation.mutate({ model: v })}>
+				<SelectTrigger className="w-72">
+					<SelectValue placeholder={isLoading ? 'Loading models…' : 'Select a model'} />
+				</SelectTrigger>
+				<SelectContent>
+					{options.map((id) => (
+						<SelectItem key={id} value={id}>
+							{id}
+						</SelectItem>
+					))}
+				</SelectContent>
+			</Select>
+			<div className="flex items-center gap-3 text-sm text-muted-foreground">
+				{mutation.isPending && <span>Saving…</span>}
+				{mutation.isSuccess && !mutation.isPending && <span>Saved</span>}
+				{error && <span className="text-destructive">Failed to load models: {error.message}</span>}
+				{mutation.error && <span className="text-destructive">{mutation.error.message}</span>}
+			</div>
+		</div>
+	)
+}

src/app/admin/chat/page.tsx

@@ -1,18 +1,31 @@
 import { servTrpc } from '~/app/_trpc/ServerClient'
 import SystemPromptForm from './_components/SystemPromptForm'
+import ModelSelector from './_components/ModelSelector'
 
 export default async function SystemPromptPage() {
 	const prompt = await servTrpc.chat.getSystemPrompt()
+	const model = await servTrpc.chat.getModel()
 
 	return (
-		<div className="w-full max-w-2xl p-6 flex flex-col gap-4">
-			<div>
-				<h1 className="text-lg font-semibold">AI System Prompt</h1>
-				<p className="text-sm text-muted-foreground">
-					This prompt is sent to the model on every chat request.
-				</p>
+		<div className="w-full max-w-2xl p-6 flex flex-col gap-8">
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI Model</h1>
+					<p className="text-sm text-muted-foreground">
+						The OpenAI model used to respond to chat requests.
+					</p>
+				</div>
+				<ModelSelector initialValue={model} />
+			</div>
+			<div className="flex flex-col gap-4">
+				<div>
+					<h1 className="text-lg font-semibold">AI System Prompt</h1>
+					<p className="text-sm text-muted-foreground">
+						This prompt is sent to the model on every chat request.
+					</p>
+				</div>
+				<SystemPromptForm initialValue={prompt} />
 			</div>
-			<SystemPromptForm initialValue={prompt} />
 		</div>
 	)
 }

src/app/admin/cv/entry/_components/CreateUpdateForm.tsx

@@ -14,6 +14,8 @@ import { useState } from 'react';
 import { SelectFormField, TextInputFormField, MdeFormField, CalenderFormField, BooleanFormField } from '~/app/_components/Form/Fields'
 import { usePathname, useRouter } from 'next/navigation';
 import {FormMutationContextProvider, type FormCreateMutationInterface} from '~/app/_components/Form/Components/MutationProvider';
+import MdxComponentReference from '~/app/admin/_components/MdxComponentReference';
+import { useMdxEditorFieldProps } from '~/app/admin/_components/useMdxEditorFieldProps';
 export default function CreateUpdateCvEntryForm(params: { className?: string, entity?: IterableElement<RouterOutputs['entry']['select']>, isUpdate?: boolean }) {
   const [id, setId] = useState<string | undefined>(params.entity ? params.entity.id : undefined)
   const { theme } = useTheme()
@@ -34,6 +36,7 @@ export default function CreateUpdateCvEntryForm(params: { className?: string, en
   })
   let path = usePathname()
   let router = useRouter()
+  const mdxEditorProps = useMdxEditorFieldProps()
   const createMutation = trpc.entry.insert.useMutation({ onSuccess: makeOnSuccess('create', form, setId) })
   const updateMutation = trpc.entry.update.useMutation({ onSuccess: makeOnSuccess('update', form) })
   const deleteMutation = trpc.entry.delete.useMutation({ onSuccess: makeOnSuccess('delete', form, undefined, path, router) })
@@ -51,6 +54,8 @@ export default function CreateUpdateCvEntryForm(params: { className?: string, en
       updateMutation:updateMutation,
       deleteMutation:deleteMutation
     }}>
+    <div className='flex flex-col gap-4'>
+    <MdxComponentReference />
     <FormScaffold
       form={form}
       onSubmit={onSubmit}
@@ -70,11 +75,12 @@ export default function CreateUpdateCvEntryForm(params: { className?: string, en
         }
       </SelectFormField>
       <TextInputFormField control={form.control} name='title' label='Title' />
-      <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ? (theme as "dark" | "light") : "dark"} />
+      <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ? (theme as "dark" | "light") : "dark"} {...mdxEditorProps} />
       <CalenderFormField control={form.control} name='fromTime' label='From Date' />
       <CalenderFormField control={form.control} name='toTime' label='To Date' />
       <BooleanFormField control={form.control} name='hideDates' label='Hide Dates' />
     </FormScaffold>
+    </div>
     </FormMutationContextProvider>
   )
 }

src/app/admin/project/_components/CreateUpdateProjectForm.tsx

@@ -14,6 +14,8 @@ import { usePathname, useRouter } from 'next/navigation';
 import { useTheme } from 'next-themes';
 import { makeUseRelationShipWithNameIndex } from '~/lib/hooks';
 import { FormMutationContextProvider } from '~/app/_components/Form/Components/MutationProvider';
+import MdxComponentReference from '~/app/admin/_components/MdxComponentReference';
+import { useMdxEditorFieldProps } from '~/app/admin/_components/useMdxEditorFieldProps';
 export default function CreateUpdateProjectForm(params: { className?: string, entity?: IterableElement<RouterOutputs['project']['select']> }) {
   const [id, setId] = useState<string | undefined>(params.entity ? params.entity.id : undefined)
   const { theme } = useTheme()
@@ -35,6 +37,7 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
   })
   let path = usePathname()
   let router = useRouter()
+  const mdxEditorProps = useMdxEditorFieldProps()
   const createMutation = trpc.project.insert.useMutation({ onSuccess: makeOnSuccess('create', form, setId) })
   const updateMutation = trpc.project.update.useMutation({ onSuccess: makeOnSuccess('update', form) })
   const deleteMutation = trpc.project.delete.useMutation({ onSuccess: makeOnSuccess('delete', form, undefined, path, router) })
@@ -50,6 +53,8 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
         updateMutation: updateMutation,
         deleteMutation: deleteMutation
       }}>
+      <div className='flex flex-col gap-4'>
+      <MdxComponentReference />
       <FormScaffold
         form={form}
         onSubmit={onSubmit}
@@ -69,7 +74,7 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
           }
         </SelectFormField>
         <TextInputFormField control={form.control} name='title' label='Title' />
-        <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ?? "dark"} />
+        <MdeFormField control={form.control} name='description' label='Description' dataColorMode={(theme as "dark" | "light") ?? "dark"} {...mdxEditorProps} />
         <SelectFormField control={form.control} name='sourceType' label='Source Type' defaultValue={'open'} placeholder='open'  >
           <SelectItem value="open"> open </SelectItem>
           <SelectItem value="closed"> closed </SelectItem>
@@ -82,6 +87,7 @@ export default function CreateUpdateProjectForm(params: { className?: string, en
         <TextInputFormField control={form.control} label='Release Link' name='releaseLink' />
         <IntInputFormField control={form.control} label='Order Position' name='orderPos'/>
       </FormScaffold>
+      </div>
     </FormMutationContextProvider>
   )
 }

src/app/api/chat/route.ts

@@ -1,14 +1,12 @@
 import { auth } from '@clerk/nextjs/server'
 import { createOpenAI } from '@ai-sdk/openai'
-import { streamText, tool, convertToModelMessages, stepCountIs, type UIMessage } from 'ai'
-import { success, z } from 'zod'
+import { streamText, convertToModelMessages, stepCountIs, type UIMessage } from 'ai'
 import { eq, and } from 'drizzle-orm'
 import { env } from '~/env'
 import { db } from '~/server/db'
 import { chatSession, chatMessage } from '~/server/dbschema/schema'
 import { servTrpc } from '~/app/_trpc/ServerClient'
-import { scheduleMeeting } from '~/app/actions/scheduleMeeting'
-import currentTime from '~/app/actions/currentTime';
+import { createChatTools } from '~/server/ai/tools'
 
 const openai = createOpenAI({ apiKey: env.OPENAI_API_KEY })
 
@@ -31,7 +29,18 @@ export async function POST(req: Request) {
 
 	if (!session) return new Response('Session not found', { status: 404 })
 
-	const systemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const configuredSystemPrompt = await servTrpc.chat.getSystemPrompt() || 'You are an AI recruiter assistant.'
+	const systemPrompt = `${configuredSystemPrompt}
+
+Runtime context:
+- Current server time: ${new Date().toISOString()}.
+- Default meeting timezone: Europe/Berlin.
+- For availability questions like "next open spot", call getAvailability once. It defaults to checking from now. Use nextAvailableSlot for the next opening, or the first item in availableSlots if needed. Do not call getAvailability again just to get more slots.
+- After scheduleMeeting succeeds, include only the returned addToCalendarLink for the visitor. Format it as a Markdown link like [Add this meeting to your Google Calendar](URL); do not paste the raw URL. Explain briefly that this link lets them add the meeting to their own calendar and invite Gregor. Do not mention internal Google Calendar event links.
+- You can remove meetings from Gregor's availability calendar with cancelMeeting only when you have the exact eventId from a previous scheduleMeeting result. If a visitor asks to reschedule and you have both the old eventId and a confirmed new slot, call cancelMeeting once for the old event and scheduleMeeting once for the new event. If you do not have the old eventId, ask for clarification instead of guessing.
+- When rescheduling, make clear that cancelMeeting only removes the old slot from Gregor's availability calendar. If the visitor already added the old link to their own calendar, they may need to remove that copy themselves.
+- Do not calculate or invent calendar availability yourself.`
+	const model = await servTrpc.chat.getModel()
 
 	// Save the latest user message
 	const lastMessage = messages[messages.length - 1]
@@ -46,45 +55,17 @@ export async function POST(req: Request) {
 	}
 
 	const result = streamText({
-		model: openai('gpt-5-mini'),
+		model: openai(model),
 		system: systemPrompt,
 		messages: await convertToModelMessages(messages),
-		tools: {
-			scheduleMeeting: tool({
-				description: 'Schedule a meeting with Gregor Lohaus and add it to his Google Calendar',
-				inputSchema: z.object({
-					title: z.string().describe('Meeting title, make something up if not provided'),
-					description: z.string().describe('Meeting description / agenda,  make something up if not provided'),
-					dateTime: z
-						.string()
-						.describe(
-							'ISO 8601 datetime for the meeting start, e.g. 2025-04-01T10:00:00',
-						),
-					durationMinutes: z
-						.number()
-						.int()
-						.min(15)
-						.max(120)
-						.describe('Duration of the meeting in minutes, if none provided ask if 20 minutes is ok'),
-					attendeeEmail: z
-						.string()
-						.email()
-						.optional()
-						.describe('Optional Email of the visitor to invite (if provided)'),
-					attendeeName: z.string().optional().describe('Name of the visitor'),
-				}),
-				execute: async (input) => scheduleMeeting({ ...input }),
-			}),
-			getCurrentUnixTime: tool({
-				description: 'Get the current unix time to reference for meeting dates',
-				inputSchema: z.object({
-					none: z.string().optional().describe("no inputs are needed")
-				}),
-				execute: async () => currentTime()
-			})
-		},
-		stopWhen: stepCountIs(5),
+		tools: createChatTools(),
+		stopWhen: stepCountIs(3),
 		onFinish: async ({ text, finishReason }) => {
+			console.log('[ai:chat:onFinish]', {
+				finishReason,
+				hasText: Boolean(text),
+				textLength: text.length,
+			})
 			if (text && finishReason === 'stop') {
 				await db.insert(chatMessage).values({
 					sessionId,

src/app/blog/[slug]/page.tsx

@@ -1,9 +1,10 @@
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { TRPCError } from "@trpc/server";
+import matter from "gray-matter";
 import { servTrpc } from "~/app/_trpc/ServerClient";
 import { Badge } from "~/components/ui/badge";
-import { mdxComponents } from "../_components/mdx-components";
+import { mdxComponents } from "~/components/mdx-components";
 
 type Props = {
   params: Promise<{ slug: string }>;
@@ -12,37 +13,47 @@ type Props = {
 export default async function BlogPostPage({ params }: Props) {
   const { slug } = await params;
 
-  let post: Awaited<ReturnType<typeof servTrpc.blog.bySlug>>;
+  let post: Awaited<ReturnType<typeof servTrpc.blog.metadataBySlug>>;
   try {
-    post = await servTrpc.blog.bySlug(slug);
+    post = await servTrpc.blog.metadataBySlug(slug);
   } catch (e) {
     if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
     throw e;
   }
 
+  const response = await fetch(post.fileUrl, { next: { revalidate: 3600 } });
+  if (!response.ok) notFound();
+
+  const parsed = matter(await response.text());
+  const tags = Array.isArray(parsed.data.tags)
+    ? parsed.data.tags.map((tag) => String(tag).trim()).filter(Boolean)
+    : post.tags;
+  const title = typeof parsed.data.title === "string" ? parsed.data.title : post.title;
+  const date = typeof parsed.data.date === "string" ? parsed.data.date : post.date;
+
   return (
-    <main className="mx-auto max-w-2xl px-4 py-12">
+    <main className="mx-auto h-full max-w-2xl overflow-y-auto px-4 py-12">
       <header className="mb-8">
-        <h1 className="text-3xl font-bold">{post.title}</h1>
-        {post.date && (
+        <h1 className="text-3xl font-bold">{title}</h1>
+        {date && (
           <time className="text-muted-foreground text-sm">
-            {new Date(post.date).toLocaleDateString("en-US", {
+            {new Date(date).toLocaleDateString("en-US", {
               year: "numeric",
               month: "long",
               day: "numeric",
             })}
           </time>
         )}
-        {post.tags.length > 0 && (
+        {tags.length > 0 && (
           <div className="mt-3 flex flex-wrap gap-1.5">
-            {post.tags.map((tag) => (
+            {tags.map((tag) => (
               <Badge key={tag} variant="outline">{tag}</Badge>
             ))}
           </div>
         )}
       </header>
       <article className="prose dark:prose-invert max-w-none">
-        <MDXRemote source={post.content} components={mdxComponents} />
+        <MDXRemote source={parsed.content} components={mdxComponents} />
       </article>
     </main>
   );

src/app/blog/page.tsx

@@ -6,7 +6,7 @@ export default async function BlogPage() {
   const posts = await servTrpc.blog.list();
 
   return (
-    <main className="mx-auto max-w-2xl px-4 py-12">
+    <main className="mx-auto h-full max-w-2xl overflow-y-auto px-4 py-12">
       <h1 className="mb-8 text-3xl font-bold">Blog</h1>
       {posts.length === 0 ? (
         <p className="text-muted-foreground">No posts yet.</p>

src/app/chat/_components/AssistantMessage.tsx

@@ -1,6 +1,24 @@
 import type { UIMessage } from "ai";
-import Markdown from "react-markdown";
-import { cn } from "~/lib/utils";
+import { ClientMdx } from "~/components/ClientMdx";
+
+function toolLabel(type: string) {
+	switch (type) {
+		case "tool-searchSiteContent":
+			return "Searching site content";
+		case "tool-getRelevantExperience":
+			return "Finding relevant experience";
+		case "tool-getProjectDetails":
+			return "Loading project details";
+		case "tool-getAvailability":
+			return "Checking availability";
+		case "tool-cancelMeeting":
+			return "Removing meeting";
+		case "tool-getCurrentUnixTime":
+			return "Checking current time";
+		default:
+			return "Using tool";
+	}
+}
 
 export const AssistantMessage = (props: { message: UIMessage }) => {
   let message = props.message;
@@ -11,57 +29,90 @@ export const AssistantMessage = (props: { message: UIMessage }) => {
     >
       <div
         className=
-        'max-w-[80%] px-4 py-2 text-sm space-y-2 bg-muted'
+        'max-w-[80%] min-w-0 px-4 py-2 text-sm space-y-2 bg-muted break-words [overflow-wrap:anywhere] [&_a]:break-all [&_pre]:max-w-full [&_pre]:overflow-x-auto'
       >
         {message.parts.map((part, i) => {
           if (part.type === 'text') {
             return (
-              <Markdown key={crypto.randomUUID()}>
-                {part.text}
-              </Markdown>
+              <ClientMdx key={i} source={part.text} fallback={part.text} />
             )
           }
-          if (part.type === 'tool-scheduleMeeting') {
-            const toolPart = part as unknown as {
-              type: 'tool-scheduleMeeting'
-              state: string
-              input: unknown
-              output?: { success: boolean; message?: string; htmlLink?: string; error?: string }
-            }
+	          if (part.type === 'tool-scheduleMeeting') {
+	            const toolPart = part as unknown as {
+	              type: 'tool-scheduleMeeting'
+	              state: string
+	              input: unknown
+	              output?: { success: boolean; error?: string }
+	            }
             if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
               return (
                 <p key={i} className="text-xs opacity-70 italic">
                   Scheduling meeting…
                 </p>
               )
-            }
-            if (toolPart.state === 'output-available' && toolPart.output) {
-              const result = toolPart.output
-              return (
-                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
-                  {result.success ? (
-                    <span>
-                      ✓ {result.message}{' '}
-                      {result.htmlLink && (
-                        <a
-                          href={result.htmlLink}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="underline"
-                        >
-                          View event
-                        </a>
-                      )}
-                    </span>
-                  ) : (
-                    <span>✗ {result.error}</span>
-                  )}
+	            }
+	            if (toolPart.state === 'output-available' && toolPart.output) {
+	              const result = toolPart.output
+	              if (result.success) return null
+	              return (
+	                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+	                  <span>✗ {result.error}</span>
                 </div>
-              )
-            }
-          }
-          return null
-        })}
+	              )
+	            }
+	          }
+	          if (part.type === 'tool-cancelMeeting') {
+	            const toolPart = part as unknown as {
+	              type: 'tool-cancelMeeting'
+	              state: string
+	              output?: { success: boolean; error?: string }
+	            }
+	            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  Removing meeting…
+	                </p>
+	              )
+	            }
+	            if (toolPart.state === 'output-available' && toolPart.output) {
+	              if (toolPart.output.success) return null
+	              return (
+	                <div key={i} className="text-xs mt-1 p-2 bg-background/20 rounded">
+	                  <span>✗ {toolPart.output.error}</span>
+	                </div>
+	              )
+	            }
+	          }
+	          if (part.type.startsWith('tool-')) {
+	            const toolPart = part as unknown as {
+	              type: string
+	              state: string
+	              output?: { success?: boolean; results?: unknown[]; matches?: unknown[]; availableSlots?: unknown[]; project?: unknown; error?: string }
+	            }
+	            if (toolPart.state === 'input-available' || toolPart.state === 'input-streaming') {
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  {toolLabel(toolPart.type)}...
+	                </p>
+	              )
+	            }
+	            if (toolPart.state === 'output-available') {
+	              const count = toolPart.output?.results?.length
+	                ?? toolPart.output?.matches?.length
+	                ?? toolPart.output?.availableSlots?.length
+	              return (
+	                <p key={i} className="text-xs opacity-70 italic">
+	                  {toolPart.output?.success === false
+	                    ? (toolPart.output.error ?? `${toolLabel(toolPart.type)} failed`)
+	                    : count != null
+	                      ? `${toolLabel(toolPart.type)} complete (${count})`
+	                      : `${toolLabel(toolPart.type)} complete`}
+	                </p>
+	              )
+	            }
+	          }
+	          return null
+	        })}
       </div>
     </div>
   )

src/app/chat/_components/ChatInterface.tsx

@@ -1,5 +1,5 @@
 'use client'
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import { useChat } from '@ai-sdk/react'
 import { DefaultChatTransport, type UIMessage } from 'ai'
 import { Button } from '~/components/ui/button'
@@ -54,7 +54,7 @@ function addInitMessage(messageArray: UIMessage[]) {
 			role: 'assistant',
 			parts: [{
 				type: 'text',
-				text: "Hi im gregors ai assistant,you can ask me to provide general information or to schedule a meeting."
+				text: "Hi, I'm Gregor's AI assistant. Ask me about his experience, projects, blog posts, or availability for a meeting."
 			}],
 		})
 	}
@@ -83,14 +83,21 @@ function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProp
 		sendMessage({ text })
 	}
 	const gsapContext = useGsapContext()
+	const didInitialScroll = useRef(false)
 	useEffect(() => {
-		let scroller = gsapContext?.getScroller()
-		if (scroller instanceof Window) {
-			return;
+		const scroller = gsapContext?.getScroller()
+		if (!scroller || scroller instanceof Window) {
+			return
 		}
-		console.log(scroller?.scrollHeight)
-		scroller?.scrollTo({ behavior: 'smooth', top: scroller.scrollHeight })
-	}, [messages])
+		// Jump instantly on first open so the chat starts pinned to the bottom;
+		// animate subsequent updates. Defer a frame so the messages have laid out
+		// (and any streaming content has grown) before we measure scrollHeight.
+		const behavior: ScrollBehavior = didInitialScroll.current ? 'smooth' : 'auto'
+		didInitialScroll.current = true
+		requestAnimationFrame(() => {
+			scroller.scrollTo({ behavior, top: scroller.scrollHeight })
+		})
+	}, [messages, status])
 	return (
 		<div className="flex flex-col h-full">
 			{messages &&
@@ -114,7 +121,7 @@ function AuthenticatedChatInterface({ dbMessages, sessionId }: ChatInterfaceProp
 				</div>
 			)}
 
-			<div className="p-4 border-t flex flex-row gap-2">
+			<div className="p-4 border-t flex flex-row gap-2 shrink-0">
 				<Textarea
 					name='message'
 					value={input}

src/app/chat/_components/Messages.tsx

@@ -6,7 +6,7 @@ import { ScrollArea } from '~/components/ui/scroll-area';
 import { memo } from 'react';
 const Messages = memo(({messages,status}: { messages: UIMessage[],status:ChatStatus}) => {
   return (
-    <ScrollArea data-scroller-priority='1' className="w-full h-[90%] max-w-4xl mx-auto">
+    <ScrollArea data-scroller-priority='1' className="w-full flex-1 min-h-0 max-w-4xl mx-auto">
       {messages.map((message, i) => (
         <Card.AnimatedCard scrollOnly={true} key={i}>
           <Card.CardContent>

src/app/chat/_components/UserMessage.tsx

@@ -14,7 +14,7 @@ export const UserMessage = (props:{message: UIMessage}) => {
     >
       <div
         className=
-        'max-w-[80%] px-4 py-2 text-sm space-y-2 bg-primary'
+        'max-w-[80%] min-w-0 px-4 py-2 text-sm space-y-2 bg-primary break-words whitespace-pre-wrap [overflow-wrap:anywhere]'
       >
       {message}
       </div>

src/app/chat/page.tsx

@@ -9,11 +9,11 @@ export default function ChatPage() {
 	const {messages,session,isLoading,error} = useMessages()
 	useTimeLine(messages)
 	return (
-		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
+		<div className="flex flex-col px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10 pb-4">
 					<AnimatedPageTitle position={0}>
 						<span>Talk To My </span> <span> AI-Assistant</span>
 					</AnimatedPageTitle>
-					<div className='flex items-center h-[80%] w-full my-auto w-full'>
+					<div className='flex flex-1 min-h-0 w-full'>
 					{!isLoading &&
 					<ChatInterface sessionId={session?.id} dbMessages={messages ?? []}/>
 					}

src/app/cv/_components/CvCategory.tsx

@@ -1,42 +1,67 @@
-'use client'
-import { trpc } from "~/app/_trpc/Client"
+import type { ReactNode } from "react"
 import CvEntry from "./CvEntry"
-import type { servTrpc } from "~/app/_trpc/ServerClient"
-import type { inferProcedureOutput } from "@trpc/server"
 import type { RouterOutputs } from "~/server/routers/_app"
-import { cn } from "~/lib/utils" 
-import { Card, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
+import { cn } from "~/lib/utils"
+import { AnimatedCard, CardContent, CardHeader, CardTitle } from "~/components/ui/card"
 import type { ArrayElement } from "type-fest"
-import AnimatePopUp from "~/app/_components/Animated/AnimatePopUp";
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatedDiv from "~/app/_components/Animated/AnimatedDiv"
 import { ScrollArea } from "~/components/ui/scroll-area";
+
+export type CvCategoryData = ArrayElement<RouterOutputs['categoryv2']['listAllWithEntries']>
+
 type CvCategoryProps = {
-  initialData: ArrayElement<RouterOutputs['categoryv2']['listByLayoutPosition']>,
-  layout: "row"|"col",
-  children?: React.ReactElement<Parameters<typeof CvEntry>>
+  category: CvCategoryData,
+  layout: "row" | "col",
+  position?: number,
+  descriptions: Record<string, ReactNode>,
 }
-export default function CvCategory(props:CvCategoryProps)  {
-  const category = trpc.categoryv2.getById.useQuery(props.initialData? props.initialData.id : "");
-  const entries = trpc.entryv2.byCategoryAndToDateDescending.useQuery(category.data?.id || "")
-		return (
-			<Card className={cn(props.layout == "row" ? "w-full" : "","gsapan", "h-screen")}>
-				<CardHeader>
-					<CardTitle>
-						{category.data?.name}
-					</CardTitle>
-				</CardHeader>
-				{(entries.data?.length ? entries.data?.length : 0 ) > 0 ?
-					<CardContent className={cn(props.layout == "row" ? "flex flex-row flex-wrap justify-center lg:justify-between" : "flex flex-col","gap-4","overflow-scroll")}>
-						<ScrollArea>
-						{entries.data?.map((entry,i) => (
-							<AnimatePopUp position={i}key={entry.id}>
-							<CvEntry className={props.layout == "row" ? "w-full lg:w-fit" : undefined}  initialData={entry}/>
-							</AnimatePopUp>
-						))}
-					</ScrollArea>
-					</CardContent>
-					:
-					<></>
-				} 
-			</Card>
-		) 
+export default function CvCategory({ category, layout, position = 0, descriptions }: CvCategoryProps) {
+  const entries = category.cvEntry
+  const isRowLayout = layout === "row"
+  const entryStart = position + 1
+  const entryStagger = 1.1
+  const entryItems = entries.map((entry, i) => {
+    const entryPosition = entryStart + i * entryStagger
+
+    return (
+      <AnimatedDiv
+        className={cn(isRowLayout ? "min-w-[min(100%,18rem)] flex-1" : "w-full", "opacity-0 -translate-x-6")}
+        position={entryPosition}
+        debugId={`cv-entry-wrapper:${category.name}:${entry.title}:${entryPosition}`}
+        opacity={1}
+        x={0}
+        duration={0.4}
+        ease="power2.out"
+        key={entry.id}
+      >
+        <CvEntry position={entryPosition} entry={entry} description={descriptions[entry.id]} row={isRowLayout} className="w-full" />
+      </AnimatedDiv>
+    )
+  })
+
+  return (
+    <AnimatedCard position={position} className={cn(isRowLayout ? "h-fit min-w-[min(100%,18rem)] flex-1" : "lg:h-full lg:min-h-0")}>
+      <CardHeader>
+        <AnimateTextIn once position={position + 0.35} animation="slide" debugId={`cv-category-title:${category.name}:${position + 0.35}`}>
+          <CardTitle>{category.name}</CardTitle>
+        </AnimateTextIn>
+      </CardHeader>
+      {entries.length > 0 ?
+        <CardContent className={cn(isRowLayout ? "flex flex-row flex-wrap items-stretch justify-center lg:justify-between" : "flex flex-col flex-1 min-h-0", "gap-4")}>
+          {isRowLayout ? (
+            entryItems
+          ) : (
+            <ScrollArea className="min-h-0 w-full flex-1">
+              <div className="flex flex-col gap-4 pr-2">
+                {entryItems}
+              </div>
+            </ScrollArea>
+          )}
+        </CardContent>
+        :
+        <></>
+      }
+    </AnimatedCard>
+  )
 }

src/app/cv/_components/CvEntry.tsx

@@ -1,68 +1,56 @@
-import { trpc } from "~/app/_trpc/Client"
+import type { ReactNode } from "react"
 import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "~/components/ui/card"
-import { Skeleton } from "~/components/ui/skeleton"
-import { cn, type Defined } from "~/lib/utils"
-import Markdown from 'react-markdown'
+import { cn } from "~/lib/utils"
 import { format } from 'date-fns'
-import rehypeHighlight from 'rehype-highlight'
-import rehypeRaw from 'rehype-raw'
-import type { RouterOutputs } from "~/server/routers/_app"
 import type { ArrayElement } from "type-fest"
-export default function CvEntry(params: {
-	initialData: ArrayElement<Defined<RouterOutputs['categoryv2']['getById']>['cvEntry']>,
-	className?: string
+import AnimateTextIn from "~/app/_components/Animated/AnimateIn"
+import AnimatedDiv from "~/app/_components/Animated/AnimatedDiv"
+import type { CvCategoryData } from "./CvCategory"
+
+export type CvEntryData = ArrayElement<CvCategoryData['cvEntry']>
+
+export default function CvEntry({ entry, description, className, position = 0, row = false }: {
+	entry: CvEntryData,
+	description?: ReactNode,
+	className?: string,
+	position?: number,
+	row?: boolean,
 }) {
-	const query = trpc.entryv2.getById.useQuery(params.initialData.id);
-	const { data, isError, error } = query
+	const from = format(new Date(entry.fromTime), 'MMMM yyyy')
+	const to = format(new Date(entry.toTime), 'MMMM yyyy')
+
 	return (
-		<>
-			{
-				data ?
-					<>
-						<Card className={params.className ? cn("w-fit", params.className) : "w-fit"}>
-							{
-								data.title ?
-									<CardHeader>
-										<CardTitle> {data.title} </CardTitle>
-									</CardHeader> :
-									<></>
-							}
-							{
-								data.description ?
-									<CardContent className="text-sm lg:text-base">
-										<article className="prose prose-zinc dark:prose-invert max-w-none">
-											<Markdown rehypePlugins={[rehypeHighlight, rehypeRaw]}>{data.description}</Markdown>
-										</article>
-									</CardContent> :
-									<></>
-							}
-							{
-								!data.hideDates ?
-									<CardFooter className="text-sm">
-										{`von ${format((new Date()).setTime(Date.parse(data.fromTime)), 'M. yyyy')} bis zum ${format((new Date()).setTime(Date.parse(data.toTime)), 'M. yyyy')}`}
-									</CardFooter> :
-									<></>
-							}
-						</Card>
-					</> :
-					<>
-						<Card>
-							<CardHeader>
-								<div className="flex flex-row">
-									<CardTitle> <Skeleton className="h-2rem w-5rem" /> </CardTitle>
-									<span className="ml-auto text-sm"> <Skeleton className="h-1rem w-3rem" /> - <Skeleton className="h-1rem w-3rem" /> </span>
-								</div>
-							</CardHeader>
-							<CardContent>
-								<div>
-									<Skeleton className="h-4 w-60" />
-									<Skeleton className="h-4 w-50" />
-									<Skeleton className="h-4 w-50" />
-								</div>
-							</CardContent>
-						</Card>
-					</>
+		<Card className={cn("w-full ring-0", row && "h-full", className)}>
+			{entry.title ?
+				<CardHeader>
+					<AnimateTextIn once position={position + 0.25} animation="slide" debugId={`cv-entry-title:${entry.title}:${position + 0.25}`}>
+						<CardTitle> {entry.title} </CardTitle>
+					</AnimateTextIn>
+				</CardHeader> :
+				<></>
 			}
-		</>
+			{entry.description ?
+				<CardContent className={cn("text-sm lg:text-base", row && "flex flex-1 items-center justify-center")}>
+					{/* Fade the description in place instead of collapsing its height:
+					    the outer entry pop-up (CvCategory) measures height:auto when it
+					    plays, so the description must stay laid out at full height or the
+					    entry reveals too short. */}
+					<AnimatedDiv once position={position + 0.75} className={cn("opacity-0", row && "w-full")} opacity={1} duration={0.5} debugId={`cv-entry-description:${entry.title}:${position + 0.75}`}>
+						<article className={cn("prose prose-zinc dark:prose-invert max-w-none", row && "text-center")}>
+							{description ?? entry.description}
+						</article>
+					</AnimatedDiv>
+				</CardContent> :
+				<></>
+			}
+			{!entry.hideDates ?
+				<CardFooter className="border-t-0 text-sm">
+					<AnimateTextIn once position={position + 1.15} debugId={`cv-entry-dates:${entry.title}:${position + 1.15}`}>
+						{`${from} to ${to}`}
+					</AnimateTextIn>
+				</CardFooter> :
+				<></>
+			}
+		</Card>
 	)
 }

src/app/cv/_components/Page.tsx

@@ -0,0 +1,122 @@
+'use client'
+import type { ReactNode } from "react";
+import { Sidebar, SidebarContent, SidebarProvider, useSidebar } from "~/components/ui/sidebar";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import type { RouterOutputs } from "~/server/routers/_app"
+import SidebarTriggerDisappearsOnMobile from "./SidebarTriggerDisappearsOnMobile";
+import CvCategory from "./CvCategory";
+import { useTimeLine } from "~/app/_providers/GsapProvicer";
+import { cn } from "~/lib/utils";
+export default function CvPage(props: {
+  cv: RouterOutputs['categoryv2']['listAllWithEntries'],
+  descriptions: Record<string, ReactNode>,
+}) {
+  useTimeLine(props.cv)
+  const { descriptions } = props
+  const byPosition = (pos: "sidebar" | "header" | "col1" | "col2") =>
+    props.cv?.filter((c) => c.layoutPosition === pos) ?? []
+  const sidebarCategories = byPosition("sidebar")
+  const headerCategories = byPosition("header")
+  const col1Categories = byPosition("col1")
+  const col2Categories = byPosition("col2")
+  const hasSidebar = sidebarCategories.length > 0
+  const hasTwoMainColumns = col1Categories.length > 0 && col2Categories.length > 0
+  const mainColumnWidthClass = hasTwoMainColumns ? "lg:w-1/2 lg:h-full" : ""
+  const sequencePositions = <T extends { cvEntry: unknown[] }>(categories: T[], start = 0) => {
+    let cursor = start
+    const positions = categories.map((category) => {
+      const position = cursor
+      cursor += 1.8 + category.cvEntry.length * 1.2
+      return position
+    })
+
+    return { end: cursor, positions }
+  }
+  const headerSequence = sequencePositions(headerCategories)
+  const sidebarSequence = sequencePositions(sidebarCategories)
+  const contentStart = Math.max(headerSequence.end, sidebarSequence.end)
+  const col1Sequence = sequencePositions(col1Categories, contentStart)
+  const col2Sequence = sequencePositions(col2Categories, contentStart)
+
+  return (
+    <>
+      <SidebarProvider className="h-full min-h-0 overflow-hidden">
+        {sidebarCategories.length > 0 &&
+          <>
+            <SidebarTriggerDisappearsOnMobile />
+            <Sidebar>
+              <SidebarContent className="p-2 lg:pt-[3.2rem]">
+                {sidebarCategories.map((cat, i) => (
+                  <CvCategory layout="col" position={sidebarSequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+                ))}
+              </SidebarContent>
+            </Sidebar>
+          </>
+        }
+        <MainContent
+          hasSidebar={hasSidebar}
+          mainColumnWidthClass={mainColumnWidthClass}
+          headerCategories={headerCategories}
+          headerSequence={headerSequence}
+          col1Categories={col1Categories}
+          col1Sequence={col1Sequence}
+          col2Categories={col2Categories}
+          col2Sequence={col2Sequence}
+          descriptions={descriptions}
+        />
+      </SidebarProvider>
+    </>
+  )
+}
+
+type Sequence = { positions: number[] }
+type Category = NonNullable<RouterOutputs['categoryv2']['listAllWithEntries']>[number]
+
+function MainContent(props: {
+  hasSidebar: boolean,
+  mainColumnWidthClass: string,
+  headerCategories: Category[],
+  headerSequence: Sequence,
+  col1Categories: Category[],
+  col1Sequence: Sequence,
+  col2Categories: Category[],
+  col2Sequence: Sequence,
+  descriptions: Record<string, ReactNode>,
+}) {
+  const {
+    hasSidebar, mainColumnWidthClass, headerCategories, headerSequence,
+    col1Categories, col1Sequence, col2Categories, col2Sequence, descriptions,
+  } = props
+  const { open } = useSidebar()
+
+  return (
+    <ScrollArea className="h-full min-h-0 w-full flex-1">
+      <div
+        id="mainwrap"
+        className={cn(
+          "flex w-full flex-col gap-4 p-4 pt-8",
+          !hasSidebar && "lg:px-[15vw]",
+          hasSidebar && !open && "lg:px-[8vw]",
+        )}
+      >
+        <div id="header" className="flex w-full flex-row flex-wrap items-stretch gap-4">
+          {headerCategories.map((cat, i) => (
+            <CvCategory layout="row" position={headerSequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+          ))}
+        </div>
+        <div id="colwrapper" className="flex w-full flex-col gap-4 lg:h-[80vh] lg:flex-row">
+          <div id="col1" className={cn("flex min-h-0 w-full flex-col gap-4", mainColumnWidthClass)}>
+            {col1Categories.map((cat, i) => (
+              <CvCategory layout="col" position={col1Sequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+            ))}
+          </div>
+          <div id="col2" className={cn("flex min-h-0 w-full flex-col gap-4", mainColumnWidthClass)}>
+            {col2Categories.map((cat, i) => (
+              <CvCategory layout="col" position={col2Sequence.positions[i] ?? 0} category={cat} descriptions={descriptions} key={cat.id} />
+            ))}
+          </div>
+        </div>
+      </div>
+    </ScrollArea>
+  )
+}

src/app/cv/page.tsx

@@ -1,97 +1,42 @@
-'use client'
-import { useGSAP } from "@gsap/react";
-import { useGsapContext,useTimeLine } from "../_providers/GsapProvicer";
-import { trpc } from "../_trpc/Client";
-import { useRef } from "react";
-import { SidebarContent, SidebarProvider, Sidebar } from "~/components/ui/sidebar";
-import SidebarTriggerDisappearsOnMobile from "./_components/SidebarTriggerDisappearsOnMobile";
-import CvCategory from "./_components/CvCategory";
-import gsap from 'gsap'
-export default function CvPage() {
-  const sidebarCategories = trpc.categoryv2.listByLayoutPosition.useQuery("sidebar");
-  const col1Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col1");
-  const headerCategories = trpc.categoryv2.listByLayoutPosition.useQuery("header");
-  const col2Categories = trpc.categoryv2.listByLayoutPosition.useQuery("col2");
-  const gsapContext = useGsapContext()
-  const container = useRef<HTMLDivElement>(null)
-  enum Direction {
-    Left = 1,
-    Up,
-    Right,
-    Down
-  }
-  const nextGsapConf = (direction: Direction) => {
-    switch (direction) {
-      case Direction.Left:
-        return { x: -100, opacity: 0, duration: 0.5 }
-      case Direction.Up:
-        return { y: -100, opacity: 0, duration: 0.5 }
-      case Direction.Right:
-        return { x: 100, opacity: 0, duration: 0.5 }
-      case Direction.Down:
-        return { y: 100, opacity: 0, duration: 0.5 }
+import { Suspense, type ReactNode } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { servTrpc as trpc } from "../_trpc/ServerClient";
+import { mdxComponents } from "~/components/mdx-components";
+import Page from "./_components/Page";
+
+export default async function CvPage() {
+  const cv = await trpc.categoryv2.listAllWithEntries();
+
+  // Render the MDX descriptions on the server so they exist at first paint.
+  // The client tree (which runs the GSAP entrance via useTimeLine) only places
+  // these already-rendered nodes — it never invokes the MDX renderer itself, so
+  // the 'use client' boundary stays intact and the animations no longer play
+  // against an un-rendered fallback.
+  const descriptions: Record<string, ReactNode> = {};
+  for (const category of cv ?? []) {
+    for (const entry of category.cvEntry) {
+      if (!entry.description?.trim()) continue;
+      descriptions[entry.id] = (
+        <MDXRemote
+          source={entry.description}
+          components={mdxComponents}
+          options={{
+            mdxOptions: {
+              format: "mdx",
+              remarkPlugins: [remarkGfm],
+              rehypePlugins: [rehypeHighlight],
+            },
+          }}
+        />
+      );
     }
   }
-  useTimeLine(col2Categories)
-  useGSAP(() => {
-    const items = gsap?.utils.toArray<GSAPTweenTarget>('.gsapan');
-    let dir = Direction.Left;
-    items?.forEach(item => {
-      gsapContext?.addAnimation(gsap.from(item, nextGsapConf(dir)),0)
-      if (dir == Direction.Down) {
-        dir = Direction.Left
-      } else {
-        dir = dir + 1
-      }
-    })
-  }, { scope: container, dependencies: [headerCategories.data, sidebarCategories.data], revertOnUpdate: true })
+
   return (
-    <>
-      <SidebarProvider ref={container}>
-        {sidebarCategories.data &&
-          <>
-            <SidebarTriggerDisappearsOnMobile />
-            <Sidebar className="gsapan ">
-              <SidebarContent className="p-2 lg:pt-[3.2rem]">
-                {sidebarCategories.data?.map((cat) => {
-                  if (cat !== undefined) {
-                    return (
-                      <CvCategory layout="col" initialData={cat} key={cat.id} />
-                    )
-                  }
-                })}
-              </SidebarContent>
-            </Sidebar>
-          </> 
-        }
-        <div className="h-full w-full flex flex-wrap flex-row p-4 pt-8 ">
-          <div id="mainwrap" className="flex w-full flex-col gap-4 lg:px-[15vw]">
-            <div id="header" className="flex  w-full h-fit flex-row gap-4 flex-wrap">
-              {headerCategories.data?.map((cat) => {
-                return (
-                  <CvCategory layout="row" initialData={cat} key={cat.id} />
-                )
-              })}
-            </div>
-            <div id="colwrapper" className="flex flex-col lg:flex-row w-full h-3/4 gap-4">
-              <div id="col1" className={`flex flex-col w-full ${col1Categories.data?.length ? col1Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col1Categories.data?.map((cat) => {
-                  return (
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
-                  )
-                })}
-              </div>
-              <div id="col2" className={`flex flex-col w-full ${col2Categories.data?.length ? col2Categories.data?.length : 0 > 0 ? "lg:w-1/2" : ""} h-full gap-4`}>
-                {col2Categories.data?.map((cat) => {
-                  return (
-                    <CvCategory layout="col" initialData={cat} key={cat.id} />
-                  )
-                })}
-              </div>
-            </div>
-          </div>
-        </div>
-      </SidebarProvider>
-    </>
+    <Suspense>
+      <Page cv={cv} descriptions={descriptions} />
+    </Suspense>
   )
 }

src/app/layout.tsx

@@ -12,6 +12,7 @@ import TrpcProvider from "./_trpc/TrpcProvider";
 import ThemeProvider from './_providers/ThemeProvider'
 import GsapProvider from "./_providers/GsapProvicer";
 import {MessagesProvider} from "./_providers/MessagesProvider";
+import { MusicPlayerProvider } from "./music/_components/MusicPlayerProvider";
 import { CodeHighlightStyle } from "./_components/CodeHighlightSyle";
 import { cn } from "~/lib/utils";
 import AnimatedBackGroundContainer from "./_components/Animated/AnimatedBackGroundContainer";
@@ -49,14 +50,16 @@ export default async function RootLayout({
 						<body className="flex flex-col bg-background text-foreground">
 							<ThemeProvider>
 							<MessagesProvider>
+								<MusicPlayerProvider>
 								<AnimatedBackGroundContainer followSpeed={0.003} particleCount={100} orbitRadius={2000}>
 									<TopNav />
-									<main className="absolute lg:top-10 h-screen lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
+									<main className="absolute lg:top-10 h-[100dvh] lg:h-[calc(100vh-var(--spacing)*10)] w-screen">
 										{children}
 									</main>
 									{modal}
 								</AnimatedBackGroundContainer>
 								<ChatFAB />
+								</MusicPlayerProvider>
 								</MessagesProvider>
 							</ThemeProvider>
 						</body>

src/app/music/_components/AudioPlayer.tsx

@@ -1,10 +1,12 @@
 'use client'
 
-import { useRef, useState } from "react";
+import { useEffect, useRef, useState } from "react";
+import { useTheme } from "next-themes";
+import type WaveSurfer from "wavesurfer.js";
 import { Download, Loader2, Pause, Play } from "lucide-react";
-import { Slider } from "~/components/ui/slider";
 import { Button } from "~/components/ui/button";
 import { toast } from "sonner";
+import { useMusicPlayer } from "./MusicPlayerProvider";
 
 function formatTime(seconds: number) {
 	if (!Number.isFinite(seconds)) return "0:00";
@@ -13,29 +15,117 @@ function formatTime(seconds: number) {
 	return `${m}:${s.toString().padStart(2, "0")}`;
 }
 
+function cssVar(name: string, fallback: string) {
+	if (typeof window === "undefined") return fallback;
+	const v = getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+	return v || fallback;
+}
+
+function waveColors() {
+	return {
+		waveColor: cssVar("--muted-foreground", "#9ca3af"),
+		progressColor: cssVar("--primary", "#e2761b"),
+		cursorColor: cssVar("--foreground", "#111827"),
+	};
+}
+
+/**
+ * Per-track waveform. Playback itself is owned by the shared MusicPlayer engine
+ * (so it keeps running across navigation); this wavesurfer instance is only a
+ * visual + seek surface that mirrors the engine when its track is active.
+ */
 export default function AudioPlayer(props: {
-	/** Streaming-friendly source the player actually plays. */
+	id: string;
 	src: string;
-	/** Original high-quality file offered via the download button. */
 	downloadUrl: string;
 	downloadName: string;
 }) {
-	const audioRef = useRef<HTMLAudioElement>(null);
-	const [playing, setPlaying] = useState(false);
-	const [current, setCurrent] = useState(0);
+	const containerRef = useRef<HTMLDivElement>(null);
+	const wsRef = useRef<WaveSurfer | null>(null);
+	const [ready, setReady] = useState(false);
 	const [duration, setDuration] = useState(0);
-	const [seeking, setSeeking] = useState(false);
 	const [downloading, setDownloading] = useState(false);
+	const { resolvedTheme } = useTheme();
 
-	function togglePlay() {
-		const audio = audioRef.current;
-		if (!audio) return;
-		if (audio.paused) {
-			audio.play();
-		} else {
-			audio.pause();
+	const {
+		currentId,
+		isPlaying,
+		currentTime,
+		duration: engineDuration,
+		toggle,
+		seek,
+		subscribeTime,
+	} = useMusicPlayer();
+	const isActive = currentId === props.id;
+
+	// Reach live values from the once-created wavesurfer callbacks.
+	const isActiveRef = useRef(isActive);
+	isActiveRef.current = isActive;
+	const currentTimeRef = useRef(currentTime);
+	currentTimeRef.current = currentTime;
+	const toggleRef = useRef(toggle);
+	toggleRef.current = toggle;
+	const seekRef = useRef(seek);
+	seekRef.current = seek;
+
+	useEffect(() => {
+		let ws: WaveSurfer | null = null;
+		let cancelled = false;
+		setReady(false);
+
+		(async () => {
+			const WaveSurferClass = (await import("wavesurfer.js")).default;
+			if (cancelled || !containerRef.current) return;
+			const instance = WaveSurferClass.create({
+				container: containerRef.current,
+				url: props.src,
+				height: 44,
+				barWidth: 2,
+				barGap: 1,
+				barRadius: 2,
+				normalize: true,
+				cursorWidth: 1,
+				...waveColors(),
+			});
+			ws = instance;
+			wsRef.current = instance;
+			instance.on("ready", () => {
+				// This media is for drawing only — never let it make sound.
+				instance.setMuted(true);
+				setReady(true);
+				setDuration(instance.getDuration());
+				if (isActiveRef.current) instance.setTime(currentTimeRef.current);
+			});
+			// Clicking the waveform: start this track if it isn't playing, then seek.
+			instance.on("interaction", (time: number) => {
+				if (!isActiveRef.current) toggleRef.current(props.id);
+				seekRef.current(time);
+			});
+		})();
+
+		return () => {
+			cancelled = true;
+			ws?.destroy();
+			wsRef.current = null;
+		};
+	}, [props.src]);
+
+	// Mirror the engine's playback position onto the cursor while active.
+	useEffect(() => {
+		const ws = wsRef.current;
+		if (!ws || !ready) return;
+		if (!isActive) {
+			ws.setTime(0);
+			return;
 		}
-	}
+		ws.setTime(currentTimeRef.current);
+		return subscribeTime((t) => wsRef.current?.setTime(t));
+	}, [isActive, ready, subscribeTime]);
+
+	// Re-tint the waveform when the user toggles light/dark.
+	useEffect(() => {
+		wsRef.current?.setOptions(waveColors());
+	}, [resolvedTheme]);
 
 	async function handleDownload() {
 		setDownloading(true);
@@ -60,53 +150,38 @@ export default function AudioPlayer(props: {
 		}
 	}
 
+	const playing = isActive && isPlaying;
+	// The waveform is only a visual; playback is owned by the shared engine. Show
+	// its duration if the waveform hasn't decoded (slow/unreliable on mobile).
+	const shownDuration = duration || (isActive ? engineDuration : 0);
+
 	return (
 		<div className="flex items-center gap-3 rounded-lg border bg-transparent px-3 py-2">
-			<audio
-				ref={audioRef}
-				src={props.src}
-				preload="metadata"
-				onPlay={() => setPlaying(true)}
-				onPause={() => setPlaying(false)}
-				onLoadedMetadata={(e) => setDuration(e.currentTarget.duration)}
-				onTimeUpdate={(e) => {
-					if (!seeking) setCurrent(e.currentTarget.currentTime);
-				}}
-				onEnded={() => setPlaying(false)}
-			/>
-
 			<Button
 				type="button"
 				size="icon"
 				variant="ghost"
 				aria-label={playing ? "Pause" : "Play"}
-				onClick={togglePlay}
+				onClick={() => toggle(props.id)}
 			>
 				{playing ? <Pause /> : <Play />}
 			</Button>
 
 			<span className="w-10 shrink-0 text-right font-mono text-xs text-muted-foreground tabular-nums">
-				{formatTime(current)}
+				{formatTime(isActive ? currentTime : 0)}
 			</span>
 
-			<Slider
-				className="flex-1"
-				min={0}
-				max={duration || 1}
-				step={0.1}
-				value={[current]}
-				onValueChange={([v]) => {
-					setSeeking(true);
-					setCurrent(v ?? 0);
-				}}
-				onValueCommit={([v]) => {
-					if (audioRef.current) audioRef.current.currentTime = v ?? 0;
-					setSeeking(false);
-				}}
-			/>
+			<div className="relative flex-1">
+				<div ref={containerRef} className="w-full" />
+				{!ready && (
+					<div className="absolute inset-0 flex items-center">
+						<div className="h-7 w-full animate-pulse rounded bg-muted-foreground/15" />
+					</div>
+				)}
+			</div>
 
 			<span className="w-10 shrink-0 font-mono text-xs text-muted-foreground tabular-nums">
-				{formatTime(duration)}
+				{formatTime(shownDuration)}
 			</span>
 
 			<Button

src/app/music/_components/MusicMiniPlayer.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { useState } from "react";
+import { Music } from "lucide-react";
+import {
+	Drawer,
+	DrawerContent,
+	DrawerHeader,
+	DrawerTitle,
+	DrawerTrigger,
+} from "~/components/ui/drawer";
+import { Slider } from "~/components/ui/slider";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+import PlayerControls from "./PlayerControls";
+
+function formatTime(seconds: number) {
+	if (!Number.isFinite(seconds)) return "0:00";
+	const m = Math.floor(seconds / 60);
+	const s = Math.floor(seconds % 60);
+	return `${m}:${s.toString().padStart(2, "0")}`;
+}
+
+/**
+ * Global, persistent mini-player: a floating button (shown once something is
+ * loaded) that opens a drawer with the transport controls and a scrubber, so
+ * playback can be controlled from any page while it keeps running in the
+ * background.
+ */
+export default function MusicMiniPlayer() {
+	const { currentTrack, isPlaying, currentTime, duration, seek } = useMusicPlayer();
+	const [open, setOpen] = useState(false);
+
+	if (!currentTrack) return null;
+
+	return (
+		<Drawer open={open} onOpenChange={setOpen}>
+			<DrawerTrigger asChild>
+				<button
+					type="button"
+					aria-label="Open player"
+					className="fixed bottom-4 left-4 z-40 flex max-w-[60vw] items-center gap-2 rounded-full border bg-background/80 px-4 py-2 shadow-lg backdrop-blur-md transition-colors hover:bg-background"
+				>
+					<Music className={isPlaying ? "animate-pulse" : ""} />
+					<span className="truncate text-sm">{currentTrack.title}</span>
+				</button>
+			</DrawerTrigger>
+			<DrawerContent>
+				<DrawerHeader>
+					<DrawerTitle>{currentTrack.title}</DrawerTitle>
+				</DrawerHeader>
+				<div className="mx-auto flex w-full max-w-md flex-col gap-4 px-4 pb-8">
+					<div className="flex items-center gap-2">
+						<span className="w-10 text-right font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(currentTime)}
+						</span>
+						<Slider
+							className="flex-1"
+							min={0}
+							max={duration || 1}
+							step={0.1}
+							value={[currentTime]}
+							onValueChange={([v]) => seek(v ?? 0)}
+						/>
+						<span className="w-10 font-mono text-xs text-muted-foreground tabular-nums">
+							{formatTime(duration)}
+						</span>
+					</div>
+					<PlayerControls />
+				</div>
+			</DrawerContent>
+		</Drawer>
+	);
+}

src/app/music/_components/MusicPlayerProvider.tsx

@@ -0,0 +1,314 @@
+'use client'
+
+import {
+	createContext,
+	useCallback,
+	useContext,
+	useEffect,
+	useMemo,
+	useRef,
+	useState,
+	type ReactNode,
+} from "react";
+import { trpc } from "~/app/_trpc/Client";
+import MusicMiniPlayer from "./MusicMiniPlayer";
+
+export type PlayerTrack = {
+	id: string;
+	title: string;
+	/** Streaming-friendly source actually played. */
+	src: string;
+	/** Original high-quality file for the download button. */
+	downloadUrl: string;
+	downloadName: string;
+};
+
+type MusicPlayerValue = {
+	tracks: PlayerTrack[];
+	currentId: string | null;
+	currentTrack: PlayerTrack | null;
+	isPlaying: boolean;
+	shuffle: boolean;
+	currentTime: number;
+	duration: number;
+	/** Play button on a track: start it, or toggle play/pause if already current. */
+	toggle: (id: string) => void;
+	/** Global play/pause — acts on the current track (or starts the first one). */
+	togglePlayCurrent: () => void;
+	next: () => void;
+	previous: () => void;
+	toggleShuffle: () => void;
+	seek: (seconds: number) => void;
+	/** Subscribe to playback time updates (for waveform cursors). */
+	subscribeTime: (cb: (time: number) => void) => () => void;
+};
+
+const MusicPlayerContext = createContext<MusicPlayerValue | null>(null);
+
+export function useMusicPlayer() {
+	const ctx = useContext(MusicPlayerContext);
+	if (!ctx) throw new Error("useMusicPlayer must be used within a MusicPlayerProvider");
+	return ctx;
+}
+
+export function MusicPlayerProvider({ children }: { children: ReactNode }) {
+	// The provider owns the playlist so playback survives navigating away from
+	// the music page. The query is cached, so the music page shares this request.
+	const { data } = trpc.music.list.useQuery();
+	const tracks = useMemo<PlayerTrack[]>(
+		() =>
+			(data ?? []).map((t) => ({
+				id: t.id,
+				title: t.title,
+				src: t.streamUrl ?? t.fileUrl,
+				downloadUrl: t.fileUrl,
+				downloadName: t.fileName,
+			})),
+		[data],
+	);
+
+	const [currentId, setCurrentId] = useState<string | null>(null);
+	const [isPlaying, setIsPlaying] = useState(false);
+	const [shuffle, setShuffle] = useState(false);
+	const [currentTime, setCurrentTime] = useState(0);
+	const [duration, setDuration] = useState(0);
+
+	const audioRef = useRef<HTMLAudioElement | null>(null);
+	const tracksRef = useRef(tracks);
+	tracksRef.current = tracks;
+
+	// Lightweight pub/sub so each waveform can follow playback time without every
+	// player re-rendering on the audio element's frequent timeupdate.
+	const timeSubs = useRef<Set<(t: number) => void>>(new Set());
+	const subscribeTime = useCallback((cb: (t: number) => void) => {
+		timeSubs.current.add(cb);
+		return () => {
+			timeSubs.current.delete(cb);
+		};
+	}, []);
+	const emitTime = useCallback((t: number) => {
+		timeSubs.current.forEach((cb) => cb(t));
+	}, []);
+
+	const currentTrack = useMemo(
+		() => tracks.find((t) => t.id === currentId) ?? null,
+		[tracks, currentId],
+	);
+
+	const toggle = useCallback((id: string) => {
+		setCurrentId((prev) => {
+			if (prev === id) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			setIsPlaying(true);
+			return id;
+		});
+	}, []);
+
+	const togglePlayCurrent = useCallback(() => {
+		setCurrentId((prev) => {
+			if (prev) {
+				setIsPlaying((p) => !p);
+				return prev;
+			}
+			const first = tracksRef.current[0]?.id ?? null;
+			if (first) setIsPlaying(true);
+			return first;
+		});
+	}, []);
+
+	const step = useCallback((dir: 1 | -1) => {
+		const ids = tracksRef.current.map((t) => t.id);
+		if (ids.length === 0) return;
+		setCurrentId((prev) => {
+			let nextId: string;
+			if (shuffle && dir === 1 && ids.length > 1) {
+				do {
+					nextId = ids[Math.floor(Math.random() * ids.length)]!;
+				} while (nextId === prev);
+			} else {
+				const idx = prev ? ids.indexOf(prev) : -1;
+				nextId = ids[(idx + dir + ids.length) % ids.length]!;
+			}
+			setIsPlaying(true);
+			return nextId;
+		});
+	}, [shuffle]);
+	const next = useCallback(() => step(1), [step]);
+	const previous = useCallback(() => step(-1), [step]);
+	const toggleShuffle = useCallback(() => setShuffle((s) => !s), []);
+
+	const stepRef = useRef(step);
+	stepRef.current = step;
+
+	const seek = useCallback(
+		(s: number) => {
+			if (audioRef.current) audioRef.current.currentTime = s;
+			setCurrentTime(s);
+			emitTime(s);
+		},
+		[emitTime],
+	);
+
+	// Persistent audio element + listeners, created once on the client.
+	useEffect(() => {
+		const audio = new Audio();
+		audio.preload = "metadata";
+		audioRef.current = audio;
+		const onTime = () => {
+			setCurrentTime(audio.currentTime);
+			emitTime(audio.currentTime);
+		};
+		const onMeta = () => setDuration(audio.duration || 0);
+		const onEnded = () => stepRef.current(1);
+		audio.addEventListener("timeupdate", onTime);
+		audio.addEventListener("loadedmetadata", onMeta);
+		audio.addEventListener("ended", onEnded);
+		return () => {
+			audio.pause();
+			audio.removeEventListener("timeupdate", onTime);
+			audio.removeEventListener("loadedmetadata", onMeta);
+			audio.removeEventListener("ended", onEnded);
+			audioRef.current = null;
+		};
+	}, [emitTime]);
+
+	// Swap the source when the current track changes.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio) return;
+		if (!currentTrack) {
+			audio.removeAttribute("src");
+			audio.load();
+			return;
+		}
+		if (audio.src !== currentTrack.src) {
+			audio.src = currentTrack.src;
+			audio.load();
+			setCurrentTime(0);
+			setDuration(0);
+		}
+	}, [currentTrack]);
+
+	// Reflect the desired play state onto the element.
+	useEffect(() => {
+		const audio = audioRef.current;
+		if (!audio || !currentTrack) return;
+		if (isPlaying) audio.play().catch(() => {});
+		else audio.pause();
+	}, [isPlaying, currentTrack]);
+
+	// OS-level media controls (lock screen, notification shade, media keys, etc.)
+	// via the Media Session API. Wire the transport actions to our state.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		const ms = navigator.mediaSession;
+		const handlers: [MediaSessionAction, MediaSessionActionHandler][] = [
+			["play", () => setIsPlaying(true)],
+			["pause", () => setIsPlaying(false)],
+			["previoustrack", () => stepRef.current(-1)],
+			["nexttrack", () => stepRef.current(1)],
+			[
+				"seekto",
+				(details) => {
+					if (typeof details.seekTime === "number") seek(details.seekTime);
+				},
+			],
+			[
+				"seekbackward",
+				(details) => seek((audioRef.current?.currentTime ?? 0) - (details.seekOffset ?? 10)),
+			],
+			[
+				"seekforward",
+				(details) => seek((audioRef.current?.currentTime ?? 0) + (details.seekOffset ?? 10)),
+			],
+		];
+		for (const [action, handler] of handlers) {
+			try {
+				ms.setActionHandler(action, handler);
+			} catch {
+				// Action unsupported by this browser — ignore.
+			}
+		}
+		return () => {
+			for (const [action] of handlers) {
+				try {
+					ms.setActionHandler(action, null);
+				} catch {
+					// ignore
+				}
+			}
+		};
+	}, [seek]);
+
+	// Keep the OS-visible metadata in sync with the current track.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		navigator.mediaSession.metadata = currentTrack
+			? new MediaMetadata({
+					title: currentTrack.title,
+					artist: "Gregor Lohaus",
+				})
+			: null;
+	}, [currentTrack]);
+
+	// Reflect play/pause state to the OS so the right button is shown.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		navigator.mediaSession.playbackState = currentTrack
+			? isPlaying
+				? "playing"
+				: "paused"
+			: "none";
+	}, [isPlaying, currentTrack]);
+
+	// Keep the scrubber position on the OS controls in sync.
+	useEffect(() => {
+		if (typeof navigator === "undefined" || !("mediaSession" in navigator)) return;
+		if (!("setPositionState" in navigator.mediaSession)) return;
+		try {
+			if (duration > 0 && Number.isFinite(duration)) {
+				navigator.mediaSession.setPositionState({
+					duration,
+					position: Math.min(currentTime, duration),
+					playbackRate: audioRef.current?.playbackRate ?? 1,
+				});
+			} else {
+				navigator.mediaSession.setPositionState();
+			}
+		} catch {
+			// Some browsers throw on invalid state — ignore.
+		}
+	}, [currentTime, duration]);
+
+	const value = useMemo<MusicPlayerValue>(
+		() => ({
+			tracks,
+			currentId,
+			currentTrack,
+			isPlaying,
+			shuffle,
+			currentTime,
+			duration,
+			toggle,
+			togglePlayCurrent,
+			next,
+			previous,
+			toggleShuffle,
+			seek,
+			subscribeTime,
+		}),
+		[
+			tracks, currentId, currentTrack, isPlaying, shuffle, currentTime, duration,
+			toggle, togglePlayCurrent, next, previous, toggleShuffle, seek, subscribeTime,
+		],
+	);
+
+	return (
+		<MusicPlayerContext.Provider value={value}>
+			{children}
+			<MusicMiniPlayer />
+		</MusicPlayerContext.Provider>
+	);
+}

src/app/music/_components/Page.tsx

@@ -0,0 +1,68 @@
+'use client'
+
+import * as Card from "~/components/ui/card";
+import { useTimeLine } from "../../_providers/GsapProvicer";
+import AnimatedPageTitle from "../../_components/Animated/AnimatedPageTitle";
+import AnimateTextIn from "../../_components/Animated/AnimateIn";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import AnimatePopUp from "../../_components/Animated/AnimatePopUp";
+import AudioPlayer from "./AudioPlayer";
+import type { RouterOutputs } from "~/server/routers/_app";
+
+export default function MusicPage(props: {
+  tracks: RouterOutputs['music']['list'],
+}) {
+  const { tracks } = props;
+  useTimeLine(tracks)
+  return (
+    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
+      <AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
+      <div className="flex flex-wrap h-fit content-center">
+        <AnimateTextIn once className="flex flex-wrap mr-[1em]" position={0.5}>
+          <div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
+          <div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
+        </AnimateTextIn>
+        <AnimatePopUp duration={1} ease='elastic.inOut' position={2} once className="items-center content-center">
+          <div className="flex flex-row">
+            <img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
+            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
+            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" />
+            <img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" />
+          </div>
+        </AnimatePopUp>
+      </div>
+      <div className="pt-10" />
+      {tracks && tracks.map((track, i) => (
+        <div key={track.id}>
+          <Card.AnimatedCard position={i + 1}>
+            <Card.CardHeader>
+              <AnimateTextIn once position={i + 1.2} animation="slide">
+                <Card.CardTitle>{track.title}</Card.CardTitle>
+              </AnimateTextIn>
+            </Card.CardHeader>
+            <Card.CardContent className="flex flex-col gap-3">
+              {track.description && (
+                <AnimatePopUp once position={i + 1.25} duration={2}>
+                  <p className="text-sm text-muted-foreground">{track.description}</p>
+                </AnimatePopUp>
+              )}
+              <AnimatePopUp duration={2} ease='elastic.inOut'  position={i + 1.3} once>
+                <AudioPlayer
+                  id={track.id}
+                  src={track.streamUrl ?? track.fileUrl}
+                  downloadUrl={track.fileUrl}
+                  downloadName={track.fileName}
+                />
+              </AnimatePopUp>
+            </Card.CardContent>
+          </Card.AnimatedCard>
+          <div className="pt-5" />
+        </div>
+      ))}
+      {!tracks?.length &&
+        <div className="flex justify-center items-center text-muted-foreground">
+          No music yet.
+        </div>}
+    </ScrollArea>
+  );
+}

src/app/music/_components/PlayerControls.tsx

@@ -0,0 +1,40 @@
+'use client'
+
+import { Pause, Play, Shuffle, SkipBack, SkipForward } from "lucide-react";
+import { Button } from "~/components/ui/button";
+import { useMusicPlayer } from "./MusicPlayerProvider";
+
+export default function PlayerControls() {
+	const { isPlaying, shuffle, togglePlayCurrent, next, previous, toggleShuffle } =
+		useMusicPlayer();
+
+	return (
+		<div className="flex items-center justify-center gap-1">
+			<Button type="button" size="icon" variant="ghost" aria-label="Previous track" onClick={previous}>
+				<SkipBack />
+			</Button>
+			<Button
+				type="button"
+				size="icon-lg"
+				variant="secondary"
+				aria-label={isPlaying ? "Pause" : "Play"}
+				onClick={togglePlayCurrent}
+			>
+				{isPlaying ? <Pause /> : <Play />}
+			</Button>
+			<Button type="button" size="icon" variant="ghost" aria-label="Skip to next track" onClick={next}>
+				<SkipForward />
+			</Button>
+			<Button
+				type="button"
+				size="icon"
+				variant={shuffle ? "secondary" : "ghost"}
+				aria-label={shuffle ? "Shuffle on" : "Shuffle off"}
+				aria-pressed={shuffle}
+				onClick={toggleShuffle}
+			>
+				<Shuffle />
+			</Button>
+		</div>
+	);
+}

src/app/music/page.tsx

@@ -1,66 +1,13 @@
-'use client'
-import { trpc } from "~/app/_trpc/Client";
-import * as Card from "~/components/ui/card";
-import { useTimeLine } from "../_providers/GsapProvicer";
-import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
-import { Spinner } from "~/components/ui/spinner";
-import AnimateTextIn from "../_components/Animated/AnimateIn";
-import { ScrollArea } from "~/components/ui/scroll-area";
-import AnimatePopUp from "../_components/Animated/AnimatePopUp";
-import AudioPlayer from "./_components/AudioPlayer";
-export default function MusicPage() {
-	const { data: tracks, isLoading } = trpc.music.list.useQuery();
-	useTimeLine(tracks)
-	return (
-    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
-			<AnimatedPageTitle position={0}><span>Just Some </span> <span>Music I Made</span> </AnimatedPageTitle>
-			<div className="flex flex-wrap h-fit content-center">
-				<AnimateTextIn className="flex flex-wrap mr-[1em]" position={0.5}>
-					<div><p className="break-after-avoid mr-[1em]">All works on this page are licensed under:</p></div>
-					<div><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></div>
-				</AnimateTextIn>
-				<AnimatePopUp position={2} className="items-center content-center">
-					<div className="flex flex-row">
-						<img className="max-w-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/cc.svg" alt="" />
-						<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/by.svg" alt="" />
-						<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/nc.svg" alt="" />
-						<img className="max-w-[1em] ml-[1em]" src="https://mirrors.creativecommons.org/presskit/icons/sa.svg" alt="" />
-					</div>
-				</AnimatePopUp>
-			</div>
-			<div className="pt-10" />
-			{tracks && tracks.map((track, i) => (
-				<div key={track.id}>
-					<Card.AnimatedCard position={i + 1}>
-						<Card.CardHeader>
-							<AnimateTextIn position={i + 1.2} animation="slide">
-								<Card.CardTitle>{track.title}</Card.CardTitle>
-							</AnimateTextIn>
-						</Card.CardHeader>
-						<Card.CardContent className="flex flex-col gap-3">
-							{track.description && (
-								<p className="text-sm text-muted-foreground gsapant">{track.description}</p>
-							)}
-							<AnimatePopUp position={i + 1.3}>
-								<AudioPlayer
-									src={track.streamUrl ?? track.fileUrl}
-									downloadUrl={track.fileUrl}
-									downloadName={track.fileName}
-								/>
-							</AnimatePopUp>
-						</Card.CardContent>
-					</Card.AnimatedCard>
-					<div className="pt-5" />
-				</div>
-			))}
-			{!isLoading && !tracks?.length &&
-				<div className="flex justify-center items-center text-muted-foreground">
-					No music yet.
-				</div>
-			}
-			{isLoading && <div className="w-full h-full items-center flex flex-row content-center gap-4 justify-center">
-				<Spinner /> Loading Tracks
-			</div>}
-		</ScrollArea>
-	);
+import { Suspense } from "react";
+import { servTrpc as trpc } from "../_trpc/ServerClient";
+import Page from "./_components/Page";
+
+export default async function MusicPage() {
+  const tracks = await trpc.music.list();
+
+  return (
+    <Suspense>
+      <Page tracks={tracks} />
+    </Suspense>
+  );
 }

src/app/page.tsx

@@ -1,9 +1,9 @@
+import HomeHero from "./_components/Home/HomeHero";
+
 export default function HomePage() {
 	return (
-		<main>
-			<div>
-				hello world
-			</div>
+		<main className="h-full w-full">
+			<HomeHero />
 		</main>
 	);
 }

src/app/projects/_components/Page.tsx

@@ -0,0 +1,111 @@
+'use client'
+
+import type { ReactNode } from "react";
+import * as Card from "~/components/ui/card";
+import { Badge } from "~/components/ui/badge";
+import { StackBadge } from "~/components/StackBadge";
+import { ScrollArea } from "~/components/ui/scroll-area";
+import AnimatedPageTitle from "../../_components/Animated/AnimatedPageTitle";
+import AnimateTextIn from "../../_components/Animated/AnimateIn";
+import { useTimeLine } from "../../_providers/GsapProvicer";
+import AnimatePopUp from "../../_components/Animated/AnimatePopUp";
+import { Button } from "~/components/ui/button";
+import type { RouterOutputs } from "~/server/routers/_app";
+
+export default function ProjectsPage(props: {
+  projects: RouterOutputs['projectv2']['listWithStack'],
+  descriptions: Record<string, ReactNode>,
+}) {
+  const { projects, descriptions } = props;
+  useTimeLine(projects)
+
+  if (!projects?.length) {
+    return (
+      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
+        No projects yet.
+      </div>
+    );
+  }
+
+  return (
+    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
+      <AnimatedPageTitle position={0}><span>Projects I've Been</span><span> Working on</span> </AnimatedPageTitle>
+      <div className="pt-10" />
+      {projects.map((project, i) => (
+        <div id={project.id} key={i} className="scroll-mt-10">
+          <Card.AnimatedCard position={i + 1.2} key={project.id}>
+            <Card.CardHeader>
+              <div className="flex items-start justify-between gap-2 flex-wrap">
+                <AnimateTextIn once position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
+                <div className="flex gap-2 flex-wrap">
+                  {project.sourceType && (
+                    <AnimatePopUp position={i + 2} duration={2} once>
+                      <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
+                        {project.sourceType === "open" ? "Open Source" : "Closed Source"}
+                      </Badge>
+                    </AnimatePopUp>
+                  )}
+                  {project.releaseStatus && (
+                    <Badge variant={project.releaseStatus === "released" ? "default" : "outline"}>
+                      {project.releaseStatus === "released" ? "Released" : "Unreleased"}
+                    </Badge>
+                  )}
+                </div>
+              </div>
+            </Card.CardHeader>
+            {(project.description || project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
+              <Card.CardContent className="flex flex-col gap-3">
+                {project.description && (
+                  <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
+                    <AnimatePopUp once position={i + 1.4} duration={10}>
+                      {descriptions[project.id] ?? project.description}
+                    </AnimatePopUp>
+                  </div>
+                )}
+                <div className="flex flex-row">
+                  {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
+                    <div className="flex flex-wrap gap-1.5">
+                      {project.techStack.stackItems.map((item, k) => (
+                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5} once>  <StackBadge key={item} item={item} /> </AnimatePopUp>
+                      ))}
+                    </div>
+                  )}
+                  {(project.sourceLink || project.releaseLink) && (
+                    <div className="ml-auto flex-col lg:flex-row justify-center gap-5">
+                      {project.sourceLink &&
+                        <Button variant='outline' className="cursor-pointer mb-3 lg:mb-0 lg:mr-3 min-w-18">
+                          <a
+                            href={project.sourceLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className='items-center'
+                          >
+                            Source
+                          </a>
+                        </Button>
+                      }
+                      {project.releaseLink &&
+                        <Button variant='default' className="cursor-pointer min-w-18 items-center">
+                          <a
+                            href={project.releaseLink}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className='items-center'
+                          >
+                            Live
+                          </a>
+                        </Button>
+
+                      }
+                    </div>
+                  )}
+                </div>
+              </Card.CardContent>
+            )}
+          </Card.AnimatedCard>
+          <div className="pt-5" />
+        </div>
+      ))}
+    </ScrollArea>
+  );
+}

src/app/projects/page.tsx

@@ -1,116 +1,40 @@
-'use client'
+import { Suspense, type ReactNode } from "react";
+import { MDXRemote } from "next-mdx-remote/rsc";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { servTrpc as trpc } from "../_trpc/ServerClient";
+import { mdxComponents } from "~/components/mdx-components";
+import Page from "./_components/Page";
 
-import { trpc } from "~/app/_trpc/Client";
-import * as Card from "~/components/ui/card";
-import { Badge } from "~/components/ui/badge";
-import { StackBadge } from "~/components/StackBadge";
-import Markdown from "react-markdown";
-import { ScrollArea } from "~/components/ui/scroll-area";
-import AnimatedPageTitle from "../_components/Animated/AnimatedPageTitle";
-import AnimateTextIn from "../_components/Animated/AnimateIn";
-import { useTimeLine } from "../_providers/GsapProvicer";
-import AnimatePopUp from "../_components/Animated/AnimatePopUp";
-import { Button } from "~/components/ui/button";
-import remarkGfm from "remark-gfm"
+export default async function ProjectsPage() {
+  const projects = await trpc.projectv2.listWithStack();
 
-export default function ProjectsPage() {
-  const { data: projects, isLoading } = trpc.projectv2.listWithStack.useQuery();
-  useTimeLine(projects)
-  if (isLoading) {
-    return (
-      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
-        Loading...
-      </div>
-    );
-  }
-
-  if (!projects?.length) {
-    return (
-      <div className="flex justify-center items-center min-h-[200px] text-muted-foreground">
-        No projects yet.
-      </div>
+  // Render the MDX descriptions on the server so they exist at first paint.
+  // The client tree (which runs the GSAP entrance via useTimeLine) only places
+  // these already-rendered nodes — it never invokes the MDX renderer itself, so
+  // the 'use client' boundary stays intact and the animations no longer play
+  // against an un-rendered fallback.
+  const descriptions: Record<string, ReactNode> = {};
+  for (const project of projects ?? []) {
+    if (!project.description?.trim()) continue;
+    descriptions[project.id] = (
+      <MDXRemote
+        source={project.description}
+        components={mdxComponents}
+        options={{
+          mdxOptions: {
+            format: "mdx",
+            remarkPlugins: [remarkGfm],
+            rehypePlugins: [rehypeHighlight],
+          },
+        }}
+      />
     );
   }
 
   return (
-    <ScrollArea className="px-10 lg:px-0 w-full h-full max-w-4xl mx-auto pt-10">
-      <AnimatedPageTitle position={0}><span>Projects I've Been</span><span> Working on</span> </AnimatedPageTitle>
-      <div className="pt-10" />
-      {projects.map((project, i) => (
-        <div id={project.id} key={i} className="scroll-mt-10">
-          <Card.AnimatedCard position={i + 1.2} key={project.id}>
-            <Card.CardHeader>
-              <div className="flex items-start justify-between gap-2 flex-wrap">
-                <AnimateTextIn position={i + 1.4} animation="slide"><Card.CardTitle>{project.title}</Card.CardTitle></AnimateTextIn>
-                <div className="flex gap-2 flex-wrap">
-                  {project.sourceType && (
-                    <AnimatePopUp position={i + 2} duration={2}>
-                      <Badge variant={project.sourceType === "open" ? "secondary" : "outline"}>
-                        {project.sourceType === "open" ? "Open Source" : "Closed Source"}
-                      </Badge>
-                    </AnimatePopUp>
-                  )}
-                  {project.releaseStatus && (
-                    <Badge variant={project.releaseStatus === "released" ? "default" : "outline"}>
-                      {project.releaseStatus === "released" ? "Released" : "Unreleased"}
-                    </Badge>
-                  )}
-                </div>
-              </div>
-            </Card.CardHeader>
-            {(project.description || project.sourceLink || project.releaseLink || project.techStack?.stackItems?.length) && (
-              <Card.CardContent className="flex flex-col gap-3">
-                {project.description && (
-                  <div className="prose prose-sm dark:prose-invert max-w-none text-muted-foreground">
-                    <AnimatePopUp position={i + 1.4} duration={10}>
-                      <Markdown remarkPlugins={[remarkGfm]}>{project.description}</Markdown>
-                    </AnimatePopUp>
-                  </div>
-                )}
-                <div className="flex flex-row">
-                  {project.techStack?.stackItems && project.techStack.stackItems.length > 0 && (
-                    <div className="flex flex-wrap gap-1.5">
-                      {project.techStack.stackItems.map((item, k) => (
-                        <AnimatePopUp key={k} position={(i + 2) + k * 0.5}>  <StackBadge key={item} item={item} /> </AnimatePopUp>
-                      ))}
-                    </div>
-                  )}
-                  {(project.sourceLink || project.releaseLink) && (
-                    <div className="ml-auto flex-col lg:flex-row justify-center gap-5">
-                      {project.sourceLink &&
-                        <Button variant='outline' className="cursor-pointer mb-3 lg:mb-0 lg:mr-3 min-w-18">
-                          <a
-                            href={project.sourceLink}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className='items-center'
-                          >
-                            Source
-                          </a>
-                        </Button>
-                      }
-                      {project.releaseLink &&
-                        <Button variant='default' className="cursor-pointer min-w-18 items-center">
-                          <a
-                            href={project.releaseLink}
-                            target="_blank"
-                            rel="noopener noreferrer"
-                            className='items-center'
-                          >
-                            Live
-                          </a>
-                        </Button>
-
-                      }
-                    </div>
-                  )}
-                </div>
-              </Card.CardContent>
-            )}
-          </Card.AnimatedCard>
-          <div className="pt-5" />
-        </div>
-      ))}
-    </ScrollArea>
+    <Suspense>
+      <Page projects={projects} descriptions={descriptions} />
+    </Suspense>
   );
 }

src/components/ClientMdx.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import { evaluate } from "@mdx-js/mdx";
+import { MDXProvider, useMDXComponents } from "@mdx-js/react";
+import type { MDXComponents } from "mdx/types";
+import { useEffect, useState, type ComponentType, type ReactNode } from "react";
+import * as runtime from "react/jsx-runtime";
+import rehypeHighlight from "rehype-highlight";
+import remarkGfm from "remark-gfm";
+import { mdxComponents } from "~/components/mdx-components";
+
+type MdxModule = {
+  default: ComponentType<{ components?: MDXComponents }>;
+};
+
+type ClientMdxProps = {
+  source: string;
+  components?: MDXComponents;
+  format?: "md" | "mdx";
+  fallback?: ReactNode;
+  errorFallback?: (error: Error) => ReactNode;
+};
+
+export function ClientMdx({
+  source,
+  components = mdxComponents,
+  format = "md",
+  fallback = null,
+  errorFallback,
+}: ClientMdxProps) {
+  const [Content, setContent] = useState<MdxModule["default"] | null>(null);
+  const [error, setError] = useState<Error | null>(null);
+
+  useEffect(() => {
+    let cancelled = false;
+    const trimmed = source.trim();
+
+    if (!trimmed) {
+      setContent(null);
+      setError(null);
+      return;
+    }
+
+    void evaluate(trimmed, {
+      ...runtime,
+      baseUrl: import.meta.url,
+      format,
+      useMDXComponents,
+      rehypePlugins: [rehypeHighlight],
+      remarkPlugins: [remarkGfm],
+    })
+      .then((mod) => {
+        if (cancelled) return;
+        setContent(() => (mod as MdxModule).default);
+        setError(null);
+      })
+      .catch((nextError: unknown) => {
+        if (cancelled) return;
+        setContent(null);
+        setError(nextError instanceof Error ? nextError : new Error("Failed to render MDX"));
+      });
+
+    return () => {
+      cancelled = true;
+    };
+  }, [format, source]);
+
+  if (error) {
+    return errorFallback ? errorFallback(error) : <p>{source}</p>;
+  }
+
+  if (!Content) return <>{fallback}</>;
+
+  return (
+    <MDXProvider components={components}>
+      <Content components={components} />
+    </MDXProvider>
+  );
+}

src/components/mdx-components.tsx

@@ -1,5 +1,10 @@
 import Link from "next/link";
-import { Children, isValidElement, type ComponentPropsWithoutRef, type ReactNode } from "react";
+import {
+  Children,
+  isValidElement,
+  type ComponentPropsWithoutRef,
+  type ReactNode,
+} from "react";
 import { Badge } from "~/components/ui/badge";
 import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
@@ -86,6 +91,51 @@ function Figure({
   );
 }
 
+// A bare markdown image (![alt](src)) fills the prose width. Pass a numeric
+// markdown title — ![alt](src "160") — to render it as a fixed-size, circular
+// avatar instead (used by the CV header). Untitled images keep the old look.
+function Img({ src, alt, title }: { src: string; alt?: string; title?: string }) {
+  const size = title && /^\d+$/.test(title) ? Number(title) : undefined;
+  if (size) {
+    return (
+      <img
+        src={src}
+        alt={alt ?? ""}
+        width={size}
+        height={size}
+        style={{ width: size, height: size }}
+        className="mx-auto !my-0 shrink-0 rounded-full object-cover ring-2 ring-foreground/10"
+      />
+    );
+  }
+  return <img src={src} alt={alt ?? ""} className="w-full rounded-md border object-cover" />;
+}
+
+// Composable, border-less flex layout primitives for MDX.
+//
+//   <Layout>        — section wrapper, stacks its children with spacing
+//     <Row>         — lays children side by side, wraps when too narrow
+//       <Column>    — stacks its own children vertically
+//
+// Row/Column nest freely. A Row sizes its direct children into equal,
+// flex-growing tracks with a min width, so two lists/Columns sit side by
+// side and drop to stacked once they can't keep ~16rem each.
+function Layout({ children }: { children: ReactNode }) {
+  return <div className="my-6 flex flex-col gap-6 [&>*]:my-0">{children}</div>;
+}
+
+function Row({ children }: { children: ReactNode }) {
+  return (
+    <div className="flex flex-wrap gap-x-8 gap-y-4 [&>*]:mt-0 [&>*]:min-w-[16rem] [&>*]:flex-1">
+      {children}
+    </div>
+  );
+}
+
+function Column({ children }: { children: ReactNode }) {
+  return <div className="flex min-w-0 flex-col gap-2 [&>*]:my-0">{children}</div>;
+}
+
 function PullQuote({ children }: { children: ReactNode }) {
   return (
     <blockquote className="border-primary my-8 border-l-4 pl-5 text-xl leading-8 font-medium">
@@ -95,15 +145,30 @@ function PullQuote({ children }: { children: ReactNode }) {
 }
 
 function ExternalLink(props: ComponentPropsWithoutRef<"a">) {
-  const href = props.href ?? "";
-  const isExternal = /^https?:\/\//.test(href);
+  const { className, ...rest } = props;
 
-  if (!isExternal) return <a {...props} />;
-
-  return <a {...props} target="_blank" rel="noreferrer" />;
+  return (
+    <a
+      {...rest}
+      target="_blank"
+      rel="noreferrer"
+      className={cn(
+        "text-sky-600 underline underline-offset-4 hover:text-sky-700 dark:text-sky-400 dark:hover:text-sky-300",
+        className,
+      )}
+    />
+  );
 }
 
-const blockComponents = new Set<unknown>([Callout, Figure, PullQuote, TagList]);
+const blockComponents = new Set<unknown>([
+  Callout,
+  Column,
+  Figure,
+  Layout,
+  PullQuote,
+  Row,
+  TagList,
+]);
 
 function Paragraph({ children }: { children: ReactNode }) {
   const containsBlockComponent = Children.toArray(children).some(
@@ -121,8 +186,12 @@ export const mdxComponents = {
   Badge,
   ButtonLink,
   Callout,
+  Column,
   Figure,
+  img: Img,
+  Layout,
   Lead,
   PullQuote,
+  Row,
   TagList,
 };

src/components/ui/card.tsx

@@ -1,7 +1,8 @@
-import { useGSAP } from "@gsap/react"; import * as React from "react"
+"use client"
+import * as React from "react"
 import { useRef } from "react";
-import { useGsapContext } from "~/app/_providers/GsapProvicer";
 import gsap from 'gsap'
+import { useReveal } from "~/app/_components/Animated/useReveal";
 import { cn } from "~/lib/utils"
 
 function Card({
@@ -27,47 +28,26 @@ function AnimatedCard({
   position = 0,
   size = "default",
   scrollOnly = false,
+  once = false,
   ...props
-}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean }) {
-  const gsapContext = useGsapContext()
+}: React.ComponentProps<"div"> & { size?: "default" | "sm", position?: gsap.Position,  scrollOnly?: boolean, once?: boolean }) {
   const ref = useRef<HTMLDivElement | null>(null)
-  useGSAP(() => {
-    const rect = ref.current?.getBoundingClientRect()
-    const scroller = gsapContext?.getScroller()
-    console.log(scroller)
-    let viewportTop = 0
-    let viewportBottom = window.innerHeight
-    if (scroller && scroller instanceof Element) {
-      const scrollerRect = scroller.getBoundingClientRect()
-      viewportTop = scrollerRect.top
-      viewportBottom = scrollerRect.top + scrollerRect.height
-    }
-    const isInView = rect && rect.bottom > viewportTop && rect.top < viewportBottom
-    console.log(isInView)
-    const fromVars = { x: -100, opacity: 0, duration: 0.5 }
-    if (isInView && !scrollOnly) {
-      gsapContext?.addAnimation(gsap.from(ref.current, fromVars), position)
-    } else {
-      gsap.from(ref.current,
-        {
-          ...fromVars,
-          scrollTrigger: {
-            trigger: ref.current,
-            start: 'top bottom',
-            end: 'bottom top',
-            toggleActions: "play reverse play reverse",
-            scroller
-          }
-        })
-    }
-  }, { dependencies: [] })
+  useReveal(ref, {
+    position,
+    scrollOnly,
+    once,
+    debugId: `card-${position}`,
+    // Start hidden via CSS (see className) so the server-rendered card never
+    // flashes visible before GSAP runs; reveal animates *to* the shown state.
+    makeReveal: (el) => gsap.to(el, { x: 0, opacity: 1, duration: 0.5, paused: true }),
+  })
   return (
     <div
       ref={ref}
       data-slot="card"
       data-size={size}
       className={cn(
-        "group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm",
+        "opacity-0 -translate-x-[100px] group/card flex flex-col gap-4 overflow-hidden rounded-xl bg-card py-4 text-sm text-card-foreground ring-1 ring-foreground/10 has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:py-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl bg-opacity-60 backdrop-blur-sm",
         className
       )}
       {...props}

src/env.js

@@ -31,6 +31,10 @@ export const env = createEnv({
 		CLERK_SECRET_KEY: z.string(),
 		ADMIN_USER_CLERK_ID: z.string(),
 		OPENAI_API_KEY: z.string(),
+		GOOGLE_SERVICE_ACCOUNT_EMAIL: z.string().email(),
+		GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: z.string(),
+		GOOGLE_CALENDAR_ID: z.string(),
+		GREGOR_MEETING_EMAIL: z.string().email(),
 		NODE_ENV: z
 			.enum(["development", "test", "production"])
 			.default("development"),
@@ -72,6 +76,10 @@ export const env = createEnv({
 		POSTGRES_PRISMA_URL: process.env.POSTGRES_PRISMA_URL,
 		ADMIN_USER_CLERK_ID: process.env.ADMIN_USER_CLERK_ID,
 		OPENAI_API_KEY: process.env.OPENAI_API_KEY,
+		GOOGLE_SERVICE_ACCOUNT_EMAIL: process.env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+		GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY: process.env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY,
+		GOOGLE_CALENDAR_ID: process.env.GOOGLE_CALENDAR_ID,
+		GREGOR_MEETING_EMAIL: process.env.GREGOR_MEETING_EMAIL,
 		NEXT_PUBLIC_ADMIN_USER_CLERK_ID: process.env.NEXT_PUBLIC_ADMIN_USER_CLERK_ID,
 		CLERK_SECRET_KEY: process.env.CLERK_SECRET_KEY,
 		NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: process.env.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY,

src/server/ai/tools.ts

@@ -0,0 +1,586 @@
+import "server-only";
+
+import { tool } from "ai";
+import { desc } from "drizzle-orm";
+import { z } from "zod";
+import { cancelMeeting } from "~/app/actions/cancelMeeting";
+import { scheduleMeeting } from "~/app/actions/scheduleMeeting";
+import { db } from "~/server/db";
+import { blogPost, music } from "~/server/dbschema/schema";
+import { getGoogleCalendarClient, getGoogleCalendarId } from "~/server/googleCalendar";
+
+const contentTypeSchema = z.enum(["cv", "project", "blog", "music"]);
+
+type ContentType = z.infer<typeof contentTypeSchema>;
+
+type SearchResult = {
+	type: ContentType;
+	title: string;
+	snippet: string;
+	url: string;
+	score: number;
+	metadata?: Record<string, unknown>;
+};
+
+type ProjectWithStack = Awaited<ReturnType<typeof loadProjects>>[number];
+
+function stripMarkup(value: string | null | undefined) {
+	return (value ?? "")
+		.replace(/```[\s\S]*?```/g, " ")
+		.replace(/`([^`]+)`/g, "$1")
+		.replace(/<[^>]+>/g, " ")
+		.replace(/[#*_~[\]()>-]/g, " ")
+		.replace(/\s+/g, " ")
+		.trim();
+}
+
+function tokenize(value: string) {
+	return Array.from(new Set(value.toLowerCase().match(/[a-z0-9+#.-]+/g) ?? []));
+}
+
+function scoreText(query: string, title: string, body: string, extraTerms: string[] = []) {
+	const normalizedQuery = query.trim().toLowerCase();
+	const titleLower = title.toLowerCase();
+	const bodyLower = body.toLowerCase();
+	const tokens = tokenize(query);
+	let score = 0;
+
+	if (normalizedQuery && titleLower.includes(normalizedQuery)) score += 40;
+	if (normalizedQuery && bodyLower.includes(normalizedQuery)) score += 20;
+
+	for (const token of tokens) {
+		if (titleLower.includes(token)) score += 12;
+		if (bodyLower.includes(token)) score += 6;
+		if (extraTerms.some((term) => term.toLowerCase() === token)) score += 10;
+	}
+
+	return score;
+}
+
+const projectCatalogTerms = new Set(["project", "projects", "portfolio", "work"]);
+const genericQuestionTerms = new Set([
+	"a",
+	"about",
+	"all",
+	"any",
+	"are",
+	"can",
+	"current",
+	"do",
+	"give",
+	"have",
+	"list",
+	"me",
+	"of",
+	"on",
+	"show",
+	"site",
+	"tell",
+	"the",
+	"there",
+	"these",
+	"this",
+	"what",
+	"which",
+	"you",
+]);
+
+function isProjectCatalogQuery(query: string) {
+	const tokens = tokenize(query);
+	if (!tokens.some((token) => projectCatalogTerms.has(token))) return false;
+	return tokens.every((token) => projectCatalogTerms.has(token) || genericQuestionTerms.has(token));
+}
+
+function snippet(value: string, query: string, maxLength = 240) {
+	const text = stripMarkup(value);
+	if (text.length <= maxLength) return text;
+
+	const tokens = tokenize(query);
+	const lower = text.toLowerCase();
+	const firstMatch = tokens
+		.map((token) => lower.indexOf(token))
+		.filter((index) => index >= 0)
+		.sort((a, b) => a - b)[0] ?? 0;
+	const start = Math.max(0, firstMatch - 60);
+	const excerpt = text.slice(start, start + maxLength).trim();
+
+	return `${start > 0 ? "..." : ""}${excerpt}${start + maxLength < text.length ? "..." : ""}`;
+}
+
+function uniqueByUrl(results: SearchResult[]) {
+	const seen = new Set<string>();
+	return results.filter((result) => {
+		const key = `${result.type}:${result.url}:${result.title}`;
+		if (seen.has(key)) return false;
+		seen.add(key);
+		return true;
+	});
+}
+
+async function loadCvEntries() {
+	const categories = await db.query.cvCategory.findMany({
+		orderBy: (fields, { asc }) => [asc(fields.layoutPosition), asc(fields.name)],
+		with: {
+			cvEntry: {
+				orderBy: (fields, { desc }) => [desc(fields.toTime), desc(fields.fromTime)],
+			},
+		},
+	});
+
+	return categories.flatMap((category) =>
+		category.cvEntry.map((entry) => ({
+			...entry,
+			categoryName: category.name ?? "CV",
+		})),
+	);
+}
+
+async function loadProjects() {
+	return db.query.project.findMany({
+		orderBy: (fields, { asc }) => [asc(fields.orderPos), asc(fields.title), asc(fields.id)],
+		with: {
+			techStack: true,
+		},
+	});
+}
+
+async function buildSearchResults(query: string, types: ContentType[]) {
+	const selected = new Set(types);
+	const results: SearchResult[] = [];
+
+	if (selected.has("cv")) {
+		const entries = await loadCvEntries();
+		for (const entry of entries) {
+			const body = stripMarkup(`${entry.categoryName} ${entry.description ?? ""}`);
+			const score = scoreText(query, entry.title, body);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "cv",
+					title: entry.title,
+					snippet: snippet(body, query),
+					url: "/cv",
+					score,
+					metadata: {
+						category: entry.categoryName,
+						fromTime: entry.fromTime,
+						toTime: entry.toTime,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("project")) {
+		const projects = await loadProjects();
+		const catalogQuery = isProjectCatalogQuery(query);
+		for (const [index, item] of projects.entries()) {
+			const stackItems = item.techStack?.stackItems ?? [];
+			const body = stripMarkup(`${item.description ?? ""} ${stackItems.join(" ")}`);
+			const score = catalogQuery ? 1000 - index : scoreText(query, item.title, body, stackItems);
+			if (score > 0 || !query.trim() || catalogQuery) {
+				results.push({
+					type: "project",
+					title: item.title,
+					snippet: snippet(body || item.title, query),
+					url: `/projects#${item.id}`,
+					score,
+					metadata: {
+						id: item.id,
+						stackItems,
+						sourceType: item.sourceType,
+						releaseStatus: item.releaseStatus,
+						sourceLink: item.sourceLink,
+						releaseLink: item.releaseLink,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("blog")) {
+		const posts = await db
+			.select({
+				slug: blogPost.slug,
+				title: blogPost.title,
+				date: blogPost.date,
+				description: blogPost.description,
+				tags: blogPost.tags,
+			})
+			.from(blogPost)
+			.orderBy(desc(blogPost.date), desc(blogPost.createdAt));
+
+		for (const post of posts) {
+			const tags = post.tags ?? [];
+			const body = stripMarkup(`${post.description ?? ""} ${tags.join(" ")}`);
+			const score = scoreText(query, post.title, body, tags);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "blog",
+					title: post.title,
+					snippet: snippet(body || post.title, query),
+					url: `/blog/${post.slug}`,
+					score,
+					metadata: {
+						slug: post.slug,
+						date: post.date,
+						tags,
+					},
+				});
+			}
+		}
+	}
+
+	if (selected.has("music")) {
+		const tracks = await db.select().from(music).orderBy(desc(music.createdAt));
+		for (const track of tracks) {
+			const body = stripMarkup(track.description);
+			const score = scoreText(query, track.title, body);
+			if (score > 0 || !query.trim()) {
+				results.push({
+					type: "music",
+					title: track.title,
+					snippet: snippet(body || track.fileName, query),
+					url: "/music",
+					score,
+					metadata: {
+						id: track.id,
+						fileName: track.fileName,
+						hasStream: Boolean(track.streamUrl),
+					},
+				});
+			}
+		}
+	}
+
+	return uniqueByUrl(results).sort((a, b) => b.score - a.score || a.title.localeCompare(b.title));
+}
+
+function projectMatches(projectItem: ProjectWithStack, idOrTitle: string) {
+	const normalized = idOrTitle.trim().toLowerCase();
+	const title = projectItem.title.toLowerCase();
+	return projectItem.id === idOrTitle || title === normalized || title.includes(normalized);
+}
+
+function matchedTerms(text: string, terms: string[]) {
+	const lower = text.toLowerCase();
+	return terms.filter((term) => lower.includes(term.toLowerCase()));
+}
+
+function parseDate(value: string | undefined, fallback: Date) {
+	if (!value?.trim()) return fallback;
+	const date = new Date(value);
+	return Number.isNaN(date.getTime()) ? fallback : date;
+}
+
+function safeTimeZone(value: string | undefined) {
+	const timeZone = value?.trim() || "Europe/Berlin";
+	try {
+		new Intl.DateTimeFormat("en-US", { timeZone }).format(new Date());
+		return timeZone;
+	} catch {
+		return "Europe/Berlin";
+	}
+}
+
+function isLikelyEmail(value: string) {
+	return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+}
+
+function overlaps(
+	start: Date,
+	end: Date,
+	busy: Array<{ start: Date; end: Date }>,
+) {
+	return busy.some((item) => start < item.end && end > item.start);
+}
+
+function getZonedParts(date: Date, timeZone: string) {
+	const formatter = new Intl.DateTimeFormat("en-US", {
+		timeZone,
+		weekday: "short",
+		hourCycle: "h23",
+		hour: "2-digit",
+		minute: "2-digit",
+	});
+	const parts = Object.fromEntries(formatter.formatToParts(date).map((part) => [part.type, part.value]));
+	return {
+		weekday: parts.weekday ?? "",
+		hour: Number(parts.hour ?? 0),
+		minute: Number(parts.minute ?? 0),
+	};
+}
+
+function isInsideWorkingHours(start: Date, end: Date, timeZone: string, workdayStartHour: number, workdayEndHour: number) {
+	const startParts = getZonedParts(start, timeZone);
+	const endParts = getZonedParts(end, timeZone);
+	const weekend = startParts.weekday === "Sat" || startParts.weekday === "Sun";
+	const startMinutes = startParts.hour * 60 + startParts.minute;
+	const endMinutes = endParts.hour * 60 + endParts.minute;
+
+	return !weekend && startMinutes >= workdayStartHour * 60 && endMinutes <= workdayEndHour * 60;
+}
+
+function availabilitySlots({
+	rangeStart,
+	rangeEnd,
+	busy,
+	durationMinutes,
+	timeZone,
+	workdayStartHour,
+	workdayEndHour,
+}: {
+	rangeStart: Date;
+	rangeEnd: Date;
+	busy: Array<{ start: Date; end: Date }>;
+	durationMinutes: number;
+	timeZone: string;
+	workdayStartHour: number;
+	workdayEndHour: number;
+}) {
+	const slots: Array<{ start: string; end: string }> = [];
+	const stepMinutes = 30;
+	const durationMs = durationMinutes * 60 * 1000;
+	const cursor = new Date(Math.ceil(rangeStart.getTime() / (stepMinutes * 60 * 1000)) * stepMinutes * 60 * 1000);
+
+	while (cursor.getTime() + durationMs <= rangeEnd.getTime() && slots.length < 10) {
+		const end = new Date(cursor.getTime() + durationMs);
+		if (
+			isInsideWorkingHours(cursor, end, timeZone, workdayStartHour, workdayEndHour)
+			&& !overlaps(cursor, end, busy)
+		) {
+			slots.push({ start: cursor.toISOString(), end: end.toISOString() });
+		}
+		cursor.setMinutes(cursor.getMinutes() + stepMinutes);
+	}
+
+	return slots;
+}
+
+function logAvailability(requestId: string, message: string, data?: Record<string, unknown>) {
+	console.log(`[ai:getAvailability:${requestId}] ${message}`, data ?? "");
+}
+
+export function createChatTools() {
+	return {
+		scheduleMeeting: tool({
+			description: "Schedule a meeting with Gregor Lohaus and add it to his Google Calendar. Use getAvailability first when the user asks for a meeting at a flexible or uncertain time.",
+			inputSchema: z.object({
+				title: z.string().describe("Meeting title, make something up if not provided"),
+				description: z.string().describe("Meeting description / agenda, make something up if not provided"),
+				dateTime: z
+					.string()
+					.describe("ISO 8601 datetime for the meeting start, e.g. 2026-06-18T10:00:00+02:00"),
+				durationMinutes: z
+					.number()
+					.int()
+					.min(15)
+					.max(120)
+					.describe("Duration of the meeting in minutes, if none provided ask if 20 minutes is ok"),
+				attendeeEmail: z
+					.string()
+					.optional()
+					.describe("Optional email of the visitor to invite, if provided"),
+				attendeeName: z.string().optional().describe("Name of the visitor"),
+			}),
+			execute: async (input) => {
+				if (input.attendeeEmail && !isLikelyEmail(input.attendeeEmail)) {
+					return {
+						success: false,
+						error: "The attendee email does not look valid. Ask the visitor to provide a valid email address before scheduling.",
+					};
+				}
+
+				return scheduleMeeting({ ...input });
+			},
+		}),
+		cancelMeeting: tool({
+			description: "Remove a previously scheduled meeting from Gregor's dedicated availability calendar. Use only when you have the exact eventId returned by scheduleMeeting.",
+			inputSchema: z.object({
+				eventId: z.string().min(1).describe("Google Calendar event id returned by a previous scheduleMeeting tool call."),
+			}),
+			execute: async ({ eventId }) => cancelMeeting({ eventId }),
+		}),
+		searchSiteContent: tool({
+			description: "Search Gregor Lohaus's own website content across CV entries, projects, blog posts, and music. Use this for questions about Gregor's work, skills, writing, projects, or site content. For broad questions about Gregor's projects, use types ['project'] so the tool returns the project catalog.",
+			inputSchema: z.object({
+				query: z.string().describe("Search query, skill, technology, topic, or phrase."),
+				types: z.array(contentTypeSchema).optional().describe("Optional content types to search. Omit to search all site content."),
+				limit: z.number().int().min(1).max(12).optional().describe("Maximum number of results to return."),
+			}),
+			execute: async ({ query, types, limit }) => {
+				const results = await buildSearchResults(query, types?.length ? types : ["cv", "project", "blog", "music"]);
+				return {
+					success: true,
+					query,
+					results: results.slice(0, limit ?? 8).map(({ score, ...result }) => result),
+				};
+			},
+		}),
+		getRelevantExperience: tool({
+			description: "Find Gregor's most relevant CV entries and projects for a role, skill set, seniority, or domain. Use this for recruiter-style qualification questions.",
+			inputSchema: z.object({
+				role: z.string().optional().describe("Role or job title, such as full-stack engineer or React Native developer."),
+				skills: z.array(z.string()).optional().describe("Technologies, tools, or skills to match."),
+				domain: z.string().optional().describe("Product or business domain to match, if any."),
+				seniority: z.string().optional().describe("Seniority or responsibility level to match, if any."),
+				limit: z.number().int().min(1).max(10).optional().describe("Maximum matching entries to return."),
+			}),
+			execute: async ({ role, skills, domain, seniority, limit }) => {
+				const terms = [role, domain, seniority, ...(skills ?? [])].filter((value): value is string => Boolean(value?.trim()));
+				const query = terms.join(" ");
+				const results = await buildSearchResults(query, ["cv", "project"]);
+				const selected = results.slice(0, limit ?? 6);
+
+				return {
+					success: true,
+					query,
+					matches: selected.map(({ score, ...result }) => ({
+						...result,
+						matchedTerms: matchedTerms(`${result.title} ${result.snippet} ${(result.metadata?.stackItems as string[] | undefined)?.join(" ") ?? ""}`, terms),
+						whyRelevant: result.type === "project"
+							? "Project match based on title, description, and technology stack."
+							: "CV match based on experience title, category, and description.",
+					})),
+				};
+			},
+		}),
+		getProjectDetails: tool({
+			description: "Get detailed information for one of Gregor's projects, including description, stack, source link, release link, and project page URL.",
+			inputSchema: z.object({
+				idOrTitle: z.string().min(1).describe("Project id, exact title, or partial project title."),
+			}),
+			execute: async ({ idOrTitle }) => {
+				const projects = await loadProjects();
+				const found = projects.find((item) => projectMatches(item, idOrTitle));
+
+				if (!found) {
+					return {
+						success: false,
+						error: `No project matched "${idOrTitle}".`,
+						suggestions: projects.slice(0, 5).map((item) => ({
+							id: item.id,
+							title: item.title,
+							url: `/projects#${item.id}`,
+						})),
+					};
+				}
+
+				return {
+					success: true,
+					project: {
+						id: found.id,
+						title: found.title,
+						description: stripMarkup(found.description),
+						sourceType: found.sourceType,
+						sourceLink: found.sourceLink,
+						releaseStatus: found.releaseStatus,
+						releaseLink: found.releaseLink,
+						stackItems: found.techStack?.stackItems ?? [],
+						url: `/projects#${found.id}`,
+					},
+				};
+			},
+		}),
+		getAvailability: tool({
+			description: "Check Gregor's Google Calendar availability and suggest open meeting slots. Use this directly for questions like 'when is the next open spot?' or 'what times are available?'. If no date range is provided, it checks from now. Use before scheduling when the requested time is flexible.",
+			inputSchema: z.object({
+				fromDateTime: z.string().optional().describe("ISO 8601 range start. Defaults to now."),
+				toDateTime: z.string().optional().describe("ISO 8601 range end. Defaults to 14 days after the range start."),
+				durationMinutes: z.number().int().min(15).max(120).optional().describe("Desired meeting duration. Defaults to 30 minutes."),
+				timeZone: z.string().optional().describe("IANA time zone for working-hours filtering. Defaults to Europe/Berlin."),
+				workdayStartHour: z.number().int().min(0).max(23).optional().describe("Earliest local start hour. Defaults to 9."),
+				workdayEndHour: z.number().int().min(1).max(24).optional().describe("Latest local end hour. Defaults to 17."),
+			}),
+			execute: async (input) => {
+				const requestId = crypto.randomUUID();
+				logAvailability(requestId, "start", {
+					input,
+				});
+
+				const durationMinutes = input.durationMinutes ?? 30;
+				const timeZone = safeTimeZone(input.timeZone);
+				const workdayStartHour = input.workdayStartHour ?? 9;
+				const workdayEndHour = Math.max(input.workdayEndHour ?? 17, workdayStartHour + 1);
+				const rangeStart = parseDate(input.fromDateTime, new Date());
+				const defaultEnd = new Date(rangeStart.getTime() + 14 * 24 * 60 * 60 * 1000);
+				const requestedEnd = parseDate(input.toDateTime, defaultEnd);
+				const maxEnd = new Date(rangeStart.getTime() + 31 * 24 * 60 * 60 * 1000);
+				const rangeEnd = requestedEnd <= rangeStart ? defaultEnd : requestedEnd > maxEnd ? maxEnd : requestedEnd;
+				logAvailability(requestId, "resolved range", {
+					durationMinutes,
+					timeZone,
+					workdayStartHour,
+					workdayEndHour,
+					rangeStart: rangeStart.toISOString(),
+					rangeEnd: rangeEnd.toISOString(),
+				});
+
+				const calendar = getGoogleCalendarClient();
+				const calendarId = getGoogleCalendarId();
+				logAvailability(requestId, "service account calendar ready", {
+					calendarId,
+				});
+
+				let busy: Array<{ start: Date; end: Date }>;
+				try {
+					logAvailability(requestId, "freebusy request");
+					const response = await calendar.freebusy.query({
+						requestBody: {
+							timeMin: rangeStart.toISOString(),
+							timeMax: rangeEnd.toISOString(),
+							timeZone,
+							items: [{ id: calendarId }],
+						},
+					});
+					busy = (response.data.calendars?.[calendarId]?.busy ?? [])
+						.map((item) => ({
+							start: parseDate(item.start ?? undefined, rangeStart),
+							end: parseDate(item.end ?? undefined, rangeStart),
+						}))
+						.filter((item) => item.end > item.start);
+					logAvailability(requestId, "freebusy response", {
+						busyCount: busy.length,
+					});
+				} catch (error) {
+					console.error(`[ai:getAvailability:${requestId}] freebusy failed`, error);
+					return {
+						success: false,
+						error: "Failed to read Gregor's Google Calendar availability.",
+					};
+				}
+
+				const availableSlots = availabilitySlots({
+					rangeStart,
+					rangeEnd,
+					busy,
+					durationMinutes,
+					timeZone,
+					workdayStartHour,
+					workdayEndHour,
+				});
+				logAvailability(requestId, "complete", {
+					busyCount: busy.length,
+					availableSlotCount: availableSlots.length,
+					firstAvailableSlot: availableSlots[0],
+				});
+				const nextAvailableSlot = availableSlots[0] ?? null;
+
+				return {
+					success: true,
+					range: {
+						start: rangeStart.toISOString(),
+						end: rangeEnd.toISOString(),
+						timeZone,
+					},
+					durationMinutes,
+					busy: busy.map((item) => ({
+						start: item.start.toISOString(),
+						end: item.end.toISOString(),
+					})),
+					nextAvailableSlot,
+					availableSlots,
+				};
+			},
+		}),
+	};
+}

src/server/dbschema/schema.ts

@@ -175,6 +175,7 @@ export const chatMessageRelations = relations(chatMessage, ({ one }) => ({
 export const systemSettings = createTable(
 	"systemSetting",
 	(d) => ({
-		systemPropmt: d.text()
+		systemPropmt: d.text(),
+		model: d.text()
 	})
 )

src/server/googleCalendar.ts

@@ -0,0 +1,20 @@
+import "server-only";
+
+import { google } from "googleapis";
+import { env } from "~/env";
+
+const calendarScope = "https://www.googleapis.com/auth/calendar";
+
+export function getGoogleCalendarClient() {
+	const auth = new google.auth.JWT({
+		email: env.GOOGLE_SERVICE_ACCOUNT_EMAIL,
+		key: env.GOOGLE_SERVICE_ACCOUNT_PRIVATE_KEY.replace(/\\n/g, "\n"),
+		scopes: [calendarScope],
+	});
+
+	return google.calendar({ version: "v3", auth });
+}
+
+export function getGoogleCalendarId() {
+	return env.GOOGLE_CALENDAR_ID;
+}

src/server/routers/blog.ts

@@ -305,6 +305,25 @@ export const blogRouter = router({
     };
   }),
 
+  metadataBySlug: publicProcedure.input(z.string()).query(async ({ input: slug }) => {
+    const post = await db.query.blogPost.findFirst({
+      where(fields, operators) {
+        return operators.eq(fields.slug, slug);
+      },
+    });
+
+    if (!post) throw new TRPCError({ code: "NOT_FOUND", message: `Post "${slug}" not found` });
+
+    return {
+      slug: post.slug,
+      title: post.title,
+      date: post.date,
+      description: post.description,
+      tags: post.tags ?? [],
+      fileUrl: post.fileUrl,
+    };
+  }),
+
   syncFromUploadThing: publicProcedure.mutation(async () => {
     await assertAdmin();
 

src/server/routers/chat.ts

@@ -7,6 +7,26 @@ import { isAdmin } from '~/app/actions';
 import { z } from 'zod';
 import { eq } from 'drizzle-orm';
 import { clerkClient, auth } from '@clerk/nextjs/server'
+import { env } from '~/env'
+
+export const DEFAULT_MODEL = 'gpt-5-mini'
+
+// Models returned by the OpenAI API that aren't usable for chat completions.
+const NON_CHAT_MODEL = /embedding|image|audio|realtime|transcribe|tts|whisper|moderation|dall-e|search|codex|instruct/
+
+async function readSettings() {
+	return db.select().from(systemSettings).limit(1).then((r) => r[0])
+}
+
+async function writeSettings(values: { systemPropmt?: string | null; model?: string | null }) {
+	const current = await readSettings()
+	await db.delete(systemSettings)
+	await db.insert(systemSettings).values({
+		systemPropmt: values.systemPropmt ?? current?.systemPropmt ?? null,
+		model: values.model ?? current?.model ?? null,
+	})
+}
+
 export const chatRouter = router({
   getSession: publicProcedure.query(async () => {
     const { userId } = await auth();
@@ -66,13 +86,34 @@ export const chatRouter = router({
 
   }),
   getSystemPrompt: publicProcedure.query(async () => {
-    const row = await db.select().from(systemSettings).limit(1).then((r) => r[0])
+    const row = await readSettings()
     return row?.systemPropmt ?? ''
   }),
   updateSystemPrompt: publicProcedure.input(z.object({ prompt: z.string() })).mutation(async ({ input }) => {
     if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
-    await db.delete(systemSettings)
-    await db.insert(systemSettings).values({ systemPropmt: input.prompt })
+    await writeSettings({ systemPropmt: input.prompt })
+  }),
+  getModel: publicProcedure.query(async () => {
+    const row = await readSettings()
+    return row?.model ?? DEFAULT_MODEL
+  }),
+  listModels: publicProcedure.query(async () => {
+    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
+    const res = await fetch('https://api.openai.com/v1/models', {
+      headers: { Authorization: `Bearer ${env.OPENAI_API_KEY}` },
+    })
+    if (!res.ok) {
+      throw new TRPCError({ code: 'INTERNAL_SERVER_ERROR', message: `failed to fetch models (${res.status})` })
+    }
+    const json = (await res.json()) as { data: { id: string }[] }
+    return json.data
+      .map((m) => m.id)
+      .filter((id) => (id.startsWith('gpt') || /^o\d/.test(id) || id.startsWith('chatgpt')) && !NON_CHAT_MODEL.test(id))
+      .sort()
+  }),
+  updateModel: publicProcedure.input(z.object({ model: z.string() })).mutation(async ({ input }) => {
+    if (!(await isAdmin())) throw new TRPCError({ code: 'FORBIDDEN' })
+    await writeSettings({ model: input.model })
   }),
 })
 

src/server/routers/cvCategory.ts

@@ -13,6 +13,20 @@ export const cvCategoryRouter = router({
     console.log(res);
     return res;
   }),
+  // Single round-trip for the whole CV page: every category (across all layout
+  // positions) with its entries already populated. Lets the page fetch-then-render
+  // instead of waterfalling per-category/per-entry queries, so all content is
+  // present before the entrance animation runs.
+  listAllWithEntries: publicProcedure.query(async () => {
+    const res = await db.query.cvCategory.findMany({
+      with: {
+        cvEntry: {
+          orderBy: (t, { desc }) => desc(t.toTime),
+        },
+      },
+    })
+    return res;
+  }),
   getById: publicProcedure.input(z.string()).query(async ({input}) => {
     const res = await db.query.cvCategory.findFirst({
       where(fields, operators) {

src/server/routers/music.ts

@@ -1,7 +1,7 @@
 import { publicProcedure, router } from "~/server/trpc";
 import { db } from "~/server/db";
 import { music } from "~/server/dbschema/schema";
-import { eq } from "drizzle-orm";
+import { eq, sql } from "drizzle-orm";
 import { isAdmin } from "~/app/actions";
 import { TRPCError } from "@trpc/server";
 import { z } from "zod";
@@ -9,7 +9,7 @@ import { createMusicInputSchema, updateMusicInputSchema, setStreamInputSchema }
 import { utapi } from "../uploadthing";
 export const musicRouter = router({
 	list: publicProcedure.query(async () => {
-		let res = await db.select().from(music).orderBy(music.createdAt);
+		let res = await db.select().from(music).orderBy(sql`${music.createdAt} desc`);
 		console.log(res);
 		return res;
 	}),

src/server/trpc.ts

@@ -1,5 +1,8 @@
 import { initTRPC } from "@trpc/server"
+import superjson from "superjson"
 
-const t = initTRPC.create();
+const t = initTRPC.create({
+	transformer: superjson,
+});
 export const router = t.router;
 export const publicProcedure = t.procedure;