v1.1.0 - Monaco panel + bidirectional highlighting

v1.1.0 - Monaco panel + bidirectional highlighting

Bidirectional sync between Blockly blocks and Python source. Click a block → its source highlights in Monaco. Move the cursor in Monaco → the corresponding block glows. Read-only viewer (v1.25); editing is planned for v2.

Download index.html below → double-click → upload your .py files → see blocks. Works offline via file://. No server, no install.

What's new since v1.0.0

Monaco panel

• Read-only Python editor beside the blocks, with syntax highlighting
• Draggable splitter between blocks and Monaco (240 px min, 60 vw max)
• Toggle via floating code button (bottom-right); splitter grip on both handles

Bidirectional highlighting

• Click a block → Monaco selects and scrolls to its exact source range
• Move cursor in Monaco → the corresponding block glows
• Cascading selection: clicking a task block (async def mission1) glows the wrapper and every nested statement, matching what Monaco highlights
• Await wrappers (await home(...)) correctly highlight as the wrapper, not the inner call
• Empty background click clears both panels
• Import blocks target per-name ranges (Port → just Port, attachment1 as attachment_a → the full alias span)

Multitask

• Multitask block shows argument comments as separate question-mark icons on each inner block
• Mutator gear icon removed (comments replace it)

Themes

• Light/dark toggle with 300ms crossfade across sidebar, workspace, and Monaco
• Pybricks-accurate dark palette (#343d46 workspace, #2d2d2d Monaco)
• Sun/moon crossfade-rotate animation on theme toggle
• Code button SVG morph animation (chevrons slide, slash wipes in)

Fixes

• Docstrings on all tasks/functions show as comment icons
• Inline comments on every block that has one, click to open bubble
• Sidebar truncates long filenames with ellipsis (no horizontal scroll)
• App opens on main.py by default

Known limits

• Read-only. No editing, no round-trip Python generation. That's v2.
• Comment icon clicks open the bubble but don't reveal text in Monaco. Deferred by design — the reveal attempt stole Monaco focus and closed bubbles; bubble alone is the accepted feedback.
• run.py and main.py render as large raw-code blocks. Control flow (for/while/if) is v1.5.
• No icons on blocks. Colored blocks only.

Use it

Offline: download index.html, open in Chrome/Edge, upload your .py files.

Hosted: see Docker section in README; serves via nginx on port 8080.

Verification

• 6/6 Vitest tests passing, including acceptance.test.ts asserting 0 raw blocks in robot.py and exampleattach.py
• dist/index.html opens via file://, bidirectional sync works offline
• Tested on Windows (Chrome, Edge) and Ubuntu Chromebook

v1.0.0

v1.0.0 — Read-only Python → Blocks viewer

Turns Pybricks Python (SPIKE Prime, FLL) into color-coded Blockly blocks. Drop in .py files, see them as blocks. No editing (v2), no server needed.

Download index.html below → double-click → upload your .py files → read them as blocks. Works offline via file://.

What's in v1

• Real parser — @lezer/python, any valid Python
• Cross-file resolution — attachment1 as attachment_a resolves to a Motor, not text
• Pybricks blocks — DriveBase (straight, turn, reset, use_gyro, settings), Motor (run_target, run_angle, run_until_stalled, run_time, reset_angle, stop), multitask, home, speed presets
• Hardware setup — PrimeHub, Motor(port, direction), DriveBase(...)
• Variables — create variable, set, pink chips in block args
• Comments — grey standalone blocks; inline comments as icons on blocks
• Docstrings — comment icons on the owning hat/task/function
• Tasks vs functions — purple async def, pink def
• Zelos renderer + Pybricks palette — orange hat, purple tasks, pink calls, cyan object chips
• Resizable sidebar — file switcher, upload, drag-drop
• Single-file build — ~875 kB, no dependencies at runtime
• Docker deploy — docker compose up -d --build for hosted version

Known limits

• run.py and main.py render as large raw blocks (control flow is v1.5)
• Read-only (editing is v2)
• No Monaco side panel (v1.25)

Use it

Offline: download index.html, open in Chrome/Edge, upload .py files.

Hosted:

git clone https://github.com/AfrazF/python-to-blocks.git
cd python-to-blocks && git checkout v1.0.0
docker compose up -d --build