@escape-game-over/atlas 0.1.67 → 0.1.68

package/docs/checks.md

@@ -124,7 +124,7 @@ dependencies at all. Vitest type-checks them itself when it runs them.
 | `breadcrumbs.test.ts`      | the trail, a dropped ancestor, `orphanSegments`, and how a gap is reported                                                                                                                           |
 | `jsonld/*.test.ts`         | that a `</script>` in any value cannot close the block, each node's shape and `@id`, and how a price table becomes offers                                                                            |
 | `analytics.test.ts`        | Umami's attributes, its three-state booleans, the `domains` list that would record nothing, and that `consentRequired` answers exactly when a tag was emitted                                        |
-| `google-analytics.test.ts` | that consent is denied first and precedes every tag, one loader for many ids, dead `UA-` properties, the preconnect — once, ahead of the block that writes the loader's URL, never `crossorigin` — and where `googleEvent` sends, per setting |
+| `google-analytics.test.ts` | that consent is denied first and precedes every tag, one loader for many ids, dead `UA-` properties, and the preconnect — once, ahead of the block that writes the loader's URL, never `crossorigin` |
 | `contact.test.ts`          | the E.164 a `tel:` needs — trunk zero dropped, spacing stripped — and the displayed form kept                                                                                                        |
 | `hours.test.ts`            | collapsing a week into runs, week start changing the answer, and every impossible week that throws                                                                                                   |
 | `money.test.ts`            | a bare count widened to a band, the span of a table, and the gaps and overlaps that throw                                                                                                            |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.67",
+    "version": "0.1.68",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,
@@ -54,14 +54,14 @@
         "@types/node": ">=22",
         "astro": ">=7",
         "typescript": ">=5",
-        "vite": ">=8"
+        "vite": ">= 8"
     },
     "devDependencies": {
-        "@biomejs/biome": "2.5.14",
-        "@types/node": "26.6.2",
-        "@vitest/coverage-istanbul": "5.0.1",
+        "@biomejs/biome": "2.5.15",
+        "@types/node": "26.6.3",
+        "@vitest/coverage-istanbul": "5.0.3",
         "astro": "7.3.5",
         "typescript": "6.0.3",
-        "vitest": "5.0.1"
+        "vitest": "5.0.3"
     }
 }

package/src/astro/AutoDialog.astro

@@ -5,9 +5,12 @@
  * (`closedby="any"`). Close it with `<form method="dialog"><button>…</button></form>`.
  *
  * ```astro
- * <AutoDialog id="promo" aria-label="…" after={2000} once="session">…</AutoDialog>
+ * <AutoDialog id="promo" aria-label="…" when={{ on: "delay", ms: 2000 }} once="session">…</AutoDialog>
  * ```
  *
+ * With `when={{ on: "visible" }}` it opens when the place it is written
+ * scrolls into view.
+ *
  * A dialog opened only by a button or a script needs none of this: write
  * `<dialog closedby="any">`.
  */
@@ -20,8 +23,8 @@ type Props = AutoOpen &
         readonly id: string;
     };
 
-const { after, once, waitForConsent, modal, ...attrs } = Astro.props;
-const auto: AutoOpen = { after, once, waitForConsent, modal };
+const { when, once, waitForConsent, modal, ...attrs } = Astro.props;
+const auto: AutoOpen = { when, once, waitForConsent, modal };
 ---
 
 <script src="./auto-dialog.ts" />
@@ -31,6 +34,11 @@ const auto: AutoOpen = { after, once, waitForConsent, modal };
     data-auto={JSON.stringify(auto)}
     style="display:contents"
 >
+    <!-- Out of the flow, so it adds no gap to a flex or grid parent. -->
+    <span
+        data-spot
+        style="position:absolute"
+    ></span>
     <dialog
         closedby="any"
         {...attrs}

package/src/astro/Document.astro

@@ -78,11 +78,11 @@ if (meta.consentVendors.length > 0 && !Astro.slots.has("consent")) {
         <MetaTags tags={meta.tags} />
         {rememberLocale && <RememberLocale />}
         {Object.entries(fonts).map(([key, font]) => (
-    <Font
-        cssVariable={`--${key}`}
-        preload={font.preload === true}
-    />
-))}
+            <Font
+                cssVariable={`--${key}`}
+                preload={font.preload === true}
+            />
+        ))}
         <slot name="head" />
     </head>
     <body {...body}>

package/src/astro/auto-dialog.ts

@@ -1,17 +1,29 @@
 import { CONSENT_EVENT, CONSENT_TAG, readConsent } from "./consent.ts";
 import { element } from "./element.ts";
+import { type LoadTrigger, triggered } from "./load-script.ts";
 import { data, ref } from "./ref.ts";
 
+/**
+ * `loadScript`'s triggers, as a dialog uses them. `visible` watches where the
+ * `<AutoDialog>` sits in the page, so placing it in a section opens it as the
+ * visitor scrolls there. A dialog opened by a click is a plain `<dialog>`.
+ */
+export type OpenTrigger =
+    | { readonly on: "idle" }
+    | { readonly on: "delay"; readonly ms: number }
+    | { readonly on: "visible"; readonly margin?: string }
+    | { readonly on: "interaction" };
+
 /** When an `<AutoDialog>` opens by itself. */
 export interface AutoOpen {
-    /** Milliseconds after load, or after the consent answer with `waitForConsent`. */
-    readonly after: number;
+    /** Counted from `load`, or from the consent answer with `waitForConsent`. */
+    readonly when: OpenTrigger;
     /**
      * Once closed, stays closed for the tab (`session`) or for good (`visitor`).
      * Omitted, it opens on every page.
      */
     readonly once?: "session" | "visitor";
-    /** Holds the timer until the consent banner is answered, where it asks. */
+    /** Holds the trigger until the consent banner is answered, where it asks. */
     readonly waitForConsent?: boolean;
     /** Defaults to `true`; `false` leaves the page usable behind it. */
     readonly modal?: boolean;
@@ -20,10 +32,14 @@ export interface AutoOpen {
 const storage = (once: "session" | "visitor"): Storage =>
     once === "session" ? sessionStorage : localStorage;
 
-/** Opens `dialog` as `options` say, until `signal` aborts. */
+/**
+ * Opens `dialog` as `options` say, until `signal` aborts. `spot` is where the
+ * dialog sits in the page, which a `visible` trigger watches.
+ */
 export function autoOpen(
     dialog: HTMLDialogElement,
-    { after, once, waitForConsent = false, modal = true }: AutoOpen,
+    spot: Element,
+    { when, once, waitForConsent = false, modal = true }: AutoOpen,
     signal: AbortSignal
 ): void {
     const key = `atlas-dialog:${dialog.id}`;
@@ -44,13 +60,14 @@ export function autoOpen(
         );
     }
 
+    const trigger: LoadTrigger =
+        when.on === "visible" ? { ...when, element: spot } : when;
     const start = () => {
-        const timer = setTimeout(() => {
+        void triggered(trigger, signal).then(() => {
             if (dialog.open) return;
             if (modal) dialog.showModal();
             else dialog.show();
-        }, after);
-        signal.addEventListener("abort", () => clearTimeout(timer));
+        });
     };
 
     const asking =
@@ -66,6 +83,7 @@ export function autoOpen(
 export const autoDialog = element("atlas-dialog", ({ root, signal }) => {
     autoOpen(
         ref<HTMLDialogElement>(root, "dialog"),
+        ref(root, "[data-spot]"),
         JSON.parse(data(root, "auto")),
         signal
     );