ngwr 6.1.1 → 7.0.0

package/types/ngwr-knob.d.ts

@@ -0,0 +1,77 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+/**
+ * Radial dial input. CVA-backed `number | null` value clamped to
+ * `[min, max]`. Drag the indicator around the dial or use ←→ / ↑↓ to step.
+ *
+ * @example
+ * ```html
+ * <wr-knob [(ngModel)]="value" [min]="0" [max]="100" />
+ * <wr-knob [(ngModel)]="vol" suffix="%" valueColor="var(--wr-color-success)" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/knob
+ */
+declare class WrKnob implements ControlValueAccessor {
+    /** Minimum allowed value. @default 0 */
+    readonly min: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Maximum allowed value. @default 100 */
+    readonly max: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Step granularity. @default 1 */
+    readonly step: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Dial diameter in CSS pixels. @default 120 */
+    readonly size: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Stroke width of the dial arc, in CSS pixels. @default 8 */
+    readonly strokeWidth: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Track (unfilled) color. @default rgba(--wr-color-light, 0.6) */
+    readonly trackColor: _angular_core.InputSignal<string>;
+    /** Filled-arc color. @default var(--wr-color-primary) */
+    readonly valueColor: _angular_core.InputSignal<string>;
+    /** Show the value text in the center. @default true */
+    readonly showValue: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Optional suffix appended to the center text (e.g. `'%'`). */
+    readonly suffix: _angular_core.InputSignal<string>;
+    /** Read-only — disables interaction but keeps the visual. @default false */
+    readonly readonly: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Disable interaction. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly value: _angular_core.WritableSignal<number>;
+    private readonly disabledFromCva;
+    private dragging;
+    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
+    protected readonly interactive: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly cx = 50;
+    protected readonly cy = 50;
+    protected readonly radius: _angular_core.Signal<number>;
+    /** Ratio of the filled arc — `0` at min, `1` at max. */
+    protected readonly ratio: _angular_core.Signal<number>;
+    /** SVG path `d` for the background arc. */
+    protected readonly trackPath: _angular_core.Signal<string>;
+    /** SVG path `d` for the filled arc. */
+    protected readonly valuePath: _angular_core.Signal<string>;
+    /** Position of the handle dot — `{ x, y }` in viewBox units. */
+    protected readonly handlePos: _angular_core.Signal<{
+        x: number;
+        y: number;
+    }>;
+    private readonly host;
+    private onChange;
+    private onTouched;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number | null) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private updateFromPointer;
+    private commit;
+    private arcPath;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrKnob, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrKnob, "wr-knob", never, { "min": { "alias": "min"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "step": { "alias": "step"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "strokeWidth": { "alias": "strokeWidth"; "required": false; "isSignal": true; }; "trackColor": { "alias": "trackColor"; "required": false; "isSignal": true; }; "valueColor": { "alias": "valueColor"; "required": false; "isSignal": true; }; "showValue": { "alias": "showValue"; "required": false; "isSignal": true; }; "suffix": { "alias": "suffix"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrKnob };

package/types/ngwr-layout.d.ts

@@ -0,0 +1,89 @@
+import * as i0 from '@angular/core';
+
+/**
+ * Collapsible side panel. Lives inside a row `<wr-layout>` next to a
+ * `<wr-layout-content>`. Two-way `[(collapsed)]` controls width.
+ *
+ * @example
+ * ```html
+ * <wr-layout>
+ *   <wr-layout-sider [(collapsed)]="collapsed" width="14rem" collapsedWidth="3rem">
+ *     …
+ *   </wr-layout-sider>
+ *   <wr-layout-content>Main</wr-layout-content>
+ * </wr-layout>
+ * ```
+ */
+declare class WrLayoutSider {
+    /** Two-way bindable collapsed state. @default false */
+    readonly collapsed: i0.ModelSignal<boolean>;
+    /** Width when expanded. Any CSS length. @default '16rem' */
+    readonly width: i0.InputSignal<string>;
+    /** Width when collapsed. Any CSS length. `0` to fully hide. @default '4rem' */
+    readonly collapsedWidth: i0.InputSignal<string>;
+    /** Place the sider on the right edge instead of the left. @default false */
+    readonly reverse: i0.InputSignalWithTransform<boolean, any>;
+    /** Emits whenever `collapsed` changes (in addition to the two-way `[(collapsed)]`). */
+    readonly collapsedChanged: i0.OutputEmitterRef<boolean>;
+    protected readonly classes: i0.Signal<string>;
+    /** Imperative toggle helper — `[(collapsed)]` still works alongside this. */
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLayoutSider, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrLayoutSider, "wr-layout-sider", never, { "collapsed": { "alias": "collapsed"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "collapsedWidth": { "alias": "collapsedWidth"; "required": false; "isSignal": true; }; "reverse": { "alias": "reverse"; "required": false; "isSignal": true; }; }, { "collapsed": "collapsedChange"; "collapsedChanged": "collapsedChanged"; }, never, ["*"], true, never>;
+}
+
+/**
+ * App-shell layout container. Lays its children out as a flex column by
+ * default; switches to a row when a `<wr-layout-sider>` is among the
+ * direct children (so `header → [sider + content] → footer` falls into
+ * place automatically — same convention as ng-zorro / antd Layout).
+ *
+ * @example
+ * ```html
+ * <wr-layout>
+ *   <wr-layout-header>App bar</wr-layout-header>
+ *   <wr-layout>
+ *     <wr-layout-sider [(collapsed)]="collapsed">Sidebar</wr-layout-sider>
+ *     <wr-layout-content>Main</wr-layout-content>
+ *   </wr-layout>
+ *   <wr-layout-footer>© 2026</wr-layout-footer>
+ * </wr-layout>
+ * ```
+ *
+ * @see https://ngwr.dev/components/layout
+ */
+declare class WrLayout {
+    protected readonly siders: i0.Signal<readonly WrLayoutSider[]>;
+    protected readonly classes: i0.Signal<string>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLayout, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrLayout, "wr-layout", never, {}, {}, ["siders"], ["*"], true, never>;
+}
+
+/**
+ * Top bar of a {@link WrLayout}. Stretches across the parent;
+ * size and stickiness are app-controlled via CSS.
+ */
+declare class WrLayoutHeader {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLayoutHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrLayoutHeader, "wr-layout-header", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Main content area of a {@link WrLayout}. Flex-grows to fill
+ * remaining space.
+ */
+declare class WrLayoutContent {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLayoutContent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrLayoutContent, "wr-layout-content", never, {}, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Bottom bar of a {@link WrLayout}. Doesn't grow — sized by its
+ * children.
+ */
+declare class WrLayoutFooter {
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLayoutFooter, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrLayoutFooter, "wr-layout-footer", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { WrLayout, WrLayoutContent, WrLayoutFooter, WrLayoutHeader, WrLayoutSider };

package/types/ngwr-lightbox.d.ts

@@ -0,0 +1,50 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/**
+ * Image with click-to-zoom lightbox. The thumbnail is a plain `<img>`
+ * with whatever sizing/`object-fit` you give it; clicking opens a CDK
+ * overlay showing the full image, with Escape + close button + backdrop
+ * to dismiss.
+ *
+ * @example
+ * ```html
+ * <wr-lightbox
+ *   src="/photo.jpg"
+ *   alt="Mountain"
+ *   style="width: 16rem; height: 10rem; object-fit: cover"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/components/lightbox
+ */
+declare class WrLightbox {
+    /** Image source. */
+    readonly src: _angular_core.InputSignal<string>;
+    /** Alt text. Required for a11y; falls back to an empty string. @default '' */
+    readonly alt: _angular_core.InputSignal<string>;
+    /** Optional preview src — shown until the full image loads. */
+    readonly preview: _angular_core.InputSignal<string | null>;
+    /** Disable the click-to-zoom lightbox. @default false */
+    readonly disablePreview: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Caption shown under the full image in the lightbox. */
+    readonly caption: _angular_core.InputSignal<string>;
+    protected readonly open: _angular_core.WritableSignal<boolean>;
+    protected readonly loaded: _angular_core.WritableSignal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected readonly panelTpl: _angular_core.Signal<TemplateRef<unknown>>;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly destroyRef;
+    private overlayRef;
+    constructor();
+    protected onClick(): void;
+    protected onClose(): void;
+    protected onLoad(): void;
+    private openOverlay;
+    private closeOverlay;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLightbox, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLightbox, "wr-lightbox", never, { "src": { "alias": "src"; "required": true; "isSignal": true; }; "alt": { "alias": "alt"; "required": false; "isSignal": true; }; "preview": { "alias": "preview"; "required": false; "isSignal": true; }; "disablePreview": { "alias": "disablePreview"; "required": false; "isSignal": true; }; "caption": { "alias": "caption"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrLightbox };

package/types/ngwr-line-chart.d.ts

@@ -0,0 +1,90 @@
+import * as _angular_core from '@angular/core';
+
+interface WrLineSeries {
+    readonly label: string;
+    readonly data: readonly number[];
+    readonly color?: string;
+}
+
+/**
+ * Multi-series line chart with axes, gridlines, and a hover tooltip.
+ * SVG-only — no external dependency.
+ *
+ * @example
+ * ```html
+ * <wr-lineChart
+ *   [series]="[
+ *     { label: 'Visits', data: [12, 18, 9, 22, 30, 27, 35] },
+ *     { label: 'Signups', data: [3, 5, 4, 8, 11, 9, 14], color: 'var(--wr-color-success)' }
+ *   ]"
+ *   [xLabels]="['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']"
+ * />
+ * ```
+ *
+ * @see https://ngwr.dev/components/line-chart
+ */
+declare class WrLineChart {
+    readonly series: _angular_core.InputSignal<readonly WrLineSeries[]>;
+    /** Labels for the X axis (one per data point). */
+    readonly xLabels: _angular_core.InputSignal<readonly string[]>;
+    /** Chart pixel height. @default 240 */
+    readonly height: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Show gridlines + axis ticks. @default true */
+    readonly showGrid: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Show the legend above the chart. @default true */
+    readonly showLegend: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Show dots at each data point. @default true */
+    readonly showDots: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly vbW = 600;
+    protected readonly vbH = 300;
+    protected readonly padding: {
+        readonly top: 16;
+        readonly right: 16;
+        readonly bottom: 28;
+        readonly left: 36;
+    };
+    private readonly host;
+    /** Hovered point index (across all series) — null when no hover. */
+    protected readonly hoveredIndex: _angular_core.WritableSignal<number | null>;
+    protected readonly resolvedSeries: _angular_core.Signal<{
+        label: string;
+        data: readonly number[];
+        color: string;
+    }[]>;
+    protected readonly bounds: _angular_core.Signal<{
+        min: number;
+        max: number;
+    }>;
+    protected readonly pointCount: _angular_core.Signal<number>;
+    /** Y-axis tick marks (5 of them). */
+    protected readonly yTicks: _angular_core.Signal<{
+        value: number;
+        y: number;
+    }[]>;
+    protected readonly plotWidth: () => number;
+    protected readonly plotHeight: () => number;
+    /** Get the SVG path for a series. */
+    protected pathFor(series: {
+        data: readonly number[];
+    }): string;
+    protected pointX(index: number): number;
+    protected pointY(value: number): number;
+    protected readonly hoverPoints: _angular_core.Signal<{
+        label: string;
+        value: number;
+        color: string;
+        x: number;
+        y: number;
+    }[]>;
+    protected readonly hoverLabel: _angular_core.Signal<string>;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerLeave(): void;
+    protected formatTick(v: number): string;
+    protected readonly viewBox: _angular_core.Signal<string>;
+    protected readonly hostEl: HTMLElement;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrLineChart, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrLineChart, "wr-line-chart", never, { "series": { "alias": "series"; "required": false; "isSignal": true; }; "xLabels": { "alias": "xLabels"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "showGrid": { "alias": "showGrid"; "required": false; "isSignal": true; }; "showLegend": { "alias": "showLegend"; "required": false; "isSignal": true; }; "showDots": { "alias": "showDots"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrLineChart };
+export type { WrLineSeries };

package/types/ngwr-list.d.ts

@@ -0,0 +1,71 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Generic list container. Renders `<ul role="list">` with optional
+ * borders, dividers between items, and dense (compact) padding. Project
+ * `<wr-list-item>` children — they pick up the container's settings
+ * through CSS cascade, no DI needed.
+ *
+ * @example
+ * ```html
+ * <wr-list bordered dividers>
+ *   <wr-list-item>
+ *     <wr-icon ngProjectAs="[wrListItemLeading]" name="folder" />
+ *     Reports
+ *     <span ngProjectAs="[wrListItemTrailing]">12</span>
+ *   </wr-list-item>
+ *   <wr-list-item interactive (click)="open(item)">
+ *     Click anywhere on this row
+ *   </wr-list-item>
+ * </wr-list>
+ * ```
+ *
+ * @see https://ngwr.dev/components/list
+ */
+declare class WrList {
+    /** Wrap the list in a card-style border + radius. @default false */
+    readonly bordered: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Draw a thin divider between items. @default false */
+    readonly dividers: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Use compact padding on every item. @default false */
+    readonly dense: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Optional accessible label for the list. */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrList, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrList, "wr-list", never, { "bordered": { "alias": "bordered"; "required": false; "isSignal": true; }; "dividers": { "alias": "dividers"; "required": false; "isSignal": true; }; "dense": { "alias": "dense"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+/**
+ * Row inside `<wr-list>`. Three projection slots:
+ *
+ *  - `[wrListItemLeading]` — icon, avatar, status dot, etc.
+ *  - default — main label / body
+ *  - `[wrListItemTrailing]` — meta value, action button, chevron
+ *
+ * Set `interactive` to get hover, cursor, keyboard activation, and the
+ * appropriate ARIA role for click handling.
+ *
+ * @example
+ * ```html
+ * <wr-list-item>Plain row</wr-list-item>
+ *
+ * <wr-list-item interactive (click)="onPick(item)">
+ *   <wr-icon ngProjectAs="[wrListItemLeading]" name="folder" />
+ *   Reports
+ *   <span ngProjectAs="[wrListItemTrailing]">12</span>
+ * </wr-list-item>
+ * ```
+ */
+declare class WrListItem {
+    /** Adds hover / cursor styles + keyboard activation. @default false */
+    readonly interactive: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Visual disabled state. Suppresses hover + keyboard activation. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    protected readonly classes: _angular_core.Signal<string>;
+    protected onActivate(event: Event): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrListItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrListItem, "wr-list-item", never, { "interactive": { "alias": "interactive"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, {}, never, ["[wrListItemLeading]", "*", "[wrListItemTrailing]"], true, never>;
+}
+
+export { WrList, WrListItem };

package/types/ngwr-loading-bar.d.ts

@@ -0,0 +1,79 @@
+import * as i0 from '@angular/core';
+import { Signal } from '@angular/core';
+
+/** Public state of the loading bar. */
+type WrLoadingState = 'idle' | 'running' | 'completing';
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Singleton state machine for a top-of-page progress indicator. Driven
+ * by router events out of the box, plus a manual `start()` / `complete()`
+ * API for HTTP-interceptor-style usage.
+ *
+ * Pair with `<wr-loading-bar>` to render the bar at the top of your shell.
+ *
+ * @example
+ * ```ts
+ * // From an HttpInterceptor:
+ * const bar = inject(WrLoadingBar);
+ * bar.start();
+ * return next(req).pipe(finalize(() => bar.complete()));
+ * ```
+ *
+ * @see https://ngwr.dev/services/loading-bar
+ */
+declare class WrLoadingBar {
+    private readonly router;
+    /** Live count of pending "tasks" (manual + router). */
+    private readonly count;
+    /** Tween value `[0, 1]` — the bar's actual width. */
+    private readonly _progress;
+    readonly progress: Signal<number>;
+    readonly state: Signal<WrLoadingState>;
+    private timer;
+    constructor();
+    /** Reserve a slot. The bar starts trickling as long as `count > 0`. */
+    start(): void;
+    /** Release a slot. When the last one closes, the bar fast-forwards to 100% then resets. */
+    complete(): void;
+    /** Cancel without animating the bar to 100%. Resets immediately. */
+    reset(): void;
+    private beginTrickle;
+    private stopTrickle;
+    private finish;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLoadingBar, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrLoadingBar>;
+}
+
+/**
+ * Thin progress bar fixed to the top of the viewport.
+ *
+ * Drop one at the root of your shell. Reads the singleton {@link WrLoadingBar}
+ * — every router navigation drives it automatically; HTTP interceptors
+ * can call `start()` / `complete()` to add their own slots.
+ *
+ * @example
+ * ```html
+ * <wr-loading-bar />               <!-- top, primary color -->
+ * <wr-loading-bar color="#9b51e0" height="3px" />
+ * ```
+ */
+declare class WrLoadingBarComponent {
+    /** Bar colour. Defaults to the primary brand colour. */
+    readonly color: i0.InputSignal<string>;
+    /** Bar height. */
+    readonly height: i0.InputSignal<string>;
+    protected readonly bar: WrLoadingBar;
+    protected readonly active: i0.Signal<boolean>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrLoadingBarComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<WrLoadingBarComponent, "wr-loading-bar", never, { "color": { "alias": "color"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrLoadingBar, WrLoadingBarComponent };
+export type { WrLoadingState };

package/types/ngwr-marquee.d.ts

@@ -0,0 +1,95 @@
+import * as _angular_core from '@angular/core';
+import { TemplateRef } from '@angular/core';
+
+/** Image-driven marquee entry. */
+interface WrMarqueeImage {
+    readonly src: string;
+    readonly alt?: string;
+    readonly href?: string;
+    readonly title?: string;
+    readonly width?: number;
+    readonly height?: number;
+    readonly srcSet?: string;
+    readonly sizes?: string;
+}
+/** Template-driven marquee entry — `node` is rendered via `*ngTemplateOutlet`. */
+interface WrMarqueeNode {
+    readonly node: TemplateRef<unknown>;
+    readonly href?: string;
+    readonly ariaLabel?: string;
+    readonly title?: string;
+}
+type WrMarqueeItem = WrMarqueeImage | WrMarqueeNode;
+
+declare function isNode(item: WrMarqueeItem): item is WrMarqueeNode;
+/**
+ * Endless horizontal marquee. Auto-duplicates the items list until it
+ * covers the container width, then animates the track with a smooth
+ * rAF-driven scroll. Optional edge fades, scale-on-hover, and pause /
+ * variable-speed hover behaviour.
+ *
+ * @example
+ * ```html
+ * <wr-marquee
+ *   [items]="logos"
+ *   [speed]="80"
+ *   [gap]="48"
+ *   [itemHeight]="36"
+ *   [fadeOut]="true"
+ *   [scaleOnHover]="true"
+ *   [pauseOnHover]="true"
+ * />
+ * ```
+ *
+ * @see https://www.reactbits.dev/animations/logo-loop
+ */
+declare class WrMarquee {
+    /** Items to display. Each entry is either an image source or a TemplateRef node. */
+    readonly items: _angular_core.InputSignal<readonly WrMarqueeItem[]>;
+    /** Scroll speed in pixels per second. Negative reverses direction. @default 120 */
+    readonly speed: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Track direction. @default 'left' */
+    readonly direction: _angular_core.InputSignal<"left" | "right">;
+    /** Item height in pixels. @default 28 */
+    readonly itemHeight: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Gap between items in pixels. @default 32 */
+    readonly gap: _angular_core.InputSignalWithTransform<number, unknown>;
+    /** Pause the loop on hover. @default false */
+    readonly pauseOnHover: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Custom speed (px/s) when hovered. Overrides `pauseOnHover`. */
+    readonly hoverSpeed: _angular_core.InputSignalWithTransform<number | undefined, number | undefined>;
+    /** Apply edge fade-out gradients. @default false */
+    readonly fadeOut: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** CSS colour for the fade-out gradient. Defaults to the page background. */
+    readonly fadeOutColor: _angular_core.InputSignal<string>;
+    /** Scale individual items up on hover. @default false */
+    readonly scaleOnHover: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Accessible label for the carousel region. @default 'Marquee' */
+    readonly ariaLabel: _angular_core.InputSignal<string>;
+    private readonly trackEl;
+    private readonly host;
+    private readonly destroyRef;
+    private readonly isBrowser;
+    protected readonly seqWidth: _angular_core.WritableSignal<number>;
+    protected readonly copyCount: _angular_core.WritableSignal<number>;
+    protected readonly isHovered: _angular_core.WritableSignal<boolean>;
+    protected readonly copyIndices: _angular_core.Signal<number[]>;
+    /** Resolved hover speed: `hoverSpeed` overrides, else 0 when `pauseOnHover`, else live. */
+    private readonly effectiveHoverSpeed;
+    /** Target velocity in px/s, sign baked in. */
+    private readonly targetVelocity;
+    constructor();
+    protected onEnter(): void;
+    protected onLeave(): void;
+    protected isNodeItem: typeof isNode;
+    /** Read first sequence width + decide how many copies cover the viewport. */
+    private measure;
+    private watchResize;
+    private watchImageLoads;
+    private startLoop;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrMarquee, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrMarquee, "wr-marquee", never, { "items": { "alias": "items"; "required": true; "isSignal": true; }; "speed": { "alias": "speed"; "required": false; "isSignal": true; }; "direction": { "alias": "direction"; "required": false; "isSignal": true; }; "itemHeight": { "alias": "itemHeight"; "required": false; "isSignal": true; }; "gap": { "alias": "gap"; "required": false; "isSignal": true; }; "pauseOnHover": { "alias": "pauseOnHover"; "required": false; "isSignal": true; }; "hoverSpeed": { "alias": "hoverSpeed"; "required": false; "isSignal": true; }; "fadeOut": { "alias": "fadeOut"; "required": false; "isSignal": true; }; "fadeOutColor": { "alias": "fadeOutColor"; "required": false; "isSignal": true; }; "scaleOnHover": { "alias": "scaleOnHover"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+export { WrMarquee };
+export type { WrMarqueeImage, WrMarqueeItem, WrMarqueeNode };

package/types/ngwr-media.d.ts

@@ -0,0 +1,74 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, Signal, EnvironmentProviders } from '@angular/core';
+import * as ngwr_media from 'ngwr/media';
+
+/** Named breakpoint identifiers — match the SCSS `_breakpoints.scss` keys. */
+type WrBreakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+/** Map of breakpoint → minimum viewport width in pixels. */
+type WrBreakpointMap = Readonly<Record<WrBreakpoint, number>>;
+
+/** Defaults mirror `projects/lib/styles/_breakpoints.scss`. */
+declare const DEFAULT_WR_BREAKPOINTS: WrBreakpointMap;
+/** DI token for the breakpoint map — override via {@link provideWrMedia}. */
+declare const WR_BREAKPOINTS: InjectionToken<Readonly<Record<ngwr_media.WrBreakpoint, number>>>;
+
+/**
+ * Reactive viewport queries backed by signals.
+ *
+ * Each query subscribes lazily — `matches(...)` caches its signal so
+ * repeated calls with the same query share a single `matchMedia` listener.
+ * SSR-safe: on the server every signal stays `false`.
+ *
+ * @example
+ * ```ts
+ * private readonly media = inject(WrMedia);
+ * protected readonly isMd = this.media.matches('md');
+ * protected readonly isWide = this.media.matches('(min-width: 1200px)');
+ * ```
+ *
+ * @see https://ngwr.dev/services/media
+ */
+declare class WrMedia {
+    private readonly breakpoints;
+    private readonly destroyRef;
+    private readonly isBrowser;
+    /** Cache of query → signal so we share `matchMedia` listeners. */
+    private readonly cache;
+    /** Active breakpoint key — `xs` / `sm` / `md` / `lg` / `xl` / `xxl`. */
+    readonly current: Signal<WrBreakpoint>;
+    /**
+     * Returns a signal that tracks the given query.
+     *
+     * - Named breakpoint (`'md'`) → `(min-width: <px>)`.
+     * - Raw query (`'(prefers-color-scheme: dark)'`) → passed through unchanged.
+     */
+    matches(query: WrBreakpoint | (string & {})): Signal<boolean>;
+    private resolveQuery;
+    private createSignal;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrMedia, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrMedia>;
+}
+
+/**
+ * @license
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://github.com/thekhegay/ngwr/blob/main/LICENSE
+ */
+
+/**
+ * Override the breakpoint map used by {@link WrMedia}. Partial maps
+ * are merged with {@link DEFAULT_WR_BREAKPOINTS}, so you only need to list
+ * the breakpoints you want to change.
+ *
+ * @example
+ * ```ts
+ * bootstrapApplication(AppComponent, {
+ *   providers: [provideWrMedia({ md: 720, lg: 1024 })],
+ * });
+ * ```
+ */
+declare function provideWrMedia(breakpoints?: Partial<WrBreakpointMap>): EnvironmentProviders;
+
+export { DEFAULT_WR_BREAKPOINTS, WR_BREAKPOINTS, WrMedia, provideWrMedia };
+export type { WrBreakpoint, WrBreakpointMap };