viteboard 0.1.0

package/content/docs/capabilities.md

@@ -0,0 +1,89 @@
+---
+title: Capabilities
+---
+
+# Capabilities
+
+Capabilities are structured markdown specs stored at `<docs-root>/capabilities/*.md`. They're designed to be selected, combined, and copied as a single prompt into an AI coding assistant.
+
+This is your blank slate — create your first capability by right-clicking a directory in the sidebar and choosing **New Capability**.
+
+## What a capability looks like
+
+```markdown
+---
+title: Auth flow
+summary: Describes the JWT-based authentication flow for this service.
+tags: auth, security, backend
+---
+
+# Auth flow
+
+## Overview
+
+All API requests are authenticated with a short-lived JWT issued by...
+
+## Token structure
+
+...
+```
+
+The frontmatter (`title`, `summary`, `tags`) powers the capability library cards and search. The body is the full spec content that gets copied into the prompt.
+
+## Creating a capability
+
+Right-click any directory in the sidebar → **New Capability**. Type a name. The file is created in `<docs-root>/capabilities/<name>.md` with a frontmatter stub.
+
+Click **Edit** in the top bar to write the spec body.
+
+## The capability library
+
+Click **All Capabilities** in the sidebar to open the capability library for a project. Each capability appears as a card showing its title, summary, and tags.
+
+From the library you can:
+
+- Click a card title to open the full spec
+- Click **Add to cart** to queue a spec for prompt building
+- Click **Copy as LLM prompt** on a detail page to copy a single spec immediately
+
+## The component cart
+
+The cart accumulates selected specs. It lives in the **Cart** button in the top bar — the number badge shows how many specs are queued.
+
+Click the Cart button to open the popover:
+
+| Button | Action |
+| --- | --- |
+| **Copy prompt** | Copies all specs as a single formatted prompt |
+| **Remove** | Removes one spec from the cart |
+| **Clear** | Empties the cart |
+
+The cart is session memory — it resets when you close the tab.
+
+## The combined prompt format
+
+When you click **Copy prompt**, the output looks like:
+
+```
+Use these capability/component specs as implementation guidance for the next coding task.
+
+## 1. Auth flow
+
+[full spec content]
+
+---
+
+## 2. Rate limiting
+
+[full spec content]
+```
+
+Paste this directly into ChatGPT, Claude, or any AI assistant as context before giving your coding instruction.
+
+## Searching capabilities
+
+Capabilities are included in full-text search (Cmd K / Ctrl K). Results from the capability library are labelled **Capability** in the search results to distinguish them from regular docs.
+
+---
+
+**Next:** [Workspace](workspace.md) — managing projects, the wiki, and shortcuts.

package/content/docs/docs.md

@@ -0,0 +1,84 @@
+---
+title: Docs
+---
+
+# Docs
+
+Docs are plain markdown files. They live anywhere under a `docs/` root and are discovered automatically — no config file, no manifest.
+
+## Writing a doc
+
+Click **Edit** in the top bar while viewing any doc. The editor opens inline. Click **Save** or press **Escape** to close.
+
+To create a new doc, right-click any directory in the sidebar and choose **New Doc**. Type a name; the file is created immediately and you're navigated to it.
+
+## You can add Images!
+
+![image](../assets/image-mqjsmenr.png)
+
+## Markdown support
+
+The renderer covers all standard constructs:
+
+| Element | Syntax |
+| --- | --- |
+| Headings | `# H1` through `###### H6` |
+| Bold | `**text**` or `__text__` |
+| Italic | `*text*` or `_text_` |
+| Inline code | \`` `code` `\` |
+| Fenced code block | ` `\``lang ` |
+| Link | `[label](url)` or `[label](relative-path.md)` |
+| Image | `![alt](path-or-url)` |
+| Unordered list | `- item` |
+| Ordered list | `1. item` |
+| Task list | `- [ ] item` / `- [x] item` |
+| Table | GFM table syntax |
+| Blockquote | `> text` |
+| Horizontal rule | `---` |
+| Board embed | ` `\``board ` block (see [Boards](boards.md)) |
+
+Relative links between docs work — `[Getting started](getting-started.md)` navigates within the same docs root.
+
+## The sidebar tree
+
+The sidebar mirrors the filesystem. Rules:
+
+- `index.md` in any directory shows as **Overview** and sorts to the top
+- Directories become collapsible groups (sorted before files)
+- Files are sorted alphabetically after directories
+- `boards/`, `capabilities/`, `assets/` are excluded from the tree
+
+The tool reflects changes immediately — create a file on disk and refresh to see it.
+
+## Right-click actions on docs
+
+Right-click any doc link in the sidebar:
+
+| Action | What it does |
+| --- | --- |
+| **Open** | Navigate to the doc |
+| **Edit** | Open the inline editor |
+| **Rename** | Rename the file; updates the URL |
+| **Delete** | Delete the file after confirmation |
+
+Right-click any **directory**:
+
+| Action | What it does |
+| --- | --- |
+| **New Doc** | Create a `.md` file in that directory |
+| **New Board** | Create a board in that directory's `boards/` |
+| **New Capability** | Create a capability spec in `capabilities/` |
+
+## Full-text search
+
+Press **Cmd K** (Mac) or **Ctrl K** (Windows/Linux) to open the command palette.
+
+- Type any word or phrase to search across all docs and capabilities in all registered projects
+- Results show the document title, section heading, and a text snippet with the matched term highlighted
+- Arrow keys to move through results · Enter to navigate · Escape to close
+
+Search is indexed at startup and refreshed after every content change.
+
+---
+
+**Next:** [Boards](boards.md) — infinite-canvas editing and board embeds.

package/content/docs/guide/boards-in-markdown.md

@@ -0,0 +1,48 @@
+---
+title: Boards in markdown
+order: 2
+---
+
+# Boards in markdown
+
+You can embed any board into a doc and **frame exactly the region you want to show**.
+
+## The directive
+
+```board
+src: ../product-roadmap
+region: -393, -16, 1259, 663
+height: 360
+title: Product Roadmap
+```
+
+`src` is required — it's the board file name without `.board.json`.
+
+- `region` is four numbers in **world coordinates**: `x, y, width, height`. Omit it to fit the whole board.
+- The preview is **read-only** and rendered with the same drawing engine as the editor, so it looks identical — just cropped and static.
+
+## How to get a region without doing math
+
+1. Open the board from the Boards section for the active docs root and click **Edit**.
+2. Pan/zoom until the area you want fills the screen.
+3. Click **Copy embed** in the top bar.
+4. Paste the snippet into any markdown file. The current visible rectangle becomes the `region`
+
+\`\`\`board
+
+src: product-roadmap
+
+region: 4958, 3057, 1273, 789
+
+height: 360
+
+title: Product Roadmap
+
+\`\`\`
+
+```board
+src: ../product-roadmap
+region: 4958, 3057, 1273, 789
+height: 360
+title: Product Roadmap
+```

package/content/docs/guide/boards.md

@@ -0,0 +1,92 @@
+---
+title: Boards
+---
+
+# Boards
+
+Boards are infinite-canvas files stored as JSON alongside your docs. They open in a full-screen editor, close back to the doc view, and commit to git like any other file.
+
+## Creating a board
+
+Three ways:
+
+1. Right-click a directory in the sidebar → **New Board**
+2. Click **All Boards** for a project → **+ New board** button on the page
+3. Click the board page button in the top-right of the boards list page
+
+Give the board a title. The file is created at `<docs-root>/boards/<slug>.board.json`.
+
+## Editing a board
+
+Click any board in the sidebar or on the All Boards page. The board opens full-screen. The shell layout is hidden while the editor is active — close with the **×** button in the top-right to return.
+
+### Canvas controls
+
+| Input | Action |
+| --- | --- |
+| Scroll | Pan vertically |
+| Shift + scroll | Pan horizontally |
+| Cmd/Ctrl + scroll | Zoom in / out |
+| Click element | Select |
+| Click + drag empty area | Pan |
+| Double-click element | Edit text |
+| Delete / Backspace | Remove selected |
+
+### Toolbar elements
+
+The bottom toolbar contains every element type:
+
+- **Select** — move, resize, multi-select
+- **Pan** — drag canvas
+- **Sticky** — colour-coded sticky notes
+- **Task** — checkbox task items
+- **Text** — free text at any size
+- **Shapes** — rectangles, ellipses, and more with fill/stroke
+- **Arrow / Connector** — lines between elements
+- **Image** — paste or drag an image file; stored in `assets/`
+- **Frame** — group elements into a named region
+- **Templates** — pre-built layout starters
+
+### Renaming and deleting
+
+Right-click any board link in the sidebar:
+
+- **Rename** — updates the board's title (the `.board.json` filename stays the same)
+- **Delete** — removes the file after confirmation
+
+## Embedding a board in a doc
+
+A board region can be embedded inline in any markdown doc using a fenced `board` block:
+
+````
+```board
+src: my-board
+region: 100, 200, 800, 400
+height: 320
+title: Sprint overview
+```
+````
+
+- `src` — the board filename without `.board.json` (**required**)
+- `region` — four world-space coordinates: `x, y, width, height` (optional — omit to fit the whole board)
+- `height` — height of the embed in pixels (optional, defaults to 360)
+- `title` — caption shown below the embed (optional)
+
+The embed is **read-only** and rendered with the same drawing engine as the editor.
+
+## Getting a region without doing the maths
+
+1. Open the board and click **Edit** to enter the canvas editor.
+2. Pan and zoom until the area you want to show fills the screen.
+3. Click **Copy embed** in the top-right toolbar.
+4. Paste the snippet anywhere in a markdown doc.
+
+The `region` coordinates are calculated from whatever is currently visible on screen.
+
+## Board files are git-native
+
+Each board is a single JSON file. `git diff` shows exactly which elements changed. Board files are small — a board with 50 elements is typically under 20 KB.
+
+---
+
+**Next:** [Capabilities](capabilities.md) — writing reusable specs and building LLM prompts.

package/content/docs/guide/getting-started.md

@@ -0,0 +1,71 @@
+---
+title: Getting started
+---
+
+# Getting started
+
+## Install and run
+
+```bash
+pnpm install
+pnpm dev
+```
+
+Open the URL printed in the terminal. You'll see the home page with an empty workspace.
+
+## Add a project
+
+Click **+ Add Repo** on the home page or at the bottom of the sidebar. A native folder picker opens — select the root of any project you want to document.
+
+The tool scans the selected directory recursively for folders named `docs/`. Every `docs/` folder that contains at least one `.md` or `.board.json` file becomes a **docs root** and appears in the sidebar.
+
+> The tool only records the path. It never copies, uploads, or modifies your project files.
+
+## What the sidebar shows
+
+After adding a project you'll see it as a collapsible section in the sidebar. Click to expand. Inside you'll find the path tree leading to each discovered `docs/` root.
+
+- Each docs root shows its relative path (e.g. `backend/api/docs`)
+- Right-click any directory to create a new doc, board, or capability inside it
+- **All Boards** and **All Capabilities** appear at the bottom of each project
+
+## The folder model
+
+The tool expects this layout inside each `docs/` root:
+
+```
+docs/
+  index.md          → shows as "Overview" in the sidebar
+  any-subdir/       → becomes a collapsible group
+    my-doc.md
+  boards/           → board files; excluded from the doc tree
+    my-board.board.json
+  capabilities/     → capability specs; shown via All Capabilities
+    auth-flow.md
+  assets/           → images; excluded from the doc tree
+    screenshot.png
+```
+
+`boards/`, `capabilities/`, and `assets/` are special directories — the tool recognises them and surfaces their contents through dedicated views rather than as doc tree nodes.
+
+## Your first doc
+
+1. Right-click a directory in the sidebar.
+2. Choose **New Doc**.
+3. Type a name — it becomes the filename (`my-doc.md`) and the page title.
+4. The doc opens immediately. Click **Edit** in the top bar to write in it.
+
+## Your first board
+
+1. Right-click a directory or click **All Boards** → **+ New board**.
+2. Give it a title.
+3. The board opens in full-screen canvas mode.
+4. Draw, add stickies, shapes, tasks. Close with the × button when done.
+
+## Removing a project
+
+Right-click the project name in the sidebar → **Remove from workspace**. The project is unregistered. Nothing on disk is deleted.
+
+---
+
+**Next:** [Docs](docs.md) — writing and managing markdown content.

package/content/docs/guide/test.md

@@ -0,0 +1,6 @@
+```board
+src: ../product-roadmap
+region: 4590, 604, 3172, 1650
+height: 360
+title: Product Roadmap
+```

package/content/docs/index.md

@@ -0,0 +1,47 @@
+---
+title: Overview
+---
+
+# ViteBoard
+
+A local-first documentation workspace for development teams. Markdown docs, infinite-canvas boards, and structured capability specs — all plain files on disk, committed to git alongside your source code.
+
+There is no cloud service, no database, no account. The Vite dev-server plugin reads and writes files directly. Every change you make is immediately a git diff.
+
+---
+
+## What's in here
+
+**[Getting started](guide/getting-started.md)** — add your first project, understand the folder model, make your first doc and board.
+
+**[Docs](guide/docs.md)** — writing and managing markdown documents, the sidebar tree, right-click actions, full-text search.
+
+**[Boards](guide/boards.md)** — creating and editing infinite-canvas boards, embedding board regions into docs, the Copy embed workflow.
+
+**[Capabilities](guide/capabilities.md)** — writing capability specs, the component cart, building and copying LLM prompts.
+
+**[Workspace](guide/workspace.md)** — managing multiple projects, the project wiki, keyboard shortcuts, removing projects.
+
+---
+
+## The short version
+
+1. Run `pnpm dev` in this directory.
+2. Click **Add Repo** in the sidebar and pick any project root.
+3. The sidebar discovers every `docs/` folder under that root.
+4. Right-click any directory in the sidebar to create a doc, board, or capability.
+5. Everything saves to disk. Commit with git as normal.
+
+**Note:** These built-in docs ship with ViteBoard. To remove them, delete the `content/docs/` folder from the ViteBoard directory and restart the dev server.
+
+## How it stores things
+
+| Action | What happens on disk |
+| --- | --- |
+| Create / edit a doc | Writes `<docs-root>/<path>.md` |
+| Create / save a board | Writes `<docs-root>/boards/<id>.board.json` |
+| Paste image on board | Writes `<docs-root>/assets/<filename>` |
+| Create a capability | Writes `<docs-root>/capabilities/<name>.md` |
+| Add a project | Records path in `.workspace/workspace.json` |
+
+Nothing leaves your machine.