Skip to content

v1.1.0 - Monaco panel + bidirectional highlighting

Choose a tag to compare

View all tags
@AfrazF AfrazF released this 24 Oct 09:33
· 74 commits to main since this release
v1.1.0
1365d9a

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
Assets 3
Loading