Skip to content

Roadmap

Jump to bottom
Edgar Mesquita edited this page Jul 5, 2026 · 12 revisions

Project Roadmap

This document summarizes the progress of eQuantic.UI and the next steps planned for the framework.

✅ Completed

🛡️ Security (Phase 1)

  • Authorization in Server Actions ([Authorize], [AllowAnonymous])
  • Payload validation and request size limits.
  • Type whitelist for secure deserialization.

🧪 Compiler & Language Support (Phase 2)

  • Source Maps: Integrated native C# debugging in the browser (SourceMapGenerator, TypeScriptCodeBuilder).
  • Modern C# Support: Recursive patterns, using var, and advanced switch expressions.
  • Comprehensive test suite (37+ unit and snapshot tests).
  • Implementation of identifier heuristics (this.).

⚡ Performance - Runtime (Phase 3)

  • Keyed Diffing: Intelligent reconciliation based on keys (basic implementation in reconciler.ts).
  • True Keyed Diffing (LIS): Longest Increasing Subsequence algorithm for efficient node movement (reconciler.ts lines 343-573).
  • WeakMap Event Tracking: Memory optimization to prevent leaks (reconciler.ts line 23).
  • Optimized Runtime build with Bun bundler.

🛠️ Developer Experience - DX (Phase 4)

  • CLI Tool (eqx): Commands for build, dev (with HTTP server + file watcher), and create (project scaffolding with counter/blank templates).
  • VS Code Extension: Snippets for pages, components, and styles (extensions/vscode/).
  • Debugging: Integrated Source Maps for TS/JS debugging.

📦 Ecosystem & Styling (Phase 5)

  • Tailwind Components: New Badge and Alert components.
  • Zero-runtime CSS Extraction: Static extraction of styles during build time (TailwindStyleExtractor).
  • 100% Theme Extension: Full theme coverage for Switch, Select, Table, Modal, Tabs, Avatar via IAppTheme.
  • Core Refactoring: Removal of hardcoded classes in favor of AppTheme.
  • DX: Added IsNative property for choosing between standard and rich HTML rendering.

🎨 Phase 6: Theme and Component Maturity

  • Standardization of Variant and Size enums.
  • Implementation of StyleBuilder (CVA pattern) in Core/Theme/StyleBuilder.cs.
  • Decoupling of semantic colors via IColorTheme.
  • Component refactoring (Button, Alert, Badge, Avatar, Input).
  • Duplicate cleanup and folder reorganization.

🏗️ Phase 6.5: Component Robustness (Feb 2026)

  • Compound Components Pattern: Card with semantic sub-components (CardHeader, CardTitle, CardDescription, CardBody, CardFooter).
  • Granular Variants: CardVariant enum with 5 options (Default, Outline, Elevated, Subtle, Ghost).
  • Controlled/Uncontrolled Components: DefaultValue/DefaultChecked props for TextInput, Select, Checkbox.
  • Loading States: Button.Loading prop with automatic spinner and disabled state.
  • Error States & Validation: FormField component with label, error messages, and helper text.
  • Input Groups: InputGroup and InputAddon for composite inputs (URLs, currency, etc.).
  • Data & ARIA Attributes: Native support via HtmlElement.DataAttributes and AriaAttributes.
  • XML Documentation: Complete IntelliSense support for all component props.
  • Tailwind Package Updates: ButtonTheme, CardTheme, InputTheme with variant support.
  • Wiki Documentation: ComponentRobustness.md and TailwindUpdates.md added.

Result: Components now match shadcn/ui robustness with additional C# type safety advantages.

🔧 Phase 6.6: Infrastructure & Maintenance (Mar 2026)

  • Migration to .NET 10: All 39 projects updated to net10.0 (SDK, CI, NuGet dependencies).
  • Runtime Meta-package Cleanup: Removed broken MSBuild OS conditions from eQuantic.UI.Runtime.csproj; platform resolution now handled exclusively by Sdk.props.
  • Program.cs Refactoring: Extracted EnableTailwindDarkMode() extension method to reduce inline JavaScript in consumer apps.
  • Centralized Versioning: Removed hardcoded <Version> from Runtime platform packages; all packages now inherit from Directory.Build.props.
  • Dynamic Theme (Dark Mode): EnableTailwindDarkMode() in TailwindExtensions.cs + embedded dark-mode.js.
  • UI Component Library: eQuantic.UI.Lucide, eQuantic.UI.Heroicons, eQuantic.UI.Charts.ChartJs, eQuantic.UI.Charts.ApexCharts ecosystem.

🚀 In Progress

🟠 Phase 7: Documentation & Enterprise Readiness

  • Update Wiki with new styling patterns and Source Map details.
  • E2E Testing with Playwright: 4 test suites implemented (701 LOC):
    • todolist.spec.ts — Functional tests for TodoList app
    • ssr-hydration.spec.ts — SSR hydration validation
    • ssr-csr-diff.spec.ts — SSR vs CSR output comparison
    • debug-html-diff.spec.ts — HTML diff debugging
  • E2E CI Integration: Integrate Playwright tests into GitHub Actions CI pipeline.
  • Interactive Component Showcase: Evolve existing Showcase.cs (in Material/Default samples) into a standalone, interactive "Playground" with live props editing.
  • CLI Component Scaffolding: Extend CLI create command to scaffold individual components (e.g., eqx create component MyCard).
  • Linting & Formatting: Add ESLint/Prettier configuration for TypeScript code in the Runtime.

📱 Phase 7: Photon — the native GPU engine (Jun–Jul 2026)

The mobile track opened with a decisive bet: a proprietary GPU engine (direct Metal/Vulkan, precompiled shaders, no Skia tier). See Photon.

  • Engine core (eQuantic.UI.Native.Engine): y-down geometry, CSS-rule radius normalization, sRGB⇄linear color model, flat heap-free display lists, and Sdf.cs — the NORMATIVE rrect/stroke/coverage math every rasterizer transliterates.
  • Reference backend: scalar CPU rasterizer (linear premultiplied blending) — the golden ground truth.
  • Golden-image harness: dependency-free PNG codec, EQ_UPDATE_GOLDENS=1 flow, failure diff artifacts; 25 committed goldens.
  • Metal spike: offscreen backend via ~100 lines of typed objc_msgSend P/Invoke (no binding framework) — max channel diff of 1 vs the Reference across every golden scene.
  • Photon Design System implemented as typed C# tokens with recomputed WCAG contrast tests (DesignSystem).
  • C# flex layout engine + native realizer + PhotonHost frame loop (tap → SetState → rebuild, golden-tested Counter).

🔁 Phase 8: Write-once architecture & unification (Jul 2026)

Components authored ONCE against the abstract vocabulary, realized per target. See WriteOnceComponents.

  • eQuantic.UI.Primitives (zero-dep): tokens, abstract nodes, component model (mode-free ComponentContext).
  • Web realizer (SSR) + TS runtime lowering with byte-exact cross-pinned hydration parity.
  • eqc integration: semantic runtime-import routing (namespace + [RuntimeProvided]), named-argument reordering, value-type initializer/config-object emission, nullable-enabled compilations, direct-SetState stateful shape.
  • Runtime-provided library: transpiled shared components embedded in runtime.js, byte-pinned; name reuse vs legacy web components resolves semantically by using.
  • Core⇄Shared bridges: VisualNodeComponent (SSR adapter) and write-once pages (a Primitives StatefulComponent with [Page] is a full SSR+hydrated page).
  • Live proof: DefaultUIDashboard /shared and /counter-shared, verified in a real browser (SSR → hydration → clicks re-render; dark-mode tokens resolve to spec values).

🌊 Phase 9: Migration waves & primitives (Jul 2026)

  • Wave 1 (8 write-once components): Button, Card, Divider, Badge, Chip, ProgressBar, Avatar, Banner — per the design handoff specs, tested on every axis (web pins, native goldens light+dark, transpiled fixtures executed in vitest).
  • Stack/Positioned (spec A3): z-order across all three realizers (badge overlay, presence dots).
  • Icon (spec A10): curated glyph pipeline — path data once in C#, generated TS, §07 whitelist enforced.
  • Image (spec A11): sized slots, fits, rrect clip; native placeholder until texture upload.
  • ScrollView — gated on an engine clip primitive.
  • Interaction system (pressed/focus/hover) — gates Tabs, Select, inputs, Banner dismiss.
  • Reconciler with positional state — removes the v1 state-hoisting pattern (shared web+native).
  • Waves 2–3: remaining ~54 legacy web components migrate; Components.Shared merges into eQuantic.UI.Components.

🔮 Next Steps

🟡 Medium Term

  • DataGrid Pro: Enterprise-grade data grid with remote pagination, sorting, filtering, and inline editing.
  • Enterprise Monetization Plan: Define licensing and premium support structures.
  • Full SSR Support: Complete initial server-side rendering for SEO and performance. SSR hydration exists (WithSsr(), boot.ts hydration logic) but needs expanded coverage.

🟢 Long Term

  • eQuantic Playground: Online editor via WASM for live component editing in the browser.
  • eQuantic DevTools: Browser extension to inspect component tree, state, and events in real-time.

Clone this wiki locally