Release v0.0.6 (Earlydev -- may conatin lot of bugs)
Pre-release
Pre-release
This release brings massive leaps forward in rendering performance, visual precision, layout compliance, and developer diagnostics. v0.0.6 introduces highly optimized rendering pipelines, full CSS transition support, and a built-in DevTools inspector.
What's New## ⚡ Performance & Engine Optimizations
- Dirty Incremental Rendering: Minimizes performance overhead by propagating layout and paint flags (markDirty()) up the tree. Clean nodes are skipped during layout, and a cached display list (executeDisplayList()) replays every frame. This triggers automatically for scroll, hover, events, and custom cursors.
- Viewport Culling: Significantly boosts frame rates by skipping off-screen children during both the draw phase and event dispatching.
- Window Clear Optimization: Synchronizes glClearColor with the HTML body's background-color every frame, preventing color mismatch glitches during window resizing.
🎨 Layout Engine & CSS Enhancements
- Advanced Texturing: Integrated robust stb_image-backed rendering supporting PNG, JPEG, WebP, GIF, and BMP with intrinsic aspect ratios.
- Nested Border-Radius Clipping: Implements a stencil-based system (GL_INCR), ensuring child masks cleanly intersect with ancestor clipping masks without bleeding.
- Layout Precision: Added full support for individual side properties (margin-top, padding-left), box-sizing (content-box and border-box), and responsive max-width constraints.
- Dynamic Margin Alignment: Added runtime margin: auto resolution for effortless dynamic horizontal centering when resizing.
🖱️ Dynamic Interactivity & Transitions
- CSS :hover Pseudo-class: Implements class-based hover states parsed from CSS files, capturing a snapshot of the base style and swapping structs smoothly on mouse enter/leave.
- CSS Transitions: Added interpolation for all numeric and color properties using easing functions (linear, ease-in, ease-out, ease-in-out) via transition shorthands.
- Native Cursors: Added support for system cursors, enabling responsive context changes like cursor: pointer (hand) and cursor: text (I-beam).
🛠️ Developer Tooling (morph_devrt)
- Built-in DevTools (F12): Introduces a diagnostics suite featuring:
- Elements Tab: Includes an interactive element inspector (F2) with a color-coded box-model overlay (orange: margin, yellow: border, green: padding, blue: content) and real-time style panels.
- Rendering Tab: Displays live performance data, including frame counters, node counts, skipped layout percentages, and cache hit rates.
- Dev Mode Refinements: Added hot-reloading for window configurations and automated CMake binary rebuilding when core runtime source files change.