o# CLAUDE.md

This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.

## Project Overview

Tunji is a Markdown editor desktop app inspired by Typora, built with Electron + Vue 3. The UI is in Chinese (Simplified). The app is in early development — all data is mock/hardcoded with no persistence layer yet.

## Commands

- `npm run dev` — Start development with hot reload (electron-vite dev)
- `npm run build` — Production build to `out/`
- `npm run preview` — Preview production build
- `npm run package` — Package with electron-builder

No test framework is installed.

## Architecture

This is an **electron-vite** project with three build targets configured in `electron.vite.config.mjs`:

- **Main process** (`src/main/index.js`) — BrowserWindow creation, IPC for theme sync, titleBarOverlay color management
- **Preload** (`src/main/indexpreload.js`) — Exposes `window.electronAPI` (platform, setTheme) via contextBridge
- **Renderer** (`src/renderer/`) — Vue 3 SPA, path alias `@` → `src/renderer/src`

### Key Tech Decisions

- **Tailwind CSS v4** — uses `@tailwindcss/vite` plugin and `@theme` directive syntax (not `tailwind.config.js`)
- **PrimeVue** — component library with Aura theme preset; dark mode selector is `.dark`
- **Icons** — use `@lucide/vue` for all icons, not PrimeVue's built-in icon components
- **Theme system** — `composables/useTheme.js` manages light/dark/system modes, persisted to localStorage (`tunji-theme`), synced to Electron main process via IPC for titleBarOverlay colors. Dark palette is Catppuccin Mocha-inspired.
- **Markdown rendering** — unified/remark-parse/remark-gfm/remark-rehype/rehype-stringify pipeline in EditorPanel.vue

### Component Layout

`App.vue` orchestrates three panels: `SideBar` (navigation, search, notebooks, tags, theme toggle) → `NotesOverview` (card/list grid of notes) → `EditorPanel` (markdown editor with edit/preview/split modes, formatting toolbar, auto-generated outline from headings). `ButtonIcon.vue` is a shared icon button component.

### Styling

Custom CSS properties are defined in `src/renderer/src/assets/styles/main.css` using Tailwind v4's `@theme` syntax for primary (indigo), neutral, semantic, and app-level colors. Light and dark mode palettes are both defined there.