From d51f8f54bace427ecd31c160c4b76e77334c37cc Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 16 Mar 2026 00:03:31 +0100
Subject: [PATCH 01/14] =?UTF-8?q?verificato=20limite=20architetturale,=20a?=
 =?UTF-8?q?nche=20con=20svg,=20se=20scrivo=20nel=20canvas=20nel=20document?=
 =?UTF-8?q?o=20si=20attiva=20la=20modalit=C3=A0=20drawing=20e=20non=20vien?=
 =?UTF-8?q?e=20piu=20preso=20l'handwriting.=20Ormai=20le=20strade=20da=20p?=
 =?UTF-8?q?rovare=20su=20questo=20sono=20poche.=20Si=20potrebbe=20mettere?=
 =?UTF-8?q?=20uno=20switch,=20ovvero=20se=20io=20voglio=20handwriting,=20i?=
 =?UTF-8?q?=20riquadri=20non=20si=20vedono=20ma=20se=20ci=20clicco=20poi?=
 =?UTF-8?q?=20si=20apre=20la=20nuova=20scheda,=20altrimenti=20se=20non=20m?=
 =?UTF-8?q?i=20interessa=20posso=20avere=20la=20preview=20direttamente=20n?=
 =?UTF-8?q?el=20documento.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .claude/settings.local.json                   |    3 +-
 CLAUDE.md                                     |  269 +++--
 .../Projects/handwriting-to-markdown/main.js  |   16 +
 .../handwriting-to-markdown/manifest.json     |    9 +
 .../Projects/handwriting-to-markdown/styles.css |  408 +++++++
 HandTranscriptMd/cloudDeploy.sh               |    8 +-
 HandTranscriptMd/deploy.sh                    |    6 +-
 HandTranscriptMd/src/drawing-canvas.ts        |   55 +-
 HandTranscriptMd/src/editor-view.ts           |  675 +++++++++++
 HandTranscriptMd/src/embed.ts                 | 1001 ++++++++++-------
 HandTranscriptMd/src/main.ts                  |   20 +-
 HandTranscriptMd/styles.css                   |  214 ++++
 12 files changed, 2140 insertions(+), 544 deletions(-)
 create mode 100644 HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js
 create mode 100644 HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json
 create mode 100644 HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css
 create mode 100644 HandTranscriptMd/src/editor-view.ts

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 56e3762..7246c59 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -6,7 +6,8 @@
       "WebFetch(domain:groups.google.com)",
       "WebFetch(domain:css-tricks.com)",
       "WebFetch(domain:chromium.googlesource.com)",
-      "WebFetch(domain:github.com)"
+      "WebFetch(domain:github.com)",
+      "WebFetch(domain:developer.chrome.com)"
     ]
   }
 }
diff --git a/CLAUDE.md b/CLAUDE.md
index c05c540..f7e05e4 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -40,92 +40,126 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 
 ---
 
-## Stato attuale — Fase 2 COMPLETATA, Fase 3 IN CORSO (fix Android handwriting)
+## Stato attuale — Fase 3 COMPLETATA (editor in tab separata)
 
 ### File del plugin (`HandTranscriptMd/src/`)
 
 | File | Cosa fa |
 |------|---------|
-| `main.ts` | Entry point: registra embed, comando "Insert handwriting block", ribbon icon, settings |
+| `main.ts` | Entry point: registra embed, editor view, comando, ribbon, settings, `previewCallbacks` per sync inline↔tab |
 | `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini (campo password) |
-| `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio |
+| `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio, `allowFingerScroll()` |
 | `svg-utils.ts` | Conversione tratti ↔ SVG (dati riedit in `<desc>` JSON), righe e sfondo inclusi nell'SVG |
-| `embed.ts` | Code block processor, toolbar, bottone Converti collegato (OCR → markdown → sostituisce code block), `svgToBase64Png()` helper |
+| `embed.ts` | Code block processor → preview SVG inline con 3 bottoni (X, converti, comprimi) in alto a sinistra + bottone portale in document.body; preview non cliccabile |
+| `editor-view.ts` | `DrawingEditorView extends ItemView` — editor canvas in tab Obsidian dedicata, toolbar completa, scroll, auto-save |
 | `recognizer.ts` | `IRecognizer` interface + `GeminiRecognizer`: invia PNG base64 a Gemini API, restituisce testo |
 | `md-parser.ts` | `parseMarkdown()`: post-processa testo OCR riga per riga applicando sintassi markdown |
 
+### Architettura attuale (Fase 3+)
+
+**Due formati supportati:**
+- **NUOVO (default)**: `![[_handwriting/hw_xxx.svg]]` — SVG visibile nativamente anche senza plugin
+- **LEGACY**: `` ```handwriting {"id":..., "svg":...}``` `` — vecchio formato, mantenuto per compatibilità
+
+**Preview inline — Nuovo formato wiki:**
+- Obsidian renderizza `![[svg]]` come `<span class="internal-embed image-embed">[img][/img]</span>`
+- **MutationObserver su `document.body`** intercetta gli span con `src*="_handwriting/"` non appena appaiono nel DOM (funziona sia in reading view che in live preview dove il post-processor non viene chiamato)
+- `tryDecorate()` con flag `data-hwm-decorated="1"` per evitare doppia elaborazione; ritenta dopo 150ms se la classe `image-embed` non è ancora presente (caricamento asincrono)
+- **ZERO modifica al DOM dello span** — nessuna classe aggiunta, nessun figlio inserito, nessuno stile inline. Lo span resta identico a qualsiasi altra immagine Obsidian
+- **Pannello portale** (`hwm_portal-panel`) in `document.body` con 4 bottoni: ✏️ (apre tab editor), 📄 (converti OCR), ↕️ (comprimi/espandi), ✕ (elimina). Posizionato via RAF + `getBoundingClientRect()` + `position: fixed`
+- **Refresh immagine**: `previewCallbacks.set(embedId, ...)` aggiorna `img.src` con cache-bust `?t=timestamp` dopo ogni salvataggio dalla tab editor (Obsidian non aggiorna automaticamente `![[svg]]` in live preview quando il file cambia)
+- **NO data-URI**: il src dell'img resta sempre l'URL vault (`http://localhost/_capacitor_file_/...`) — un data-URI verrebbe interpretato da Android come drawing surface
+
+**Preview inline — Formato legacy:**
+- Mostra l'SVG come CSS `background-image` su un `<div>` (no `<img>`)
+- 3 bottoni inline (`<div role="button">`, non `<button>`) dentro il container del code block
+- Bottone portale singolo (`hwm_portal-btn`, cerchio matita) in `document.body` per aprire la tab editor
+
+**Editor in tab separata (`editor-view.ts`):**
+- `DrawingEditorView extends ItemView` di Obsidian
+- Canvas in un DOM completamente separato da CodeMirror → **nessun conflitto handwriting Android**
+- Top bar: bottone ← a sinistra (chiude tab), toolbar completa a destra
+- Scroll container: `overflow-y: auto` per canvas più grandi dello schermo
+- Auto-scroll: callback `onResize` su DrawingCanvas → scrolla verso il basso durante auto-expand
+- Finger scroll: `allowFingerScroll(scrollContainer)` — `touch-action` resta `none` (penna non scrolla), dito scrolla il container via `setPointerCapture` + JS manuale
+- Resize handle visibile ma `pointer-events: none` (no drag manuale, solo auto-expand)
+- Auto-save debounced 2s + callback `plugin.refreshPreview()` aggiorna la preview inline
+- Converti/Elimina funzionano anche dalla tab (manipolano il .md via `sourcePath`)
+
 ### Funzionalità implementate
 
-- **Canvas inline** nel markdown via code block `handwriting`
-- **Disegno diretto** — click sul blocco = disegno immediato (no click "Edit")
+- **Preview SVG inline** nel markdown via code block `handwriting` (immagine statica, no canvas)
+- **Editor in tab dedicata** — click sulla preview apre una tab Obsidian separata
 - **Curve smooth** — Bézier quadratiche con tecnica midpoint
 - **Gomma parziale** — cancella solo i punti toccati, taglia i tratti in segmenti
 - **Undo/Redo** — basato su history di stati (funziona sia per disegno che per gomma)
-- **Auto-expand** — il canvas si espande con animazione smooth (requestAnimationFrame, ease-out cubico)
-- **Resize manuale** — handle trascinabile in basso
+- **Auto-expand** — il canvas si espande con animazione smooth + auto-scroll nel container
 - **Clear → reset** alla dimensione di default con animazione
 - **Righe orizzontali** — foglio a righe (32px), sia nel canvas che nell'SVG
 - **Temi sfondo** — chiaro/scuro/custom con color picker nelle impostazioni
 - **Remapping colori automatico** — i tratti si adattano al cambio tema (nero↔bianco, blu↔azzurro, ecc.)
 - **Toolbar completa** — penna, gomma, 4 colori, undo, redo, clear, converti, salva, elimina (X)
-- **Elimina riquadro** — bottone X rimuove code block dal .md e cancella SVG
-- **Auto-save** — salvataggio debounced 2s dopo l'ultima modifica
+- **Elimina riquadro** — da inline (3 bottoni) o da tab editor
+- **Auto-save** — salvataggio debounced 2s + refresh preview inline
 - **SVG standard** — file `.svg` nella cartella `_handwriting/`, visibili da qualsiasi dispositivo
 - **Palette colori adattiva** — colori scuri su sfondo chiaro, colori chiari su sfondo scuro
-- **Resize handle tematizzato** — si adatta al tema scuro
-- **OCR via Gemini** — bottone Converti: SVG → PNG base64 → Gemini 3.1 Flash Lite → testo → `md-parser` → sostituisce code block nel `.md`
-- **Archiviazione SVG** — dopo la conversione, il file SVG viene spostato in `_handwriting/_converted/AAAA-MM-GG_HH-MM-SS.svg`
+- **OCR via Gemini** — SVG → PNG base64 → Gemini 3.1 Flash Lite → `md-parser` → sostituisce code block
+- **Archiviazione SVG** — dopo la conversione, SVG spostato in `_handwriting/_converted/AAAA-MM-GG_HH-MM-SS.svg`
 - **Settings OCR** — chiave API Gemini (campo password) + lingue OCR configurabili (default: `it, en`)
-- **Supporto Android** — comportamenti differenziati tra Windows e Android:
-  - Toolbar compatta su mobile (▼/▲ toggle), espansa su Windows
-  - Icone SVG inline (mappa `ICONS` in `embed.ts`) — identiche su Windows e Android, nessuna dipendenza da `setIcon`/Lucide bundled — **RISOLTO**
-  - Disegno solo con penna (`pointerType === 'pen'`), dito ignorato su mobile per il disegno
-  - Focus fix multi-livello: `inputmode="none"` + listener `beforeinput` in capture phase + blur `.cm-editor` + `canvas.focus()` su pointerdown penna
-  - Cerchi colori: bottoni colore sono `<div>` (non `<button>`) + dimensioni forzate via `style.setProperty(..., 'important')` — **RISOLTO**
+- **Supporto Android** — penna disegna, dito scrolla, nessun conflitto handwriting
+- **Comprimi/Espandi** — preview inline si può compattare all'altezza di default (freccia con rotazione 180°)
+- **Bottone portale** — pulsante cerchio con icona matita in `document.body` (fuori da cm-content), si posiziona sopra il riquadro via RAF + getBoundingClientRect, si nasconde automaticamente se la tab editor è già aperta o il riquadro esce dal viewport
+- **Preview non tappabile** — click handler rimosso; l'unico modo per aprire l'editor è il bottone portale
 
 ### Embedding nel markdown
 
+**Nuovo formato (default):**
+```markdown
+![[_handwriting/hw_abc123.svg]]
+```
+Il file SVG è visibile come immagine anche senza il plugin. I tratti sono salvati come JSON in `<desc class="hwm-strokes">` dentro l'SVG.
+
+**Legacy (backward compat):**
 ````markdown
 ```handwriting
 {"id":"hw_abc123","svg":"_handwriting/hw_abc123.svg"}
 ```
 ````
 
-### Deploy
-
-```bash
-# Sorgente plugin
-cd C:/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd
+### Deploy (comandi copia-incolla per PowerShell)
 
+```powershell
 # Build + deploy al vault locale (solo PC)
-node esbuild.config.mjs production && bash deploy.sh
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; bash deploy.sh
 
 # Build + deploy su Google Drive (per testare su tablet Android)
-node esbuild.config.mjs production && bash cloudDeploy.sh
-
-# Vault locale di test
-C:/Projects/CLIENTI/IOTTI/IOTTI_APP/_docs/handwriting-to-markdown/
-# Plugin installato in .obsidian/plugins/handwriting-to-markdown/
-
-# Vault Google Drive (sincronizzato con tablet)
-C:/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; bash cloudDeploy.sh
 ```
 
+### Percorsi vault
+
+- **Vault locale di test:** `C:\Projects\CLIENTI\IOTTI\IOTTI_APP\_docs\handwriting-to-markdown\`
+  - Plugin in `.obsidian\plugins\handwriting-to-markdown\`
+- **Vault Google Drive (tablet):** `C:\Users\gabri\Il mio Drive (gabrielecusato@gmail.com)\Projects\handwriting-to-markdown\`
+
 ### Come sviluppare
 
-```bash
+```powershell
 # Dev mode (watch)
-npm run dev
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; npm run dev
+
 # Dopo ogni modifica per testare su PC:
-bash deploy.sh
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; bash deploy.sh
+
 # Dopo ogni modifica per testare su tablet Android:
-bash cloudDeploy.sh
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; bash cloudDeploy.sh
+
 # In Obsidian: Ctrl+P → "Reload app without saving"
 ```
 
 ---
 
-## Note architetturali — Fase 2 (sessione corrente)
+## Note architetturali
 
 ### Come funziona il flusso OCR
 
@@ -151,7 +185,29 @@ bash cloudDeploy.sh
 
 ---
 
-## Prossimi passi — Da fare nella prossima sessione
+## Prossimi passi
+
+### BUG handwriting — Test da fare in ordine
+
+**Test A — `pointer-events: none` sullo span** (1 riga, da provare per primo):
+- In `tryDecorate()`, aggiungere `span.style.pointerEvents = 'none'` dopo `span.dataset.hwmDecorated = '1'`
+- I bottoni portale (in `document.body`) continuano a funzionare
+- Verifica: con SVG riempito nel documento, l'handwriting funziona?
+- Se sì → risolto. Se no → Chrome usa DOM walk separato, pointer-events non basta
+
+**Test B — Limitare max-height dell'immagine** (se A non funziona):
+- Ipotesi: SVG vuoto (300px) non rompe, SVG riempito (500px+) rompe → è la HEIGHT del CE=false che causa il problema
+- Test empirico: aggiungere in CSS `.internal-embed[src*="_handwriting/"] img { max-height: 300px; object-fit: contain; }` e verificare se con un SVG alto (dopo auto-expand) l'handwriting funziona
+- Se sì → limitare max-height è la soluzione
+- Se no → l'altezza non è la causa, passare a C
+
+**Test C — Placeholder in Live Preview** (se B non funziona):
+- In live preview (span dentro `.cm-editor`), mostrare solo un piccolo badge "📝 disegno" di 40px di altezza invece dell'SVG pieno
+- L'SVG pieno appare solo in Reading View (span dentro `.markdown-reading-view`)
+- Come distinguerle: `span.closest('.cm-editor')` vs `span.closest('.markdown-reading-view')`
+- Questo riduce il CE=false a un'area minima → handwriting dovrebbe funzionare nelle righe di testo circostanti
+
+### Altri task aperti
 
 1. **Migliorare il riconoscimento dei caratteri speciali markdown** — `src/recognizer.ts` + `src/md-parser.ts`:
    - Il testo normale viene riconosciuto correttamente da Gemini
@@ -159,64 +215,95 @@ bash cloudDeploy.sh
    - Migliorare il prompt con few-shot examples espliciti per i simboli (es. "Se vedi `# Titolo` → scrivi `# Titolo`")
    - Valutare se `md-parser.ts` può coprire i casi che il prompt non gestisce
 
-2. **Fix handwriting Android — IN CORSO (15+ tentativi)**:
+2. **Auto-expand — animazione scattosa** — **BUG APERTO** (parzialmente risolto):
+   - Fix precedente: guard `if (this.animFrameId !== null) return` in `checkAutoExpand()` → loop up/down risolto
+   - Problema residuo: espansione scattosa invece che fluida
+   - File: `src/drawing-canvas.ts` → `animateHeight()` e `checkAutoExpand()`
 
-   ### Problema fondamentale
-   Il canvas vive dentro `cm-content[contenteditable="true"]` (l'editor CodeMirror di Obsidian). Android/Chrome attiva lo stylus handwriting-to-text a **livello nativo** quando il pennino tocca dentro/vicino (40dp) a un elemento `contenteditable`. Questo avviene **prima** di qualsiasi evento JavaScript.
+3. **Toolbar unificata Windows/Android** — **DA FARE**:
+   - Attualmente la toolbar su Windows è sempre espansa, su Android è compatta con toggle ▼/▲
+   - Obiettivo: unico codice toolbar condiviso, compatta di default su entrambe le piattaforme
+   - File coinvolti: `src/editor-view.ts` + `styles.css`
 
-   ### Perché è sempre "tutto o niente"
-   `cm-content` è un UNICO elemento `contenteditable="true"`. Qualsiasi modifica all'editabilità di un figlio contamina lo stato dell'intero editor.
+### Problemi risolti
 
-   ### Tentativi falliti e scoperte chiave
-
-   | # | Approccio | Risultato | Perché non funziona |
-   |---|-----------|-----------|---------------------|
-   | 1-8 | `touch-action: none` su `.cm-editor`/`.cm-scroller`/`.cm-content` | Handwriting resta attivo | `touch-action` controlla scroll/zoom, NON l'handwriting |
-   | 9 | `contenteditable="false"` + `handwriting="false"` sul **container** (figlio di cm-content) | Handwriting morto ovunque | Chrome tratta l'intero cm-content come blocco; un figlio false rompe tutto |
-   | 10 | CSS `-webkit-user-modify: read-only` sul container | Handwriting morto ovunque | Stesso problema: figlio dentro cm-content |
-   | 11 | `blur()` + `focus(canvas)` su `pointerenter pen` | Handwriting resta attivo | Rilevamento basato su **prossimità** al contenteditable, non sul focus |
-   | 12 | `touchstart` + `preventDefault()` + `touch-action: none` | Handwriting resta attivo | Chrome decide prima degli eventi JS |
-   | 13 | **Lock Button** — `contenteditable="false"` sul **container** (sbagliato) | Handwriting non si blocca | Il container è dentro cm-content → sbagliato mirare al container |
-   | 14 | **Iframe** — canvas dentro `<iframe>` con `document.write` | Iframe creato (confermato da debug), handwriting resta attivo | Android's handwriting detection lavora a livello WebView (un'unica View Android), vede attraverso gli iframe |
-   | 15 | **Overlay fullscreen** — pannello `position:fixed` su `document.body` + `cm-content.contenteditable="false"` mentre overlay è aperto | **PARZIALMENTE TESTATO** — handwriting ancora attivo su vecchi documenti, non testato su documento nuovo | Da verificare: testare su documento nuovo appena creato; possibile che vecchi documenti abbiano stato residuo |
-
-   ### Scoperta critica: `inputmode="none"` contamina il WebView
-   Bug confermato ([Flutter #176913](https://github.com/flutter/flutter/issues/176913)): dare focus a un elemento con `inputmode="none"` disabilita l'handwriting per l'INTERO WebView, effetto persiste fino al riavvio. **MAI usare `inputmode="none"` nel plugin.**
-
-   ### Anche il plugin Ink ha lo stesso problema
-   [Issue #156](https://github.com/daledesilva/obsidian_ink/issues/156): "Writing just puts a dot and doesn't follow pen on Android" — stessa causa, nessuna soluzione trovata.
-
-   ### Approccio attuale (tentativo 15) — DA TESTARE MEGLIO
-   Overlay quasi-fullscreen che si apre al tap sul riquadro:
-   - `document.body.appendChild(overlay)` → fuori da cm-content
-   - Quando overlay apre → `cm-content.setAttribute('contenteditable', 'false')`
-   - Quando overlay chiude → ripristina `contenteditable="true"`
-   - Backdrop semitrasparente con `backdrop-filter: blur(6px)`
-   - Pannello con margini 12px, bordi arrotondati, ombra
-   - Bottone ← in alto a sinistra, tool a destra
-   - File: `src/embed.ts` → `showMobilePreview()`, `openFullscreenEditor()`
-
-   ### Miglioramenti overlay ancora da fare
-   - **Bordi più spessi/visibili** sul pannello (attualmente `box-shadow` sottile)
-   - **Scroll interno** quando l'altezza del canvas supera quella dello schermo
-   - **Verificare handwriting** su documento NUOVO (non su documenti già aperti che potrebbero avere stato residuo)
-   - **Verificare causa** se handwriting ancora attivo: potrebbe essere che `cm-content.contenteditable="false"` non è sufficiente da solo, oppure che il timing è sbagliato
-
-3. **Auto-expand — animazione scattosa** — **BUG APERTO** (parzialmente risolto):
-   - Fix precedente: aggiunto guard `if (this.animFrameId !== null) return` in `checkAutoExpand()` per evitare restart multipli → il loop up/down è risolto
-   - Problema residuo: l'espansione avviene in modo scattoso invece di animarsi fluidamente
-   - Effetto collaterale: quando il canvas si espande oltre il viewport, la pagina scrolla bruscamente verso il basso
-   - File coinvolto: `src/drawing-canvas.ts` → `animateHeight()` e `checkAutoExpand()`
-
-4. **Toolbar unificata Windows/Android** — **DA FARE**:
-   - Attualmente la toolbar su Windows è sempre espansa e quella su Android è compatta con toggle ▼/▲
-   - Obiettivo: unico codice toolbar condiviso — compatta di default su entrambe le piattaforme
-   - File coinvolti: `src/embed.ts` + `styles.css`
-
-### Problemi risolti in passato
+- **Handwriting Android (disegno)** ✅ — risolto con editor in tab separata (`ItemView`), canvas fuori da `cm-content`
+- **Pen scroll** ✅ — penna non scrolla più, solo dito (JS manuale via `setPointerCapture`)
 - **Toolbar — tema scuro** ✅
 - **Spazio vuoto sezione colori in toolbar compatta** ✅
 - **Trashcan non cancella visualmente** ✅
+- **Bottoni inline coprivano `</>` di Obsidian** ✅ — spostati a `left: 6px`
+- **Ordine bottoni inline** ✅ — invertito: X, Converti, Freccia (da sinistra)
+- **Placeholder text** ✅ — aggiornato a "Usa il bottone matita in alto a destra per disegnare"
+- **Bottone portale non cerchio perfetto** ✅ — risolto con `width/height/min-width/min-height: 36px !important`, `padding: 0 !important`, `overflow: hidden`
+- **Icona bottone portale non visibile** ✅ — SVG con `stroke="currentColor"` non diventava bianco; risolto con `.hwm_portal-btn svg { stroke: #ffffff !important }`
+- **Bottone portale non si nasconde con editor aperto** ✅ — aggiunto check `workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING).some(...)` nel RAF loop
+- **Bottone portale `position: absolute` invece di `fixed`** ✅ — `getBoundingClientRect()` restituisce coordinate viewport, non serviva aggiungere `scrollY/scrollX`
+
+### BUG APERTO — Handwriting disabilitato nel documento quando il riquadro è presente
+
+**Sintomo**: quando nel documento è presente un riquadro handwriting con un disegno (SVG non vuoto), la stylus handwriting-to-text di Android smette di funzionare nell'intero editor. Cancellare il riquadro ripristina l'handwriting. Il problema persiste tra riavvii di Obsidian.
+
+**Progressione delle scoperte**:
+
+**Fase 1 — Formato code block** (tentativi 16-26):
+- `contenteditable="false"` su wrapper CM6 → rimosso → non risolve
+- `touch-action: none` → rimosso → non risolve
+- `background-image` SVG → rimossa → non risolve
+- `<canvas>` nel DOM → rimosso → non risolve
+- Canvas in `document.body` (fuori da CM6) toccato con stylus → **rompe handwriting** — conclusione: è il canvas element quando toccato dalla stylus, non la sua posizione nel DOM
+- **Causa root fase 1**: Android WebView tratta qualsiasi `<canvas>` toccato dalla stylus come "drawing surface" e disabilita handwriting-to-text a livello di sessione WebView
+
+**Fase 2 — Passaggio a formato wiki `![[svg]]`** (sessione corrente):
+
+L'obiettivo era eliminare il `<canvas>` dal documento e mostrare solo l'`<img>` nativa di Obsidian.
+
+Problema riscontrato: l'SVG vuoto (300px di altezza) NON rompe l'handwriting. L'SVG con un disegno (altezza variabile dopo auto-expand) SÌ lo rompe — anche dopo riavvio Obsidian, anche senza mai aprire la tab editor.
+
+Cambiamenti implementati durante la fase 2:
+- Passaggio da code block a `![[svg]]` come formato principale
+- `insertHandwritingBlock()` crea il file SVG PRIMA di inserire il wikilink (altrimenti Obsidian mostra "could not be found")
+- MutationObserver su `document.body` per intercettare gli span (il post-processor non funziona per i widget CM6 immagine in live preview)
+- Fix data-URI: `img.src = data:image/svg+xml,...` → cambiato in cache-bust URL (`?t=timestamp`) perché la data-URI veniva interpretata da Android come drawing surface
+- Rimosso `addWikiOverlay` (aggiungeva `hwm_inline-buttons` come figlio dello span): la struttura dello span è ora identica a un'immagine normale
+- Pannello portale (`hwm_portal-panel`) in `document.body` con tutti e 4 i bottoni
+
+**Stato attuale**: dopo aver rimosso TUTTA la nostra decorazione dallo span (nessun figlio aggiunto, nessuna classe, nessuno stile), il problema persiste. Lo span è identico a quello di un'immagine normale Obsidian, ma l'handwriting si rompe ugualmente con l'SVG riempito.
+
+**Ipotesi residue** (non ancora testate):
+
+| # | Ipotesi | Razionale |
+|---|---------|-----------|
+| A | `pointer-events: none` sullo span | Se Chrome usa lo stesso hit-test dei pointer events per la proximity detection, potrebbe ignorare lo span e trovare il `cm-content[ce=true]` sottostante. Incerto: Chrome potrebbe fare un DOM walk separato per `contenteditable` indipendente da pointer-events |
+| B | Altezza SVG: l'empty SVG è 300px, il filled SVG è più alto (auto-expand). Un CE=false più alto copre più area → più probabile interferire con la proximity detection (40dp dal bordo). Fix: limitare max-height dell'immagine nel documento | La proximity detection è 40dp verticale — un'immagine da 500px di altezza occupa molto più "territorio" di una da 300px |
+| C | Placeholder in Live Preview | Mostrare solo un piccolo badge in live preview (dove si scrive), SVG pieno solo in Reading View. Lo span CE=false sarebbe piccolo → non interferisce |
+
+**Fonti**:
+- [Chromium Stylus Handwriting README](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/components/stylus_handwriting/README.md)
+- [ProseMirror Issue #565](https://github.com/ProseMirror/prosemirror/issues/565)
+- Plugin Ink ha lo stesso problema irrisolto ([Issue #156](https://github.com/daledesilva/obsidian_ink/issues/156))
+
+**Scoperte chiave consolidate**:
+- `inputmode="none"` contamina l'intero WebView — MAI usare
+- Empty SVG (300px) NON rompe handwriting; SVG con disegno (altezza > 300px per auto-expand) SÌ
+- data-URI come `img.src` rompe handwriting → usare sempre URL vault + cache-bust
+- Il problema è persistente tra sessioni (riavvio Obsidian) — non è corruzione di sessione temporanea
+- Rimuovere completamente la nostra decorazione (nessun figlio nello span) non risolve — la causa è nell'SVG stesso o nella sua altezza
+
+**Tentativi falliti (completo)**:
+
+| # | Approccio | Risultato |
+|---|-----------|-----------|
+| 16 | Rimuovere `beforeinput` listener globale | Non risolve |
+| 17 | `<button>` → `<div role="button">` in cm-content | Non risolve |
+| 18 | `<img>` → CSS `background-image` | Non risolve |
+| 19 | Rimuovere `contenteditable="false"` dai wrapper CM6 + `pointer-events: none` | Non risolve |
+| 20-23 | DevTools: rimuovere CE=false, touch-action, background-image, canvas dal DOM | Non risolve |
+| 24 | Editor in Modal invece di tab | Non praticabile (stylus non disegna nel modal) |
+| 25 | Bottone portale in `document.body` | Non risolve (canvas nella tab corrompe sessione) |
+| 26 | Test console: canvas fake in `document.body` toccato con stylus | Conferma: canvas + stylus = handwriting rotto |
+| 27 | Passaggio a `![[svg]]` con MutationObserver | Non risolve |
+| 28 | Rimozione totale decorazione dallo span (nessun figlio aggiunto) | Non risolve |
 
 ---
 
diff --git a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js
new file mode 100644
index 0000000..0d6d1fc
--- /dev/null
+++ b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js	
@@ -0,0 +1,16 @@
+/*
+THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
+if you want to view the source, please visit the github repository of this plugin
+*/
+
+var N=Object.defineProperty;var Pt=Object.getOwnPropertyDescriptor;var Et=Object.getOwnPropertyNames;var Mt=Object.prototype.hasOwnProperty;var _t=(i,t)=>{for(var e in t)N(i,e,{get:t[e],enumerable:!0})},Dt=(i,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Et(t))!Mt.call(i,s)&&s!==e&&N(i,s,{get:()=>t[s],enumerable:!(n=Pt(t,s))||n.enumerable});return i};var Ht=i=>Dt(N({},"__esModule",{value:!0}),i);var qt={};_t(qt,{default:()=>F});module.exports=Ht(qt);var ft=require("obsidian");var x=require("obsidian"),Tt={light:"#ffffff",dark:"#1e1e1e",custom:"#ffffff"},Bt={light:"#e0e0e0",dark:"#3a3a3a",custom:"#cccccc"};function O(i){return i.bgMode==="custom"?i.bgCustomColor:Tt[i.bgMode]}function rt(i){return i.bgMode==="custom"?It(i.bgCustomColor):Bt[i.bgMode]}function It(i){let t=parseInt(i.slice(1,3),16),e=parseInt(i.slice(3,5),16),n=parseInt(i.slice(5,7),16),o=t*.299+e*.587+n*.114>128?-30:30,r=a=>Math.max(0,Math.min(255,a+o));return`#${r(t).toString(16).padStart(2,"0")}${r(e).toString(16).padStart(2,"0")}${r(n).toString(16).padStart(2,"0")}`}var it=["#000000","#1e40af","#dc2626","#16a34a"],ot=["#ffffff","#60a5fa","#f87171","#4ade80"];function at(i,t){let e=i.toLowerCase();if(t==="dark"){let n=it.indexOf(e);if(n>=0)return ot[n]}else if(t==="light"){let n=ot.indexOf(e);if(n>=0)return it[n]}return i}var ct={svgFolder:"_handwriting",canvasWidth:800,canvasHeight:300,bgMode:"light",bgCustomColor:"#ffffff",ocrLanguages:["it","en"],geminiApiKey:"",debugMode:!1},B=class extends x.PluginSettingTab{constructor(t,e){super(t,e),this.plugin=e}display(){let{containerEl:t}=this;t.empty(),t.createEl("h2",{text:"Handwriting to Markdown"}),new x.Setting(t).setName("Cartella SVG").setDesc("Cartella nel vault dove vengono salvati i file SVG dei disegni").addText(e=>e.setPlaceholder("_handwriting").setValue(this.plugin.settings.svgFolder).onChange(async n=>{this.plugin.settings.svgFolder=n||"_handwriting",await this.plugin.saveSettings()})),new x.Setting(t).setName("Larghezza canvas").setDesc("Risoluzione orizzontale del canvas in pixel").addText(e=>e.setValue(String(this.plugin.settings.canvasWidth)).onChange(async n=>{let s=parseInt(n);!isNaN(s)&&s>100&&(this.plugin.settings.canvasWidth=s,await this.plugin.saveSettings())})),new x.Setting(t).setName("Altezza canvas").setDesc("Risoluzione verticale del canvas in pixel").addText(e=>e.setValue(String(this.plugin.settings.canvasHeight)).onChange(async n=>{let s=parseInt(n);!isNaN(s)&&s>50&&(this.plugin.settings.canvasHeight=s,await this.plugin.saveSettings())})),new x.Setting(t).setName("Sfondo canvas").setDesc("Colore di sfondo del riquadro di disegno").addDropdown(e=>e.addOption("light","Chiaro (bianco)").addOption("dark","Scuro (grigio scuro)").addOption("custom","Personalizzato").setValue(this.plugin.settings.bgMode).onChange(async n=>{this.plugin.settings.bgMode=n,await this.plugin.saveSettings(),this.display()})),this.plugin.settings.bgMode==="custom"&&new x.Setting(t).setName("Colore sfondo personalizzato").setDesc("Scegli il colore hex dello sfondo").addColorPicker(e=>e.setValue(this.plugin.settings.bgCustomColor).onChange(async n=>{this.plugin.settings.bgCustomColor=n,await this.plugin.saveSettings()})),new x.Setting(t).setName("Chiave API Gemini").setDesc("Necessaria per il riconoscimento OCR della scrittura a mano. Ottienila da Google AI Studio (aistudio.google.com).").addText(e=>{e.setPlaceholder("AIza...").setValue(this.plugin.settings.geminiApiKey).onChange(async n=>{this.plugin.settings.geminiApiKey=n.trim(),await this.plugin.saveSettings()}),e.inputEl.type="password"}),new x.Setting(t).setName("Lingue OCR").setDesc('Codici lingua BCP-47 separati da virgola (es. "it, en, fr"). Usati dal riconoscitore di scrittura su Android.').addText(e=>e.setValue(this.plugin.settings.ocrLanguages.join(", ")).setPlaceholder("it, en").onChange(async n=>{let s=n.split(",").map(o=>o.trim()).filter(o=>o.length>0);this.plugin.settings.ocrLanguages=s.length>0?s:["it","en"],await this.plugin.saveSettings()})),new x.Setting(t).setName("Modalit\xE0 debug").setDesc("Mostra notifiche in tempo reale per eventi IME/touch (utile per diagnosticare problemi su Android).").addToggle(e=>e.setValue(this.plugin.settings.debugMode).onChange(async n=>{this.plugin.settings.debugMode=n,await this.plugin.saveSettings()}))}};var h=require("obsidian");function I(i){return i.map(t=>({points:t.points.map(e=>({...e})),color:t.color,width:t.width}))}var A=class{constructor(t,e,n,s,o=!1,r=null){this.strokes=[];this.currentStroke=null;this.mode="pen";this.color="#000000";this.lineWidth=2;this.isDrawing=!1;this.changeCb=null;this.mobileMode=!1;this.history=[];this.historyIdx=-1;this.eraserChanged=!1;this.resizeCb=null;this.LINE_SPACING=32;this.bgColor="#ffffff";this.lineColor="#e0e0e0";this.EXPAND_MARGIN=40;this.EXPAND_AMOUNT=150;this.animFrameId=null;this.boundBeforeInput=null;this.container=null;this.debugFn=null;this.canvas=document.createElement("canvas"),this.canvas.width=e,this.canvas.height=n,this.defaultHeight=s,this.mobileMode=o,this.container=t,this.debugFn=r,o&&(this.boundBeforeInput=a=>{var d;this.isDrawing&&((d=this.debugFn)==null||d.call(this,"\u{1F6AB} beforeinput bloccato"),a.preventDefault())},document.addEventListener("beforeinput",this.boundBeforeInput,!0)),this.canvas.classList.add("hwm_canvas"),this.canvas.style.setProperty("touch-action","none","important"),t.appendChild(this.canvas),this.ctx=this.canvas.getContext("2d"),this.clearBackground(),this.pushHistory(),this.boundDown=this.onPointerDown.bind(this),this.boundMove=this.onPointerMove.bind(this),this.boundUp=this.onPointerUp.bind(this),this.canvas.addEventListener("pointerdown",this.boundDown),this.canvas.addEventListener("pointermove",this.boundMove),this.canvas.addEventListener("pointerup",this.boundUp),this.canvas.addEventListener("pointerleave",this.boundUp)}onChange(t){this.changeCb=t}onResize(t){this.resizeCb=t}allowFingerScroll(){this.canvas.style.setProperty("touch-action","pan-y","important")}setMode(t){this.mode=t}getMode(){return this.mode}setColor(t){this.color=t}setLineWidth(t){this.lineWidth=t}getStrokes(){return[...this.strokes]}getWidth(){return this.canvas.width}getHeight(){return this.canvas.height}setBackground(t,e){this.bgColor=t,this.lineColor=e,this.redraw()}getBgColor(){return this.bgColor}getLineColor(){return this.lineColor}loadStrokes(t){this.strokes=I(t),this.history=[],this.historyIdx=-1,this.pushHistory(),this.redraw()}undo(){var t;return this.historyIdx<=0?!1:(this.historyIdx--,this.strokes=I(this.history[this.historyIdx]),this.redraw(),(t=this.changeCb)==null||t.call(this),!0)}redo(){var t;return this.historyIdx>=this.history.length-1?!1:(this.historyIdx++,this.strokes=I(this.history[this.historyIdx]),this.redraw(),(t=this.changeCb)==null||t.call(this),!0)}clear(){var t;this.strokes=[],this.pushHistory(),this.redraw(),this.animateHeight(this.defaultHeight),(t=this.changeCb)==null||t.call(this)}resizeHeight(t){t<100||(this.canvas.height=t,this.redraw())}destroy(){this.animFrameId!==null&&cancelAnimationFrame(this.animFrameId),this.canvas.removeEventListener("pointerdown",this.boundDown),this.canvas.removeEventListener("pointermove",this.boundMove),this.canvas.removeEventListener("pointerup",this.boundUp),this.canvas.removeEventListener("pointerleave",this.boundUp),this.boundBeforeInput&&(document.removeEventListener("beforeinput",this.boundBeforeInput,!0),this.boundBeforeInput=null)}pushHistory(){this.history=this.history.slice(0,this.historyIdx+1),this.history.push(I(this.strokes)),this.historyIdx=this.history.length-1}onPointerDown(t){var s,o;let e=t.pointerType||"pen";if(this.mobileMode&&e==="touch"){(s=this.debugFn)==null||s.call(this,"\u{1F446} Dito sul canvas"),t.stopPropagation();return}t.preventDefault(),this.mobileMode&&((o=this.debugFn)==null||o.call(this,`\u{1F58A} pointerdown tipo="${t.pointerType}" \u2192 "${e}"`),t.stopPropagation()),this.canvas.setPointerCapture(t.pointerId),this.isDrawing=!0;let n=this.eventToPoint(t);this.mode==="pen"?this.currentStroke={points:[n],color:this.color,width:this.lineWidth}:(this.eraserChanged=!1,this.eraseAt(n))}onPointerMove(t){if(this.mobileMode&&(t.pointerType||"pen")==="touch"||!this.isDrawing)return;t.preventDefault();let e=this.eventToPoint(t);this.mode==="pen"&&this.currentStroke?(this.currentStroke.points.push(e),this.drawSegment(this.currentStroke),this.checkAutoExpand(e)):this.mode==="eraser"&&this.eraseAt(e)}onPointerUp(t){var e,n;this.mobileMode&&(t.pointerType||"pen")==="touch"||this.isDrawing&&(this.isDrawing=!1,this.mode==="pen"&&this.currentStroke?(this.currentStroke.points.length>=2&&(this.strokes.push(this.currentStroke),this.pushHistory(),(e=this.changeCb)==null||e.call(this)),this.currentStroke=null):this.mode==="eraser"&&this.eraserChanged&&(this.pushHistory(),(n=this.changeCb)==null||n.call(this)))}checkAutoExpand(t){if(this.animFrameId===null&&t.y>this.canvas.height-this.EXPAND_MARGIN){let e=this.canvas.height+this.EXPAND_AMOUNT;this.animateHeight(e)}}animateHeight(t){let e=this.canvas.height;if(e===t)return;this.animFrameId!==null&&(cancelAnimationFrame(this.animFrameId),this.animFrameId=null);let n=300,s=performance.now(),o=r=>{var v;let a=r-s,d=Math.min(a/n,1),c=1-Math.pow(1-d,3),g=Math.round(e+(t-e)*c);this.canvas.height=g,this.redraw(),this.currentStroke&&this.drawFullStroke(this.currentStroke),(v=this.resizeCb)==null||v.call(this),d<1?this.animFrameId=requestAnimationFrame(o):this.animFrameId=null};this.animFrameId=requestAnimationFrame(o)}eventToPoint(t){let e=this.canvas.getBoundingClientRect(),n=this.canvas.width/e.width,s=this.canvas.height/e.height;return{x:(t.clientX-e.left)*n,y:(t.clientY-e.top)*s,pressure:t.pressure>0?t.pressure:.5}}eraseAt(t){let s=!1,o=[];for(let r of this.strokes){let a=[],d=!1;for(let c of r.points){let g=c.x-t.x,v=c.y-t.y;g*g+v*v<225?(a.length>=2&&o.push({points:[...a],color:r.color,width:r.width}),a=[],d=!0):a.push(c)}d?(s=!0,a.length>=2&&o.push({points:[...a],color:r.color,width:r.width})):o.push(r)}s&&(this.strokes=o,this.eraserChanged=!0,this.redraw())}clearBackground(){let t=this.canvas.width,e=this.canvas.height;this.ctx.fillStyle=this.bgColor,this.ctx.fillRect(0,0,t,e),this.ctx.strokeStyle=this.lineColor,this.ctx.lineWidth=.5;for(let n=this.LINE_SPACING;n<e;n+=this.LINE_SPACING)this.ctx.beginPath(),this.ctx.moveTo(0,n),this.ctx.lineTo(t,n),this.ctx.stroke()}redraw(){this.clearBackground();for(let t of this.strokes)this.drawFullStroke(t)}drawFullStroke(t){let e=t.points;if(e.length<2)return;let n=this.ctx;if(n.strokeStyle=t.color,n.lineWidth=t.width,n.lineCap="round",n.lineJoin="round",n.beginPath(),n.moveTo(e[0].x,e[0].y),e.length===2)n.lineTo(e[1].x,e[1].y);else{for(let o=1;o<e.length-1;o++){let r=e[o],a=e[o+1],d=(r.x+a.x)/2,c=(r.y+a.y)/2;n.quadraticCurveTo(r.x,r.y,d,c)}let s=e[e.length-1];n.lineTo(s.x,s.y)}n.stroke()}drawSegment(t){let e=t.points;if(e.length<2)return;let n=this.ctx;if(n.strokeStyle=t.color,n.lineWidth=t.width,n.lineCap="round",n.lineJoin="round",n.beginPath(),e.length===2)n.moveTo(e[0].x,e[0].y),n.lineTo(e[1].x,e[1].y);else{let s=e.length-2,o=s>0?e[s-1]:e[0],r=e[s],a=e[s+1],d=(o.x+r.x)/2,c=(o.y+r.y)/2,g=(r.x+a.x)/2,v=(r.y+a.y)/2;n.moveTo(d,c),n.quadraticCurveTo(r.x,r.y,g,v)}n.stroke()}};function lt(){let i=Date.now().toString(36),t=Math.random().toString(36).substring(2,6);return`hw_${i}_${t}`}function At(i){if(i.length<2)return"";let t=[];if(t.push(`M ${C(i[0].x)},${C(i[0].y)}`),i.length===2)t.push(`L ${C(i[1].x)},${C(i[1].y)}`);else{for(let n=1;n<i.length-1;n++){let s=i[n],o=i[n+1],r=(s.x+o.x)/2,a=(s.y+o.y)/2;t.push(`Q ${C(s.x)},${C(s.y)} ${C(r)},${C(a)}`)}let e=i[i.length-1];t.push(`L ${C(e.x)},${C(e.y)}`)}return t.join(" ")}function C(i){return Math.round(i*10)/10+""}function $(i,t,e,n="#ffffff",s="#e0e0e0"){let o=[];for(let c of i){let g=At(c.points);g&&o.push(`  <path d="${g}" stroke="${c.color}" fill="none" stroke-width="${c.width}" stroke-linecap="round" stroke-linejoin="round"/>`)}let r=JSON.stringify(i),a=32,d=[];for(let c=a;c<e;c+=a)d.push(`  <line x1="0" y1="${c}" x2="${t}" y2="${c}" stroke="${s}" stroke-width="0.5"/>`);return[`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${t} ${e}" width="${t}" height="${e}">`,`  <rect width="100%" height="100%" fill="${n}"/>`,...d,`  <desc class="hwm-strokes">${$t(r)}</desc>`,...o,"</svg>"].join(`
+`)}function dt(i){var t;try{let e=i.match(/<desc class="hwm-strokes">([\s\S]*?)<\/desc>/);if(!e)return[];let n=Ft((t=e[1])!=null?t:""),s=JSON.parse(n);return Array.isArray(s)?s.filter(o=>Array.isArray(o.points)&&typeof o.color=="string"&&typeof o.width=="number"):[]}catch(e){return[]}}function $t(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function Ft(i){return i.replace(/&quot;/g,'"').replace(/&gt;/g,">").replace(/&lt;/g,"<").replace(/&amp;/g,"&")}var Rt="gemini-3.1-flash-lite-preview",zt=`https://generativelanguage.googleapis.com/v1beta/models/${Rt}:generateContent`,G=class{constructor(t,e){this.apiKey=t;this.languages=e}async recognize(t){var a,d,c,g,v,S,f,u;let n=`Sei un sistema OCR specializzato in scrittura a mano. Analizza l'immagine e trascrivi esattamente il testo scritto. Le lingue attese sono: ${this.languages.join(", ")}. Preserva i simboli markdown scritti dall'utente (es. #, ##, ###, -, *, >, \`\`\`, **testo**, *testo*, ==testo==, ~~testo~~, - [ ], - [x]). Restituisci SOLO il testo trascritto, senza alcuna spiegazione aggiuntiva.`,s=await fetch(`${zt}?key=${this.apiKey}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({contents:[{parts:[{inline_data:{mime_type:"image/png",data:t}},{text:n}]}]})});if(!s.ok){let w=await s.json().catch(()=>({}));throw new Error(`Gemini ${s.status}: ${(d=(a=w==null?void 0:w.error)==null?void 0:a.message)!=null?d:s.statusText}`)}let o=await s.json();return((u=(f=(S=(v=(g=(c=o==null?void 0:o.candidates)==null?void 0:c[0])==null?void 0:g.content)==null?void 0:v.parts)==null?void 0:S[0])==null?void 0:f.text)!=null?u:"").trim()}};function j(i,t){if(!i.trim())throw new Error("Chiave API Gemini non configurata \u2014 aprire le impostazioni del plugin");return new G(i,t)}function V(i){return i.split(`
+`).map(Nt).join(`
+`)}function Nt(i){let t=i.trim();return t?/^-{3,}$/.test(t)?"---":/^#{1,3}\s+/.test(t)?t:/^-\s*\[x\]\s*/i.test(t)?`- [x] ${t.replace(/^-\s*\[x\]\s*/i,"")}`:/^-\s*\[\s*\]\s*/.test(t)?`- [ ] ${t.replace(/^-\s*\[\s*\]\s*/,"")}`:/^[-*]\s+/.test(t)?`- ${t.replace(/^[-*]\s+/,"")}`:(/^\d+\.\s+/.test(t)||/^>\s*/.test(t)||t.startsWith("```"),t):""}var W={pencil:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>',eraser:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',"rotate-ccw":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',"rotate-cw":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>',trash:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>',"file-text":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',save:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>',x:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',"chevron-down":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',"chevron-up":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',"arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>'},Ot=60,q=!1;function gt(i){i.registerMarkdownCodeBlockProcessor("handwriting",async(t,e,n)=>{await Gt(t,e,n,i)})}async function Gt(i,t,e,n){let s;try{s=JSON.parse(i.trim())}catch(c){t.createEl("p",{text:"Handwriting: JSON non valido",cls:"hwm_error"});return}let o=t.createDiv({cls:"hwm_container"}),{strokes:r,canvasHeight:a,svgContent:d}=await Wt(s.svg,n);jt(o,r,a,d,s,e,n)}function jt(i,t,e,n,s,o,r){i.empty();let a=r.settings.bgMode==="dark",d=O(r.settings);i.style.backgroundColor=d;let c=i.createDiv({cls:"hwm_inline-buttons"});a&&c.classList.add("hwm_inline-buttons--dark");let g=b(c,"chevron-up","Comprimi");g.classList.add("hwm_collapse-btn");let v=b(c,"file-text","Converti in Markdown");v.classList.add("hwm_convert-btn");let S=b(c,"x","Elimina riquadro");S.classList.add("hwm_delete-btn");let f=i.createDiv({cls:"hwm_inline-preview"}),u=!0,w=n,L=t,E=e;ht(f,w),g.addEventListener("click",k=>{k.stopPropagation(),u=!u,u?(f.classList.remove("hwm_collapsed"),f.style.maxHeight="",g.classList.remove("hwm_rotated"),g.title="Comprimi"):(f.classList.add("hwm_collapsed"),f.style.maxHeight=Ot+"px",g.classList.add("hwm_rotated"),g.title="Espandi")}),f.addEventListener("click",()=>{q||Ut(L,E,s,o,r,(k,_,P)=>{L=k,E=_,w=P,ht(f,P)})}),v.addEventListener("click",async k=>{if(k.stopPropagation(),!w||L.length===0){new h.Notice("Nessun tratto da convertire");return}await Vt(w,s,o,r)}),S.addEventListener("click",async k=>{k.stopPropagation(),confirm("Eliminare questo riquadro handwriting e il file SVG associato?")&&await ut(o,s,r)})}function ht(i,t){if(i.empty(),t){let e=i.createEl("img",{cls:"hwm_preview-img"});e.src="data:image/svg+xml,"+encodeURIComponent(t),e.setAttribute("draggable","false")}else i.createDiv({cls:"hwm_placeholder",text:"Tocca per disegnare"})}async function Vt(i,t,e,n){try{new h.Notice("Riconoscimento in corso\u2026");let r=new DOMParser().parseFromString(i,"image/svg+xml").documentElement,a=await wt(r),c=await j(n.settings.geminiApiKey,n.settings.ocrLanguages).recognize(a);if(!c.trim()){new h.Notice("Nessun testo riconosciuto");return}let g=V(c);await mt(t,n),await vt(e,t,g,n),new h.Notice("Conversione completata!")}catch(s){let o=s instanceof Error?s.message:String(s);new h.Notice("Errore OCR: "+o)}}function Ut(i,t,e,n,s,o){q=!0;let r=h.Platform.isMobile,a=s.settings.bgMode==="dark",d=O(s.settings),c=rt(s.settings),g=document.body.createDiv({cls:"hwm_overlay-backdrop"}),v=g.createDiv({cls:"hwm_overlay-panel"});v.style.backgroundColor=d,a&&v.classList.add("hwm_overlay-panel--dark");let S=v.createDiv({cls:"hwm_overlay-topbar"});a&&S.classList.add("hwm_overlay-topbar--dark");let f=b(S,"arrow-left","Chiudi");f.classList.add("hwm_back-btn");let u=S.createDiv({cls:"hwm_toolbar hwm_overlay-toolbar-inner"});a&&u.classList.add("hwm_toolbar--dark");let w=null;r&&(u.classList.add("hwm_toolbar--compact"),w=b(u,"chevron-down","Mostra tutti i controlli"),w.classList.add("hwm_toggle-btn"),w.addEventListener("click",()=>{var l,y;u.classList.contains("hwm_toolbar--compact")?(u.classList.remove("hwm_toolbar--compact"),D(!1),w.innerHTML=(l=W["chevron-up"])!=null?l:"",w.title="Comprimi toolbar"):(u.classList.add("hwm_toolbar--compact"),D(!0),w.innerHTML=(y=W["chevron-down"])!=null?y:"",w.title="Mostra tutti i controlli")}));let L=b(u,"pencil","Penna");L.classList.add("hwm_active","hwm_pen-btn");let E=b(u,"eraser","Gomma");E.classList.add("hwm_eraser-btn"),u.createDiv({cls:"hwm_separator"});let k=a?["#ffffff","#60a5fa","#f87171","#4ade80"]:["#000000","#1e40af","#dc2626","#16a34a"],_=u.createDiv({cls:"hwm_colors"}),P=[];for(let m of k){let l=_.createEl("div",{cls:"hwm_color-btn",attr:{title:m,role:"button",tabindex:"0"}});l.style.backgroundColor=m,l.style.setProperty("width","22px","important"),l.style.setProperty("height","22px","important"),l.style.setProperty("min-width","22px","important"),l.style.setProperty("min-height","22px","important"),l.style.setProperty("border-radius","50%","important"),l.style.setProperty("box-sizing","border-box","important"),l.style.setProperty("flex-shrink","0","important"),m===k[0]&&l.classList.add("hwm_active"),P.push(l)}u.createDiv({cls:"hwm_separator"});let D=m=>{P.forEach(l=>{let y=l.classList.contains("hwm_active"),M=!m||y?"22px":"0";l.style.setProperty("min-width",M,"important"),l.style.setProperty("min-height",M,"important")})};r&&D(!0);let K=b(u,"rotate-ccw","Annulla");K.classList.add("hwm_undo-btn");let J=b(u,"rotate-cw","Ripristina");J.classList.add("hwm_redo-btn");let Y=b(u,"trash","Cancella tutto");Y.classList.add("hwm_clear-btn"),u.createDiv({cls:"hwm_separator"});let Z=b(u,"file-text","Converti in Markdown");Z.classList.add("hwm_convert-btn");let Q=b(u,"save","Salva");Q.classList.add("hwm_save-btn");let tt=b(u,"x","Elimina riquadro");tt.classList.add("hwm_delete-btn");let H=v.createDiv({cls:"hwm_overlay-scroll"}),bt=H.createDiv({cls:"hwm_canvas-wrap"}),{canvasWidth:kt,canvasHeight:et}=s.settings,yt=t!=null?t:et,xt=s.settings.debugMode?m=>new h.Notice(m,3e3):null,p=new A(bt,kt,yt,et,r,xt);if(p.setBackground(d,c),p.setColor(k[0]),r&&p.allowFingerScroll(),i.length>0){let m=i.map(l=>({...l,color:at(l.color,s.settings.bgMode)}));p.loadStrokes(m)}let T=H.createDiv({cls:"hwm_resize-handle hwm_resize-handle--disabled"});T.createEl("span",{text:"\u22EF"}),a&&(T.style.background="#2a2a2a",T.style.borderTopColor="#444",T.style.color="#888"),p.onResize(()=>{H.scrollTop=H.scrollHeight}),L.addEventListener("click",()=>{p.setMode("pen"),L.classList.add("hwm_active"),E.classList.remove("hwm_active")}),E.addEventListener("click",()=>{p.setMode("eraser"),E.classList.add("hwm_active"),L.classList.remove("hwm_active")});for(let m=0;m<P.length;m++){let l=P[m],y=k[m];l.addEventListener("click",()=>{P.forEach(M=>M.classList.remove("hwm_active")),l.classList.add("hwm_active"),p.setColor(y),r&&D(u.classList.contains("hwm_toolbar--compact"))})}K.addEventListener("click",()=>p.undo()),J.addEventListener("click",()=>p.redo()),Y.addEventListener("click",()=>p.clear()),Z.addEventListener("click",async()=>{let m=p.getStrokes();if(m.length===0){new h.Notice("Nessun tratto da convertire");return}try{new h.Notice("Riconoscimento in corso\u2026");let l=$(m,p.getWidth(),p.getHeight(),p.getBgColor(),p.getLineColor()),Ct=new DOMParser().parseFromString(l,"image/svg+xml").documentElement,St=await wt(Ct),st=await j(s.settings.geminiApiKey,s.settings.ocrLanguages).recognize(St);if(!st.trim()){new h.Notice("Nessun testo riconosciuto");return}let Lt=V(st);await mt(e,s),z(),await vt(n,e,Lt,s),new h.Notice("Conversione completata!")}catch(l){let y=l instanceof Error?l.message:String(l);new h.Notice("Errore OCR: "+y)}}),Q.addEventListener("click",async()=>{await U(p,e,s),new h.Notice("Salvato")}),tt.addEventListener("click",async()=>{confirm("Eliminare questo riquadro handwriting e il file SVG associato?")&&(z(),await ut(n,e,s))});let R=null;p.onChange(()=>{R&&clearTimeout(R),R=setTimeout(async()=>{await U(p,e,s)},2e3)});function z(){p.destroy(),g.remove(),document.body.classList.remove("hwm_no-scroll"),q=!1}async function nt(){await U(p,e,s);let m=p.getStrokes(),l=p.getWidth(),y=p.getHeight(),M=$(m,l,y,p.getBgColor(),p.getLineColor());z(),o(m,y,M)}f.addEventListener("click",()=>nt()),g.addEventListener("click",m=>{m.target===g&&nt()}),document.body.classList.add("hwm_no-scroll")}async function Wt(i,t){var n;let e=t.app.vault.getAbstractFileByPath(i);if(e instanceof h.TFile){let s=await t.app.vault.read(e),o=dt(s),r=s.match(/viewBox="0 0 \d+ (\d+)"/),a=r?parseInt((n=r[1])!=null?n:"0"):null;return{strokes:o,canvasHeight:a,svgContent:s}}return{strokes:[],canvasHeight:null,svgContent:null}}async function U(i,t,e){let n=i.getStrokes(),s=i.getWidth(),o=i.getHeight(),r=$(n,s,o,i.getBgColor(),i.getLineColor()),a=t.svg.substring(0,t.svg.lastIndexOf("/"));a&&(e.app.vault.getAbstractFileByPath(a)||await e.app.vault.createFolder(a));let d=e.app.vault.getAbstractFileByPath(t.svg);d instanceof h.TFile?await e.app.vault.modify(d,r):await e.app.vault.create(t.svg,r)}async function ut(i,t,e){let n=e.app.vault.getAbstractFileByPath(i.sourcePath);if(!(n instanceof h.TFile)){new h.Notice("File markdown non trovato");return}let s=await e.app.vault.read(n),o=new RegExp('\\n?```handwriting\\n.*?"id"\\s*:\\s*"'+pt(t.id)+'".*?\\n```\\n?',"s"),r=s.replace(o,`
+`);r!==s&&await e.app.vault.modify(n,r);let a=e.app.vault.getAbstractFileByPath(t.svg);a instanceof h.TFile&&await e.app.vault.delete(a),new h.Notice("Riquadro eliminato")}function pt(i){return i.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}async function mt(i,t){let e=t.app.vault.getAbstractFileByPath(i.svg);if(!(e instanceof h.TFile))return;let n=new Date,s=a=>String(a).padStart(2,"0"),o=`${n.getFullYear()}-${s(n.getMonth()+1)}-${s(n.getDate())}_${s(n.getHours())}-${s(n.getMinutes())}-${s(n.getSeconds())}`,r=`${t.settings.svgFolder}/_converted`;t.app.vault.getAbstractFileByPath(r)||await t.app.vault.createFolder(r),await t.app.vault.rename(e,`${r}/${o}.svg`)}async function vt(i,t,e,n){let s=n.app.vault.getAbstractFileByPath(i.sourcePath);if(!(s instanceof h.TFile)){new h.Notice("File markdown non trovato");return}let o=await n.app.vault.read(s),r=new RegExp('\\n?```handwriting\\n.*?"id"\\s*:\\s*"'+pt(t.id)+'".*?\\n```\\n?',"s"),a=o.replace(r,`
+`+e+`
+`);a!==o&&await n.app.vault.modify(s,a)}function X(i){let t=i.app.workspace.getActiveViewOfType(h.MarkdownView);if(!t){new h.Notice("Apri un file markdown prima");return}let e=t.editor,n=lt(),s=`${i.settings.svgFolder}/${n}.svg`,o=`
+\`\`\`handwriting
+{"id":"${n}","svg":"${s}"}
+\`\`\`
+`;e.replaceSelection(o)}function b(i,t,e){var s;let n=i.createEl("button",{cls:"hwm_btn",attr:{title:e}});return n.innerHTML=(s=W[t])!=null?s:"",n}function wt(i){return new Promise((t,e)=>{let n=document.createElement("canvas"),s=n.getContext("2d"),o=new Image,r=new Blob([new XMLSerializer().serializeToString(i)],{type:"image/svg+xml"}),a=URL.createObjectURL(r);o.onload=()=>{n.width=o.width,n.height=o.height,s.drawImage(o,0,0),URL.revokeObjectURL(a),t(n.toDataURL("image/png").split(",")[1])},o.onerror=()=>{URL.revokeObjectURL(a),e(new Error("Errore conversione SVG \u2192 PNG"))},o.src=a})}var F=class extends ft.Plugin{async onload(){await this.loadSettings(),gt(this),this.addCommand({id:"insert-handwriting",name:"Insert handwriting block",editorCallback:()=>{X(this)}}),this.addRibbonIcon("pencil","Insert handwriting",()=>{X(this)}),this.addSettingTab(new B(this.app,this))}async loadSettings(){this.settings=Object.assign({},ct,await this.loadData())}async saveSettings(){await this.saveData(this.settings)}};
diff --git a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json
new file mode 100644
index 0000000..6164881
--- /dev/null
+++ b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json	
@@ -0,0 +1,9 @@
+{
+	"id": "handwriting-to-markdown",
+	"name": "Handwriting to Markdown",
+	"version": "0.1.0",
+	"minAppVersion": "0.15.0",
+	"description": "Inline handwriting canvas with conversion to structured markdown",
+	"author": "GabrieleC",
+	"isDesktopOnly": false
+}
diff --git a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css
new file mode 100644
index 0000000..3d33374
--- /dev/null
+++ b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css	
@@ -0,0 +1,408 @@
+/* ========================================
+   Handwriting to Markdown — Plugin Styles
+   Prefisso hwm_ per evitare conflitti
+   ======================================== */
+
+/* --- Container principale dell'embed --- */
+.hwm_container {
+	position: relative;
+	border: 1px solid var(--background-modifier-border);
+	border-radius: 8px;
+	overflow: hidden;
+	margin: 8px 0;
+	/* Sfondo SEMPRE bianco (anche in dark mode) */
+	background: #ffffff;
+}
+
+/* --- Toolbar in alto a destra --- */
+.hwm_toolbar {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	z-index: 10;
+	display: flex;
+	align-items: center;
+	gap: 0; /* spacing gestito via margin-right sui bottoni, così i bottoni
+	           nascosti (max-width:0, margin:0) non creano spazi vuoti */
+	padding: 3px 6px;
+	border-radius: 6px;
+	background: rgba(240, 240, 240, 0.95);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+	opacity: 1;
+	transition: opacity 0.2s;
+}
+
+/* --- Bottoni toolbar --- */
+.hwm_btn {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	width: 28px;
+	height: 28px;
+	padding: 0;
+	border: none;
+	border-radius: 4px;
+	background: transparent;
+	color: #666;
+	cursor: pointer;
+	line-height: 0;
+	/* Spacing via margin-right invece di gap, così i bottoni nascosti
+	   (margin:0) non lasciano spazi vuoti nella toolbar compatta */
+	margin-right: 4px;
+	/* Animazione espansione/compressione toolbar */
+	overflow: hidden;
+	max-width: 40px;
+	flex-shrink: 0;
+	transition: max-width 0.2s ease, opacity 0.2s ease,
+	            margin 0.2s ease, padding 0.2s ease;
+}
+/* Icone SVG inline dentro i bottoni */
+.hwm_btn svg {
+	width: 16px;
+	height: 16px;
+	flex-shrink: 0;
+}
+.hwm_btn:hover {
+	background: #e0e0e0;
+	color: #333;
+}
+/* Bottone attivo (tool selezionato) */
+.hwm_btn.hwm_active {
+	background: var(--interactive-accent);
+	color: #ffffff;
+}
+
+/* --- Bottone salva (evidenziato) --- */
+.hwm_save-btn {
+	margin-left: 4px;
+}
+.hwm_save-btn:hover {
+	background: var(--interactive-accent);
+	color: #ffffff;
+}
+
+/* --- Bottone elimina (X rossa su hover) --- */
+.hwm_delete-btn:hover {
+	background: #dc2626;
+	color: #ffffff;
+}
+
+/* --- Selettore colori --- */
+.hwm_colors {
+	display: flex;
+	align-items: center;
+	gap: 3px;
+	margin: 0 4px;
+}
+/* I pallini colore sono <div> (non <button>) per evitare che Obsidian Mobile
+   sovrascriva width/height con i propri stili globali sui button.
+   Le dimensioni (22px) sono forzate anche via style.setProperty inline in embed.ts */
+.hwm_color-btn {
+	display: inline-block;
+	width: 22px;
+	height: 22px;
+	border: 2px solid transparent;
+	border-radius: 50%;
+	cursor: pointer;
+	box-sizing: border-box;
+}
+.hwm_color-btn.hwm_active {
+	border-color: var(--interactive-accent);
+}
+.hwm_color-btn:hover {
+	border-color: #999;
+}
+
+/* --- Area canvas (editing) --- */
+.hwm_canvas-wrap {
+	width: 100%;
+	overflow: hidden;
+}
+.hwm_canvas {
+	display: block;
+	width: 100%;
+	cursor: crosshair;
+	/* Sfondo bianco fisso */
+	background: #ffffff;
+}
+
+/* --- Handle di resize in basso --- */
+.hwm_resize-handle {
+	width: 100%;
+	height: 12px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	cursor: ns-resize;
+	background: #f5f5f5;
+	border-top: 1px solid #e0e0e0;
+	color: #999;
+	font-size: 14px;
+	user-select: none;
+	touch-action: none;
+}
+.hwm_resize-handle:hover {
+	background: #ebebeb;
+	color: #666;
+}
+
+/* --- Placeholder per canvas vuoto --- */
+.hwm_placeholder {
+	text-align: center;
+	color: #999;
+	padding: 40px 0;
+	font-style: italic;
+}
+
+/* --- Errore parsing --- */
+.hwm_error {
+	color: var(--text-error);
+	padding: 8px;
+	font-style: italic;
+}
+
+/* --- Separatore visivo nella toolbar --- */
+.hwm_separator {
+	width: 1px;
+	height: 20px;
+	background: #d0d0d0;
+	margin: 0 6px 0 2px; /* destra più ampia per bilanciare visivamente */
+	flex-shrink: 0;
+	overflow: hidden;
+	transition: max-width 0.2s ease, opacity 0.2s ease,
+	            margin 0.2s ease, padding 0.2s ease;
+}
+
+/* --- Pallini colore: transizione per animazione toolbar --- */
+.hwm_color-btn {
+	transition: max-width 0.2s ease, opacity 0.2s ease,
+	            margin 0.2s ease, padding 0.2s ease;
+}
+
+/* --- Toolbar compatta (mobile) ---
+   Bottoni nascosti: collassati a larghezza 0 con fade-out.
+   La transizione su .hwm_btn e .hwm_separator produce l'animazione
+   quando la classe viene aggiunta/rimossa via JS. */
+.hwm_toolbar--compact .hwm_pen-btn,
+.hwm_toolbar--compact .hwm_eraser-btn,
+.hwm_toolbar--compact .hwm_clear-btn,
+.hwm_toolbar--compact .hwm_save-btn,
+.hwm_toolbar--compact .hwm_color-btn:not(.hwm_active),
+.hwm_toolbar--compact .hwm_separator {
+	max-width: 0 !important;
+	opacity: 0 !important;
+	padding: 0 !important;
+	margin: 0 !important;
+	pointer-events: none;
+}
+/* Riduce il margine attorno al pallino colore rimasto e azzera il gap
+   tra i pallini (gli inattivi sono collassati a width:0 ma il gap persiste) */
+.hwm_toolbar--compact .hwm_colors {
+	margin: 0 2px;
+	gap: 0;
+}
+
+/* --- Tema scuro per la toolbar ---
+   Applicato via classe hwm_toolbar--dark quando bgMode === 'dark' */
+.hwm_toolbar--dark {
+	background: rgba(40, 40, 40, 0.97) !important;
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
+}
+.hwm_toolbar--dark .hwm_btn {
+	color: #bbb !important;
+}
+.hwm_toolbar--dark .hwm_btn:hover {
+	background: rgba(255, 255, 255, 0.12) !important;
+	color: #fff !important;
+}
+.hwm_toolbar--dark .hwm_btn.hwm_active {
+	background: var(--interactive-accent) !important;
+	color: #fff !important;
+}
+.hwm_toolbar--dark .hwm_separator {
+	background: #555 !important;
+}
+
+/* --- Mobile: bottoni grandi e visibili ---
+   Forza sfondo chiaro + colore scuro per le icone SVG,
+   indipendentemente dal tema di Obsidian Mobile */
+.hwm_mobile .hwm_toolbar {
+	gap: 0;
+	padding: 5px 8px;
+}
+.hwm_mobile .hwm_toolbar .hwm_btn {
+	width: 36px !important;
+	height: 36px !important;
+	margin-right: 6px !important; /* spacing via margin, non gap */
+	background: rgba(245, 245, 245, 0.98) !important;
+	border: 1px solid rgba(0, 0, 0, 0.18) !important;
+	border-radius: 7px !important;
+	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
+	color: #222 !important;
+}
+.hwm_mobile .hwm_toolbar .hwm_btn.hwm_active {
+	background: var(--interactive-accent) !important;
+	border-color: var(--interactive-accent) !important;
+	color: #ffffff !important;
+}
+
+/* --- Tema scuro su mobile: sovrascrive i bianchi !important del mobile --- */
+.hwm_mobile .hwm_toolbar--dark .hwm_btn {
+	background: rgba(55, 55, 55, 0.98) !important;
+	border-color: rgba(255, 255, 255, 0.15) !important;
+	color: #ddd !important;
+}
+.hwm_mobile .hwm_toolbar--dark .hwm_btn.hwm_active {
+	background: var(--interactive-accent) !important;
+	border-color: var(--interactive-accent) !important;
+	color: #fff !important;
+}
+
+/* ========================================
+   INLINE PREVIEW — Vista nel documento
+   ======================================== */
+
+/* --- Bottoni inline (comprimi, converti, elimina) --- */
+.hwm_inline-buttons {
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	z-index: 5;
+	display: flex;
+	gap: 4px;
+	padding: 3px;
+	border-radius: 6px;
+	background: rgba(240, 240, 240, 0.9);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+.hwm_inline-buttons--dark {
+	background: rgba(40, 40, 40, 0.95);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+.hwm_inline-buttons--dark .hwm_btn {
+	color: #bbb;
+}
+.hwm_inline-buttons--dark .hwm_btn:hover {
+	background: rgba(255, 255, 255, 0.12);
+	color: #fff;
+}
+
+/* --- Bottone comprimi: rotazione 180° quando compresso --- */
+.hwm_collapse-btn {
+	transition: transform 0.3s ease, max-width 0.2s ease,
+	            opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
+}
+.hwm_collapse-btn.hwm_rotated {
+	transform: rotate(180deg);
+}
+
+/* --- Preview SVG inline --- */
+.hwm_inline-preview {
+	width: 100%;
+	overflow: hidden;
+	cursor: pointer;
+	/* Transizione per l'espansione/compressione */
+	transition: max-height 0.3s ease;
+}
+.hwm_inline-preview.hwm_collapsed {
+	/* max-height impostato via JS */
+	overflow: hidden;
+}
+
+/* Immagine SVG che riempie la larghezza del container */
+.hwm_preview-img {
+	display: block;
+	width: 100%;
+	height: auto;
+	pointer-events: none; /* il click è gestito dal div padre */
+}
+
+/* ========================================
+   OVERLAY — Editor fullscreen
+   ======================================== */
+
+/* Blocca scroll sul body quando l'overlay è aperto */
+body.hwm_no-scroll {
+	overflow: hidden !important;
+}
+
+/* --- Backdrop: sfondo scuro + blur --- */
+.hwm_overlay-backdrop {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index: 9999;
+	background: rgba(0, 0, 0, 0.5);
+	backdrop-filter: blur(6px);
+	-webkit-backdrop-filter: blur(6px);
+	display: flex;
+	align-items: stretch;
+	justify-content: stretch;
+}
+
+/* --- Pannello editor con cornice spessa --- */
+.hwm_overlay-panel {
+	position: absolute;
+	top: 12px;
+	left: 12px;
+	right: 12px;
+	bottom: 12px;
+	border: 4px solid #444;
+	border-radius: 12px;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+.hwm_overlay-panel--dark {
+	border-color: rgba(255, 255, 255, 0.25);
+}
+
+/* --- Top bar (bottone ← + toolbar) --- */
+.hwm_overlay-topbar {
+	display: flex;
+	align-items: center;
+	padding: 6px 8px;
+	background: rgba(240, 240, 240, 0.95);
+	border-bottom: 1px solid #ddd;
+	flex-shrink: 0;
+	gap: 8px;
+}
+.hwm_overlay-topbar--dark {
+	background: rgba(40, 40, 40, 0.97);
+	border-bottom-color: #444;
+}
+
+/* --- Bottone ← (indietro) --- */
+.hwm_back-btn {
+	flex-shrink: 0;
+}
+
+/* --- Toolbar dentro l'overlay: posizione statica (non absolute) --- */
+.hwm_overlay-toolbar-inner {
+	position: static !important;
+	top: auto !important;
+	right: auto !important;
+	flex: 1;
+	box-shadow: none !important;
+	background: transparent !important;
+	padding: 0 !important;
+}
+
+/* --- Scroll container per il canvas nell'overlay --- */
+.hwm_overlay-scroll {
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* --- Resize handle disabilitato (visibile ma non interattivo) --- */
+.hwm_resize-handle--disabled {
+	pointer-events: none;
+	cursor: default;
+}
+.hwm_resize-handle--disabled:hover {
+	background: #f5f5f5; /* annulla l'effetto hover */
+}
diff --git a/HandTranscriptMd/cloudDeploy.sh b/HandTranscriptMd/cloudDeploy.sh
index 352bc2c..e450c52 100644
--- a/HandTranscriptMd/cloudDeploy.sh
+++ b/HandTranscriptMd/cloudDeploy.sh
@@ -2,11 +2,15 @@
 # Deploy plugin files to Google Drive vault (sync cloud)
 # Uso: bash cloudDeploy.sh
 
+# MSYS_NO_PATHCONV=1 impedisce a Git Bash di convertire i path C:/ in /c/
+# ed evita che mkdir crei una cartella "C:" relativa
+export MSYS_NO_PATHCONV=1
+
 VAULT_PLUGIN="C:/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown"
-SRC_DIR="$(dirname "$0")"
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 
 mkdir -p "$VAULT_PLUGIN"
-cp "$SRC_DIR/main.js" "$SRC_DIR/manifest.json" "$SRC_DIR/styles.css" "$VAULT_PLUGIN/"
+cp "$SCRIPT_DIR/main.js" "$SCRIPT_DIR/manifest.json" "$SCRIPT_DIR/styles.css" "$VAULT_PLUGIN/"
 
 echo "Deployed to $VAULT_PLUGIN"
 echo "  main.js     $(wc -c < "$VAULT_PLUGIN/main.js") bytes"
diff --git a/HandTranscriptMd/deploy.sh b/HandTranscriptMd/deploy.sh
index 5a2204c..ae528fe 100644
--- a/HandTranscriptMd/deploy.sh
+++ b/HandTranscriptMd/deploy.sh
@@ -2,11 +2,13 @@
 # Deploy plugin files to Obsidian vault
 # Uso: bash deploy.sh
 
+export MSYS_NO_PATHCONV=1
+
 VAULT_PLUGIN="C:/Projects/CLIENTI/IOTTI/IOTTI_APP/_docs/handwriting-to-markdown/.obsidian/plugins/handwriting-to-markdown"
-SRC_DIR="$(dirname "$0")"
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
 
 mkdir -p "$VAULT_PLUGIN"
-cp "$SRC_DIR/main.js" "$SRC_DIR/manifest.json" "$SRC_DIR/styles.css" "$VAULT_PLUGIN/"
+cp "$SCRIPT_DIR/main.js" "$SCRIPT_DIR/manifest.json" "$SCRIPT_DIR/styles.css" "$VAULT_PLUGIN/"
 
 echo "Deployed to $VAULT_PLUGIN"
 echo "  main.js     $(wc -c < "$VAULT_PLUGIN/main.js") bytes"
diff --git a/HandTranscriptMd/src/drawing-canvas.ts b/HandTranscriptMd/src/drawing-canvas.ts
index f7ccbe0..1919ca0 100644
--- a/HandTranscriptMd/src/drawing-canvas.ts
+++ b/HandTranscriptMd/src/drawing-canvas.ts
@@ -48,6 +48,8 @@ export class DrawingCanvas {
 	private historyIdx = -1;
 	// Flag per sapere se la gomma ha modificato qualcosa durante un drag
 	private eraserChanged = false;
+	// Callback invocato quando l'altezza del canvas cambia (auto-expand)
+	private resizeCb: (() => void) | null = null;
 
 	// Altezza di default delle settings (usata per reset su clear)
 	private defaultHeight: number;
@@ -66,9 +68,6 @@ export class DrawingCanvas {
 	private boundDown: (e: PointerEvent) => void;
 	private boundMove: (e: PointerEvent) => void;
 	private boundUp: (e: PointerEvent) => void;
-	private boundBeforeInput: ((e: Event) => void) | null = null;
-	// Riferimento al container per il check "tap fuori"
-	private container: HTMLElement | null = null;
 	// Callback debug: se impostato, mostra Notice all'utente per ogni evento IME/touch
 	private debugFn: ((msg: string) => void) | null = null;
 
@@ -78,19 +77,7 @@ export class DrawingCanvas {
 		this.canvas.height = height;
 		this.defaultHeight = defaultHeight;
 		this.mobileMode = mobileMode;
-		this.container = container;
 		this.debugFn = debugFn;
-		// HANDWRITING ANDROID — problema aperto, vedi CLAUDE.md per storico tentativi.
-		// Safety net: blocca beforeinput durante il disegno (utile anche in fullscreen)
-		if (mobileMode) {
-			this.boundBeforeInput = (e: Event) => {
-				if (this.isDrawing) {
-					this.debugFn?.('🚫 beforeinput bloccato');
-					e.preventDefault();
-				}
-			};
-			document.addEventListener('beforeinput', this.boundBeforeInput, true);
-		}
 		this.canvas.classList.add('hwm_canvas');
 		// touch-action: none sul canvas previene scroll/zoom durante il disegno
 		this.canvas.style.setProperty('touch-action', 'none', 'important');
@@ -115,6 +102,37 @@ export class DrawingCanvas {
 	/* --- API pubblica --- */
 
 	onChange(cb: () => void) { this.changeCb = cb; }
+	// Registra callback per quando l'altezza cambia (utile per auto-scroll nell'overlay)
+	onResize(cb: () => void) { this.resizeCb = cb; }
+	// Abilita scroll manuale con il dito sul canvas.
+	// touch-action resta 'none' (la penna non trigga scroll del browser),
+	// il dito scrolla il container via JS.
+	allowFingerScroll(scrollContainer: HTMLElement) {
+		let scrolling = false;
+		let startY = 0;
+		let startScroll = 0;
+
+		this.canvas.addEventListener('pointerdown', (e: PointerEvent) => {
+			if ((e.pointerType || 'pen') !== 'touch') return;
+			scrolling = true;
+			startY = e.clientY;
+			startScroll = scrollContainer.scrollTop;
+			this.canvas.setPointerCapture(e.pointerId);
+		});
+
+		this.canvas.addEventListener('pointermove', (e: PointerEvent) => {
+			if (!scrolling || (e.pointerType || 'pen') !== 'touch') return;
+			e.preventDefault();
+			scrollContainer.scrollTop = startScroll + (startY - e.clientY);
+		});
+
+		const stop = (e: PointerEvent) => {
+			if ((e.pointerType || 'pen') !== 'touch') return;
+			scrolling = false;
+		};
+		this.canvas.addEventListener('pointerup', stop);
+		this.canvas.addEventListener('pointerleave', stop);
+	}
 
 	setMode(mode: DrawMode) { this.mode = mode; }
 	getMode(): DrawMode { return this.mode; }
@@ -187,11 +205,6 @@ export class DrawingCanvas {
 		this.canvas.removeEventListener('pointermove', this.boundMove);
 		this.canvas.removeEventListener('pointerup', this.boundUp);
 		this.canvas.removeEventListener('pointerleave', this.boundUp);
-		// Rimuove listener beforeinput (registrato solo in mobileMode)
-		if (this.boundBeforeInput) {
-			document.removeEventListener('beforeinput', this.boundBeforeInput, true);
-			this.boundBeforeInput = null;
-		}
 	}
 
 	/* --- History --- */
@@ -312,6 +325,8 @@ export class DrawingCanvas {
 			if (this.currentStroke) {
 				this.drawFullStroke(this.currentStroke);
 			}
+			// Notifica chi ascolta (overlay auto-scroll)
+			this.resizeCb?.();
 
 			if (progress < 1) {
 				this.animFrameId = requestAnimationFrame(step);
diff --git a/HandTranscriptMd/src/editor-view.ts b/HandTranscriptMd/src/editor-view.ts
new file mode 100644
index 0000000..dfb8f09
--- /dev/null
+++ b/HandTranscriptMd/src/editor-view.ts
@@ -0,0 +1,675 @@
+/* =============================================
+   DrawingEditorView — Editor in tab Obsidian
+   Apre il canvas in una tab dedicata, fuori dal
+   DOM di CodeMirror → nessun conflitto
+   handwriting Android.
+   ============================================= */
+
+import { ItemView, WorkspaceLeaf, TFile, Notice, Platform, Modal, App } from 'obsidian';
+import type HandwritingPlugin from './main';
+import { DrawingCanvas, Stroke } from './drawing-canvas';
+import { strokesToSvg, parseSvgStrokes } from './svg-utils';
+import { getEffectiveBgColor, getEffectiveLineColor, remapStrokeColor } from './settings';
+import { getRecognizer } from './recognizer';
+import { parseMarkdown } from './md-parser';
+
+export const VIEW_TYPE_HANDWRITING = 'handwriting-editor';
+
+// Icone SVG inline (stile Lucide 24×24)
+const ICONS: Record<string, string> = {
+	'pencil':      `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>`,
+	'eraser':      `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>`,
+	'rotate-ccw':  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>`,
+	'rotate-cw':   `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`,
+	'trash':       `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>`,
+	'file-text':   `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>`,
+	'save':        `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>`,
+	'x':           `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
+	'chevron-down':`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`,
+	'chevron-up':  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`,
+	'arrow-left':  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>`,
+};
+
+export class DrawingEditorView extends ItemView {
+	plugin: HandwritingPlugin;
+	private canvas: DrawingCanvas | null = null;
+	private embedId = '';
+	private svgPath = '';
+	private sourcePath = '';
+	private saveTimer: ReturnType<typeof setTimeout> | null = null;
+
+	constructor(leaf: WorkspaceLeaf, plugin: HandwritingPlugin) {
+		super(leaf);
+		this.plugin = plugin;
+	}
+
+	getViewType() { return VIEW_TYPE_HANDWRITING; }
+	getDisplayText() { return 'Handwriting Editor'; }
+	getIcon() { return 'pencil'; }
+	getEmbedId() { return this.embedId; }
+
+	async setState(state: any, result: any) {
+		if (state?.id) this.embedId = state.id;
+		if (state?.svg) this.svgPath = state.svg;
+		if (state?.sourcePath) this.sourcePath = state.sourcePath;
+		// Costruisci la UI solo quando abbiamo i dati
+		if (this.embedId && this.svgPath) await this.buildEditor();
+		await super.setState(state, result);
+	}
+
+	getState() {
+		return { id: this.embedId, svg: this.svgPath, sourcePath: this.sourcePath };
+	}
+
+	async onOpen() { /* UI costruita in setState */ }
+
+	async onClose() {
+		if (this.canvas) {
+			await this.saveSvg();
+			this.canvas.destroy();
+			this.canvas = null;
+		}
+		if (this.saveTimer) clearTimeout(this.saveTimer);
+	}
+
+	/* ---------- Costruisce la UI dell'editor ---------- */
+
+	private async buildEditor() {
+		const el = this.contentEl;
+		el.empty();
+		el.classList.add('hwm_editor-view');
+
+		const isMobile = Platform.isMobile;
+		const isDark = this.plugin.settings.bgMode === 'dark';
+		const bgColor = getEffectiveBgColor(this.plugin.settings);
+		const lineColor = getEffectiveLineColor(this.plugin.settings);
+		el.style.backgroundColor = bgColor;
+
+		// --- Top bar: ← a sinistra | toolbar a destra ---
+		const topbar = el.createDiv({ cls: 'hwm_editor-topbar' });
+		if (isDark) topbar.classList.add('hwm_editor-topbar--dark');
+
+		// Bottone ← (torna al documento)
+		const backBtn = this.mkBtn(topbar, 'arrow-left', 'Torna al documento');
+		backBtn.classList.add('hwm_back-btn');
+
+		// Toolbar (allineata a destra dentro il topbar)
+		const toolbar = topbar.createDiv({ cls: 'hwm_toolbar hwm_editor-toolbar' });
+		if (isDark) toolbar.classList.add('hwm_toolbar--dark');
+
+		// Toggle compatta (mobile)
+		if (isMobile) {
+			toolbar.classList.add('hwm_toolbar--compact');
+			const toggleBtn = this.mkBtn(toolbar, 'chevron-down', 'Mostra tutti');
+			toggleBtn.classList.add('hwm_toggle-btn');
+			toggleBtn.addEventListener('click', () => {
+				const compact = toolbar.classList.toggle('hwm_toolbar--compact');
+				updateColorSizes(compact);
+				toggleBtn.innerHTML = ICONS[compact ? 'chevron-down' : 'chevron-up'] ?? '';
+			});
+		}
+
+		// Penna / Gomma
+		const penBtn = this.mkBtn(toolbar, 'pencil', 'Penna');
+		penBtn.classList.add('hwm_active', 'hwm_pen-btn');
+		const eraserBtn = this.mkBtn(toolbar, 'eraser', 'Gomma');
+		eraserBtn.classList.add('hwm_eraser-btn');
+		toolbar.createDiv({ cls: 'hwm_separator' });
+
+		// Colori
+		const colors = isDark
+			? ['#ffffff', '#60a5fa', '#f87171', '#4ade80']
+			: ['#000000', '#1e40af', '#dc2626', '#16a34a'];
+		const colorWrap = toolbar.createDiv({ cls: 'hwm_colors' });
+		const colorBtns: HTMLElement[] = [];
+		for (const c of colors) {
+			const btn = colorWrap.createEl('div', {
+				cls: 'hwm_color-btn',
+				attr: { title: c, role: 'button', tabindex: '0' }
+			});
+			btn.style.backgroundColor = c;
+			// Dimensioni forzate (bypass stili Obsidian Mobile)
+			for (const [k, v] of Object.entries({
+				width: '22px', height: '22px', 'min-width': '22px',
+				'min-height': '22px', 'border-radius': '50%',
+				'box-sizing': 'border-box', 'flex-shrink': '0'
+			})) btn.style.setProperty(k, v, 'important');
+			if (c === colors[0]) btn.classList.add('hwm_active');
+			colorBtns.push(btn);
+		}
+		toolbar.createDiv({ cls: 'hwm_separator' });
+
+		// Helper per dimensioni pallini in toolbar compatta
+		const updateColorSizes = (compact: boolean) => {
+			colorBtns.forEach(b => {
+				const sz = (!compact || b.classList.contains('hwm_active')) ? '22px' : '0';
+				b.style.setProperty('min-width', sz, 'important');
+				b.style.setProperty('min-height', sz, 'important');
+			});
+		};
+		if (isMobile) updateColorSizes(true);
+
+		// Undo / Redo / Clear
+		const undoBtn = this.mkBtn(toolbar, 'rotate-ccw', 'Annulla');
+		undoBtn.classList.add('hwm_undo-btn');
+		const redoBtn = this.mkBtn(toolbar, 'rotate-cw', 'Ripristina');
+		redoBtn.classList.add('hwm_redo-btn');
+		const clearBtn = this.mkBtn(toolbar, 'trash', 'Cancella tutto');
+		clearBtn.classList.add('hwm_clear-btn');
+		toolbar.createDiv({ cls: 'hwm_separator' });
+
+		// Converti / Salva / Elimina
+		const convertBtn = this.mkBtn(toolbar, 'file-text', 'Converti in Markdown');
+		convertBtn.classList.add('hwm_convert-btn');
+		const saveBtn = this.mkBtn(toolbar, 'save', 'Salva');
+		saveBtn.classList.add('hwm_save-btn');
+		const deleteBtn = this.mkBtn(toolbar, 'x', 'Elimina riquadro');
+		deleteBtn.classList.add('hwm_delete-btn');
+
+		// --- Scroll container ---
+		const scrollWrap = el.createDiv({ cls: 'hwm_editor-scroll' });
+		const canvasWrap = scrollWrap.createDiv({ cls: 'hwm_canvas-wrap' });
+
+		// Carica tratti dal file SVG
+		const { strokes, canvasHeight: savedH } = await this.loadStrokes();
+		const { canvasWidth, canvasHeight } = this.plugin.settings;
+		const h = savedH ?? canvasHeight;
+		const debugFn = this.plugin.settings.debugMode
+			? (msg: string) => new Notice(msg, 3000) : null;
+
+		// Crea il canvas
+		this.canvas = new DrawingCanvas(canvasWrap, canvasWidth, h, canvasHeight, isMobile, debugFn);
+		this.canvas.setBackground(bgColor, lineColor);
+		this.canvas.setColor(colors[0]!);
+		// Su mobile: dito = scroll, penna = disegno
+		// Su mobile: dito = scroll manuale del container, penna = disegno
+		if (isMobile) this.canvas.allowFingerScroll(scrollWrap);
+
+		// Carica tratti con remapping colori
+		if (strokes.length > 0) {
+			const remapped = strokes.map(s => ({
+				...s, color: remapStrokeColor(s.color, this.plugin.settings.bgMode)
+			}));
+			this.canvas.loadStrokes(remapped);
+		}
+
+		// Resize handle (visibile ma non interattivo)
+		const handle = scrollWrap.createDiv({ cls: 'hwm_resize-handle hwm_resize-handle--disabled' });
+		handle.createEl('span', { text: '⋯' });
+		if (isDark) {
+			handle.style.background = '#2a2a2a';
+			handle.style.borderTopColor = '#444';
+			handle.style.color = '#888';
+		}
+
+		// Auto-scroll quando il canvas si espande
+		this.canvas.onResize(() => { scrollWrap.scrollTop = scrollWrap.scrollHeight; });
+
+		// --- Event handlers ---
+		const cv = this.canvas;
+
+		penBtn.addEventListener('click', () => {
+			cv.setMode('pen');
+			penBtn.classList.add('hwm_active');
+			eraserBtn.classList.remove('hwm_active');
+		});
+		eraserBtn.addEventListener('click', () => {
+			cv.setMode('eraser');
+			eraserBtn.classList.add('hwm_active');
+			penBtn.classList.remove('hwm_active');
+		});
+		for (let i = 0; i < colorBtns.length; i++) {
+			colorBtns[i]!.addEventListener('click', () => {
+				colorBtns.forEach(b => b.classList.remove('hwm_active'));
+				colorBtns[i]!.classList.add('hwm_active');
+				cv.setColor(colors[i]!);
+				if (isMobile) updateColorSizes(toolbar.classList.contains('hwm_toolbar--compact'));
+			});
+		}
+		undoBtn.addEventListener('click', () => cv.undo());
+		redoBtn.addEventListener('click', () => cv.redo());
+		clearBtn.addEventListener('click', () => cv.clear());
+
+		convertBtn.addEventListener('click', () => this.doConvert());
+		saveBtn.addEventListener('click', async () => { await this.saveSvg(); new Notice('Salvato'); });
+		deleteBtn.addEventListener('click', () => this.doDelete());
+
+		// Auto-save debounced (2s dopo ultimo cambiamento)
+		cv.onChange(() => {
+			if (this.saveTimer) clearTimeout(this.saveTimer);
+			this.saveTimer = setTimeout(() => this.saveSvg(), 2000);
+		});
+
+		// Bottone ← → salva e chiudi la tab
+		backBtn.addEventListener('click', async () => {
+			await this.saveSvg();
+			this.leaf.detach();
+		});
+	}
+
+	/* ---------- File I/O ---------- */
+
+	private async loadStrokes(): Promise<{ strokes: Stroke[]; canvasHeight: number | null }> {
+		const file = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (file instanceof TFile) {
+			const content = await this.app.vault.read(file);
+			const strokes = parseSvgStrokes(content);
+			const m = content.match(/viewBox="0 0 \d+ (\d+)"/);
+			return { strokes, canvasHeight: m ? parseInt(m[1] ?? '0') : null };
+		}
+		return { strokes: [], canvasHeight: null };
+	}
+
+	private async saveSvg() {
+		if (!this.canvas) return;
+		const strokes = this.canvas.getStrokes();
+		const svg = strokesToSvg(strokes, this.canvas.getWidth(), this.canvas.getHeight(),
+			this.canvas.getBgColor(), this.canvas.getLineColor());
+
+		// Crea cartella se necessario
+		const folder = this.svgPath.substring(0, this.svgPath.lastIndexOf('/'));
+		if (folder && !this.app.vault.getAbstractFileByPath(folder)) {
+			await this.app.vault.createFolder(folder);
+		}
+		const existing = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (existing instanceof TFile) {
+			await this.app.vault.modify(existing, svg);
+		} else {
+			await this.app.vault.create(this.svgPath, svg);
+		}
+		// Aggiorna preview inline se visibile
+		this.plugin.refreshPreview(this.embedId, svg);
+	}
+
+	/* ---------- Converti OCR ---------- */
+
+	private async doConvert() {
+		if (!this.canvas || this.canvas.getStrokes().length === 0) {
+			new Notice('Nessun tratto da convertire');
+			return;
+		}
+		try {
+			new Notice('Riconoscimento in corso…');
+			const svg = strokesToSvg(this.canvas.getStrokes(), this.canvas.getWidth(),
+				this.canvas.getHeight(), this.canvas.getBgColor(), this.canvas.getLineColor());
+			// SVG → PNG base64
+			const parser = new DOMParser();
+			const svgEl = parser.parseFromString(svg, 'image/svg+xml').documentElement as unknown as SVGElement;
+			const base64 = await this.svgToPng(svgEl);
+			// OCR via Gemini
+			const recognizer = getRecognizer(this.plugin.settings.geminiApiKey, this.plugin.settings.ocrLanguages);
+			const rawText = await recognizer.recognize(base64);
+			if (!rawText.trim()) { new Notice('Nessun testo riconosciuto'); return; }
+			// Markdown + archivia + sostituisci
+			const markdown = parseMarkdown(rawText);
+			await this.archiveSvg();
+			await this.replaceCodeBlock(markdown);
+			this.canvas.destroy();
+			this.canvas = null;
+			this.leaf.detach();
+			new Notice('Conversione completata!');
+		} catch (e: unknown) {
+			new Notice('Errore OCR: ' + (e instanceof Error ? e.message : String(e)));
+		}
+	}
+
+	/* ---------- Elimina ---------- */
+
+	private async doDelete() {
+		if (!confirm('Eliminare questo riquadro handwriting e il file SVG associato?')) return;
+		if (this.canvas) { this.canvas.destroy(); this.canvas = null; }
+		// Rimuovi code block dal .md
+		await this.removeCodeBlock();
+		// Cancella il file SVG
+		const svgFile = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (svgFile instanceof TFile) await this.app.vault.delete(svgFile);
+		this.leaf.detach();
+		new Notice('Riquadro eliminato');
+	}
+
+	/* ---------- Manipolazione file .md ---------- */
+
+	private async archiveSvg() {
+		const svgFile = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (!(svgFile instanceof TFile)) return;
+		const now = new Date();
+		const pad = (n: number) => String(n).padStart(2, '0');
+		const ts = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}` +
+			`_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+		const dest = `${this.plugin.settings.svgFolder}/_converted`;
+		if (!this.app.vault.getAbstractFileByPath(dest)) await this.app.vault.createFolder(dest);
+		await this.app.vault.rename(svgFile, `${dest}/${ts}.svg`);
+	}
+
+	// Regex per trovare ![[svgPath]] nel file .md (nuovo formato wiki)
+	private wikiEmbedRegex(): RegExp {
+		const escaped = this.svgPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		return new RegExp(`\\n?!\\[\\[${escaped}\\]\\]\\n?`);
+	}
+
+	// Regex per trovare il code block legacy con l'id specifico
+	private codeBlockRegex(): RegExp {
+		const escaped = this.embedId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		return new RegExp(
+			'\\n?```handwriting\\n.*?"id"\\s*:\\s*"' + escaped + '".*?\\n```\\n?', 's'
+		);
+	}
+
+	// Applica una sostituzione sul file .md, tentando prima il formato
+	// wiki ![[svg]] e poi il code block legacy come fallback.
+	// markdown === null → rimozione; stringa → sostituzione con il testo.
+	private async replaceInMd(markdown: string | null) {
+		const mdFile = this.app.vault.getAbstractFileByPath(this.sourcePath);
+		if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
+
+		const content   = await this.app.vault.read(mdFile);
+		const wikiRegex = this.wikiEmbedRegex();
+		const cbRegex   = this.codeBlockRegex();
+		const repl      = markdown === null ? '\n' : '\n' + markdown + '\n';
+
+		// Prova prima il formato wiki; se non trova, prova il code block legacy
+		let updated = content.replace(wikiRegex, repl);
+		if (updated === content) updated = content.replace(cbRegex, repl);
+
+		if (updated !== content) await this.app.vault.modify(mdFile, updated);
+	}
+
+	private async replaceCodeBlock(markdown: string) {
+		await this.replaceInMd(markdown);
+	}
+
+	private async removeCodeBlock() {
+		await this.replaceInMd(null);
+	}
+
+	/* ---------- Helpers ---------- */
+
+	private mkBtn(parent: HTMLElement, icon: string, title: string): HTMLElement {
+		const btn = parent.createEl('button', { cls: 'hwm_btn', attr: { title } });
+		btn.innerHTML = ICONS[icon] ?? '';
+		return btn;
+	}
+
+	// Converte SVGElement → PNG base64 via canvas HTML temporaneo
+	private svgToPng(svgElement: SVGElement): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const cvs = document.createElement('canvas');
+			const ctx = cvs.getContext('2d')!;
+			const img = new Image();
+			const blob = new Blob(
+				[new XMLSerializer().serializeToString(svgElement)],
+				{ type: 'image/svg+xml' }
+			);
+			const url = URL.createObjectURL(blob);
+			img.onload = () => {
+				cvs.width = img.width; cvs.height = img.height;
+				ctx.drawImage(img, 0, 0);
+				URL.revokeObjectURL(url);
+				resolve(cvs.toDataURL('image/png').split(',')[1]!);
+			};
+			img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('SVG → PNG fallito')); };
+			img.src = url;
+		});
+	}
+}
+
+/* =============================================
+   DrawingModal — Editor disegno come Modal overlay.
+   Aperto tramite bottone portale (document.body)
+   per evitare tap su widget CM6.
+   ============================================= */
+
+export class DrawingModal extends Modal {
+	private plugin: HandwritingPlugin;
+	private embedId: string;
+	private svgPath: string;
+	private sourcePath: string;
+	private canvas: DrawingCanvas | null = null;
+	private saveTimer: ReturnType<typeof setTimeout> | null = null;
+
+	constructor(app: App, plugin: HandwritingPlugin, embedId: string, svgPath: string, sourcePath: string) {
+		super(app);
+		this.plugin = plugin;
+		this.embedId = embedId;
+		this.svgPath = svgPath;
+		this.sourcePath = sourcePath;
+		this.modalEl.addClass('hwm_modal');
+	}
+
+	async onOpen() {
+		this.contentEl.addClass('hwm_editor-view');
+		await this.buildEditor();
+	}
+
+	async onClose() {
+		if (this.canvas) {
+			await this.saveSvg();
+			this.canvas.destroy();
+			this.canvas = null;
+		}
+		if (this.saveTimer) clearTimeout(this.saveTimer);
+	}
+
+	private async buildEditor() {
+		const el = this.contentEl;
+		const isMobile = Platform.isMobile;
+		const isDark = this.plugin.settings.bgMode === 'dark';
+		const bgColor = getEffectiveBgColor(this.plugin.settings);
+		const lineColor = getEffectiveLineColor(this.plugin.settings);
+		el.style.backgroundColor = bgColor;
+
+		// Top bar con toolbar (nessun backBtn: il Modal ha già la X nativa)
+		const topbar = el.createDiv({ cls: 'hwm_editor-topbar' });
+		if (isDark) topbar.classList.add('hwm_editor-topbar--dark');
+
+		const toolbar = topbar.createDiv({ cls: 'hwm_toolbar hwm_editor-toolbar' });
+		if (isDark) toolbar.classList.add('hwm_toolbar--dark');
+
+		if (isMobile) {
+			toolbar.classList.add('hwm_toolbar--compact');
+			const toggleBtn = this.mkBtn(toolbar, 'chevron-down', 'Mostra tutti');
+			toggleBtn.classList.add('hwm_toggle-btn');
+			toggleBtn.addEventListener('click', () => {
+				const compact = toolbar.classList.toggle('hwm_toolbar--compact');
+				updateColorSizes(compact);
+				toggleBtn.innerHTML = ICONS[compact ? 'chevron-down' : 'chevron-up'] ?? '';
+			});
+		}
+
+		const penBtn = this.mkBtn(toolbar, 'pencil', 'Penna');
+		penBtn.classList.add('hwm_active', 'hwm_pen-btn');
+		const eraserBtn = this.mkBtn(toolbar, 'eraser', 'Gomma');
+		eraserBtn.classList.add('hwm_eraser-btn');
+		toolbar.createDiv({ cls: 'hwm_separator' });
+
+		const colors = isDark
+			? ['#ffffff', '#60a5fa', '#f87171', '#4ade80']
+			: ['#000000', '#1e40af', '#dc2626', '#16a34a'];
+		const colorWrap = toolbar.createDiv({ cls: 'hwm_colors' });
+		const colorBtns: HTMLElement[] = [];
+		for (const c of colors) {
+			const btn = colorWrap.createEl('div', { cls: 'hwm_color-btn', attr: { title: c, role: 'button', tabindex: '0' } });
+			btn.style.backgroundColor = c;
+			for (const [k, v] of Object.entries({
+				width: '22px', height: '22px', 'min-width': '22px', 'min-height': '22px',
+				'border-radius': '50%', 'box-sizing': 'border-box', 'flex-shrink': '0'
+			})) btn.style.setProperty(k, v, 'important');
+			if (c === colors[0]) btn.classList.add('hwm_active');
+			colorBtns.push(btn);
+		}
+		toolbar.createDiv({ cls: 'hwm_separator' });
+
+		const updateColorSizes = (compact: boolean) => {
+			colorBtns.forEach(b => {
+				const sz = (!compact || b.classList.contains('hwm_active')) ? '22px' : '0';
+				b.style.setProperty('min-width', sz, 'important');
+				b.style.setProperty('min-height', sz, 'important');
+			});
+		};
+		if (isMobile) updateColorSizes(true);
+
+		const undoBtn = this.mkBtn(toolbar, 'rotate-ccw', 'Annulla');
+		undoBtn.classList.add('hwm_undo-btn');
+		const redoBtn = this.mkBtn(toolbar, 'rotate-cw', 'Ripristina');
+		redoBtn.classList.add('hwm_redo-btn');
+		const clearBtn = this.mkBtn(toolbar, 'trash', 'Cancella tutto');
+		clearBtn.classList.add('hwm_clear-btn');
+		toolbar.createDiv({ cls: 'hwm_separator' });
+
+		const convertBtn = this.mkBtn(toolbar, 'file-text', 'Converti in Markdown');
+		convertBtn.classList.add('hwm_convert-btn');
+		const saveBtn = this.mkBtn(toolbar, 'save', 'Salva');
+		saveBtn.classList.add('hwm_save-btn');
+		const deleteBtn = this.mkBtn(toolbar, 'x', 'Elimina riquadro');
+		deleteBtn.classList.add('hwm_delete-btn');
+
+		const scrollWrap = el.createDiv({ cls: 'hwm_editor-scroll' });
+		const canvasWrap = scrollWrap.createDiv({ cls: 'hwm_canvas-wrap' });
+
+		const { strokes, canvasHeight: savedH } = await this.loadStrokes();
+		const { canvasWidth, canvasHeight } = this.plugin.settings;
+		const h = savedH ?? canvasHeight;
+		const debugFn = this.plugin.settings.debugMode ? (msg: string) => new Notice(msg, 3000) : null;
+
+		this.canvas = new DrawingCanvas(canvasWrap, canvasWidth, h, canvasHeight, isMobile, debugFn);
+		this.canvas.setBackground(bgColor, lineColor);
+		this.canvas.setColor(colors[0]!);
+		if (isMobile) this.canvas.allowFingerScroll(scrollWrap);
+
+		if (strokes.length > 0) {
+			const remapped = strokes.map(s => ({ ...s, color: remapStrokeColor(s.color, this.plugin.settings.bgMode) }));
+			this.canvas.loadStrokes(remapped);
+		}
+
+		const handle = scrollWrap.createDiv({ cls: 'hwm_resize-handle hwm_resize-handle--disabled' });
+		handle.createEl('span', { text: '⋯' });
+		if (isDark) { handle.style.background = '#2a2a2a'; handle.style.borderTopColor = '#444'; handle.style.color = '#888'; }
+
+		this.canvas.onResize(() => { scrollWrap.scrollTop = scrollWrap.scrollHeight; });
+
+		const cv = this.canvas;
+		penBtn.addEventListener('click', () => { cv.setMode('pen'); penBtn.classList.add('hwm_active'); eraserBtn.classList.remove('hwm_active'); });
+		eraserBtn.addEventListener('click', () => { cv.setMode('eraser'); eraserBtn.classList.add('hwm_active'); penBtn.classList.remove('hwm_active'); });
+		for (let i = 0; i < colorBtns.length; i++) {
+			colorBtns[i]!.addEventListener('click', () => {
+				colorBtns.forEach(b => b.classList.remove('hwm_active'));
+				colorBtns[i]!.classList.add('hwm_active');
+				cv.setColor(colors[i]!);
+				if (isMobile) updateColorSizes(toolbar.classList.contains('hwm_toolbar--compact'));
+			});
+		}
+		undoBtn.addEventListener('click', () => cv.undo());
+		redoBtn.addEventListener('click', () => cv.redo());
+		clearBtn.addEventListener('click', () => cv.clear());
+		convertBtn.addEventListener('click', () => this.doConvert());
+		saveBtn.addEventListener('click', async () => { await this.saveSvg(); new Notice('Salvato'); });
+		deleteBtn.addEventListener('click', () => this.doDelete());
+
+		cv.onChange(() => {
+			if (this.saveTimer) clearTimeout(this.saveTimer);
+			this.saveTimer = setTimeout(() => this.saveSvg(), 2000);
+		});
+	}
+
+	private async loadStrokes(): Promise<{ strokes: Stroke[]; canvasHeight: number | null }> {
+		const file = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (file instanceof TFile) {
+			const content = await this.app.vault.read(file);
+			const m = content.match(/viewBox="0 0 \d+ (\d+)"/);
+			return { strokes: parseSvgStrokes(content), canvasHeight: m ? parseInt(m[1] ?? '0') : null };
+		}
+		return { strokes: [], canvasHeight: null };
+	}
+
+	private async saveSvg() {
+		if (!this.canvas) return;
+		const svg = strokesToSvg(this.canvas.getStrokes(), this.canvas.getWidth(), this.canvas.getHeight(),
+			this.canvas.getBgColor(), this.canvas.getLineColor());
+		const folder = this.svgPath.substring(0, this.svgPath.lastIndexOf('/'));
+		if (folder && !this.app.vault.getAbstractFileByPath(folder)) await this.app.vault.createFolder(folder);
+		const existing = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (existing instanceof TFile) { await this.app.vault.modify(existing, svg); }
+		else { await this.app.vault.create(this.svgPath, svg); }
+		this.plugin.refreshPreview(this.embedId, svg);
+	}
+
+	private async doConvert() {
+		if (!this.canvas || this.canvas.getStrokes().length === 0) { new Notice('Nessun tratto da convertire'); return; }
+		try {
+			new Notice('Riconoscimento in corso…');
+			const svg = strokesToSvg(this.canvas.getStrokes(), this.canvas.getWidth(), this.canvas.getHeight(),
+				this.canvas.getBgColor(), this.canvas.getLineColor());
+			const svgEl = new DOMParser().parseFromString(svg, 'image/svg+xml').documentElement as unknown as SVGElement;
+			const base64 = await this.svgToPng(svgEl);
+			const recognizer = getRecognizer(this.plugin.settings.geminiApiKey, this.plugin.settings.ocrLanguages);
+			const rawText = await recognizer.recognize(base64);
+			if (!rawText.trim()) { new Notice('Nessun testo riconosciuto'); return; }
+			const markdown = parseMarkdown(rawText);
+			await this.archiveSvg();
+			await this.replaceCodeBlock(markdown);
+			this.canvas.destroy(); this.canvas = null;
+			this.close();
+			new Notice('Conversione completata!');
+		} catch (e: unknown) { new Notice('Errore OCR: ' + (e instanceof Error ? e.message : String(e))); }
+	}
+
+	private async doDelete() {
+		if (!confirm('Eliminare questo riquadro handwriting e il file SVG associato?')) return;
+		if (this.canvas) { this.canvas.destroy(); this.canvas = null; }
+		await this.removeCodeBlock();
+		const svgFile = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (svgFile instanceof TFile) await this.app.vault.delete(svgFile);
+		this.close();
+		new Notice('Riquadro eliminato');
+	}
+
+	private async archiveSvg() {
+		const svgFile = this.app.vault.getAbstractFileByPath(this.svgPath);
+		if (!(svgFile instanceof TFile)) return;
+		const now = new Date(); const pad = (n: number) => String(n).padStart(2, '0');
+		const ts = `${now.getFullYear()}-${pad(now.getMonth()+1)}-${pad(now.getDate())}_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
+		const dest = `${this.plugin.settings.svgFolder}/_converted`;
+		if (!this.app.vault.getAbstractFileByPath(dest)) await this.app.vault.createFolder(dest);
+		await this.app.vault.rename(svgFile, `${dest}/${ts}.svg`);
+	}
+
+	private codeBlockRegex(): RegExp {
+		const esc = this.embedId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		return new RegExp('\\n?```handwriting\\n.*?"id"\\s*:\\s*"' + esc + '".*?\\n```\\n?', 's');
+	}
+
+	private async replaceCodeBlock(markdown: string) {
+		const mdFile = this.app.vault.getAbstractFileByPath(this.sourcePath);
+		if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
+		const content = await this.app.vault.read(mdFile);
+		const updated = content.replace(this.codeBlockRegex(), '\n' + markdown + '\n');
+		if (updated !== content) await this.app.vault.modify(mdFile, updated);
+	}
+
+	private async removeCodeBlock() {
+		const mdFile = this.app.vault.getAbstractFileByPath(this.sourcePath);
+		if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
+		const content = await this.app.vault.read(mdFile);
+		const updated = content.replace(this.codeBlockRegex(), '\n');
+		if (updated !== content) await this.app.vault.modify(mdFile, updated);
+	}
+
+	private mkBtn(parent: HTMLElement, icon: string, title: string): HTMLElement {
+		const btn = parent.createEl('button', { cls: 'hwm_btn', attr: { title } });
+		btn.innerHTML = ICONS[icon] ?? '';
+		return btn;
+	}
+
+	private svgToPng(svgElement: SVGElement): Promise<string> {
+		return new Promise((resolve, reject) => {
+			const cvs = document.createElement('canvas');
+			const ctx = cvs.getContext('2d')!;
+			const img = new Image();
+			const blob = new Blob([new XMLSerializer().serializeToString(svgElement)], { type: 'image/svg+xml' });
+			const url = URL.createObjectURL(blob);
+			img.onload = () => { cvs.width = img.width; cvs.height = img.height; ctx.drawImage(img, 0, 0); URL.revokeObjectURL(url); resolve(cvs.toDataURL('image/png').split(',')[1]!); };
+			img.onerror = () => { URL.revokeObjectURL(url); reject(new Error('SVG → PNG fallito')); };
+			img.src = url;
+		});
+	}
+}
diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index 3ec70b0..865cf44 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -1,8 +1,13 @@
 /* =============================================
-   Embed — Code block processor + Toolbar
-   Gestisce il rendering dell'embed nel markdown.
-   Il blocco si apre direttamente in modalità edit
-   (disegno immediato, senza click extra).
+   Embed — Processor per blocchi handwriting
+
+   Supporta due formati:
+   1. NUOVO: ![[_handwriting/hw_xxx.svg]]
+      - Visibile anche senza plugin (immagine SVG nativa)
+      - Gestito da registerMarkdownPostProcessor
+   2. LEGACY: ```handwriting { "id": ..., "svg": ... } ```
+      - Formato originale, mantenuto per compatibilità
+      - Gestito da registerMarkdownCodeBlockProcessor
    ============================================= */
 
 import {
@@ -10,50 +15,145 @@ import {
 	MarkdownView,
 	TFile,
 	Notice,
-	Platform
 } from 'obsidian';
 
-// Icone SVG inline (stile Lucide 24×24) — funzionano identicamente su Windows e Android,
-// senza dipendere dalla versione di Lucide bundled in Obsidian.
+// Icone SVG inline (stile Lucide 24×24)
 const ICONS: Record<string, string> = {
-	'pencil':      `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>`,
-	'eraser':      `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>`,
-	'rotate-ccw':  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>`,
-	'rotate-cw':   `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>`,
-	'trash':       `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>`,
 	'file-text':   `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>`,
-	'save':        `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>`,
 	'x':           `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>`,
-	'chevron-down':`<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>`,
 	'chevron-up':  `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>`,
+	'pencil':      `<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>`,
 };
 import type HandwritingPlugin from './main';
-import { DrawingCanvas, Stroke } from './drawing-canvas';
+import { Stroke } from './drawing-canvas';
 import { strokesToSvg, parseSvgStrokes, generateId } from './svg-utils';
 import { getEffectiveBgColor, getEffectiveLineColor, remapStrokeColor } from './settings';
 import { getRecognizer } from './recognizer';
 import { parseMarkdown } from './md-parser';
+import { VIEW_TYPE_HANDWRITING, DrawingEditorView } from './editor-view';
 
-// Dati JSON salvati dentro il code block ```handwriting
+// Dati JSON salvati dentro il code block ```handwriting (formato legacy)
 interface EmbedData {
 	id: string;
 	svg: string; // percorso relativo al file SVG nel vault
 }
 
-/* ---------- Registrazione ---------- */
+/* =============================================
+   Registrazione di entrambi i processor
+   ============================================= */
 
 export function registerEmbed(plugin: HandwritingPlugin) {
+	// --- NUOVO: MutationObserver su document.body ---
+	// Intercetta gli span .internal-embed con src _handwriting/ non appena
+	// appaiono nel DOM — funziona sia in reading view che in live preview
+	// (dove il post-processor non viene chiamato sui widget CM6 delle immagini).
+	setupMutationObserver(plugin);
+
+	// --- LEGACY: code block processor per ```handwriting {...} ``` ---
+	// Mantenuto per compatibilità con i blocchi esistenti nel vault.
 	plugin.registerMarkdownCodeBlockProcessor(
 		'handwriting',
 		async (source: string, el: HTMLElement, ctx: MarkdownPostProcessorContext) => {
-			await renderEmbed(source, el, ctx, plugin);
+			await renderLegacyEmbed(source, el, ctx, plugin);
 		}
 	);
 }
 
-/* ---------- Rendering dell'embed ---------- */
+/* =============================================
+   NUOVO FORMATO — MutationObserver per ![[svg]]
+   ============================================= */
 
-async function renderEmbed(
+// Registra un MutationObserver su document.body che intercetta
+// gli span .internal-embed con src _handwriting/ nel momento in cui
+// appaiono nel DOM. Funziona sia in reading view che in live preview
+// (in live preview il post-processor non viene chiamato sui widget CM6).
+function setupMutationObserver(plugin: HandwritingPlugin) {
+	const tryDecorate = (span: HTMLElement) => {
+		// Salta se già decorato (flag data attribute — più affidabile del parent check)
+		if (span.dataset.hwmDecorated === '1') return;
+
+		const svgPath = span.getAttribute('src') ?? '';
+		if (!svgPath.includes('_handwriting/') || !svgPath.endsWith('.svg')) return;
+
+		const filename = svgPath.split('/').pop() ?? '';
+		const embedId  = filename.replace('.svg', '');
+		if (!embedId.startsWith('hw_')) return;
+
+		// Se Obsidian non ha ancora caricato l'immagine (classe image-embed
+		// assente), riprova tra 150 ms — il caricamento è asincrono.
+		if (!span.classList.contains('image-embed')) {
+			setTimeout(() => tryDecorate(span), 150);
+			return;
+		}
+
+		// Marca subito come decorato per evitare doppia elaborazione
+		span.dataset.hwmDecorated = '1';
+
+		// NESSUNA modifica allo span dentro cm-content.
+		// Lo lasciamo identico a un'immagine normale: nessuna classe extra,
+		// nessun figlio aggiunto. Questo evita di rompere l'handwriting Android
+		// (il contenteditable="false" + figli extra confondono il hit-test di Chrome).
+		// Tutti i bottoni vivono in document.body via pannello portale.
+
+		const sourcePath = resolveSourcePath(span, plugin);
+
+		// Callback refresh: aggiorna l'<img> dopo il salvataggio dalla tab editor.
+		// Usa cache-bust URL (non data-URI) per non rompere l'handwriting Android.
+		plugin.previewCallbacks.set(embedId, () => {
+			if (!span.isConnected) return;
+			const img = span.querySelector('img');
+			if (!img) return;
+			const base = img.src.split('?')[0]!;
+			img.src = base + '?t=' + Date.now();
+		});
+
+		// Pannello portale con tutti i bottoni, in document.body (fuori da cm-content)
+		createPortalPanel(span, embedId, svgPath, sourcePath, plugin);
+	};
+
+	const observer = new MutationObserver((mutations) => {
+		for (const mut of mutations) {
+			for (const node of mut.addedNodes) {
+				if (!(node instanceof HTMLElement)) continue;
+				// Il nodo stesso potrebbe essere l'embed, oppure contenerlo
+				if (node.classList.contains('internal-embed') &&
+					node.getAttribute('src')?.includes('_handwriting/')) {
+					tryDecorate(node);
+				} else {
+					node.querySelectorAll<HTMLElement>('.internal-embed[src*="_handwriting/"]')
+						.forEach(tryDecorate);
+				}
+			}
+		}
+	});
+
+	observer.observe(document.body, { childList: true, subtree: true });
+	// Disconnette l'observer quando il plugin viene disabilitato
+	plugin.register(() => observer.disconnect());
+}
+
+// Risale il DOM per trovare il leaf markdown che contiene `el`,
+// e restituisce il path del file aperto in quel leaf.
+function resolveSourcePath(el: HTMLElement, plugin: HandwritingPlugin): string {
+	const leaves = plugin.app.workspace.getLeavesOfType('markdown');
+	for (const leaf of leaves) {
+		const contentEl = (leaf.view as unknown as { contentEl: HTMLElement }).contentEl;
+		if (contentEl?.contains(el)) {
+			return (leaf.view as unknown as { file?: { path: string } }).file?.path ?? '';
+		}
+	}
+	// Fallback: file attualmente attivo
+	return plugin.app.workspace.getActiveFile()?.path ?? '';
+}
+
+
+/* =============================================
+   LEGACY — Code block processor
+   ============================================= */
+
+// Gestisce il vecchio formato ```handwriting {...}```
+// Parsa il JSON, mostra la preview SVG con bottoni.
+async function renderLegacyEmbed(
 	source: string,
 	el: HTMLElement,
 	ctx: MarkdownPostProcessorContext,
@@ -68,446 +168,312 @@ async function renderEmbed(
 		return;
 	}
 
+	// Rimuove contenteditable="false" dai wrapper CM6 per ridurre
+	// l'impatto sull'handwriting Android (non risolve il problema ma
+	// è la mitigazione che avevamo già in precedenza).
+	stripContentEditableFalse(el);
+
 	// Container principale
 	const container = el.createDiv({ cls: 'hwm_container' });
 
-	// Carica tratti esistenti dal file SVG
-	const { strokes, canvasHeight } = await loadSvgData(data.svg, plugin);
+	// Carica SVG esistente
+	const { strokes, svgContent } = await loadSvgData(data.svg, plugin);
 
-	// Apre DIRETTAMENTE in modalità edit (disegno immediato)
-	showEditor(container, strokes, canvasHeight, data, ctx, plugin);
+	// Mostra la preview con i bottoni
+	showLegacyPreview(container, strokes, svgContent, data, ctx, plugin);
 }
 
-/* ---------- Editor mode (default) ---------- */
-
-function showEditor(
+// Renderizza la preview SVG (formato legacy) con i 3 bottoni inline.
+function showLegacyPreview(
 	container: HTMLElement,
 	strokes: Stroke[],
-	savedHeight: number | null,
+	svgContent: string | null,
 	data: EmbedData,
 	ctx: MarkdownPostProcessorContext,
 	plugin: HandwritingPlugin
 ) {
 	container.empty();
-	container.classList.add('hwm_editing');
 
-	const isMobile = Platform.isMobile;
-
-	// Su mobile aggiunge classe per CSS dedicato (stile bottoni, icone)
-	if (isMobile) container.classList.add('hwm_mobile');
-
-	// Determina tema subito (usato sia per toolbar che per palette colori)
 	const isDark = plugin.settings.bgMode === 'dark';
-
-	// Toolbar (sempre visibile, in alto a destra)
-	const toolbar = container.createDiv({ cls: 'hwm_toolbar' });
-	// Tema scuro: sfondo e icone invertiti
-	if (isDark) toolbar.classList.add('hwm_toolbar--dark');
-
-	// Su mobile: parte compatta, toggle per espandere.
-	// Il handler del toggle chiama updateColorBtnSizes, definita più in basso
-	// ma già disponibile a runtime grazie alla chiusura (closure).
-	let toggleBtn: HTMLElement | null = null;
-	if (isMobile) {
-		toolbar.classList.add('hwm_toolbar--compact');
-		toggleBtn = createBtn(toolbar, 'chevron-down', 'Mostra tutti i controlli');
-		toggleBtn.classList.add('hwm_toggle-btn');
-		toggleBtn.addEventListener('click', () => {
-			const isCompact = toolbar.classList.contains('hwm_toolbar--compact');
-			if (isCompact) {
-				toolbar.classList.remove('hwm_toolbar--compact');
-				// Ripristina dimensioni di tutti i pallini colore
-				updateColorBtnSizes(false);
-				// Cambia icona a chevron-up (comprimi)
-				toggleBtn!.innerHTML = ICONS['chevron-up'] ?? '';
-				toggleBtn!.title = 'Comprimi toolbar';
-			} else {
-				toolbar.classList.add('hwm_toolbar--compact');
-				// Collassa i pallini non attivi
-				updateColorBtnSizes(true);
-				// Ripristina icona chevron-down (espandi)
-				toggleBtn!.innerHTML = ICONS['chevron-down'] ?? '';
-				toggleBtn!.title = 'Mostra tutti i controlli';
-			}
-		});
-	}
-
-	// --- Tool: Penna ---
-	const penBtn = createBtn(toolbar, 'pencil', 'Penna');
-	penBtn.classList.add('hwm_active', 'hwm_pen-btn');
-
-	// --- Tool: Gomma ---
-	const eraserBtn = createBtn(toolbar, 'eraser', 'Gomma');
-	eraserBtn.classList.add('hwm_eraser-btn');
-
-	toolbar.createDiv({ cls: 'hwm_separator' });
-
-	// --- Colori (palette adattata al tema: scuro=colori chiari, chiaro=colori scuri) ---
-	const colors = isDark
-		? ['#ffffff', '#60a5fa', '#f87171', '#4ade80']   // bianco, azzurro, rosso chiaro, verde chiaro
-		: ['#000000', '#1e40af', '#dc2626', '#16a34a'];  // nero, blu, rosso, verde
-	const colorWrap = toolbar.createDiv({ cls: 'hwm_colors' });
-	const colorBtns: HTMLElement[] = [];
-	for (const color of colors) {
-		// Usiamo <div> invece di <button> per evitare che Obsidian Mobile
-		// sovrascriva width/height con i propri stili globali sui button.
-		const btn = colorWrap.createEl('div', {
-			cls: 'hwm_color-btn',
-			attr: { title: color, role: 'button', tabindex: '0' }
-		});
-		btn.style.backgroundColor = color;
-		// Dimensioni circolari forzate via setProperty (bypass stili Obsidian)
-		btn.style.setProperty('width', '22px', 'important');
-		btn.style.setProperty('height', '22px', 'important');
-		btn.style.setProperty('min-width', '22px', 'important');
-		btn.style.setProperty('min-height', '22px', 'important');
-		btn.style.setProperty('border-radius', '50%', 'important');
-		btn.style.setProperty('box-sizing', 'border-box', 'important');
-		btn.style.setProperty('flex-shrink', '0', 'important');
-		if (color === colors[0]) btn.classList.add('hwm_active');
-		colorBtns.push(btn);
-	}
-
-	toolbar.createDiv({ cls: 'hwm_separator' });
-
-	// Helper: aggiorna min-width sui pallini colore in base alla modalità compatta.
-	// Necessario perché min-width è impostato via JS con !important (per Android)
-	// e non può essere sovrascritto da CSS — va gestito via JS.
-	const updateColorBtnSizes = (compact: boolean) => {
-		colorBtns.forEach(b => {
-			// In compact: i pallini non attivi devono collassare a 0
-			const isActive = b.classList.contains('hwm_active');
-			const size = (!compact || isActive) ? '22px' : '0';
-			b.style.setProperty('min-width', size, 'important');
-			b.style.setProperty('min-height', size, 'important');
-		});
-	};
-
-	// Stato iniziale min-width: se mobile (parte compatta), i pallini non attivi partono a 0
-	if (isMobile) updateColorBtnSizes(true);
-
-	// --- Undo / Redo / Clear ---
-	// Stesse icone SVG inline su Windows e Android (nessuna dipendenza da Lucide bundled)
-	const undoBtn = createBtn(toolbar, 'rotate-ccw', 'Annulla (Undo)');
-	undoBtn.classList.add('hwm_undo-btn');
-	const redoBtn = createBtn(toolbar, 'rotate-cw', 'Ripristina (Redo)');
-	redoBtn.classList.add('hwm_redo-btn');
-	const clearBtn = createBtn(toolbar, 'trash', 'Cancella tutto');
-	clearBtn.classList.add('hwm_clear-btn');
-
-	toolbar.createDiv({ cls: 'hwm_separator' });
-
-	// --- Converti in Markdown ---
-	const convertBtn = createBtn(toolbar, 'file-text', 'Converti in Markdown');
-	convertBtn.classList.add('hwm_convert-btn');
-
-	// --- Salva ---
-	const saveBtn = createBtn(toolbar, 'save', 'Salva');
-	saveBtn.classList.add('hwm_save-btn');
-
-	// --- Elimina riquadro ---
-	const deleteBtn = createBtn(toolbar, 'x', 'Elimina riquadro');
-	deleteBtn.classList.add('hwm_delete-btn');
-
-	// --- Canvas ---
-	const canvasWrap = container.createDiv({ cls: 'hwm_canvas-wrap' });
-	const { canvasWidth, canvasHeight } = plugin.settings;
-	// Usa l'altezza salvata se disponibile (per canvas espansi)
-	// canvasHeight = default settings, savedHeight = altezza dal SVG (può essere espanso)
-	const height = savedHeight ?? canvasHeight;
-	// Se debugMode è attivo, ogni evento IME/touch mostra una Notice in tempo reale
-	const debugFn = plugin.settings.debugMode
-		? (msg: string) => new Notice(msg, 3000)
-		: null;
-	const canvas = new DrawingCanvas(canvasWrap, canvasWidth, height, canvasHeight, isMobile, debugFn);
-
-	// Imposta colori sfondo e righe dalle settings
 	const bgColor = getEffectiveBgColor(plugin.settings);
-	const lineColor = getEffectiveLineColor(plugin.settings);
-	canvas.setBackground(bgColor, lineColor);
-	// Colore penna di default adattato al tema
-	canvas.setColor(colors[0]!);
-
-	// Applica sfondo anche al container CSS
 	container.style.backgroundColor = bgColor;
 
-	// Carica tratti esistenti, rimappando i colori al tema corrente
-	if (strokes.length > 0) {
-		const remapped = strokes.map(s => ({
-			...s,
-			color: remapStrokeColor(s.color, plugin.settings.bgMode)
-		}));
-		canvas.loadStrokes(remapped);
-		// Ri-salva l'SVG con colori e sfondo aggiornati
-		saveToSvg(canvas, data, plugin);
-	}
+	const collapsedHeight = plugin.settings.canvasHeight;
 
-	// --- Handle di resize in basso (colori adattati al tema) ---
-	const resizeHandle = container.createDiv({ cls: 'hwm_resize-handle' });
-	resizeHandle.createEl('span', { text: '⋯' });
-	if (isDark) {
-		resizeHandle.style.background = '#2a2a2a';
-		resizeHandle.style.borderTopColor = '#444';
-		resizeHandle.style.color = '#888';
-	}
-	setupResizeHandle(resizeHandle, canvas);
+	// --- 3 bottoni inline ---
+	const btnBar = container.createDiv({ cls: 'hwm_inline-buttons' });
+	if (isDark) btnBar.classList.add('hwm_inline-buttons--dark');
 
-	// --- Event handlers ---
+	const deleteBtn = createBtn(btnBar, 'x', 'Elimina riquadro');
+	deleteBtn.classList.add('hwm_delete-btn');
 
-	// Penna / Gomma
-	penBtn.addEventListener('click', () => {
-		canvas.setMode('pen');
-		penBtn.classList.add('hwm_active');
-		eraserBtn.classList.remove('hwm_active');
-	});
-	eraserBtn.addEventListener('click', () => {
-		canvas.setMode('eraser');
-		eraserBtn.classList.add('hwm_active');
-		penBtn.classList.remove('hwm_active');
+	const convertBtn = createBtn(btnBar, 'file-text', 'Converti in Markdown');
+	convertBtn.classList.add('hwm_convert-btn');
+
+	const collapseBtn = createBtn(btnBar, 'chevron-up', 'Comprimi');
+	collapseBtn.classList.add('hwm_collapse-btn');
+
+	// --- Preview SVG via CSS background-image (nessun <img> dentro cm-content) ---
+	const preview = container.createDiv({ cls: 'hwm_inline-preview' });
+	let isExpanded = true;
+
+	let currentSvgContent = svgContent;
+	let currentStrokes    = strokes;
+
+	renderPreviewContent(preview, currentSvgContent);
+
+	// Callback refresh dalla tab editor
+	plugin.previewCallbacks.set(data.id, (newSvgContent) => {
+		if (!preview.isConnected) return;
+		currentSvgContent = newSvgContent;
+		currentStrokes    = parseSvgStrokes(newSvgContent);
+		renderPreviewContent(preview, newSvgContent);
 	});
 
-	// Colori
-	for (let i = 0; i < colorBtns.length; i++) {
-		const btn = colorBtns[i]!;
-		const color = colors[i]!;
-		btn.addEventListener('click', () => {
-			colorBtns.forEach(b => b.classList.remove('hwm_active'));
-			btn.classList.add('hwm_active');
-			canvas.setColor(color);
-			// Aggiorna min-width: il nuovo pallino attivo torna a 22px,
-			// gli altri restano collassati se siamo in compact mode
-			if (isMobile) {
-				updateColorBtnSizes(toolbar.classList.contains('hwm_toolbar--compact'));
-			}
-		});
-	}
+	// Collapse/Expand
+	collapseBtn.addEventListener('click', (e) => {
+		e.stopPropagation();
+		isExpanded = !isExpanded;
+		if (isExpanded) {
+			preview.classList.remove('hwm_collapsed');
+			preview.style.maxHeight = '';
+			collapseBtn.classList.remove('hwm_rotated');
+			collapseBtn.title = 'Comprimi';
+		} else {
+			preview.classList.add('hwm_collapsed');
+			preview.style.maxHeight = collapsedHeight + 'px';
+			collapseBtn.classList.add('hwm_rotated');
+			collapseBtn.title = 'Espandi';
+		}
+	});
 
-	// Undo / Redo / Clear
-	undoBtn.addEventListener('click', () => canvas.undo());
-	redoBtn.addEventListener('click', () => canvas.redo());
-	clearBtn.addEventListener('click', () => canvas.clear());
+	// Bottone matita portale (fuori da cm-content)
+	createLegacyPortalButton(container, plugin.app, plugin, data.id, data.svg, ctx.sourcePath);
 
-	// Converti in Markdown: SVG → PNG base64 → Gemini OCR → parser → sostituisce code block
-	convertBtn.addEventListener('click', async () => {
-		const strokes = canvas.getStrokes();
-		if (strokes.length === 0) {
+	// Converti
+	convertBtn.addEventListener('click', async (e) => {
+		e.stopPropagation();
+		if (!currentSvgContent || currentStrokes.length === 0) {
 			new Notice('Nessun tratto da convertire');
 			return;
 		}
-
-		try {
-			new Notice('Riconoscimento in corso…');
-
-			// 1. Genera la stringa SVG dai tratti correnti del canvas
-			const svgString = strokesToSvg(
-				strokes,
-				canvas.getWidth(),
-				canvas.getHeight(),
-				canvas.getBgColor(),
-				canvas.getLineColor()
-			);
-
-			// 2. Parsa la stringa SVG in un elemento DOM per la conversione
-			const parser = new DOMParser();
-			const svgDoc = parser.parseFromString(svgString, 'image/svg+xml');
-			const svgEl = svgDoc.documentElement as unknown as SVGElement;
-
-			// 3. Converte l'SVG in PNG base64 tramite un canvas HTML temporaneo
-			const base64 = await svgToBase64Png(svgEl);
-
-			// 4. Invia l'immagine a Gemini per il riconoscimento OCR
-			const recognizer = getRecognizer(plugin.settings.geminiApiKey, plugin.settings.ocrLanguages);
-			const rawText = await recognizer.recognize(base64);
-
-			if (!rawText.trim()) {
-				new Notice('Nessun testo riconosciuto');
-				return;
-			}
-
-			// 5. Converte il testo grezzo in markdown strutturato
-			const markdown = parseMarkdown(rawText);
-
-			// 6. Sposta l'SVG nella cartella _converted con nome data-ora
-			await archiveSvg(data, plugin);
-
-			// 7. Sostituisce il code block handwriting con il testo markdown
-			canvas.destroy();
-			await replaceEmbedWithMarkdown(ctx, data, markdown, plugin);
-
-			new Notice('Conversione completata!');
-		} catch (e: unknown) {
-			const msg = e instanceof Error ? e.message : String(e);
-			new Notice('Errore OCR: ' + msg);
-		}
+		await doConvert(currentSvgContent, data, ctx, plugin);
 	});
 
-	// Salva SVG su disco
-	saveBtn.addEventListener('click', async () => {
-		await saveToSvg(canvas, data, plugin);
-	});
-
-	// Elimina: rimuove il code block dal file markdown e cancella l'SVG
-	deleteBtn.addEventListener('click', async () => {
-		const confirmed = confirm('Eliminare questo riquadro handwriting e il file SVG associato?');
-		if (!confirmed) return;
-		canvas.destroy();
-		await removeEmbed(ctx, data, plugin);
-	});
-
-	// Auto-save debounced: salva automaticamente 2 secondi dopo l'ultimo cambiamento
-	let saveTimer: ReturnType<typeof setTimeout> | null = null;
-	canvas.onChange(() => {
-		if (saveTimer) clearTimeout(saveTimer);
-		saveTimer = setTimeout(async () => {
-			await saveToSvg(canvas, data, plugin);
-		}, 2000);
+	// Elimina
+	deleteBtn.addEventListener('click', async (e) => {
+		e.stopPropagation();
+		if (!confirm('Eliminare questo riquadro handwriting e il file SVG associato?')) return;
+		await removeLegacyEmbed(ctx, data, plugin);
 	});
 }
 
-/* ---------- Resize handle ---------- */
-
-// Permette di trascinare il bordo inferiore per ridimensionare il canvas
-function setupResizeHandle(handle: HTMLElement, canvas: DrawingCanvas) {
-	let startY = 0;
-	let startHeight = 0;
-
-	const onPointerMove = (e: PointerEvent) => {
-		e.preventDefault();
-		const delta = e.clientY - startY;
-		const newHeight = Math.max(100, startHeight + delta);
-		canvas.resizeHeight(newHeight);
-	};
-
-	const onPointerUp = () => {
-		document.removeEventListener('pointermove', onPointerMove);
-		document.removeEventListener('pointerup', onPointerUp);
-	};
-
-	handle.addEventListener('pointerdown', (e: PointerEvent) => {
-		e.preventDefault();
-		startY = e.clientY;
-		startHeight = canvas.getHeight();
-		document.addEventListener('pointermove', onPointerMove);
-		document.addEventListener('pointerup', onPointerUp);
-	});
+// Renderizza l'SVG come CSS background-image su un <div> (legacy).
+// Evita <img> dentro cm-content che possono influenzare l'handwriting Android.
+function renderPreviewContent(preview: HTMLElement, svgContent: string | null) {
+	preview.empty();
+	if (svgContent) {
+		const div = preview.createDiv({ cls: 'hwm_preview-bg' });
+		div.style.backgroundImage = `url('data:image/svg+xml,${encodeURIComponent(svgContent)}')`;
+		// Calcola aspect ratio dal viewBox
+		const m = svgContent.match(/viewBox="0 0 (\d+) (\d+)"/);
+		const svgW = m ? parseInt(m[1]!) : 800;
+		const svgH = m ? parseInt(m[2]!) : 300;
+		div.style.paddingBottom = (svgH / svgW * 100) + '%';
+	} else {
+		preview.createDiv({ cls: 'hwm_placeholder', text: 'Usa il bottone matita in alto a destra per disegnare' });
+	}
 }
 
-/* ---------- File I/O ---------- */
+/* =============================================
+   Conversione OCR — Nuovo formato wiki
+   ============================================= */
 
-// Carica il file SVG e ne estrae i tratti + altezza canvas
+async function doConvertWiki(
+	svgContent: string,
+	svgPath: string,
+	sourcePath: string,
+	plugin: HandwritingPlugin
+) {
+	try {
+		new Notice('Riconoscimento in corso…');
+		const parser = new DOMParser();
+		const svgEl  = parser.parseFromString(svgContent, 'image/svg+xml')
+			.documentElement as unknown as SVGElement;
+		const base64     = await svgToBase64Png(svgEl);
+		const recognizer = getRecognizer(plugin.settings.geminiApiKey, plugin.settings.ocrLanguages);
+		const rawText    = await recognizer.recognize(base64);
+		if (!rawText.trim()) { new Notice('Nessun testo riconosciuto'); return; }
+
+		const markdown = parseMarkdown(rawText);
+		await archiveSvgByPath(svgPath, plugin);
+		await replaceWikiEmbedWithMarkdown(svgPath, markdown, sourcePath, plugin);
+		new Notice('Conversione completata!');
+	} catch (e: unknown) {
+		new Notice('Errore OCR: ' + (e instanceof Error ? e.message : String(e)));
+	}
+}
+
+/* =============================================
+   Conversione OCR — Legacy (code block)
+   ============================================= */
+
+async function doConvert(
+	svgContent: string,
+	data: EmbedData,
+	ctx: MarkdownPostProcessorContext,
+	plugin: HandwritingPlugin
+) {
+	try {
+		new Notice('Riconoscimento in corso…');
+		const parser = new DOMParser();
+		const svgEl  = parser.parseFromString(svgContent, 'image/svg+xml')
+			.documentElement as unknown as SVGElement;
+		const base64     = await svgToBase64Png(svgEl);
+		const recognizer = getRecognizer(plugin.settings.geminiApiKey, plugin.settings.ocrLanguages);
+		const rawText    = await recognizer.recognize(base64);
+		if (!rawText.trim()) { new Notice('Nessun testo riconosciuto'); return; }
+
+		const markdown = parseMarkdown(rawText);
+		await archiveSvg(data, plugin);
+		await replaceEmbedWithMarkdown(ctx, data, markdown, plugin);
+		new Notice('Conversione completata!');
+	} catch (e: unknown) {
+		new Notice('Errore OCR: ' + (e instanceof Error ? e.message : String(e)));
+	}
+}
+
+/* =============================================
+   File I/O
+   ============================================= */
+
+// Carica il file SVG e ne estrae tratti e contenuto grezzo
 async function loadSvgData(
 	svgPath: string,
 	plugin: HandwritingPlugin
-): Promise<{ strokes: Stroke[]; canvasHeight: number | null }> {
+): Promise<{ strokes: Stroke[]; svgContent: string | null }> {
 	const file = plugin.app.vault.getAbstractFileByPath(svgPath);
 	if (file instanceof TFile) {
 		const content = await plugin.app.vault.read(file);
 		const strokes = parseSvgStrokes(content);
-		// Estrai altezza dal viewBox dell'SVG per mantenere canvas espansi
-		const heightMatch = content.match(/viewBox="0 0 \d+ (\d+)"/);
-		const canvasHeight = heightMatch ? parseInt(heightMatch[1] ?? '0') : null;
-		return { strokes, canvasHeight };
+		return { strokes, svgContent: content };
 	}
-	return { strokes: [], canvasHeight: null };
+	return { strokes: [], svgContent: null };
 }
 
-// Salva i tratti come file SVG nel vault
-async function saveToSvg(
-	canvas: DrawingCanvas,
-	data: EmbedData,
-	plugin: HandwritingPlugin
-) {
-	const strokes = canvas.getStrokes();
-	const width = canvas.getWidth();
-	const height = canvas.getHeight();
-	const svg = strokesToSvg(strokes, width, height, canvas.getBgColor(), canvas.getLineColor());
+/* =============================================
+   Regex per i due formati nel file .md
+   ============================================= */
 
-	// Crea la cartella se non esiste
-	const folderPath = data.svg.substring(0, data.svg.lastIndexOf('/'));
-	if (folderPath) {
-		const folder = plugin.app.vault.getAbstractFileByPath(folderPath);
-		if (!folder) {
-			await plugin.app.vault.createFolder(folderPath);
-		}
-	}
-
-	// Scrivi o aggiorna il file SVG
-	const existing = plugin.app.vault.getAbstractFileByPath(data.svg);
-	if (existing instanceof TFile) {
-		await plugin.app.vault.modify(existing, svg);
-	} else {
-		await plugin.app.vault.create(data.svg, svg);
-	}
+// Regex per trovare ![[svgPath]] nel file .md
+function wikiEmbedRegex(svgPath: string): RegExp {
+	const escaped = escapeRegex(svgPath);
+	return new RegExp(`\\n?!\\[\\[${escaped}\\]\\]\\n?`);
 }
 
-/* ---------- Elimina embed ---------- */
-
-// Rimuove il code block dal file markdown e cancella il file SVG
-async function removeEmbed(
-	ctx: MarkdownPostProcessorContext,
-	data: EmbedData,
-	plugin: HandwritingPlugin
-) {
-	// Trova il file markdown che contiene il code block
-	const mdFile = plugin.app.vault.getAbstractFileByPath(ctx.sourcePath);
-	if (!(mdFile instanceof TFile)) {
-		new Notice('File markdown non trovato');
-		return;
-	}
-
-	// Leggi il contenuto e trova il code block da rimuovere
-	const content = await plugin.app.vault.read(mdFile);
-	// Cerca il blocco ```handwriting con l'id corrispondente
-	const pattern = new RegExp(
-		'\\n?```handwriting\\n.*?"id"\\s*:\\s*"' + escapeRegex(data.id) + '".*?\\n```\\n?',
-		's'
+// Regex per trovare il code block legacy con l'id specifico
+function codeBlockRegex(embedId: string): RegExp {
+	const escaped = escapeRegex(embedId);
+	return new RegExp(
+		'\\n?```handwriting\\n.*?"id"\\s*:\\s*"' + escaped + '".*?\\n```\\n?', 's'
 	);
-	const newContent = content.replace(pattern, '\n');
-
-	if (newContent !== content) {
-		await plugin.app.vault.modify(mdFile, newContent);
-	}
-
-	// Cancella il file SVG associato
-	const svgFile = plugin.app.vault.getAbstractFileByPath(data.svg);
-	if (svgFile instanceof TFile) {
-		await plugin.app.vault.delete(svgFile);
-	}
-
-	new Notice('Riquadro eliminato');
 }
 
-// Escape caratteri speciali per regex
 function escapeRegex(s: string): string {
 	return s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 }
 
-/* ---------- Archivia SVG dopo conversione ---------- */
+/* =============================================
+   Elimina embed
+   ============================================= */
+
+// Rimuove ![[svgPath]] dal .md e cancella il file SVG
+async function removeWikiEmbed(
+	svgPath: string,
+	sourcePath: string,
+	plugin: HandwritingPlugin
+) {
+	const mdFile = plugin.app.vault.getAbstractFileByPath(sourcePath);
+	if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
+
+	const content = await plugin.app.vault.read(mdFile);
+	const updated = content.replace(wikiEmbedRegex(svgPath), '\n');
+	if (updated !== content) await plugin.app.vault.modify(mdFile, updated);
+
+	// Cancella il file SVG
+	const svgFile = plugin.app.vault.getAbstractFileByPath(svgPath);
+	if (svgFile instanceof TFile) await plugin.app.vault.delete(svgFile);
+
+	new Notice('Riquadro eliminato');
+}
+
+// Rimuove il code block legacy dal .md e cancella il file SVG
+async function removeLegacyEmbed(
+	ctx: MarkdownPostProcessorContext,
+	data: EmbedData,
+	plugin: HandwritingPlugin
+) {
+	const mdFile = plugin.app.vault.getAbstractFileByPath(ctx.sourcePath);
+	if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
+
+	const content = await plugin.app.vault.read(mdFile);
+	const updated = content.replace(codeBlockRegex(data.id), '\n');
+	if (updated !== content) await plugin.app.vault.modify(mdFile, updated);
+
+	const svgFile = plugin.app.vault.getAbstractFileByPath(data.svg);
+	if (svgFile instanceof TFile) await plugin.app.vault.delete(svgFile);
+
+	new Notice('Riquadro eliminato');
+}
+
+/* =============================================
+   Archivia SVG dopo conversione
+   ============================================= */
+
+async function archiveSvgByPath(svgPath: string, plugin: HandwritingPlugin) {
+	const svgFile = plugin.app.vault.getAbstractFileByPath(svgPath);
+	if (!(svgFile instanceof TFile)) return;
+	await _moveSvgToConverted(svgFile, plugin);
+}
 
-// Rinomina e sposta l'SVG in _handwriting/_converted/AAAA-MM-GG_HH-MM-SS.svg
 async function archiveSvg(data: EmbedData, plugin: HandwritingPlugin) {
 	const svgFile = plugin.app.vault.getAbstractFileByPath(data.svg);
 	if (!(svgFile instanceof TFile)) return;
+	await _moveSvgToConverted(svgFile, plugin);
+}
 
-	// Costruisce il timestamp nel formato 2026-03-08_14-30-00
+// Sposta il file SVG nella cartella _converted con nome timestamp
+async function _moveSvgToConverted(svgFile: TFile, plugin: HandwritingPlugin) {
 	const now = new Date();
 	const pad = (n: number) => String(n).padStart(2, '0');
-	const timestamp = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}` +
+	const ts  = `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}` +
 		`_${pad(now.getHours())}-${pad(now.getMinutes())}-${pad(now.getSeconds())}`;
 
-	// Cartella destinazione: _handwriting/_converted/
 	const destFolder = `${plugin.settings.svgFolder}/_converted`;
 	if (!plugin.app.vault.getAbstractFileByPath(destFolder)) {
 		await plugin.app.vault.createFolder(destFolder);
 	}
-
-	// Sposta il file con il nuovo nome
-	await plugin.app.vault.rename(svgFile, `${destFolder}/${timestamp}.svg`);
+	await plugin.app.vault.rename(svgFile, `${destFolder}/${ts}.svg`);
 }
 
-/* ---------- Sostituisce il code block con il markdown convertito ---------- */
+/* =============================================
+   Sostituisce embed con markdown (conversione OCR)
+   ============================================= */
+
+async function replaceWikiEmbedWithMarkdown(
+	svgPath: string,
+	markdown: string,
+	sourcePath: string,
+	plugin: HandwritingPlugin
+) {
+	const mdFile = plugin.app.vault.getAbstractFileByPath(sourcePath);
+	if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
+
+	const content = await plugin.app.vault.read(mdFile);
+	const updated = content.replace(wikiEmbedRegex(svgPath), '\n' + markdown + '\n');
+	if (updated !== content) await plugin.app.vault.modify(mdFile, updated);
+}
 
-// Trova il blocco ```handwriting con l'id corrispondente e lo rimpiazza con il testo markdown
 async function replaceEmbedWithMarkdown(
 	ctx: MarkdownPostProcessorContext,
 	data: EmbedData,
@@ -515,74 +481,261 @@ async function replaceEmbedWithMarkdown(
 	plugin: HandwritingPlugin
 ) {
 	const mdFile = plugin.app.vault.getAbstractFileByPath(ctx.sourcePath);
-	if (!(mdFile instanceof TFile)) {
-		new Notice('File markdown non trovato');
-		return;
-	}
+	if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
 
 	const content = await plugin.app.vault.read(mdFile);
-	// Cerca il blocco ```handwriting con questo specifico id
-	const pattern = new RegExp(
-		'\\n?```handwriting\\n.*?"id"\\s*:\\s*"' + escapeRegex(data.id) + '".*?\\n```\\n?',
-		's'
-	);
-	const newContent = content.replace(pattern, '\n' + markdown + '\n');
-
-	if (newContent !== content) {
-		await plugin.app.vault.modify(mdFile, newContent);
-	}
+	const updated = content.replace(codeBlockRegex(data.id), '\n' + markdown + '\n');
+	if (updated !== content) await plugin.app.vault.modify(mdFile, updated);
 }
 
-/* ---------- Comando: inserisci nuovo blocco ---------- */
+/* =============================================
+   Comando: inserisce un nuovo blocco handwriting
+   Usa il NUOVO formato ![[svg]]
+   ============================================= */
 
-export function insertHandwritingBlock(plugin: HandwritingPlugin) {
+export async function insertHandwritingBlock(plugin: HandwritingPlugin) {
 	const view = plugin.app.workspace.getActiveViewOfType(MarkdownView);
 	if (!view) {
 		new Notice('Apri un file markdown prima');
 		return;
 	}
 
-	const editor = view.editor;
-	const id = generateId();
+	const editor  = view.editor;
+	const id      = generateId();
 	const svgPath = `${plugin.settings.svgFolder}/${id}.svg`;
 
-	const block = `\n\`\`\`handwriting\n{"id":"${id}","svg":"${svgPath}"}\n\`\`\`\n`;
-	editor.replaceSelection(block);
+	// Crea il file SVG vuoto PRIMA di inserire il wikilink nel markdown.
+	// Se il file non esiste quando Obsidian processa ![[svg]], mostra
+	// "could not be found" e non renderizza image-embed → il post-processor
+	// non trova nulla da decorare e i bottoni non appaiono.
+	const bgColor   = getEffectiveBgColor(plugin.settings);
+	const lineColor = getEffectiveLineColor(plugin.settings);
+	const emptySvg  = strokesToSvg([], plugin.settings.canvasWidth, plugin.settings.canvasHeight, bgColor, lineColor);
+
+	const folder = plugin.settings.svgFolder;
+	if (!plugin.app.vault.getAbstractFileByPath(folder)) {
+		await plugin.app.vault.createFolder(folder);
+	}
+	await plugin.app.vault.create(svgPath, emptySvg);
+
+	// Inserisce il wikilink: Obsidian trova subito il file → lo renderizza come immagine
+	editor.replaceSelection(`\n![[${svgPath}]]\n`);
 }
 
-/* ---------- Helpers ---------- */
+/* =============================================
+   Helpers
+   ============================================= */
 
-function createBtn(parent: HTMLElement, icon: string, title: string): HTMLElement {
-	const btn = parent.createEl('button', {
-		cls: 'hwm_btn',
-		attr: { title }
+// Risale il DOM da `el` fino a cm-content e rimuove contenteditable="false"
+// dai wrapper CM6 (mitigazione parziale del bug handwriting Android).
+function stripContentEditableFalse(el: HTMLElement) {
+	let node: HTMLElement | null = el;
+	while (node) {
+		if (node.classList.contains('cm-content')) break;
+		if (node.getAttribute('contenteditable') === 'false') {
+			node.removeAttribute('contenteditable');
+		}
+		node.style.setProperty('pointer-events', 'none');
+		node = node.parentElement;
+	}
+}
+
+/* ---------- Pannello portale (fuori da cm-content) — Nuovo formato wiki ---------- */
+
+// Crea un pannello floating in document.body con tutti i bottoni di controllo.
+// Essendo fuori da cm-content, non interferisce con l'handwriting Android:
+// lo span internal-embed rimane identico a un'immagine normale (nessun figlio aggiunto).
+function createPortalPanel(
+	container: HTMLElement,
+	embedId: string,
+	svgPath: string,
+	sourcePath: string,
+	plugin: HandwritingPlugin
+) {
+	const isDark = plugin.settings.bgMode === 'dark';
+	const collapsedHeight = plugin.settings.canvasHeight;
+	let isExpanded = true;
+
+	// Pannello floating con sfondo e ombra, posizionato via position: fixed
+	const panel = document.createElement('div');
+	panel.className = 'hwm_portal-panel';
+	if (isDark) panel.classList.add('hwm_toolbar--dark');
+	document.body.appendChild(panel);
+
+	// --- Bottone matita: apre la tab editor ---
+	const pencilBtn = createPanelBtn(panel, 'pencil', 'Apri editor disegno');
+	pencilBtn.addEventListener('click', async () => {
+		const leaves   = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING);
+		const existing = leaves.find(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+		if (existing) {
+			plugin.app.workspace.setActiveLeaf(existing, { focus: true });
+			return;
+		}
+		const leaf = plugin.app.workspace.getLeaf('tab');
+		await leaf.setViewState({
+			type: VIEW_TYPE_HANDWRITING,
+			state: { id: embedId, svg: svgPath, sourcePath },
+			active: true,
+		});
+		plugin.app.workspace.revealLeaf(leaf);
 	});
-	// Usa SVG inline dalla mappa ICONS — identico su Windows e Android,
-	// nessuna dipendenza da setIcon/Lucide bundled
+
+	// Separatore visivo
+	const sep = document.createElement('div');
+	sep.className = 'hwm_separator';
+	panel.appendChild(sep);
+
+	// --- Bottone converti in Markdown ---
+	const convertBtn = createPanelBtn(panel, 'file-text', 'Converti in Markdown');
+	convertBtn.addEventListener('click', async () => {
+		const { strokes, svgContent } = await loadSvgData(svgPath, plugin);
+		if (!svgContent || strokes.length === 0) {
+			new Notice('Nessun tratto da convertire');
+			return;
+		}
+		await doConvertWiki(svgContent, svgPath, sourcePath, plugin);
+	});
+
+	// --- Bottone comprimi/espandi ---
+	const collapseBtn = createPanelBtn(panel, 'chevron-up', 'Comprimi');
+	collapseBtn.classList.add('hwm_collapse-btn');
+	collapseBtn.addEventListener('click', () => {
+		isExpanded = !isExpanded;
+		if (isExpanded) {
+			container.style.maxHeight = '';
+			container.style.overflow  = '';
+			collapseBtn.classList.remove('hwm_rotated');
+			collapseBtn.title = 'Comprimi';
+		} else {
+			container.style.maxHeight = collapsedHeight + 'px';
+			container.style.overflow  = 'hidden';
+			collapseBtn.classList.add('hwm_rotated');
+			collapseBtn.title = 'Espandi';
+		}
+	});
+
+	// --- Bottone elimina ---
+	const deleteBtn = createPanelBtn(panel, 'x', 'Elimina riquadro');
+	deleteBtn.classList.add('hwm_delete-btn');
+	deleteBtn.addEventListener('click', async () => {
+		if (!confirm('Eliminare questo riquadro handwriting e il file SVG associato?')) return;
+		await removeWikiEmbed(svgPath, sourcePath, plugin);
+	});
+
+	// RAF loop: aggiorna posizione e visibilità.
+	// Si auto-ferma quando il container lascia il DOM.
+	const update = () => {
+		if (!container.isConnected) {
+			panel.remove();
+			return;
+		}
+		const rect       = container.getBoundingClientRect();
+		const inViewport = rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0;
+		panel.style.display = inViewport ? 'flex' : 'none';
+		if (inViewport) {
+			// Posizionato in alto a destra del container via position: fixed.
+			// "right" con position:fixed = distanza dal bordo destro del viewport.
+			panel.style.top   = (rect.top + 6) + 'px';
+			panel.style.right = (window.innerWidth - rect.right + 6) + 'px';
+			panel.style.left  = 'auto';
+		}
+		// Nasconde il bottone matita se la tab editor è già aperta
+		const editorOpen = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING)
+			.some(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+		pencilBtn.style.display = editorOpen ? 'none' : 'flex';
+		requestAnimationFrame(update);
+	};
+	requestAnimationFrame(update);
+}
+
+// Crea un bottone div nel pannello portale
+function createPanelBtn(parent: HTMLElement, icon: string, title: string): HTMLElement {
+	const btn = document.createElement('div');
+	btn.className = 'hwm_btn';
+	btn.setAttribute('title', title);
+	btn.setAttribute('role', 'button');
+	btn.setAttribute('tabindex', '0');
+	btn.innerHTML = ICONS[icon] ?? '';
+	parent.appendChild(btn);
+	return btn;
+}
+
+/* ---------- Bottone portale (fuori da cm-content) — Formato legacy ---------- */
+
+// Crea un singolo <button> in document.body per aprire la tab editor.
+// Solo per il vecchio formato ```handwriting``` (il container legacy non è in cm-content,
+// quindi i bottoni inline sono già sicuri; questo aggiunge solo la matita portale).
+function createLegacyPortalButton(
+	container: HTMLElement,
+	app: import('obsidian').App,
+	plugin: HandwritingPlugin,
+	embedId: string,
+	svgPath: string,
+	sourcePath: string
+) {
+	const btn = document.createElement('button');
+	btn.className = 'hwm_portal-btn';
+	btn.innerHTML = ICONS['pencil'] ?? '';
+	btn.title = 'Apri editor disegno';
+	document.body.appendChild(btn);
+
+	// Apre la tab editor al click
+	btn.addEventListener('click', async () => {
+		const leaves   = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING);
+		const existing = leaves.find(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+		if (existing) {
+			plugin.app.workspace.setActiveLeaf(existing, { focus: true });
+			return;
+		}
+		const leaf = plugin.app.workspace.getLeaf('tab');
+		await leaf.setViewState({
+			type: VIEW_TYPE_HANDWRITING,
+			state: { id: embedId, svg: svgPath, sourcePath },
+			active: true,
+		});
+		plugin.app.workspace.revealLeaf(leaf);
+	});
+
+	// RAF loop: aggiorna posizione e visibilità
+	const update = () => {
+		if (!container.isConnected) {
+			btn.remove();
+			return;
+		}
+		const rect = container.getBoundingClientRect();
+		btn.style.top  = (rect.top  + 6) + 'px';
+		btn.style.left = (rect.right - 44) + 'px';
+		const editorOpen = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING)
+			.some(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+		const inViewport = rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0;
+		btn.style.display = (inViewport && !editorOpen) ? 'flex' : 'none';
+		requestAnimationFrame(update);
+	};
+	requestAnimationFrame(update);
+}
+
+// Usa <div> invece di <button> per i bottoni dentro cm-content.
+// I <button> su Android Mobile possono interferire con l'handwriting.
+function createBtn(parent: HTMLElement, icon: string, title: string): HTMLElement {
+	const btn = parent.createDiv({ cls: 'hwm_btn', attr: { title, role: 'button', tabindex: '0' } });
 	btn.innerHTML = ICONS[icon] ?? '';
 	return btn;
 }
 
-// Converte un SVGElement in immagine PNG base64 tramite un canvas HTML temporaneo.
-// Serializza l'SVG in un Blob → URL oggetto → disegna su canvas → estrae base64.
 function svgToBase64Png(svgElement: SVGElement): Promise<string> {
 	return new Promise((resolve, reject) => {
 		const canvas = document.createElement('canvas');
-		const ctx = canvas.getContext('2d')!;
-		const img = new Image();
-
-		// Serializza l'SVGElement in testo e crea un URL temporaneo
+		const ctx    = canvas.getContext('2d')!;
+		const img    = new Image();
 		const svgBlob = new Blob(
 			[new XMLSerializer().serializeToString(svgElement)],
 			{ type: 'image/svg+xml' }
 		);
 		const url = URL.createObjectURL(svgBlob);
-
 		img.onload = () => {
-			canvas.width = img.width;
+			canvas.width  = img.width;
 			canvas.height = img.height;
 			ctx.drawImage(img, 0, 0);
-			// Libera l'URL temporaneo e restituisce solo la parte base64 (senza prefisso "data:...")
 			URL.revokeObjectURL(url);
 			resolve(canvas.toDataURL('image/png').split(',')[1]!);
 		};
diff --git a/HandTranscriptMd/src/main.ts b/HandTranscriptMd/src/main.ts
index acd4671..3da5da3 100644
--- a/HandTranscriptMd/src/main.ts
+++ b/HandTranscriptMd/src/main.ts
@@ -10,13 +10,25 @@
 import { Plugin } from 'obsidian';
 import { DEFAULT_SETTINGS, HandwritingSettings, HandwritingSettingTab } from './settings';
 import { registerEmbed, insertHandwritingBlock } from './embed';
+import { VIEW_TYPE_HANDWRITING, DrawingEditorView } from './editor-view';
 
 export default class HandwritingPlugin extends Plugin {
 	settings: HandwritingSettings;
 
+	// Mappa di callback per aggiornare le preview inline quando l'editor tab salva
+	public previewCallbacks = new Map<string, (svgContent: string) => void>();
+
+	// Invocato dall'editor tab dopo ogni salvataggio per aggiornare la preview inline
+	refreshPreview(id: string, svgContent: string) {
+		this.previewCallbacks.get(id)?.(svgContent);
+	}
+
 	async onload() {
 		await this.loadSettings();
 
+		// Registra la vista editor (tab dedicata per il disegno)
+		this.registerView(VIEW_TYPE_HANDWRITING, (leaf) => new DrawingEditorView(leaf, this));
+
 		// Registra il code block processor per ```handwriting
 		registerEmbed(this);
 
@@ -24,14 +36,14 @@ export default class HandwritingPlugin extends Plugin {
 		this.addCommand({
 			id: 'insert-handwriting',
 			name: 'Insert handwriting block',
-			editorCallback: () => {
-				insertHandwritingBlock(this);
+			editorCallback: async () => {
+				await insertHandwritingBlock(this);
 			}
 		});
 
 		// Icona nella ribbon (sidebar sinistra)
-		this.addRibbonIcon('pencil', 'Insert handwriting', () => {
-			insertHandwritingBlock(this);
+		this.addRibbonIcon('pencil', 'Insert handwriting', async () => {
+			await insertHandwritingBlock(this);
 		});
 
 		// Tab impostazioni
diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css
index f08abec..c3325e7 100644
--- a/HandTranscriptMd/styles.css
+++ b/HandTranscriptMd/styles.css
@@ -12,6 +12,26 @@
 	margin: 8px 0;
 	/* Sfondo SEMPRE bianco (anche in dark mode) */
 	background: #ffffff;
+	/* Riabilita pointer-events (i wrapper CM6 sopra hanno pointer-events: none
+	   per non bloccare l'hit-test dell'handwriting Android) */
+	pointer-events: auto;
+}
+
+/* Variante wiki ![[svg]]:
+   La classe hwm_container viene aggiunta DIRETTAMENTE allo span
+   .internal-embed di Obsidian (nessun wrapper esterno, per non
+   spostare i nodi CM6 e causare crash del virtual DOM).
+   L'immagine è già renderizzata da Obsidian; noi aggiungiamo solo
+   i bottoni come figli dello span. */
+.hwm_container--wiki {
+	background: transparent; /* l'SVG ha già il suo sfondo */
+	width: 100%;
+	box-sizing: border-box;
+}
+.hwm_container--wiki img {
+	display: block;
+	width: 100%;
+	height: auto;
 }
 
 /* --- Toolbar in alto a destra --- */
@@ -257,3 +277,197 @@
 	border-color: var(--interactive-accent) !important;
 	color: #fff !important;
 }
+
+/* ========================================
+   INLINE PREVIEW — Vista nel documento
+   ======================================== */
+
+/* --- Bottoni inline (X, converti, comprimi) ---
+   Posizionati in alto a sinistra per non coprire il bottone </> di Obsidian */
+.hwm_inline-buttons {
+	position: absolute;
+	top: 6px;
+	left: 6px;
+	z-index: 5;
+	display: flex;
+	gap: 4px;
+	padding: 3px;
+	border-radius: 6px;
+	background: rgba(240, 240, 240, 0.9);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+.hwm_inline-buttons--dark {
+	background: rgba(40, 40, 40, 0.95);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+.hwm_inline-buttons--dark .hwm_btn {
+	color: #bbb;
+}
+.hwm_inline-buttons--dark .hwm_btn:hover {
+	background: rgba(255, 255, 255, 0.12);
+	color: #fff;
+}
+
+/* --- Bottone comprimi: rotazione 180° quando compresso --- */
+.hwm_collapse-btn {
+	transition: transform 0.3s ease, max-width 0.2s ease,
+	            opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
+}
+.hwm_collapse-btn.hwm_rotated {
+	transform: rotate(180deg);
+}
+
+/* --- Preview SVG inline --- */
+.hwm_inline-preview {
+	width: 100%;
+	overflow: hidden;
+	cursor: pointer;
+	/* Transizione per l'espansione/compressione */
+	transition: max-height 0.3s ease;
+}
+.hwm_inline-preview.hwm_collapsed {
+	/* max-height impostato via JS */
+	overflow: hidden;
+}
+
+/* Preview SVG via background-image (nessun <img> nel DOM per non
+   interferire con l'handwriting Android dentro cm-content) */
+.hwm_preview-bg {
+	width: 100%;
+	height: 0; /* l'altezza è data da padding-bottom (aspect ratio) */
+	background-size: 100% auto;
+	background-repeat: no-repeat;
+	background-position: top left;
+	pointer-events: none; /* il click è gestito dal div padre */
+}
+
+/* ========================================
+   PANNELLO PORTALE — Fuori da cm-content
+   Contiene tutti i bottoni del formato wiki.
+   Vive in document.body → zero impatto su
+   cm-content → non rompe handwriting Android
+   ======================================== */
+
+/* Pannello floating con tutti i bottoni (nuovo formato ![[svg]]) */
+.hwm_portal-panel {
+	position: fixed; /* coordinate viewport, aggiornate via RAF */
+	z-index: 100;
+	display: flex;
+	align-items: center;
+	gap: 0; /* spacing via margin-right sui .hwm_btn */
+	padding: 3px 6px;
+	border-radius: 6px;
+	background: rgba(240, 240, 240, 0.95);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+}
+
+/* Bottone cerchio singolo (formato legacy) */
+.hwm_portal-btn {
+	position: fixed; /* coordinate viewport, aggiornate via JS */
+	z-index: 100;
+	/* Cerchio perfetto: dimensioni fisse con !important per sovrascrivere
+	   gli stili globali di Obsidian sui button che aggiungono padding */
+	width: 36px !important;
+	height: 36px !important;
+	min-width: 36px !important;
+	min-height: 36px !important;
+	padding: 0 !important;
+	border-radius: 50% !important;
+	border: none !important;
+	background: var(--interactive-accent) !important;
+	color: #ffffff !important;
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	overflow: hidden; /* evita che l'SVG allarghi il bottone */
+	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+	transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+.hwm_portal-btn svg {
+	width: 18px !important;
+	height: 18px !important;
+	flex-shrink: 0;
+	stroke: #ffffff !important; /* forza icona bianca indipendentemente da currentColor */
+}
+.hwm_portal-btn:hover {
+	transform: scale(1.1);
+	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
+}
+
+/* ========================================
+   DRAWING MODAL — Editor come overlay
+   ======================================== */
+
+.hwm_modal {
+	width: 95vw !important;
+	max-width: 95vw !important;
+	height: 90vh;
+	display: flex;
+	flex-direction: column;
+}
+.hwm_modal .modal-content {
+	flex: 1;
+	padding: 0;
+	overflow: hidden;
+	display: flex;
+	flex-direction: column;
+}
+
+/* ========================================
+   EDITOR VIEW — Tab dedicata al disegno
+   ======================================== */
+
+/* Container principale dell'editor view */
+.hwm_editor-view {
+	display: flex;
+	flex-direction: column;
+	height: 100%;
+}
+
+/* --- Top bar: ← a sinistra | toolbar a destra --- */
+.hwm_editor-topbar {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 6px 8px;
+	background: rgba(240, 240, 240, 0.95);
+	border-bottom: 1px solid #ddd;
+	flex-shrink: 0;
+	gap: 8px;
+}
+.hwm_editor-topbar--dark {
+	background: rgba(40, 40, 40, 0.97);
+	border-bottom-color: #444;
+}
+
+/* Bottone ← (indietro, a sinistra) */
+.hwm_back-btn {
+	flex-shrink: 0;
+}
+
+/* Toolbar dentro l'editor view: posizione statica, allineata a destra */
+.hwm_editor-toolbar {
+	position: static !important;
+	top: auto !important;
+	right: auto !important;
+	box-shadow: none !important;
+	background: transparent !important;
+	padding: 0 !important;
+}
+
+/* --- Scroll container per il canvas nell'editor --- */
+.hwm_editor-scroll {
+	flex: 1;
+	overflow-y: auto;
+	overflow-x: hidden;
+}
+
+/* --- Resize handle disabilitato (visibile ma non interattivo) --- */
+.hwm_resize-handle--disabled {
+	pointer-events: none;
+	cursor: default;
+}
+.hwm_resize-handle--disabled:hover {
+	background: #f5f5f5; /* annulla l'effetto hover */
+}

From 71eef066b7b7c487d250fa5f1d65d944a7180f70 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 16 Mar 2026 08:54:35 +0100
Subject: [PATCH 02/14] =?UTF-8?q?confermato=20che=20purtroppo=20=C3=A8=20u?=
 =?UTF-8?q?n=20limite=20di=20obsidian=20/=20chrome,=20non=20si=20puo=20ris?=
 =?UTF-8?q?olvere,=20far=C3=B2=20una=20semplice=20preview=20e=20basta=20ne?=
 =?UTF-8?q?l=20documento?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md                     |  8 ++++++++
 HandTranscriptMd/src/embed.ts |  6 ++++++
 HandTranscriptMd/styles.css   | 10 ++++++++++
 3 files changed, 24 insertions(+)

diff --git a/CLAUDE.md b/CLAUDE.md
index f7e05e4..0b29255 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -207,6 +207,14 @@ cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; nod
 - Come distinguerle: `span.closest('.cm-editor')` vs `span.closest('.markdown-reading-view')`
 - Questo riduce il CE=false a un'area minima → handwriting dovrebbe funzionare nelle righe di testo circostanti
 
+**Idea — Modalità handwriting / preview (switch globale nelle impostazioni)**:
+- L'utente sceglie tra due modalità tramite un toggle nelle impostazioni (o un comando da palette):
+  - **Modalità handwriting**: i riquadri mostrano solo un piccolo badge/placeholder nel documento (niente SVG piena). Tappando il badge si apre la tab editor. L'handwriting Android funziona nel testo circostante.
+  - **Modalità preview**: i riquadri mostrano l'SVG completa inline, come ora. Niente handwriting Android, ma si vede il disegno direttamente nel documento.
+- La modalità si potrebbe cambiare anche al volo senza ricaricare Obsidian (il MutationObserver ridecorarebbe gli span al cambio impostazione)
+- Su PC (nessun conflitto handwriting) la modalità preview sarebbe sempre quella giusta; su Android si sceglierebbe in base al workflow del momento
+- Implementazione: aggiungere `hwmMode: 'handwriting' | 'preview'` a `HandwritingSettings`; in `tryDecorate()` controllare la modalità e decidere se mostrare badge o SVG piena
+
 ### Altri task aperti
 
 1. **Migliorare il riconoscimento dei caratteri speciali markdown** — `src/recognizer.ts` + `src/md-parser.ts`:
diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index 865cf44..c3b16f8 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -89,6 +89,12 @@ function setupMutationObserver(plugin: HandwritingPlugin) {
 		// Marca subito come decorato per evitare doppia elaborazione
 		span.dataset.hwmDecorated = '1';
 
+		// TEST A: pointer-events: none sullo span.
+		// Ipotesi: Chrome usa lo stesso hit-test dei pointer events per la
+		// proximity detection dell'handwriting → con none, ignora lo span e
+		// trova il cm-content[ce=true] sottostante → handwriting torna attivo.
+		span.style.pointerEvents = 'none';
+
 		// NESSUNA modifica allo span dentro cm-content.
 		// Lo lasciamo identico a un'immagine normale: nessuna classe extra,
 		// nessun figlio aggiunto. Questo evita di rompere l'handwriting Android
diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css
index c3325e7..e6c5c9c 100644
--- a/HandTranscriptMd/styles.css
+++ b/HandTranscriptMd/styles.css
@@ -17,6 +17,16 @@
 	pointer-events: auto;
 }
 
+/* TEST B: limita l'altezza dell'immagine SVG handwriting nel documento.
+   Ipotesi: l'SVG dopo auto-expand supera i 300px → copre più area →
+   aumenta l'interferenza con la proximity detection handwriting Android
+   (40dp dal bordo). Limitando a 300px riduciamo l'area CE=false.
+   object-fit: contain mantiene le proporzioni senza tagliare il disegno. */
+.internal-embed[src*="_handwriting/"] img {
+	max-height: 300px;
+	object-fit: contain;
+}
+
 /* Variante wiki ![[svg]]:
    La classe hwm_container viene aggiunta DIRETTAMENTE allo span
    .internal-embed di Obsidian (nessun wrapper esterno, per non

From b59236b964871dcbf005731fe43a117f4582baf3 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Thu, 19 Mar 2026 14:47:31 +0100
Subject: [PATCH 03/14] aggiunta esclusione cartella visual studio

---
 .gitignore | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/.gitignore b/.gitignore
index 1bcc155..5d76e9c 100644
--- a/.gitignore
+++ b/.gitignore
@@ -23,3 +23,5 @@ data.json
 
 # Plugin di riferimento esterno (non fa parte di questo progetto)
 obsidian_ink/
+
+.vs/

From 6109e649c2a31a4cf2c19d4292b7e4fb1befdeb8 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Thu, 19 Mar 2026 15:29:33 +0100
Subject: [PATCH 04/14] eliminata la cartella C

---
 .../Projects/handwriting-to-markdown/main.js  |  16 -
 .../handwriting-to-markdown/manifest.json     |   9 -
 .../Projects/handwriting-to-markdown/styles.css | 408 ------------------
 3 files changed, 433 deletions(-)
 delete mode 100644 HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js
 delete mode 100644 HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json
 delete mode 100644 HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css

diff --git a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js
deleted file mode 100644
index 0d6d1fc..0000000
--- a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/main.js	
+++ /dev/null
@@ -1,16 +0,0 @@
-/*
-THIS IS A GENERATED/BUNDLED FILE BY ESBUILD
-if you want to view the source, please visit the github repository of this plugin
-*/
-
-var N=Object.defineProperty;var Pt=Object.getOwnPropertyDescriptor;var Et=Object.getOwnPropertyNames;var Mt=Object.prototype.hasOwnProperty;var _t=(i,t)=>{for(var e in t)N(i,e,{get:t[e],enumerable:!0})},Dt=(i,t,e,n)=>{if(t&&typeof t=="object"||typeof t=="function")for(let s of Et(t))!Mt.call(i,s)&&s!==e&&N(i,s,{get:()=>t[s],enumerable:!(n=Pt(t,s))||n.enumerable});return i};var Ht=i=>Dt(N({},"__esModule",{value:!0}),i);var qt={};_t(qt,{default:()=>F});module.exports=Ht(qt);var ft=require("obsidian");var x=require("obsidian"),Tt={light:"#ffffff",dark:"#1e1e1e",custom:"#ffffff"},Bt={light:"#e0e0e0",dark:"#3a3a3a",custom:"#cccccc"};function O(i){return i.bgMode==="custom"?i.bgCustomColor:Tt[i.bgMode]}function rt(i){return i.bgMode==="custom"?It(i.bgCustomColor):Bt[i.bgMode]}function It(i){let t=parseInt(i.slice(1,3),16),e=parseInt(i.slice(3,5),16),n=parseInt(i.slice(5,7),16),o=t*.299+e*.587+n*.114>128?-30:30,r=a=>Math.max(0,Math.min(255,a+o));return`#${r(t).toString(16).padStart(2,"0")}${r(e).toString(16).padStart(2,"0")}${r(n).toString(16).padStart(2,"0")}`}var it=["#000000","#1e40af","#dc2626","#16a34a"],ot=["#ffffff","#60a5fa","#f87171","#4ade80"];function at(i,t){let e=i.toLowerCase();if(t==="dark"){let n=it.indexOf(e);if(n>=0)return ot[n]}else if(t==="light"){let n=ot.indexOf(e);if(n>=0)return it[n]}return i}var ct={svgFolder:"_handwriting",canvasWidth:800,canvasHeight:300,bgMode:"light",bgCustomColor:"#ffffff",ocrLanguages:["it","en"],geminiApiKey:"",debugMode:!1},B=class extends x.PluginSettingTab{constructor(t,e){super(t,e),this.plugin=e}display(){let{containerEl:t}=this;t.empty(),t.createEl("h2",{text:"Handwriting to Markdown"}),new x.Setting(t).setName("Cartella SVG").setDesc("Cartella nel vault dove vengono salvati i file SVG dei disegni").addText(e=>e.setPlaceholder("_handwriting").setValue(this.plugin.settings.svgFolder).onChange(async n=>{this.plugin.settings.svgFolder=n||"_handwriting",await this.plugin.saveSettings()})),new x.Setting(t).setName("Larghezza canvas").setDesc("Risoluzione orizzontale del canvas in pixel").addText(e=>e.setValue(String(this.plugin.settings.canvasWidth)).onChange(async n=>{let s=parseInt(n);!isNaN(s)&&s>100&&(this.plugin.settings.canvasWidth=s,await this.plugin.saveSettings())})),new x.Setting(t).setName("Altezza canvas").setDesc("Risoluzione verticale del canvas in pixel").addText(e=>e.setValue(String(this.plugin.settings.canvasHeight)).onChange(async n=>{let s=parseInt(n);!isNaN(s)&&s>50&&(this.plugin.settings.canvasHeight=s,await this.plugin.saveSettings())})),new x.Setting(t).setName("Sfondo canvas").setDesc("Colore di sfondo del riquadro di disegno").addDropdown(e=>e.addOption("light","Chiaro (bianco)").addOption("dark","Scuro (grigio scuro)").addOption("custom","Personalizzato").setValue(this.plugin.settings.bgMode).onChange(async n=>{this.plugin.settings.bgMode=n,await this.plugin.saveSettings(),this.display()})),this.plugin.settings.bgMode==="custom"&&new x.Setting(t).setName("Colore sfondo personalizzato").setDesc("Scegli il colore hex dello sfondo").addColorPicker(e=>e.setValue(this.plugin.settings.bgCustomColor).onChange(async n=>{this.plugin.settings.bgCustomColor=n,await this.plugin.saveSettings()})),new x.Setting(t).setName("Chiave API Gemini").setDesc("Necessaria per il riconoscimento OCR della scrittura a mano. Ottienila da Google AI Studio (aistudio.google.com).").addText(e=>{e.setPlaceholder("AIza...").setValue(this.plugin.settings.geminiApiKey).onChange(async n=>{this.plugin.settings.geminiApiKey=n.trim(),await this.plugin.saveSettings()}),e.inputEl.type="password"}),new x.Setting(t).setName("Lingue OCR").setDesc('Codici lingua BCP-47 separati da virgola (es. "it, en, fr"). Usati dal riconoscitore di scrittura su Android.').addText(e=>e.setValue(this.plugin.settings.ocrLanguages.join(", ")).setPlaceholder("it, en").onChange(async n=>{let s=n.split(",").map(o=>o.trim()).filter(o=>o.length>0);this.plugin.settings.ocrLanguages=s.length>0?s:["it","en"],await this.plugin.saveSettings()})),new x.Setting(t).setName("Modalit\xE0 debug").setDesc("Mostra notifiche in tempo reale per eventi IME/touch (utile per diagnosticare problemi su Android).").addToggle(e=>e.setValue(this.plugin.settings.debugMode).onChange(async n=>{this.plugin.settings.debugMode=n,await this.plugin.saveSettings()}))}};var h=require("obsidian");function I(i){return i.map(t=>({points:t.points.map(e=>({...e})),color:t.color,width:t.width}))}var A=class{constructor(t,e,n,s,o=!1,r=null){this.strokes=[];this.currentStroke=null;this.mode="pen";this.color="#000000";this.lineWidth=2;this.isDrawing=!1;this.changeCb=null;this.mobileMode=!1;this.history=[];this.historyIdx=-1;this.eraserChanged=!1;this.resizeCb=null;this.LINE_SPACING=32;this.bgColor="#ffffff";this.lineColor="#e0e0e0";this.EXPAND_MARGIN=40;this.EXPAND_AMOUNT=150;this.animFrameId=null;this.boundBeforeInput=null;this.container=null;this.debugFn=null;this.canvas=document.createElement("canvas"),this.canvas.width=e,this.canvas.height=n,this.defaultHeight=s,this.mobileMode=o,this.container=t,this.debugFn=r,o&&(this.boundBeforeInput=a=>{var d;this.isDrawing&&((d=this.debugFn)==null||d.call(this,"\u{1F6AB} beforeinput bloccato"),a.preventDefault())},document.addEventListener("beforeinput",this.boundBeforeInput,!0)),this.canvas.classList.add("hwm_canvas"),this.canvas.style.setProperty("touch-action","none","important"),t.appendChild(this.canvas),this.ctx=this.canvas.getContext("2d"),this.clearBackground(),this.pushHistory(),this.boundDown=this.onPointerDown.bind(this),this.boundMove=this.onPointerMove.bind(this),this.boundUp=this.onPointerUp.bind(this),this.canvas.addEventListener("pointerdown",this.boundDown),this.canvas.addEventListener("pointermove",this.boundMove),this.canvas.addEventListener("pointerup",this.boundUp),this.canvas.addEventListener("pointerleave",this.boundUp)}onChange(t){this.changeCb=t}onResize(t){this.resizeCb=t}allowFingerScroll(){this.canvas.style.setProperty("touch-action","pan-y","important")}setMode(t){this.mode=t}getMode(){return this.mode}setColor(t){this.color=t}setLineWidth(t){this.lineWidth=t}getStrokes(){return[...this.strokes]}getWidth(){return this.canvas.width}getHeight(){return this.canvas.height}setBackground(t,e){this.bgColor=t,this.lineColor=e,this.redraw()}getBgColor(){return this.bgColor}getLineColor(){return this.lineColor}loadStrokes(t){this.strokes=I(t),this.history=[],this.historyIdx=-1,this.pushHistory(),this.redraw()}undo(){var t;return this.historyIdx<=0?!1:(this.historyIdx--,this.strokes=I(this.history[this.historyIdx]),this.redraw(),(t=this.changeCb)==null||t.call(this),!0)}redo(){var t;return this.historyIdx>=this.history.length-1?!1:(this.historyIdx++,this.strokes=I(this.history[this.historyIdx]),this.redraw(),(t=this.changeCb)==null||t.call(this),!0)}clear(){var t;this.strokes=[],this.pushHistory(),this.redraw(),this.animateHeight(this.defaultHeight),(t=this.changeCb)==null||t.call(this)}resizeHeight(t){t<100||(this.canvas.height=t,this.redraw())}destroy(){this.animFrameId!==null&&cancelAnimationFrame(this.animFrameId),this.canvas.removeEventListener("pointerdown",this.boundDown),this.canvas.removeEventListener("pointermove",this.boundMove),this.canvas.removeEventListener("pointerup",this.boundUp),this.canvas.removeEventListener("pointerleave",this.boundUp),this.boundBeforeInput&&(document.removeEventListener("beforeinput",this.boundBeforeInput,!0),this.boundBeforeInput=null)}pushHistory(){this.history=this.history.slice(0,this.historyIdx+1),this.history.push(I(this.strokes)),this.historyIdx=this.history.length-1}onPointerDown(t){var s,o;let e=t.pointerType||"pen";if(this.mobileMode&&e==="touch"){(s=this.debugFn)==null||s.call(this,"\u{1F446} Dito sul canvas"),t.stopPropagation();return}t.preventDefault(),this.mobileMode&&((o=this.debugFn)==null||o.call(this,`\u{1F58A} pointerdown tipo="${t.pointerType}" \u2192 "${e}"`),t.stopPropagation()),this.canvas.setPointerCapture(t.pointerId),this.isDrawing=!0;let n=this.eventToPoint(t);this.mode==="pen"?this.currentStroke={points:[n],color:this.color,width:this.lineWidth}:(this.eraserChanged=!1,this.eraseAt(n))}onPointerMove(t){if(this.mobileMode&&(t.pointerType||"pen")==="touch"||!this.isDrawing)return;t.preventDefault();let e=this.eventToPoint(t);this.mode==="pen"&&this.currentStroke?(this.currentStroke.points.push(e),this.drawSegment(this.currentStroke),this.checkAutoExpand(e)):this.mode==="eraser"&&this.eraseAt(e)}onPointerUp(t){var e,n;this.mobileMode&&(t.pointerType||"pen")==="touch"||this.isDrawing&&(this.isDrawing=!1,this.mode==="pen"&&this.currentStroke?(this.currentStroke.points.length>=2&&(this.strokes.push(this.currentStroke),this.pushHistory(),(e=this.changeCb)==null||e.call(this)),this.currentStroke=null):this.mode==="eraser"&&this.eraserChanged&&(this.pushHistory(),(n=this.changeCb)==null||n.call(this)))}checkAutoExpand(t){if(this.animFrameId===null&&t.y>this.canvas.height-this.EXPAND_MARGIN){let e=this.canvas.height+this.EXPAND_AMOUNT;this.animateHeight(e)}}animateHeight(t){let e=this.canvas.height;if(e===t)return;this.animFrameId!==null&&(cancelAnimationFrame(this.animFrameId),this.animFrameId=null);let n=300,s=performance.now(),o=r=>{var v;let a=r-s,d=Math.min(a/n,1),c=1-Math.pow(1-d,3),g=Math.round(e+(t-e)*c);this.canvas.height=g,this.redraw(),this.currentStroke&&this.drawFullStroke(this.currentStroke),(v=this.resizeCb)==null||v.call(this),d<1?this.animFrameId=requestAnimationFrame(o):this.animFrameId=null};this.animFrameId=requestAnimationFrame(o)}eventToPoint(t){let e=this.canvas.getBoundingClientRect(),n=this.canvas.width/e.width,s=this.canvas.height/e.height;return{x:(t.clientX-e.left)*n,y:(t.clientY-e.top)*s,pressure:t.pressure>0?t.pressure:.5}}eraseAt(t){let s=!1,o=[];for(let r of this.strokes){let a=[],d=!1;for(let c of r.points){let g=c.x-t.x,v=c.y-t.y;g*g+v*v<225?(a.length>=2&&o.push({points:[...a],color:r.color,width:r.width}),a=[],d=!0):a.push(c)}d?(s=!0,a.length>=2&&o.push({points:[...a],color:r.color,width:r.width})):o.push(r)}s&&(this.strokes=o,this.eraserChanged=!0,this.redraw())}clearBackground(){let t=this.canvas.width,e=this.canvas.height;this.ctx.fillStyle=this.bgColor,this.ctx.fillRect(0,0,t,e),this.ctx.strokeStyle=this.lineColor,this.ctx.lineWidth=.5;for(let n=this.LINE_SPACING;n<e;n+=this.LINE_SPACING)this.ctx.beginPath(),this.ctx.moveTo(0,n),this.ctx.lineTo(t,n),this.ctx.stroke()}redraw(){this.clearBackground();for(let t of this.strokes)this.drawFullStroke(t)}drawFullStroke(t){let e=t.points;if(e.length<2)return;let n=this.ctx;if(n.strokeStyle=t.color,n.lineWidth=t.width,n.lineCap="round",n.lineJoin="round",n.beginPath(),n.moveTo(e[0].x,e[0].y),e.length===2)n.lineTo(e[1].x,e[1].y);else{for(let o=1;o<e.length-1;o++){let r=e[o],a=e[o+1],d=(r.x+a.x)/2,c=(r.y+a.y)/2;n.quadraticCurveTo(r.x,r.y,d,c)}let s=e[e.length-1];n.lineTo(s.x,s.y)}n.stroke()}drawSegment(t){let e=t.points;if(e.length<2)return;let n=this.ctx;if(n.strokeStyle=t.color,n.lineWidth=t.width,n.lineCap="round",n.lineJoin="round",n.beginPath(),e.length===2)n.moveTo(e[0].x,e[0].y),n.lineTo(e[1].x,e[1].y);else{let s=e.length-2,o=s>0?e[s-1]:e[0],r=e[s],a=e[s+1],d=(o.x+r.x)/2,c=(o.y+r.y)/2,g=(r.x+a.x)/2,v=(r.y+a.y)/2;n.moveTo(d,c),n.quadraticCurveTo(r.x,r.y,g,v)}n.stroke()}};function lt(){let i=Date.now().toString(36),t=Math.random().toString(36).substring(2,6);return`hw_${i}_${t}`}function At(i){if(i.length<2)return"";let t=[];if(t.push(`M ${C(i[0].x)},${C(i[0].y)}`),i.length===2)t.push(`L ${C(i[1].x)},${C(i[1].y)}`);else{for(let n=1;n<i.length-1;n++){let s=i[n],o=i[n+1],r=(s.x+o.x)/2,a=(s.y+o.y)/2;t.push(`Q ${C(s.x)},${C(s.y)} ${C(r)},${C(a)}`)}let e=i[i.length-1];t.push(`L ${C(e.x)},${C(e.y)}`)}return t.join(" ")}function C(i){return Math.round(i*10)/10+""}function $(i,t,e,n="#ffffff",s="#e0e0e0"){let o=[];for(let c of i){let g=At(c.points);g&&o.push(`  <path d="${g}" stroke="${c.color}" fill="none" stroke-width="${c.width}" stroke-linecap="round" stroke-linejoin="round"/>`)}let r=JSON.stringify(i),a=32,d=[];for(let c=a;c<e;c+=a)d.push(`  <line x1="0" y1="${c}" x2="${t}" y2="${c}" stroke="${s}" stroke-width="0.5"/>`);return[`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${t} ${e}" width="${t}" height="${e}">`,`  <rect width="100%" height="100%" fill="${n}"/>`,...d,`  <desc class="hwm-strokes">${$t(r)}</desc>`,...o,"</svg>"].join(`
-`)}function dt(i){var t;try{let e=i.match(/<desc class="hwm-strokes">([\s\S]*?)<\/desc>/);if(!e)return[];let n=Ft((t=e[1])!=null?t:""),s=JSON.parse(n);return Array.isArray(s)?s.filter(o=>Array.isArray(o.points)&&typeof o.color=="string"&&typeof o.width=="number"):[]}catch(e){return[]}}function $t(i){return i.replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;")}function Ft(i){return i.replace(/&quot;/g,'"').replace(/&gt;/g,">").replace(/&lt;/g,"<").replace(/&amp;/g,"&")}var Rt="gemini-3.1-flash-lite-preview",zt=`https://generativelanguage.googleapis.com/v1beta/models/${Rt}:generateContent`,G=class{constructor(t,e){this.apiKey=t;this.languages=e}async recognize(t){var a,d,c,g,v,S,f,u;let n=`Sei un sistema OCR specializzato in scrittura a mano. Analizza l'immagine e trascrivi esattamente il testo scritto. Le lingue attese sono: ${this.languages.join(", ")}. Preserva i simboli markdown scritti dall'utente (es. #, ##, ###, -, *, >, \`\`\`, **testo**, *testo*, ==testo==, ~~testo~~, - [ ], - [x]). Restituisci SOLO il testo trascritto, senza alcuna spiegazione aggiuntiva.`,s=await fetch(`${zt}?key=${this.apiKey}`,{method:"POST",headers:{"Content-Type":"application/json"},body:JSON.stringify({contents:[{parts:[{inline_data:{mime_type:"image/png",data:t}},{text:n}]}]})});if(!s.ok){let w=await s.json().catch(()=>({}));throw new Error(`Gemini ${s.status}: ${(d=(a=w==null?void 0:w.error)==null?void 0:a.message)!=null?d:s.statusText}`)}let o=await s.json();return((u=(f=(S=(v=(g=(c=o==null?void 0:o.candidates)==null?void 0:c[0])==null?void 0:g.content)==null?void 0:v.parts)==null?void 0:S[0])==null?void 0:f.text)!=null?u:"").trim()}};function j(i,t){if(!i.trim())throw new Error("Chiave API Gemini non configurata \u2014 aprire le impostazioni del plugin");return new G(i,t)}function V(i){return i.split(`
-`).map(Nt).join(`
-`)}function Nt(i){let t=i.trim();return t?/^-{3,}$/.test(t)?"---":/^#{1,3}\s+/.test(t)?t:/^-\s*\[x\]\s*/i.test(t)?`- [x] ${t.replace(/^-\s*\[x\]\s*/i,"")}`:/^-\s*\[\s*\]\s*/.test(t)?`- [ ] ${t.replace(/^-\s*\[\s*\]\s*/,"")}`:/^[-*]\s+/.test(t)?`- ${t.replace(/^[-*]\s+/,"")}`:(/^\d+\.\s+/.test(t)||/^>\s*/.test(t)||t.startsWith("```"),t):""}var W={pencil:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>',eraser:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m7 21-4.3-4.3c-1-1-1-2.5 0-3.4l9.6-9.6c1-1 2.5-1 3.4 0l5.6 5.6c1 1 1 2.5 0 3.4L13 21"/><path d="M22 21H7"/><path d="m5 11 9 9"/></svg>',"rotate-ccw":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',"rotate-cw":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><path d="M21 3v5h-5"/></svg>',trash:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6"/><path d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"/></svg>',"file-text":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"/><path d="M14 2v4a2 2 0 0 0 2 2h4"/><path d="M10 9H8"/><path d="M16 13H8"/><path d="M16 17H8"/></svg>',save:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.2 3a2 2 0 0 1 1.4.6l3.8 3.8a2 2 0 0 1 .6 1.4V19a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2z"/><path d="M17 21v-7a1 1 0 0 0-1-1H8a1 1 0 0 0-1 1v7"/><path d="M7 3v4a1 1 0 0 0 1 1h7"/></svg>',x:'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>',"chevron-down":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"/></svg>',"chevron-up":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"/></svg>',"arrow-left":'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m12 19-7-7 7-7"/><path d="M19 12H5"/></svg>'},Ot=60,q=!1;function gt(i){i.registerMarkdownCodeBlockProcessor("handwriting",async(t,e,n)=>{await Gt(t,e,n,i)})}async function Gt(i,t,e,n){let s;try{s=JSON.parse(i.trim())}catch(c){t.createEl("p",{text:"Handwriting: JSON non valido",cls:"hwm_error"});return}let o=t.createDiv({cls:"hwm_container"}),{strokes:r,canvasHeight:a,svgContent:d}=await Wt(s.svg,n);jt(o,r,a,d,s,e,n)}function jt(i,t,e,n,s,o,r){i.empty();let a=r.settings.bgMode==="dark",d=O(r.settings);i.style.backgroundColor=d;let c=i.createDiv({cls:"hwm_inline-buttons"});a&&c.classList.add("hwm_inline-buttons--dark");let g=b(c,"chevron-up","Comprimi");g.classList.add("hwm_collapse-btn");let v=b(c,"file-text","Converti in Markdown");v.classList.add("hwm_convert-btn");let S=b(c,"x","Elimina riquadro");S.classList.add("hwm_delete-btn");let f=i.createDiv({cls:"hwm_inline-preview"}),u=!0,w=n,L=t,E=e;ht(f,w),g.addEventListener("click",k=>{k.stopPropagation(),u=!u,u?(f.classList.remove("hwm_collapsed"),f.style.maxHeight="",g.classList.remove("hwm_rotated"),g.title="Comprimi"):(f.classList.add("hwm_collapsed"),f.style.maxHeight=Ot+"px",g.classList.add("hwm_rotated"),g.title="Espandi")}),f.addEventListener("click",()=>{q||Ut(L,E,s,o,r,(k,_,P)=>{L=k,E=_,w=P,ht(f,P)})}),v.addEventListener("click",async k=>{if(k.stopPropagation(),!w||L.length===0){new h.Notice("Nessun tratto da convertire");return}await Vt(w,s,o,r)}),S.addEventListener("click",async k=>{k.stopPropagation(),confirm("Eliminare questo riquadro handwriting e il file SVG associato?")&&await ut(o,s,r)})}function ht(i,t){if(i.empty(),t){let e=i.createEl("img",{cls:"hwm_preview-img"});e.src="data:image/svg+xml,"+encodeURIComponent(t),e.setAttribute("draggable","false")}else i.createDiv({cls:"hwm_placeholder",text:"Tocca per disegnare"})}async function Vt(i,t,e,n){try{new h.Notice("Riconoscimento in corso\u2026");let r=new DOMParser().parseFromString(i,"image/svg+xml").documentElement,a=await wt(r),c=await j(n.settings.geminiApiKey,n.settings.ocrLanguages).recognize(a);if(!c.trim()){new h.Notice("Nessun testo riconosciuto");return}let g=V(c);await mt(t,n),await vt(e,t,g,n),new h.Notice("Conversione completata!")}catch(s){let o=s instanceof Error?s.message:String(s);new h.Notice("Errore OCR: "+o)}}function Ut(i,t,e,n,s,o){q=!0;let r=h.Platform.isMobile,a=s.settings.bgMode==="dark",d=O(s.settings),c=rt(s.settings),g=document.body.createDiv({cls:"hwm_overlay-backdrop"}),v=g.createDiv({cls:"hwm_overlay-panel"});v.style.backgroundColor=d,a&&v.classList.add("hwm_overlay-panel--dark");let S=v.createDiv({cls:"hwm_overlay-topbar"});a&&S.classList.add("hwm_overlay-topbar--dark");let f=b(S,"arrow-left","Chiudi");f.classList.add("hwm_back-btn");let u=S.createDiv({cls:"hwm_toolbar hwm_overlay-toolbar-inner"});a&&u.classList.add("hwm_toolbar--dark");let w=null;r&&(u.classList.add("hwm_toolbar--compact"),w=b(u,"chevron-down","Mostra tutti i controlli"),w.classList.add("hwm_toggle-btn"),w.addEventListener("click",()=>{var l,y;u.classList.contains("hwm_toolbar--compact")?(u.classList.remove("hwm_toolbar--compact"),D(!1),w.innerHTML=(l=W["chevron-up"])!=null?l:"",w.title="Comprimi toolbar"):(u.classList.add("hwm_toolbar--compact"),D(!0),w.innerHTML=(y=W["chevron-down"])!=null?y:"",w.title="Mostra tutti i controlli")}));let L=b(u,"pencil","Penna");L.classList.add("hwm_active","hwm_pen-btn");let E=b(u,"eraser","Gomma");E.classList.add("hwm_eraser-btn"),u.createDiv({cls:"hwm_separator"});let k=a?["#ffffff","#60a5fa","#f87171","#4ade80"]:["#000000","#1e40af","#dc2626","#16a34a"],_=u.createDiv({cls:"hwm_colors"}),P=[];for(let m of k){let l=_.createEl("div",{cls:"hwm_color-btn",attr:{title:m,role:"button",tabindex:"0"}});l.style.backgroundColor=m,l.style.setProperty("width","22px","important"),l.style.setProperty("height","22px","important"),l.style.setProperty("min-width","22px","important"),l.style.setProperty("min-height","22px","important"),l.style.setProperty("border-radius","50%","important"),l.style.setProperty("box-sizing","border-box","important"),l.style.setProperty("flex-shrink","0","important"),m===k[0]&&l.classList.add("hwm_active"),P.push(l)}u.createDiv({cls:"hwm_separator"});let D=m=>{P.forEach(l=>{let y=l.classList.contains("hwm_active"),M=!m||y?"22px":"0";l.style.setProperty("min-width",M,"important"),l.style.setProperty("min-height",M,"important")})};r&&D(!0);let K=b(u,"rotate-ccw","Annulla");K.classList.add("hwm_undo-btn");let J=b(u,"rotate-cw","Ripristina");J.classList.add("hwm_redo-btn");let Y=b(u,"trash","Cancella tutto");Y.classList.add("hwm_clear-btn"),u.createDiv({cls:"hwm_separator"});let Z=b(u,"file-text","Converti in Markdown");Z.classList.add("hwm_convert-btn");let Q=b(u,"save","Salva");Q.classList.add("hwm_save-btn");let tt=b(u,"x","Elimina riquadro");tt.classList.add("hwm_delete-btn");let H=v.createDiv({cls:"hwm_overlay-scroll"}),bt=H.createDiv({cls:"hwm_canvas-wrap"}),{canvasWidth:kt,canvasHeight:et}=s.settings,yt=t!=null?t:et,xt=s.settings.debugMode?m=>new h.Notice(m,3e3):null,p=new A(bt,kt,yt,et,r,xt);if(p.setBackground(d,c),p.setColor(k[0]),r&&p.allowFingerScroll(),i.length>0){let m=i.map(l=>({...l,color:at(l.color,s.settings.bgMode)}));p.loadStrokes(m)}let T=H.createDiv({cls:"hwm_resize-handle hwm_resize-handle--disabled"});T.createEl("span",{text:"\u22EF"}),a&&(T.style.background="#2a2a2a",T.style.borderTopColor="#444",T.style.color="#888"),p.onResize(()=>{H.scrollTop=H.scrollHeight}),L.addEventListener("click",()=>{p.setMode("pen"),L.classList.add("hwm_active"),E.classList.remove("hwm_active")}),E.addEventListener("click",()=>{p.setMode("eraser"),E.classList.add("hwm_active"),L.classList.remove("hwm_active")});for(let m=0;m<P.length;m++){let l=P[m],y=k[m];l.addEventListener("click",()=>{P.forEach(M=>M.classList.remove("hwm_active")),l.classList.add("hwm_active"),p.setColor(y),r&&D(u.classList.contains("hwm_toolbar--compact"))})}K.addEventListener("click",()=>p.undo()),J.addEventListener("click",()=>p.redo()),Y.addEventListener("click",()=>p.clear()),Z.addEventListener("click",async()=>{let m=p.getStrokes();if(m.length===0){new h.Notice("Nessun tratto da convertire");return}try{new h.Notice("Riconoscimento in corso\u2026");let l=$(m,p.getWidth(),p.getHeight(),p.getBgColor(),p.getLineColor()),Ct=new DOMParser().parseFromString(l,"image/svg+xml").documentElement,St=await wt(Ct),st=await j(s.settings.geminiApiKey,s.settings.ocrLanguages).recognize(St);if(!st.trim()){new h.Notice("Nessun testo riconosciuto");return}let Lt=V(st);await mt(e,s),z(),await vt(n,e,Lt,s),new h.Notice("Conversione completata!")}catch(l){let y=l instanceof Error?l.message:String(l);new h.Notice("Errore OCR: "+y)}}),Q.addEventListener("click",async()=>{await U(p,e,s),new h.Notice("Salvato")}),tt.addEventListener("click",async()=>{confirm("Eliminare questo riquadro handwriting e il file SVG associato?")&&(z(),await ut(n,e,s))});let R=null;p.onChange(()=>{R&&clearTimeout(R),R=setTimeout(async()=>{await U(p,e,s)},2e3)});function z(){p.destroy(),g.remove(),document.body.classList.remove("hwm_no-scroll"),q=!1}async function nt(){await U(p,e,s);let m=p.getStrokes(),l=p.getWidth(),y=p.getHeight(),M=$(m,l,y,p.getBgColor(),p.getLineColor());z(),o(m,y,M)}f.addEventListener("click",()=>nt()),g.addEventListener("click",m=>{m.target===g&&nt()}),document.body.classList.add("hwm_no-scroll")}async function Wt(i,t){var n;let e=t.app.vault.getAbstractFileByPath(i);if(e instanceof h.TFile){let s=await t.app.vault.read(e),o=dt(s),r=s.match(/viewBox="0 0 \d+ (\d+)"/),a=r?parseInt((n=r[1])!=null?n:"0"):null;return{strokes:o,canvasHeight:a,svgContent:s}}return{strokes:[],canvasHeight:null,svgContent:null}}async function U(i,t,e){let n=i.getStrokes(),s=i.getWidth(),o=i.getHeight(),r=$(n,s,o,i.getBgColor(),i.getLineColor()),a=t.svg.substring(0,t.svg.lastIndexOf("/"));a&&(e.app.vault.getAbstractFileByPath(a)||await e.app.vault.createFolder(a));let d=e.app.vault.getAbstractFileByPath(t.svg);d instanceof h.TFile?await e.app.vault.modify(d,r):await e.app.vault.create(t.svg,r)}async function ut(i,t,e){let n=e.app.vault.getAbstractFileByPath(i.sourcePath);if(!(n instanceof h.TFile)){new h.Notice("File markdown non trovato");return}let s=await e.app.vault.read(n),o=new RegExp('\\n?```handwriting\\n.*?"id"\\s*:\\s*"'+pt(t.id)+'".*?\\n```\\n?',"s"),r=s.replace(o,`
-`);r!==s&&await e.app.vault.modify(n,r);let a=e.app.vault.getAbstractFileByPath(t.svg);a instanceof h.TFile&&await e.app.vault.delete(a),new h.Notice("Riquadro eliminato")}function pt(i){return i.replace(/[.*+?^${}()|[\]\\]/g,"\\$&")}async function mt(i,t){let e=t.app.vault.getAbstractFileByPath(i.svg);if(!(e instanceof h.TFile))return;let n=new Date,s=a=>String(a).padStart(2,"0"),o=`${n.getFullYear()}-${s(n.getMonth()+1)}-${s(n.getDate())}_${s(n.getHours())}-${s(n.getMinutes())}-${s(n.getSeconds())}`,r=`${t.settings.svgFolder}/_converted`;t.app.vault.getAbstractFileByPath(r)||await t.app.vault.createFolder(r),await t.app.vault.rename(e,`${r}/${o}.svg`)}async function vt(i,t,e,n){let s=n.app.vault.getAbstractFileByPath(i.sourcePath);if(!(s instanceof h.TFile)){new h.Notice("File markdown non trovato");return}let o=await n.app.vault.read(s),r=new RegExp('\\n?```handwriting\\n.*?"id"\\s*:\\s*"'+pt(t.id)+'".*?\\n```\\n?',"s"),a=o.replace(r,`
-`+e+`
-`);a!==o&&await n.app.vault.modify(s,a)}function X(i){let t=i.app.workspace.getActiveViewOfType(h.MarkdownView);if(!t){new h.Notice("Apri un file markdown prima");return}let e=t.editor,n=lt(),s=`${i.settings.svgFolder}/${n}.svg`,o=`
-\`\`\`handwriting
-{"id":"${n}","svg":"${s}"}
-\`\`\`
-`;e.replaceSelection(o)}function b(i,t,e){var s;let n=i.createEl("button",{cls:"hwm_btn",attr:{title:e}});return n.innerHTML=(s=W[t])!=null?s:"",n}function wt(i){return new Promise((t,e)=>{let n=document.createElement("canvas"),s=n.getContext("2d"),o=new Image,r=new Blob([new XMLSerializer().serializeToString(i)],{type:"image/svg+xml"}),a=URL.createObjectURL(r);o.onload=()=>{n.width=o.width,n.height=o.height,s.drawImage(o,0,0),URL.revokeObjectURL(a),t(n.toDataURL("image/png").split(",")[1])},o.onerror=()=>{URL.revokeObjectURL(a),e(new Error("Errore conversione SVG \u2192 PNG"))},o.src=a})}var F=class extends ft.Plugin{async onload(){await this.loadSettings(),gt(this),this.addCommand({id:"insert-handwriting",name:"Insert handwriting block",editorCallback:()=>{X(this)}}),this.addRibbonIcon("pencil","Insert handwriting",()=>{X(this)}),this.addSettingTab(new B(this.app,this))}async loadSettings(){this.settings=Object.assign({},ct,await this.loadData())}async saveSettings(){await this.saveData(this.settings)}};
diff --git a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json
deleted file mode 100644
index 6164881..0000000
--- a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/manifest.json	
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-	"id": "handwriting-to-markdown",
-	"name": "Handwriting to Markdown",
-	"version": "0.1.0",
-	"minAppVersion": "0.15.0",
-	"description": "Inline handwriting canvas with conversion to structured markdown",
-	"author": "GabrieleC",
-	"isDesktopOnly": false
-}
diff --git a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css b/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css
deleted file mode 100644
index 3d33374..0000000
--- a/HandTranscriptMd/C/Users/gabri/Il mio Drive (gabrielecusato@gmail.com)/Projects/handwriting-to-markdown/styles.css	
+++ /dev/null
@@ -1,408 +0,0 @@
-/* ========================================
-   Handwriting to Markdown — Plugin Styles
-   Prefisso hwm_ per evitare conflitti
-   ======================================== */
-
-/* --- Container principale dell'embed --- */
-.hwm_container {
-	position: relative;
-	border: 1px solid var(--background-modifier-border);
-	border-radius: 8px;
-	overflow: hidden;
-	margin: 8px 0;
-	/* Sfondo SEMPRE bianco (anche in dark mode) */
-	background: #ffffff;
-}
-
-/* --- Toolbar in alto a destra --- */
-.hwm_toolbar {
-	position: absolute;
-	top: 6px;
-	right: 6px;
-	z-index: 10;
-	display: flex;
-	align-items: center;
-	gap: 0; /* spacing gestito via margin-right sui bottoni, così i bottoni
-	           nascosti (max-width:0, margin:0) non creano spazi vuoti */
-	padding: 3px 6px;
-	border-radius: 6px;
-	background: rgba(240, 240, 240, 0.95);
-	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-	opacity: 1;
-	transition: opacity 0.2s;
-}
-
-/* --- Bottoni toolbar --- */
-.hwm_btn {
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	width: 28px;
-	height: 28px;
-	padding: 0;
-	border: none;
-	border-radius: 4px;
-	background: transparent;
-	color: #666;
-	cursor: pointer;
-	line-height: 0;
-	/* Spacing via margin-right invece di gap, così i bottoni nascosti
-	   (margin:0) non lasciano spazi vuoti nella toolbar compatta */
-	margin-right: 4px;
-	/* Animazione espansione/compressione toolbar */
-	overflow: hidden;
-	max-width: 40px;
-	flex-shrink: 0;
-	transition: max-width 0.2s ease, opacity 0.2s ease,
-	            margin 0.2s ease, padding 0.2s ease;
-}
-/* Icone SVG inline dentro i bottoni */
-.hwm_btn svg {
-	width: 16px;
-	height: 16px;
-	flex-shrink: 0;
-}
-.hwm_btn:hover {
-	background: #e0e0e0;
-	color: #333;
-}
-/* Bottone attivo (tool selezionato) */
-.hwm_btn.hwm_active {
-	background: var(--interactive-accent);
-	color: #ffffff;
-}
-
-/* --- Bottone salva (evidenziato) --- */
-.hwm_save-btn {
-	margin-left: 4px;
-}
-.hwm_save-btn:hover {
-	background: var(--interactive-accent);
-	color: #ffffff;
-}
-
-/* --- Bottone elimina (X rossa su hover) --- */
-.hwm_delete-btn:hover {
-	background: #dc2626;
-	color: #ffffff;
-}
-
-/* --- Selettore colori --- */
-.hwm_colors {
-	display: flex;
-	align-items: center;
-	gap: 3px;
-	margin: 0 4px;
-}
-/* I pallini colore sono <div> (non <button>) per evitare che Obsidian Mobile
-   sovrascriva width/height con i propri stili globali sui button.
-   Le dimensioni (22px) sono forzate anche via style.setProperty inline in embed.ts */
-.hwm_color-btn {
-	display: inline-block;
-	width: 22px;
-	height: 22px;
-	border: 2px solid transparent;
-	border-radius: 50%;
-	cursor: pointer;
-	box-sizing: border-box;
-}
-.hwm_color-btn.hwm_active {
-	border-color: var(--interactive-accent);
-}
-.hwm_color-btn:hover {
-	border-color: #999;
-}
-
-/* --- Area canvas (editing) --- */
-.hwm_canvas-wrap {
-	width: 100%;
-	overflow: hidden;
-}
-.hwm_canvas {
-	display: block;
-	width: 100%;
-	cursor: crosshair;
-	/* Sfondo bianco fisso */
-	background: #ffffff;
-}
-
-/* --- Handle di resize in basso --- */
-.hwm_resize-handle {
-	width: 100%;
-	height: 12px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	cursor: ns-resize;
-	background: #f5f5f5;
-	border-top: 1px solid #e0e0e0;
-	color: #999;
-	font-size: 14px;
-	user-select: none;
-	touch-action: none;
-}
-.hwm_resize-handle:hover {
-	background: #ebebeb;
-	color: #666;
-}
-
-/* --- Placeholder per canvas vuoto --- */
-.hwm_placeholder {
-	text-align: center;
-	color: #999;
-	padding: 40px 0;
-	font-style: italic;
-}
-
-/* --- Errore parsing --- */
-.hwm_error {
-	color: var(--text-error);
-	padding: 8px;
-	font-style: italic;
-}
-
-/* --- Separatore visivo nella toolbar --- */
-.hwm_separator {
-	width: 1px;
-	height: 20px;
-	background: #d0d0d0;
-	margin: 0 6px 0 2px; /* destra più ampia per bilanciare visivamente */
-	flex-shrink: 0;
-	overflow: hidden;
-	transition: max-width 0.2s ease, opacity 0.2s ease,
-	            margin 0.2s ease, padding 0.2s ease;
-}
-
-/* --- Pallini colore: transizione per animazione toolbar --- */
-.hwm_color-btn {
-	transition: max-width 0.2s ease, opacity 0.2s ease,
-	            margin 0.2s ease, padding 0.2s ease;
-}
-
-/* --- Toolbar compatta (mobile) ---
-   Bottoni nascosti: collassati a larghezza 0 con fade-out.
-   La transizione su .hwm_btn e .hwm_separator produce l'animazione
-   quando la classe viene aggiunta/rimossa via JS. */
-.hwm_toolbar--compact .hwm_pen-btn,
-.hwm_toolbar--compact .hwm_eraser-btn,
-.hwm_toolbar--compact .hwm_clear-btn,
-.hwm_toolbar--compact .hwm_save-btn,
-.hwm_toolbar--compact .hwm_color-btn:not(.hwm_active),
-.hwm_toolbar--compact .hwm_separator {
-	max-width: 0 !important;
-	opacity: 0 !important;
-	padding: 0 !important;
-	margin: 0 !important;
-	pointer-events: none;
-}
-/* Riduce il margine attorno al pallino colore rimasto e azzera il gap
-   tra i pallini (gli inattivi sono collassati a width:0 ma il gap persiste) */
-.hwm_toolbar--compact .hwm_colors {
-	margin: 0 2px;
-	gap: 0;
-}
-
-/* --- Tema scuro per la toolbar ---
-   Applicato via classe hwm_toolbar--dark quando bgMode === 'dark' */
-.hwm_toolbar--dark {
-	background: rgba(40, 40, 40, 0.97) !important;
-	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
-}
-.hwm_toolbar--dark .hwm_btn {
-	color: #bbb !important;
-}
-.hwm_toolbar--dark .hwm_btn:hover {
-	background: rgba(255, 255, 255, 0.12) !important;
-	color: #fff !important;
-}
-.hwm_toolbar--dark .hwm_btn.hwm_active {
-	background: var(--interactive-accent) !important;
-	color: #fff !important;
-}
-.hwm_toolbar--dark .hwm_separator {
-	background: #555 !important;
-}
-
-/* --- Mobile: bottoni grandi e visibili ---
-   Forza sfondo chiaro + colore scuro per le icone SVG,
-   indipendentemente dal tema di Obsidian Mobile */
-.hwm_mobile .hwm_toolbar {
-	gap: 0;
-	padding: 5px 8px;
-}
-.hwm_mobile .hwm_toolbar .hwm_btn {
-	width: 36px !important;
-	height: 36px !important;
-	margin-right: 6px !important; /* spacing via margin, non gap */
-	background: rgba(245, 245, 245, 0.98) !important;
-	border: 1px solid rgba(0, 0, 0, 0.18) !important;
-	border-radius: 7px !important;
-	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
-	color: #222 !important;
-}
-.hwm_mobile .hwm_toolbar .hwm_btn.hwm_active {
-	background: var(--interactive-accent) !important;
-	border-color: var(--interactive-accent) !important;
-	color: #ffffff !important;
-}
-
-/* --- Tema scuro su mobile: sovrascrive i bianchi !important del mobile --- */
-.hwm_mobile .hwm_toolbar--dark .hwm_btn {
-	background: rgba(55, 55, 55, 0.98) !important;
-	border-color: rgba(255, 255, 255, 0.15) !important;
-	color: #ddd !important;
-}
-.hwm_mobile .hwm_toolbar--dark .hwm_btn.hwm_active {
-	background: var(--interactive-accent) !important;
-	border-color: var(--interactive-accent) !important;
-	color: #fff !important;
-}
-
-/* ========================================
-   INLINE PREVIEW — Vista nel documento
-   ======================================== */
-
-/* --- Bottoni inline (comprimi, converti, elimina) --- */
-.hwm_inline-buttons {
-	position: absolute;
-	top: 6px;
-	right: 6px;
-	z-index: 5;
-	display: flex;
-	gap: 4px;
-	padding: 3px;
-	border-radius: 6px;
-	background: rgba(240, 240, 240, 0.9);
-	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
-}
-.hwm_inline-buttons--dark {
-	background: rgba(40, 40, 40, 0.95);
-	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-}
-.hwm_inline-buttons--dark .hwm_btn {
-	color: #bbb;
-}
-.hwm_inline-buttons--dark .hwm_btn:hover {
-	background: rgba(255, 255, 255, 0.12);
-	color: #fff;
-}
-
-/* --- Bottone comprimi: rotazione 180° quando compresso --- */
-.hwm_collapse-btn {
-	transition: transform 0.3s ease, max-width 0.2s ease,
-	            opacity 0.2s ease, margin 0.2s ease, padding 0.2s ease;
-}
-.hwm_collapse-btn.hwm_rotated {
-	transform: rotate(180deg);
-}
-
-/* --- Preview SVG inline --- */
-.hwm_inline-preview {
-	width: 100%;
-	overflow: hidden;
-	cursor: pointer;
-	/* Transizione per l'espansione/compressione */
-	transition: max-height 0.3s ease;
-}
-.hwm_inline-preview.hwm_collapsed {
-	/* max-height impostato via JS */
-	overflow: hidden;
-}
-
-/* Immagine SVG che riempie la larghezza del container */
-.hwm_preview-img {
-	display: block;
-	width: 100%;
-	height: auto;
-	pointer-events: none; /* il click è gestito dal div padre */
-}
-
-/* ========================================
-   OVERLAY — Editor fullscreen
-   ======================================== */
-
-/* Blocca scroll sul body quando l'overlay è aperto */
-body.hwm_no-scroll {
-	overflow: hidden !important;
-}
-
-/* --- Backdrop: sfondo scuro + blur --- */
-.hwm_overlay-backdrop {
-	position: fixed;
-	top: 0;
-	left: 0;
-	right: 0;
-	bottom: 0;
-	z-index: 9999;
-	background: rgba(0, 0, 0, 0.5);
-	backdrop-filter: blur(6px);
-	-webkit-backdrop-filter: blur(6px);
-	display: flex;
-	align-items: stretch;
-	justify-content: stretch;
-}
-
-/* --- Pannello editor con cornice spessa --- */
-.hwm_overlay-panel {
-	position: absolute;
-	top: 12px;
-	left: 12px;
-	right: 12px;
-	bottom: 12px;
-	border: 4px solid #444;
-	border-radius: 12px;
-	overflow: hidden;
-	display: flex;
-	flex-direction: column;
-	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.2);
-}
-.hwm_overlay-panel--dark {
-	border-color: rgba(255, 255, 255, 0.25);
-}
-
-/* --- Top bar (bottone ← + toolbar) --- */
-.hwm_overlay-topbar {
-	display: flex;
-	align-items: center;
-	padding: 6px 8px;
-	background: rgba(240, 240, 240, 0.95);
-	border-bottom: 1px solid #ddd;
-	flex-shrink: 0;
-	gap: 8px;
-}
-.hwm_overlay-topbar--dark {
-	background: rgba(40, 40, 40, 0.97);
-	border-bottom-color: #444;
-}
-
-/* --- Bottone ← (indietro) --- */
-.hwm_back-btn {
-	flex-shrink: 0;
-}
-
-/* --- Toolbar dentro l'overlay: posizione statica (non absolute) --- */
-.hwm_overlay-toolbar-inner {
-	position: static !important;
-	top: auto !important;
-	right: auto !important;
-	flex: 1;
-	box-shadow: none !important;
-	background: transparent !important;
-	padding: 0 !important;
-}
-
-/* --- Scroll container per il canvas nell'overlay --- */
-.hwm_overlay-scroll {
-	flex: 1;
-	overflow-y: auto;
-	overflow-x: hidden;
-}
-
-/* --- Resize handle disabilitato (visibile ma non interattivo) --- */
-.hwm_resize-handle--disabled {
-	pointer-events: none;
-	cursor: default;
-}
-.hwm_resize-handle--disabled:hover {
-	background: #f5f5f5; /* annulla l'effetto hover */
-}

From f1dadea134525c7c3dd1a87803439abbe5a41dd1 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Sun, 22 Mar 2026 18:23:41 +0100
Subject: [PATCH 05/14] =?UTF-8?q?provato=20modifiche=20per=20far=20funzion?=
 =?UTF-8?q?are=20handwriting=20ma=20non=20c'=C3=A8=20nulla=20da=20fare,=20?=
 =?UTF-8?q?anche=20handwriting=20notes=20non=20funziona,=20quindi=20non=20?=
 =?UTF-8?q?c'=C3=A8=20nulla=20da=20fare=20per=20adesso.=20Per=20monitorare?=
 =?UTF-8?q?=20il=20problema:=20il=20posto=20migliore=20=C3=A8=20il=20repos?=
 =?UTF-8?q?itory=20Chromium,=20che=20=C3=A8=20il=20motore=20WebView=20di?=
 =?UTF-8?q?=20Android:?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

  - Bug tracker Chromium: https://bugs.chromium.org — cerca "StylusWritingManager" o "stylus handwriting WebView"                                                                                                                       - Issue del plugin Ink (stessa identica situazione): https://github.com/daledesilva/obsidian_ink/issues/156 — se qualcuno trova un fix lì, vale anche per noi
                                                                                                                                                                                                                                        Il problema è a livello di Chromium/Android WebView, quindi un fix arriverebbe tramite un aggiornamento di Chrome/WebView sul dispositivo, non tramite Obsidian.
---
 CLAUDE.md                              | 167 ++++++++++++++++++-------
 HandTranscriptMd/src/drawing-canvas.ts |   2 +
 HandTranscriptMd/src/editor-view.ts    |  46 +++++--
 HandTranscriptMd/src/embed.ts          |  88 +++++++++----
 HandTranscriptMd/src/settings.ts       |  37 ++++--
 HandTranscriptMd/styles.css            |  69 ++++++++--
 6 files changed, 312 insertions(+), 97 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 0b29255..5765ed2 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -40,18 +40,18 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 
 ---
 
-## Stato attuale — Fase 3 COMPLETATA (editor in tab separata)
+## Stato attuale — Fase 5 (fix overlay + centramento modal + badge mode + auto-scroll) — TESTATO
 
 ### File del plugin (`HandTranscriptMd/src/`)
 
 | File | Cosa fa |
 |------|---------|
 | `main.ts` | Entry point: registra embed, editor view, comando, ribbon, settings, `previewCallbacks` per sync inline↔tab |
-| `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini (campo password) |
+| `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini, toggle `hwmHandwritingMode` |
 | `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio, `allowFingerScroll()` |
 | `svg-utils.ts` | Conversione tratti ↔ SVG (dati riedit in `<desc>` JSON), righe e sfondo inclusi nell'SVG |
-| `embed.ts` | Code block processor → preview SVG inline con 3 bottoni (X, converti, comprimi) in alto a sinistra + bottone portale in document.body; preview non cliccabile |
-| `editor-view.ts` | `DrawingEditorView extends ItemView` — editor canvas in tab Obsidian dedicata, toolbar completa, scroll, auto-save |
+| `embed.ts` | Code block processor → preview SVG inline + pannello portale in document.body; click matita → Modal (Windows) o nuova tab (Android); scroll fix; badge mode |
+| `editor-view.ts` | `DrawingEditorView` (tab dedicata, Android) + `DrawingModal` (overlay fullscreen, Windows), toolbar completa, auto-save |
 | `recognizer.ts` | `IRecognizer` interface + `GeminiRecognizer`: invia PNG base64 a Gemini API, restituisce testo |
 | `md-parser.ts` | `parseMarkdown()`: post-processa testo OCR riga per riga applicando sintassi markdown |
 
@@ -65,8 +65,9 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 - Obsidian renderizza `![[svg]]` come `<span class="internal-embed image-embed">[img][/img]</span>`
 - **MutationObserver su `document.body`** intercetta gli span con `src*="_handwriting/"` non appena appaiono nel DOM (funziona sia in reading view che in live preview dove il post-processor non viene chiamato)
 - `tryDecorate()` con flag `data-hwm-decorated="1"` per evitare doppia elaborazione; ritenta dopo 150ms se la classe `image-embed` non è ancora presente (caricamento asincrono)
-- **ZERO modifica al DOM dello span** — nessuna classe aggiunta, nessun figlio inserito, nessuno stile inline. Lo span resta identico a qualsiasi altra immagine Obsidian
-- **Pannello portale** (`hwm_portal-panel`) in `document.body` con 4 bottoni: ✏️ (apre tab editor), 📄 (converti OCR), ↕️ (comprimi/espandi), ✕ (elimina). Posizionato via RAF + `getBoundingClientRect()` + `position: fixed`
+- **Classe badge mode**: `span.classList.toggle('hwm-badge-mode', hwmHandwritingMode)` — unica modifica allo span quando lo switch è attivo
+- **Pannello portale** (`hwm_portal-panel`) in `document.body` con 4 bottoni: ✏️ (apre Modal su Windows / tab su Android), 📄 (converti OCR), ↕️ (comprimi/espandi), ✕ (elimina). Posizionato via RAF + `getBoundingClientRect()` + `position: fixed`
+- **Scroll fix**: listener `scroll` su `.cm-scroller` / `.markdown-reading-view` che nasconde il pannello immediatamente durante lo scroll (visibilità ripristinata dopo 150ms)
 - **Refresh immagine**: `previewCallbacks.set(embedId, ...)` aggiorna `img.src` con cache-bust `?t=timestamp` dopo ogni salvataggio dalla tab editor (Obsidian non aggiorna automaticamente `![[svg]]` in live preview quando il file cambia)
 - **NO data-URI**: il src dell'img resta sempre l'URL vault (`http://localhost/_capacitor_file_/...`) — un data-URI verrebbe interpretato da Android come drawing surface
 
@@ -75,16 +76,31 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 - 3 bottoni inline (`<div role="button">`, non `<button>`) dentro il container del code block
 - Bottone portale singolo (`hwm_portal-btn`, cerchio matita) in `document.body` per aprire la tab editor
 
-**Editor in tab separata (`editor-view.ts`):**
-- `DrawingEditorView extends ItemView` di Obsidian
+**Editor disegno — due modalità (`editor-view.ts`):**
+
+`DrawingEditorView extends ItemView` — usato su **Android**:
 - Canvas in un DOM completamente separato da CodeMirror → **nessun conflitto handwriting Android**
 - Top bar: bottone ← a sinistra (chiude tab), toolbar completa a destra
 - Scroll container: `overflow-y: auto` per canvas più grandi dello schermo
-- Auto-scroll: callback `onResize` su DrawingCanvas → scrolla verso il basso durante auto-expand
-- Finger scroll: `allowFingerScroll(scrollContainer)` — `touch-action` resta `none` (penna non scrolla), dito scrolla il container via `setPointerCapture` + JS manuale
-- Resize handle visibile ma `pointer-events: none` (no drag manuale, solo auto-expand)
-- Auto-save debounced 2s + callback `plugin.refreshPreview()` aggiorna la preview inline
-- Converti/Elimina funzionano anche dalla tab (manipolano il .md via `sourcePath`)
+- Finger scroll: `allowFingerScroll(scrollContainer)` — dito scrolla, penna disegna
+- Auto-save debounced 2s + `plugin.refreshPreview()` aggiorna la preview inline
+
+`DrawingModal extends Modal` — usato su **Windows**:
+- Overlay fullscreen (`hwm_modal`: `95vw × 90vh`) che appare sopra il documento
+- Stessa toolbar e stesso canvas di `DrawingEditorView`
+- `onClosed?: () => void` — callback invocato alla chiusura per aggiornare il flag `modalOpen` nel RAF loop del pannello portale
+- `replaceCodeBlock` / `removeCodeBlock` gestiscono sia formato wiki `![[svg]]` che legacy (prova prima wiki, poi code block come fallback)
+
+**Comportamento bottone matita (pannello portale):**
+- `Platform.isDesktop` → `new DrawingModal(...).open()` — si apre nella stessa finestra
+- `Platform.isMobile` → `workspace.getLeaf('tab')` con `DrawingEditorView`
+- Bottone matita nascosto: `modalOpen || tabOpen` — scompare sia quando Modal è aperto (Windows) sia quando la tab è aperta (Android)
+
+**Modalità handwriting (`hwmHandwritingMode`):**
+- Switch nelle impostazioni: "Modalità handwriting Android"
+- Se ON: `document.body.classList.add('hwm-handwriting-mode')` + classe `hwm-badge-mode` sullo span → CSS riduce l'SVG a 48px di altezza (badge/thumbnail)
+- Se OFF (default): SVG piena, comportamento normale
+- Si applica immediatamente senza ricaricare il plugin (toggle in settings chiama `document.body.classList.toggle(...)`; all'avvio viene applicato in `registerEmbed()`)
 
 ### Funzionalità implementate
 
@@ -108,8 +124,11 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 - **Settings OCR** — chiave API Gemini (campo password) + lingue OCR configurabili (default: `it, en`)
 - **Supporto Android** — penna disegna, dito scrolla, nessun conflitto handwriting
 - **Comprimi/Espandi** — preview inline si può compattare all'altezza di default (freccia con rotazione 180°)
-- **Bottone portale** — pulsante cerchio con icona matita in `document.body` (fuori da cm-content), si posiziona sopra il riquadro via RAF + getBoundingClientRect, si nasconde automaticamente se la tab editor è già aperta o il riquadro esce dal viewport
-- **Preview non tappabile** — click handler rimosso; l'unico modo per aprire l'editor è il bottone portale
+- **Bottone portale** — pannello floating in `document.body`, si posiziona sopra il riquadro via RAF + getBoundingClientRect, scompare durante lo scroll (listener scroll + visibility hidden/visible)
+- **Preview non tappabile** — click handler rimosso; l'unico modo per aprire l'editor è il bottone matita nel pannello portale
+- **Modal Windows** — click matita su Desktop apre `DrawingModal` (overlay fullscreen nella stessa finestra, no tab separata)
+- **Nuova tab Android** — click matita su Mobile apre `DrawingEditorView` in tab separata
+- **Switch handwriting** — toggle nelle Settings: se ON, i riquadri mostrano solo una piccola anteprima (48px) per non bloccare lo stylus handwriting nel testo
 
 ### Embedding nel markdown
 
@@ -187,33 +206,49 @@ cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; nod
 
 ## Prossimi passi
 
-### BUG handwriting — Test da fare in ordine
+### ✅ TEST EFFETTUATI (sessione 2026-03-22)
 
-**Test A — `pointer-events: none` sullo span** (1 riga, da provare per primo):
-- In `tryDecorate()`, aggiungere `span.style.pointerEvents = 'none'` dopo `span.dataset.hwmDecorated = '1'`
-- I bottoni portale (in `document.body`) continuano a funzionare
-- Verifica: con SVG riempito nel documento, l'handwriting funziona?
-- Se sì → risolto. Se no → Chrome usa DOM walk separato, pointer-events non basta
+#### Bug 1 — Pannello portale parzialmente visibile con Modal aperto — RISOLTO ✅
 
-**Test B — Limitare max-height dell'immagine** (se A non funziona):
-- Ipotesi: SVG vuoto (300px) non rompe, SVG riempito (500px+) rompe → è la HEIGHT del CE=false che causa il problema
-- Test empirico: aggiungere in CSS `.internal-embed[src*="_handwriting/"] img { max-height: 300px; object-fit: contain; }` e verificare se con un SVG alto (dopo auto-expand) l'handwriting funziona
-- Se sì → limitare max-height è la soluzione
-- Se no → l'altezza non è la causa, passare a C
+**Sintomo**: su Windows, cliccando il bottone matita, i bottoni "Converti" e "Comprimi" del pannello portale restavano visibili sopra il modal mentre il bottone matita scompariva correttamente.
+**Causa**: il RAF loop nascondeva solo il bottone matita (`btn.style.display`) ma non l'intero pannello.
+**Fix**: il RAF loop ora setta `panel.style.display = 'none'` quando `modalOpen || tabOpen`, nascondendo l'intero pannello portale (tutti e 4 i bottoni).
+**File**: `src/embed.ts` — RAF loop in `decorateSpan()`.
 
-**Test C — Placeholder in Live Preview** (se B non funziona):
-- In live preview (span dentro `.cm-editor`), mostrare solo un piccolo badge "📝 disegno" di 40px di altezza invece dell'SVG pieno
-- L'SVG pieno appare solo in Reading View (span dentro `.markdown-reading-view`)
-- Come distinguerle: `span.closest('.cm-editor')` vs `span.closest('.markdown-reading-view')`
-- Questo riduce il CE=false a un'area minima → handwriting dovrebbe funzionare nelle righe di testo circostanti
+---
 
-**Idea — Modalità handwriting / preview (switch globale nelle impostazioni)**:
-- L'utente sceglie tra due modalità tramite un toggle nelle impostazioni (o un comando da palette):
-  - **Modalità handwriting**: i riquadri mostrano solo un piccolo badge/placeholder nel documento (niente SVG piena). Tappando il badge si apre la tab editor. L'handwriting Android funziona nel testo circostante.
-  - **Modalità preview**: i riquadri mostrano l'SVG completa inline, come ora. Niente handwriting Android, ma si vede il disegno direttamente nel documento.
-- La modalità si potrebbe cambiare anche al volo senza ricaricare Obsidian (il MutationObserver ridecorarebbe gli span al cambio impostazione)
-- Su PC (nessun conflitto handwriting) la modalità preview sarebbe sempre quella giusta; su Android si sceglierebbe in base al workflow del momento
-- Implementazione: aggiungere `hwmMode: 'handwriting' | 'preview'` a `HandwritingSettings`; in `tryDecorate()` controllare la modalità e decidere se mostrare badge o SVG piena
+#### Bug 2 — Canvas modal troppo largo, toolbar non centrata — RISOLTO ✅
+
+**Sintomo**: nel Modal Windows, il canvas occupava tutta la larghezza dell'overlay (troppo largo e non centrato). La toolbar era allineata a sinistra invece che al centro.
+**Fix CSS** (`styles.css`):
+- `.hwm_canvas-wrap { display: flex; justify-content: center; }` — centra il canvas orizzontalmente
+- `.hwm_canvas { max-width: 100%; }` — rimosso `width: 100%` fisso
+- `.hwm_editor-topbar--modal { justify-content: center; }` — centra la toolbar nel modal
+**Fix TS** (`editor-view.ts`): `DrawingModal.buildEditor()` aggiunge classe `hwm_editor-topbar--modal` alla topbar.
+
+---
+
+#### Bug 3 — Auto-scroll sposta i tratti durante il disegno — RISOLTO ✅
+
+**Sintomo**: quando il canvas si espandeva automaticamente (auto-expand) mentre stavo disegnando, lo scroll automatico verso il basso spostava i punti del tratto corrente rispetto alla posizione del pennino.
+**Causa**: l'evento `onResize` faceva scroll immediatamente anche con il pointer premuto, spostando il canvas mentre le coordinate del puntatore erano ancora relative alla posizione pre-scroll.
+**Fix**: aggiunto metodo pubblico `isPointerDown(): boolean` in `DrawingCanvas` (`drawing-canvas.ts`). Sia `DrawingEditorView` che `DrawingModal` in `editor-view.ts` ora controllano `!canvas.isPointerDown()` prima di eseguire il `scrollTop` automatico.
+
+---
+
+#### Bug 4 — Badge mode mostra icona in riquadro piccolissimo — RISOLTO ✅
+
+**Sintomo**: attivando "Modalità handwriting Android" nelle impostazioni, i riquadri SVG si riducevano a un quadratino minuscolo invece di un badge orizzontale a piena larghezza.
+**Causa**: lo span `.internal-embed` senza figli visibili collassava alla sua larghezza intrinseca (quasi zero).
+**Fix CSS** (`.hwm-handwriting-mode .hwm-badge-mode`):
+```css
+width: 100% !important; box-sizing: border-box !important;
+height: 72px !important; display: flex !important;
+align-items: center; justify-content: center;
+background: var(--background-secondary); border-radius: 6px;
+```
+Più: `img { display: none !important }` per nascondere l'SVG e `::after { content: "✏️"; font-size: 28px; opacity: 0.5; }` per l'icona.
+**File**: `styles.css`.
 
 ### Altri task aperti
 
@@ -245,8 +280,16 @@ cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; nod
 - **Placeholder text** ✅ — aggiornato a "Usa il bottone matita in alto a destra per disegnare"
 - **Bottone portale non cerchio perfetto** ✅ — risolto con `width/height/min-width/min-height: 36px !important`, `padding: 0 !important`, `overflow: hidden`
 - **Icona bottone portale non visibile** ✅ — SVG con `stroke="currentColor"` non diventava bianco; risolto con `.hwm_portal-btn svg { stroke: #ffffff !important }`
-- **Bottone portale non si nasconde con editor aperto** ✅ — aggiunto check `workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING).some(...)` nel RAF loop
+- **Bottone portale non si nasconde con editor aperto** ✅ — check `workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING).some(...)` nel RAF loop (Android) + flag `modalOpen` (Windows)
 - **Bottone portale `position: absolute` invece di `fixed`** ✅ — `getBoundingClientRect()` restituisce coordinate viewport, non serviva aggiungere `scrollY/scrollX`
+- **Bottoni pannello portale rimangono visibili durante lo scroll** ✅ — listener `scroll` su `.cm-scroller`/`.markdown-reading-view` che setta `visibility: hidden` durante lo scroll
+- **Modal Windows** ✅ — implementato `DrawingModal extends Modal`; click matita su Desktop apre modal invece di nuova tab
+- **Switch handwriting** ✅ — `hwmHandwritingMode` in settings; badge mode via classe CSS su `document.body` e sullo span
+- **DrawingModal non gestiva formato wiki** ✅ — aggiunto `wikiEmbedRegex()` e logica try-wiki-then-legacy in `replaceInMd()`
+- **Pannello portale visibile con Modal aperto (Bug 1)** ✅ — RAF loop ora nasconde l'intero panel (`display: none`) quando `modalOpen || tabOpen`, non solo il bottone matita
+- **Canvas modal non centrato, toolbar a sinistra (Bug 2)** ✅ — `display: flex; justify-content: center` su `.hwm_canvas-wrap`; `max-width: 100%` su `.hwm_canvas`; classe `hwm_editor-topbar--modal` aggiunta al topbar del modal per centrare la toolbar
+- **Auto-scroll sposta tratti durante disegno (Bug 3)** ✅ — aggiunto `isPointerDown()` in `DrawingCanvas`; scroll automatico bloccato se il pointer è premuto, sia in `DrawingEditorView` che in `DrawingModal`
+- **Badge mode mostra riquadro minuscolo (Bug 4)** ✅ — CSS `.hwm-handwriting-mode .hwm-badge-mode` con `width: 100% !important`, `height: 72px`, flex centrato, `img { display: none }` + `::after` con emoji matita
 
 ### BUG APERTO — Handwriting disabilitato nel documento quando il riquadro è presente
 
@@ -262,7 +305,7 @@ cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; nod
 - Canvas in `document.body` (fuori da CM6) toccato con stylus → **rompe handwriting** — conclusione: è il canvas element quando toccato dalla stylus, non la sua posizione nel DOM
 - **Causa root fase 1**: Android WebView tratta qualsiasi `<canvas>` toccato dalla stylus come "drawing surface" e disabilita handwriting-to-text a livello di sessione WebView
 
-**Fase 2 — Passaggio a formato wiki `![[svg]]`** (sessione corrente):
+**Fase 2 — Passaggio a formato wiki `![[svg]]`** (sessione 2026-03-19):
 
 L'obiettivo era eliminare il `<canvas>` dal documento e mostrare solo l'`<img>` nativa di Obsidian.
 
@@ -276,15 +319,36 @@ Cambiamenti implementati durante la fase 2:
 - Rimosso `addWikiOverlay` (aggiungeva `hwm_inline-buttons` come figlio dello span): la struttura dello span è ora identica a un'immagine normale
 - Pannello portale (`hwm_portal-panel`) in `document.body` con tutti e 4 i bottoni
 
-**Stato attuale**: dopo aver rimosso TUTTA la nostra decorazione dallo span (nessun figlio aggiunto, nessuna classe, nessuno stile), il problema persiste. Lo span è identico a quello di un'immagine normale Obsidian, ma l'handwriting si rompe ugualmente con l'SVG riempito.
+**Fase 3 — Test approfonditi (sessione 2026-03-22)**:
 
-**Ipotesi residue** (non ancora testate):
+**Test A — Rimozione `touch-action: none` da `.hwm_resize-handle`** (tentativo 29):
+- Motivazione: `touch-action: none` è uno dei segnali che Android WebView usa per identificare "drawing surfaces". Rimuovendolo dal resize handle, si riduce il numero di elementi che si qualificano come drawing surface.
+- Risultato: **non risolve**. L'handwriting si rompe ugualmente dopo aver aperto la tab editor.
 
-| # | Ipotesi | Razionale |
-|---|---------|-----------|
-| A | `pointer-events: none` sullo span | Se Chrome usa lo stesso hit-test dei pointer events per la proximity detection, potrebbe ignorare lo span e trovare il `cm-content[ce=true]` sottostante. Incerto: Chrome potrebbe fare un DOM walk separato per `contenteditable` indipendente da pointer-events |
-| B | Altezza SVG: l'empty SVG è 300px, il filled SVG è più alto (auto-expand). Un CE=false più alto copre più area → più probabile interferire con la proximity detection (40dp dal bordo). Fix: limitare max-height dell'immagine nel documento | La proximity detection è 40dp verticale — un'immagine da 500px di altezza occupa molto più "territorio" di una da 300px |
-| C | Placeholder in Live Preview | Mostrare solo un piccolo badge in live preview (dove si scrive), SVG pieno solo in Reading View. Lo span CE=false sarebbe piccolo → non interferisce |
+**Test B — IME reset alla chiusura della tab editor** (tentativo 30):
+- Motivazione: ipotesi che la sessione IME (Input Method Engine) di Android venisse "bloccata" dall'apertura della DrawingEditorView. Un blur/focus sul `cm-content` dopo la chiusura avrebbe potuto resettarla.
+- Implementazione: `DrawingEditorView.onClose()` fa `cm.blur(); setTimeout(() => cm.focus(), 80)` solo su mobile.
+- Risultato: **non risolve**. L'handwriting rimane rotto dopo la chiusura.
+
+**Test C — Sostituzione `<canvas>` con `<svg>` nel motore di disegno** (tentativo 31):
+- Motivazione (Opzione C dalle ipotesi): il `<canvas>` è l'elemento che Android WebView riconosce come drawing surface. Sostituendolo con un `<svg>` (che disegna tramite elementi `<path>`), il motore di disegno non avrebbe più alcun canvas DOM.
+- Implementazione: riscrittura completa di `drawing-canvas.ts` con `SVGElement`, `<rect>` per sfondo, `<g>` per righe e tratti, `<path>` per ogni tratto con Bézier midpoint. Rimosso `touch-action: none`.
+- Risultato: **non risolve**. L'handwriting si rompe ugualmente dopo aver aperto la tab editor SVG. Implementazione reverted dall'utente.
+
+**Test D — Apertura tab senza disegnare nulla** (tentativo 32):
+- Motivazione: verificare se il trigger fosse il canvas toccato dalla stylus oppure la semplice apertura della tab.
+- Test: aprire la DrawingEditorView, non toccarla, chiuderla → tentare handwriting nel documento.
+- Risultato: **handwriting rotto anche senza aver toccato nulla nel canvas**. Il trigger è l'apertura della tab, non il disegno. Questo esclude che `touch-action`, `setPointerCapture` o qualsiasi evento di disegno siano la causa.
+
+**Test E — Apertura in nuova finestra Obsidian** (tentativo 33):
+- Motivazione: Obsidian Mobile già apre la tab editor in una nuova finestra separata (`workspace.getLeaf('tab')`). Ipotesi che la separazione di finestra potesse isolare lo stato IME.
+- Risultato: **non risolve**. Confermato dall'utente che l'editor già apre in una finestra separata, ma il problema persiste. Tutto il runtime condivide lo stesso processo WebView → lo stato `StylusWritingManager` è condiviso a livello di processo, non di finestra.
+
+**Stato finale (2026-03-22)**: limite architetturale di Obsidian Mobile confermato. Il `StylusWritingManager` di Android WebView (componente compositor-level di Chromium) viene disabilitato al livello del processo WebView quando rileva l'apertura di una "drawing surface" (qualsiasi tab con canvas/SVG interattivo). Non è risolvibile via JS/CSS dall'interno dell'app.
+
+**Workaround attuale**: lo switch "Modalità handwriting Android" nelle impostazioni. Quando attivo, i riquadri mostrano solo il badge 72px (non interferisce con il proximity detection) e l'utente deve aprire l'editor consapevolmente quando vuole disegnare, sapendo che l'handwriting-to-text nel documento verrà interrotto per quella sessione.
+
+**Conferma esterna**: il plugin **Excalidraw** e il plugin **Handwritten Notes** hanno lo stesso identico problema — appena si apre la tab di disegno, l'handwriting-to-text si disattiva nell'intero Obsidian e non si ripristina nemmeno riavviando l'app. È un limite di Android WebView, non specifico al nostro plugin. **Non esiste soluzione lato plugin**; il compromesso dello switch è la scelta definitiva.
 
 **Fonti**:
 - [Chromium Stylus Handwriting README](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/components/stylus_handwriting/README.md)
@@ -293,10 +357,12 @@ Cambiamenti implementati durante la fase 2:
 
 **Scoperte chiave consolidate**:
 - `inputmode="none"` contamina l'intero WebView — MAI usare
-- Empty SVG (300px) NON rompe handwriting; SVG con disegno (altezza > 300px per auto-expand) SÌ
+- Empty SVG (300px) NON rompe handwriting; SVG con disegno (altezza > 300px per auto-expand) SÌ (sessione 2026-03-19)
 - data-URI come `img.src` rompe handwriting → usare sempre URL vault + cache-bust
 - Il problema è persistente tra sessioni (riavvio Obsidian) — non è corruzione di sessione temporanea
 - Rimuovere completamente la nostra decorazione (nessun figlio nello span) non risolve — la causa è nell'SVG stesso o nella sua altezza
+- **Il trigger è l'apertura della DrawingEditorView, non il disegno** — aprire senza toccare nulla già rompe l'handwriting (scoperta sessione 2026-03-22)
+- **Anche una finestra Obsidian separata non isola il problema** — il WebView process è condiviso (scoperta sessione 2026-03-22)
 
 **Tentativi falliti (completo)**:
 
@@ -312,6 +378,11 @@ Cambiamenti implementati durante la fase 2:
 | 26 | Test console: canvas fake in `document.body` toccato con stylus | Conferma: canvas + stylus = handwriting rotto |
 | 27 | Passaggio a `![[svg]]` con MutationObserver | Non risolve |
 | 28 | Rimozione totale decorazione dallo span (nessun figlio aggiunto) | Non risolve |
+| 29 | Rimosso `touch-action: none` da `.hwm_resize-handle` | Non risolve |
+| 30 | IME reset (blur/focus su `cm-content`) in `DrawingEditorView.onClose()` | Non risolve |
+| 31 | Sostituzione `<canvas>` con `<svg>` nel motore di disegno (Option C) | Non risolve — reverted |
+| 32 | Apertura tab senza disegnare nulla | Conferma: il trigger è l'apertura della tab, non il disegno |
+| 33 | Apertura in nuova finestra Obsidian (già fatto di default su Mobile) | Non risolve — WebView process condiviso |
 
 ---
 
diff --git a/HandTranscriptMd/src/drawing-canvas.ts b/HandTranscriptMd/src/drawing-canvas.ts
index 1919ca0..e8b7ad7 100644
--- a/HandTranscriptMd/src/drawing-canvas.ts
+++ b/HandTranscriptMd/src/drawing-canvas.ts
@@ -136,6 +136,8 @@ export class DrawingCanvas {
 
 	setMode(mode: DrawMode) { this.mode = mode; }
 	getMode(): DrawMode { return this.mode; }
+	// Restituisce true se un tratto è in corso (pointer down)
+	isPointerDown(): boolean { return this.isDrawing; }
 
 	setColor(color: string) { this.color = color; }
 	setLineWidth(w: number) { this.lineWidth = w; }
diff --git a/HandTranscriptMd/src/editor-view.ts b/HandTranscriptMd/src/editor-view.ts
index dfb8f09..7a56c78 100644
--- a/HandTranscriptMd/src/editor-view.ts
+++ b/HandTranscriptMd/src/editor-view.ts
@@ -202,8 +202,12 @@ export class DrawingEditorView extends ItemView {
 			handle.style.color = '#888';
 		}
 
-		// Auto-scroll quando il canvas si espande
-		this.canvas.onResize(() => { scrollWrap.scrollTop = scrollWrap.scrollHeight; });
+		// Auto-scroll quando il canvas si espande, ma solo se non si sta disegnando.
+		// Durante il disegno, lo scroll sposterebbe il canvas nel viewport e le
+		// coordinate del tratto salterebbero (getBoundingClientRect cambia).
+		this.canvas.onResize(() => {
+			if (!this.canvas?.isPointerDown()) scrollWrap.scrollTop = scrollWrap.scrollHeight;
+		});
 
 		// --- Event handlers ---
 		const cv = this.canvas;
@@ -426,6 +430,8 @@ export class DrawingModal extends Modal {
 	private sourcePath: string;
 	private canvas: DrawingCanvas | null = null;
 	private saveTimer: ReturnType<typeof setTimeout> | null = null;
+	// Callback invocato alla chiusura del modal (usato per nascondere/mostrare il bottone matita)
+	onClosed?: () => void;
 
 	constructor(app: App, plugin: HandwritingPlugin, embedId: string, svgPath: string, sourcePath: string) {
 		super(app);
@@ -448,6 +454,8 @@ export class DrawingModal extends Modal {
 			this.canvas = null;
 		}
 		if (this.saveTimer) clearTimeout(this.saveTimer);
+		// Notifica il chiamante che il modal è stato chiuso
+		this.onClosed?.();
 	}
 
 	private async buildEditor() {
@@ -458,8 +466,10 @@ export class DrawingModal extends Modal {
 		const lineColor = getEffectiveLineColor(this.plugin.settings);
 		el.style.backgroundColor = bgColor;
 
-		// Top bar con toolbar (nessun backBtn: il Modal ha già la X nativa)
-		const topbar = el.createDiv({ cls: 'hwm_editor-topbar' });
+		// Top bar con toolbar (nessun backBtn: il Modal ha già la X nativa).
+		// La classe --modal centra la toolbar orizzontalmente (nel DrawingEditorView
+		// c'è il backBtn a sinistra e space-between; qui invece la toolbar è l'unico figlio).
+		const topbar = el.createDiv({ cls: 'hwm_editor-topbar hwm_editor-topbar--modal' });
 		if (isDark) topbar.classList.add('hwm_editor-topbar--dark');
 
 		const toolbar = topbar.createDiv({ cls: 'hwm_toolbar hwm_editor-toolbar' });
@@ -545,7 +555,10 @@ export class DrawingModal extends Modal {
 		handle.createEl('span', { text: '⋯' });
 		if (isDark) { handle.style.background = '#2a2a2a'; handle.style.borderTopColor = '#444'; handle.style.color = '#888'; }
 
-		this.canvas.onResize(() => { scrollWrap.scrollTop = scrollWrap.scrollHeight; });
+		// Auto-scroll solo se non si sta disegnando (stesso motivo del DrawingEditorView)
+		this.canvas.onResize(() => {
+			if (!this.canvas?.isPointerDown()) scrollWrap.scrollTop = scrollWrap.scrollHeight;
+		});
 
 		const cv = this.canvas;
 		penBtn.addEventListener('click', () => { cv.setMode('pen'); penBtn.classList.add('hwm_active'); eraserBtn.classList.remove('hwm_active'); });
@@ -633,25 +646,34 @@ export class DrawingModal extends Modal {
 		await this.app.vault.rename(svgFile, `${dest}/${ts}.svg`);
 	}
 
+	// Regex per trovare ![[svgPath]] nel file .md (formato wiki)
+	private wikiEmbedRegex(): RegExp {
+		const esc = this.svgPath.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+		return new RegExp(`\\n?!\\[\\[${esc}\\]\\]\\n?`);
+	}
+
+	// Regex per il code block legacy con l'id specifico
 	private codeBlockRegex(): RegExp {
 		const esc = this.embedId.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
 		return new RegExp('\\n?```handwriting\\n.*?"id"\\s*:\\s*"' + esc + '".*?\\n```\\n?', 's');
 	}
 
-	private async replaceCodeBlock(markdown: string) {
+	// Applica sostituzione sul .md: prova prima formato wiki, poi legacy come fallback
+	private async replaceInMd(replacement: string) {
 		const mdFile = this.app.vault.getAbstractFileByPath(this.sourcePath);
 		if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
 		const content = await this.app.vault.read(mdFile);
-		const updated = content.replace(this.codeBlockRegex(), '\n' + markdown + '\n');
+		let updated = content.replace(this.wikiEmbedRegex(), replacement);
+		if (updated === content) updated = content.replace(this.codeBlockRegex(), replacement);
 		if (updated !== content) await this.app.vault.modify(mdFile, updated);
 	}
 
+	private async replaceCodeBlock(markdown: string) {
+		await this.replaceInMd('\n' + markdown + '\n');
+	}
+
 	private async removeCodeBlock() {
-		const mdFile = this.app.vault.getAbstractFileByPath(this.sourcePath);
-		if (!(mdFile instanceof TFile)) { new Notice('File markdown non trovato'); return; }
-		const content = await this.app.vault.read(mdFile);
-		const updated = content.replace(this.codeBlockRegex(), '\n');
-		if (updated !== content) await this.app.vault.modify(mdFile, updated);
+		await this.replaceInMd('\n');
 	}
 
 	private mkBtn(parent: HTMLElement, icon: string, title: string): HTMLElement {
diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index c3b16f8..e15769e 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -15,6 +15,7 @@ import {
 	MarkdownView,
 	TFile,
 	Notice,
+	Platform,
 } from 'obsidian';
 
 // Icone SVG inline (stile Lucide 24×24)
@@ -30,7 +31,7 @@ import { strokesToSvg, parseSvgStrokes, generateId } from './svg-utils';
 import { getEffectiveBgColor, getEffectiveLineColor, remapStrokeColor } from './settings';
 import { getRecognizer } from './recognizer';
 import { parseMarkdown } from './md-parser';
-import { VIEW_TYPE_HANDWRITING, DrawingEditorView } from './editor-view';
+import { VIEW_TYPE_HANDWRITING, DrawingEditorView, DrawingModal } from './editor-view';
 
 // Dati JSON salvati dentro il code block ```handwriting (formato legacy)
 interface EmbedData {
@@ -43,6 +44,9 @@ interface EmbedData {
    ============================================= */
 
 export function registerEmbed(plugin: HandwritingPlugin) {
+	// Applica/rimuove la classe CSS badge mode all'avvio in base alle impostazioni
+	document.body.classList.toggle('hwm-handwriting-mode', plugin.settings.hwmHandwritingMode);
+
 	// --- NUOVO: MutationObserver su document.body ---
 	// Intercetta gli span .internal-embed con src _handwriting/ non appena
 	// appaiono nel DOM — funziona sia in reading view che in live preview
@@ -89,6 +93,11 @@ function setupMutationObserver(plugin: HandwritingPlugin) {
 		// Marca subito come decorato per evitare doppia elaborazione
 		span.dataset.hwmDecorated = '1';
 
+		// Modalità handwriting: riduce l'SVG a badge per non bloccare lo stylus nel testo.
+		// La classe viene aggiunta/rimossa in base all'impostazione hwmHandwritingMode.
+		// La regola CSS .hwm-handwriting-mode su document.body gestisce la visualizzazione.
+		span.classList.toggle('hwm-badge-mode', plugin.settings.hwmHandwritingMode);
+
 		// TEST A: pointer-events: none sullo span.
 		// Ipotesi: Chrome usa lo stesso hit-test dei pointer events per la
 		// proximity detection dell'handwriting → con none, ignora lo span e
@@ -561,6 +570,8 @@ function createPortalPanel(
 	const isDark = plugin.settings.bgMode === 'dark';
 	const collapsedHeight = plugin.settings.canvasHeight;
 	let isExpanded = true;
+	// Flag per nascondere il bottone matita quando il modal (Desktop) è aperto
+	let modalOpen = false;
 
 	// Pannello floating con sfondo e ombra, posizionato via position: fixed
 	const panel = document.createElement('div');
@@ -568,22 +579,34 @@ function createPortalPanel(
 	if (isDark) panel.classList.add('hwm_toolbar--dark');
 	document.body.appendChild(panel);
 
-	// --- Bottone matita: apre la tab editor ---
+	// --- Bottone matita ---
+	// Desktop: apre DrawingModal (overlay fullscreen, senza aprire nuova tab)
+	// Mobile: apre DrawingEditorView in una nuova tab (fuori da cm-content → nessun conflitto handwriting)
 	const pencilBtn = createPanelBtn(panel, 'pencil', 'Apri editor disegno');
 	pencilBtn.addEventListener('click', async () => {
-		const leaves   = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING);
-		const existing = leaves.find(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
-		if (existing) {
-			plugin.app.workspace.setActiveLeaf(existing, { focus: true });
-			return;
+		if (Platform.isDesktop) {
+			// Modal overlay — rimane nella stessa finestra
+			if (modalOpen) return;
+			modalOpen = true;
+			const modal = new DrawingModal(plugin.app, plugin, embedId, svgPath, sourcePath);
+			modal.onClosed = () => { modalOpen = false; };
+			modal.open();
+		} else {
+			// Mobile: nuova tab (DrawingEditorView è fuori da cm-content)
+			const leaves   = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING);
+			const existing = leaves.find(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+			if (existing) {
+				plugin.app.workspace.setActiveLeaf(existing, { focus: true });
+				return;
+			}
+			const leaf = plugin.app.workspace.getLeaf('tab');
+			await leaf.setViewState({
+				type: VIEW_TYPE_HANDWRITING,
+				state: { id: embedId, svg: svgPath, sourcePath },
+				active: true,
+			});
+			plugin.app.workspace.revealLeaf(leaf);
 		}
-		const leaf = plugin.app.workspace.getLeaf('tab');
-		await leaf.setViewState({
-			type: VIEW_TYPE_HANDWRITING,
-			state: { id: embedId, svg: svgPath, sourcePath },
-			active: true,
-		});
-		plugin.app.workspace.revealLeaf(leaf);
 	});
 
 	// Separatore visivo
@@ -628,7 +651,24 @@ function createPortalPanel(
 		await removeWikiEmbed(svgPath, sourcePath, plugin);
 	});
 
-	// RAF loop: aggiorna posizione e visibilità.
+	// Scroll fix: nasconde il pannello immediatamente durante lo scroll
+	// per evitare che rimanga in posizione sbagliata tra un frame RAF e l'altro.
+	// Il RAF lo riposiziona e lo rende visibile di nuovo appena la pagina si ferma.
+	let scrollTimer: ReturnType<typeof setTimeout> | null = null;
+	const onScroll = () => {
+		panel.style.visibility = 'hidden';
+		if (scrollTimer) clearTimeout(scrollTimer);
+		scrollTimer = setTimeout(() => { panel.style.visibility = ''; }, 150);
+	};
+	// Ascolta sia il .cm-scroller (live preview) che .markdown-reading-view (reading view)
+	const scrollEl = container.closest('.cm-scroller') as HTMLElement | null
+		?? container.closest('.markdown-reading-view') as HTMLElement | null;
+	if (scrollEl) {
+		scrollEl.addEventListener('scroll', onScroll, { passive: true });
+		plugin.register(() => scrollEl.removeEventListener('scroll', onScroll));
+	}
+
+	// RAF loop: aggiorna posizione e visibilità ogni frame.
 	// Si auto-ferma quando il container lascia il DOM.
 	const update = () => {
 		if (!container.isConnected) {
@@ -637,18 +677,24 @@ function createPortalPanel(
 		}
 		const rect       = container.getBoundingClientRect();
 		const inViewport = rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0;
-		panel.style.display = inViewport ? 'flex' : 'none';
-		if (inViewport) {
+		// Controlla se la tab editor (Mobile) è aperta per questo embed
+		const tabOpen = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING)
+			.some(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+
+		// Nasconde l'INTERO pannello se: editor aperto (modal su Desktop o tab su Mobile)
+		// oppure il container non è nel viewport.
+		// Quando il modal è aperto a schermo intero, il pannello rimarrebbe sopra di esso:
+		// nasconderlo evita che i bottoni siano cliccabili sopra il canvas di disegno.
+		if (!inViewport || modalOpen || tabOpen) {
+			panel.style.display = 'none';
+		} else {
+			panel.style.display = 'flex';
 			// Posizionato in alto a destra del container via position: fixed.
 			// "right" con position:fixed = distanza dal bordo destro del viewport.
 			panel.style.top   = (rect.top + 6) + 'px';
 			panel.style.right = (window.innerWidth - rect.right + 6) + 'px';
 			panel.style.left  = 'auto';
 		}
-		// Nasconde il bottone matita se la tab editor è già aperta
-		const editorOpen = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING)
-			.some(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
-		pencilBtn.style.display = editorOpen ? 'none' : 'flex';
 		requestAnimationFrame(update);
 	};
 	requestAnimationFrame(update);
diff --git a/HandTranscriptMd/src/settings.ts b/HandTranscriptMd/src/settings.ts
index a9d8440..9b2d322 100644
--- a/HandTranscriptMd/src/settings.ts
+++ b/HandTranscriptMd/src/settings.ts
@@ -9,14 +9,15 @@ import type HandwritingPlugin from './main';
 export type BgMode = 'light' | 'dark' | 'custom';
 
 export interface HandwritingSettings {
-	svgFolder: string;       // cartella dove salvare i file SVG
-	canvasWidth: number;     // larghezza interna del canvas (px)
-	canvasHeight: number;    // altezza interna del canvas (px)
-	bgMode: BgMode;          // modalità sfondo
-	bgCustomColor: string;   // colore hex se bgMode === 'custom'
-	ocrLanguages: string[];  // lingue per il riconoscimento OCR (codici BCP-47, es. 'it', 'en')
-	geminiApiKey: string;    // chiave API Google Gemini per l'OCR
-	debugMode: boolean;      // mostra Notice di debug per eventi IME/touch
+	svgFolder: string;            // cartella dove salvare i file SVG
+	canvasWidth: number;          // larghezza interna del canvas (px)
+	canvasHeight: number;         // altezza interna del canvas (px)
+	bgMode: BgMode;               // modalità sfondo
+	bgCustomColor: string;        // colore hex se bgMode === 'custom'
+	ocrLanguages: string[];       // lingue per il riconoscimento OCR (codici BCP-47, es. 'it', 'en')
+	geminiApiKey: string;         // chiave API Google Gemini per l'OCR
+	debugMode: boolean;           // mostra Notice di debug per eventi IME/touch
+	hwmHandwritingMode: boolean;  // se true, mostra badge al posto dell'SVG per non bloccare l'handwriting Android
 }
 
 // Colori predefiniti per le modalità
@@ -92,6 +93,7 @@ export const DEFAULT_SETTINGS: HandwritingSettings = {
 	ocrLanguages: ['it', 'en'],   // italiano e inglese di default
 	geminiApiKey: '',
 	debugMode: false,
+	hwmHandwritingMode: false,    // default: mostra SVG piena
 };
 
 export class HandwritingSettingTab extends PluginSettingTab {
@@ -214,6 +216,25 @@ export class HandwritingSettingTab extends PluginSettingTab {
 					await this.plugin.saveSettings();
 				}));
 
+		// --- Modalità handwriting Android ---
+		// Se attiva, i riquadri mostrano solo una piccola anteprima (badge) invece
+		// dell'SVG a piena altezza, per non bloccare l'handwriting nei campi testo.
+		// Il disegno si apre sempre in una nuova scheda (Android) o modal (Windows).
+		new Setting(containerEl)
+			.setName('Modalità handwriting Android')
+			.setDesc(
+				'Attiva per mantenere lo stylus handwriting nel testo del documento. ' +
+				'I riquadri mostrano solo una piccola anteprima; per disegnare usa il bottone matita.'
+			)
+			.addToggle(toggle => toggle
+				.setValue(this.plugin.settings.hwmHandwritingMode)
+				.onChange(async (value) => {
+					this.plugin.settings.hwmHandwritingMode = value;
+					await this.plugin.saveSettings();
+					// Applica/rimuove la classe CSS sul body immediatamente
+					document.body.classList.toggle('hwm-handwriting-mode', value);
+				}));
+
 		// --- Modalità debug ---
 		new Setting(containerEl)
 			.setName('Modalità debug')
diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css
index e6c5c9c..79e2797 100644
--- a/HandTranscriptMd/styles.css
+++ b/HandTranscriptMd/styles.css
@@ -17,14 +17,55 @@
 	pointer-events: auto;
 }
 
-/* TEST B: limita l'altezza dell'immagine SVG handwriting nel documento.
-   Ipotesi: l'SVG dopo auto-expand supera i 300px → copre più area →
-   aumenta l'interferenza con la proximity detection handwriting Android
-   (40dp dal bordo). Limitando a 300px riduciamo l'area CE=false.
-   object-fit: contain mantiene le proporzioni senza tagliare il disegno. */
+/* --- Modalità handwriting Android (switch nelle impostazioni) ---
+   Quando attiva (classe hwm-handwriting-mode su document.body), i riquadri
+   handwriting mostrano un box compatto con icona invece dell'SVG a piena
+   altezza. Questo riduce l'area CE=false che interferisce con la proximity
+   detection dello stylus handwriting di Android.
+   L'SVG viene nascosto; il pannello portale (position:fixed) rimane visibile
+   sopra il box per permettere apertura editor, conversione ed eliminazione. */
+.hwm-handwriting-mode .hwm-badge-mode {
+	/* Larghezza piena: lo span .internal-embed di default può restare stretto
+	   quanto l'immagine — forziamo 100% per contenere correttamente il pannello portale */
+	width: 100% !important;
+	box-sizing: border-box !important;
+	/* Altezza fissa: abbastanza alta da contenere il pannello portale (~34px)
+	   senza occupare troppo spazio nel documento */
+	height: 72px !important;
+	max-height: 72px !important;
+	min-height: 72px !important;
+	overflow: hidden;
+	cursor: default;
+	/* Flex per centrare l'icona */
+	display: flex !important;
+	align-items: center;
+	justify-content: center;
+	background: var(--background-secondary, #f0f0f0);
+	border-radius: 6px;
+}
+/* Nasconde l'SVG: mostriamo solo il box con l'icona */
+.hwm-handwriting-mode .hwm-badge-mode img {
+	display: none !important;
+}
+/* Icona matita centrata via pseudo-elemento */
+.hwm-handwriting-mode .hwm-badge-mode::after {
+	content: "✏️";
+	font-size: 28px;
+	opacity: 0.5;
+	pointer-events: none;
+}
+
+/* SVG a piena larghezza in tutti i contesti (switch OFF).
+   Quando lo switch è ON, le regole .hwm-handwriting-mode sovrastano questo. */
+.internal-embed[src*="_handwriting/"] {
+	display: block;
+	width: 100%;
+}
 .internal-embed[src*="_handwriting/"] img {
-	max-height: 300px;
-	object-fit: contain;
+	display: block;
+	width: 100%;
+	height: auto;
+	max-height: none;
 }
 
 /* Variante wiki ![[svg]]:
@@ -147,10 +188,17 @@
 .hwm_canvas-wrap {
 	width: 100%;
 	overflow: hidden;
+	/* Centra il canvas orizzontalmente quando il modal/tab è più largo
+	   della risoluzione nativa del canvas (canvasWidth dalle settings) */
+	display: flex;
+	justify-content: center;
 }
 .hwm_canvas {
 	display: block;
-	width: 100%;
+	/* max-width invece di width:100% per evitare che il canvas venga stirato
+	   oltre la sua risoluzione nativa (canvasWidth dai settings).
+	   Stirarlo causerebbe tratti pixelati nel modal / tab full-screen. */
+	max-width: 100%;
 	cursor: crosshair;
 	/* Sfondo bianco fisso */
 	background: #ffffff;
@@ -466,6 +514,11 @@
 	padding: 0 !important;
 }
 
+/* Topbar del DrawingModal: centra la toolbar (non c'è backBtn come nell'EditorView) */
+.hwm_editor-topbar--modal {
+	justify-content: center;
+}
+
 /* --- Scroll container per il canvas nell'editor --- */
 .hwm_editor-scroll {
 	flex: 1;

From 7712638ffe69f0c3c5002838930a97926c4f7fc9 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Sun, 22 Mar 2026 18:59:42 +0100
Subject: [PATCH 06/14] modificate settings e gitignore

---
 .gitignore |  3 +++
 CLAUDE.md  | 12 +++++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index 5d76e9c..190760d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -25,3 +25,6 @@ data.json
 obsidian_ink/
 
 .vs/
+
+# Cartella C creata per errore dai vecchi script deploy (bug MSYS path conversion)
+HandTranscriptMd/C*/
diff --git a/CLAUDE.md b/CLAUDE.md
index 5765ed2..25e8de8 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -47,7 +47,7 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 | File | Cosa fa |
 |------|---------|
 | `main.ts` | Entry point: registra embed, editor view, comando, ribbon, settings, `previewCallbacks` per sync inline↔tab |
-| `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini, toggle `hwmHandwritingMode` |
+| `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini, toggle `hwmHandwritingMode`; mostra versione (`plugin.manifest.version`) e branch (`PLUGIN_BRANCH` costante hardcoded) nell'header della pagina impostazioni |
 | `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio, `allowFingerScroll()` |
 | `svg-utils.ts` | Conversione tratti ↔ SVG (dati riedit in `<desc>` JSON), righe e sfondo inclusi nell'SVG |
 | `embed.ts` | Code block processor → preview SVG inline + pannello portale in document.body; click matita → Modal (Windows) o nuova tab (Android); scroll fix; badge mode |
@@ -350,6 +350,16 @@ Cambiamenti implementati durante la fase 2:
 
 **Conferma esterna**: il plugin **Excalidraw** e il plugin **Handwritten Notes** hanno lo stesso identico problema — appena si apre la tab di disegno, l'handwriting-to-text si disattiva nell'intero Obsidian e non si ripristina nemmeno riavviando l'app. È un limite di Android WebView, non specifico al nostro plugin. **Non esiste soluzione lato plugin**; il compromesso dello switch è la scelta definitiva.
 
+**Ricerca approfondita sul sorgente Chromium (2026-03-22)**:
+
+- **Nessun bug Chromium aperto trovato** per questo problema specifico (il tracker non è scrapeable)
+- **Obsidian Ink Issue #156** — ancora aperta, nessuna soluzione
+- **Scoperta chiave**: il `<canvas>` da solo NON disabilita l'handwriting — non esiste codice canvas-specifico in Chromium che imposti `kInternalNotWritable`. Il trigger reale è **`touch-action: none`**: qualsiasi elemento con quella proprietà CSS fa scattare il flag `kInternalNotWritable` in `touch_action_util.cc`, disabilitando la scrittura con stilo su quell'elemento
+- **Commit rilevante** (~5 mesi fa): `b06690ad` — Samsung DirectWriting disabilitato su Android 14+. Se il dispositivo è Android 14+, il percorso Samsung proprietario (closed source, potenzialmente causa di session-corruption) è già escluso
+- **Ipotesi residua più probabile**: quando `DrawingEditorView` si apre, il `touch-action: none` del canvas o del suo scroll container viene propagato a livello di Android View dal WebView, e alla chiusura della tab quella configurazione non viene resettata
+
+**Possibile prossimo test**: rimuovere completamente `touch-action: none` dal canvas e dal suo scroll container in `drawing-canvas.ts` / `editor-view.ts` e verificare se il problema persiste. Se il canvas da solo non rompe nulla (come confermato dal sorgente Chromium), potrebbe bastare rimuovere quella proprietà.
+
 **Fonti**:
 - [Chromium Stylus Handwriting README](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/components/stylus_handwriting/README.md)
 - [ProseMirror Issue #565](https://github.com/ProseMirror/prosemirror/issues/565)

From 2043a2e60773577ba78ccdabe2d2f00136cef735 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Sun, 22 Mar 2026 18:59:50 +0100
Subject: [PATCH 07/14] modifica alle settings

---
 HandTranscriptMd/src/settings.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/HandTranscriptMd/src/settings.ts b/HandTranscriptMd/src/settings.ts
index 9b2d322..4aeacb7 100644
--- a/HandTranscriptMd/src/settings.ts
+++ b/HandTranscriptMd/src/settings.ts
@@ -96,6 +96,9 @@ export const DEFAULT_SETTINGS: HandwritingSettings = {
 	hwmHandwritingMode: false,    // default: mostra SVG piena
 };
 
+// Nome del branch corrente — aggiornare manualmente ad ogni cambio di branch
+const PLUGIN_BRANCH = 'overlay';
+
 export class HandwritingSettingTab extends PluginSettingTab {
 	plugin: HandwritingPlugin;
 
@@ -110,6 +113,12 @@ export class HandwritingSettingTab extends PluginSettingTab {
 
 		containerEl.createEl('h2', { text: 'Handwriting to Markdown' });
 
+		// Riga versione + branch
+		containerEl.createEl('p', {
+			text: `v${this.plugin.manifest.version} — branch: ${PLUGIN_BRANCH}`,
+			cls: 'setting-item-description',
+		});
+
 		// --- Cartella SVG ---
 		new Setting(containerEl)
 			.setName('Cartella SVG')

From fae69a535141115b78bc12c0a2264e2078ddb236 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Sun, 22 Mar 2026 19:19:43 +0100
Subject: [PATCH 08/14] modifica al claude.md in modo che i comandi per il
 deploy funzionino

---
 CLAUDE.md | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 25e8de8..eabe943 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -147,12 +147,14 @@ Il file SVG è visibile come immagine anche senza il plugin. I tratti sono salva
 
 ### Deploy (comandi copia-incolla per PowerShell)
 
+> **Nota**: usare la forma `bash -c "..."` perché in PowerShell `bash deploy.sh` lancia bash in una directory diversa (home di WSL/Git Bash), non nella directory corrente. Racchiudendo tutto dentro bash il `cd` funziona correttamente per tutti i comandi.
+
 ```powershell
 # Build + deploy al vault locale (solo PC)
-cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; bash deploy.sh
+bash -c "cd '/c/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd' && node esbuild.config.mjs production && bash deploy.sh"
 
 # Build + deploy su Google Drive (per testare su tablet Android)
-cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; bash cloudDeploy.sh
+bash -c "cd '/c/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd' && node esbuild.config.mjs production && bash cloudDeploy.sh"
 ```
 
 ### Percorsi vault

From 3a906bc4c7a1ff9e71588ab02f2066db55e766ee Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Sun, 22 Mar 2026 19:54:38 +0100
Subject: [PATCH 09/14] dai

---
 CLAUDE.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index eabe943..9069745 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -147,14 +147,14 @@ Il file SVG è visibile come immagine anche senza il plugin. I tratti sono salva
 
 ### Deploy (comandi copia-incolla per PowerShell)
 
-> **Nota**: usare la forma `bash -c "..."` perché in PowerShell `bash deploy.sh` lancia bash in una directory diversa (home di WSL/Git Bash), non nella directory corrente. Racchiudendo tutto dentro bash il `cd` funziona correttamente per tutti i comandi.
+> **Nota**: usare Git Bash esplicitamente con `--login` perché PowerShell usa WSL bash di default (che non riconosce i percorsi Windows) e senza `--login` il PATH non include i tool Unix (dirname, cp, wc, ecc.).
 
 ```powershell
 # Build + deploy al vault locale (solo PC)
-bash -c "cd '/c/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd' && node esbuild.config.mjs production && bash deploy.sh"
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; & "C:\Program Files\Git\bin\bash.exe" --login deploy.sh
 
 # Build + deploy su Google Drive (per testare su tablet Android)
-bash -c "cd '/c/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd' && node esbuild.config.mjs production && bash cloudDeploy.sh"
+cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; node esbuild.config.mjs production; & "C:\Program Files\Git\bin\bash.exe" --login cloudDeploy.sh
 ```
 
 ### Percorsi vault

From 315e5f597ea3631ab4b1ea9fb6b95d19b10aa29c Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 23 Mar 2026 02:03:11 +0100
Subject: [PATCH 10/14] accettato il limite dell'handwriting, corretti vari bug

---
 CLAUDE.md                           | 117 ++++++++++++++++++++++--
 HandTranscriptMd/src/editor-view.ts |  64 +++++++++++++
 HandTranscriptMd/src/embed.ts       | 137 +++++++++++++++++-----------
 HandTranscriptMd/src/main.ts        |  12 +++
 HandTranscriptMd/src/settings.ts    |   2 +
 HandTranscriptMd/styles.css         |  53 +++++++++--
 6 files changed, 318 insertions(+), 67 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 9069745..3e99085 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -40,7 +40,7 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 
 ---
 
-## Stato attuale — Fase 5 (fix overlay + centramento modal + badge mode + auto-scroll) — TESTATO
+## Stato attuale — Fase 6 (pannello portale inline + bgMode live update + fix CSS tema) — TESTATO
 
 ### File del plugin (`HandTranscriptMd/src/`)
 
@@ -50,7 +50,7 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 | `settings.ts` | Impostazioni: cartella SVG, dimensioni canvas, sfondo, lingue OCR, chiave API Gemini, toggle `hwmHandwritingMode`; mostra versione (`plugin.manifest.version`) e branch (`PLUGIN_BRANCH` costante hardcoded) nell'header della pagina impostazioni |
 | `drawing-canvas.ts` | Motore disegno Canvas API: Bézier quadratiche, penna, gomma parziale, undo/redo history-based, auto-expand, righe foglio, `allowFingerScroll()` |
 | `svg-utils.ts` | Conversione tratti ↔ SVG (dati riedit in `<desc>` JSON), righe e sfondo inclusi nell'SVG |
-| `embed.ts` | Code block processor → preview SVG inline + pannello portale in document.body; click matita → Modal (Windows) o nuova tab (Android); scroll fix; badge mode |
+| `embed.ts` | Code block processor → preview SVG inline + pannello portale (figlio dello span, position:absolute); click matita → Modal (Windows) o nuova tab (Android); badge mode; `onBgModeRemap` per aggiornare SVG al cambio tema |
 | `editor-view.ts` | `DrawingEditorView` (tab dedicata, Android) + `DrawingModal` (overlay fullscreen, Windows), toolbar completa, auto-save |
 | `recognizer.ts` | `IRecognizer` interface + `GeminiRecognizer`: invia PNG base64 a Gemini API, restituisce testo |
 | `md-parser.ts` | `parseMarkdown()`: post-processa testo OCR riga per riga applicando sintassi markdown |
@@ -66,8 +66,13 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 - **MutationObserver su `document.body`** intercetta gli span con `src*="_handwriting/"` non appena appaiono nel DOM (funziona sia in reading view che in live preview dove il post-processor non viene chiamato)
 - `tryDecorate()` con flag `data-hwm-decorated="1"` per evitare doppia elaborazione; ritenta dopo 150ms se la classe `image-embed` non è ancora presente (caricamento asincrono)
 - **Classe badge mode**: `span.classList.toggle('hwm-badge-mode', hwmHandwritingMode)` — unica modifica allo span quando lo switch è attivo
-- **Pannello portale** (`hwm_portal-panel`) in `document.body` con 4 bottoni: ✏️ (apre Modal su Windows / tab su Android), 📄 (converti OCR), ↕️ (comprimi/espandi), ✕ (elimina). Posizionato via RAF + `getBoundingClientRect()` + `position: fixed`
-- **Scroll fix**: listener `scroll` su `.cm-scroller` / `.markdown-reading-view` che nasconde il pannello immediatamente durante lo scroll (visibilità ripristinata dopo 150ms)
+- **Pannello portale** (`hwm_portal-panel`) con 4 bottoni: ✏️ (apre Modal su Windows / tab su Android), 📄 (converti OCR), ↕️ (comprimi/espandi), ✕ (elimina).
+  - **Posizione**: `container.appendChild(panel)` — il pannello è un figlio diretto dello span; `position: absolute; top: 6px; right: 6px` ancorato allo span (che ha `position: relative`). Non più in `document.body`.
+  - **Nessun RAF loop**: eliminato il loop `requestAnimationFrame` e il listener `scroll`. Il pannello segue lo span naturalmente nel DOM.
+  - **Cleanup**: `plugin.register(() => panel.remove())` — il pannello viene rimosso quando il plugin viene disabilitato.
+  - **Click dei bottoni**: lo span ha `pointer-events: none` (per handwriting Android); il pannello ha `pointer-events: auto` in CSS per ripristinare i click.
+  - **Nascondere con modal aperto**: Desktop → `panel.style.display = 'none'` nel click handler, ripristinato nel callback `modal.onClosed`; Mobile → `workspace.on('layout-change', ...)` per rilevare apertura/chiusura tab.
+- **Comprimi/Espandi**: usa `container.style.height + overflow: hidden` sullo span contenitore — modifica solo l'altezza visibile senza toccare la larghezza dell'immagine.
 - **Refresh immagine**: `previewCallbacks.set(embedId, ...)` aggiorna `img.src` con cache-bust `?t=timestamp` dopo ogni salvataggio dalla tab editor (Obsidian non aggiorna automaticamente `![[svg]]` in live preview quando il file cambia)
 - **NO data-URI**: il src dell'img resta sempre l'URL vault (`http://localhost/_capacitor_file_/...`) — un data-URI verrebbe interpretato da Android come drawing surface
 
@@ -88,8 +93,9 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 `DrawingModal extends Modal` — usato su **Windows**:
 - Overlay fullscreen (`hwm_modal`: `95vw × 90vh`) che appare sopra il documento
 - Stessa toolbar e stesso canvas di `DrawingEditorView`
-- `onClosed?: () => void` — callback invocato alla chiusura per aggiornare il flag `modalOpen` nel RAF loop del pannello portale
+- `onClosed?: () => void` — callback invocato alla chiusura per ripristinare `panel.style.display` nel pannello portale
 - `replaceCodeBlock` / `removeCodeBlock` gestiscono sia formato wiki `![[svg]]` che legacy (prova prima wiki, poi code block come fallback)
+- `private bgModeListener` registrato in `buildEditor()` (dopo `colorBtns`) e rimosso in `onClose()` — aggiorna topbar, toolbar, pallini colore e canvas al cambio bgMode in tempo reale (utile se le impostazioni fossero accessibili con modal aperto)
 
 **Comportamento bottone matita (pannello portale):**
 - `Platform.isDesktop` → `new DrawingModal(...).open()` — si apre nella stessa finestra
@@ -124,7 +130,7 @@ Un plugin Obsidian che inserisce un **riquadro canvas inline** in un file `.md`
 - **Settings OCR** — chiave API Gemini (campo password) + lingue OCR configurabili (default: `it, en`)
 - **Supporto Android** — penna disegna, dito scrolla, nessun conflitto handwriting
 - **Comprimi/Espandi** — preview inline si può compattare all'altezza di default (freccia con rotazione 180°)
-- **Bottone portale** — pannello floating in `document.body`, si posiziona sopra il riquadro via RAF + getBoundingClientRect, scompare durante lo scroll (listener scroll + visibility hidden/visible)
+- **Bottone portale** — pannello `position: absolute` figlio diretto dello span (no RAF loop, no scroll listener, no document.body)
 - **Preview non tappabile** — click handler rimosso; l'unico modo per aprire l'editor è il bottone matita nel pannello portale
 - **Modal Windows** — click matita su Desktop apre `DrawingModal` (overlay fullscreen nella stessa finestra, no tab separata)
 - **Nuova tab Android** — click matita su Mobile apre `DrawingEditorView` in tab separata
@@ -252,6 +258,72 @@ background: var(--background-secondary); border-radius: 6px;
 Più: `img { display: none !important }` per nascondere l'SVG e `::after { content: "✏️"; font-size: 28px; opacity: 0.5; }` per l'icona.
 **File**: `styles.css`.
 
+### ✅ TEST EFFETTUATI (sessione 2026-03-23)
+
+#### Bug 5 — Pannello portale visibile nelle impostazioni e ovunque — RISOLTO ✅
+
+**Sintomo**: il pannello portale (`position: fixed` in `document.body`) rimaneva visibile in alto a destra anche navigando nelle impostazioni, in altre schede, ecc.
+**Causa**: il pannello era appeso a `document.body` e il RAF loop di posizionamento lo seguiva solo quando lo span era nel viewport.
+**Fix**: pannello spostato come figlio diretto dello span contenitore con `position: absolute; top: 6px; right: 6px`. Lo span ha `position: relative`. Il pannello è ora parte del DOM del documento e scompare naturalmente quando si naviga altrove.
+**File**: `src/embed.ts` — `createPortalPanel()` + `styles.css`.
+
+---
+
+#### Bug 6 — Comprimi/Espandi modificava anche la larghezza — RISOLTO ✅
+
+**Sintomo**: cliccando il bottone freccia per comprimere/espandere il riquadro, anche la larghezza cambiava (l'immagine si restringeva).
+**Causa**: il codice precedente usava `max-height` sull'elemento `<img>`, che lo scalava proporzionalmente.
+**Fix**: la compressione ora modifica `container.style.height` + `overflow: hidden` sullo span contenitore. L'immagine viene clippata verticalmente senza alterarne la larghezza.
+**File**: `src/embed.ts` — handler del bottone collapse in `createPortalPanel()`.
+
+---
+
+#### Bug 7 — Pannello portale rimane nel DOM dopo disabilitazione plugin — RISOLTO ✅
+
+**Sintomo**: disabilitando il plugin, i pannelli portale (bottoni) rimanevano visibili nel documento.
+**Fix**: `plugin.register(() => panel.remove())` — Obsidian chiama tutti i callback registrati con `plugin.register()` quando il plugin viene disabilitato.
+**File**: `src/embed.ts` — `createPortalPanel()`.
+
+---
+
+#### Bug 8 — Bottoni pannello portale non cliccabili — RISOLTO ✅
+
+**Sintomo**: dopo lo spostamento del pannello dentro lo span, i bottoni non rispondevano al click.
+**Causa**: lo span aveva `pointer-events: none` (impostato in `tryDecorate()` per handwriting Android). Il pannello figlio ereditava la proprietà.
+**Fix**: `pointer-events: auto` in CSS su `.hwm_portal-panel` — ripristina i click solo sul pannello, lasciando il resto dello span non interattivo.
+**File**: `styles.css`.
+
+---
+
+#### Bug 9 — Palette colori SVG non aggiornata al cambio bgMode — RISOLTO ✅
+
+**Sintomo**: cambiando bgMode nelle impostazioni, gli SVG nei documenti aperti mantenevano i vecchi colori dei tratti finché non si ricaricava il plugin.
+**Fix**: aggiunto listener `onBgModeRemap` in `registerEmbed()` registrato in `plugin.bgModeListeners`. Quando il bgMode cambia:
+1. Itera `plugin.embedPaths` (mappa `embedId → svgPath`)
+2. Legge il file SVG dal vault e verifica il marker `hwm-strokes` (ignora SVG non del plugin)
+3. Parsa `viewBox="0 0 W H"` per ottenere le dimensioni reali (non quelle di default, che perderebbero l'auto-expand)
+4. Rimappa i colori dei tratti con `remapStrokeColor()`, rigenera l'SVG con `strokesToSvg()`, salva
+5. Chiama `plugin.refreshPreview(embedId, newContent)` → aggiorna `img.src` con cache-bust
+**File**: `src/embed.ts` — `onBgModeRemap` in `registerEmbed()`.
+
+---
+
+#### Bug 10 — Toolbar editor non aggiornata al cambio bgMode — RISOLTO ✅
+
+**Sintomo**: i bottoni della toolbar nel `DrawingModal` (Windows) e nel `DrawingEditorView` (Android) non cambiavano colore al cambio bgMode.
+**Causa 1 (live update)**: mancava un listener. Aggiunto `bgModeListener` in entrambe le classi, registrato in `bgModeListeners` dopo la costruzione di `colorBtns` (per poterli aggiornare nel closure). Rimosso in `onClose()`.
+**Causa 2 (riapertura)**: il cambio bgMode avviene sempre con editor chiuso. `buildEditor()` viene chiamato di nuovo alla riapertura e legge `plugin.settings.bgMode` → corretto per costruzione. Il problema visivo era CSS.
+**Causa 3 (CSS)**: Obsidian dark theme ha regole tipo `.modal-content button { background: var(...) }` con specificità `0,1,1` > `0,1,0` di `.hwm_btn`, sovrascrivendo il nostro sfondo trasparente. Il colore del topbar senza `!important` veniva sovrascritto analogamente.
+**Fix CSS** (`styles.css`):
+- `.hwm_editor-topbar { background: rgba(240,240,240,0.95) !important }` e `.hwm_editor-topbar--dark { background: rgba(40,40,40,0.97) !important }` — entrambe con `!important` (la `--dark` appare dopo → vince in dark mode per cascade order)
+- `.hwm_editor-topbar .hwm_btn { background: transparent !important; color: #333 !important }` — batte la specificità di Obsidian
+- `.hwm_editor-topbar--dark .hwm_btn { color: #bbb !important }` — appare dopo → vince in dark mode
+- Hover e active espliciti con `!important` per entrambe le modalità
+**Nota importante**: il cambio bgMode viene SEMPRE effettuato con editor chiuso (il modal copre l'intera finestra). Il listener live è presente ma non è il percorso principale.
+**File**: `src/editor-view.ts` + `styles.css`.
+
+---
+
 ### Altri task aperti
 
 1. **Migliorare il riconoscimento dei caratteri speciali markdown** — `src/recognizer.ts` + `src/md-parser.ts`:
@@ -270,6 +342,33 @@ Più: `img { display: none !important }` per nascondere l'SVG e `::after { conte
    - Obiettivo: unico codice toolbar condiviso, compatta di default su entrambe le piattaforme
    - File coinvolti: `src/editor-view.ts` + `styles.css`
 
+4. **Migliorare il riconoscimento OCR da Gemini** — `src/recognizer.ts` + `src/md-parser.ts`:
+   - Migliorare la qualità complessiva del riconoscimento, non solo i simboli markdown
+   - Affinare il prompt con few-shot examples per simboli (`#`, `-`, `>`, `**`, `==`, ecc.)
+   - Valutare se `md-parser.ts` può coprire i casi che il prompt non gestisce
+   - Valutare modelli Gemini alternativi o parametri diversi (temperatura, ecc.)
+
+5. **Tema automatico — seguire il tema di Obsidian o di sistema** — `src/settings.ts` + `src/embed.ts` + `src/editor-view.ts`:
+   - Attualmente il bgMode (chiaro/scuro/custom) è impostato manualmente nelle Settings
+   - Obiettivo: opzione "Automatico" che legge il tema corrente di Obsidian e si adatta
+   - **Alternativa 1 (più semplice)**: leggere `document.body.classList.contains('theme-dark')` → se true, bgMode = dark; altrimenti light. Obsidian aggiunge/rimuove `theme-dark` dal body al cambio tema.
+   - **Alternativa 2**: `window.matchMedia('(prefers-color-scheme: dark)').matches` → segue il tema di sistema OS (indipendente da Obsidian)
+   - L'alternativa 1 è preferibile perché l'utente potrebbe usare un tema Obsidian diverso da quello di sistema
+   - Aggiungere un `MutationObserver` su `document.body` per rilevare il cambio della classe `theme-dark` e chiamare `notifyBgModeChange()` automaticamente
+
+6. **Angoli arrotondati al riquadro e all'overlay** — `styles.css`:
+   - Riquadro inline (lo span `.internal-embed`): aggiungere `border-radius` all'immagine o al container
+   - Overlay `DrawingModal` (`.hwm_modal`): aggiungere `border-radius` al modal e al canvas interno
+   - Attenzione: l'img dentro lo span non rispetta `border-radius` dello span senza `overflow: hidden` sul container
+
+7. **Rimuovere lo switch "Modalità handwriting Android"** — `src/settings.ts` + `src/embed.ts` + `src/main.ts` + `styles.css`:
+   - Lo switch `hwmHandwritingMode` era un workaround per il bug handwriting Android (BUG APERTO), ora considerato comportamento definitivo
+   - Rendere la badge mode **sempre attiva su Android** e la preview piena **sempre attiva su Desktop**, senza toggle manuale
+   - Rimuovere `hwmHandwritingMode` da `HandwritingSettings` e `DEFAULT_SETTINGS` in `settings.ts`
+   - Rimuovere la voce dalla pagina impostazioni
+   - In `registerEmbed()`: sostituire la lettura di `hwmHandwritingMode` con `Platform.isMobile`
+   - Mantenere le classi CSS `hwm-handwriting-mode` e `hwm-badge-mode` (solo applicarle automaticamente)
+
 ### Problemi risolti
 
 - **Handwriting Android (disegno)** ✅ — risolto con editor in tab separata (`ItemView`), canvas fuori da `cm-content`
@@ -292,6 +391,12 @@ Più: `img { display: none !important }` per nascondere l'SVG e `::after { conte
 - **Canvas modal non centrato, toolbar a sinistra (Bug 2)** ✅ — `display: flex; justify-content: center` su `.hwm_canvas-wrap`; `max-width: 100%` su `.hwm_canvas`; classe `hwm_editor-topbar--modal` aggiunta al topbar del modal per centrare la toolbar
 - **Auto-scroll sposta tratti durante disegno (Bug 3)** ✅ — aggiunto `isPointerDown()` in `DrawingCanvas`; scroll automatico bloccato se il pointer è premuto, sia in `DrawingEditorView` che in `DrawingModal`
 - **Badge mode mostra riquadro minuscolo (Bug 4)** ✅ — CSS `.hwm-handwriting-mode .hwm-badge-mode` con `width: 100% !important`, `height: 72px`, flex centrato, `img { display: none }` + `::after` con emoji matita
+- **Pannello portale visibile nelle impostazioni (Bug 5)** ✅ — pannello spostato da `document.body` (position:fixed) a figlio diretto dello span (position:absolute); eliminati RAF loop e scroll listener
+- **Comprimi/Espandi modificava larghezza (Bug 6)** ✅ — usa `container.style.height + overflow:hidden` invece di `max-height` sull'img
+- **Pannello resta dopo disabilitazione plugin (Bug 7)** ✅ — `plugin.register(() => panel.remove())`
+- **Bottoni pannello non cliccabili (Bug 8)** ✅ — `pointer-events: auto` su `.hwm_portal-panel` in CSS
+- **SVG non aggiornati al cambio bgMode (Bug 9)** ✅ — listener `onBgModeRemap` in `bgModeListeners`; legge viewBox per dimensioni reali, rimappa colori, salva SVG, refresh preview
+- **Toolbar editor non aggiornata al cambio bgMode (Bug 10)** ✅ — `bgModeListener` in `DrawingEditorView` e `DrawingModal`; CSS `!important` su topbar e bottoni per battere specificità Obsidian dark theme
 
 ### BUG APERTO — Handwriting disabilitato nel documento quando il riquadro è presente
 
diff --git a/HandTranscriptMd/src/editor-view.ts b/HandTranscriptMd/src/editor-view.ts
index 7a56c78..d9cc606 100644
--- a/HandTranscriptMd/src/editor-view.ts
+++ b/HandTranscriptMd/src/editor-view.ts
@@ -37,6 +37,8 @@ export class DrawingEditorView extends ItemView {
 	private svgPath = '';
 	private sourcePath = '';
 	private saveTimer: ReturnType<typeof setTimeout> | null = null;
+	// Listener per aggiornare la classe dark al cambio bgMode
+	private bgModeListener: ((bgMode: string) => void) | null = null;
 
 	constructor(leaf: WorkspaceLeaf, plugin: HandwritingPlugin) {
 		super(leaf);
@@ -70,6 +72,11 @@ export class DrawingEditorView extends ItemView {
 			this.canvas = null;
 		}
 		if (this.saveTimer) clearTimeout(this.saveTimer);
+		// Deregistra il listener bgMode
+		if (this.bgModeListener) {
+			this.plugin.bgModeListeners.delete(this.bgModeListener);
+			this.bgModeListener = null;
+		}
 	}
 
 	/* ---------- Costruisce la UI dell'editor ---------- */
@@ -149,6 +156,31 @@ export class DrawingEditorView extends ItemView {
 		};
 		if (isMobile) updateColorSizes(true);
 
+		// Listener bgMode: aggiorna toolbar, pallini colore e sfondo canvas al cambio tema.
+		// Deve stare DOPO la dichiarazione di colorBtns per poterli aggiornare nel closure.
+		const lightColors = ['#000000', '#1e40af', '#dc2626', '#16a34a'];
+		const darkColors  = ['#ffffff', '#60a5fa', '#f87171', '#4ade80'];
+		this.bgModeListener = (bgMode: string) => {
+			const dark = bgMode === 'dark';
+			topbar.classList.toggle('hwm_editor-topbar--dark', dark);
+			toolbar.classList.toggle('hwm_toolbar--dark', dark);
+			el.style.backgroundColor = getEffectiveBgColor(this.plugin.settings);
+			// Aggiorna i pallini colore palette (backgroundColor inline con !important)
+			const newColors = dark ? darkColors : lightColors;
+			colorBtns.forEach((btn, i) => {
+				btn.style.backgroundColor = newColors[i] ?? '';
+				btn.setAttribute('title', newColors[i] ?? '');
+			});
+			// Aggiorna sfondo e righe nel canvas
+			if (this.canvas) {
+				this.canvas.setBackground(
+					getEffectiveBgColor(this.plugin.settings),
+					getEffectiveLineColor(this.plugin.settings)
+				);
+			}
+		};
+		this.plugin.bgModeListeners.add(this.bgModeListener);
+
 		// Undo / Redo / Clear
 		const undoBtn = this.mkBtn(toolbar, 'rotate-ccw', 'Annulla');
 		undoBtn.classList.add('hwm_undo-btn');
@@ -430,6 +462,8 @@ export class DrawingModal extends Modal {
 	private sourcePath: string;
 	private canvas: DrawingCanvas | null = null;
 	private saveTimer: ReturnType<typeof setTimeout> | null = null;
+	// Listener per aggiornare la classe dark al cambio bgMode
+	private bgModeListener: ((bgMode: string) => void) | null = null;
 	// Callback invocato alla chiusura del modal (usato per nascondere/mostrare il bottone matita)
 	onClosed?: () => void;
 
@@ -454,6 +488,11 @@ export class DrawingModal extends Modal {
 			this.canvas = null;
 		}
 		if (this.saveTimer) clearTimeout(this.saveTimer);
+		// Deregistra il listener bgMode
+		if (this.bgModeListener) {
+			this.plugin.bgModeListeners.delete(this.bgModeListener);
+			this.bgModeListener = null;
+		}
 		// Notifica il chiamante che il modal è stato chiuso
 		this.onClosed?.();
 	}
@@ -475,6 +514,7 @@ export class DrawingModal extends Modal {
 		const toolbar = topbar.createDiv({ cls: 'hwm_toolbar hwm_editor-toolbar' });
 		if (isDark) toolbar.classList.add('hwm_toolbar--dark');
 
+
 		if (isMobile) {
 			toolbar.classList.add('hwm_toolbar--compact');
 			const toggleBtn = this.mkBtn(toolbar, 'chevron-down', 'Mostra tutti');
@@ -518,6 +558,30 @@ export class DrawingModal extends Modal {
 		};
 		if (isMobile) updateColorSizes(true);
 
+		// Listener bgMode: aggiorna toolbar, pallini colore e sfondo canvas al cambio tema.
+		const lightColors = ['#000000', '#1e40af', '#dc2626', '#16a34a'];
+		const darkColors  = ['#ffffff', '#60a5fa', '#f87171', '#4ade80'];
+		this.bgModeListener = (bgMode: string) => {
+			const dark = bgMode === 'dark';
+			topbar.classList.toggle('hwm_editor-topbar--dark', dark);
+			toolbar.classList.toggle('hwm_toolbar--dark', dark);
+			el.style.backgroundColor = getEffectiveBgColor(this.plugin.settings);
+			// Aggiorna i pallini colore palette
+			const newColors = dark ? darkColors : lightColors;
+			colorBtns.forEach((btn, i) => {
+				btn.style.backgroundColor = newColors[i] ?? '';
+				btn.setAttribute('title', newColors[i] ?? '');
+			});
+			// Aggiorna sfondo e righe nel canvas
+			if (this.canvas) {
+				this.canvas.setBackground(
+					getEffectiveBgColor(this.plugin.settings),
+					getEffectiveLineColor(this.plugin.settings)
+				);
+			}
+		};
+		this.plugin.bgModeListeners.add(this.bgModeListener);
+
 		const undoBtn = this.mkBtn(toolbar, 'rotate-ccw', 'Annulla');
 		undoBtn.classList.add('hwm_undo-btn');
 		const redoBtn = this.mkBtn(toolbar, 'rotate-cw', 'Ripristina');
diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index e15769e..3f50d67 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -28,7 +28,7 @@ const ICONS: Record<string, string> = {
 import type HandwritingPlugin from './main';
 import { Stroke } from './drawing-canvas';
 import { strokesToSvg, parseSvgStrokes, generateId } from './svg-utils';
-import { getEffectiveBgColor, getEffectiveLineColor, remapStrokeColor } from './settings';
+import { getEffectiveBgColor, getEffectiveLineColor, remapStrokeColor, BgMode } from './settings';
 import { getRecognizer } from './recognizer';
 import { parseMarkdown } from './md-parser';
 import { VIEW_TYPE_HANDWRITING, DrawingEditorView, DrawingModal } from './editor-view';
@@ -47,6 +47,43 @@ export function registerEmbed(plugin: HandwritingPlugin) {
 	// Applica/rimuove la classe CSS badge mode all'avvio in base alle impostazioni
 	document.body.classList.toggle('hwm-handwriting-mode', plugin.settings.hwmHandwritingMode);
 
+	// --- Listener globale: remap automatico colori SVG al cambio bgMode ---
+	// Quando l'utente cambia sfondo canvas nelle impostazioni, tutti gli SVG del plugin
+	// attualmente tracciati in embedPaths vengono letti, rimappati e risalvati nel vault.
+	// Identifica gli SVG del plugin tramite <desc class="hwm-strokes"> — gli SVG
+	// dell'utente non hanno questo tag e vengono ignorati.
+	const onBgModeRemap = async (bgMode: string) => {
+		for (const [embedId, svgPath] of plugin.embedPaths) {
+			const file = plugin.app.vault.getAbstractFileByPath(svgPath);
+			if (!(file instanceof TFile)) continue;
+			const content = await plugin.app.vault.read(file);
+			// Salta SVG non creati dal plugin (assenza del tag hwm-strokes)
+			if (!content.includes('hwm-strokes')) continue;
+			const strokes = parseSvgStrokes(content);
+			// Rimappa i colori dei tratti al nuovo tema
+			const remapped = strokes.map(s => ({
+				...s, color: remapStrokeColor(s.color, bgMode as BgMode)
+			}));
+			// Legge dimensioni reali dal viewBox per preservare l'altezza raggiunta con auto-expand.
+			// Usare plugin.settings.canvasHeight causerebbe il "collasso" degli SVG cresciuti.
+			const dimMatch = content.match(/viewBox="0 0 (\d+) (\d+)"/);
+			const svgWidth  = dimMatch ? parseInt(dimMatch[1]!) : plugin.settings.canvasWidth;
+			const svgHeight = dimMatch ? parseInt(dimMatch[2]!) : plugin.settings.canvasHeight;
+			const newSvg = strokesToSvg(
+				remapped,
+				svgWidth,
+				svgHeight,
+				getEffectiveBgColor(plugin.settings),
+				getEffectiveLineColor(plugin.settings)
+			);
+			await plugin.app.vault.modify(file, newSvg);
+			// Aggiorna l'<img> nella preview inline con cache-bust
+			plugin.refreshPreview(embedId, newSvg);
+		}
+	};
+	plugin.bgModeListeners.add(onBgModeRemap);
+	plugin.register(() => plugin.bgModeListeners.delete(onBgModeRemap));
+
 	// --- NUOVO: MutationObserver su document.body ---
 	// Intercetta gli span .internal-embed con src _handwriting/ non appena
 	// appaiono nel DOM — funziona sia in reading view che in live preview
@@ -570,26 +607,37 @@ function createPortalPanel(
 	const isDark = plugin.settings.bgMode === 'dark';
 	const collapsedHeight = plugin.settings.canvasHeight;
 	let isExpanded = true;
-	// Flag per nascondere il bottone matita quando il modal (Desktop) è aperto
+	// Flag per nascondere il pannello quando il modal (Desktop) è aperto
 	let modalOpen = false;
 
-	// Pannello floating con sfondo e ombra, posizionato via position: fixed
+	// Lo span diventa position: relative per ancorarvi il pannello (position: absolute).
+	container.style.position = 'relative';
+
 	const panel = document.createElement('div');
 	panel.className = 'hwm_portal-panel';
 	if (isDark) panel.classList.add('hwm_toolbar--dark');
-	document.body.appendChild(panel);
+	container.appendChild(panel);
+	// Rimuove il pannello dal DOM quando il plugin viene disabilitato
+	plugin.register(() => panel.remove());
+
+	// Traccia embedId → svgPath per il remap automatico al cambio bgMode
+	plugin.embedPaths.set(embedId, svgPath);
 
 	// --- Bottone matita ---
 	// Desktop: apre DrawingModal (overlay fullscreen, senza aprire nuova tab)
-	// Mobile: apre DrawingEditorView in una nuova tab (fuori da cm-content → nessun conflitto handwriting)
+	// Mobile: apre DrawingEditorView in una nuova tab
 	const pencilBtn = createPanelBtn(panel, 'pencil', 'Apri editor disegno');
 	pencilBtn.addEventListener('click', async () => {
 		if (Platform.isDesktop) {
-			// Modal overlay — rimane nella stessa finestra
 			if (modalOpen) return;
 			modalOpen = true;
+			// Nasconde il pannello mentre il modal è aperto (altrimenti galleggerebbe sul canvas)
+			panel.style.display = 'none';
 			const modal = new DrawingModal(plugin.app, plugin, embedId, svgPath, sourcePath);
-			modal.onClosed = () => { modalOpen = false; };
+			modal.onClosed = () => {
+				modalOpen = false;
+				if (container.isConnected) panel.style.display = '';
+			};
 			modal.open();
 		} else {
 			// Mobile: nuova tab (DrawingEditorView è fuori da cm-content)
@@ -626,18 +674,22 @@ function createPortalPanel(
 	});
 
 	// --- Bottone comprimi/espandi ---
+	// Usa height + overflow:hidden sul container (non max-height sull'<img>):
+	// così l'immagine viene ritagliata verticalmente senza che la larghezza cambi.
+	// Il pannello (position:absolute, top:6px) resta dentro l'area visibile
+	// anche da compresso (collapsedHeight è sempre >> 6px + altezza pannello).
 	const collapseBtn = createPanelBtn(panel, 'chevron-up', 'Comprimi');
 	collapseBtn.classList.add('hwm_collapse-btn');
 	collapseBtn.addEventListener('click', () => {
 		isExpanded = !isExpanded;
 		if (isExpanded) {
-			container.style.maxHeight = '';
-			container.style.overflow  = '';
+			container.style.height   = '';
+			container.style.overflow = '';
 			collapseBtn.classList.remove('hwm_rotated');
 			collapseBtn.title = 'Comprimi';
 		} else {
-			container.style.maxHeight = collapsedHeight + 'px';
-			container.style.overflow  = 'hidden';
+			container.style.height   = collapsedHeight + 'px';
+			container.style.overflow = 'hidden';
 			collapseBtn.classList.add('hwm_rotated');
 			collapseBtn.title = 'Espandi';
 		}
@@ -651,53 +703,32 @@ function createPortalPanel(
 		await removeWikiEmbed(svgPath, sourcePath, plugin);
 	});
 
-	// Scroll fix: nasconde il pannello immediatamente durante lo scroll
-	// per evitare che rimanga in posizione sbagliata tra un frame RAF e l'altro.
-	// Il RAF lo riposiziona e lo rende visibile di nuovo appena la pagina si ferma.
-	let scrollTimer: ReturnType<typeof setTimeout> | null = null;
-	const onScroll = () => {
-		panel.style.visibility = 'hidden';
-		if (scrollTimer) clearTimeout(scrollTimer);
-		scrollTimer = setTimeout(() => { panel.style.visibility = ''; }, 150);
-	};
-	// Ascolta sia il .cm-scroller (live preview) che .markdown-reading-view (reading view)
-	const scrollEl = container.closest('.cm-scroller') as HTMLElement | null
-		?? container.closest('.markdown-reading-view') as HTMLElement | null;
-	if (scrollEl) {
-		scrollEl.addEventListener('scroll', onScroll, { passive: true });
-		plugin.register(() => scrollEl.removeEventListener('scroll', onScroll));
-	}
-
-	// RAF loop: aggiorna posizione e visibilità ogni frame.
-	// Si auto-ferma quando il container lascia il DOM.
-	const update = () => {
+	// Layout-change: su Mobile nasconde il pannello quando la tab editor è aperta
+	const onLayoutChange = () => {
 		if (!container.isConnected) {
-			panel.remove();
+			plugin.app.workspace.off('layout-change', onLayoutChange);
+			plugin.embedPaths.delete(embedId);
 			return;
 		}
-		const rect       = container.getBoundingClientRect();
-		const inViewport = rect.width > 0 && rect.top < window.innerHeight && rect.bottom > 0;
-		// Controlla se la tab editor (Mobile) è aperta per questo embed
-		const tabOpen = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING)
-			.some(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
-
-		// Nasconde l'INTERO pannello se: editor aperto (modal su Desktop o tab su Mobile)
-		// oppure il container non è nel viewport.
-		// Quando il modal è aperto a schermo intero, il pannello rimarrebbe sopra di esso:
-		// nasconderlo evita che i bottoni siano cliccabili sopra il canvas di disegno.
-		if (!inViewport || modalOpen || tabOpen) {
-			panel.style.display = 'none';
-		} else {
-			panel.style.display = 'flex';
-			// Posizionato in alto a destra del container via position: fixed.
-			// "right" con position:fixed = distanza dal bordo destro del viewport.
-			panel.style.top   = (rect.top + 6) + 'px';
-			panel.style.right = (window.innerWidth - rect.right + 6) + 'px';
-			panel.style.left  = 'auto';
+		if (Platform.isMobile) {
+			const tabOpen = plugin.app.workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING)
+				.some(l => (l.view as DrawingEditorView).getEmbedId() === embedId);
+			panel.style.display = tabOpen ? 'none' : '';
 		}
-		requestAnimationFrame(update);
 	};
-	requestAnimationFrame(update);
+	plugin.app.workspace.on('layout-change', onLayoutChange);
+	plugin.register(() => plugin.app.workspace.off('layout-change', onLayoutChange));
+
+	// BgMode listener: aggiorna la classe dark sul pannello al cambio tema
+	const onBgMode = (bgMode: string) => {
+		if (!container.isConnected) {
+			plugin.bgModeListeners.delete(onBgMode);
+			return;
+		}
+		panel.classList.toggle('hwm_toolbar--dark', bgMode === 'dark');
+	};
+	plugin.bgModeListeners.add(onBgMode);
+	plugin.register(() => plugin.bgModeListeners.delete(onBgMode));
 }
 
 // Crea un bottone div nel pannello portale
diff --git a/HandTranscriptMd/src/main.ts b/HandTranscriptMd/src/main.ts
index 3da5da3..c6030dc 100644
--- a/HandTranscriptMd/src/main.ts
+++ b/HandTranscriptMd/src/main.ts
@@ -18,11 +18,23 @@ export default class HandwritingPlugin extends Plugin {
 	// Mappa di callback per aggiornare le preview inline quando l'editor tab salva
 	public previewCallbacks = new Map<string, (svgContent: string) => void>();
 
+	// Mappa embedId → svgPath: permette di trovare i file SVG da rimappare al cambio bgMode
+	public embedPaths = new Map<string, string>();
+
+	// Callback notificate quando l'utente cambia bgMode nelle impostazioni
+	public bgModeListeners = new Set<(bgMode: string) => void>();
+
 	// Invocato dall'editor tab dopo ogni salvataggio per aggiornare la preview inline
 	refreshPreview(id: string, svgContent: string) {
 		this.previewCallbacks.get(id)?.(svgContent);
 	}
 
+	// Chiamato da settings quando l'utente cambia bgMode:
+	// notifica pannelli (aggiornamento classe dark) e SVG attivi (remap colori)
+	notifyBgModeChange() {
+		this.bgModeListeners.forEach(cb => cb(this.settings.bgMode));
+	}
+
 	async onload() {
 		await this.loadSettings();
 
diff --git a/HandTranscriptMd/src/settings.ts b/HandTranscriptMd/src/settings.ts
index 4aeacb7..3891e68 100644
--- a/HandTranscriptMd/src/settings.ts
+++ b/HandTranscriptMd/src/settings.ts
@@ -171,6 +171,8 @@ export class HandwritingSettingTab extends PluginSettingTab {
 				.onChange(async (value) => {
 					this.plugin.settings.bgMode = value as BgMode;
 					await this.plugin.saveSettings();
+					// Notifica pannelli (dark class) e SVG attivi (remap colori)
+					this.plugin.notifyBgModeChange();
 					// Aggiorna la UI per mostrare/nascondere il color picker
 					this.display();
 				}));
diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css
index 79e2797..fa109e0 100644
--- a/HandTranscriptMd/styles.css
+++ b/HandTranscriptMd/styles.css
@@ -22,7 +22,7 @@
    handwriting mostrano un box compatto con icona invece dell'SVG a piena
    altezza. Questo riduce l'area CE=false che interferisce con la proximity
    detection dello stylus handwriting di Android.
-   L'SVG viene nascosto; il pannello portale (position:fixed) rimane visibile
+   L'SVG viene nascosto; il pannello portale (position:absolute) rimane visibile
    sopra il box per permettere apertura editor, conversione ed eliminazione. */
 .hwm-handwriting-mode .hwm-badge-mode {
 	/* Larghezza piena: lo span .internal-embed di default può restare stretto
@@ -406,10 +406,15 @@
    cm-content → non rompe handwriting Android
    ======================================== */
 
-/* Pannello floating con tutti i bottoni (nuovo formato ![[svg]]) */
+/* Pannello con tutti i bottoni (nuovo formato ![[svg]]).
+   Vive dentro lo span .internal-embed (position: relative impostato via JS).
+   Con position: absolute segue il DOM: scompare quando lo span non è visibile
+   (scroll, impostazioni aperte, cambio tab) senza nessuna logica JS aggiuntiva. */
 .hwm_portal-panel {
-	position: fixed; /* coordinate viewport, aggiornate via RAF */
-	z-index: 100;
+	position: absolute;
+	top: 6px;
+	right: 6px;
+	z-index: 10; /* sufficiente per stare sopra l'img interna */
 	display: flex;
 	align-items: center;
 	gap: 0; /* spacing via margin-right sui .hwm_btn */
@@ -417,6 +422,9 @@
 	border-radius: 6px;
 	background: rgba(240, 240, 240, 0.95);
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
+	/* Lo span padre ha pointer-events:none (per handwriting Android):
+	   ripristina i click sui bottoni del pannello */
+	pointer-events: auto;
 }
 
 /* Bottone cerchio singolo (formato legacy) */
@@ -489,14 +497,43 @@
 	align-items: center;
 	justify-content: space-between;
 	padding: 6px 8px;
-	background: rgba(240, 240, 240, 0.95);
-	border-bottom: 1px solid #ddd;
+	background: rgba(240, 240, 240, 0.95) !important; /* !important: impedisce a Obsidian dark mode di sovrascrivere il topbar */
+	border-bottom: 1px solid #ddd !important;
 	flex-shrink: 0;
 	gap: 8px;
 }
 .hwm_editor-topbar--dark {
-	background: rgba(40, 40, 40, 0.97);
-	border-bottom-color: #444;
+	background: rgba(40, 40, 40, 0.97) !important;
+	border-bottom-color: #444 !important;
+}
+
+/* Forza background e colore icone dentro il topbar dell'editor.
+   Obsidian dark theme ha regole tipo ".modal-content button { background: var(...) }"
+   con specificità 0,1,1 > 0,1,0 di .hwm_btn: senza !important qui sotto, i bottoni
+   rimangono scuri anche in light mode. Le due regole .hwm_btn e --dark .hwm_btn hanno
+   stessa specificità (0,2,0) ma --dark appare dopo → vince in dark mode. */
+.hwm_editor-topbar .hwm_btn {
+	background: transparent !important;
+	color: #333 !important;
+}
+.hwm_editor-topbar--dark .hwm_btn {
+	background: transparent !important;
+	color: #bbb !important;
+}
+/* Hover light: sfondo grigio chiaro */
+.hwm_editor-topbar .hwm_btn:hover:not(.hwm_active) {
+	background: #e0e0e0 !important;
+	color: #333 !important;
+}
+/* Hover dark: sfondo bianco semi-trasparente */
+.hwm_editor-topbar--dark .hwm_btn:hover:not(.hwm_active) {
+	background: rgba(255, 255, 255, 0.12) !important;
+	color: #fff !important;
+}
+/* Bottone attivo (tool selezionato): sempre sfondo accent e icona bianca */
+.hwm_editor-topbar .hwm_btn.hwm_active {
+	background: var(--interactive-accent) !important;
+	color: #ffffff !important;
 }
 
 /* Bottone ← (indietro, a sinistra) */

From 3993877e1ba3d4f3375250b6e2e9809a486708a6 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 23 Mar 2026 15:15:12 +0100
Subject: [PATCH 11/14] =?UTF-8?q?siamo=20arrivati=20ad=20un=20buon=20livel?=
 =?UTF-8?q?lo=20di=20grafica=20e=20funzionalit=C3=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md                           | 317 +---------------------------
 HandTranscriptMd/src/editor-view.ts |  24 ++-
 HandTranscriptMd/src/embed.ts       |  20 +-
 HandTranscriptMd/src/main.ts        |  12 ++
 HandTranscriptMd/src/settings.ts    |  93 ++------
 HandTranscriptMd/styles.css         |  50 ++++-
 NOTES.md                            | 293 +++++++++++++++++++++++++
 7 files changed, 402 insertions(+), 407 deletions(-)
 create mode 100644 NOTES.md

diff --git a/CLAUDE.md b/CLAUDE.md
index 3e99085..cdec43a 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -212,314 +212,15 @@ cd C:\Projects\pluginObsidian\handWrittenMarkdownConverter\HandTranscriptMd; nod
 
 ---
 
+> **Storico sessioni, bug risolti e funzionalità completate** → vedi [`NOTES.md`](./NOTES.md)
+> I task completati vanno spostati in `NOTES.md`; in questa sezione restano solo i task ancora da fare.
+
 ## Prossimi passi
 
-### ✅ TEST EFFETTUATI (sessione 2026-03-22)
+### Task aperti
 
-#### Bug 1 — Pannello portale parzialmente visibile con Modal aperto — RISOLTO ✅
-
-**Sintomo**: su Windows, cliccando il bottone matita, i bottoni "Converti" e "Comprimi" del pannello portale restavano visibili sopra il modal mentre il bottone matita scompariva correttamente.
-**Causa**: il RAF loop nascondeva solo il bottone matita (`btn.style.display`) ma non l'intero pannello.
-**Fix**: il RAF loop ora setta `panel.style.display = 'none'` quando `modalOpen || tabOpen`, nascondendo l'intero pannello portale (tutti e 4 i bottoni).
-**File**: `src/embed.ts` — RAF loop in `decorateSpan()`.
-
----
-
-#### Bug 2 — Canvas modal troppo largo, toolbar non centrata — RISOLTO ✅
-
-**Sintomo**: nel Modal Windows, il canvas occupava tutta la larghezza dell'overlay (troppo largo e non centrato). La toolbar era allineata a sinistra invece che al centro.
-**Fix CSS** (`styles.css`):
-- `.hwm_canvas-wrap { display: flex; justify-content: center; }` — centra il canvas orizzontalmente
-- `.hwm_canvas { max-width: 100%; }` — rimosso `width: 100%` fisso
-- `.hwm_editor-topbar--modal { justify-content: center; }` — centra la toolbar nel modal
-**Fix TS** (`editor-view.ts`): `DrawingModal.buildEditor()` aggiunge classe `hwm_editor-topbar--modal` alla topbar.
-
----
-
-#### Bug 3 — Auto-scroll sposta i tratti durante il disegno — RISOLTO ✅
-
-**Sintomo**: quando il canvas si espandeva automaticamente (auto-expand) mentre stavo disegnando, lo scroll automatico verso il basso spostava i punti del tratto corrente rispetto alla posizione del pennino.
-**Causa**: l'evento `onResize` faceva scroll immediatamente anche con il pointer premuto, spostando il canvas mentre le coordinate del puntatore erano ancora relative alla posizione pre-scroll.
-**Fix**: aggiunto metodo pubblico `isPointerDown(): boolean` in `DrawingCanvas` (`drawing-canvas.ts`). Sia `DrawingEditorView` che `DrawingModal` in `editor-view.ts` ora controllano `!canvas.isPointerDown()` prima di eseguire il `scrollTop` automatico.
-
----
-
-#### Bug 4 — Badge mode mostra icona in riquadro piccolissimo — RISOLTO ✅
-
-**Sintomo**: attivando "Modalità handwriting Android" nelle impostazioni, i riquadri SVG si riducevano a un quadratino minuscolo invece di un badge orizzontale a piena larghezza.
-**Causa**: lo span `.internal-embed` senza figli visibili collassava alla sua larghezza intrinseca (quasi zero).
-**Fix CSS** (`.hwm-handwriting-mode .hwm-badge-mode`):
-```css
-width: 100% !important; box-sizing: border-box !important;
-height: 72px !important; display: flex !important;
-align-items: center; justify-content: center;
-background: var(--background-secondary); border-radius: 6px;
-```
-Più: `img { display: none !important }` per nascondere l'SVG e `::after { content: "✏️"; font-size: 28px; opacity: 0.5; }` per l'icona.
-**File**: `styles.css`.
-
-### ✅ TEST EFFETTUATI (sessione 2026-03-23)
-
-#### Bug 5 — Pannello portale visibile nelle impostazioni e ovunque — RISOLTO ✅
-
-**Sintomo**: il pannello portale (`position: fixed` in `document.body`) rimaneva visibile in alto a destra anche navigando nelle impostazioni, in altre schede, ecc.
-**Causa**: il pannello era appeso a `document.body` e il RAF loop di posizionamento lo seguiva solo quando lo span era nel viewport.
-**Fix**: pannello spostato come figlio diretto dello span contenitore con `position: absolute; top: 6px; right: 6px`. Lo span ha `position: relative`. Il pannello è ora parte del DOM del documento e scompare naturalmente quando si naviga altrove.
-**File**: `src/embed.ts` — `createPortalPanel()` + `styles.css`.
-
----
-
-#### Bug 6 — Comprimi/Espandi modificava anche la larghezza — RISOLTO ✅
-
-**Sintomo**: cliccando il bottone freccia per comprimere/espandere il riquadro, anche la larghezza cambiava (l'immagine si restringeva).
-**Causa**: il codice precedente usava `max-height` sull'elemento `<img>`, che lo scalava proporzionalmente.
-**Fix**: la compressione ora modifica `container.style.height` + `overflow: hidden` sullo span contenitore. L'immagine viene clippata verticalmente senza alterarne la larghezza.
-**File**: `src/embed.ts` — handler del bottone collapse in `createPortalPanel()`.
-
----
-
-#### Bug 7 — Pannello portale rimane nel DOM dopo disabilitazione plugin — RISOLTO ✅
-
-**Sintomo**: disabilitando il plugin, i pannelli portale (bottoni) rimanevano visibili nel documento.
-**Fix**: `plugin.register(() => panel.remove())` — Obsidian chiama tutti i callback registrati con `plugin.register()` quando il plugin viene disabilitato.
-**File**: `src/embed.ts` — `createPortalPanel()`.
-
----
-
-#### Bug 8 — Bottoni pannello portale non cliccabili — RISOLTO ✅
-
-**Sintomo**: dopo lo spostamento del pannello dentro lo span, i bottoni non rispondevano al click.
-**Causa**: lo span aveva `pointer-events: none` (impostato in `tryDecorate()` per handwriting Android). Il pannello figlio ereditava la proprietà.
-**Fix**: `pointer-events: auto` in CSS su `.hwm_portal-panel` — ripristina i click solo sul pannello, lasciando il resto dello span non interattivo.
-**File**: `styles.css`.
-
----
-
-#### Bug 9 — Palette colori SVG non aggiornata al cambio bgMode — RISOLTO ✅
-
-**Sintomo**: cambiando bgMode nelle impostazioni, gli SVG nei documenti aperti mantenevano i vecchi colori dei tratti finché non si ricaricava il plugin.
-**Fix**: aggiunto listener `onBgModeRemap` in `registerEmbed()` registrato in `plugin.bgModeListeners`. Quando il bgMode cambia:
-1. Itera `plugin.embedPaths` (mappa `embedId → svgPath`)
-2. Legge il file SVG dal vault e verifica il marker `hwm-strokes` (ignora SVG non del plugin)
-3. Parsa `viewBox="0 0 W H"` per ottenere le dimensioni reali (non quelle di default, che perderebbero l'auto-expand)
-4. Rimappa i colori dei tratti con `remapStrokeColor()`, rigenera l'SVG con `strokesToSvg()`, salva
-5. Chiama `plugin.refreshPreview(embedId, newContent)` → aggiorna `img.src` con cache-bust
-**File**: `src/embed.ts` — `onBgModeRemap` in `registerEmbed()`.
-
----
-
-#### Bug 10 — Toolbar editor non aggiornata al cambio bgMode — RISOLTO ✅
-
-**Sintomo**: i bottoni della toolbar nel `DrawingModal` (Windows) e nel `DrawingEditorView` (Android) non cambiavano colore al cambio bgMode.
-**Causa 1 (live update)**: mancava un listener. Aggiunto `bgModeListener` in entrambe le classi, registrato in `bgModeListeners` dopo la costruzione di `colorBtns` (per poterli aggiornare nel closure). Rimosso in `onClose()`.
-**Causa 2 (riapertura)**: il cambio bgMode avviene sempre con editor chiuso. `buildEditor()` viene chiamato di nuovo alla riapertura e legge `plugin.settings.bgMode` → corretto per costruzione. Il problema visivo era CSS.
-**Causa 3 (CSS)**: Obsidian dark theme ha regole tipo `.modal-content button { background: var(...) }` con specificità `0,1,1` > `0,1,0` di `.hwm_btn`, sovrascrivendo il nostro sfondo trasparente. Il colore del topbar senza `!important` veniva sovrascritto analogamente.
-**Fix CSS** (`styles.css`):
-- `.hwm_editor-topbar { background: rgba(240,240,240,0.95) !important }` e `.hwm_editor-topbar--dark { background: rgba(40,40,40,0.97) !important }` — entrambe con `!important` (la `--dark` appare dopo → vince in dark mode per cascade order)
-- `.hwm_editor-topbar .hwm_btn { background: transparent !important; color: #333 !important }` — batte la specificità di Obsidian
-- `.hwm_editor-topbar--dark .hwm_btn { color: #bbb !important }` — appare dopo → vince in dark mode
-- Hover e active espliciti con `!important` per entrambe le modalità
-**Nota importante**: il cambio bgMode viene SEMPRE effettuato con editor chiuso (il modal copre l'intera finestra). Il listener live è presente ma non è il percorso principale.
-**File**: `src/editor-view.ts` + `styles.css`.
-
----
-
-### Altri task aperti
-
-1. **Migliorare il riconoscimento dei caratteri speciali markdown** — `src/recognizer.ts` + `src/md-parser.ts`:
-   - Il testo normale viene riconosciuto correttamente da Gemini
-   - Il problema riguarda solo i **simboli markdown**: `#`, `-`, `>`, `**`, `==`, ecc. non vengono riconosciuti/applicati correttamente
-   - Migliorare il prompt con few-shot examples espliciti per i simboli (es. "Se vedi `# Titolo` → scrivi `# Titolo`")
-   - Valutare se `md-parser.ts` può coprire i casi che il prompt non gestisce
-
-2. **Auto-expand — animazione scattosa** — **BUG APERTO** (parzialmente risolto):
-   - Fix precedente: guard `if (this.animFrameId !== null) return` in `checkAutoExpand()` → loop up/down risolto
-   - Problema residuo: espansione scattosa invece che fluida
-   - File: `src/drawing-canvas.ts` → `animateHeight()` e `checkAutoExpand()`
-
-3. **Toolbar unificata Windows/Android** — **DA FARE**:
-   - Attualmente la toolbar su Windows è sempre espansa, su Android è compatta con toggle ▼/▲
-   - Obiettivo: unico codice toolbar condiviso, compatta di default su entrambe le piattaforme
-   - File coinvolti: `src/editor-view.ts` + `styles.css`
-
-4. **Migliorare il riconoscimento OCR da Gemini** — `src/recognizer.ts` + `src/md-parser.ts`:
-   - Migliorare la qualità complessiva del riconoscimento, non solo i simboli markdown
-   - Affinare il prompt con few-shot examples per simboli (`#`, `-`, `>`, `**`, `==`, ecc.)
-   - Valutare se `md-parser.ts` può coprire i casi che il prompt non gestisce
-   - Valutare modelli Gemini alternativi o parametri diversi (temperatura, ecc.)
-
-5. **Tema automatico — seguire il tema di Obsidian o di sistema** — `src/settings.ts` + `src/embed.ts` + `src/editor-view.ts`:
-   - Attualmente il bgMode (chiaro/scuro/custom) è impostato manualmente nelle Settings
-   - Obiettivo: opzione "Automatico" che legge il tema corrente di Obsidian e si adatta
-   - **Alternativa 1 (più semplice)**: leggere `document.body.classList.contains('theme-dark')` → se true, bgMode = dark; altrimenti light. Obsidian aggiunge/rimuove `theme-dark` dal body al cambio tema.
-   - **Alternativa 2**: `window.matchMedia('(prefers-color-scheme: dark)').matches` → segue il tema di sistema OS (indipendente da Obsidian)
-   - L'alternativa 1 è preferibile perché l'utente potrebbe usare un tema Obsidian diverso da quello di sistema
-   - Aggiungere un `MutationObserver` su `document.body` per rilevare il cambio della classe `theme-dark` e chiamare `notifyBgModeChange()` automaticamente
-
-6. **Angoli arrotondati al riquadro e all'overlay** — `styles.css`:
-   - Riquadro inline (lo span `.internal-embed`): aggiungere `border-radius` all'immagine o al container
-   - Overlay `DrawingModal` (`.hwm_modal`): aggiungere `border-radius` al modal e al canvas interno
-   - Attenzione: l'img dentro lo span non rispetta `border-radius` dello span senza `overflow: hidden` sul container
-
-7. **Rimuovere lo switch "Modalità handwriting Android"** — `src/settings.ts` + `src/embed.ts` + `src/main.ts` + `styles.css`:
-   - Lo switch `hwmHandwritingMode` era un workaround per il bug handwriting Android (BUG APERTO), ora considerato comportamento definitivo
-   - Rendere la badge mode **sempre attiva su Android** e la preview piena **sempre attiva su Desktop**, senza toggle manuale
-   - Rimuovere `hwmHandwritingMode` da `HandwritingSettings` e `DEFAULT_SETTINGS` in `settings.ts`
-   - Rimuovere la voce dalla pagina impostazioni
-   - In `registerEmbed()`: sostituire la lettura di `hwmHandwritingMode` con `Platform.isMobile`
-   - Mantenere le classi CSS `hwm-handwriting-mode` e `hwm-badge-mode` (solo applicarle automaticamente)
-
-### Problemi risolti
-
-- **Handwriting Android (disegno)** ✅ — risolto con editor in tab separata (`ItemView`), canvas fuori da `cm-content`
-- **Pen scroll** ✅ — penna non scrolla più, solo dito (JS manuale via `setPointerCapture`)
-- **Toolbar — tema scuro** ✅
-- **Spazio vuoto sezione colori in toolbar compatta** ✅
-- **Trashcan non cancella visualmente** ✅
-- **Bottoni inline coprivano `</>` di Obsidian** ✅ — spostati a `left: 6px`
-- **Ordine bottoni inline** ✅ — invertito: X, Converti, Freccia (da sinistra)
-- **Placeholder text** ✅ — aggiornato a "Usa il bottone matita in alto a destra per disegnare"
-- **Bottone portale non cerchio perfetto** ✅ — risolto con `width/height/min-width/min-height: 36px !important`, `padding: 0 !important`, `overflow: hidden`
-- **Icona bottone portale non visibile** ✅ — SVG con `stroke="currentColor"` non diventava bianco; risolto con `.hwm_portal-btn svg { stroke: #ffffff !important }`
-- **Bottone portale non si nasconde con editor aperto** ✅ — check `workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING).some(...)` nel RAF loop (Android) + flag `modalOpen` (Windows)
-- **Bottone portale `position: absolute` invece di `fixed`** ✅ — `getBoundingClientRect()` restituisce coordinate viewport, non serviva aggiungere `scrollY/scrollX`
-- **Bottoni pannello portale rimangono visibili durante lo scroll** ✅ — listener `scroll` su `.cm-scroller`/`.markdown-reading-view` che setta `visibility: hidden` durante lo scroll
-- **Modal Windows** ✅ — implementato `DrawingModal extends Modal`; click matita su Desktop apre modal invece di nuova tab
-- **Switch handwriting** ✅ — `hwmHandwritingMode` in settings; badge mode via classe CSS su `document.body` e sullo span
-- **DrawingModal non gestiva formato wiki** ✅ — aggiunto `wikiEmbedRegex()` e logica try-wiki-then-legacy in `replaceInMd()`
-- **Pannello portale visibile con Modal aperto (Bug 1)** ✅ — RAF loop ora nasconde l'intero panel (`display: none`) quando `modalOpen || tabOpen`, non solo il bottone matita
-- **Canvas modal non centrato, toolbar a sinistra (Bug 2)** ✅ — `display: flex; justify-content: center` su `.hwm_canvas-wrap`; `max-width: 100%` su `.hwm_canvas`; classe `hwm_editor-topbar--modal` aggiunta al topbar del modal per centrare la toolbar
-- **Auto-scroll sposta tratti durante disegno (Bug 3)** ✅ — aggiunto `isPointerDown()` in `DrawingCanvas`; scroll automatico bloccato se il pointer è premuto, sia in `DrawingEditorView` che in `DrawingModal`
-- **Badge mode mostra riquadro minuscolo (Bug 4)** ✅ — CSS `.hwm-handwriting-mode .hwm-badge-mode` con `width: 100% !important`, `height: 72px`, flex centrato, `img { display: none }` + `::after` con emoji matita
-- **Pannello portale visibile nelle impostazioni (Bug 5)** ✅ — pannello spostato da `document.body` (position:fixed) a figlio diretto dello span (position:absolute); eliminati RAF loop e scroll listener
-- **Comprimi/Espandi modificava larghezza (Bug 6)** ✅ — usa `container.style.height + overflow:hidden` invece di `max-height` sull'img
-- **Pannello resta dopo disabilitazione plugin (Bug 7)** ✅ — `plugin.register(() => panel.remove())`
-- **Bottoni pannello non cliccabili (Bug 8)** ✅ — `pointer-events: auto` su `.hwm_portal-panel` in CSS
-- **SVG non aggiornati al cambio bgMode (Bug 9)** ✅ — listener `onBgModeRemap` in `bgModeListeners`; legge viewBox per dimensioni reali, rimappa colori, salva SVG, refresh preview
-- **Toolbar editor non aggiornata al cambio bgMode (Bug 10)** ✅ — `bgModeListener` in `DrawingEditorView` e `DrawingModal`; CSS `!important` su topbar e bottoni per battere specificità Obsidian dark theme
-
-### BUG APERTO — Handwriting disabilitato nel documento quando il riquadro è presente
-
-**Sintomo**: quando nel documento è presente un riquadro handwriting con un disegno (SVG non vuoto), la stylus handwriting-to-text di Android smette di funzionare nell'intero editor. Cancellare il riquadro ripristina l'handwriting. Il problema persiste tra riavvii di Obsidian.
-
-**Progressione delle scoperte**:
-
-**Fase 1 — Formato code block** (tentativi 16-26):
-- `contenteditable="false"` su wrapper CM6 → rimosso → non risolve
-- `touch-action: none` → rimosso → non risolve
-- `background-image` SVG → rimossa → non risolve
-- `<canvas>` nel DOM → rimosso → non risolve
-- Canvas in `document.body` (fuori da CM6) toccato con stylus → **rompe handwriting** — conclusione: è il canvas element quando toccato dalla stylus, non la sua posizione nel DOM
-- **Causa root fase 1**: Android WebView tratta qualsiasi `<canvas>` toccato dalla stylus come "drawing surface" e disabilita handwriting-to-text a livello di sessione WebView
-
-**Fase 2 — Passaggio a formato wiki `![[svg]]`** (sessione 2026-03-19):
-
-L'obiettivo era eliminare il `<canvas>` dal documento e mostrare solo l'`<img>` nativa di Obsidian.
-
-Problema riscontrato: l'SVG vuoto (300px di altezza) NON rompe l'handwriting. L'SVG con un disegno (altezza variabile dopo auto-expand) SÌ lo rompe — anche dopo riavvio Obsidian, anche senza mai aprire la tab editor.
-
-Cambiamenti implementati durante la fase 2:
-- Passaggio da code block a `![[svg]]` come formato principale
-- `insertHandwritingBlock()` crea il file SVG PRIMA di inserire il wikilink (altrimenti Obsidian mostra "could not be found")
-- MutationObserver su `document.body` per intercettare gli span (il post-processor non funziona per i widget CM6 immagine in live preview)
-- Fix data-URI: `img.src = data:image/svg+xml,...` → cambiato in cache-bust URL (`?t=timestamp`) perché la data-URI veniva interpretata da Android come drawing surface
-- Rimosso `addWikiOverlay` (aggiungeva `hwm_inline-buttons` come figlio dello span): la struttura dello span è ora identica a un'immagine normale
-- Pannello portale (`hwm_portal-panel`) in `document.body` con tutti e 4 i bottoni
-
-**Fase 3 — Test approfonditi (sessione 2026-03-22)**:
-
-**Test A — Rimozione `touch-action: none` da `.hwm_resize-handle`** (tentativo 29):
-- Motivazione: `touch-action: none` è uno dei segnali che Android WebView usa per identificare "drawing surfaces". Rimuovendolo dal resize handle, si riduce il numero di elementi che si qualificano come drawing surface.
-- Risultato: **non risolve**. L'handwriting si rompe ugualmente dopo aver aperto la tab editor.
-
-**Test B — IME reset alla chiusura della tab editor** (tentativo 30):
-- Motivazione: ipotesi che la sessione IME (Input Method Engine) di Android venisse "bloccata" dall'apertura della DrawingEditorView. Un blur/focus sul `cm-content` dopo la chiusura avrebbe potuto resettarla.
-- Implementazione: `DrawingEditorView.onClose()` fa `cm.blur(); setTimeout(() => cm.focus(), 80)` solo su mobile.
-- Risultato: **non risolve**. L'handwriting rimane rotto dopo la chiusura.
-
-**Test C — Sostituzione `<canvas>` con `<svg>` nel motore di disegno** (tentativo 31):
-- Motivazione (Opzione C dalle ipotesi): il `<canvas>` è l'elemento che Android WebView riconosce come drawing surface. Sostituendolo con un `<svg>` (che disegna tramite elementi `<path>`), il motore di disegno non avrebbe più alcun canvas DOM.
-- Implementazione: riscrittura completa di `drawing-canvas.ts` con `SVGElement`, `<rect>` per sfondo, `<g>` per righe e tratti, `<path>` per ogni tratto con Bézier midpoint. Rimosso `touch-action: none`.
-- Risultato: **non risolve**. L'handwriting si rompe ugualmente dopo aver aperto la tab editor SVG. Implementazione reverted dall'utente.
-
-**Test D — Apertura tab senza disegnare nulla** (tentativo 32):
-- Motivazione: verificare se il trigger fosse il canvas toccato dalla stylus oppure la semplice apertura della tab.
-- Test: aprire la DrawingEditorView, non toccarla, chiuderla → tentare handwriting nel documento.
-- Risultato: **handwriting rotto anche senza aver toccato nulla nel canvas**. Il trigger è l'apertura della tab, non il disegno. Questo esclude che `touch-action`, `setPointerCapture` o qualsiasi evento di disegno siano la causa.
-
-**Test E — Apertura in nuova finestra Obsidian** (tentativo 33):
-- Motivazione: Obsidian Mobile già apre la tab editor in una nuova finestra separata (`workspace.getLeaf('tab')`). Ipotesi che la separazione di finestra potesse isolare lo stato IME.
-- Risultato: **non risolve**. Confermato dall'utente che l'editor già apre in una finestra separata, ma il problema persiste. Tutto il runtime condivide lo stesso processo WebView → lo stato `StylusWritingManager` è condiviso a livello di processo, non di finestra.
-
-**Stato finale (2026-03-22)**: limite architetturale di Obsidian Mobile confermato. Il `StylusWritingManager` di Android WebView (componente compositor-level di Chromium) viene disabilitato al livello del processo WebView quando rileva l'apertura di una "drawing surface" (qualsiasi tab con canvas/SVG interattivo). Non è risolvibile via JS/CSS dall'interno dell'app.
-
-**Workaround attuale**: lo switch "Modalità handwriting Android" nelle impostazioni. Quando attivo, i riquadri mostrano solo il badge 72px (non interferisce con il proximity detection) e l'utente deve aprire l'editor consapevolmente quando vuole disegnare, sapendo che l'handwriting-to-text nel documento verrà interrotto per quella sessione.
-
-**Conferma esterna**: il plugin **Excalidraw** e il plugin **Handwritten Notes** hanno lo stesso identico problema — appena si apre la tab di disegno, l'handwriting-to-text si disattiva nell'intero Obsidian e non si ripristina nemmeno riavviando l'app. È un limite di Android WebView, non specifico al nostro plugin. **Non esiste soluzione lato plugin**; il compromesso dello switch è la scelta definitiva.
-
-**Ricerca approfondita sul sorgente Chromium (2026-03-22)**:
-
-- **Nessun bug Chromium aperto trovato** per questo problema specifico (il tracker non è scrapeable)
-- **Obsidian Ink Issue #156** — ancora aperta, nessuna soluzione
-- **Scoperta chiave**: il `<canvas>` da solo NON disabilita l'handwriting — non esiste codice canvas-specifico in Chromium che imposti `kInternalNotWritable`. Il trigger reale è **`touch-action: none`**: qualsiasi elemento con quella proprietà CSS fa scattare il flag `kInternalNotWritable` in `touch_action_util.cc`, disabilitando la scrittura con stilo su quell'elemento
-- **Commit rilevante** (~5 mesi fa): `b06690ad` — Samsung DirectWriting disabilitato su Android 14+. Se il dispositivo è Android 14+, il percorso Samsung proprietario (closed source, potenzialmente causa di session-corruption) è già escluso
-- **Ipotesi residua più probabile**: quando `DrawingEditorView` si apre, il `touch-action: none` del canvas o del suo scroll container viene propagato a livello di Android View dal WebView, e alla chiusura della tab quella configurazione non viene resettata
-
-**Possibile prossimo test**: rimuovere completamente `touch-action: none` dal canvas e dal suo scroll container in `drawing-canvas.ts` / `editor-view.ts` e verificare se il problema persiste. Se il canvas da solo non rompe nulla (come confermato dal sorgente Chromium), potrebbe bastare rimuovere quella proprietà.
-
-**Fonti**:
-- [Chromium Stylus Handwriting README](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/components/stylus_handwriting/README.md)
-- [ProseMirror Issue #565](https://github.com/ProseMirror/prosemirror/issues/565)
-- Plugin Ink ha lo stesso problema irrisolto ([Issue #156](https://github.com/daledesilva/obsidian_ink/issues/156))
-
-**Scoperte chiave consolidate**:
-- `inputmode="none"` contamina l'intero WebView — MAI usare
-- Empty SVG (300px) NON rompe handwriting; SVG con disegno (altezza > 300px per auto-expand) SÌ (sessione 2026-03-19)
-- data-URI come `img.src` rompe handwriting → usare sempre URL vault + cache-bust
-- Il problema è persistente tra sessioni (riavvio Obsidian) — non è corruzione di sessione temporanea
-- Rimuovere completamente la nostra decorazione (nessun figlio nello span) non risolve — la causa è nell'SVG stesso o nella sua altezza
-- **Il trigger è l'apertura della DrawingEditorView, non il disegno** — aprire senza toccare nulla già rompe l'handwriting (scoperta sessione 2026-03-22)
-- **Anche una finestra Obsidian separata non isola il problema** — il WebView process è condiviso (scoperta sessione 2026-03-22)
-
-**Tentativi falliti (completo)**:
-
-| # | Approccio | Risultato |
-|---|-----------|-----------|
-| 16 | Rimuovere `beforeinput` listener globale | Non risolve |
-| 17 | `<button>` → `<div role="button">` in cm-content | Non risolve |
-| 18 | `<img>` → CSS `background-image` | Non risolve |
-| 19 | Rimuovere `contenteditable="false"` dai wrapper CM6 + `pointer-events: none` | Non risolve |
-| 20-23 | DevTools: rimuovere CE=false, touch-action, background-image, canvas dal DOM | Non risolve |
-| 24 | Editor in Modal invece di tab | Non praticabile (stylus non disegna nel modal) |
-| 25 | Bottone portale in `document.body` | Non risolve (canvas nella tab corrompe sessione) |
-| 26 | Test console: canvas fake in `document.body` toccato con stylus | Conferma: canvas + stylus = handwriting rotto |
-| 27 | Passaggio a `![[svg]]` con MutationObserver | Non risolve |
-| 28 | Rimozione totale decorazione dallo span (nessun figlio aggiunto) | Non risolve |
-| 29 | Rimosso `touch-action: none` da `.hwm_resize-handle` | Non risolve |
-| 30 | IME reset (blur/focus su `cm-content`) in `DrawingEditorView.onClose()` | Non risolve |
-| 31 | Sostituzione `<canvas>` con `<svg>` nel motore di disegno (Option C) | Non risolve — reverted |
-| 32 | Apertura tab senza disegnare nulla | Conferma: il trigger è l'apertura della tab, non il disegno |
-| 33 | Apertura in nuova finestra Obsidian (già fatto di default su Mobile) | Non risolve — WebView process condiviso |
-
----
-
-## Ricerca effettuata — Plugin esistenti
-
-### Nessuno fa esattamente questo. Gap confermato.
-
-| Plugin | Cosa fa | Manca |
-|--------|---------|-------|
-| **Ink** (`daledesilva/obsidian_ink`) | Canvas inline nel `.md`, tldraw, penna | OCR/conversione testo (in roadmap) |
-| **Handwriting to Text** (`jirayu3141`) | Foto → Gemini AI → testo nel cursore | Non è canvas inline, è workflow foto |
-| **Petrify** (`jo-minjun/petrify`) | File tablet e-ink → Excalidraw/MD con OCR | Pensato per reMarkable/Boox, non canvas inline |
-| **AI Image OCR** (`rootiest`) | Immagine → AI OCR → testo | Non è canvas inline |
-| **Pergament** (`hobyte`) | Canvas embedded primitivo | Nessun OCR, sviluppo lento |
-
-### Differenze rispetto a Ink (nostro riferimento)
-
-| Ink | Il nostro plugin |
-|-----|-----------------|
-| tldraw (pesante, React) | Canvas API nativa (leggero, zero dipendenze extra) |
-| File `.drawing` proprietari JSON | File **SVG standard** visibili ovunque |
-| Nessuna conversione testo | **OCR + conversione markdown** (Fase 2) |
-| React + Jotai | Vanilla TypeScript |
+- **Migliorare il riconoscimento OCR da Gemini** — `src/recognizer.ts` + `src/md-parser.ts`:
+  - Migliorare la qualità complessiva del riconoscimento, non solo i simboli markdown
+  - Affinare il prompt con few-shot examples per simboli (`#`, `-`, `>`, `**`, `==`, ecc.)
+  - Valutare se `md-parser.ts` può coprire i casi che il prompt non gestisce
+  - Valutare modelli Gemini alternativi o parametri diversi (temperatura, ecc.)
\ No newline at end of file
diff --git a/HandTranscriptMd/src/editor-view.ts b/HandTranscriptMd/src/editor-view.ts
index d9cc606..6ea6314 100644
--- a/HandTranscriptMd/src/editor-view.ts
+++ b/HandTranscriptMd/src/editor-view.ts
@@ -15,6 +15,12 @@ import { parseMarkdown } from './md-parser';
 
 export const VIEW_TYPE_HANDWRITING = 'handwriting-editor';
 
+// Risolve se il tema è scuro tenendo conto di 'auto' (legge la classe Obsidian sul body)
+function resolveIsDark(bgMode: string): boolean {
+	if (bgMode === 'auto') return document.body.classList.contains('theme-dark');
+	return bgMode === 'dark';
+}
+
 // Icone SVG inline (stile Lucide 24×24)
 const ICONS: Record<string, string> = {
 	'pencil':      `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z"/></svg>`,
@@ -87,7 +93,7 @@ export class DrawingEditorView extends ItemView {
 		el.classList.add('hwm_editor-view');
 
 		const isMobile = Platform.isMobile;
-		const isDark = this.plugin.settings.bgMode === 'dark';
+		const isDark = resolveIsDark(this.plugin.settings.bgMode);
 		const bgColor = getEffectiveBgColor(this.plugin.settings);
 		const lineColor = getEffectiveLineColor(this.plugin.settings);
 		el.style.backgroundColor = bgColor;
@@ -161,9 +167,10 @@ export class DrawingEditorView extends ItemView {
 		const lightColors = ['#000000', '#1e40af', '#dc2626', '#16a34a'];
 		const darkColors  = ['#ffffff', '#60a5fa', '#f87171', '#4ade80'];
 		this.bgModeListener = (bgMode: string) => {
-			const dark = bgMode === 'dark';
+			const dark = resolveIsDark(bgMode);
 			topbar.classList.toggle('hwm_editor-topbar--dark', dark);
 			toolbar.classList.toggle('hwm_toolbar--dark', dark);
+			handle.classList.toggle('hwm_resize-handle--dark', dark);
 			el.style.backgroundColor = getEffectiveBgColor(this.plugin.settings);
 			// Aggiorna i pallini colore palette (backgroundColor inline con !important)
 			const newColors = dark ? darkColors : lightColors;
@@ -228,11 +235,7 @@ export class DrawingEditorView extends ItemView {
 		// Resize handle (visibile ma non interattivo)
 		const handle = scrollWrap.createDiv({ cls: 'hwm_resize-handle hwm_resize-handle--disabled' });
 		handle.createEl('span', { text: '⋯' });
-		if (isDark) {
-			handle.style.background = '#2a2a2a';
-			handle.style.borderTopColor = '#444';
-			handle.style.color = '#888';
-		}
+		handle.classList.toggle('hwm_resize-handle--dark', isDark);
 
 		// Auto-scroll quando il canvas si espande, ma solo se non si sta disegnando.
 		// Durante il disegno, lo scroll sposterebbe il canvas nel viewport e le
@@ -500,7 +503,7 @@ export class DrawingModal extends Modal {
 	private async buildEditor() {
 		const el = this.contentEl;
 		const isMobile = Platform.isMobile;
-		const isDark = this.plugin.settings.bgMode === 'dark';
+		const isDark = resolveIsDark(this.plugin.settings.bgMode);
 		const bgColor = getEffectiveBgColor(this.plugin.settings);
 		const lineColor = getEffectiveLineColor(this.plugin.settings);
 		el.style.backgroundColor = bgColor;
@@ -562,9 +565,10 @@ export class DrawingModal extends Modal {
 		const lightColors = ['#000000', '#1e40af', '#dc2626', '#16a34a'];
 		const darkColors  = ['#ffffff', '#60a5fa', '#f87171', '#4ade80'];
 		this.bgModeListener = (bgMode: string) => {
-			const dark = bgMode === 'dark';
+			const dark = resolveIsDark(bgMode);
 			topbar.classList.toggle('hwm_editor-topbar--dark', dark);
 			toolbar.classList.toggle('hwm_toolbar--dark', dark);
+			handle.classList.toggle('hwm_resize-handle--dark', dark);
 			el.style.backgroundColor = getEffectiveBgColor(this.plugin.settings);
 			// Aggiorna i pallini colore palette
 			const newColors = dark ? darkColors : lightColors;
@@ -617,7 +621,7 @@ export class DrawingModal extends Modal {
 
 		const handle = scrollWrap.createDiv({ cls: 'hwm_resize-handle hwm_resize-handle--disabled' });
 		handle.createEl('span', { text: '⋯' });
-		if (isDark) { handle.style.background = '#2a2a2a'; handle.style.borderTopColor = '#444'; handle.style.color = '#888'; }
+		handle.classList.toggle('hwm_resize-handle--dark', isDark);
 
 		// Auto-scroll solo se non si sta disegnando (stesso motivo del DrawingEditorView)
 		this.canvas.onResize(() => {
diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index 3f50d67..e8a434a 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -44,8 +44,9 @@ interface EmbedData {
    ============================================= */
 
 export function registerEmbed(plugin: HandwritingPlugin) {
-	// Applica/rimuove la classe CSS badge mode all'avvio in base alle impostazioni
-	document.body.classList.toggle('hwm-handwriting-mode', plugin.settings.hwmHandwritingMode);
+	// Su mobile: badge mode sempre attiva (lo stylus handwriting Android
+	// non è compatibile con SVG a piena altezza nel documento).
+	document.body.classList.toggle('hwm-handwriting-mode', Platform.isMobile);
 
 	// --- Listener globale: remap automatico colori SVG al cambio bgMode ---
 	// Quando l'utente cambia sfondo canvas nelle impostazioni, tutti gli SVG del plugin
@@ -130,10 +131,9 @@ function setupMutationObserver(plugin: HandwritingPlugin) {
 		// Marca subito come decorato per evitare doppia elaborazione
 		span.dataset.hwmDecorated = '1';
 
-		// Modalità handwriting: riduce l'SVG a badge per non bloccare lo stylus nel testo.
-		// La classe viene aggiunta/rimossa in base all'impostazione hwmHandwritingMode.
+		// Su mobile: badge mode sempre attiva per non bloccare lo stylus handwriting nel testo.
 		// La regola CSS .hwm-handwriting-mode su document.body gestisce la visualizzazione.
-		span.classList.toggle('hwm-badge-mode', plugin.settings.hwmHandwritingMode);
+		span.classList.toggle('hwm-badge-mode', Platform.isMobile);
 
 		// TEST A: pointer-events: none sullo span.
 		// Ipotesi: Chrome usa lo stesso hit-test dei pointer events per la
@@ -604,7 +604,11 @@ function createPortalPanel(
 	sourcePath: string,
 	plugin: HandwritingPlugin
 ) {
-	const isDark = plugin.settings.bgMode === 'dark';
+	// Risolve il tema effettivo tenendo conto di 'auto'
+	const resolveIsDark = (bgMode: string) =>
+		bgMode === 'auto' ? document.body.classList.contains('theme-dark') : bgMode === 'dark';
+
+	const isDark = resolveIsDark(plugin.settings.bgMode);
 	const collapsedHeight = plugin.settings.canvasHeight;
 	let isExpanded = true;
 	// Flag per nascondere il pannello quando il modal (Desktop) è aperto
@@ -615,7 +619,7 @@ function createPortalPanel(
 
 	const panel = document.createElement('div');
 	panel.className = 'hwm_portal-panel';
-	if (isDark) panel.classList.add('hwm_toolbar--dark');
+	if (isDark) panel.classList.add('hwm_portal-panel--dark');
 	container.appendChild(panel);
 	// Rimuove il pannello dal DOM quando il plugin viene disabilitato
 	plugin.register(() => panel.remove());
@@ -725,7 +729,7 @@ function createPortalPanel(
 			plugin.bgModeListeners.delete(onBgMode);
 			return;
 		}
-		panel.classList.toggle('hwm_toolbar--dark', bgMode === 'dark');
+		panel.classList.toggle('hwm_portal-panel--dark', resolveIsDark(bgMode));
 	};
 	plugin.bgModeListeners.add(onBgMode);
 	plugin.register(() => plugin.bgModeListeners.delete(onBgMode));
diff --git a/HandTranscriptMd/src/main.ts b/HandTranscriptMd/src/main.ts
index c6030dc..051be73 100644
--- a/HandTranscriptMd/src/main.ts
+++ b/HandTranscriptMd/src/main.ts
@@ -38,6 +38,14 @@ export default class HandwritingPlugin extends Plugin {
 	async onload() {
 		await this.loadSettings();
 
+		// Rileva cambio tema Obsidian (aggiunta/rimozione classe 'theme-dark' sul body).
+		// Se bgMode è 'auto', notifica tutti i listener per aggiornare colori e SVG.
+		const themeObserver = new MutationObserver(() => {
+			if (this.settings.bgMode === 'auto') this.notifyBgModeChange();
+		});
+		themeObserver.observe(document.body, { attributeFilter: ['class'] });
+		this.register(() => themeObserver.disconnect());
+
 		// Registra la vista editor (tab dedicata per il disegno)
 		this.registerView(VIEW_TYPE_HANDWRITING, (leaf) => new DrawingEditorView(leaf, this));
 
@@ -68,6 +76,10 @@ export default class HandwritingPlugin extends Plugin {
 			DEFAULT_SETTINGS,
 			await this.loadData() as Partial<HandwritingSettings>
 		);
+		// Migrazione: 'custom' non esiste più → 'auto'
+		if ((this.settings.bgMode as string) === 'custom') {
+			this.settings.bgMode = 'auto';
+		}
 	}
 
 	async saveSettings() {
diff --git a/HandTranscriptMd/src/settings.ts b/HandTranscriptMd/src/settings.ts
index 3891e68..bf186d9 100644
--- a/HandTranscriptMd/src/settings.ts
+++ b/HandTranscriptMd/src/settings.ts
@@ -5,61 +5,46 @@
 import { App, PluginSettingTab, Setting } from 'obsidian';
 import type HandwritingPlugin from './main';
 
-// Modalità sfondo: chiaro, scuro o colore personalizzato
-export type BgMode = 'light' | 'dark' | 'custom';
+// Modalità sfondo: chiaro, scuro o automatico (segue il tema di Obsidian)
+export type BgMode = 'light' | 'dark' | 'auto';
 
 export interface HandwritingSettings {
 	svgFolder: string;            // cartella dove salvare i file SVG
 	canvasWidth: number;          // larghezza interna del canvas (px)
 	canvasHeight: number;         // altezza interna del canvas (px)
 	bgMode: BgMode;               // modalità sfondo
-	bgCustomColor: string;        // colore hex se bgMode === 'custom'
 	ocrLanguages: string[];       // lingue per il riconoscimento OCR (codici BCP-47, es. 'it', 'en')
 	geminiApiKey: string;         // chiave API Google Gemini per l'OCR
 	debugMode: boolean;           // mostra Notice di debug per eventi IME/touch
-	hwmHandwritingMode: boolean;  // se true, mostra badge al posto dell'SVG per non bloccare l'handwriting Android
 }
 
-// Colori predefiniti per le modalità
-export const BG_COLORS: Record<BgMode, string> = {
+// Colori predefiniti per le modalità light e dark
+export const BG_COLORS: Record<'light' | 'dark', string> = {
 	light: '#ffffff',
 	dark: '#1e1e1e',
-	custom: '#ffffff',
 };
 
 // Colore righe adattato allo sfondo
-export const LINE_COLORS: Record<BgMode, string> = {
+export const LINE_COLORS: Record<'light' | 'dark', string> = {
 	light: '#e0e0e0',
 	dark: '#3a3a3a',
-	custom: '#cccccc',
 };
 
+// Risolve 'auto' al tema effettivo leggendo la classe Obsidian sul body
+function resolveAutoMode(): 'light' | 'dark' {
+	return document.body.classList.contains('theme-dark') ? 'dark' : 'light';
+}
+
 // Ritorna il colore sfondo effettivo in base alle impostazioni
 export function getEffectiveBgColor(settings: HandwritingSettings): string {
-	if (settings.bgMode === 'custom') return settings.bgCustomColor;
-	return BG_COLORS[settings.bgMode];
+	const mode = settings.bgMode === 'auto' ? resolveAutoMode() : settings.bgMode;
+	return BG_COLORS[mode];
 }
 
 // Ritorna il colore righe effettivo in base alle impostazioni
 export function getEffectiveLineColor(settings: HandwritingSettings): string {
-	if (settings.bgMode === 'custom') {
-		// Per colore custom, calcola righe leggermente più scure/chiare
-		return adjustLineColor(settings.bgCustomColor);
-	}
-	return LINE_COLORS[settings.bgMode];
-}
-
-// Calcola un colore righe adatto allo sfondo custom
-// Se lo sfondo è chiaro → righe più scure, se scuro → righe più chiare
-function adjustLineColor(hex: string): string {
-	const r = parseInt(hex.slice(1, 3), 16);
-	const g = parseInt(hex.slice(3, 5), 16);
-	const b = parseInt(hex.slice(5, 7), 16);
-	// Luminosità percepita (formula sRGB)
-	const lum = (r * 0.299 + g * 0.587 + b * 0.114);
-	const shift = lum > 128 ? -30 : 30; // scurisci o schiarisci
-	const clamp = (v: number) => Math.max(0, Math.min(255, v + shift));
-	return `#${clamp(r).toString(16).padStart(2, '0')}${clamp(g).toString(16).padStart(2, '0')}${clamp(b).toString(16).padStart(2, '0')}`;
+	const mode = settings.bgMode === 'auto' ? resolveAutoMode() : settings.bgMode;
+	return LINE_COLORS[mode];
 }
 
 // Mappa colori chiari ↔ scuri per adattare i tratti al cambio tema.
@@ -70,17 +55,19 @@ const DARK_COLORS  = ['#ffffff', '#60a5fa', '#f87171', '#4ade80'];
 
 // Rimappa il colore di un tratto in base al tema corrente
 export function remapStrokeColor(color: string, bgMode: BgMode): string {
+	// 'auto' viene risolto al tema Obsidian attuale al momento della chiamata
+	const mode = bgMode === 'auto' ? resolveAutoMode() : bgMode;
 	const c = color.toLowerCase();
-	if (bgMode === 'dark') {
+	if (mode === 'dark') {
 		// Se il tratto ha un colore "chiaro" (della palette light), mappalo al corrispondente dark
 		const idx = LIGHT_COLORS.indexOf(c);
 		if (idx >= 0) return DARK_COLORS[idx]!;
-	} else if (bgMode === 'light') {
+	} else {
 		// Viceversa: colori dark → light
 		const idx = DARK_COLORS.indexOf(c);
 		if (idx >= 0) return LIGHT_COLORS[idx]!;
 	}
-	// Per custom o colori non in palette, lascia invariato
+	// Colori non in palette: lascia invariato
 	return color;
 }
 
@@ -88,12 +75,10 @@ export const DEFAULT_SETTINGS: HandwritingSettings = {
 	svgFolder: '_handwriting',
 	canvasWidth: 800,
 	canvasHeight: 300,
-	bgMode: 'light',
-	bgCustomColor: '#ffffff',
+	bgMode: 'auto',               // default: segue automaticamente il tema di Obsidian
 	ocrLanguages: ['it', 'en'],   // italiano e inglese di default
 	geminiApiKey: '',
 	debugMode: false,
-	hwmHandwritingMode: false,    // default: mostra SVG piena
 };
 
 // Nome del branch corrente — aggiornare manualmente ad ogni cambio di branch
@@ -162,34 +147,19 @@ export class HandwritingSettingTab extends PluginSettingTab {
 		// --- Sfondo canvas ---
 		new Setting(containerEl)
 			.setName('Sfondo canvas')
-			.setDesc('Colore di sfondo del riquadro di disegno')
+			.setDesc('Colore di sfondo del riquadro di disegno. "Automatico" segue il tema di Obsidian.')
 			.addDropdown(drop => drop
+				.addOption('auto', 'Automatico (segue tema Obsidian)')
 				.addOption('light', 'Chiaro (bianco)')
 				.addOption('dark', 'Scuro (grigio scuro)')
-				.addOption('custom', 'Personalizzato')
 				.setValue(this.plugin.settings.bgMode)
 				.onChange(async (value) => {
 					this.plugin.settings.bgMode = value as BgMode;
 					await this.plugin.saveSettings();
 					// Notifica pannelli (dark class) e SVG attivi (remap colori)
 					this.plugin.notifyBgModeChange();
-					// Aggiorna la UI per mostrare/nascondere il color picker
-					this.display();
 				}));
 
-		// --- Colore personalizzato (visibile solo se bgMode === 'custom') ---
-		if (this.plugin.settings.bgMode === 'custom') {
-			new Setting(containerEl)
-				.setName('Colore sfondo personalizzato')
-				.setDesc('Scegli il colore hex dello sfondo')
-				.addColorPicker(picker => picker
-					.setValue(this.plugin.settings.bgCustomColor)
-					.onChange(async (value) => {
-						this.plugin.settings.bgCustomColor = value;
-						await this.plugin.saveSettings();
-					}));
-		}
-
 		// --- Chiave API Gemini ---
 		new Setting(containerEl)
 			.setName('Chiave API Gemini')
@@ -227,25 +197,6 @@ export class HandwritingSettingTab extends PluginSettingTab {
 					await this.plugin.saveSettings();
 				}));
 
-		// --- Modalità handwriting Android ---
-		// Se attiva, i riquadri mostrano solo una piccola anteprima (badge) invece
-		// dell'SVG a piena altezza, per non bloccare l'handwriting nei campi testo.
-		// Il disegno si apre sempre in una nuova scheda (Android) o modal (Windows).
-		new Setting(containerEl)
-			.setName('Modalità handwriting Android')
-			.setDesc(
-				'Attiva per mantenere lo stylus handwriting nel testo del documento. ' +
-				'I riquadri mostrano solo una piccola anteprima; per disegnare usa il bottone matita.'
-			)
-			.addToggle(toggle => toggle
-				.setValue(this.plugin.settings.hwmHandwritingMode)
-				.onChange(async (value) => {
-					this.plugin.settings.hwmHandwritingMode = value;
-					await this.plugin.saveSettings();
-					// Applica/rimuove la classe CSS sul body immediatamente
-					document.body.classList.toggle('hwm-handwriting-mode', value);
-				}));
-
 		// --- Modalità debug ---
 		new Setting(containerEl)
 			.setName('Modalità debug')
diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css
index fa109e0..bb4c347 100644
--- a/HandTranscriptMd/styles.css
+++ b/HandTranscriptMd/styles.css
@@ -7,7 +7,7 @@
 .hwm_container {
 	position: relative;
 	border: 1px solid var(--background-modifier-border);
-	border-radius: 8px;
+	border-radius: var(--radius-m);
 	overflow: hidden;
 	margin: 8px 0;
 	/* Sfondo SEMPRE bianco (anche in dark mode) */
@@ -41,7 +41,7 @@
 	align-items: center;
 	justify-content: center;
 	background: var(--background-secondary, #f0f0f0);
-	border-radius: 6px;
+	border-radius: var(--radius-m);
 }
 /* Nasconde l'SVG: mostriamo solo il box con l'icona */
 .hwm-handwriting-mode .hwm-badge-mode img {
@@ -55,17 +55,24 @@
 	pointer-events: none;
 }
 
-/* SVG a piena larghezza in tutti i contesti (switch OFF).
-   Quando lo switch è ON, le regole .hwm-handwriting-mode sovrastano questo. */
+/* SVG a piena larghezza in tutti i contesti (desktop).
+   Su mobile le regole .hwm-handwriting-mode sovrastano questo.
+   NO overflow:hidden sullo span: clipperebbe i tratti ai bordi dell'SVG.
+   Il border-radius va sull'img per arrotondarne gli angoli visivi. */
 .internal-embed[src*="_handwriting/"] {
 	display: block;
 	width: 100%;
+	border-radius: var(--radius-m);
+	/* Bordo e ombra per rendere il riquadro visibile contro lo sfondo Obsidian */
+	border: 1.5px solid var(--background-modifier-border);
+	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
 }
 .internal-embed[src*="_handwriting/"] img {
 	display: block;
 	width: 100%;
 	height: auto;
 	max-height: none;
+	border-radius: var(--radius-m);
 }
 
 /* Variante wiki ![[svg]]:
@@ -96,7 +103,7 @@
 	gap: 0; /* spacing gestito via margin-right sui bottoni, così i bottoni
 	           nascosti (max-width:0, margin:0) non creano spazi vuoti */
 	padding: 3px 6px;
-	border-radius: 6px;
+	border-radius: var(--radius-m);
 	background: rgba(240, 240, 240, 0.95);
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 	opacity: 1;
@@ -112,7 +119,7 @@
 	height: 28px;
 	padding: 0;
 	border: none;
-	border-radius: 4px;
+	border-radius: var(--radius-s);
 	background: transparent;
 	color: #666;
 	cursor: pointer;
@@ -187,7 +194,6 @@
 /* --- Area canvas (editing) --- */
 .hwm_canvas-wrap {
 	width: 100%;
-	overflow: hidden;
 	/* Centra il canvas orizzontalmente quando il modal/tab è più largo
 	   della risoluzione nativa del canvas (canvasWidth dalle settings) */
 	display: flex;
@@ -223,6 +229,15 @@
 	background: #ebebeb;
 	color: #666;
 }
+.hwm_resize-handle--dark {
+	background: #2a2a2a;
+	border-top-color: #444;
+	color: #888;
+}
+.hwm_resize-handle--dark:hover {
+	background: #333;
+	color: #aaa;
+}
 
 /* --- Placeholder per canvas vuoto --- */
 .hwm_placeholder {
@@ -314,7 +329,7 @@
 	margin-right: 6px !important; /* spacing via margin, non gap */
 	background: rgba(245, 245, 245, 0.98) !important;
 	border: 1px solid rgba(0, 0, 0, 0.18) !important;
-	border-radius: 7px !important;
+	border-radius: var(--radius-m) !important;
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18) !important;
 	color: #222 !important;
 }
@@ -350,7 +365,7 @@
 	display: flex;
 	gap: 4px;
 	padding: 3px;
-	border-radius: 6px;
+	border-radius: var(--radius-m);
 	background: rgba(240, 240, 240, 0.9);
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 }
@@ -419,13 +434,25 @@
 	align-items: center;
 	gap: 0; /* spacing via margin-right sui .hwm_btn */
 	padding: 3px 6px;
-	border-radius: 6px;
+	border-radius: var(--radius-m);
 	background: rgba(240, 240, 240, 0.95);
 	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
 	/* Lo span padre ha pointer-events:none (per handwriting Android):
 	   ripristina i click sui bottoni del pannello */
 	pointer-events: auto;
 }
+/* Tema scuro del pannello portale (classe aggiunta via JS in base a bgMode) */
+.hwm_portal-panel--dark {
+	background: rgba(40, 40, 40, 0.97);
+	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
+}
+.hwm_portal-panel--dark .hwm_btn {
+	color: #bbb !important;
+}
+.hwm_portal-panel--dark .hwm_btn:hover {
+	background: rgba(255, 255, 255, 0.12) !important;
+	color: #fff !important;
+}
 
 /* Bottone cerchio singolo (formato legacy) */
 .hwm_portal-btn {
@@ -471,6 +498,8 @@
 	height: 90vh;
 	display: flex;
 	flex-direction: column;
+	border-radius: var(--radius-l) !important;
+	overflow: hidden !important;
 }
 .hwm_modal .modal-content {
 	flex: 1;
@@ -478,6 +507,7 @@
 	overflow: hidden;
 	display: flex;
 	flex-direction: column;
+	border-radius: var(--radius-l);
 }
 
 /* ========================================
diff --git a/NOTES.md b/NOTES.md
new file mode 100644
index 0000000..64569f6
--- /dev/null
+++ b/NOTES.md
@@ -0,0 +1,293 @@
+# Note storiche — Handwriting Plugin
+
+Questo file contiene lo storico delle sessioni di sviluppo, bug risolti, tentativi falliti e ricerche effettuate.
+Per istruzioni, architettura e task aperti vedi `CLAUDE.md`.
+
+---
+
+## ✅ Task completati (sessione 2026-03-23)
+
+### Tema automatico (bgMode 'auto')
+Rinominato 'custom' → 'auto' nel dropdown settings. `MutationObserver` su `document.body` in `main.ts` chiama `notifyBgModeChange()` al cambio di `theme-dark`. Aggiunta `resolveIsDark(bgMode)` in `editor-view.ts` ed `embed.ts` per risolvere 'auto' al tema Obsidian effettivo. Migrazione automatica 'custom'→'auto' in `loadSettings()`. Rimosso `bgCustomColor` e color picker dalle settings.
+
+### Angoli arrotondati
+Usato `var(--radius-m)` / `var(--radius-l)` su tutti gli elementi (toolbar, bottoni, pannello portale, modal, container). `border-radius` applicato sull'`<img>` inline invece che sullo span (no `overflow:hidden` sullo span, che clippava l'SVG). Aggiunto `border: 1.5px solid var(--background-modifier-border)` e `box-shadow` al riquadro inline per visibilità contro lo sfondo Obsidian.
+
+### Rimosso switch "Modalità handwriting Android"
+Badge mode sempre attiva su `Platform.isMobile`, preview piena sempre su desktop. Rimossi `hwmHandwritingMode` da `HandwritingSettings`, `DEFAULT_SETTINGS`, settings tab, `registerEmbed()` e `tryDecorate()` in `embed.ts`. Le classi CSS `hwm-handwriting-mode` e `hwm-badge-mode` rimangono ma vengono applicate automaticamente.
+
+### Fix toolbar pannello portale al cambio tema
+Sostituita classe generica `hwm_toolbar--dark` con `hwm_portal-panel--dark` dedicata. `resolveIsDark` inline in `createPortalPanel` gestisce 'auto', 'light' e 'dark'. `hwm_resize-handle--dark` sostituisce gli inline styles sull'handle del canvas.
+
+---
+
+---
+
+## ✅ TEST EFFETTUATI (sessione 2026-03-22)
+
+### Bug 1 — Pannello portale parzialmente visibile con Modal aperto — RISOLTO ✅
+
+**Sintomo**: su Windows, cliccando il bottone matita, i bottoni "Converti" e "Comprimi" del pannello portale restavano visibili sopra il modal mentre il bottone matita scompariva correttamente.
+**Causa**: il RAF loop nascondeva solo il bottone matita (`btn.style.display`) ma non l'intero pannello.
+**Fix**: il RAF loop ora setta `panel.style.display = 'none'` quando `modalOpen || tabOpen`, nascondendo l'intero pannello portale (tutti e 4 i bottoni).
+**File**: `src/embed.ts` — RAF loop in `decorateSpan()`.
+
+---
+
+### Bug 2 — Canvas modal troppo largo, toolbar non centrata — RISOLTO ✅
+
+**Sintomo**: nel Modal Windows, il canvas occupava tutta la larghezza dell'overlay (troppo largo e non centrato). La toolbar era allineata a sinistra invece che al centro.
+**Fix CSS** (`styles.css`):
+- `.hwm_canvas-wrap { display: flex; justify-content: center; }` — centra il canvas orizzontalmente
+- `.hwm_canvas { max-width: 100%; }` — rimosso `width: 100%` fisso
+- `.hwm_editor-topbar--modal { justify-content: center; }` — centra la toolbar nel modal
+**Fix TS** (`editor-view.ts`): `DrawingModal.buildEditor()` aggiunge classe `hwm_editor-topbar--modal` alla topbar.
+
+---
+
+### Bug 3 — Auto-scroll sposta i tratti durante il disegno — RISOLTO ✅
+
+**Sintomo**: quando il canvas si espandeva automaticamente (auto-expand) mentre stavo disegnando, lo scroll automatico verso il basso spostava i punti del tratto corrente rispetto alla posizione del pennino.
+**Causa**: l'evento `onResize` faceva scroll immediatamente anche con il pointer premuto, spostando il canvas mentre le coordinate del puntatore erano ancora relative alla posizione pre-scroll.
+**Fix**: aggiunto metodo pubblico `isPointerDown(): boolean` in `DrawingCanvas` (`drawing-canvas.ts`). Sia `DrawingEditorView` che `DrawingModal` in `editor-view.ts` ora controllano `!canvas.isPointerDown()` prima di eseguire il `scrollTop` automatico.
+
+---
+
+### Bug 4 — Badge mode mostra icona in riquadro piccolissimo — RISOLTO ✅
+
+**Sintomo**: attivando "Modalità handwriting Android" nelle impostazioni, i riquadri SVG si riducevano a un quadratino minuscolo invece di un badge orizzontale a piena larghezza.
+**Causa**: lo span `.internal-embed` senza figli visibili collassava alla sua larghezza intrinseca (quasi zero).
+**Fix CSS** (`.hwm-handwriting-mode .hwm-badge-mode`):
+```css
+width: 100% !important; box-sizing: border-box !important;
+height: 72px !important; display: flex !important;
+align-items: center; justify-content: center;
+background: var(--background-secondary); border-radius: 6px;
+```
+Più: `img { display: none !important }` per nascondere l'SVG e `::after { content: "✏️"; font-size: 28px; opacity: 0.5; }` per l'icona.
+**File**: `styles.css`.
+
+---
+
+## ✅ TEST EFFETTUATI (sessione 2026-03-23)
+
+### Bug 5 — Pannello portale visibile nelle impostazioni e ovunque — RISOLTO ✅
+
+**Sintomo**: il pannello portale (`position: fixed` in `document.body`) rimaneva visibile in alto a destra anche navigando nelle impostazioni, in altre schede, ecc.
+**Causa**: il pannello era appeso a `document.body` e il RAF loop di posizionamento lo seguiva solo quando lo span era nel viewport.
+**Fix**: pannello spostato come figlio diretto dello span contenitore con `position: absolute; top: 6px; right: 6px`. Lo span ha `position: relative`. Il pannello è ora parte del DOM del documento e scompare naturalmente quando si naviga altrove.
+**File**: `src/embed.ts` — `createPortalPanel()` + `styles.css`.
+
+---
+
+### Bug 6 — Comprimi/Espandi modificava anche la larghezza — RISOLTO ✅
+
+**Sintomo**: cliccando il bottone freccia per comprimere/espandere il riquadro, anche la larghezza cambiava (l'immagine si restringeva).
+**Causa**: il codice precedente usava `max-height` sull'elemento `<img>`, che lo scalava proporzionalmente.
+**Fix**: la compressione ora modifica `container.style.height` + `overflow: hidden` sullo span contenitore. L'immagine viene clippata verticalmente senza alterarne la larghezza.
+**File**: `src/embed.ts` — handler del bottone collapse in `createPortalPanel()`.
+
+---
+
+### Bug 7 — Pannello portale rimane nel DOM dopo disabilitazione plugin — RISOLTO ✅
+
+**Sintomo**: disabilitando il plugin, i pannelli portale (bottoni) rimanevano visibili nel documento.
+**Fix**: `plugin.register(() => panel.remove())` — Obsidian chiama tutti i callback registrati con `plugin.register()` quando il plugin viene disabilitato.
+**File**: `src/embed.ts` — `createPortalPanel()`.
+
+---
+
+### Bug 8 — Bottoni pannello portale non cliccabili — RISOLTO ✅
+
+**Sintomo**: dopo lo spostamento del pannello dentro lo span, i bottoni non rispondevano al click.
+**Causa**: lo span aveva `pointer-events: none` (impostato in `tryDecorate()` per handwriting Android). Il pannello figlio ereditava la proprietà.
+**Fix**: `pointer-events: auto` in CSS su `.hwm_portal-panel` — ripristina i click solo sul pannello, lasciando il resto dello span non interattivo.
+**File**: `styles.css`.
+
+---
+
+### Bug 9 — Palette colori SVG non aggiornata al cambio bgMode — RISOLTO ✅
+
+**Sintomo**: cambiando bgMode nelle impostazioni, gli SVG nei documenti aperti mantenevano i vecchi colori dei tratti finché non si ricaricava il plugin.
+**Fix**: aggiunto listener `onBgModeRemap` in `registerEmbed()` registrato in `plugin.bgModeListeners`. Quando il bgMode cambia:
+1. Itera `plugin.embedPaths` (mappa `embedId → svgPath`)
+2. Legge il file SVG dal vault e verifica il marker `hwm-strokes` (ignora SVG non del plugin)
+3. Parsa `viewBox="0 0 W H"` per ottenere le dimensioni reali (non quelle di default, che perderebbero l'auto-expand)
+4. Rimappa i colori dei tratti con `remapStrokeColor()`, rigenera l'SVG con `strokesToSvg()`, salva
+5. Chiama `plugin.refreshPreview(embedId, newContent)` → aggiorna `img.src` con cache-bust
+**File**: `src/embed.ts` — `onBgModeRemap` in `registerEmbed()`.
+
+---
+
+### Bug 10 — Toolbar editor non aggiornata al cambio bgMode — RISOLTO ✅
+
+**Sintomo**: i bottoni della toolbar nel `DrawingModal` (Windows) e nel `DrawingEditorView` (Android) non cambiavano colore al cambio bgMode.
+**Causa 1 (live update)**: mancava un listener. Aggiunto `bgModeListener` in entrambe le classi, registrato in `bgModeListeners` dopo la costruzione di `colorBtns` (per poterli aggiornare nel closure). Rimosso in `onClose()`.
+**Causa 2 (riapertura)**: il cambio bgMode avviene sempre con editor chiuso. `buildEditor()` viene chiamato di nuovo alla riapertura e legge `plugin.settings.bgMode` → corretto per costruzione. Il problema visivo era CSS.
+**Causa 3 (CSS)**: Obsidian dark theme ha regole tipo `.modal-content button { background: var(...) }` con specificità `0,1,1` > `0,1,0` di `.hwm_btn`, sovrascrivendo il nostro sfondo trasparente. Il colore del topbar senza `!important` veniva sovrascritto analogamente.
+**Fix CSS** (`styles.css`):
+- `.hwm_editor-topbar { background: rgba(240,240,240,0.95) !important }` e `.hwm_editor-topbar--dark { background: rgba(40,40,40,0.97) !important }` — entrambe con `!important` (la `--dark` appare dopo → vince in dark mode per cascade order)
+- `.hwm_editor-topbar .hwm_btn { background: transparent !important; color: #333 !important }` — batte la specificità di Obsidian
+- `.hwm_editor-topbar--dark .hwm_btn { color: #bbb !important }` — appare dopo → vince in dark mode
+- Hover e active espliciti con `!important` per entrambe le modalità
+**Nota importante**: il cambio bgMode viene SEMPRE effettuato con editor chiuso (il modal copre l'intera finestra). Il listener live è presente ma non è il percorso principale.
+**File**: `src/editor-view.ts` + `styles.css`.
+
+---
+
+## Problemi risolti (storico completo)
+
+- **Handwriting Android (disegno)** ✅ — risolto con editor in tab separata (`ItemView`), canvas fuori da `cm-content`
+- **Pen scroll** ✅ — penna non scrolla più, solo dito (JS manuale via `setPointerCapture`)
+- **Toolbar — tema scuro** ✅
+- **Spazio vuoto sezione colori in toolbar compatta** ✅
+- **Trashcan non cancella visualmente** ✅
+- **Bottoni inline coprivano `</>` di Obsidian** ✅ — spostati a `left: 6px`
+- **Ordine bottoni inline** ✅ — invertito: X, Converti, Freccia (da sinistra)
+- **Placeholder text** ✅ — aggiornato a "Usa il bottone matita in alto a destra per disegnare"
+- **Bottone portale non cerchio perfetto** ✅ — risolto con `width/height/min-width/min-height: 36px !important`, `padding: 0 !important`, `overflow: hidden`
+- **Icona bottone portale non visibile** ✅ — SVG con `stroke="currentColor"` non diventava bianco; risolto con `.hwm_portal-btn svg { stroke: #ffffff !important }`
+- **Bottone portale non si nasconde con editor aperto** ✅ — check `workspace.getLeavesOfType(VIEW_TYPE_HANDWRITING).some(...)` nel RAF loop (Android) + flag `modalOpen` (Windows)
+- **Bottone portale `position: absolute` invece di `fixed`** ✅ — `getBoundingClientRect()` restituisce coordinate viewport, non serviva aggiungere `scrollY/scrollX`
+- **Bottoni pannello portale rimangono visibili durante lo scroll** ✅ — listener `scroll` su `.cm-scroller`/`.markdown-reading-view` che setta `visibility: hidden` durante lo scroll
+- **Modal Windows** ✅ — implementato `DrawingModal extends Modal`; click matita su Desktop apre modal invece di nuova tab
+- **Switch handwriting** ✅ — `hwmHandwritingMode` in settings; badge mode via classe CSS su `document.body` e sullo span
+- **DrawingModal non gestiva formato wiki** ✅ — aggiunto `wikiEmbedRegex()` e logica try-wiki-then-legacy in `replaceInMd()`
+- **Pannello portale visibile con Modal aperto (Bug 1)** ✅ — RAF loop ora nasconde l'intero panel (`display: none`) quando `modalOpen || tabOpen`, non solo il bottone matita
+- **Canvas modal non centrato, toolbar a sinistra (Bug 2)** ✅ — `display: flex; justify-content: center` su `.hwm_canvas-wrap`; `max-width: 100%` su `.hwm_canvas`; classe `hwm_editor-topbar--modal` aggiunta al topbar del modal per centrare la toolbar
+- **Auto-scroll sposta tratti durante disegno (Bug 3)** ✅ — aggiunto `isPointerDown()` in `DrawingCanvas`; scroll automatico bloccato se il pointer è premuto, sia in `DrawingEditorView` che in `DrawingModal`
+- **Badge mode mostra riquadro minuscolo (Bug 4)** ✅ — CSS `.hwm-handwriting-mode .hwm-badge-mode` con `width: 100% !important`, `height: 72px`, flex centrato, `img { display: none }` + `::after` con emoji matita
+- **Pannello portale visibile nelle impostazioni (Bug 5)** ✅ — pannello spostato da `document.body` (position:fixed) a figlio diretto dello span (position:absolute); eliminati RAF loop e scroll listener
+- **Comprimi/Espandi modificava larghezza (Bug 6)** ✅ — usa `container.style.height + overflow:hidden` invece di `max-height` sull'img
+- **Pannello resta dopo disabilitazione plugin (Bug 7)** ✅ — `plugin.register(() => panel.remove())`
+- **Bottoni pannello non cliccabili (Bug 8)** ✅ — `pointer-events: auto` su `.hwm_portal-panel` in CSS
+- **SVG non aggiornati al cambio bgMode (Bug 9)** ✅ — listener `onBgModeRemap` in `bgModeListeners`; legge viewBox per dimensioni reali, rimappa colori, salva SVG, refresh preview
+- **Toolbar editor non aggiornata al cambio bgMode (Bug 10)** ✅ — `bgModeListener` in `DrawingEditorView` e `DrawingModal`; CSS `!important` su topbar e bottoni per battere specificità Obsidian dark theme
+
+---
+
+## BUG APERTO — Handwriting disabilitato nel documento quando il riquadro è presente
+
+**Sintomo**: quando nel documento è presente un riquadro handwriting con un disegno (SVG non vuoto), la stylus handwriting-to-text di Android smette di funzionare nell'intero editor. Cancellare il riquadro ripristina l'handwriting. Il problema persiste tra riavvii di Obsidian.
+
+**Progressione delle scoperte**:
+
+**Fase 1 — Formato code block** (tentativi 16-26):
+- `contenteditable="false"` su wrapper CM6 → rimosso → non risolve
+- `touch-action: none` → rimosso → non risolve
+- `background-image` SVG → rimossa → non risolve
+- `<canvas>` nel DOM → rimosso → non risolve
+- Canvas in `document.body` (fuori da CM6) toccato con stylus → **rompe handwriting** — conclusione: è il canvas element quando toccato dalla stylus, non la sua posizione nel DOM
+- **Causa root fase 1**: Android WebView tratta qualsiasi `<canvas>` toccato dalla stylus come "drawing surface" e disabilita handwriting-to-text a livello di sessione WebView
+
+**Fase 2 — Passaggio a formato wiki `![[svg]]`** (sessione 2026-03-19):
+
+L'obiettivo era eliminare il `<canvas>` dal documento e mostrare solo l'`<img>` nativa di Obsidian.
+
+Problema riscontrato: l'SVG vuoto (300px di altezza) NON rompe l'handwriting. L'SVG con un disegno (altezza variabile dopo auto-expand) SÌ lo rompe — anche dopo riavvio Obsidian, anche senza mai aprire la tab editor.
+
+Cambiamenti implementati durante la fase 2:
+- Passaggio da code block a `![[svg]]` come formato principale
+- `insertHandwritingBlock()` crea il file SVG PRIMA di inserire il wikilink (altrimenti Obsidian mostra "could not be found")
+- MutationObserver su `document.body` per intercettare gli span (il post-processor non funziona per i widget CM6 immagine in live preview)
+- Fix data-URI: `img.src = data:image/svg+xml,...` → cambiato in cache-bust URL (`?t=timestamp`) perché la data-URI veniva interpretata da Android come drawing surface
+- Rimosso `addWikiOverlay` (aggiungeva `hwm_inline-buttons` come figlio dello span): la struttura dello span è ora identica a un'immagine normale
+- Pannello portale (`hwm_portal-panel`) in `document.body` con tutti e 4 i bottoni
+
+**Fase 3 — Test approfonditi (sessione 2026-03-22)**:
+
+**Test A — Rimozione `touch-action: none` da `.hwm_resize-handle`** (tentativo 29):
+- Motivazione: `touch-action: none` è uno dei segnali che Android WebView usa per identificare "drawing surfaces". Rimuovendolo dal resize handle, si riduce il numero di elementi che si qualificano come drawing surface.
+- Risultato: **non risolve**. L'handwriting si rompe ugualmente dopo aver aperto la tab editor.
+
+**Test B — IME reset alla chiusura della tab editor** (tentativo 30):
+- Motivazione: ipotesi che la sessione IME (Input Method Engine) di Android venisse "bloccata" dall'apertura della DrawingEditorView. Un blur/focus sul `cm-content` dopo la chiusura avrebbe potuto resettarla.
+- Implementazione: `DrawingEditorView.onClose()` fa `cm.blur(); setTimeout(() => cm.focus(), 80)` solo su mobile.
+- Risultato: **non risolve**. L'handwriting rimane rotto dopo la chiusura.
+
+**Test C — Sostituzione `<canvas>` con `<svg>` nel motore di disegno** (tentativo 31):
+- Motivazione (Opzione C dalle ipotesi): il `<canvas>` è l'elemento che Android WebView riconosce come drawing surface. Sostituendolo con un `<svg>` (che disegna tramite elementi `<path>`), il motore di disegno non avrebbe più alcun canvas DOM.
+- Implementazione: riscrittura completa di `drawing-canvas.ts` con `SVGElement`, `<rect>` per sfondo, `<g>` per righe e tratti, `<path>` per ogni tratto con Bézier midpoint. Rimosso `touch-action: none`.
+- Risultato: **non risolve**. L'handwriting si rompe ugualmente dopo aver aperto la tab editor SVG. Implementazione reverted dall'utente.
+
+**Test D — Apertura tab senza disegnare nulla** (tentativo 32):
+- Motivazione: verificare se il trigger fosse il canvas toccato dalla stylus oppure la semplice apertura della tab.
+- Test: aprire la DrawingEditorView, non toccarla, chiuderla → tentare handwriting nel documento.
+- Risultato: **handwriting rotto anche senza aver toccato nulla nel canvas**. Il trigger è l'apertura della tab, non il disegno. Questo esclude che `touch-action`, `setPointerCapture` o qualsiasi evento di disegno siano la causa.
+
+**Test E — Apertura in nuova finestra Obsidian** (tentativo 33):
+- Motivazione: Obsidian Mobile già apre la tab editor in una nuova finestra separata (`workspace.getLeaf('tab')`). Ipotesi che la separazione di finestra potesse isolare lo stato IME.
+- Risultato: **non risolve**. Confermato dall'utente che l'editor già apre in una finestra separata, ma il problema persiste. Tutto il runtime condivide lo stesso processo WebView → lo stato `StylusWritingManager` è condiviso a livello di processo, non di finestra.
+
+**Stato finale (2026-03-22)**: limite architetturale di Obsidian Mobile confermato. Il `StylusWritingManager` di Android WebView (componente compositor-level di Chromium) viene disabilitato al livello del processo WebView quando rileva l'apertura di una "drawing surface" (qualsiasi tab con canvas/SVG interattivo). Non è risolvibile via JS/CSS dall'interno dell'app.
+
+**Workaround attuale**: lo switch "Modalità handwriting Android" nelle impostazioni. Quando attivo, i riquadri mostrano solo il badge 72px (non interferisce con il proximity detection) e l'utente deve aprire l'editor consapevolmente quando vuole disegnare, sapendo che l'handwriting-to-text nel documento verrà interrotto per quella sessione.
+
+**Conferma esterna**: il plugin **Excalidraw** e il plugin **Handwritten Notes** hanno lo stesso identico problema — appena si apre la tab di disegno, l'handwriting-to-text si disattiva nell'intero Obsidian e non si ripristina nemmeno riavviando l'app. È un limite di Android WebView, non specifico al nostro plugin. **Non esiste soluzione lato plugin**; il compromesso dello switch è la scelta definitiva.
+
+**Ricerca approfondita sul sorgente Chromium (2026-03-22)**:
+
+- **Nessun bug Chromium aperto trovato** per questo problema specifico (il tracker non è scrapeable)
+- **Obsidian Ink Issue #156** — ancora aperta, nessuna soluzione
+- **Scoperta chiave**: il `<canvas>` da solo NON disabilita l'handwriting — non esiste codice canvas-specifico in Chromium che imposti `kInternalNotWritable`. Il trigger reale è **`touch-action: none`**: qualsiasi elemento con quella proprietà CSS fa scattare il flag `kInternalNotWritable` in `touch_action_util.cc`, disabilitando la scrittura con stilo su quell'elemento
+- **Commit rilevante** (~5 mesi fa): `b06690ad` — Samsung DirectWriting disabilitato su Android 14+. Se il dispositivo è Android 14+, il percorso Samsung proprietario (closed source, potenzialmente causa di session-corruption) è già escluso
+- **Ipotesi residua più probabile**: quando `DrawingEditorView` si apre, il `touch-action: none` del canvas o del suo scroll container viene propagato a livello di Android View dal WebView, e alla chiusura della tab quella configurazione non viene resettata
+
+**Possibile prossimo test**: rimuovere completamente `touch-action: none` dal canvas e dal suo scroll container in `drawing-canvas.ts` / `editor-view.ts` e verificare se il problema persiste. Se il canvas da solo non rompe nulla (come confermato dal sorgente Chromium), potrebbe bastare rimuovere quella proprietà.
+
+**Fonti**:
+- [Chromium Stylus Handwriting README](https://chromium.googlesource.com/chromium/src/+/refs/heads/main/components/stylus_handwriting/README.md)
+- [ProseMirror Issue #565](https://github.com/ProseMirror/prosemirror/issues/565)
+- Plugin Ink ha lo stesso problema irrisolto ([Issue #156](https://github.com/daledesilva/obsidian_ink/issues/156))
+
+**Scoperte chiave consolidate**:
+- `inputmode="none"` contamina l'intero WebView — MAI usare
+- Empty SVG (300px) NON rompe handwriting; SVG con disegno (altezza > 300px per auto-expand) SÌ (sessione 2026-03-19)
+- data-URI come `img.src` rompe handwriting → usare sempre URL vault + cache-bust
+- Il problema è persistente tra sessioni (riavvio Obsidian) — non è corruzione di sessione temporanea
+- Rimuovere completamente la nostra decorazione (nessun figlio nello span) non risolve — la causa è nell'SVG stesso o nella sua altezza
+- **Il trigger è l'apertura della DrawingEditorView, non il disegno** — aprire senza toccare nulla già rompe l'handwriting (scoperta sessione 2026-03-22)
+- **Anche una finestra Obsidian separata non isola il problema** — il WebView process è condiviso (scoperta sessione 2026-03-22)
+
+**Tentativi falliti (completo)**:
+
+| # | Approccio | Risultato |
+|---|-----------|-----------|
+| 16 | Rimuovere `beforeinput` listener globale | Non risolve |
+| 17 | `<button>` → `<div role="button">` in cm-content | Non risolve |
+| 18 | `<img>` → CSS `background-image` | Non risolve |
+| 19 | Rimuovere `contenteditable="false"` dai wrapper CM6 + `pointer-events: none` | Non risolve |
+| 20-23 | DevTools: rimuovere CE=false, touch-action, background-image, canvas dal DOM | Non risolve |
+| 24 | Editor in Modal invece di tab | Non praticabile (stylus non disegna nel modal) |
+| 25 | Bottone portale in `document.body` | Non risolve (canvas nella tab corrompe sessione) |
+| 26 | Test console: canvas fake in `document.body` toccato con stylus | Conferma: canvas + stylus = handwriting rotto |
+| 27 | Passaggio a `![[svg]]` con MutationObserver | Non risolve |
+| 28 | Rimozione totale decorazione dallo span (nessun figlio aggiunto) | Non risolve |
+| 29 | Rimosso `touch-action: none` da `.hwm_resize-handle` | Non risolve |
+| 30 | IME reset (blur/focus su `cm-content`) in `DrawingEditorView.onClose()` | Non risolve |
+| 31 | Sostituzione `<canvas>` con `<svg>` nel motore di disegno (Option C) | Non risolve — reverted |
+| 32 | Apertura tab senza disegnare nulla | Conferma: il trigger è l'apertura della tab, non il disegno |
+| 33 | Apertura in nuova finestra Obsidian (già fatto di default su Mobile) | Non risolve — WebView process condiviso |
+
+---
+
+## Ricerca effettuata — Plugin esistenti
+
+### Nessuno fa esattamente questo. Gap confermato.
+
+| Plugin | Cosa fa | Manca |
+|--------|---------|-------|
+| **Ink** (`daledesilva/obsidian_ink`) | Canvas inline nel `.md`, tldraw, penna | OCR/conversione testo (in roadmap) |
+| **Handwriting to Text** (`jirayu3141`) | Foto → Gemini AI → testo nel cursore | Non è canvas inline, è workflow foto |
+| **Petrify** (`jo-minjun/petrify`) | File tablet e-ink → Excalidraw/MD con OCR | Pensato per reMarkable/Boox, non canvas inline |
+| **AI Image OCR** (`rootiest`) | Immagine → AI OCR → testo | Non è canvas inline |
+| **Pergament** (`hobyte`) | Canvas embedded primitivo | Nessun OCR, sviluppo lento |
+
+### Differenze rispetto a Ink (nostro riferimento)
+
+| Ink | Il nostro plugin |
+|-----|-----------------|
+| tldraw (pesante, React) | Canvas API nativa (leggero, zero dipendenze extra) |
+| File `.drawing` proprietari JSON | File **SVG standard** visibili ovunque |
+| Nessuna conversione testo | **OCR + conversione markdown** (Fase 2) |
+| React + Jotai | Vanilla TypeScript |

From 3802ec7c578793360c270c47a5ad5df9a23ba196 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 23 Mar 2026 15:26:02 +0100
Subject: [PATCH 12/14] corretto il bug che non si vedeva l'svg su android

---
 HandTranscriptMd/src/embed.ts | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index e8a434a..a615a6d 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -44,10 +44,6 @@ interface EmbedData {
    ============================================= */
 
 export function registerEmbed(plugin: HandwritingPlugin) {
-	// Su mobile: badge mode sempre attiva (lo stylus handwriting Android
-	// non è compatibile con SVG a piena altezza nel documento).
-	document.body.classList.toggle('hwm-handwriting-mode', Platform.isMobile);
-
 	// --- Listener globale: remap automatico colori SVG al cambio bgMode ---
 	// Quando l'utente cambia sfondo canvas nelle impostazioni, tutti gli SVG del plugin
 	// attualmente tracciati in embedPaths vengono letti, rimappati e risalvati nel vault.
@@ -131,10 +127,6 @@ function setupMutationObserver(plugin: HandwritingPlugin) {
 		// Marca subito come decorato per evitare doppia elaborazione
 		span.dataset.hwmDecorated = '1';
 
-		// Su mobile: badge mode sempre attiva per non bloccare lo stylus handwriting nel testo.
-		// La regola CSS .hwm-handwriting-mode su document.body gestisce la visualizzazione.
-		span.classList.toggle('hwm-badge-mode', Platform.isMobile);
-
 		// TEST A: pointer-events: none sullo span.
 		// Ipotesi: Chrome usa lo stesso hit-test dei pointer events per la
 		// proximity detection dell'handwriting → con none, ignora lo span e

From dd8db22ba293581ff69b25474b650c9c47639e7c Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 23 Mar 2026 15:45:35 +0100
Subject: [PATCH 13/14] aggiustato piccolo bug grafico su android

---
 HandTranscriptMd/styles.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/HandTranscriptMd/styles.css b/HandTranscriptMd/styles.css
index bb4c347..7caba46 100644
--- a/HandTranscriptMd/styles.css
+++ b/HandTranscriptMd/styles.css
@@ -66,6 +66,9 @@
 	/* Bordo e ombra per rendere il riquadro visibile contro lo sfondo Obsidian */
 	border: 1.5px solid var(--background-modifier-border);
 	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15);
+	/* Elimina whitespace implicito sotto l'img (gap tra img e bordo su Android) */
+	padding: 0;
+	line-height: 0;
 }
 .internal-embed[src*="_handwriting/"] img {
 	display: block;

From b1267debd522ed8a4ae28c7cd2ad7b5466cf7618 Mon Sep 17 00:00:00 2001
From: gabriele-cusato <gabrielecusato@gmail.com>
Date: Mon, 23 Mar 2026 18:41:59 +0100
Subject: [PATCH 14/14] aggiunte anche voci al menu con i 3 puntini

---
 .claude/settings.local.json   |  4 +-
 HandTranscriptMd/src/embed.ts | 87 +++++++++++++++++++----------------
 HandTranscriptMd/src/main.ts  | 72 ++++++++++++++++++++++++++++-
 3 files changed, 122 insertions(+), 41 deletions(-)

diff --git a/.claude/settings.local.json b/.claude/settings.local.json
index 7246c59..fbed6ee 100644
--- a/.claude/settings.local.json
+++ b/.claude/settings.local.json
@@ -7,7 +7,9 @@
       "WebFetch(domain:css-tricks.com)",
       "WebFetch(domain:chromium.googlesource.com)",
       "WebFetch(domain:github.com)",
-      "WebFetch(domain:developer.chrome.com)"
+      "WebFetch(domain:developer.chrome.com)",
+      "Bash(\"C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe\" --login -c \"cd 'C:/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd' && bash deploy.sh && bash cloudDeploy.sh\" 2>&1)",
+      "Bash(\"C:\\\\Program Files\\\\Git\\\\bin\\\\bash.exe\" --login -c \"cd 'C:/Projects/pluginObsidian/handWrittenMarkdownConverter/HandTranscriptMd' && bash deploy.sh\" 2>&1)"
     ]
   }
 }
diff --git a/HandTranscriptMd/src/embed.ts b/HandTranscriptMd/src/embed.ts
index a615a6d..ade9374 100644
--- a/HandTranscriptMd/src/embed.ts
+++ b/HandTranscriptMd/src/embed.ts
@@ -339,23 +339,19 @@ async function doConvertWiki(
 	sourcePath: string,
 	plugin: HandwritingPlugin
 ) {
-	try {
-		new Notice('Riconoscimento in corso…');
-		const parser = new DOMParser();
-		const svgEl  = parser.parseFromString(svgContent, 'image/svg+xml')
-			.documentElement as unknown as SVGElement;
-		const base64     = await svgToBase64Png(svgEl);
-		const recognizer = getRecognizer(plugin.settings.geminiApiKey, plugin.settings.ocrLanguages);
-		const rawText    = await recognizer.recognize(base64);
-		if (!rawText.trim()) { new Notice('Nessun testo riconosciuto'); return; }
-
-		const markdown = parseMarkdown(rawText);
-		await archiveSvgByPath(svgPath, plugin);
-		await replaceWikiEmbedWithMarkdown(svgPath, markdown, sourcePath, plugin);
-		new Notice('Conversione completata!');
-	} catch (e: unknown) {
-		new Notice('Errore OCR: ' + (e instanceof Error ? e.message : String(e)));
-	}
+	// Lancia eccezione in caso di errore (il chiamante decide se mostrare Notice o propagare)
+	new Notice('Riconoscimento in corso…');
+	const parser = new DOMParser();
+	const svgEl  = parser.parseFromString(svgContent, 'image/svg+xml')
+		.documentElement as unknown as SVGElement;
+	const base64     = await svgToBase64Png(svgEl);
+	const recognizer = getRecognizer(plugin.settings.geminiApiKey, plugin.settings.ocrLanguages);
+	const rawText    = await recognizer.recognize(base64);
+	if (!rawText.trim()) throw new Error('Nessun testo riconosciuto');
+	const markdown = parseMarkdown(rawText);
+	await archiveSvgByPath(svgPath, plugin);
+	await replaceWikiEmbedWithMarkdown(svgPath, markdown, sourcePath, plugin);
+	new Notice('Conversione completata!');
 }
 
 /* =============================================
@@ -660,14 +656,6 @@ function createPortalPanel(
 
 	// --- Bottone converti in Markdown ---
 	const convertBtn = createPanelBtn(panel, 'file-text', 'Converti in Markdown');
-	convertBtn.addEventListener('click', async () => {
-		const { strokes, svgContent } = await loadSvgData(svgPath, plugin);
-		if (!svgContent || strokes.length === 0) {
-			new Notice('Nessun tratto da convertire');
-			return;
-		}
-		await doConvertWiki(svgContent, svgPath, sourcePath, plugin);
-	});
 
 	// --- Bottone comprimi/espandi ---
 	// Usa height + overflow:hidden sul container (non max-height sull'<img>):
@@ -676,20 +664,6 @@ function createPortalPanel(
 	// anche da compresso (collapsedHeight è sempre >> 6px + altezza pannello).
 	const collapseBtn = createPanelBtn(panel, 'chevron-up', 'Comprimi');
 	collapseBtn.classList.add('hwm_collapse-btn');
-	collapseBtn.addEventListener('click', () => {
-		isExpanded = !isExpanded;
-		if (isExpanded) {
-			container.style.height   = '';
-			container.style.overflow = '';
-			collapseBtn.classList.remove('hwm_rotated');
-			collapseBtn.title = 'Comprimi';
-		} else {
-			container.style.height   = collapsedHeight + 'px';
-			container.style.overflow = 'hidden';
-			collapseBtn.classList.add('hwm_rotated');
-			collapseBtn.title = 'Espandi';
-		}
-	});
 
 	// --- Bottone elimina ---
 	const deleteBtn = createPanelBtn(panel, 'x', 'Elimina riquadro');
@@ -699,6 +673,41 @@ function createPortalPanel(
 		await removeWikiEmbed(svgPath, sourcePath, plugin);
 	});
 
+	// --- Funzioni condivise: usate dai bottoni e dal menu globale (⋮ Obsidian) ---
+	const doExpand = () => {
+		isExpanded = true;
+		container.style.height   = '';
+		container.style.overflow = '';
+		collapseBtn.classList.remove('hwm_rotated');
+		collapseBtn.title = 'Comprimi';
+	};
+	const doCollapse = () => {
+		isExpanded = false;
+		container.style.height   = collapsedHeight + 'px';
+		container.style.overflow = 'hidden';
+		collapseBtn.classList.add('hwm_rotated');
+		collapseBtn.title = 'Espandi';
+	};
+	// Carica SVG e chiama doConvertWiki (che lancia eccezione in caso di errore)
+	const doConvertAction = async () => {
+		const { strokes, svgContent } = await loadSvgData(svgPath, plugin);
+		if (!svgContent || strokes.length === 0) throw new Error('Nessun tratto da convertire');
+		await doConvertWiki(svgContent, svgPath, sourcePath, plugin);
+	};
+
+	collapseBtn.addEventListener('click', () => {
+		if (isExpanded) doCollapse(); else doExpand();
+	});
+	convertBtn.addEventListener('click', async () => {
+		// Bottone singolo: mostra Notice in caso di errore senza propagare
+		try { await doConvertAction(); }
+		catch (e: unknown) { new Notice('Errore OCR: ' + (e instanceof Error ? e.message : String(e))); }
+	});
+
+	// Registra le azioni nel plugin per il menu "⋮ Espandi/Collassa/Converti tutti"
+	plugin.embedActions.set(embedId, { expand: doExpand, collapse: doCollapse, convert: doConvertAction, container, sourcePath });
+	plugin.register(() => plugin.embedActions.delete(embedId));
+
 	// Layout-change: su Mobile nasconde il pannello quando la tab editor è aperta
 	const onLayoutChange = () => {
 		if (!container.isConnected) {
diff --git a/HandTranscriptMd/src/main.ts b/HandTranscriptMd/src/main.ts
index 051be73..865cec5 100644
--- a/HandTranscriptMd/src/main.ts
+++ b/HandTranscriptMd/src/main.ts
@@ -7,7 +7,7 @@
    - Tab impostazioni
    ============================================= */
 
-import { Plugin } from 'obsidian';
+import { Plugin, TFile, Notice } from 'obsidian';
 import { DEFAULT_SETTINGS, HandwritingSettings, HandwritingSettingTab } from './settings';
 import { registerEmbed, insertHandwritingBlock } from './embed';
 import { VIEW_TYPE_HANDWRITING, DrawingEditorView } from './editor-view';
@@ -24,6 +24,15 @@ export default class HandwritingPlugin extends Plugin {
 	// Callback notificate quando l'utente cambia bgMode nelle impostazioni
 	public bgModeListeners = new Set<(bgMode: string) => void>();
 
+	// Mappa embedId → azioni (expand/collapse/convert): usata dal menu "⋮" di Obsidian
+	public embedActions = new Map<string, {
+		expand:     () => void;
+		collapse:   () => void;
+		convert:    () => Promise<void>;
+		container:  HTMLElement;
+		sourcePath: string;
+	}>();
+
 	// Invocato dall'editor tab dopo ogni salvataggio per aggiornare la preview inline
 	refreshPreview(id: string, svgContent: string) {
 		this.previewCallbacks.get(id)?.(svgContent);
@@ -68,6 +77,67 @@ export default class HandwritingPlugin extends Plugin {
 
 		// Tab impostazioni
 		this.addSettingTab(new HandwritingSettingTab(this.app, this));
+
+		// Voci nel menu "⋮" (tre puntini) di Obsidian per operazioni su tutti i disegni.
+		// Vengono aggiunte con setSection('danger') e poi spostate prima di "Elimina file"
+		// tramite (menu as any).items — l'unico modo per posizionarle nell'ultima sezione
+		// sopra Delete senza usare API private più instabili.
+		this.registerEvent(
+			this.app.workspace.on('file-menu', (menu, file) => {
+				if (!(file instanceof TFile) || file.extension !== 'md') return;
+				menu.addItem(item => item
+					.setTitle('Espandi tutti i disegni')
+					.setIcon('chevrons-down')
+					.setSection('danger')
+					.onClick(() => {
+						this.getActiveEmbeds(file.path).forEach(a => a.expand());
+					})
+				);
+				menu.addItem(item => item
+					.setTitle('Collassa tutti i disegni')
+					.setIcon('chevrons-up')
+					.setSection('danger')
+					.onClick(() => {
+						this.getActiveEmbeds(file.path).forEach(a => a.collapse());
+					})
+				);
+				menu.addItem(item => item
+					.setTitle('Converti tutti i disegni in testo')
+					.setIcon('file-text')
+					.setSection('danger')
+					.onClick(async () => {
+						try {
+							// Sequenziale: si ferma al primo errore
+							for (const actions of this.getActiveEmbeds(file.path)) {
+								await actions.convert();
+							}
+						} catch (e: unknown) {
+							new Notice('Errore nella conversione: ' + (e instanceof Error ? e.message : String(e)));
+						}
+					})
+				);
+				// Sposta le 3 voci appena aggiunte prima del primo item 'danger' esistente
+				// (cioè prima di "Elimina file"), in modo che compaiano sopra di esso.
+				const items: Array<{ section: string }> = (menu as any).items;
+				const added = items.splice(items.length - 3, 3);
+				const firstDangerIdx = items.findIndex(i => i.section === 'danger');
+				items.splice(firstDangerIdx >= 0 ? firstDangerIdx : items.length, 0, ...added);
+			})
+		);
+	}
+
+	// Restituisce gli embed attivi (container nel DOM) appartenenti al file indicato.
+	// Rimuove dalla mappa gli embed il cui container non è più nel DOM.
+	private getActiveEmbeds(filePath: string) {
+		const result: Array<{ expand: () => void; collapse: () => void; convert: () => Promise<void> }> = [];
+		for (const [id, actions] of this.embedActions) {
+			if (!actions.container.isConnected) {
+				this.embedActions.delete(id);
+				continue;
+			}
+			if (actions.sourcePath === filePath) result.push(actions);
+		}
+		return result;
 	}
 
 	async loadSettings() {