@rivetjs/cdk 0.0.0-stage → 0.1.0-alpha.1

package/number-field/index.jsx

@@ -0,0 +1,207 @@
+// Ported from react-aria-components `NumberField` (packages/react-aria-components/src/NumberField.tsx), Apache-2.0, © Adobe.
+// A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
+// Rivet:
+// - composed from parts like RAC: `<NumberField><Label/><Group><Button slot="decrement"/><Input/><Button slot="increment"/></Group>
+//   <Text slot="description"/><FieldError/></NumberField>`; the field provides `NumberFieldStateContext`, `GroupContext`,
+//   `InputContext`, `LabelContext`, `ButtonContext` (slots `increment` / `decrement`), `TextContext` (slots
+//   `description` / `errorMessage`) and `FieldErrorContext`.
+// - state = `createNumberFieldState` (`../number/number-field-state.tsx`: plain signals + free functions); behaviour =
+//   `./behaviour.tsx` (`numberFieldProps` bags with accessor values; the handlers are bound here from inline arrows, so
+//   typing / stepping / wheel resume with no code before the first interaction).
+// - locale from `useLocale()` (`I18nProvider`); `validationBehavior` defaults to the `Form` context, then `native`.
+// - description / error ids are slot ids (RA useField `useSlotId`): part of `aria-describedby` while the part renders.
+// - render props are accessors (`isInvalid()`, `isDisabled()`, …); `state` is the state object.
+// `render` (RAC DOMRenderProps): given, the attributes go to `render(attrs, NumberFieldRenderProps)` instead of the default `<div>` (the hidden form input stays a sibling). Deviations: the unmount cleanup of RA (spin timers / wheel listener) runs from the handlers
+// (press end, focus out), not on unmount.
+/*
+ * Copyright 2022 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+import { probeSlots, slotProbing } from "#server";
+import { createContext, untrack } from "@rivetjs/reactivity";
+import { hasLive, liveOptions } from "../utils/live.jsx";
+import { useLocale } from "../i18n/index.js";
+import { read } from "../state/form-validation.js";
+import { formValidationBehavior, formValidationErrors } from "../form/index.jsx";
+import { FieldErrorContext } from "../form/field-error.jsx";
+import { ButtonContext } from "../button/index.jsx";
+import { GroupContext } from "../group/index.jsx";
+import { InputContext } from "../input/index.jsx";
+import { LabelContext } from "../label/index.jsx";
+import { TextContext } from "../text/index.jsx";
+import { dataBool } from "../utils/data-attrs.jsx";
+import {} from "../utils/render.js";
+import { globalDOMProps } from "../utils/dom-props.js";
+import { Provider, contextProps, createSlot, createSlotId, removeDataAttributes, renderPropsOf, resumableContext, slotIdRef, } from "../slots/index.jsx";
+import { createNumberFieldState, numberValue } from "../number/number-field-state.jsx";
+import { numberFieldBeforeInput, numberFieldBlur, numberFieldButtonBlur, numberFieldButtonFocus, numberFieldChange, numberFieldCompositionEnd, numberFieldCompositionStart, numberFieldDecrementPressEnd, numberFieldDecrementPressStart, numberFieldDecrementPressUp, numberFieldFocus, numberFieldGroupFocusIn, numberFieldGroupFocusOut, numberFieldIncrementPressEnd, numberFieldIncrementPressStart, numberFieldIncrementPressUp, numberFieldInput, numberFieldInvalid, numberFieldKeyDown, numberFieldKeyUp, numberFieldPaste, numberFieldProps, } from "./behaviour.jsx";
+export * from "./behaviour.jsx";
+/** RAC `NumberFieldContext`. */
+export const NumberFieldContext = resumableContext(createContext(null, { id: "rv-number-field" }));
+/** RAC `NumberFieldStateContext`. */
+export const NumberFieldStateContext = resumableContext(createContext(null, { id: "rv-number-field-state" }));
+const OWNED = [
+    "render",
+    "style",
+    "id",
+    "onFocus",
+    "onBlur",
+    "onKeyDown",
+    "onKeyUp",
+    "onCopy",
+    "onCut",
+    "onPaste",
+    "onCompositionStart",
+    "onCompositionEnd",
+    "onCompositionUpdate",
+    "onSelect",
+    "onBeforeInput",
+    "onInput",
+];
+/**
+ * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
+ */
+export function NumberField(props) {
+    // Live props (P5): isDisabled / isReadOnly / isInvalid and a controlled `value` become accessors (state + behaviour
+    // read them with `read`), as min / max / step / formatOptions; class / style / children from a live view.
+    return untrack(() => numberField(props));
+}
+/** Live by default (LIVE-SWEEP): the state reads `minValue` / `maxValue` / `step` / `formatOptions` with `read` on
+ *  every use. Read once: `id`, `name`, `form`, `aria-label` / `aria-labelledby`, `increment` / `decrementAriaLabel`
+ *  (labelling ids), `autoFocus`, `defaultValue`, `validationBehavior`, `validate`, handlers. */
+const LIVE_KEYS = [
+    "isDisabled",
+    "isReadOnly",
+    "isRequired",
+    "isInvalid",
+    "minValue",
+    "maxValue",
+    "step",
+    "formatOptions",
+    "isWheelDisabled",
+    "aria-describedby",
+    "aria-details",
+    "aria-errormessage",
+];
+function numberField(props) {
+    // Inside another field's server slot probe (`probeSlots`): this field's subtree holds none of that field's slots.
+    if (slotProbing)
+        return null;
+    const [ctxMerged, ref] = contextProps(props, props.ref, NumberFieldContext);
+    const merged = hasLive(ctxMerged) ? liveOptions(ctxMerged, LIVE_KEYS, ["value"]) : ctxMerged;
+    const validationBehavior = formValidationBehavior(merged.validationBehavior);
+    const { locale } = useLocale();
+    const state = createNumberFieldState({ ...merged, locale, validationBehavior, validationErrors: formValidationErrors() });
+    const initialLabel = !merged["aria-label"] && !merged["aria-labelledby"];
+    const [labelRef, hasLabel] = createSlot(initialLabel);
+    // PROPS-CAPTURE: handlers capture `aria`; component-only keys (children / class / style / ref) stay out of it.
+    const { children: _children, class: _class, style: _style, ref: _ref, slot: _slot, ...hookProps } = removeDataAttributes(merged);
+    const aria = { ...hookProps, label: initialLabel, validationBehavior, locale };
+    const field = numberFieldProps(aria, state);
+    const { labelProps, groupProps, inputProps, incrementButtonProps, decrementButtonProps, descriptionProps, errorMessageProps, isInvalid, validationErrors, validationDetails, } = field;
+    // RA useField `useSlotId`: the description / error ids are described-by while their part renders (server: marked by the
+    // slot probe below; a resumed page never re-renders, so an id kept on expectation would be an IDREF to nothing).
+    const descriptionId = createSlotId(merged.id ? merged.id + "-description" : descriptionProps.id);
+    const errorId = createSlotId(errorMessageProps.id);
+    const extraDescribedBy = merged["aria-describedby"];
+    const labelledBy = inputProps["aria-labelledby"];
+    const ownLabelledBy = merged["aria-labelledby"];
+    const input = {
+        ...inputProps,
+        // Inline arrow in the literal (R2-wrapped; an arrow inside a conditional expression is not).
+        "aria-labelledby": () => (!initialLabel || hasLabel() ? labelledBy : ownLabelledBy),
+        "aria-describedby": () => [slotIdRef(descriptionId, false), slotIdRef(errorId, isInvalid()), read(extraDescribedBy)].filter(Boolean).join(" ") || undefined,
+        onInput: (e) => numberFieldInput(e, aria, state, field),
+        onChange: (e) => numberFieldChange(e, aria, state, field),
+        onInvalid: (e) => numberFieldInvalid(e, aria, state),
+        onFocus: (e) => numberFieldFocus(e, aria, state, field),
+        onBlur: (e) => numberFieldBlur(e, aria, state, field),
+        onKeyDown: (e) => numberFieldKeyDown(e, aria, state, field),
+        onKeyUp: (e) => numberFieldKeyUp(e, aria, state, field),
+        onPaste: (e) => numberFieldPaste(e, aria, state),
+        onBeforeInput: (e) => numberFieldBeforeInput(e, aria, state),
+        onCompositionStart: (e) => numberFieldCompositionStart(e, aria, state),
+        onCompositionEnd: (e) => numberFieldCompositionEnd(e, aria, state),
+    };
+    const group = {
+        ...groupProps,
+        "aria-disabled": groupProps["aria-disabled"],
+        "aria-invalid": groupProps["aria-invalid"],
+        onFocusIn: (e) => numberFieldGroupFocusIn(e, aria, state, field),
+        onFocusOut: (e) => numberFieldGroupFocusOut(e, aria, state, field),
+    };
+    const increment = {
+        ...incrementButtonProps,
+        onPressStart: (e) => numberFieldIncrementPressStart(e, aria, state, field),
+        onPressUp: (e) => numberFieldIncrementPressUp(e, aria, state, field),
+        onPressEnd: (e) => numberFieldIncrementPressEnd(e, aria, state, field),
+        onFocus: (e) => numberFieldButtonFocus(e, aria, state, field),
+        onBlur: (e) => numberFieldButtonBlur(e, aria, state, field),
+    };
+    const decrement = {
+        ...decrementButtonProps,
+        onPressStart: (e) => numberFieldDecrementPressStart(e, aria, state, field),
+        onPressUp: (e) => numberFieldDecrementPressUp(e, aria, state, field),
+        onPressEnd: (e) => numberFieldDecrementPressEnd(e, aria, state, field),
+        onFocus: (e) => numberFieldButtonFocus(e, aria, state, field),
+        onBlur: (e) => numberFieldButtonBlur(e, aria, state, field),
+    };
+    const isDisabled = merged.isDisabled;
+    const isReadOnly = merged.isReadOnly;
+    const isRequired = merged.isRequired;
+    const disabled = () => !!(typeof isDisabled === "function" ? isDisabled() : isDisabled);
+    const readOnly = () => !!(typeof isReadOnly === "function" ? isReadOnly() : isReadOnly);
+    const required = () => !!(typeof isRequired === "function" ? isRequired() : isRequired);
+    const values = { state, isDisabled: disabled, isInvalid, isRequired: required, isReadOnly: readOnly };
+    const rp = renderPropsOf(merged, { values, defaultClassName: "rv-NumberField" });
+    // Object-literal function value (R2 resumable symbol, as TextField's): with a plain const arrow the FieldError of
+    // a resumed NumberField never saw the validation.
+    const fieldError = {
+        validation: () => ({ isInvalid: isInvalid(), validationErrors: validationErrors(), validationDetails: validationDetails() }),
+    };
+    const dom = globalDOMProps(merged, OWNED);
+    const slot = merged.slot || undefined;
+    const name = merged.name;
+    const form = merged.form;
+    const providers = [
+        [NumberFieldStateContext, state],
+        [GroupContext, group],
+        [InputContext, input],
+        [LabelContext, { ...labelProps, ref: labelRef }],
+        [ButtonContext, { slots: { increment, decrement } }],
+        [TextContext, { slots: { description: { id: descriptionId }, errorMessage: { id: errorId } } }],
+        [FieldErrorContext, fieldError.validation],
+    ];
+    // Rivet (server): the input renders before its Description / FieldError: probe which slotted parts render (as Select).
+    if (typeof document === "undefined")
+        probeSlots(providers, () => rp.children());
+    if (merged.render)
+        return (<Provider values={providers}>
+        {merged.render({
+                ...dom,
+                ref: ref,
+                class: () => rp.class(),
+                style: () => rp.style(),
+                slot,
+                "data-disabled": () => dataBool(disabled()),
+                "data-readonly": () => dataBool(readOnly()),
+                "data-required": () => dataBool(required()),
+                "data-invalid": () => dataBool(isInvalid()),
+                children: () => rp.children(),
+            }, values)}
+        {name ? (<input type="hidden" name={name} form={form} value={isNaN(numberValue(state)) ? "" : String(numberValue(state))} disabled={disabled() || undefined}/>) : null}
+      </Provider>);
+    return (<Provider values={providers}>
+      <div {...dom} ref={ref} class={rp.class()} style={rp.style()} slot={slot} data-disabled={dataBool(disabled())} data-readonly={dataBool(readOnly())} data-required={dataBool(required())} data-invalid={dataBool(isInvalid())}>
+        {rp.children()}
+      </div>
+      {name ? (<input type="hidden" name={name} form={form} value={isNaN(numberValue(state)) ? "" : String(numberValue(state))} disabled={disabled() || undefined}/>) : null}
+    </Provider>);
+}

package/number-field/intl.d.ts

@@ -0,0 +1,2 @@
+import type { LocalizedStrings } from "../_adapters/intl.js";
+export declare const strings: LocalizedStrings;

package/number-field/intl.js

@@ -0,0 +1,36 @@
+export const strings = {
+    "ar-AE": { "decrease": "خفض {fieldLabel}", "increase": "زيادة {fieldLabel}", "numberField": "حقل رقمي" },
+    "bg-BG": { "decrease": "Намаляване {fieldLabel}", "increase": "Усилване {fieldLabel}", "numberField": "Номер на полето" },
+    "cs-CZ": { "decrease": "Snížit {fieldLabel}", "increase": "Zvýšit {fieldLabel}", "numberField": "Číselné pole" },
+    "da-DK": { "decrease": "Reducer {fieldLabel}", "increase": "Øg {fieldLabel}", "numberField": "Talfelt" },
+    "de-DE": { "decrease": "{fieldLabel} verringern", "increase": "{fieldLabel} erhöhen", "numberField": "Nummernfeld" },
+    "el-GR": { "decrease": "Μείωση {fieldLabel}", "increase": "Αύξηση {fieldLabel}", "numberField": "Πεδίο αριθμού" },
+    "en-US": { "decrease": "Decrease {fieldLabel}", "increase": "Increase {fieldLabel}", "numberField": "Number field" },
+    "es-ES": { "decrease": "Reducir {fieldLabel}", "increase": "Aumentar {fieldLabel}", "numberField": "Campo de número" },
+    "et-EE": { "decrease": "Vähenda {fieldLabel}", "increase": "Suurenda {fieldLabel}", "numberField": "Numbri väli" },
+    "fi-FI": { "decrease": "Vähennä {fieldLabel}", "increase": "Lisää {fieldLabel}", "numberField": "Numerokenttä" },
+    "fr-FR": { "decrease": "Diminuer {fieldLabel}", "increase": "Augmenter {fieldLabel}", "numberField": "Champ de nombre" },
+    "he-IL": { "decrease": "הקטן {fieldLabel}", "increase": "הגדל {fieldLabel}", "numberField": "שדה מספר" },
+    "hr-HR": { "decrease": "Smanji {fieldLabel}", "increase": "Povećaj {fieldLabel}", "numberField": "Polje broja" },
+    "hu-HU": { "decrease": "{fieldLabel} csökkentése", "increase": "{fieldLabel} növelése", "numberField": "Számmező" },
+    "it-IT": { "decrease": "Riduci {fieldLabel}", "increase": "Aumenta {fieldLabel}", "numberField": "Campo numero" },
+    "ja-JP": { "decrease": "{fieldLabel}を縮小", "increase": "{fieldLabel}を拡大", "numberField": "数値フィールド" },
+    "ko-KR": { "decrease": "{fieldLabel} 감소", "increase": "{fieldLabel} 증가", "numberField": "번호 필드" },
+    "lt-LT": { "decrease": "Sumažinti {fieldLabel}", "increase": "Padidinti {fieldLabel}", "numberField": "Numerio laukas" },
+    "lv-LV": { "decrease": "Samazināšana {fieldLabel}", "increase": "Palielināšana {fieldLabel}", "numberField": "Skaitļu lauks" },
+    "nb-NO": { "decrease": "Reduser {fieldLabel}", "increase": "Øk {fieldLabel}", "numberField": "Tallfelt" },
+    "nl-NL": { "decrease": "{fieldLabel} verlagen", "increase": "{fieldLabel} verhogen", "numberField": "Getalveld" },
+    "pl-PL": { "decrease": "Zmniejsz {fieldLabel}", "increase": "Zwiększ {fieldLabel}", "numberField": "Pole numeru" },
+    "pt-BR": { "decrease": "Diminuir {fieldLabel}", "increase": "Aumentar {fieldLabel}", "numberField": "Campo de número" },
+    "pt-PT": { "decrease": "Diminuir {fieldLabel}", "increase": "Aumentar {fieldLabel}", "numberField": "Campo numérico" },
+    "ro-RO": { "decrease": "Scădere {fieldLabel}", "increase": "Creștere {fieldLabel}", "numberField": "Câmp numeric" },
+    "ru-RU": { "decrease": "Уменьшение {fieldLabel}", "increase": "Увеличение {fieldLabel}", "numberField": "Числовое поле" },
+    "sk-SK": { "decrease": "Znížiť {fieldLabel}", "increase": "Zvýšiť {fieldLabel}", "numberField": "Číselné pole" },
+    "sl-SI": { "decrease": "Upadati {fieldLabel}", "increase": "Povečajte {fieldLabel}", "numberField": "Številčno polje" },
+    "sr-SP": { "decrease": "Smanji {fieldLabel}", "increase": "Povećaj {fieldLabel}", "numberField": "Polje broja" },
+    "sv-SE": { "decrease": "Minska {fieldLabel}", "increase": "Öka {fieldLabel}", "numberField": "Nummerfält" },
+    "tr-TR": { "decrease": "{fieldLabel} azalt", "increase": "{fieldLabel} arttır", "numberField": "Sayı alanı" },
+    "uk-UA": { "decrease": "Зменшити {fieldLabel}", "increase": "Збільшити {fieldLabel}", "numberField": "Поле номера" },
+    "zh-CN": { "decrease": "降低 {fieldLabel}", "increase": "提高 {fieldLabel}", "numberField": "数字字段" },
+    "zh-TW": { "decrease": "縮小 {fieldLabel}", "increase": "放大 {fieldLabel}", "numberField": "數字欄位" },
+};

package/observers/index.d.ts

@@ -0,0 +1,70 @@
+import { type NumberInput } from "../coercion/index.js";
+/** Subscription handle. */
+export interface Unsubscribable {
+    unsubscribe(): void;
+}
+/** Observer callbacks (RxJS `Partial<Observer>` subset). */
+export type ObserverLike<T> = ((value: T) => void) | {
+    next?: (value: T) => void;
+    complete?: () => void;
+};
+/** Minimal observable (the RxJS subset the CDK observers return). */
+export interface Observable<T> {
+    subscribe(observer?: ObserverLike<T>): Unsubscribable;
+}
+/** Hot multicast stream (RxJS `Subject` subset). */
+export declare class _Subject<T> {
+    observers: Set<{
+        next?: (value: T) => void;
+        complete?: () => void;
+    }>;
+    closed: boolean;
+    next(value: T): void;
+    complete(): void;
+    subscribe(observer?: ObserverLike<T>): Unsubscribable;
+}
+/** Angular `MutationObserverFactory` (a test seam): `null` when `MutationObserver` is unavailable. */
+export interface MutationObserverFactory {
+    create(callback: MutationCallback): Pick<MutationObserver, "observe" | "disconnect"> | null;
+}
+export declare const defaultMutationObserverFactory: MutationObserverFactory;
+/** Angular `ContentObserver`: one `MutationObserver` per element, shared and reference counted. */
+export interface ContentObserver {
+    /** Content changes of `element` (an element or a ref accessor), comment-only changes dropped. */
+    observe(element: Element | (() => Element | null | undefined)): Observable<MutationRecord[]>;
+    /** `ngOnDestroy`: disconnects every observer and completes every stream. */
+    destroy(): void;
+}
+export declare function createContentObserver(factory?: MutationObserverFactory): ContentObserver;
+/** The shared `ContentObserver` (Angular root service), created on first use. */
+export declare function contentObserver(): ContentObserver;
+/**
+ * `cdkObserveContent`: calls `onChange(records)` when the content of `element` changes (text and
+ * element children, subtree; comment-only changes ignored). `debounce` (ms, coerced like the input):
+ * one call per quiet period with the last records. Returns the cleanup (directive destroy / disabled).
+ */
+export declare function observeContent(element: Element | (() => Element | null | undefined), onChange: (records: MutationRecord[]) => void, options?: {
+    debounce?: NumberInput;
+    observer?: ContentObserver;
+}): () => void;
+/**
+ * Angular `SharedResizeObserver`: one `ResizeObserver` per box type for the whole app. `observe`
+ * returns the same observable for the same element and box while it has subscribers; a new
+ * subscriber gets the last entries right away.
+ */
+export interface SharedResizeObserver {
+    observe(target: Element, options?: ResizeObserverOptions): Observable<ResizeObserverEntry[]>;
+    destroy(): void;
+}
+export declare function createSharedResizeObserver(): SharedResizeObserver;
+/** The shared `SharedResizeObserver` (Angular root service), created on first use. */
+export declare function sharedResizeObserver(): SharedResizeObserver;
+/**
+ * react-aria `useResizeObserver`: calls `onResize()` when `element` resizes (`ResizeObserver`, or
+ * window `resize` where unsupported). Call from a client effect; returns the cleanup.
+ */
+export declare function useResizeObserver(options: {
+    ref: Element | (() => Element | null | undefined) | null | undefined;
+    box?: ResizeObserverBoxOptions;
+    onResize: () => void;
+}): () => void;

package/observers/index.js

@@ -0,0 +1,279 @@
+// Ported from angular/components src/cdk/observers (MIT, © Google LLC): `MutationObserverFactory`,
+// `ContentObserver`, `CdkObserveContent`, `SharedResizeObserver` (private API), and from react-spectrum
+// packages/react-aria/src/utils/useResizeObserver.ts (Apache-2.0, © Adobe).
+//
+// Rivet: services become factories (`createContentObserver`, `createSharedResizeObserver`; shared
+// instances via `contentObserver()` / `sharedResizeObserver()`); RxJS observables become a minimal
+// `Observable` with the same emission semantics. The `cdkObserveContent` directive is the function
+// `observeContent(element, onChange, { debounce })`, to call from a client effect; it returns the
+// cleanup (disabled = don't call it / call the cleanup). Nothing runs at import time or on the server.
+import { coerceElement, coerceNumberProperty } from "../coercion/index.js";
+function toObserver(observer) {
+    return typeof observer === "function" ? { next: observer } : (observer ?? {});
+}
+/** Hot multicast stream (RxJS `Subject` subset). */
+export class _Subject {
+    observers = new Set();
+    closed = false;
+    next(value) {
+        for (const observer of [...this.observers])
+            observer.next?.(value);
+    }
+    complete() {
+        this.closed = true;
+        const observers = [...this.observers];
+        this.observers.clear();
+        for (const observer of observers)
+            observer.complete?.();
+    }
+    subscribe(observer) {
+        const o = toObserver(observer);
+        if (this.closed) {
+            o.complete?.();
+            return { unsubscribe() { } };
+        }
+        this.observers.add(o);
+        return { unsubscribe: () => void this.observers.delete(o) };
+    }
+}
+// ---------------------------------------------------------------------------------------------------
+// ContentObserver
+/** Records the content observer ignores: comment additions / removals and comment text changes. */
+function shouldIgnoreRecord(record) {
+    // Comment `characterData` change (e.g. framework anchors).
+    if (record.type === "characterData" && record.target instanceof Comment)
+        return true;
+    // Only comments added / removed.
+    if (record.type === "childList") {
+        for (let i = 0; i < record.addedNodes.length; i++)
+            if (!(record.addedNodes[i] instanceof Comment))
+                return false;
+        for (let i = 0; i < record.removedNodes.length; i++)
+            if (!(record.removedNodes[i] instanceof Comment))
+                return false;
+        return true;
+    }
+    return false;
+}
+export const defaultMutationObserverFactory = {
+    create: (callback) => (typeof MutationObserver === "undefined" ? null : new MutationObserver(callback)),
+};
+export function createContentObserver(factory = defaultMutationObserverFactory) {
+    const observed = new Map();
+    const observeElement = (element) => {
+        let entry = observed.get(element);
+        if (!entry) {
+            const stream = new _Subject();
+            const observer = factory.create((mutations) => stream.next(mutations));
+            observer?.observe(element, { characterData: true, childList: true, subtree: true });
+            observed.set(element, (entry = { observer, stream, count: 1 }));
+        }
+        else {
+            entry.count++;
+        }
+        return entry.stream;
+    };
+    const cleanup = (element) => {
+        const entry = observed.get(element);
+        if (!entry)
+            return;
+        entry.observer?.disconnect();
+        entry.stream.complete();
+        observed.delete(element);
+    };
+    const unobserveElement = (element) => {
+        const entry = observed.get(element);
+        if (entry && !--entry.count)
+            cleanup(element);
+    };
+    return {
+        observe(elementOrRef) {
+            return {
+                subscribe(observer) {
+                    const element = coerceElement(elementOrRef);
+                    const o = toObserver(observer);
+                    const stream = observeElement(element);
+                    const subscription = stream.subscribe({
+                        next: (records) => {
+                            const kept = records.filter((record) => !shouldIgnoreRecord(record));
+                            if (kept.length)
+                                o.next?.(kept);
+                        },
+                        complete: () => o.complete?.(),
+                    });
+                    let closed = false;
+                    return {
+                        unsubscribe() {
+                            if (closed)
+                                return;
+                            closed = true;
+                            subscription.unsubscribe();
+                            unobserveElement(element);
+                        },
+                    };
+                },
+            };
+        },
+        destroy() {
+            for (const element of [...observed.keys()])
+                cleanup(element);
+        },
+    };
+}
+let sharedContentObserver;
+/** The shared `ContentObserver` (Angular root service), created on first use. */
+export function contentObserver() {
+    return (sharedContentObserver ??= createContentObserver());
+}
+/**
+ * `cdkObserveContent`: calls `onChange(records)` when the content of `element` changes (text and
+ * element children, subtree; comment-only changes ignored). `debounce` (ms, coerced like the input):
+ * one call per quiet period with the last records. Returns the cleanup (directive destroy / disabled).
+ */
+export function observeContent(element, onChange, options = {}) {
+    const debounce = options.debounce == null ? 0 : coerceNumberProperty(options.debounce);
+    let timer;
+    const subscription = (options.observer ?? contentObserver()).observe(element).subscribe((records) => {
+        if (!debounce)
+            return onChange(records);
+        clearTimeout(timer);
+        timer = setTimeout(() => onChange(records), debounce);
+    });
+    return () => {
+        clearTimeout(timer);
+        subscription.unsubscribe();
+    };
+}
+// ---------------------------------------------------------------------------------------------------
+// SharedResizeObserver
+const loopLimitExceededErrorHandler = (e) => {
+    if (typeof ErrorEvent !== "undefined" && e instanceof ErrorEvent && e.message === "ResizeObserver loop limit exceeded") {
+        console.error(`${e.message}. This could indicate a performance issue with your app. See https://github.com/WICG/resize-observer/blob/master/explainer.md#error-handling`);
+    }
+};
+/** One `ResizeObserver` for one box type; per-element observables replay the last entries. */
+class SingleBoxSharedResizeObserver {
+    _box;
+    _resize = new _Subject();
+    _resizeObserver;
+    _elementObservables = new Map();
+    _destroyed = false;
+    constructor(box) {
+        this._box = box;
+        if (typeof ResizeObserver !== "undefined")
+            this._resizeObserver = new ResizeObserver((entries) => this._resize.next(entries));
+    }
+    observe(target) {
+        let observable = this._elementObservables.get(target);
+        if (observable)
+            return observable;
+        // `shareReplay({bufferSize: 1, refCount: true})` over the filtered stream, `takeUntil(destroyed)`.
+        const subscribers = new Set();
+        let last;
+        let source;
+        const teardown = () => {
+            this._resizeObserver?.unobserve(target);
+            source?.unsubscribe();
+            source = undefined;
+            last = undefined;
+            if (this._elementObservables.get(target) === observable)
+                this._elementObservables.delete(target);
+        };
+        observable = {
+            subscribe: (observer) => {
+                const o = toObserver(observer);
+                if (this._destroyed) {
+                    o.complete?.();
+                    return { unsubscribe() { } };
+                }
+                subscribers.add(o);
+                if (last)
+                    o.next?.(last);
+                if (!source) {
+                    source = this._resize.subscribe({
+                        next: (entries) => {
+                            if (!entries.some((entry) => entry.target === target))
+                                return;
+                            last = entries;
+                            for (const s of [...subscribers])
+                                s.next?.(entries);
+                        },
+                        complete: () => {
+                            const all = [...subscribers];
+                            subscribers.clear();
+                            teardown();
+                            for (const s of all)
+                                s.complete?.();
+                        },
+                    });
+                    this._resizeObserver?.observe(target, { box: this._box });
+                }
+                return {
+                    unsubscribe: () => {
+                        if (!subscribers.delete(o))
+                            return;
+                        if (!subscribers.size)
+                            teardown();
+                    },
+                };
+            },
+        };
+        this._elementObservables.set(target, observable);
+        return observable;
+    }
+    destroy() {
+        this._destroyed = true;
+        this._resize.complete();
+        this._resizeObserver?.disconnect();
+        this._elementObservables.clear();
+    }
+}
+export function createSharedResizeObserver() {
+    const observers = new Map();
+    let cleanupErrorListener;
+    if (typeof ResizeObserver !== "undefined" && typeof window !== "undefined") {
+        window.addEventListener("error", loopLimitExceededErrorHandler);
+        cleanupErrorListener = () => window.removeEventListener("error", loopLimitExceededErrorHandler);
+    }
+    return {
+        observe(target, options) {
+            const box = options?.box || "content-box";
+            let observer = observers.get(box);
+            if (!observer)
+                observers.set(box, (observer = new SingleBoxSharedResizeObserver(box)));
+            return observer.observe(target);
+        },
+        destroy() {
+            for (const [, observer] of observers)
+                observer.destroy();
+            observers.clear();
+            cleanupErrorListener?.();
+        },
+    };
+}
+let sharedResize;
+/** The shared `SharedResizeObserver` (Angular root service), created on first use. */
+export function sharedResizeObserver() {
+    return (sharedResize ??= createSharedResizeObserver());
+}
+/**
+ * react-aria `useResizeObserver`: calls `onResize()` when `element` resizes (`ResizeObserver`, or
+ * window `resize` where unsupported). Call from a client effect; returns the cleanup.
+ */
+export function useResizeObserver(options) {
+    const element = typeof options.ref === "function" ? options.ref() : options.ref;
+    if (!element)
+        return () => { };
+    const win = element.ownerDocument.defaultView ?? window;
+    const onResize = () => options.onResize();
+    if (typeof win.ResizeObserver === "undefined") {
+        win.addEventListener("resize", onResize, false);
+        return () => win.removeEventListener("resize", onResize, false);
+    }
+    const observer = new win.ResizeObserver((entries) => {
+        if (entries.length)
+            onResize();
+    });
+    observer.observe(element, { box: options.box });
+    return () => observer.unobserve(element);
+}