started adding some DOM utilities

src/HeadlessBlazor.Core/HeadlessBlazor.Core.csproj

@@ -16,8 +16,4 @@
     <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.4" />
   </ItemGroup>
 
-  <ItemGroup>
-    <Folder Include="wwwroot\" />
-  </ItemGroup>
-
 </Project>

src/HeadlessBlazor.Core/Utilities/ClientRect.cs

@@ -0,0 +1,3 @@
+namespace HeadlessBlazor.Utilities;
+
+public sealed record ClientRect(double Top, double Left, double Bottom, double Right);

src/HeadlessBlazor.Core/Utilities/DOM.cs

@@ -0,0 +1,34 @@
+using Microsoft.AspNetCore.Components;
+using Microsoft.JSInterop;
+
+namespace HeadlessBlazor.Utilities;
+
+public sealed class DOM(IJSRuntime js) : IAsyncDisposable
+{
+    private readonly Lazy<ValueTask<IJSObjectReference>> _module = new(() => js.InvokeAsync<IJSObjectReference>("import", "./_content/HeadlessBlazor.Core/utils.js"));
+
+    public async ValueTask<WindowDimensions> GetWindowDimensionsAsync()
+    {
+        return await InvokeAsync<WindowDimensions>("getWindowDimensions");
+    }
+
+    public async ValueTask<ClientRect> GetBoundingClientRect(ElementReference element)
+    {
+        return await InvokeAsync<ClientRect>("getBoundingClientRect", element);
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_module.IsValueCreated)
+        {
+            var module = await _module.Value;
+            await module.DisposeAsync();
+        }
+    }
+
+    private async ValueTask<T> InvokeAsync<T>(string identifier, params object?[]? args)
+    {
+        var module = await _module.Value;
+        return await module.InvokeAsync<T>(identifier, args);
+    }
+}

src/HeadlessBlazor.Core/Utilities/WindowDimensions.cs

@@ -0,0 +1,3 @@
+namespace HeadlessBlazor.Utilities;
+
+public sealed record WindowDimensions(double Height, double Width);

src/HeadlessBlazor.Core/wwwroot/utils.js

@@ -0,0 +1,37 @@
+/**
+ * Gets the dimensions of the window.
+ */
+export function getWindowDimensions() {
+    return new WindowDimensions();
+}
+
+/**
+ * Gets the bounding client rectangle of the provided element.
+ * @param {Element} element
+ * @returns {ClientRect}
+ */
+export function getBoundingClientRect(element) {
+    return new ClientRect(element);
+}
+
+export class WindowDimensions {
+    constructor() {
+        const html = document.documentElement;
+        this.Height = html.clientHeight;
+        this.Width = html.clientWidth;
+    }
+}
+
+export class ClientRect {
+
+    /**
+     * @param {Element} element
+     */
+    constructor(element) {
+        const rect = element.getBoundingClientRect();
+        this.Top = rect.top;
+        this.Left = rect.left;
+        this.Bottom = rect.bottom;
+        this.Right = rect.right;
+    }
+}

src/HeadlessBlazor/ServiceCollectionExtensions.cs

@@ -1,11 +1,13 @@
-using Microsoft.Extensions.DependencyInjection;
+using HeadlessBlazor.Utilities;
+using Microsoft.Extensions.DependencyInjection;
 
 namespace HeadlessBlazor;
 
 public static class ServiceCollectionExtensions
 {
     public static IServiceCollection AddHeadlessBlazor(this IServiceCollection services)
     {
+        services.AddTransient<DOM>();
         return services;
     }
 }