Develop

README.md

@@ -36,7 +36,7 @@ A lightweight and modern Markdown editor built with JavaFX.
 - **Search** - Instant full-text search across indexed documents with a live results popup (up to 20 results); matches on title, filename, tags, summary, authors, and UUID; keyboard navigation
 - **Search & Replace** - In-editor search/replace overlay (`Ctrl+F` / `Ctrl+H`) with optional **Regular Expression**, **Full Word**, and **Match Case** toggles; navigate occurrences with `▲`/`▼`; replace current match or all matches at once; result counter; closes with `Escape`
 - **Tag Cloud** - Visual tag cloud panel below the project explorer showing tag frequency; click any tag to search for it
-- **Network Diagram** - Interactive force-directed graph visualizing document links and shared tags; drag nodes, pan, zoom, click to open documents, click tags for search popup; tooltips with title/author/date; current document highlighted with orange border; isolated nodes hidden; auto zoom-to-fit
+- **Network Diagram** - Interactive force-directed graph visualizing document links and shared tags; drag nodes, pan, zoom, click to open documents, click tags for search popup; tooltips with title/author/date; current document highlighted with orange border; isolated nodes hidden; auto zoom-to-fit; **document groups** shown with pastel-colored circles (click to zoom, double-click to name); **detach button** to open diagram in a dedicated tab; **automatic label hiding** at high zoom-out for large projects
 - **Status Bar** - Bottom status bar showing current document name, cursor position (line:column), document statistics (docs/lines/words), indexing progress bar, and a **PlantUML local-jar indicator** (⚙ spinning gear during rendering + "● PlantUML: local jar" badge when local mode is active); indexing runs in a background thread
 - **Multi-document Tabs** - Work on multiple documents simultaneously; drag tabs to reorder; tab name truncation with tooltip; modified indicator (`*` prefix)
 - **Drag & Drop into Editor** - Drop files from Project Explorer into the editor to insert Markdown image or link syntax at the drop position
@@ -106,7 +106,7 @@ Or use the build script:
 ### Running with a specific language
 
 ```bash
-java -Duser.language=en -Duser.country=US --module-path target/build/libs --add-modules javafx.base,javafx.graphics,javafx.controls,javafx.fxml,javafx.media,javafx.web -cp "target/build/MarkNote-0.1.0-snapshot.jar:target/build/libs/*" Main
+java -Duser.language=en -Duser.country=US --module-path target/build/libs --add-modules javafx.base,javafx.graphics,javafx.controls,javafx.fxml,javafx.media,javafx.web -cp "target/build/MarkNote-0.1.0.jar:target/build/libs/*" Main
 ```
 
 ## Packaging
@@ -164,8 +164,8 @@ Where `{platform}` is:
 1. Download or build the package for your platform
 2. Extract the ZIP archive:
    ```bash
-   unzip MarkNote-0.1.0-snapshot-linux.zip
-   cd MarkNote-0.1.0-snapshot-linux
+   unzip MarkNote-0.1.0-linux.zip
+   cd MarkNote-0.1.0-linux
    ```
 3. Run the application:
    - **Linux/macOS:** `./MarkNote.sh`

build

@@ -1,7 +1,7 @@
 #!/bin/bash
 #---- project parameters
 project_name=MarkNote
-project_version=0.1.0-snapshot
+project_version=0.1.0
 main_class=Main
 JARS=
 JFX_VERSION=25
@@ -448,25 +448,11 @@ copy /Y "%SCRIPT_DIR%%APP_NAME%.bat" "%INSTALL_DIR%\"
 
 :: Create Desktop shortcut using PowerShell
 echo Creating Desktop shortcut...
-powershell -NoProfile -Command ^
-  "$ws = New-Object -ComObject WScript.Shell; ^
-   $sc = $ws.CreateShortcut([System.IO.Path]::Combine([Environment]::GetFolderPath('Desktop'), '%APP_NAME%.lnk')); ^
-   $sc.TargetPath = '%INSTALL_DIR%\%APP_NAME%.bat'; ^
-   $sc.WorkingDirectory = '%INSTALL_DIR%'; ^
-   $sc.IconLocation = '%INSTALL_DIR%\icons\marknote-128.png'; ^
-   $sc.Description = 'MarkNote - Markdown Note Editor'; ^
-   $sc.Save()"
+powershell -NoProfile -Command "$ws = New-Object -ComObject WScript.Shell; $sc = $ws.CreateShortcut([System.IO.Path]::Combine([Environment]::GetFolderPath('Desktop'), '%APP_NAME%.lnk')); $sc.TargetPath = '%INSTALL_DIR%\%APP_NAME%.bat'; $sc.WorkingDirectory = '%INSTALL_DIR%'; $sc.IconLocation = '%INSTALL_DIR%\icons\marknote-128.png'; $sc.Description = 'MarkNote - Markdown Note Editor'; $sc.Save()"
 
 :: Create Start Menu shortcut
 echo Creating Start Menu shortcut...
-powershell -NoProfile -Command ^
-  "$ws = New-Object -ComObject WScript.Shell; ^
-   $sc = $ws.CreateShortcut('%START_MENU%\%APP_NAME%.lnk'); ^
-   $sc.TargetPath = '%INSTALL_DIR%\%APP_NAME%.bat'; ^
-   $sc.WorkingDirectory = '%INSTALL_DIR%'; ^
-   $sc.IconLocation = '%INSTALL_DIR%\icons\marknote-128.png'; ^
-   $sc.Description = 'MarkNote - Markdown Note Editor'; ^
-   $sc.Save()"
+powershell -NoProfile -Command "$ws = New-Object -ComObject WScript.Shell; $sc = $ws.CreateShortcut('%START_MENU%\%APP_NAME%.lnk'); $sc.TargetPath = '%INSTALL_DIR%\%APP_NAME%.bat'; $sc.WorkingDirectory = '%INSTALL_DIR%'; $sc.IconLocation = '%INSTALL_DIR%\icons\marknote-128.png'; $sc.Description = 'MarkNote - Markdown Note Editor'; $sc.Save()"
 
 echo.
 echo =========================================

src/docs/user-guide-en.md

@@ -1,7 +1,7 @@
 ---
 title: "MarkNote User Guide"
 date: 2026-02-25
-version: "0.1.0-snapshot"
+version: "0.1.0"
 author: "Frédéric Delorme"
 description: "Official user guide for MarkNote, a lightweight Markdown editor built with JavaFX."
 summary: "Welcome to MarkNote, a lightweight and modern Markdown editor built with JavaFX. This guide will help you get started and make the most of MarkNote's features."
@@ -12,7 +12,7 @@ status: draft
 
 # MarkNote User Guide
 
-Version 0.1.0-snapshot
+Version 0.1.0
 
 Welcome to MarkNote, a lightweight and modern Markdown editor built with JavaFX. This guide will help you get started and make the most of MarkNote's features.
 
@@ -50,6 +50,8 @@ MarkNote is a cross-platform Markdown editor designed for writers, developers, a
 - **Syntax Highlighting** - Code blocks with automatic language detection and theme-coordinated coloring
 - **Code Block Copy Button** - One-click copy for code blocks in preview
 - **Markdown Tables** - Full GFM table support with styled rendering
+- **Task Lists** - GitHub-style checkboxes (`[ ]` / `[x]`) rendered in preview
+- **GitHub Alerts** - Styled blockquotes for `[!NOTE]`, `[!TIP]`, `[!IMPORTANT]`, `[!WARNING]`, `[!CAUTION]`
 - **PlantUML Diagrams** - Render PlantUML diagrams directly in the preview; switch between the **online PlantUML server** (default) or a **local `plantuml.jar`** configured in Options → Tools; local rendering is asynchronous (per-block background threads) and shows a ⚙ spinning gear icon in the status bar during generation
 - **Mermaid Diagrams** - Render Mermaid flowcharts, sequences, and more in the preview (theme auto-matches app theme)
 - **Math Equations** - LaTeX/MathML support via KaTeX (`$...$` inline, `$$...$$` block)
@@ -62,6 +64,7 @@ MarkNote is a cross-platform Markdown editor designed for writers, developers, a
 - **Network Diagram** - Interactive force-directed graph of document links and shared tags, with tooltips and current document highlighting
 - **Status Bar** - Document info, statistics, and indexing progress at the bottom of the window
 - **Multi-document Tabs** - Work on multiple files simultaneously, with drag-to-reorder tabs
+- **Panel Detachment** - Detach side panels to independent tabs, and restore them back to their docked position
 - **Theme Support** - Built-in themes with custom theme creation and a full CSS theme editor
 - **Splash Screen** - Themed splash screen at startup (configurable)
 - **Image Preview** - Quick preview for images with zoom/pan and format/size info overlay
@@ -178,6 +181,26 @@ You can show or hide panels using the **View** menu or by clicking the **×** cl
 
 Each panel can also be closed by clicking the **×** button in its header. Re-opening it from the View menu restores it to the layout.
 
+### Detaching Panels to Tabs
+
+Left-side panels (**Project Explorer**, **Tag Cloud**, **Network Diagram**) and the **Preview** panel can be **detached** from their docked position and converted into independent tabs in the main editor area. This gives you more flexibility to organize your workspace.
+
+**To detach a panel:**
+
+1. Click the **⇱ detach button** (window icon) in the panel's header bar
+2. The panel disappears from its docked position and opens as a new tab in the editor tab bar
+3. The View menu checkbox for that panel is automatically unchecked
+
+**To restore a detached panel:**
+
+1. Click the **⇲ restore button** (dock icon) in the tab's header, OR
+2. Right-click on the tab and select **Restore to Panel**, OR
+3. Re-enable the panel from the **View** menu (this will close the tab and restore the panel to its original position)
+
+![Panel Detach](illustrations/panel-detach.svg)
+
+> **Tip:** Detaching panels is useful when you want to maximize the editor area while still keeping certain panels accessible as tabs.
+
 ---
 
 ## Working with Documents
@@ -585,9 +608,33 @@ The Network Diagram uses a **force-directed layout** algorithm to arrange your d
 - **Dashed edges** connect documents to the tags they share
 - **Current document** is highlighted with an **orange border** and cream-colored fill
 - **Isolated nodes** (no connections) are automatically hidden from the diagram
+- **Document groups** — disconnected clusters of documents are circled with pastel-colored halos for easy identification
 
 The physics simulation runs until the layout stabilizes (~60 frames below velocity threshold), then the view **automatically zooms to fit** all nodes with a 40px margin.
 
+### Document Groups
+
+When your project contains multiple independent clusters of documents (no links or shared tags between them), each cluster is displayed inside a **pastel-colored circle**. This helps you visualize which documents form isolated groups.
+
+- **Click a group circle** — Zoom to fit the group in view
+- **Double-click a group circle** — Name the group; a dialog prompts for a name which is then displayed as a label and persisted in the index
+
+### Detaching the Diagram
+
+You can detach the Network Diagram into its own tab for a larger view:
+
+1. Click the **Detach** button (↗) in the panel header
+2. The diagram opens in a new tab alongside your documents
+3. When you close the tab, the diagram returns to the side panel (configurable in Options)
+
+### Automatic Label Hiding
+
+To keep the diagram readable at high zoom-out levels, document labels are automatically hidden when:
+- Zoom level is below 50% **and** there are more than 20 documents
+- Zoom level is below 30% **and** there are more than 10 documents
+
+This prevents visual clutter and improves performance with large projects.
+
 ### Navigation & Interaction
 
 | Action | Description |
@@ -717,10 +764,16 @@ MarkNote supports standard Markdown syntax plus extensions:
 
 > Blockquotes
 
+> [!NOTE]
+> GitHub-style alerts
+
 ---
 Horizontal rules
 ---
 
+- [ ] Unchecked task
+- [x] Completed task
+
 | Tables | Are | Supported |
 |--------|-----|-----------|
 | Data   | Goes| Here      |
@@ -756,6 +809,56 @@ Custom themes are detected via a **"Based on:" comment** in the CSS header, with
 
 Every code block in the preview displays a **"Copy" button** on hover (top-right corner). Clicking it copies the code to the clipboard, and the button briefly shows **"✓ Copied"** with a green background for 1.5 seconds.
 
+### Task Lists (Checkboxes)
+
+MarkNote supports GitHub-style task lists (checkboxes) in the preview:
+
+```markdown
+- [ ] This is an unchecked task
+- [x] This is a completed task
+- [X] Uppercase X also works
+```
+
+In the preview, these render as:
+- ☐ This is an unchecked task
+- ☑ This is a completed task
+- ☑ Uppercase X also works
+
+> **Note:** Checkboxes in the preview are read-only (disabled). To change the state, edit the Markdown source directly.
+
+### GitHub Alerts
+
+MarkNote supports GitHub-style alerts (also known as admonitions) for highlighting important information in blockquotes:
+
+```markdown
+> [!NOTE]
+> Useful information that users should know.
+
+> [!TIP]
+> Helpful advice for doing things better or more easily.
+
+> [!IMPORTANT]
+> Key information users need to know.
+
+> [!WARNING]
+> Urgent info that needs immediate user attention.
+
+> [!CAUTION]
+> Advises about risks or negative outcomes.
+```
+
+These render as styled boxes with colored borders and icons:
+
+| Alert Type | Color | Use Case |
+|------------|-------|----------|
+| **Note** | Blue | General information |
+| **Tip** | Green | Helpful hints and best practices |
+| **Important** | Purple | Critical information |
+| **Warning** | Yellow | Potential issues or caveats |
+| **Caution** | Red | Dangerous actions or irreversible operations |
+
+> **Tip:** GitHub Alerts work great for documentation, tutorials, and user guides where you need to draw attention to specific information.
+
 ### PlantUML Diagrams
 
 Embed PlantUML diagrams directly in your Markdown using fenced code blocks:
@@ -949,6 +1052,7 @@ Access settings via **Help → Options...** or by pressing the shortcut shown in
 | **Show Welcome page on startup** | Display the Welcome tab when starting |
 | **Show splash screen on startup** | Display the splash screen when starting (enabled by default) |
 | **Front matter expanded by default** | Whether the Front Matter panel is expanded when opening documents (default: true) |
+| **Reattach diagram panel when tab closes** | When enabled, the Network Diagram returns to the side panel after closing its detached tab (default: true) |
 | **Language** | Choose your preferred interface language (`system` follows OS locale) |
 
 > **Note:** Changing the language **saves the configuration immediately** and **restarts the application**.