Code — overlay syntax editor

# Install `code-editor` — Code — overlay syntax editor

> Lightweight code editor: overlay highlighting, tabs with dirty dots, lazy explorer tree, injectable filesystem.

📚 Knowledge base : https://resource.rahmanef.com/llms.txt
📦 Slice detail   : https://resource.rahmanef.com/slices/code-editor
🧠 JSON catalog   : https://resource.rahmanef.com/api/knowledge?slice=code-editor
🔗 Source         : https://github.com/rahmanef63/resource-site/tree/main/frontend/slices/code-editor

## 1. Install

```bash
npx rahman-resources add code-editor
# alias: npx rr add code-editor
```

The CLI copies `frontend/slices/code-editor/` into your project + augments `.env.example` + installs npm deps automatically. Run it from your project root.

## 2. What it ships

- npm: `lucide-react`
- shadcn primitives: `button`, `badge`, `input`, `scroll-area`, `sheet`, `dialog`

## 3. Wire it up

Stack: Next 16 + React 19 + Tailwind 4 + shadcn/ui. A lightweight overlay-highlighting code editor with a lazy explorer tree. Fully client-side; no backend required.

STEP 1 — Install. `npx rr add code-editor`. Ensure `@/features/code-editor` resolves in tsconfig paths and Tailwind scans the slice folder.

STEP 2 — Deps. npm: `lucide-react`. shadcn: `npx shadcn@latest add button badge input scroll-area sheet dialog`.

STEP 3 — Mount. `<CodeEditor />` opens the seeded sample tree (writable in-memory mock). Open a specific file with a payload:
```tsx
"use client";
import { CodeEditor } from "@/features/code-editor";
export default function Page() {
  return <div className="h-dvh"><CodeEditor payload={{ path: "/Projects/hello.ts" }} /></div>;
}
```
Or register the `codeEditorApp` descriptor in an appshell manifest for windowed hosts.

STEP 4 — Real filesystem (optional). `configureCodeFs({ list, read, write, mkdir })` — list returns { path, entries: [{ name, kind }] } for ONE directory (the tree fetches per expand), read returns the file body, write/mkdir mutate. Writes are best-effort: on failure the editor keeps the local buffer and flags the status bar.

STEP 5 — Cross-app open. From a file manager (e.g. the file-explorer slice), wire onOpenFile to re-render CodeEditor with payload={{ path }} — the editor adds a tab and hydrates the buffer.

## Rules of engagement

- shadcn-only UI primitives. No raw `<button>` / `<dialog>` / native date or file inputs.
- 200-line hard cap per source file (extract neighbours when over).
- All Convex queries hit an index (`.withIndex(...)`); never bare `.collect()`.
- Public mutations/queries declare `args:` validators + authz.
- Full ruleset: https://resource.rahmanef.com/best-practice