ngwr 6.1.1 → 7.1.0

package/types/ngwr-clipboard.d.ts

@@ -0,0 +1,53 @@
+import * as i0 from '@angular/core';
+
+/** Outcome of a clipboard read or permission probe. */
+type WrClipboardPermission = 'granted' | 'denied' | 'prompt' | 'unsupported';
+
+/**
+ * Programmatic clipboard read / write.
+ *
+ * - **Write** uses `navigator.clipboard.writeText` with a hidden
+ *   `<textarea>` + `execCommand('copy')` fallback for non-secure contexts.
+ * - **Read** uses `navigator.clipboard.readText` (no fallback — older
+ *   browsers expose no equivalent).
+ * - **Available** / **permission** check what the current browser allows
+ *   so UI can disable the action when it would silently no-op.
+ *
+ * SSR-safe: every method short-circuits when there's no `document.defaultView`.
+ *
+ * @example
+ * ```ts
+ * const clip = inject(WrClipboard);
+ *
+ * await clip.write('Hello');           // resolves to true on success
+ * const text = await clip.read();      // string | null
+ * clip.available();                    // boolean
+ * await clip.permission('write');      // 'granted' | 'denied' | 'prompt' | 'unsupported'
+ * ```
+ *
+ * @see https://ngwr.dev/services/clipboard
+ */
+declare class WrClipboard {
+    private readonly doc;
+    /** Is any clipboard write path available (async API or `execCommand`)? */
+    available(): boolean;
+    /**
+     * Write text. Resolves to `true` on success, `false` on failure (denied
+     * permission, no clipboard, etc).
+     */
+    write(text: string): Promise<boolean>;
+    /**
+     * Read text from the clipboard. Returns `null` when unsupported or
+     * when the user denied the permission prompt.
+     */
+    read(): Promise<string | null>;
+    /** Probe the Permissions API for `clipboard-read` / `clipboard-write`. */
+    permission(name: 'read' | 'write'): Promise<WrClipboardPermission>;
+    /** Hidden-textarea + `execCommand('copy')` write. Synchronous, no permissions. */
+    private legacyWrite;
+    static ɵfac: i0.ɵɵFactoryDeclaration<WrClipboard, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<WrClipboard>;
+}
+
+export { WrClipboard };
+export type { WrClipboardPermission };

package/types/ngwr-collapse.d.ts

@@ -0,0 +1,139 @@
+import * as _angular_core from '@angular/core';
+import { InjectionToken, Signal } from '@angular/core';
+
+/**
+ * Expandable panel with a clickable header. Two-way binds the `open`
+ * state. When wrapped in `<wr-collapse-group accordion>`, only one
+ * sibling can be open at a time.
+ *
+ * @example
+ * ```html
+ * <wr-collapse title="Section title">
+ *   Section body…
+ * </wr-collapse>
+ *
+ * <wr-collapse-group accordion>
+ *   <wr-collapse title="A">…</wr-collapse>
+ *   <wr-collapse title="B">…</wr-collapse>
+ * </wr-collapse-group>
+ * ```
+ *
+ * @see https://ngwr.dev/components/collapse
+ */
+declare class WrCollapse {
+    /** Header text. */
+    readonly title: _angular_core.InputSignal<string>;
+    /** Two-way bindable open/closed state. @default false */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Disable interaction. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Identity used by the parent group when tracking children. @internal */
+    readonly id: {
+        name: string;
+    };
+    /** DOM id for the body element, referenced by header's `aria-controls`. */
+    protected readonly bodyId: string;
+    private readonly group;
+    private readonly destroyRef;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    /** Open the panel. */
+    openPanel(): void;
+    /** Close the panel. */
+    close(): void;
+    /** Toggle the panel. */
+    toggle(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCollapse, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCollapse, "wr-collapse", never, { "title": { "alias": "title"; "required": true; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "open": "openChange"; }, never, ["*"], true, never>;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Contract a collapse uses to talk to its parent `<wr-collapse-group>`.
+ *
+ * @internal
+ */
+interface WrCollapseGroupContext {
+    /** When true, only one child collapse may be open at a time. */
+    readonly accordion: Signal<boolean>;
+    /** Called by a child when it opens — closes siblings in accordion mode. */
+    notifyOpened(opener: object): void;
+    /** Register a child so the group can call `closeAll()` etc. */
+    register(member: {
+        close(): void;
+        readonly id: object;
+    }): void;
+    /** Unregister on destroy. */
+    unregister(memberId: object): void;
+}
+/**
+ * Token a `<wr-collapse>` injects to register itself with — and notify of
+ * open events — its parent `<wr-collapse-group>`. Drives the accordion
+ * behaviour when the group has `accordion` enabled.
+ *
+ * @internal
+ */
+declare const WR_COLLAPSE_GROUP: InjectionToken<WrCollapseGroupContext>;
+
+interface Member$1 {
+    close(): void;
+    readonly id: object;
+}
+/**
+ * Visual + behavioral grouping of `<wr-collapse>` children. When
+ * `accordion` is true, opening one child closes the others.
+ *
+ * @see https://ngwr.dev/components/collapse
+ */
+declare class WrCollapseGroup implements WrCollapseGroupContext {
+    /** When true, only one child may be open at a time. @default false */
+    readonly accordion: _angular_core.InputSignalWithTransform<boolean, any>;
+    private readonly members;
+    register(member: Member$1): void;
+    unregister(memberId: object): void;
+    notifyOpened(opener: object): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCollapseGroup, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCollapseGroup, "wr-collapse-group", never, { "accordion": { "alias": "accordion"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+interface Member {
+    close(): void;
+    readonly id: object;
+}
+/**
+ * Accordion — a `<wr-collapse>` container that enforces single-open
+ * behavior: opening a child closes its siblings.
+ *
+ * Use `<wr-collapse-group>` when you only need visual grouping without
+ * the mutually-exclusive open semantics.
+ *
+ * @example
+ * ```html
+ * <wr-accordion>
+ *   <wr-collapse title="Profile">…</wr-collapse>
+ *   <wr-collapse title="Security">…</wr-collapse>
+ *   <wr-collapse title="Notifications">…</wr-collapse>
+ * </wr-accordion>
+ * ```
+ *
+ * @see https://ngwr.dev/components/collapse
+ */
+declare class WrAccordion implements WrCollapseGroupContext {
+    /** Always behaves as an accordion. Provided for context-interface symmetry. */
+    readonly accordion: _angular_core.Signal<boolean>;
+    private readonly members;
+    register(member: Member): void;
+    unregister(memberId: object): void;
+    notifyOpened(opener: object): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrAccordion, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrAccordion, "wr-accordion", never, {}, {}, never, ["*"], true, never>;
+}
+
+export { WR_COLLAPSE_GROUP, WrAccordion, WrCollapse, WrCollapseGroup };
+export type { WrCollapseGroupContext };

package/types/ngwr-color-picker.d.ts

@@ -0,0 +1,302 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import { WrSegmentedOption } from 'ngwr/segmented';
+
+/**
+ * @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
+ */
+/**
+ * sRGB colour with straight alpha.
+ *
+ * - `r`, `g`, `b` ∈ `[0, 255]`
+ * - `a` ∈ `[0, 1]`
+ */
+interface WrRgb {
+    readonly r: number;
+    readonly g: number;
+    readonly b: number;
+    readonly a: number;
+}
+
+/**
+ * @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
+ */
+/**
+ * Hue / Saturation / Value with alpha.
+ *
+ * - `h` ∈ `[0, 360)` (degrees)
+ * - `s`, `v`, `a` ∈ `[0, 1]`
+ */
+interface WrHsv {
+    readonly h: number;
+    readonly s: number;
+    readonly v: number;
+    readonly a: number;
+}
+
+/**
+ * @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
+ */
+/**
+ * Hue / Saturation / Lightness with alpha.
+ *
+ * - `h` ∈ `[0, 360)` (degrees)
+ * - `s`, `l`, `a` ∈ `[0, 1]`
+ */
+interface WrHsl {
+    readonly h: number;
+    readonly s: number;
+    readonly l: number;
+    readonly a: number;
+}
+
+/**
+ * @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
+ */
+
+/**
+ * Convert sRGB to HSV. Preserves alpha.
+ */
+declare function rgbToHsv(rgb: WrRgb): WrHsv;
+
+/**
+ * @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
+ */
+
+/**
+ * Convert HSV to sRGB. Preserves alpha. Returns integer channels in `[0, 255]`.
+ */
+declare function hsvToRgb(hsv: WrHsv): WrRgb;
+
+/**
+ * @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
+ */
+
+/**
+ * Convert sRGB to HSL. Preserves alpha.
+ */
+declare function rgbToHsl(rgb: WrRgb): WrHsl;
+
+/**
+ * @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
+ */
+
+/**
+ * Convert HSL to sRGB. Preserves alpha. Returns integer channels in `[0, 255]`.
+ */
+declare function hslToRgb(hsl: WrHsl): WrRgb;
+
+/**
+ * @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
+ */
+
+/**
+ * Parse a CSS hex colour into {@link WrRgb}. Accepts 3, 4, 6, or 8 digit
+ * forms with or without a leading `#`. Returns `null` for anything that
+ * isn't a valid hex string.
+ *
+ * @example
+ * ```ts
+ * parseHex('#f00');       // { r: 255, g: 0, b: 0, a: 1 }
+ * parseHex('3969e2');     // { r: 57,  g: 105, b: 226, a: 1 }
+ * parseHex('#3969e2ff');  // { r: 57,  g: 105, b: 226, a: 1 }
+ * parseHex('nope');       // null
+ * ```
+ */
+declare function parseHex(input: string): WrRgb | null;
+
+/**
+ * @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
+ */
+
+/**
+ * Format a {@link WrRgb} as a CSS hex string with a leading `#`. When
+ * `withAlpha` is `true` the result is 8 digits (`#rrggbbaa`); otherwise
+ * 6 digits.
+ *
+ * @example
+ * ```ts
+ * toHex({ r: 57, g: 105, b: 226, a: 1 });         // '#3969e2'
+ * toHex({ r: 57, g: 105, b: 226, a: 0.5 }, true); // '#3969e280'
+ * ```
+ */
+declare function toHex(rgb: WrRgb, withAlpha?: boolean): string;
+
+/**
+ * @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
+ */
+/**
+ * Output format produced by `<wr-color-picker>` when emitting through its
+ * `ControlValueAccessor`:
+ *
+ * - `hex`  — `#3969e2` or `#3969e2ff` when alpha is enabled
+ * - `rgba` — `rgba(57, 105, 226, 0.5)`
+ * - `hsla` — `hsla(220, 73%, 56%, 0.5)`
+ */
+type WrColorFormat = 'hex' | 'rgba' | 'hsla';
+
+type Tab = 'hex' | 'rgb' | 'hsl';
+type Edges = 'sv' | 'hue' | 'alpha';
+/**
+ * Inline colour picker — HSV canvas, hue slider, optional alpha slider, HEX
+ * input. Implements `ControlValueAccessor`, so it binds with `[(ngModel)]`,
+ * `[formControl]`, or `formControlName`. Output is always a string in the
+ * format chosen via `[format]`.
+ *
+ * @example
+ * ```html
+ * <wr-color-picker [(ngModel)]="brandColor" />
+ * <wr-color-picker [(ngModel)]="brandColor" [alpha]="false" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/color-picker
+ */
+declare class WrColorPicker implements ControlValueAccessor {
+    /** Render the alpha slider and emit 8-digit hex / `rgba()`. @default true */
+    readonly alpha: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Disable interaction. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Output format produced through the CVA. @default 'hex' */
+    readonly format: _angular_core.InputSignal<WrColorFormat>;
+    /** Preset hex colours rendered as a clickable row beneath the inputs. Empty = no row. @default [] */
+    readonly swatches: _angular_core.InputSignal<readonly string[]>;
+    protected readonly h: _angular_core.WritableSignal<number>;
+    protected readonly s: _angular_core.WritableSignal<number>;
+    protected readonly v: _angular_core.WritableSignal<number>;
+    protected readonly a: _angular_core.WritableSignal<number>;
+    private readonly disabledFromCva;
+    protected readonly effectiveDisabled: _angular_core.Signal<boolean>;
+    /** RGB view of the current colour, computed lazily. */
+    protected readonly rgb: _angular_core.Signal<WrRgb>;
+    /** Canonical hex (used by the input field and by drag emits). */
+    protected readonly hex: _angular_core.Signal<string>;
+    /** SV canvas background colour (full-saturation hue). */
+    protected readonly hueCss: _angular_core.Signal<string>;
+    /** RGB string used for the alpha-slider gradient. */
+    protected readonly rgbCss: _angular_core.Signal<string>;
+    /** Thumb positions in % for each surface. */
+    protected readonly svThumbX: _angular_core.Signal<number>;
+    protected readonly svThumbY: _angular_core.Signal<number>;
+    protected readonly hueThumbX: _angular_core.Signal<number>;
+    protected readonly alphaThumbX: _angular_core.Signal<number>;
+    /** Mirror of the canonical hex, edited by the user via the input field. */
+    protected readonly hexInput: _angular_core.WritableSignal<string>;
+    /** Active tab in the input switcher. */
+    protected readonly activeTab: _angular_core.WritableSignal<Tab>;
+    /** HSL view of the current colour, computed lazily. */
+    protected readonly hslView: _angular_core.Signal<WrHsl>;
+    /** Alpha as integer percent for display in numeric tabs. */
+    protected readonly alphaPercent: _angular_core.Signal<number>;
+    protected readonly tabOptions: readonly WrSegmentedOption<Tab>[];
+    protected readonly classes: _angular_core.Signal<string>;
+    private onChange;
+    private onTouched;
+    writeValue(value: string | null): void;
+    registerOnChange(fn: (value: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
+    protected onPointerDown(event: PointerEvent, surface: Edges): void;
+    private updateFromEvent;
+    protected onHexInput(event: Event): void;
+    protected onHexBlur(): void;
+    private emit;
+    private emitWithoutHexSync;
+    protected onTabChange(tab: Tab | null): void;
+    protected onRgbChannel(channel: 'r' | 'g' | 'b', event: Event): void;
+    protected onHslChannel(channel: 'h' | 's' | 'l', event: Event): void;
+    protected onAlphaPercent(event: Event): void;
+    protected onSwatchClick(hex: string): void;
+    /** Push an RGB triple into the HSV source of truth (preserving the current alpha if the swap removes it). */
+    private applyRgb;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrColorPicker, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrColorPicker, "wr-color-picker", never, { "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/**
+ * Opens a `<wr-color-picker>` in an overlay anchored to the host element.
+ *
+ * Apply to any clickable element (typically a button). Two-way binds the
+ * current colour through `[(value)]`; forwards `alpha` / `format` /
+ * `swatches` / `disabled` to the inner picker.
+ *
+ * Same overlay isolation as the rest of the lib — uses {@link WR_OVERLAY},
+ * not CDK's root container.
+ *
+ * @example
+ * ```html
+ * <button wrColorPickerTrigger
+ *         [(value)]="brandColor"
+ *         [swatches]="palette">
+ *   <span class="swatch" [style.background]="brandColor"></span>
+ *   {{ brandColor }}
+ * </button>
+ * ```
+ *
+ * @see https://ngwr.dev/components/color-picker
+ */
+declare class WrColorPickerTrigger {
+    /** Two-way bindable colour value (hex string). */
+    readonly value: _angular_core.ModelSignal<string>;
+    /** Forwarded to the inner picker. @default true */
+    readonly alpha: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Forwarded to the inner picker. @default 'hex' */
+    readonly format: _angular_core.InputSignal<WrColorFormat>;
+    /** Forwarded to the inner picker. @default [] */
+    readonly swatches: _angular_core.InputSignal<readonly string[]>;
+    /** Disable the trigger entirely. @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Fires after the picker opens. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Fires after the picker closes. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    private readonly host;
+    private readonly overlay;
+    private readonly vcr;
+    private readonly scrollStrategies;
+    private readonly destroyRef;
+    private readonly isOpen;
+    private overlayRef;
+    constructor();
+    /** Toggle the picker. Open if closed, close if open. */
+    toggle(): void;
+    /** Open the picker. No-op if already open. */
+    open(): void;
+    /** Close the picker. No-op if already closed. */
+    close(): void;
+    private dispose;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrColorPickerTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<WrColorPickerTrigger, "[wrColorPickerTrigger]", never, { "value": { "alias": "value"; "required": false; "isSignal": true; }; "alpha": { "alias": "alpha"; "required": false; "isSignal": true; }; "format": { "alias": "format"; "required": false; "isSignal": true; }; "swatches": { "alias": "swatches"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+}
+
+export { WrColorPicker, WrColorPickerTrigger, hslToRgb, hsvToRgb, parseHex, rgbToHsl, rgbToHsv, toHex };
+export type { WrColorFormat, WrHsl, WrHsv, WrRgb };

package/types/ngwr-command-palette.d.ts

@@ -0,0 +1,113 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef } from '@angular/core';
+import { WrIconName } from 'ngwr/icon';
+
+/**
+ * @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
+ */
+
+/** A single action / page entry in {@link WrCommandPalette}. */
+interface WrCommandItem {
+    /** Stable identifier — used for `track $index` and option focus. */
+    readonly id: string;
+    /** Primary visible label. */
+    readonly label: string;
+    /** Secondary text shown under the label. */
+    readonly description?: string;
+    /** Optional group title (items with the same group are bucketed). */
+    readonly group?: string;
+    /** Optional icon shown on the left. */
+    readonly icon?: WrIconName;
+    /** Extra search terms — added to the haystack alongside label + description. */
+    readonly keywords?: readonly string[];
+    /** Visual hint shown on the right (e.g. `'⌘K'`, `'G H'`). */
+    readonly shortcut?: string;
+    /** Imperative callback fired when this item is picked. */
+    readonly action?: () => void;
+}
+/** Flat list of items grouped under a single header — convenience type. */
+interface WrCommandGroup {
+    readonly title: string;
+    readonly items: readonly WrCommandItem[];
+}
+
+interface Bucket {
+    readonly title: string | null;
+    readonly items: readonly WrCommandItem[];
+}
+/**
+ * `⌘K`-style command palette — a centred modal with a search input and
+ * filtered list of actions. Items can be grouped, have icons, descriptions,
+ * and visual shortcut hints.
+ *
+ * Drop one at the root of the app, pass it the list of commands, and bind
+ * a global hotkey (default `'mod+k'`). Use `[(open)]` for controlled
+ * visibility, or let it manage itself.
+ *
+ * @example
+ * ```html
+ * <wr-command-palette [items]="commands" trigger="mod+k" (picked)="onPicked($event)" />
+ * ```
+ *
+ * @see https://ngwr.dev/components/command-palette
+ */
+declare class WrCommandPalette {
+    /** Items shown in the palette. */
+    readonly items: _angular_core.InputSignal<readonly WrCommandItem[]>;
+    /** Controlled open state (two-way bindable). @default false */
+    readonly open: _angular_core.ModelSignal<boolean>;
+    /** Global hotkey that opens the palette. `null` disables auto-binding. @default 'mod+k' */
+    readonly trigger: _angular_core.InputSignal<string | null>;
+    /** Search input placeholder. Falls back to `commandPalette.placeholder`. */
+    readonly placeholder: _angular_core.InputSignal<string | null>;
+    /** Text shown when no items match. Falls back to `commandPalette.noResults`. */
+    readonly emptyText: _angular_core.InputSignal<string | null>;
+    protected readonly resolvedPlaceholder: _angular_core.Signal<string>;
+    protected readonly resolvedEmpty: _angular_core.Signal<string>;
+    /** Auto-close on `(picked)`. Set false to keep open. @default true */
+    readonly closeOnPick: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Fires when the user commits an item (Enter / click). */
+    readonly picked: _angular_core.OutputEmitterRef<WrCommandItem>;
+    protected readonly query: _angular_core.WritableSignal<string>;
+    protected readonly activeIndex: _angular_core.WritableSignal<number>;
+    protected readonly inputEl: _angular_core.Signal<ElementRef<HTMLInputElement> | undefined>;
+    protected readonly panelEl: _angular_core.Signal<ElementRef<HTMLElement> | undefined>;
+    /** Listbox id (referenced by the input's `aria-controls`). */
+    protected readonly listboxId: string;
+    /** @internal Build a stable option id for a given flat index. */
+    protected optionId(i: number): string;
+    /** Id of the active option for `aria-activedescendant`. */
+    protected readonly activeOptionId: _angular_core.Signal<string | null>;
+    private readonly hotkeys;
+    private readonly destroyRef;
+    private readonly focusTrapFactory;
+    private readonly isBrowser;
+    private bindingHandle;
+    private focusTrap;
+    private previouslyFocused;
+    /** Flat filtered list — what keyboard navigation walks. */
+    protected readonly filtered: _angular_core.Signal<readonly WrCommandItem[]>;
+    /** Grouped view — what the template renders. */
+    protected readonly buckets: _angular_core.Signal<readonly Bucket[]>;
+    constructor();
+    protected onQueryInput(event: Event): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    protected onBackdropClick(): void;
+    protected onItemClick(item: WrCommandItem, event: MouseEvent): void;
+    protected onItemHover(item: WrCommandItem): void;
+    /** Flat index of an item within the filtered list — for highlight checks. */
+    protected indexOf(item: WrCommandItem): number;
+    /** Open the palette. */
+    show(): void;
+    /** Close the palette. */
+    close(): void;
+    private commit;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCommandPalette, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCommandPalette, "wr-command-palette", never, { "items": { "alias": "items"; "required": false; "isSignal": true; }; "open": { "alias": "open"; "required": false; "isSignal": true; }; "trigger": { "alias": "trigger"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "emptyText": { "alias": "emptyText"; "required": false; "isSignal": true; }; "closeOnPick": { "alias": "closeOnPick"; "required": false; "isSignal": true; }; }, { "open": "openChange"; "picked": "picked"; }, never, never, true, never>;
+}
+
+export { WrCommandPalette };
+export type { WrCommandGroup, WrCommandItem };

package/types/ngwr-compare.d.ts

@@ -0,0 +1,55 @@
+import * as _angular_core from '@angular/core';
+
+/**
+ * Before/after comparison slider. Works with any content — project two
+ * pieces of markup with `wrCompareBefore` and `wrCompareAfter` attributes;
+ * the component stacks them in the same cell and clips the "after" side
+ * with a draggable divider.
+ *
+ * @example
+ * ```html
+ * <wr-compare [(position)]="pos">
+ *   <img wrCompareBefore src="before.jpg" alt="" />
+ *   <img wrCompareAfter src="after.jpg" alt="" />
+ * </wr-compare>
+ *
+ * <wr-compare orientation="vertical">
+ *   <pre wrCompareBefore>{{ oldCode }}</pre>
+ *   <pre wrCompareAfter>{{ newCode }}</pre>
+ * </wr-compare>
+ * ```
+ *
+ * @see https://ngwr.dev/components/compare
+ */
+declare class WrCompare {
+    /** Divider position as a percentage (0–100). Two-way bindable. @default 50 */
+    readonly position: _angular_core.ModelSignal<number>;
+    /**
+     * Divider direction:
+     * - `'horizontal'` — divider line is vertical, drags left/right.
+     * - `'vertical'`   — divider line is horizontal, drags up/down.
+     * @default 'horizontal'
+     */
+    readonly orientation: _angular_core.InputSignal<"horizontal" | "vertical">;
+    /** Show the round drag handle on the divider. @default true */
+    readonly showHandle: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Disable interaction (divider stays put). @default false */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, any>;
+    /** Initial position transform — accepts any number / numeric string. */
+    readonly minPosition: _angular_core.InputSignalWithTransform<number, unknown>;
+    readonly maxPosition: _angular_core.InputSignalWithTransform<number, unknown>;
+    private readonly host;
+    private dragging;
+    protected readonly classes: _angular_core.Signal<string>;
+    /** Clip path applied to the "after" layer so the divider reveals it. */
+    protected readonly clipPath: _angular_core.Signal<string>;
+    protected onPointerDown(event: PointerEvent): void;
+    protected onPointerMove(event: PointerEvent): void;
+    protected onPointerUp(event: PointerEvent): void;
+    protected onKeydown(event: KeyboardEvent): void;
+    private updateFromPointer;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<WrCompare, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<WrCompare, "wr-compare", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; "showHandle": { "alias": "showHandle"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "minPosition": { "alias": "minPosition"; "required": false; "isSignal": true; }; "maxPosition": { "alias": "maxPosition"; "required": false; "isSignal": true; }; }, { "position": "positionChange"; }, never, ["[wrCompareBefore]", "[wrCompareAfter]"], true, never>;
+}
+
+export { WrCompare };