@signality/core 0.0.1-alpha.2

package/fesm2022/signality-core-elements-scroll-position.mjs

@@ -0,0 +1,175 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal, isWindow, toElement } from '@signality/core/internal';
+import { throttleCallback } from '@signality/core/scheduling/throttle-callback';
+import { listener } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Reactive tracking of scroll position.
+ * Track scroll offset of window or any scrollable element.
+ *
+ * @param options - Optional configuration
+ * @returns An object with x, y, isScrolling, arrivedState, and directions signals
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <p>Scroll Y: {{ scrollPos.y() }}px</p>
+ *     @if (scrollPos.isScrolling()) {
+ *       <p>Scrolling...</p>
+ *     }
+ *     @if (scrollPos.arrivedState().bottom) {
+ *       <p>Reached bottom!</p>
+ *     }
+ *   `
+ * })
+ * class ScrollTracker {
+ *   readonly scrollPos = scrollPosition();
+ * }
+ * ```
+ *
+ * @example
+ * ```typescript
+ * // Track scroll on a specific element
+ * @Component({
+ *   template: `
+ *     <div #scrollable style="overflow: auto; height: 200px;">
+ *       <div style="height: 1000px;">Long content</div>
+ *     </div>
+ *     <p>Scroll position: {{ pos.y() }}</p>
+ *   `
+ * })
+ * class ScrollableComponent {
+ *   readonly scrollableEl = viewChild<ElementRef>('scrollable');
+ *   readonly pos = scrollPosition({ target: this.scrollableEl });
+ * }
+ * ```
+ */
+function scrollPosition(options) {
+    const { runInContext } = setupContext(options?.injector, scrollPosition);
+    return runInContext(({ isServer, onCleanup }) => {
+        if (isServer) {
+            return {
+                x: constSignal(0),
+                y: constSignal(0),
+                isScrolling: constSignal(false),
+                arrivedState: constSignal(DEFAULT_ARRIVED),
+                directions: constSignal(DEFAULT_DIRECTIONS),
+            };
+        }
+        const target = options?.target ?? window;
+        const targetIsWindow = isWindow(target);
+        const offset = options?.offset ?? {};
+        const throttleMs = options?.throttle ?? 0;
+        const x = signal(0, ...(ngDevMode ? [{ debugName: "x" }] : []));
+        const y = signal(0, ...(ngDevMode ? [{ debugName: "y" }] : []));
+        const isScrolling = signal(false, ...(ngDevMode ? [{ debugName: "isScrolling" }] : []));
+        const arrivedState = signal(DEFAULT_ARRIVED, ...(ngDevMode ? [{ debugName: "arrivedState" }] : []));
+        const directions = signal(DEFAULT_DIRECTIONS, ...(ngDevMode ? [{ debugName: "directions" }] : []));
+        let lastX = 0;
+        let lastY = 0;
+        let scrollingTimeout;
+        const getScrollPosition = () => {
+            if (targetIsWindow) {
+                return { scrollX: target.scrollX, scrollY: target.scrollY };
+            }
+            const el = toElement(target);
+            return {
+                scrollX: el?.scrollLeft || 0,
+                scrollY: el?.scrollTop || 0,
+            };
+        };
+        const getScrollSize = () => {
+            if (targetIsWindow) {
+                return {
+                    scrollWidth: document.documentElement.scrollWidth,
+                    scrollHeight: document.documentElement.scrollHeight,
+                    clientWidth: target.innerWidth,
+                    clientHeight: target.innerHeight,
+                };
+            }
+            const el = toElement(target);
+            return {
+                scrollWidth: el?.scrollWidth || 0,
+                scrollHeight: el?.scrollHeight || 0,
+                clientWidth: el?.clientWidth || 0,
+                clientHeight: el?.clientHeight || 0,
+            };
+        };
+        const update = () => {
+            const { scrollX, scrollY } = getScrollPosition();
+            const { scrollWidth, scrollHeight, clientWidth, clientHeight } = getScrollSize();
+            directions.set({
+                top: scrollY < lastY,
+                bottom: scrollY > lastY,
+                left: scrollX < lastX,
+                right: scrollX > lastX,
+            });
+            lastX = scrollX;
+            lastY = scrollY;
+            x.set(scrollX);
+            y.set(scrollY);
+            const topOffset = offset.top ?? 0;
+            const bottomOffset = offset.bottom ?? 0;
+            const leftOffset = offset.left ?? 0;
+            const rightOffset = offset.right ?? 0;
+            arrivedState.set({
+                top: scrollY <= topOffset,
+                bottom: scrollY + clientHeight >= scrollHeight - bottomOffset,
+                left: scrollX <= leftOffset,
+                right: scrollX + clientWidth >= scrollWidth - rightOffset,
+            });
+            isScrolling.set(true);
+            if (scrollingTimeout) {
+                clearTimeout(scrollingTimeout);
+            }
+            scrollingTimeout = setTimeout(() => {
+                isScrolling.set(false);
+            }, SCROLL_IDLE_DELAY);
+        };
+        listener(target, 'scroll', throttleMs > 0 ? throttleCallback(update, throttleMs) : update);
+        if (!targetIsWindow) {
+            onDisconnect(target, () => {
+                x.set(0);
+                y.set(0);
+                isScrolling.set(false);
+                arrivedState.set(DEFAULT_ARRIVED);
+                directions.set(DEFAULT_DIRECTIONS);
+            });
+        }
+        onCleanup(() => {
+            if (scrollingTimeout) {
+                clearTimeout(scrollingTimeout);
+            }
+        });
+        update();
+        return {
+            x: x.asReadonly(),
+            y: y.asReadonly(),
+            isScrolling: isScrolling.asReadonly(),
+            arrivedState: arrivedState.asReadonly(),
+            directions: directions.asReadonly(),
+        };
+    });
+}
+const DEFAULT_ARRIVED = {
+    top: true,
+    bottom: false,
+    left: true,
+    right: false,
+};
+const DEFAULT_DIRECTIONS = {
+    top: false,
+    bottom: false,
+    left: false,
+    right: false,
+};
+const SCROLL_IDLE_DELAY = 150;
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { scrollPosition };
+//# sourceMappingURL=signality-core-elements-scroll-position.mjs.map

package/fesm2022/signality-core-elements-scroll-position.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-scroll-position.mjs","sources":["../../../projects/core/elements/scroll-position/index.ts","../../../projects/core/elements/scroll-position/signality-core-elements-scroll-position.ts"],"sourcesContent":["import { type Signal, signal } from '@angular/core';\nimport {\n  constSignal,\n  isWindow,\n  setupContext,\n  type Timer,\n  toElement,\n} from '@signality/core/internal';\nimport type { MaybeElementSignal, WithInjector } from '@signality/core/types';\nimport { throttleCallback } from '@signality/core/scheduling/throttle-callback';\nimport { listener } from '@signality/core/browser/listener';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\n/**\n * State indicating which edges have been reached.\n */\nexport interface ArrivedState {\n  readonly top: boolean;\n  readonly bottom: boolean;\n  readonly left: boolean;\n  readonly right: boolean;\n}\n\n/**\n * Current scroll directions.\n */\nexport interface ScrollDirections {\n  readonly top: boolean;\n  readonly bottom: boolean;\n  readonly left: boolean;\n  readonly right: boolean;\n}\n\nexport interface ScrollPositionOptions extends WithInjector {\n  /**\n   * Element or window to track scroll on.\n   * @default window\n   */\n  readonly target?: MaybeElementSignal<Element> | Window;\n\n  /**\n   * Throttle scroll events in milliseconds.\n   * @default 0\n   */\n  readonly throttle?: number;\n\n  /**\n   * Offset for arrived detection.\n   */\n  readonly offset?: {\n    readonly top?: number;\n    readonly bottom?: number;\n    readonly left?: number;\n    readonly right?: number;\n  };\n}\n\nexport interface ScrollPositionRef {\n  /** Horizontal scroll position */\n  readonly x: Signal<number>;\n\n  /** Vertical scroll position */\n  readonly y: Signal<number>;\n\n  /** Whether currently scrolling */\n  readonly isScrolling: Signal<boolean>;\n\n  /** Which edges have been reached */\n  readonly arrivedState: Signal<ArrivedState>;\n\n  /** Current scroll direction */\n  readonly directions: Signal<ScrollDirections>;\n}\n\n/**\n * Reactive tracking of scroll position.\n * Track scroll offset of window or any scrollable element.\n *\n * @param options - Optional configuration\n * @returns An object with x, y, isScrolling, arrivedState, and directions signals\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <p>Scroll Y: {{ scrollPos.y() }}px</p>\n *     @if (scrollPos.isScrolling()) {\n *       <p>Scrolling...</p>\n *     }\n *     @if (scrollPos.arrivedState().bottom) {\n *       <p>Reached bottom!</p>\n *     }\n *   `\n * })\n * class ScrollTracker {\n *   readonly scrollPos = scrollPosition();\n * }\n * ```\n *\n * @example\n * ```typescript\n * // Track scroll on a specific element\n * @Component({\n *   template: `\n *     <div #scrollable style=\"overflow: auto; height: 200px;\">\n *       <div style=\"height: 1000px;\">Long content</div>\n *     </div>\n *     <p>Scroll position: {{ pos.y() }}</p>\n *   `\n * })\n * class ScrollableComponent {\n *   readonly scrollableEl = viewChild<ElementRef>('scrollable');\n *   readonly pos = scrollPosition({ target: this.scrollableEl });\n * }\n * ```\n */\nexport function scrollPosition(options?: ScrollPositionOptions): ScrollPositionRef {\n  const { runInContext } = setupContext(options?.injector, scrollPosition);\n\n  return runInContext(({ isServer, onCleanup }) => {\n    if (isServer) {\n      return {\n        x: constSignal(0),\n        y: constSignal(0),\n        isScrolling: constSignal(false),\n        arrivedState: constSignal(DEFAULT_ARRIVED),\n        directions: constSignal(DEFAULT_DIRECTIONS),\n      };\n    }\n\n    const target = options?.target ?? window;\n    const targetIsWindow = isWindow(target);\n    const offset = options?.offset ?? {};\n    const throttleMs = options?.throttle ?? 0;\n\n    const x = signal(0);\n    const y = signal(0);\n    const isScrolling = signal(false);\n    const arrivedState = signal(DEFAULT_ARRIVED);\n    const directions = signal(DEFAULT_DIRECTIONS);\n\n    let lastX = 0;\n    let lastY = 0;\n    let scrollingTimeout: Timer;\n\n    const getScrollPosition = (): { scrollX: number; scrollY: number } => {\n      if (targetIsWindow) {\n        return { scrollX: target.scrollX, scrollY: target.scrollY };\n      }\n\n      const el = toElement(target);\n      return {\n        scrollX: el?.scrollLeft || 0,\n        scrollY: el?.scrollTop || 0,\n      };\n    };\n\n    const getScrollSize = (): {\n      scrollWidth: number;\n      scrollHeight: number;\n      clientWidth: number;\n      clientHeight: number;\n    } => {\n      if (targetIsWindow) {\n        return {\n          scrollWidth: document.documentElement.scrollWidth,\n          scrollHeight: document.documentElement.scrollHeight,\n          clientWidth: target.innerWidth,\n          clientHeight: target.innerHeight,\n        };\n      }\n\n      const el = toElement(target);\n      return {\n        scrollWidth: el?.scrollWidth || 0,\n        scrollHeight: el?.scrollHeight || 0,\n        clientWidth: el?.clientWidth || 0,\n        clientHeight: el?.clientHeight || 0,\n      };\n    };\n\n    const update = () => {\n      const { scrollX, scrollY } = getScrollPosition();\n      const { scrollWidth, scrollHeight, clientWidth, clientHeight } = getScrollSize();\n\n      directions.set({\n        top: scrollY < lastY,\n        bottom: scrollY > lastY,\n        left: scrollX < lastX,\n        right: scrollX > lastX,\n      });\n\n      lastX = scrollX;\n      lastY = scrollY;\n\n      x.set(scrollX);\n      y.set(scrollY);\n\n      const topOffset = offset.top ?? 0;\n      const bottomOffset = offset.bottom ?? 0;\n      const leftOffset = offset.left ?? 0;\n      const rightOffset = offset.right ?? 0;\n\n      arrivedState.set({\n        top: scrollY <= topOffset,\n        bottom: scrollY + clientHeight >= scrollHeight - bottomOffset,\n        left: scrollX <= leftOffset,\n        right: scrollX + clientWidth >= scrollWidth - rightOffset,\n      });\n\n      isScrolling.set(true);\n\n      if (scrollingTimeout) {\n        clearTimeout(scrollingTimeout);\n      }\n\n      scrollingTimeout = setTimeout(() => {\n        isScrolling.set(false);\n      }, SCROLL_IDLE_DELAY);\n    };\n\n    listener(target, 'scroll', throttleMs > 0 ? throttleCallback(update, throttleMs) : update);\n\n    if (!targetIsWindow) {\n      onDisconnect(target, () => {\n        x.set(0);\n        y.set(0);\n        isScrolling.set(false);\n        arrivedState.set(DEFAULT_ARRIVED);\n        directions.set(DEFAULT_DIRECTIONS);\n      });\n    }\n\n    onCleanup(() => {\n      if (scrollingTimeout) {\n        clearTimeout(scrollingTimeout);\n      }\n    });\n\n    update();\n\n    return {\n      x: x.asReadonly(),\n      y: y.asReadonly(),\n      isScrolling: isScrolling.asReadonly(),\n      arrivedState: arrivedState.asReadonly(),\n      directions: directions.asReadonly(),\n    };\n  });\n}\n\nconst DEFAULT_ARRIVED: ArrivedState = {\n  top: true,\n  bottom: false,\n  left: true,\n  right: false,\n};\n\nconst DEFAULT_DIRECTIONS: ScrollDirections = {\n  top: false,\n  bottom: false,\n  left: false,\n  right: false,\n};\n\nconst SCROLL_IDLE_DELAY = 150;\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/signality-core-elements-swipe.mjs

@@ -0,0 +1,107 @@
+import { signal } from '@angular/core';
+import { setupContext, constSignal } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+import { onDisconnect } from '@signality/core/elements/on-disconnect';
+
+/**
+ * Reactive touch-swipe detection on an element.
+ * Uses Touch Events API — for mouse/pen input use PointerSwipe instead.
+ * Tracks single-finger swipe gestures and provides direction and distance signals.
+ *
+ * @param target - Element to detect swipe gestures on
+ * @param options - Optional configuration including threshold and injector
+ * @returns A SwipeRef with reactive signals for swipe state
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div #area>
+ *       <p>Swiping: {{ sw.isSwiping() }}</p>
+ *       <p>Direction: {{ sw.direction() }}</p>
+ *     </div>
+ *   `
+ * })
+ * class SwipeComponent {
+ *   readonly area = viewChild<ElementRef>('area');
+ *   readonly sw = swipe(this.area);
+ * }
+ * ```
+ */
+function swipe(target, options) {
+    const { runInContext } = setupContext(options?.injector, swipe);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return {
+                isSwiping: constSignal(false),
+                direction: constSignal('none'),
+                distanceX: constSignal(0),
+                distanceY: constSignal(0),
+            };
+        }
+        const threshold = options?.threshold ?? 50;
+        const isSwiping = signal(false, ...(ngDevMode ? [{ debugName: "isSwiping" }] : []));
+        const direction = signal('none', ...(ngDevMode ? [{ debugName: "direction" }] : []));
+        const distanceX = signal(0, ...(ngDevMode ? [{ debugName: "distanceX" }] : []));
+        const distanceY = signal(0, ...(ngDevMode ? [{ debugName: "distanceY" }] : []));
+        let startX = 0;
+        let startY = 0;
+        listener.passive(target, 'touchstart', (e) => {
+            if (e.touches.length !== 1) {
+                return;
+            }
+            startX = e.touches[0].clientX;
+            startY = e.touches[0].clientY;
+            isSwiping.set(false);
+            direction.set('none');
+            distanceX.set(0);
+            distanceY.set(0);
+        });
+        listener.passive(target, 'touchmove', (e) => {
+            if (e.touches.length !== 1) {
+                return;
+            }
+            const dx = startX - e.touches[0].clientX;
+            const dy = startY - e.touches[0].clientY;
+            distanceX.set(dx);
+            distanceY.set(dy);
+            const absDx = Math.abs(dx);
+            const absDy = Math.abs(dy);
+            if (Math.max(absDx, absDy) >= threshold) {
+                if (!isSwiping()) {
+                    isSwiping.set(true);
+                }
+                if (absDx > absDy) {
+                    direction.set(dx > 0 ? 'left' : 'right');
+                }
+                else {
+                    direction.set(dy > 0 ? 'up' : 'down');
+                }
+            }
+        });
+        const onTouchEnd = () => {
+            isSwiping.set(false);
+        };
+        listener.passive(target, 'touchend', onTouchEnd);
+        listener.passive(target, 'touchcancel', onTouchEnd);
+        onDisconnect(target, () => {
+            isSwiping.set(false);
+            direction.set('none');
+            distanceX.set(0);
+            distanceY.set(0);
+        });
+        return {
+            isSwiping: isSwiping.asReadonly(),
+            direction: direction.asReadonly(),
+            distanceX: distanceX.asReadonly(),
+            distanceY: distanceY.asReadonly(),
+        };
+    });
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { swipe };
+//# sourceMappingURL=signality-core-elements-swipe.mjs.map

package/fesm2022/signality-core-elements-swipe.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-swipe.mjs","sources":["../../../projects/core/elements/swipe/index.ts","../../../projects/core/elements/swipe/signality-core-elements-swipe.ts"],"sourcesContent":["import { type Signal, signal } from '@angular/core';\nimport { constSignal, setupContext } from '@signality/core/internal';\nimport type { MaybeElementSignal, WithInjector } from '@signality/core/types';\nimport { listener } from '@signality/core/browser/listener';\nimport { onDisconnect } from '@signality/core/elements/on-disconnect';\n\n/**\n * Possible swipe direction values.\n */\nexport type SwipeDirection = 'up' | 'down' | 'left' | 'right' | 'none';\n\nexport interface SwipeOptions extends WithInjector {\n  /**\n   * Minimum distance in pixels before a swipe is recognized.\n   * @default 50\n   */\n  readonly threshold?: number;\n}\n\nexport interface SwipeRef {\n  /** Whether a swipe gesture is currently in progress. */\n  readonly isSwiping: Signal<boolean>;\n\n  /** Current swipe direction, or `'none'` if a threshold has not been exceeded. */\n  readonly direction: Signal<SwipeDirection>;\n\n  /** Horizontal distance from start (positive = swiped left). */\n  readonly distanceX: Signal<number>;\n\n  /** Vertical distance from start (positive = swiped up). */\n  readonly distanceY: Signal<number>;\n}\n\n/**\n * Reactive touch-swipe detection on an element.\n * Uses Touch Events API — for mouse/pen input use PointerSwipe instead.\n * Tracks single-finger swipe gestures and provides direction and distance signals.\n *\n * @param target - Element to detect swipe gestures on\n * @param options - Optional configuration including threshold and injector\n * @returns A SwipeRef with reactive signals for swipe state\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div #area>\n *       <p>Swiping: {{ sw.isSwiping() }}</p>\n *       <p>Direction: {{ sw.direction() }}</p>\n *     </div>\n *   `\n * })\n * class SwipeComponent {\n *   readonly area = viewChild<ElementRef>('area');\n *   readonly sw = swipe(this.area);\n * }\n * ```\n */\nexport function swipe(target: MaybeElementSignal<HTMLElement>, options?: SwipeOptions): SwipeRef {\n  const { runInContext } = setupContext(options?.injector, swipe);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return {\n        isSwiping: constSignal(false),\n        direction: constSignal('none'),\n        distanceX: constSignal(0),\n        distanceY: constSignal(0),\n      };\n    }\n\n    const threshold = options?.threshold ?? 50;\n\n    const isSwiping = signal(false);\n    const direction = signal<SwipeDirection>('none');\n    const distanceX = signal(0);\n    const distanceY = signal(0);\n\n    let startX = 0;\n    let startY = 0;\n\n    listener.passive(target, 'touchstart', (e: TouchEvent) => {\n      if (e.touches.length !== 1) {\n        return;\n      }\n\n      startX = e.touches[0].clientX;\n      startY = e.touches[0].clientY;\n\n      isSwiping.set(false);\n      direction.set('none');\n      distanceX.set(0);\n      distanceY.set(0);\n    });\n\n    listener.passive(target, 'touchmove', (e: TouchEvent) => {\n      if (e.touches.length !== 1) {\n        return;\n      }\n\n      const dx = startX - e.touches[0].clientX;\n      const dy = startY - e.touches[0].clientY;\n\n      distanceX.set(dx);\n      distanceY.set(dy);\n\n      const absDx = Math.abs(dx);\n      const absDy = Math.abs(dy);\n\n      if (Math.max(absDx, absDy) >= threshold) {\n        if (!isSwiping()) {\n          isSwiping.set(true);\n        }\n\n        if (absDx > absDy) {\n          direction.set(dx > 0 ? 'left' : 'right');\n        } else {\n          direction.set(dy > 0 ? 'up' : 'down');\n        }\n      }\n    });\n\n    const onTouchEnd = () => {\n      isSwiping.set(false);\n    };\n\n    listener.passive(target, 'touchend', onTouchEnd);\n    listener.passive(target, 'touchcancel', onTouchEnd);\n\n    onDisconnect(target, () => {\n      isSwiping.set(false);\n      direction.set('none');\n      distanceX.set(0);\n      distanceY.set(0);\n    });\n\n    return {\n      isSwiping: isSwiping.asReadonly(),\n      direction: direction.asReadonly(),\n      distanceX: distanceX.asReadonly(),\n      distanceY: distanceY.asReadonly(),\n    };\n  });\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/signality-core-elements-text-selection.mjs

@@ -0,0 +1,70 @@
+import { signal, computed } from '@angular/core';
+import { setupContext, NOOP_FN, constSignal, ALWAYS_FALSE_FN, createToken } from '@signality/core/internal';
+import { setupSync, listener } from '@signality/core/browser/listener';
+
+/**
+ * Signal-based wrapper around the [Selection API](https://developer.mozilla.org/en-US/docs/Web/API/Selection_API).
+ *
+ * @param options - Optional configuration including injector
+ * @returns A TextSelectionRef with reactive signals for text, ranges, rects, and selection
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <p>Select some text below:</p>
+ *     <div>Lorem ipsum dolor sit amet...</div>
+ *     @if (selection.text(); as text) {
+ *       <p>Selected: "{{ text }}"</p>
+ *     }
+ *   `
+ * })
+ * class TextSelectionComponent {
+ *   readonly selection = textSelection();
+ * }
+ * ```
+ */
+function textSelection(options) {
+    const { runInContext } = setupContext(options?.injector, textSelection);
+    return runInContext(({ isServer }) => {
+        if (isServer) {
+            return {
+                selection: constSignal(null),
+                text: constSignal(''),
+                ranges: constSignal([]),
+                rects: constSignal([]),
+                clear: NOOP_FN,
+            };
+        }
+        const selection = signal(window.getSelection(), ...(ngDevMode ? [{ debugName: "selection", equal: ALWAYS_FALSE_FN }] : [{ equal: ALWAYS_FALSE_FN }]));
+        const text = computed(() => selection()?.toString() ?? '', ...(ngDevMode ? [{ debugName: "text" }] : []));
+        const ranges = computed(() => {
+            const sel = selection();
+            return sel ? getRangesFromSelection(sel) : [];
+        }, ...(ngDevMode ? [{ debugName: "ranges" }] : []));
+        const rects = computed(() => ranges().map(range => range.getBoundingClientRect()), ...(ngDevMode ? [{ debugName: "rects" }] : []));
+        const clear = () => window.getSelection()?.removeAllRanges();
+        setupSync(() => {
+            listener(document, 'selectionchange', () => selection.set(window.getSelection()));
+        });
+        return {
+            selection: selection.asReadonly(),
+            text,
+            ranges,
+            rects,
+            clear,
+        };
+    });
+}
+const TEXT_SELECTION = /* @__PURE__ */ createToken(textSelection);
+function getRangesFromSelection(selection) {
+    const rangeCount = selection.rangeCount ?? 0;
+    return Array.from({ length: rangeCount }, (_, i) => selection.getRangeAt(i));
+}
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { TEXT_SELECTION, textSelection };
+//# sourceMappingURL=signality-core-elements-text-selection.mjs.map

package/fesm2022/signality-core-elements-text-selection.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-text-selection.mjs","sources":["../../../projects/core/elements/text-selection/index.ts","../../../projects/core/elements/text-selection/signality-core-elements-text-selection.ts"],"sourcesContent":["import { computed, type Signal, signal } from '@angular/core';\nimport {\n  ALWAYS_FALSE_FN,\n  constSignal,\n  createToken,\n  NOOP_FN,\n  setupContext,\n} from '@signality/core/internal';\nimport type { WithInjector } from '@signality/core/types';\nimport { listener, setupSync } from '@signality/core/browser/listener';\n\nexport type TextSelectionOptions = WithInjector;\n\nexport interface TextSelectionRef {\n  /** The selected text content */\n  readonly text: Signal<string>;\n\n  /** Array of Range objects */\n  readonly ranges: Signal<Range[]>;\n\n  /** Bounding rectangles of selection */\n  readonly rects: Signal<DOMRect[]>;\n\n  /** The raw Selection object */\n  readonly selection: Signal<Selection | null>;\n\n  /** Clear the current text selection */\n  readonly clear: () => void;\n}\n\n/**\n * Signal-based wrapper around the [Selection API](https://developer.mozilla.org/en-US/docs/Web/API/Selection_API).\n *\n * @param options - Optional configuration including injector\n * @returns A TextSelectionRef with reactive signals for text, ranges, rects, and selection\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <p>Select some text below:</p>\n *     <div>Lorem ipsum dolor sit amet...</div>\n *     @if (selection.text(); as text) {\n *       <p>Selected: \"{{ text }}\"</p>\n *     }\n *   `\n * })\n * class TextSelectionComponent {\n *   readonly selection = textSelection();\n * }\n * ```\n */\nexport function textSelection(options?: TextSelectionOptions): TextSelectionRef {\n  const { runInContext } = setupContext(options?.injector, textSelection);\n\n  return runInContext(({ isServer }) => {\n    if (isServer) {\n      return {\n        selection: constSignal(null),\n        text: constSignal(''),\n        ranges: constSignal([]),\n        rects: constSignal([]),\n        clear: NOOP_FN,\n      };\n    }\n\n    const selection = signal<Selection | null>(window.getSelection(), { equal: ALWAYS_FALSE_FN });\n    const text = computed(() => selection()?.toString() ?? '');\n    const ranges = computed<Range[]>(() => {\n      const sel = selection();\n      return sel ? getRangesFromSelection(sel) : [];\n    });\n    const rects = computed(() => ranges().map(range => range.getBoundingClientRect()));\n\n    const clear = () => window.getSelection()?.removeAllRanges();\n\n    setupSync(() => {\n      listener(document, 'selectionchange', () => selection.set(window.getSelection()));\n    });\n\n    return {\n      selection: selection.asReadonly(),\n      text,\n      ranges,\n      rects,\n      clear,\n    };\n  });\n}\n\nexport const TEXT_SELECTION = /* @__PURE__ */ createToken(textSelection);\n\nfunction getRangesFromSelection(selection: Selection): Range[] {\n  const rangeCount = selection.rangeCount ?? 0;\n  return Array.from({ length: rangeCount }, (_, i) => selection.getRangeAt(i));\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;AA8BA;;;;;;;;;;;;;;;;;;;;;AAqBG;AACG,SAAU,aAAa,CAAC,OAA8B,EAAA;AAC1D,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,aAAa,CAAC;AAEvE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;QACnC,IAAI,QAAQ,EAAE;YACZ,OAAO;AACL,gBAAA,SAAS,EAAE,WAAW,CAAC,IAAI,CAAC;AAC5B,gBAAA,IAAI,EAAE,WAAW,CAAC,EAAE,CAAC;AACrB,gBAAA,MAAM,EAAE,WAAW,CAAC,EAAE,CAAC;AACvB,gBAAA,KAAK,EAAE,WAAW,CAAC,EAAE,CAAC;AACtB,gBAAA,KAAK,EAAE,OAAO;aACf;QACH;AAEA,QAAA,MAAM,SAAS,GAAG,MAAM,CAAmB,MAAM,CAAC,YAAY,EAAE,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,WAAA,EAAI,KAAK,EAAE,eAAe,OAAxB,EAAE,KAAK,EAAE,eAAe,EAAE,GAAC;AAC7F,QAAA,MAAM,IAAI,GAAG,QAAQ,CAAC,MAAM,SAAS,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE,gDAAC;AAC1D,QAAA,MAAM,MAAM,GAAG,QAAQ,CAAU,MAAK;AACpC,YAAA,MAAM,GAAG,GAAG,SAAS,EAAE;AACvB,YAAA,OAAO,GAAG,GAAG,sBAAsB,CAAC,GAAG,CAAC,GAAG,EAAE;AAC/C,QAAA,CAAC,kDAAC;QACF,MAAM,KAAK,GAAG,QAAQ,CAAC,MAAM,MAAM,EAAE,CAAC,GAAG,CAAC,KAAK,IAAI,KAAK,CAAC,qBAAqB,EAAE,CAAC,EAAA,IAAA,SAAA,GAAA,CAAA,EAAA,SAAA,EAAA,OAAA,EAAA,CAAA,GAAA,EAAA,CAAA,CAAC;AAElF,QAAA,MAAM,KAAK,GAAG,MAAM,MAAM,CAAC,YAAY,EAAE,EAAE,eAAe,EAAE;QAE5D,SAAS,CAAC,MAAK;AACb,YAAA,QAAQ,CAAC,QAAQ,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,YAAY,EAAE,CAAC,CAAC;AACnF,QAAA,CAAC,CAAC;QAEF,OAAO;AACL,YAAA,SAAS,EAAE,SAAS,CAAC,UAAU,EAAE;YACjC,IAAI;YACJ,MAAM;YACN,KAAK;YACL,KAAK;SACN;AACH,IAAA,CAAC,CAAC;AACJ;AAEO,MAAM,cAAc,mBAAmB,WAAW,CAAC,aAAa;AAEvE,SAAS,sBAAsB,CAAC,SAAoB,EAAA;AAClD,IAAA,MAAM,UAAU,GAAG,SAAS,CAAC,UAAU,IAAI,CAAC;IAC5C,OAAO,KAAK,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,UAAU,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,SAAS,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;AAC9E;;AC/FA;;AAEG;;;;"}

package/fesm2022/signality-core-elements-window-size.mjs

@@ -0,0 +1,81 @@
+import { signal, afterNextRender } from '@angular/core';
+import { setupContext, constSignal, createToken } from '@signality/core/internal';
+import { listener } from '@signality/core/browser/listener';
+import { watcher } from '@signality/core/reactivity/watcher';
+import { mediaQuery } from '@signality/core/browser/media-query';
+
+/**
+ * Signal-based wrapper around the [Window API](https://developer.mozilla.org/en-US/docs/Web/API/Window) dimensions.
+ *
+ * @param options - Optional configuration including initialValue for SSR
+ * @returns A signal containing the current window dimensions
+ *
+ * @example
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <div>
+ *       Window: {{ size().width }} × {{ size().height }}px
+ *       @if (size().width < 768) {
+ *         <p>Mobile view</p>
+ *       }
+ *     </div>
+ *   `
+ * })
+ * class WindowSizeComponent {
+ *   readonly size = windowSize();
+ * }
+ * ```
+ */
+function windowSize(options) {
+    const { runInContext } = setupContext(options?.injector, windowSize);
+    return runInContext(({ isServer }) => {
+        const initialValue = options?.initialValue
+            ? {
+                width: options.initialValue.width,
+                height: options.initialValue.height,
+                innerWidth: options.initialValue.width,
+                innerHeight: options.initialValue.height,
+                outerWidth: options.initialValue.width,
+                outerHeight: options.initialValue.height,
+            }
+            : DEFAULT_VALUE;
+        if (isServer) {
+            return constSignal(initialValue);
+        }
+        const includeScrollbar = options?.includeScrollbar ?? false;
+        const size = signal(initialValue, options);
+        const update = () => {
+            const width = includeScrollbar ? window.innerWidth : document.documentElement.clientWidth;
+            const height = includeScrollbar ? window.innerHeight : document.documentElement.clientHeight;
+            size.set({
+                width,
+                height,
+                innerWidth: window.innerWidth,
+                innerHeight: window.innerHeight,
+                outerWidth: window.outerWidth,
+                outerHeight: window.outerHeight,
+            });
+        };
+        listener(window, 'resize', update);
+        watcher(mediaQuery('(orientation: portrait)'), update);
+        afterNextRender({ read: update });
+        return size.asReadonly();
+    });
+}
+const WINDOW_SIZE = /* @__PURE__ */ createToken(windowSize);
+const DEFAULT_VALUE = {
+    width: 0,
+    height: 0,
+    innerWidth: 0,
+    innerHeight: 0,
+    outerWidth: 0,
+    outerHeight: 0,
+};
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { WINDOW_SIZE, windowSize };
+//# sourceMappingURL=signality-core-elements-window-size.mjs.map

package/fesm2022/signality-core-elements-window-size.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements-window-size.mjs","sources":["../../../projects/core/elements/window-size/index.ts","../../../projects/core/elements/window-size/signality-core-elements-window-size.ts"],"sourcesContent":["import { afterNextRender, type CreateSignalOptions, type Signal, signal } from '@angular/core';\nimport { constSignal, createToken, setupContext } from '@signality/core/internal';\nimport type { WithInjector } from '@signality/core/types';\nimport { listener } from '@signality/core/browser/listener';\nimport { watcher } from '@signality/core/reactivity/watcher';\nimport { mediaQuery } from '@signality/core/browser/media-query';\n\nexport interface WindowSizeOptions extends CreateSignalOptions<WindowSizeValue>, WithInjector {\n  /**\n   * Include scrollbar in dimensions calculation.\n   * @default false\n   */\n  readonly includeScrollbar?: boolean;\n\n  /**\n   * Initial dimensions for SSR.\n   */\n  readonly initialValue?: Pick<WindowSizeValue, 'width' | 'height'>;\n}\n\nexport interface WindowSizeValue {\n  readonly width: number;\n  readonly height: number;\n  readonly innerWidth: number;\n  readonly innerHeight: number;\n  readonly outerWidth: number;\n  readonly outerHeight: number;\n}\n\n/**\n * Signal-based wrapper around the [Window API](https://developer.mozilla.org/en-US/docs/Web/API/Window) dimensions.\n *\n * @param options - Optional configuration including initialValue for SSR\n * @returns A signal containing the current window dimensions\n *\n * @example\n * ```typescript\n * @Component({\n *   template: `\n *     <div>\n *       Window: {{ size().width }} × {{ size().height }}px\n *       @if (size().width < 768) {\n *         <p>Mobile view</p>\n *       }\n *     </div>\n *   `\n * })\n * class WindowSizeComponent {\n *   readonly size = windowSize();\n * }\n * ```\n */\nexport function windowSize(options?: WindowSizeOptions): Signal<WindowSizeValue> {\n  const { runInContext } = setupContext(options?.injector, windowSize);\n\n  return runInContext(({ isServer }) => {\n    const initialValue: WindowSizeValue = options?.initialValue\n      ? {\n          width: options.initialValue.width,\n          height: options.initialValue.height,\n          innerWidth: options.initialValue.width,\n          innerHeight: options.initialValue.height,\n          outerWidth: options.initialValue.width,\n          outerHeight: options.initialValue.height,\n        }\n      : DEFAULT_VALUE;\n\n    if (isServer) {\n      return constSignal(initialValue);\n    }\n\n    const includeScrollbar = options?.includeScrollbar ?? false;\n\n    const size = signal<WindowSizeValue>(initialValue, options);\n\n    const update = () => {\n      const width = includeScrollbar ? window.innerWidth : document.documentElement.clientWidth;\n      const height = includeScrollbar ? window.innerHeight : document.documentElement.clientHeight;\n\n      size.set({\n        width,\n        height,\n        innerWidth: window.innerWidth,\n        innerHeight: window.innerHeight,\n        outerWidth: window.outerWidth,\n        outerHeight: window.outerHeight,\n      });\n    };\n\n    listener(window, 'resize', update);\n\n    watcher(mediaQuery('(orientation: portrait)'), update);\n\n    afterNextRender({ read: update });\n\n    return size.asReadonly();\n  });\n}\n\nexport const WINDOW_SIZE = /* @__PURE__ */ createToken(windowSize);\n\nconst DEFAULT_VALUE: WindowSizeValue = {\n  width: 0,\n  height: 0,\n  innerWidth: 0,\n  innerHeight: 0,\n  outerWidth: 0,\n  outerHeight: 0,\n};\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;AA6BA;;;;;;;;;;;;;;;;;;;;;;AAsBG;AACG,SAAU,UAAU,CAAC,OAA2B,EAAA;AACpD,IAAA,MAAM,EAAE,YAAY,EAAE,GAAG,YAAY,CAAC,OAAO,EAAE,QAAQ,EAAE,UAAU,CAAC;AAEpE,IAAA,OAAO,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,KAAI;AACnC,QAAA,MAAM,YAAY,GAAoB,OAAO,EAAE;AAC7C,cAAE;AACE,gBAAA,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK;AACjC,gBAAA,MAAM,EAAE,OAAO,CAAC,YAAY,CAAC,MAAM;AACnC,gBAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK;AACtC,gBAAA,WAAW,EAAE,OAAO,CAAC,YAAY,CAAC,MAAM;AACxC,gBAAA,UAAU,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK;AACtC,gBAAA,WAAW,EAAE,OAAO,CAAC,YAAY,CAAC,MAAM;AACzC;cACD,aAAa;QAEjB,IAAI,QAAQ,EAAE;AACZ,YAAA,OAAO,WAAW,CAAC,YAAY,CAAC;QAClC;AAEA,QAAA,MAAM,gBAAgB,GAAG,OAAO,EAAE,gBAAgB,IAAI,KAAK;QAE3D,MAAM,IAAI,GAAG,MAAM,CAAkB,YAAY,EAAE,OAAO,CAAC;QAE3D,MAAM,MAAM,GAAG,MAAK;AAClB,YAAA,MAAM,KAAK,GAAG,gBAAgB,GAAG,MAAM,CAAC,UAAU,GAAG,QAAQ,CAAC,eAAe,CAAC,WAAW;AACzF,YAAA,MAAM,MAAM,GAAG,gBAAgB,GAAG,MAAM,CAAC,WAAW,GAAG,QAAQ,CAAC,eAAe,CAAC,YAAY;YAE5F,IAAI,CAAC,GAAG,CAAC;gBACP,KAAK;gBACL,MAAM;gBACN,UAAU,EAAE,MAAM,CAAC,UAAU;gBAC7B,WAAW,EAAE,MAAM,CAAC,WAAW;gBAC/B,UAAU,EAAE,MAAM,CAAC,UAAU;gBAC7B,WAAW,EAAE,MAAM,CAAC,WAAW;AAChC,aAAA,CAAC;AACJ,QAAA,CAAC;AAED,QAAA,QAAQ,CAAC,MAAM,EAAE,QAAQ,EAAE,MAAM,CAAC;QAElC,OAAO,CAAC,UAAU,CAAC,yBAAyB,CAAC,EAAE,MAAM,CAAC;AAEtD,QAAA,eAAe,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;AAEjC,QAAA,OAAO,IAAI,CAAC,UAAU,EAAE;AAC1B,IAAA,CAAC,CAAC;AACJ;AAEO,MAAM,WAAW,mBAAmB,WAAW,CAAC,UAAU;AAEjE,MAAM,aAAa,GAAoB;AACrC,IAAA,KAAK,EAAE,CAAC;AACR,IAAA,MAAM,EAAE,CAAC;AACT,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,WAAW,EAAE,CAAC;AACd,IAAA,UAAU,EAAE,CAAC;AACb,IAAA,WAAW,EAAE,CAAC;CACf;;AC5GD;;AAEG;;;;"}

package/fesm2022/signality-core-elements.mjs

@@ -0,0 +1,21 @@
+export * from '@signality/core/elements/active-element';
+export * from '@signality/core/elements/dropzone';
+export * from '@signality/core/elements/element-focus';
+export * from '@signality/core/elements/element-focus-within';
+export * from '@signality/core/elements/element-hover';
+export * from '@signality/core/elements/element-size';
+export * from '@signality/core/elements/element-visibility';
+export * from '@signality/core/elements/on-click-outside';
+export * from '@signality/core/elements/on-long-press';
+export * from '@signality/core/elements/mouse-position';
+export * from '@signality/core/elements/pointer-swipe';
+export * from '@signality/core/elements/on-disconnect';
+export * from '@signality/core/elements/scroll-position';
+export * from '@signality/core/elements/swipe';
+export * from '@signality/core/elements/text-selection';
+export * from '@signality/core/elements/window-size';
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+//# sourceMappingURL=signality-core-elements.mjs.map

package/fesm2022/signality-core-elements.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"signality-core-elements.mjs","sources":["../../../projects/core/elements/signality-core-elements.ts"],"sourcesContent":["/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA;;AAEG"}