✨ feat(ui-layout): add UiElementSizeObserverDirective for reactive element sizing

Adds a directive that uses ResizeObserver to track element dimensions
and exposes them as signals for reactive positioning calculations.

libs/ui/layout/src/index.ts

@@ -1,4 +1,5 @@
-export * from './lib/breakpoint.directive';
-export * from './lib/breakpoint';
-export * from './lib/close-on-scroll.directive';
-export * from './lib/in-viewport.directive';
+export * from './lib/breakpoint.directive';
+export * from './lib/breakpoint';
+export * from './lib/close-on-scroll.directive';
+export * from './lib/in-viewport.directive';
+export * from './lib/element-size-observer.directive';

libs/ui/layout/src/lib/element-size-observer.directive.ts

@@ -0,0 +1,47 @@
+import {
+  AfterViewInit,
+  Directive,
+  ElementRef,
+  inject,
+  OnDestroy,
+  output,
+  Signal,
+  signal,
+} from '@angular/core';
+
+@Directive({
+  selector: '[uiElementSizeObserver]',
+  exportAs: 'uiElementSizeObserver',
+})
+export class UiElementSizeObserverDirective
+  implements AfterViewInit, OnDestroy
+{
+  #element: HTMLElement = inject(ElementRef).nativeElement;
+
+  #resizeObserver?: ResizeObserver;
+
+  ngAfterViewInit(): void {
+    this.#resizeObserver = new ResizeObserver(() => {
+      this.#emitSize();
+    });
+    this.#resizeObserver.observe(this.#element);
+    this.#emitSize();
+  }
+
+  ngOnDestroy(): void {
+    this.#resizeObserver?.disconnect();
+  }
+
+  #emitSize() {
+    const size = this.#element.getBoundingClientRect();
+    this.#size.set(size);
+    this.uiElementSizeObserver.emit(size);
+  }
+
+  #size = signal<{ width: number; height: number }>({ height: 0, width: 0 });
+
+  readonly size: Signal<{ width: number; height: number }> =
+    this.#size.asReadonly();
+
+  readonly uiElementSizeObserver = output<{ width: number; height: number }>();
+}