Enhance UI, Layout Engine, and Editor Experience

[YeeShin504]

This pull request introduces significant improvements to the interactive editor and the underlying layout/rendering engine.

Key Features

1. Resizable Workspace & Reference Sidebar

• Tri-panel Layout: The editor now features three adjustable panels: Reference, Code Editor, and SVG Preview.
• Collapsible Reference: A sidebar has been added containing a searchable list of all available syntax, settings, and examples.
• "Try it" Snippets: Users can click "Try it" on any reference item to instantly inject the example code into their editor.

2. Enhanced Editor Intelligence

• VS Code Style Autocomplete:
  • Auto-triggers as you type or via Tab.
  • Suggests Keywords (e.g., def, participant).
  • Suggests Settings (e.g., arrowHeadSize, timeTickInterval).
  • Dynamic Aliases: Automatically suggests participant aliases defined elsewhere in the document.
• Better Highlighting: Syntax highlighting now correctly identifies aliases and specific settings.
• Commenting: Added support for toggleable comments (//) via Ctrl+/.

3. Layout Engine Updates

• Unit Support: The def command now supports values with units (px, %) and is more robust at parsing different types (Boolean, Number, String).
• Time Axis & Grid: Improved label positioning and spacing for the time axis. Added timeUnit setting support.
• Dynamic Spacing: Refactored spacing logic to use more intuitive setting names like timeTickInterval and participantSpacing.

4. Rendering Improvements

• Annotation Text Wrapping: Long annotations now automatically wrap into multiple lines using tspan in SVG, preventing overflow.
• Responsive SVG: The preview now uses viewBox and preserveAspectRatio for better scaling within the panel.

Technical Details

src/ Changes

• parser.ts: Implemented a more robust parser with specialized type handling for settings. Improved regex for capturing participants and actions.
• layout.ts: Refactored the core layout algorithm to use the new settings schema and improved height/width calculations.
• renderer.ts: Implemented wrapText utility for SVG multi-line text and updated drawing functions to use the latest setting nomenclature.

docs/ Changes

• editor.js & editor.css: Implemented the resizing logic and the dynamic reference sidebar.
• syntax-highlight.js: Extended CodeMirror with a custom hint provider for protocol-ml.