@zerolith/browser 0.0.0-canary.20261107.g95d90a0

package/LICENSE

@@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed 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 CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/README.md

@@ -0,0 +1,37 @@
+# @zerolith/browser
+
+The page as signals: whether it is online and visible and the window's size, one signal each for the page, and an element's content box and whether it is in view, one per element, kept by observers that go with the enclosing owner.
+
+```ts
+import { computed, html, signal } from "zerolith";
+import { inView, online, size, windowSize } from "@zerolith/browser";
+
+const status = computed(() => (online().get() ? "Online" : "Offline"));
+const wide = computed(() => windowSize().get().width >= 960);
+
+function Panel()
+{
+    const root = signal<Element | undefined>(undefined);
+    const box = size(root);
+    const near = inView(root, { rootMargin: "200px" });
+    return html`<section ref=${root}>${computed(() => box.get().width)}px wide</section>`;
+}
+```
+
+- `online()`, `visible()`, and `windowSize()` follow the browser's events and are shared by the page.
+- `size(target)` and `inView(target, options?)` take an element or the signal a `ref` fills.
+- Each is still on the server: online, visible, and no size.
+
+The guide is on the [docs site](https://zerolith.dev/guide/browser/).
+
+Install with `npm install @zerolith/browser`. The API is frozen at 1.0: a breaking change comes only in a major, after a deprecation notice, and the [support policy](https://github.com/molexxxx/zerolith/blob/main/docs/policy/support.md) says how long a line gets fixes.
+
+## Documentation
+
+- The [browser guide](https://zerolith.dev/guide/browser/) explains it with examples that run as tests.
+- The [reference](https://zerolith.dev/reference/zerolith-browser/) lists every export, generated from the source.
+- New to zerolith? The [tutorial](https://zerolith.dev/learn/) builds an app step by step, and the [playground](https://zerolith.dev/playground/) runs code in the browser.
+
+## License
+
+Apache-2.0. See `LICENSE`.

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @zerolith/browser: the page as signals. Whether it is online and visible
+ * and the window's size are one signal each for the page; an element's
+ * size and whether it is in view are one per element, kept by observers
+ * that go with the enclosing owner.
+ */
+export type { Size } from "./size.js";
+export { size } from "./size.js";
+export type { InViewOptions } from "./inview.js";
+export { inView } from "./inview.js";
+export { online, visible, windowSize } from "./page.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,YAAY,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACtC,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AACjC,YAAY,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACjD,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/index.js

@@ -0,0 +1,4 @@
+export { size } from "./size.js";
+export { inView } from "./inview.js";
+export { online, visible, windowSize } from "./page.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAEjC,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC"}

package/dist/inview.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Whether an element is in view, as a signal kept by an
+ * IntersectionObserver.
+ */
+import { type ReadableSignal } from "zerolith";
+/** Options for `inView`. */
+export interface InViewOptions {
+    /** Space around the viewport that counts as in view, as an IntersectionObserver's `rootMargin`; "200px" starts loading a little ahead of the scroll. */
+    rootMargin?: string;
+    /** How much of the element must show, from 0 for any part of it to 1 for all of it. Defaults to 0. */
+    threshold?: number;
+}
+/**
+ * Whether `target` intersects the viewport, as a signal: the element
+ * itself, or the signal a `ref` fills, which follows the element it holds
+ * and is false while it holds none. An IntersectionObserver keeps it
+ * current; it stops with the enclosing owner when there is one and lives
+ * for the page otherwise. The signal is false until the observer first
+ * reports, and where there is no observer, as on the server. A threshold
+ * outside 0 to 1, or a root margin the browser refuses, fails with
+ * `in_view_options_invalid`.
+ */
+export declare function inView(target: Element | ReadableSignal<Element | undefined>, options?: InViewOptions): ReadableSignal<boolean>;
+//# sourceMappingURL=inview.d.ts.map

package/dist/inview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"inview.d.ts","sourceRoot":"","sources":["../src/inview.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAuB,KAAK,cAAc,EAAkE,MAAM,UAAU,CAAC;AAEpI,4BAA4B;AAC5B,MAAM,WAAW,aAAa;IAE1B,wJAAwJ;IACxJ,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,sGAAsG;IACtG,SAAS,CAAC,EAAE,MAAM,CAAC;CACtB;AAQD;;;;;;;;;GASG;AACH,wBAAgB,MAAM,CAAC,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,EAAE,OAAO,GAAE,aAAkB,GAAG,cAAc,CAAC,OAAO,CAAC,CAoDlI"}

package/dist/inview.js

@@ -0,0 +1,62 @@
+/**
+ * Whether an element is in view, as a signal kept by an
+ * IntersectionObserver.
+ */
+import { ZerolithError, diagnostic, effect, hasOwner, onDispose, signal } from "zerolith";
+/** The error for options an IntersectionObserver refuses. */
+function invalid(args) {
+    return new ZerolithError(diagnostic("in_view_options_invalid", "error", args));
+}
+/**
+ * Whether `target` intersects the viewport, as a signal: the element
+ * itself, or the signal a `ref` fills, which follows the element it holds
+ * and is false while it holds none. An IntersectionObserver keeps it
+ * current; it stops with the enclosing owner when there is one and lives
+ * for the page otherwise. The signal is false until the observer first
+ * reports, and where there is no observer, as on the server. A threshold
+ * outside 0 to 1, or a root margin the browser refuses, fails with
+ * `in_view_options_invalid`.
+ */
+export function inView(target, options = {}) {
+    const threshold = options.threshold ?? 0;
+    const value = signal(false);
+    if (typeof IntersectionObserver === "undefined") {
+        return value;
+    }
+    let current = target instanceof Element ? target : undefined;
+    const init = { threshold };
+    if (options.rootMargin !== undefined) {
+        init.rootMargin = options.rootMargin;
+    }
+    let observer;
+    try {
+        observer = new IntersectionObserver((entries) => {
+            const entry = entries.findLast((candidate) => candidate.target === current);
+            if (entry !== undefined) {
+                value.set(entry.isIntersecting);
+            }
+        }, init);
+    }
+    catch {
+        throw invalid({ threshold: String(threshold), rootMargin: options.rootMargin ?? "" });
+    }
+    if (hasOwner()) {
+        onDispose(() => observer.disconnect());
+    }
+    if (target instanceof Element) {
+        observer.observe(target);
+        return value;
+    }
+    effect(() => {
+        const element = target.get();
+        current = element;
+        value.set(false);
+        if (element === undefined) {
+            return undefined;
+        }
+        observer.observe(element);
+        return () => observer.unobserve(element);
+    });
+    return value;
+}
+//# sourceMappingURL=inview.js.map

package/dist/inview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inview.js","sourceRoot":"","sources":["../src/inview.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAA4C,aAAa,EAAE,UAAU,EAAE,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAWpI,6DAA6D;AAC7D,SAAS,OAAO,CAAC,IAAoB;IAEjC,OAAO,IAAI,aAAa,CAAC,UAAU,CAAC,yBAAyB,EAAE,OAAO,EAAE,IAAI,CAAC,CAAC,CAAC;AACnF,CAAC;AAED;;;;;;;;;GASG;AACH,MAAM,UAAU,MAAM,CAAC,MAAqD,EAAE,OAAO,GAAkB,EAAE;IAErG,MAAM,SAAS,GAAG,OAAO,CAAC,SAAS,IAAI,CAAC,CAAC;IACzC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,IAAI,OAAO,oBAAoB,KAAK,WAAW,EAC/C,CAAC;QACG,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,IAAI,OAAO,GAAwB,MAAM,YAAY,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS,CAAC;IAClF,MAAM,IAAI,GAA6B,EAAE,SAAS,EAAE,CAAC;IACrD,IAAI,OAAO,CAAC,UAAU,KAAK,SAAS,EACpC,CAAC;QACG,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,UAAU,CAAC;IACzC,CAAC;IACD,IAAI,QAA8B,CAAC;IACnC,IACA,CAAC;QACG,QAAQ,GAAG,IAAI,oBAAoB,CAAC,CAAC,OAAO,EAAE,EAAE;YAE5C,MAAM,KAAK,GAAG,OAAO,CAAC,QAAQ,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,MAAM,KAAK,OAAO,CAAC,CAAC;YAC5E,IAAI,KAAK,KAAK,SAAS,EACvB,CAAC;gBACG,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,cAAc,CAAC,CAAC;YACpC,CAAC;QACL,CAAC,EAAE,IAAI,CAAC,CAAC;IACb,CAAC;IACD,MACA,CAAC;QACG,MAAM,OAAO,CAAC,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,CAAC,EAAE,UAAU,EAAE,OAAO,CAAC,UAAU,IAAI,EAAE,EAAE,CAAC,CAAC;IAC1F,CAAC;IACD,IAAI,QAAQ,EAAE,EACd,CAAC;QACG,SAAS,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC,CAAC;IAC3C,CAAC;IACD,IAAI,MAAM,YAAY,OAAO,EAC7B,CAAC;QACG,QAAQ,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;QACzB,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,MAAM,CAAC,GAAG,EAAE;QAER,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,EAAE,CAAC;QAC7B,OAAO,GAAG,OAAO,CAAC;QAClB,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;QACjB,IAAI,OAAO,KAAK,SAAS,EACzB,CAAC;YACG,OAAO,SAAS,CAAC;QACrB,CAAC;QACD,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;QAC1B,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/dist/page.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The page's own state as signals shared by everyone who asks: whether it
+ * is online, whether it is visible, and the window's size.
+ */
+import { type ReadableSignal } from "zerolith";
+import { type Size } from "./size.js";
+/** Whether the browser is online, as `navigator.onLine` says, following the `online` and `offline` events; one signal for the page, started when first asked for, and true where there is no browser. */
+export declare function online(): ReadableSignal<boolean>;
+/** Whether the page is visible, following `visibilitychange`; one signal for the page, started when first asked for, and true where there is no document. */
+export declare function visible(): ReadableSignal<boolean>;
+/** The window's inner size, following `resize`, which a browser fires once per frame; one signal for the page, started when first asked for, and no size where there is no window. */
+export declare function windowSize(): ReadableSignal<Size>;
+//# sourceMappingURL=page.d.ts.map

package/dist/page.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.d.ts","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,KAAK,cAAc,EAAU,MAAM,UAAU,CAAC;AACvD,OAAO,EAAQ,KAAK,IAAI,EAAY,MAAM,WAAW,CAAC;AAqBtD,yMAAyM;AACzM,wBAAgB,MAAM,IAAI,cAAc,CAAC,OAAO,CAAC,CAIhD;AAED,6JAA6J;AAC7J,wBAAgB,OAAO,IAAI,cAAc,CAAC,OAAO,CAAC,CAIjD;AAED,sLAAsL;AACtL,wBAAgB,UAAU,IAAI,cAAc,CAAC,IAAI,CAAC,CAIjD"}

package/dist/page.js

@@ -0,0 +1,36 @@
+/**
+ * The page's own state as signals shared by everyone who asks: whether it
+ * is online, whether it is visible, and the window's size.
+ */
+import { signal } from "zerolith";
+import { NONE, sameSize } from "./size.js";
+let onlineSignal;
+let visibleSignal;
+let windowSizeSignal;
+/** A signal of what `read` gives, read again on each of `events` from `target`; a still signal of `still` where there is no target, as on the server. */
+function following(target, events, read, still, equals) {
+    if (target === undefined) {
+        return signal(still);
+    }
+    const value = signal(read(), equals === undefined ? undefined : { equals });
+    for (const event of events) {
+        target.addEventListener(event, () => value.set(read()));
+    }
+    return value;
+}
+/** Whether the browser is online, as `navigator.onLine` says, following the `online` and `offline` events; one signal for the page, started when first asked for, and true where there is no browser. */
+export function online() {
+    onlineSignal ??= following(typeof window === "undefined" ? undefined : window, ["online", "offline"], () => navigator.onLine, true);
+    return onlineSignal;
+}
+/** Whether the page is visible, following `visibilitychange`; one signal for the page, started when first asked for, and true where there is no document. */
+export function visible() {
+    visibleSignal ??= following(typeof document === "undefined" ? undefined : document, ["visibilitychange"], () => document.visibilityState === "visible", true);
+    return visibleSignal;
+}
+/** The window's inner size, following `resize`, which a browser fires once per frame; one signal for the page, started when first asked for, and no size where there is no window. */
+export function windowSize() {
+    windowSizeSignal ??= following(typeof window === "undefined" ? undefined : window, ["resize"], () => ({ width: window.innerWidth, height: window.innerHeight }), NONE, sameSize);
+    return windowSizeSignal;
+}
+//# sourceMappingURL=page.js.map

package/dist/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sourceRoot":"","sources":["../src/page.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAuB,MAAM,EAAE,MAAM,UAAU,CAAC;AACvD,OAAO,EAAE,IAAI,EAAa,QAAQ,EAAE,MAAM,WAAW,CAAC;AAEtD,IAAI,YAAiD,CAAC;AACtD,IAAI,aAAkD,CAAC;AACvD,IAAI,gBAAkD,CAAC;AAEvD,yJAAyJ;AACzJ,SAAS,SAAS,CAAI,MAA+B,EAAE,MAAyB,EAAE,IAAa,EAAE,KAAQ,EAAE,MAAgC;IAEvI,IAAI,MAAM,KAAK,SAAS,EACxB,CAAC;QACG,OAAO,MAAM,CAAC,KAAK,CAAC,CAAC;IACzB,CAAC;IACD,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,CAAC;IAC5E,KAAK,MAAM,KAAK,IAAI,MAAM,EAC1B,CAAC;QACG,MAAM,CAAC,gBAAgB,CAAC,KAAK,EAAE,GAAG,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,EAAE,CAAC,CAAC,CAAC;IAC5D,CAAC;IACD,OAAO,KAAK,CAAC;AACjB,CAAC;AAED,yMAAyM;AACzM,MAAM,UAAU,MAAM;IAElB,YAAY,KAAK,SAAS,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,MAAM,EAAE,IAAI,CAAC,CAAC;IACpI,OAAO,YAAY,CAAC;AACxB,CAAC;AAED,6JAA6J;AAC7J,MAAM,UAAU,OAAO;IAEnB,aAAa,KAAK,SAAS,CAAC,OAAO,QAAQ,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAAE,CAAC,kBAAkB,CAAC,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,eAAe,KAAK,SAAS,EAAE,IAAI,CAAC,CAAC;IAC9J,OAAO,aAAa,CAAC;AACzB,CAAC;AAED,sLAAsL;AACtL,MAAM,UAAU,UAAU;IAEtB,gBAAgB,KAAK,SAAS,CAAC,OAAO,MAAM,KAAK,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,CAAC,UAAU,EAAE,MAAM,EAAE,MAAM,CAAC,WAAW,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,CAAC;IACjL,OAAO,gBAAgB,CAAC;AAC5B,CAAC"}

package/dist/production/index.js

@@ -0,0 +1,2 @@
+export{size}from"./size.js";export{inView}from"./inview.js";export{online,visible,windowSize}from"./page.js";
+//# sourceMappingURL=index.js.map

package/dist/production/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../src/index.ts"],"sourcesContent":["/**\n * @zerolith/browser: the page as signals. Whether it is online and visible\n * and the window's size are one signal each for the page; an element's\n * size and whether it is in view are one per element, kept by observers\n * that go with the enclosing owner.\n */\nexport type { Size } from \"./size.js\";\nexport { size } from \"./size.js\";\nexport type { InViewOptions } from \"./inview.js\";\nexport { inView } from \"./inview.js\";\nexport { online, visible, windowSize } from \"./page.js\";\n"],"names":[],"mappings":"AAOA,OAAS,SAAY,YAErB,OAAS,WAAc,cACvB,OAAS,OAAQ,QAAS,eAAkB"}

package/dist/production/inview.js

@@ -0,0 +1,2 @@
+import{ZerolithError as e,diagnostic as t,effect as n,hasOwner as r,onDispose as i,signal as a}from"zerolith";function o(n){return new e(t(`in_view_options_invalid`,`error`,n))}export function inView(e,t={}){let s=t.threshold??0,c=a(!1);if(typeof IntersectionObserver>`u`)return c;let l=e instanceof Element?e:void 0,u={threshold:s};t.rootMargin!==void 0&&(u.rootMargin=t.rootMargin);let d;try{d=new IntersectionObserver(e=>{let t=e.findLast(e=>e.target===l);t!==void 0&&c.set(t.isIntersecting)},u)}catch{throw o({threshold:String(s),rootMargin:t.rootMargin??``})}return r()&&i(()=>d.disconnect()),e instanceof Element?(d.observe(e),c):(n(()=>{let t=e.get();if(l=t,c.set(!1),t!==void 0)return d.observe(t),()=>d.unobserve(t)}),c)}
+//# sourceMappingURL=inview.js.map

package/dist/production/inview.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"inview.js","sources":["../../src/inview.ts"],"sourcesContent":["/**\n * Whether an element is in view, as a signal kept by an\n * IntersectionObserver.\n */\nimport { type DiagnosticArgs, type ReadableSignal, ZerolithError, diagnostic, effect, hasOwner, onDispose, signal } from \"zerolith\";\n\n/** Options for `inView`. */\nexport interface InViewOptions\n{\n    /** Space around the viewport that counts as in view, as an IntersectionObserver's `rootMargin`; \"200px\" starts loading a little ahead of the scroll. */\n    rootMargin?: string;\n    /** How much of the element must show, from 0 for any part of it to 1 for all of it. Defaults to 0. */\n    threshold?: number;\n}\n\n/** The error for options an IntersectionObserver refuses. */\nfunction invalid(args: DiagnosticArgs): ZerolithError\n{\n    return new ZerolithError(diagnostic(\"in_view_options_invalid\", \"error\", args));\n}\n\n/**\n * Whether `target` intersects the viewport, as a signal: the element\n * itself, or the signal a `ref` fills, which follows the element it holds\n * and is false while it holds none. An IntersectionObserver keeps it\n * current; it stops with the enclosing owner when there is one and lives\n * for the page otherwise. The signal is false until the observer first\n * reports, and where there is no observer, as on the server. A threshold\n * outside 0 to 1, or a root margin the browser refuses, fails with\n * `in_view_options_invalid`.\n */\nexport function inView(target: Element | ReadableSignal<Element | undefined>, options: InViewOptions = {}): ReadableSignal<boolean>\n{\n    const threshold = options.threshold ?? 0;\n    const value = signal(false);\n    if (typeof IntersectionObserver === \"undefined\")\n    {\n        return value;\n    }\n    let current: Element | undefined = target instanceof Element ? target : undefined;\n    const init: IntersectionObserverInit = { threshold };\n    if (options.rootMargin !== undefined)\n    {\n        init.rootMargin = options.rootMargin;\n    }\n    let observer: IntersectionObserver;\n    try\n    {\n        observer = new IntersectionObserver((entries) =>\n        {\n            const entry = entries.findLast((candidate) => candidate.target === current);\n            if (entry !== undefined)\n            {\n                value.set(entry.isIntersecting);\n            }\n        }, init);\n    }\n    catch\n    {\n        throw invalid({ threshold: String(threshold), rootMargin: options.rootMargin ?? \"\" });\n    }\n    if (hasOwner())\n    {\n        onDispose(() => observer.disconnect());\n    }\n    if (target instanceof Element)\n    {\n        observer.observe(target);\n        return value;\n    }\n    effect(() =>\n    {\n        const element = target.get();\n        current = element;\n        value.set(false);\n        if (element === undefined)\n        {\n            return undefined;\n        }\n        observer.observe(element);\n        return () => observer.unobserve(element);\n    });\n    return value;\n}\n"],"names":["invalid","ZerolithError","diagnostic","args","threshold","options","value","signal","current","target","init","observer","entry","entries","candidate","hasOwner","onDispose","effect","element"],"mappings":"AAIA,OAAmD,mBAAe,gBAAY,YAAQ,cAAU,eAAW,gBAAc,WAYzH,SAASA,EAAQ,EAAoB,CAEjC,OAAO,IAAIC,EAAcC,EAAW,0BAA2B,QAASC,CAAI,CAAC,CACjF,CAYA,OAAM,SAAU,OAAO,EAAuD,EAAyB,CAAA,EAAE,CAErG,IAAMC,EAAYC,EAAQ,WAAa,EACjCC,EAAQC,EAAO,EAAK,EAC1B,GAAI,OAAO,qBAAyB,IAEhC,OAAOD,EAEX,IAAIE,EAA+BC,aAAkB,QAAUA,EAAS,OAClEC,EAAiC,CAAE,WAAS,EAC9CL,EAAQ,aAAe,SAEvB,EAAK,WAAaA,EAAQ,YAE9B,IAAIM,EACJ,GACA,CACI,EAAW,IAAI,qBAAsB,GAAW,CAE5C,IAAMC,EAAQC,EAAQ,SAAU,GAAcC,EAAU,SAAWN,CAAO,EACtEI,IAAU,QAEVN,EAAM,IAAIM,EAAM,cAAc,CAEtC,EAAGF,CAAI,CACX,MAEA,CACI,MAAMV,EAAQ,CAAE,UAAW,OAAOI,CAAS,EAAG,WAAYC,EAAQ,YAAc,EAAE,CAAE,CACxF,CAsBA,OArBIU,EAAQ,GAERC,MAAgBL,EAAS,WAAU,CAAE,EAErCF,aAAkB,SAElBE,EAAS,QAAQF,CAAM,EAChBH,IAEXW,MAAY,CAER,IAAMC,EAAUT,EAAO,IAAG,EAG1B,GAFA,EAAUS,EACVZ,EAAM,IAAI,EAAK,EACXY,IAAY,OAKhB,OADAP,EAAS,QAAQO,CAAO,MACXP,EAAS,UAAUO,CAAO,CAC3C,CAAC,EACMZ,EACX"}

package/dist/production/page.js

@@ -0,0 +1,2 @@
+import{signal as e}from"zerolith";import{NONE as t,sameSize as n}from"./size.js";let r,i,a;function o(t,n,r,i,a){if(t===void 0)return e(i);let o=e(r(),a===void 0?void 0:{equals:a});for(let e of n)t.addEventListener(e,()=>o.set(r()));return o}export function online(){return r??=o(typeof window>`u`?void 0:window,[`online`,`offline`],()=>navigator.onLine,!0),r}export function visible(){return i??=o(typeof document>`u`?void 0:document,[`visibilitychange`],()=>document.visibilityState===`visible`,!0),i}export function windowSize(){return a??=o(typeof window>`u`?void 0:window,[`resize`],()=>({width:window.innerWidth,height:window.innerHeight}),t,n),a}
+//# sourceMappingURL=page.js.map

package/dist/production/page.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page.js","sources":["../../src/page.ts"],"sourcesContent":["/**\n * The page's own state as signals shared by everyone who asks: whether it\n * is online, whether it is visible, and the window's size.\n */\nimport { type ReadableSignal, signal } from \"zerolith\";\nimport { NONE, type Size, sameSize } from \"./size.js\";\n\nlet onlineSignal: ReadableSignal<boolean> | undefined;\nlet visibleSignal: ReadableSignal<boolean> | undefined;\nlet windowSizeSignal: ReadableSignal<Size> | undefined;\n\n/** A signal of what `read` gives, read again on each of `events` from `target`; a still signal of `still` where there is no target, as on the server. */\nfunction following<T>(target: EventTarget | undefined, events: readonly string[], read: () => T, still: T, equals?: (a: T, b: T) => boolean): ReadableSignal<T>\n{\n    if (target === undefined)\n    {\n        return signal(still);\n    }\n    const value = signal(read(), equals === undefined ? undefined : { equals });\n    for (const event of events)\n    {\n        target.addEventListener(event, () => value.set(read()));\n    }\n    return value;\n}\n\n/** Whether the browser is online, as `navigator.onLine` says, following the `online` and `offline` events; one signal for the page, started when first asked for, and true where there is no browser. */\nexport function online(): ReadableSignal<boolean>\n{\n    onlineSignal ??= following(typeof window === \"undefined\" ? undefined : window, [\"online\", \"offline\"], () => navigator.onLine, true);\n    return onlineSignal;\n}\n\n/** Whether the page is visible, following `visibilitychange`; one signal for the page, started when first asked for, and true where there is no document. */\nexport function visible(): ReadableSignal<boolean>\n{\n    visibleSignal ??= following(typeof document === \"undefined\" ? undefined : document, [\"visibilitychange\"], () => document.visibilityState === \"visible\", true);\n    return visibleSignal;\n}\n\n/** The window's inner size, following `resize`, which a browser fires once per frame; one signal for the page, started when first asked for, and no size where there is no window. */\nexport function windowSize(): ReadableSignal<Size>\n{\n    windowSizeSignal ??= following(typeof window === \"undefined\" ? undefined : window, [\"resize\"], () => ({ width: window.innerWidth, height: window.innerHeight }), NONE, sameSize);\n    return windowSizeSignal;\n}\n"],"names":["onlineSignal","visibleSignal","windowSizeSignal","following","target","signal","still","value","read","equals","event","events","NONE","sameSize"],"mappings":"AAIA,OAA8B,gBAAc,WAC5C,OAAS,UAAiB,kBAAgB,YAE1C,IAAIA,EACAC,EACAC,EAGJ,SAASC,EAAa,EAAiC,EAA2B,EAAe,EAAU,EAAgC,CAEvI,GAAIC,IAAW,OAEX,OAAOC,EAAOC,CAAK,EAEvB,IAAMC,EAAQF,EAAOG,EAAI,EAAIC,IAAW,OAAY,OAAY,CAAE,QAAM,CAAE,EAC1E,IAAK,IAAMC,KAASC,EAEhBP,EAAO,iBAAiBM,MAAaH,EAAM,IAAIC,EAAI,CAAE,CAAC,EAE1D,OAAOD,CACX,CAGA,OAAM,SAAU,QAAM,CAGlB,MADA,KAAiBJ,EAAU,OAAO,OAAW,IAAc,OAAY,OAAQ,CAAC,SAAU,SAAS,MAAS,UAAU,OAAQ,EAAI,EAC3HH,CACX,CAGA,OAAM,SAAU,SAAO,CAGnB,MADA,KAAkBG,EAAU,OAAO,SAAa,IAAc,OAAY,SAAU,CAAC,kBAAkB,MAAS,SAAS,kBAAoB,UAAW,EAAI,EACrJF,CACX,CAGA,OAAM,SAAU,YAAU,CAGtB,MADA,KAAqBE,EAAU,OAAO,OAAW,IAAc,OAAY,OAAQ,CAAC,QAAQ,OAAU,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,WAAW,GAAKS,EAAMC,CAAQ,EACxKX,CACX"}

package/dist/production/size.js

@@ -0,0 +1,2 @@
+import{effect as e,hasOwner as t,onDispose as n,signal as r}from"zerolith";export const NONE={width:0,height:0};export function sameSize(e,t){return e.width===t.width&&e.height===t.height}const i=new Map;let a;function o(e){for(let t of e){let e=i.get(t.target);if(e!==void 0){let n={width:t.contentRect.width,height:t.contentRect.height};for(let t of e)t(n)}}}function s(e,t){a??=new ResizeObserver(o);let n=i.get(e);return n===void 0&&(n=new Set,i.set(e,n),a.observe(e)),n.add(t),()=>{n.delete(t),n.size===0&&(i.delete(e),a?.unobserve(e))}}function c(e){if(!e.isConnected)return NONE;let t=getComputedStyle(e);return{width:Math.max(0,e.clientWidth-parseFloat(t.paddingLeft)-parseFloat(t.paddingRight)),height:Math.max(0,e.clientHeight-parseFloat(t.paddingTop)-parseFloat(t.paddingBottom))}}export function size(i){let a=r(NONE,{equals:sameSize});if(typeof ResizeObserver>`u`)return a;let o=e=>a.set(e);if(i instanceof Element){a.set(c(i));let e=s(i,o);return t()&&n(e),a}return e(()=>{let e=i.get();if(e===void 0)a.set(NONE);else return a.set(c(e)),s(e,o)}),a}
+//# sourceMappingURL=size.js.map

package/dist/production/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sources":["../../src/size.ts"],"sourcesContent":["/**\n * An element's content box as a signal, kept by one ResizeObserver shared\n * by every measured element.\n */\nimport { type ReadableSignal, effect, hasOwner, onDispose, signal } from \"zerolith\";\n\n/** A width and a height in CSS pixels. */\nexport interface Size\n{\n    /** The width in CSS pixels. */\n    readonly width: number;\n    /** The height in CSS pixels. */\n    readonly height: number;\n}\n\n/** No size: what an element has before it is measured, and what the server has. */\nexport const NONE: Size = { width: 0, height: 0 };\n\n/** True when two sizes are the same, so a resize to the same size changes nothing. */\nexport function sameSize(a: Size, b: Size): boolean\n{\n    return a.width === b.width && a.height === b.height;\n}\n\n/** Who follows each element's content box, so one observer serves every measured element. */\nconst listeners = new Map<Element, Set<(box: Size) => void>>();\nlet observer: ResizeObserver | undefined;\n\n/** Hands each reported element's content box to those following it. */\nfunction report(entries: ResizeObserverEntry[]): void\n{\n    for (const entry of entries)\n    {\n        const set = listeners.get(entry.target);\n        if (set !== undefined)\n        {\n            const box = { width: entry.contentRect.width, height: entry.contentRect.height };\n            for (const listener of set)\n            {\n                listener(box);\n            }\n        }\n    }\n}\n\n/** Starts `listener` on `element`'s content box through the shared observer and returns what stops it, which unobserves the element once nobody follows it. */\nfunction watch(element: Element, listener: (box: Size) => void): () => void\n{\n    observer ??= new ResizeObserver(report);\n    let set = listeners.get(element);\n    if (set === undefined)\n    {\n        set = new Set();\n        listeners.set(element, set);\n        observer.observe(element);\n    }\n    set.add(listener);\n    return () =>\n    {\n        set.delete(listener);\n        if (set.size === 0)\n        {\n            listeners.delete(element);\n            observer?.unobserve(element);\n        }\n    };\n}\n\n/** The content box of `element` from its layout now, the client box less the padding, or no size while it is not in the document. */\nfunction contentBox(element: Element): Size\n{\n    if (!element.isConnected)\n    {\n        return NONE;\n    }\n    const style = getComputedStyle(element);\n    return {\n        width: Math.max(0, element.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)),\n        height: Math.max(0, element.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom))\n    };\n}\n\n/**\n * The content box of `target` as a signal: the element itself, or the\n * signal a `ref` fills, which measures the element it holds and is no size\n * while it holds none. An element not yet in the document is no size\n * until the observer first reports it. One ResizeObserver, shared by every\n * measured element, keeps the signal current; it stops with the enclosing\n * owner when there is one and lives for the page otherwise. Where there is\n * no observer, as on the server, the signal is no size.\n */\nexport function size(target: Element | ReadableSignal<Element | undefined>): ReadableSignal<Size>\n{\n    const value = signal(NONE, { equals: sameSize });\n    if (typeof ResizeObserver === \"undefined\")\n    {\n        return value;\n    }\n    const follow = (box: Size): void => value.set(box);\n    if (target instanceof Element)\n    {\n        value.set(contentBox(target));\n        const stop = watch(target, follow);\n        if (hasOwner())\n        {\n            onDispose(stop);\n        }\n        return value;\n    }\n    effect(() =>\n    {\n        const element = target.get();\n        if (element === undefined)\n        {\n            value.set(NONE);\n            return undefined;\n        }\n        value.set(contentBox(element));\n        return watch(element, follow);\n    });\n    return value;\n}\n"],"names":["a","b","listeners","observer","report","entry","entries","set","box","listener","watch","element","contentBox","style","value","signal","follow","target","stop","hasOwner","onDispose","effect"],"mappings":"AAIA,OAA8B,YAAQ,cAAU,eAAW,gBAAc,WAYzE,OAAO,MAAM,KAAa,CAAE,MAAO,EAAG,OAAQ,CAAC,EAG/C,OAAM,SAAU,SAAS,EAAS,EAAO,CAErC,OAAOA,EAAE,QAAUC,EAAE,OAASD,EAAE,SAAWC,EAAE,MACjD,CAGA,MAAMC,EAAY,IAAI,IACtB,IAAIC,EAGJ,SAASC,EAAO,EAA8B,CAE1C,IAAK,IAAMC,KAASC,EACpB,CACI,IAAMC,EAAML,EAAU,IAAIG,EAAM,MAAM,EACtC,GAAIE,IAAQ,OACZ,CACI,IAAMC,EAAM,CAAE,MAAOH,EAAM,YAAY,MAAO,OAAQA,EAAM,YAAY,MAAM,EAC9E,IAAK,IAAMI,KAAYF,EAEnBE,EAASD,CAAG,CAEpB,CACJ,CACJ,CAGA,SAASE,EAAM,EAAkB,EAA6B,CAE1D,IAAa,IAAI,eAAeN,CAAM,EACtC,IAAIG,EAAML,EAAU,IAAIS,CAAO,EAQ/B,OAPIJ,IAAQ,SAER,EAAM,IAAI,IACVL,EAAU,IAAIS,EAASJ,CAAG,EAC1BJ,EAAS,QAAQQ,CAAO,GAE5BJ,EAAI,IAAIE,CAAQ,MACJ,CAERF,EAAI,OAAOE,CAAQ,EACfF,EAAI,OAAS,IAEbL,EAAU,OAAOS,CAAO,EACxBR,GAAU,UAAUQ,CAAO,EAEnC,CACJ,CAGA,SAASC,EAAW,EAAgB,CAEhC,GAAI,CAACD,EAAQ,YAET,OAAO,KAEX,IAAME,EAAQ,iBAAiBF,CAAO,EACtC,MAAO,CACH,MAAO,KAAK,IAAI,EAAGA,EAAQ,YAAc,WAAWE,EAAM,WAAW,EAAI,WAAWA,EAAM,YAAY,CAAC,EACvG,OAAQ,KAAK,IAAI,EAAGF,EAAQ,aAAe,WAAWE,EAAM,UAAU,EAAI,WAAWA,EAAM,aAAa,CAAC,CAC5G,CACL,CAWA,OAAM,SAAU,KAAK,EAAqD,CAEtE,IAAMC,EAAQC,EAAO,KAAM,CAAE,OAAQ,QAAQ,CAAE,EAC/C,GAAI,OAAO,eAAmB,IAE1B,OAAOD,EAEX,IAAME,EAAU,GAAoBF,EAAM,IAAIN,CAAG,EACjD,GAAIS,aAAkB,QACtB,CACIH,EAAM,IAAIF,EAAWK,CAAM,CAAC,EAC5B,IAAMC,EAAOR,EAAMO,EAAQD,CAAM,EAKjC,OAJIG,EAAQ,GAERC,EAAUF,CAAI,EAEXJ,CACX,CAYA,OAXAO,MAAY,CAER,IAAMV,EAAUM,EAAO,IAAG,EAC1B,GAAIN,IAAY,OAEZG,EAAM,IAAI,IAAI,OAIlB,OADAA,EAAM,IAAIF,EAAWD,CAAO,CAAC,EACtBD,EAAMC,EAASK,CAAM,CAChC,CAAC,EACMF,CACX"}

package/dist/size.d.ts

@@ -0,0 +1,27 @@
+/**
+ * An element's content box as a signal, kept by one ResizeObserver shared
+ * by every measured element.
+ */
+import { type ReadableSignal } from "zerolith";
+/** A width and a height in CSS pixels. */
+export interface Size {
+    /** The width in CSS pixels. */
+    readonly width: number;
+    /** The height in CSS pixels. */
+    readonly height: number;
+}
+/** No size: what an element has before it is measured, and what the server has. */
+export declare const NONE: Size;
+/** True when two sizes are the same, so a resize to the same size changes nothing. */
+export declare function sameSize(a: Size, b: Size): boolean;
+/**
+ * The content box of `target` as a signal: the element itself, or the
+ * signal a `ref` fills, which measures the element it holds and is no size
+ * while it holds none. An element not yet in the document is no size
+ * until the observer first reports it. One ResizeObserver, shared by every
+ * measured element, keeps the signal current; it stops with the enclosing
+ * owner when there is one and lives for the page otherwise. Where there is
+ * no observer, as on the server, the signal is no size.
+ */
+export declare function size(target: Element | ReadableSignal<Element | undefined>): ReadableSignal<Size>;
+//# sourceMappingURL=size.d.ts.map

package/dist/size.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.d.ts","sourceRoot":"","sources":["../src/size.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAE,KAAK,cAAc,EAAuC,MAAM,UAAU,CAAC;AAEpF,0CAA0C;AAC1C,MAAM,WAAW,IAAI;IAEjB,+BAA+B;IAC/B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,gCAAgC;IAChC,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;CAC3B;AAED,mFAAmF;AACnF,eAAO,MAAM,IAAI,EAAE,IAA8B,CAAC;AAElD,sFAAsF;AACtF,wBAAgB,QAAQ,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,GAAG,OAAO,CAGlD;AA4DD;;;;;;;;GAQG;AACH,wBAAgB,IAAI,CAAC,MAAM,EAAE,OAAO,GAAG,cAAc,CAAC,OAAO,GAAG,SAAS,CAAC,GAAG,cAAc,CAAC,IAAI,CAAC,CA8BhG"}

package/dist/size.js

@@ -0,0 +1,90 @@
+/**
+ * An element's content box as a signal, kept by one ResizeObserver shared
+ * by every measured element.
+ */
+import { effect, hasOwner, onDispose, signal } from "zerolith";
+/** No size: what an element has before it is measured, and what the server has. */
+export const NONE = { width: 0, height: 0 };
+/** True when two sizes are the same, so a resize to the same size changes nothing. */
+export function sameSize(a, b) {
+    return a.width === b.width && a.height === b.height;
+}
+/** Who follows each element's content box, so one observer serves every measured element. */
+const listeners = new Map();
+let observer;
+/** Hands each reported element's content box to those following it. */
+function report(entries) {
+    for (const entry of entries) {
+        const set = listeners.get(entry.target);
+        if (set !== undefined) {
+            const box = { width: entry.contentRect.width, height: entry.contentRect.height };
+            for (const listener of set) {
+                listener(box);
+            }
+        }
+    }
+}
+/** Starts `listener` on `element`'s content box through the shared observer and returns what stops it, which unobserves the element once nobody follows it. */
+function watch(element, listener) {
+    observer ??= new ResizeObserver(report);
+    let set = listeners.get(element);
+    if (set === undefined) {
+        set = new Set();
+        listeners.set(element, set);
+        observer.observe(element);
+    }
+    set.add(listener);
+    return () => {
+        set.delete(listener);
+        if (set.size === 0) {
+            listeners.delete(element);
+            observer?.unobserve(element);
+        }
+    };
+}
+/** The content box of `element` from its layout now, the client box less the padding, or no size while it is not in the document. */
+function contentBox(element) {
+    if (!element.isConnected) {
+        return NONE;
+    }
+    const style = getComputedStyle(element);
+    return {
+        width: Math.max(0, element.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)),
+        height: Math.max(0, element.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom))
+    };
+}
+/**
+ * The content box of `target` as a signal: the element itself, or the
+ * signal a `ref` fills, which measures the element it holds and is no size
+ * while it holds none. An element not yet in the document is no size
+ * until the observer first reports it. One ResizeObserver, shared by every
+ * measured element, keeps the signal current; it stops with the enclosing
+ * owner when there is one and lives for the page otherwise. Where there is
+ * no observer, as on the server, the signal is no size.
+ */
+export function size(target) {
+    const value = signal(NONE, { equals: sameSize });
+    if (typeof ResizeObserver === "undefined") {
+        return value;
+    }
+    const follow = (box) => value.set(box);
+    if (target instanceof Element) {
+        value.set(contentBox(target));
+        const stop = watch(target, follow);
+        if (hasOwner()) {
+            onDispose(stop);
+        }
+        return value;
+    }
+    effect(() => {
+        const element = target.get();
+        if (element === undefined) {
+            value.set(NONE);
+            return undefined;
+        }
+        value.set(contentBox(element));
+        return watch(element, follow);
+    });
+    return value;
+}
+//# sourceMappingURL=size.js.map

package/dist/size.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"size.js","sourceRoot":"","sources":["../src/size.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,OAAO,EAAuB,MAAM,EAAE,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAWpF,mFAAmF;AACnF,MAAM,CAAC,MAAM,IAAI,GAAS,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC;AAElD,sFAAsF;AACtF,MAAM,UAAU,QAAQ,CAAC,CAAO,EAAE,CAAO;IAErC,OAAO,CAAC,CAAC,KAAK,KAAK,CAAC,CAAC,KAAK,IAAI,CAAC,CAAC,MAAM,KAAK,CAAC,CAAC,MAAM,CAAC;AACxD,CAAC;AAED,6FAA6F;AAC7F,MAAM,SAAS,GAAG,IAAI,GAAG,EAAqC,CAAC;AAC/D,IAAI,QAAoC,CAAC;AAEzC,uEAAuE;AACvE,SAAS,MAAM,CAAC,OAA8B;IAE1C,KAAK,MAAM,KAAK,IAAI,OAAO,EAC3B,CAAC;QACG,MAAM,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;QACxC,IAAI,GAAG,KAAK,SAAS,EACrB,CAAC;YACG,MAAM,GAAG,GAAG,EAAE,KAAK,EAAE,KAAK,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,WAAW,CAAC,MAAM,EAAE,CAAC;YACjF,KAAK,MAAM,QAAQ,IAAI,GAAG,EAC1B,CAAC;gBACG,QAAQ,CAAC,GAAG,CAAC,CAAC;YAClB,CAAC;QACL,CAAC;IACL,CAAC;AACL,CAAC;AAED,+JAA+J;AAC/J,SAAS,KAAK,CAAC,OAAgB,EAAE,QAA6B;IAE1D,QAAQ,KAAK,IAAI,cAAc,CAAC,MAAM,CAAC,CAAC;IACxC,IAAI,GAAG,GAAG,SAAS,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC;IACjC,IAAI,GAAG,KAAK,SAAS,EACrB,CAAC;QACG,GAAG,GAAG,IAAI,GAAG,EAAE,CAAC;QAChB,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC;QAC5B,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC9B,CAAC;IACD,GAAG,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;IAClB,OAAO,GAAG,EAAE;QAER,GAAG,CAAC,MAAM,CAAC,QAAQ,CAAC,CAAC;QACrB,IAAI,GAAG,CAAC,IAAI,KAAK,CAAC,EAClB,CAAC;YACG,SAAS,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YAC1B,QAAQ,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;QACjC,CAAC;IACL,CAAC,CAAC;AACN,CAAC;AAED,qIAAqI;AACrI,SAAS,UAAU,CAAC,OAAgB;IAEhC,IAAI,CAAC,OAAO,CAAC,WAAW,EACxB,CAAC;QACG,OAAO,IAAI,CAAC;IAChB,CAAC;IACD,MAAM,KAAK,GAAG,gBAAgB,CAAC,OAAO,CAAC,CAAC;IACxC,OAAO;QACH,KAAK,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,WAAW,GAAG,UAAU,CAAC,KAAK,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,YAAY,CAAC,CAAC;QACxG,MAAM,EAAE,IAAI,CAAC,GAAG,CAAC,CAAC,EAAE,OAAO,CAAC,YAAY,GAAG,UAAU,CAAC,KAAK,CAAC,UAAU,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,aAAa,CAAC,CAAC;KAC7G,CAAC;AACN,CAAC;AAED;;;;;;;;GAQG;AACH,MAAM,UAAU,IAAI,CAAC,MAAqD;IAEtE,MAAM,KAAK,GAAG,MAAM,CAAC,IAAI,EAAE,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjD,IAAI,OAAO,cAAc,KAAK,WAAW,EACzC,CAAC;QACG,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,MAAM,MAAM,GAAG,CAAC,GAAS,EAAQ,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC;IACnD,IAAI,MAAM,YAAY,OAAO,EAC7B,CAAC;QACG,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,MAAM,CAAC,CAAC,CAAC;QAC9B,MAAM,IAAI,GAAG,KAAK,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;QACnC,IAAI,QAAQ,EAAE,EACd,CAAC;YACG,SAAS,CAAC,IAAI,CAAC,CAAC;QACpB,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;IACD,MAAM,CAAC,GAAG,EAAE;QAER,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,EAAE,CAAC;QAC7B,IAAI,OAAO,KAAK,SAAS,EACzB,CAAC;YACG,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC;YAChB,OAAO,SAAS,CAAC;QACrB,CAAC;QACD,KAAK,CAAC,GAAG,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC,CAAC;QAC/B,OAAO,KAAK,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;IAClC,CAAC,CAAC,CAAC;IACH,OAAO,KAAK,CAAC;AACjB,CAAC"}

package/package.json

@@ -0,0 +1,52 @@
+{
+    "name": "@zerolith/browser",
+    "version": "0.0.0-canary.20261107.g95d90a0",
+    "description": "The page as signals for zerolith: whether it is online and visible and the window's size, shared by the page, and an element's size and presence in view",
+    "license": "Apache-2.0",
+    "author": "molexxxx",
+    "homepage": "https://zerolith.dev/",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/molexxxx/zerolith.git",
+        "directory": "packages/browser"
+    },
+    "bugs": {
+        "url": "https://github.com/molexxxx/zerolith/issues"
+    },
+    "keywords": [
+        "zerolith",
+        "signals",
+        "browser",
+        "resize",
+        "intersection",
+        "visibility"
+    ],
+    "type": "module",
+    "sideEffects": false,
+    "engines": {
+        "node": ">=24.0.0"
+    },
+    "exports": {
+        ".": {
+            "types": "./dist/index.d.ts",
+            "development": "./dist/index.js",
+            "default": "./dist/production/index.js"
+        },
+        "./package.json": "./package.json"
+    },
+    "files": [
+        "dist",
+        "src",
+        "LICENSE",
+        "README.md"
+    ],
+    "scripts": {
+        "build": "tsc -p tsconfig.build.json && node ../../scripts/production.ts"
+    },
+    "peerDependencies": {
+        "zerolith": "^0.0.0-canary.20261107.g95d90a0"
+    },
+    "devDependencies": {
+        "zerolith": "^0.0.0-canary.20261107.g95d90a0"
+    }
+}

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * @zerolith/browser: the page as signals. Whether it is online and visible
+ * and the window's size are one signal each for the page; an element's
+ * size and whether it is in view are one per element, kept by observers
+ * that go with the enclosing owner.
+ */
+export type { Size } from "./size.js";
+export { size } from "./size.js";
+export type { InViewOptions } from "./inview.js";
+export { inView } from "./inview.js";
+export { online, visible, windowSize } from "./page.js";

package/src/inview.ts

@@ -0,0 +1,84 @@
+/**
+ * Whether an element is in view, as a signal kept by an
+ * IntersectionObserver.
+ */
+import { type DiagnosticArgs, type ReadableSignal, ZerolithError, diagnostic, effect, hasOwner, onDispose, signal } from "zerolith";
+
+/** Options for `inView`. */
+export interface InViewOptions
+{
+    /** Space around the viewport that counts as in view, as an IntersectionObserver's `rootMargin`; "200px" starts loading a little ahead of the scroll. */
+    rootMargin?: string;
+    /** How much of the element must show, from 0 for any part of it to 1 for all of it. Defaults to 0. */
+    threshold?: number;
+}
+
+/** The error for options an IntersectionObserver refuses. */
+function invalid(args: DiagnosticArgs): ZerolithError
+{
+    return new ZerolithError(diagnostic("in_view_options_invalid", "error", args));
+}
+
+/**
+ * Whether `target` intersects the viewport, as a signal: the element
+ * itself, or the signal a `ref` fills, which follows the element it holds
+ * and is false while it holds none. An IntersectionObserver keeps it
+ * current; it stops with the enclosing owner when there is one and lives
+ * for the page otherwise. The signal is false until the observer first
+ * reports, and where there is no observer, as on the server. A threshold
+ * outside 0 to 1, or a root margin the browser refuses, fails with
+ * `in_view_options_invalid`.
+ */
+export function inView(target: Element | ReadableSignal<Element | undefined>, options: InViewOptions = {}): ReadableSignal<boolean>
+{
+    const threshold = options.threshold ?? 0;
+    const value = signal(false);
+    if (typeof IntersectionObserver === "undefined")
+    {
+        return value;
+    }
+    let current: Element | undefined = target instanceof Element ? target : undefined;
+    const init: IntersectionObserverInit = { threshold };
+    if (options.rootMargin !== undefined)
+    {
+        init.rootMargin = options.rootMargin;
+    }
+    let observer: IntersectionObserver;
+    try
+    {
+        observer = new IntersectionObserver((entries) =>
+        {
+            const entry = entries.findLast((candidate) => candidate.target === current);
+            if (entry !== undefined)
+            {
+                value.set(entry.isIntersecting);
+            }
+        }, init);
+    }
+    catch
+    {
+        throw invalid({ threshold: String(threshold), rootMargin: options.rootMargin ?? "" });
+    }
+    if (hasOwner())
+    {
+        onDispose(() => observer.disconnect());
+    }
+    if (target instanceof Element)
+    {
+        observer.observe(target);
+        return value;
+    }
+    effect(() =>
+    {
+        const element = target.get();
+        current = element;
+        value.set(false);
+        if (element === undefined)
+        {
+            return undefined;
+        }
+        observer.observe(element);
+        return () => observer.unobserve(element);
+    });
+    return value;
+}

package/src/page.ts

@@ -0,0 +1,46 @@
+/**
+ * The page's own state as signals shared by everyone who asks: whether it
+ * is online, whether it is visible, and the window's size.
+ */
+import { type ReadableSignal, signal } from "zerolith";
+import { NONE, type Size, sameSize } from "./size.js";
+
+let onlineSignal: ReadableSignal<boolean> | undefined;
+let visibleSignal: ReadableSignal<boolean> | undefined;
+let windowSizeSignal: ReadableSignal<Size> | undefined;
+
+/** A signal of what `read` gives, read again on each of `events` from `target`; a still signal of `still` where there is no target, as on the server. */
+function following<T>(target: EventTarget | undefined, events: readonly string[], read: () => T, still: T, equals?: (a: T, b: T) => boolean): ReadableSignal<T>
+{
+    if (target === undefined)
+    {
+        return signal(still);
+    }
+    const value = signal(read(), equals === undefined ? undefined : { equals });
+    for (const event of events)
+    {
+        target.addEventListener(event, () => value.set(read()));
+    }
+    return value;
+}
+
+/** Whether the browser is online, as `navigator.onLine` says, following the `online` and `offline` events; one signal for the page, started when first asked for, and true where there is no browser. */
+export function online(): ReadableSignal<boolean>
+{
+    onlineSignal ??= following(typeof window === "undefined" ? undefined : window, ["online", "offline"], () => navigator.onLine, true);
+    return onlineSignal;
+}
+
+/** Whether the page is visible, following `visibilitychange`; one signal for the page, started when first asked for, and true where there is no document. */
+export function visible(): ReadableSignal<boolean>
+{
+    visibleSignal ??= following(typeof document === "undefined" ? undefined : document, ["visibilitychange"], () => document.visibilityState === "visible", true);
+    return visibleSignal;
+}
+
+/** The window's inner size, following `resize`, which a browser fires once per frame; one signal for the page, started when first asked for, and no size where there is no window. */
+export function windowSize(): ReadableSignal<Size>
+{
+    windowSizeSignal ??= following(typeof window === "undefined" ? undefined : window, ["resize"], () => ({ width: window.innerWidth, height: window.innerHeight }), NONE, sameSize);
+    return windowSizeSignal;
+}

package/src/size.ts

@@ -0,0 +1,122 @@
+/**
+ * An element's content box as a signal, kept by one ResizeObserver shared
+ * by every measured element.
+ */
+import { type ReadableSignal, effect, hasOwner, onDispose, signal } from "zerolith";
+
+/** A width and a height in CSS pixels. */
+export interface Size
+{
+    /** The width in CSS pixels. */
+    readonly width: number;
+    /** The height in CSS pixels. */
+    readonly height: number;
+}
+
+/** No size: what an element has before it is measured, and what the server has. */
+export const NONE: Size = { width: 0, height: 0 };
+
+/** True when two sizes are the same, so a resize to the same size changes nothing. */
+export function sameSize(a: Size, b: Size): boolean
+{
+    return a.width === b.width && a.height === b.height;
+}
+
+/** Who follows each element's content box, so one observer serves every measured element. */
+const listeners = new Map<Element, Set<(box: Size) => void>>();
+let observer: ResizeObserver | undefined;
+
+/** Hands each reported element's content box to those following it. */
+function report(entries: ResizeObserverEntry[]): void
+{
+    for (const entry of entries)
+    {
+        const set = listeners.get(entry.target);
+        if (set !== undefined)
+        {
+            const box = { width: entry.contentRect.width, height: entry.contentRect.height };
+            for (const listener of set)
+            {
+                listener(box);
+            }
+        }
+    }
+}
+
+/** Starts `listener` on `element`'s content box through the shared observer and returns what stops it, which unobserves the element once nobody follows it. */
+function watch(element: Element, listener: (box: Size) => void): () => void
+{
+    observer ??= new ResizeObserver(report);
+    let set = listeners.get(element);
+    if (set === undefined)
+    {
+        set = new Set();
+        listeners.set(element, set);
+        observer.observe(element);
+    }
+    set.add(listener);
+    return () =>
+    {
+        set.delete(listener);
+        if (set.size === 0)
+        {
+            listeners.delete(element);
+            observer?.unobserve(element);
+        }
+    };
+}
+
+/** The content box of `element` from its layout now, the client box less the padding, or no size while it is not in the document. */
+function contentBox(element: Element): Size
+{
+    if (!element.isConnected)
+    {
+        return NONE;
+    }
+    const style = getComputedStyle(element);
+    return {
+        width: Math.max(0, element.clientWidth - parseFloat(style.paddingLeft) - parseFloat(style.paddingRight)),
+        height: Math.max(0, element.clientHeight - parseFloat(style.paddingTop) - parseFloat(style.paddingBottom))
+    };
+}
+
+/**
+ * The content box of `target` as a signal: the element itself, or the
+ * signal a `ref` fills, which measures the element it holds and is no size
+ * while it holds none. An element not yet in the document is no size
+ * until the observer first reports it. One ResizeObserver, shared by every
+ * measured element, keeps the signal current; it stops with the enclosing
+ * owner when there is one and lives for the page otherwise. Where there is
+ * no observer, as on the server, the signal is no size.
+ */
+export function size(target: Element | ReadableSignal<Element | undefined>): ReadableSignal<Size>
+{
+    const value = signal(NONE, { equals: sameSize });
+    if (typeof ResizeObserver === "undefined")
+    {
+        return value;
+    }
+    const follow = (box: Size): void => value.set(box);
+    if (target instanceof Element)
+    {
+        value.set(contentBox(target));
+        const stop = watch(target, follow);
+        if (hasOwner())
+        {
+            onDispose(stop);
+        }
+        return value;
+    }
+    effect(() =>
+    {
+        const element = target.get();
+        if (element === undefined)
+        {
+            value.set(NONE);
+            return undefined;
+        }
+        value.set(contentBox(element));
+        return watch(element, follow);
+    });
+    return value;
+}