@escape-game-over/atlas 0.1.24 → 0.1.26

package/docs/client-scripts.md

@@ -32,33 +32,26 @@ the referrer policy — and everything that does, classes above all, comes from
 caller through a callback. It too is handed the button and the box rather than
 finding them.
 
-| Module                     | Owns                                                           | Leaves to the project                           |
-| -------------------------- | -------------------------------------------------------------- | ----------------------------------------------- |
-| `./astro/carousel`         | which slide is current: modulo, swipe, autoplay, the move lock | the transform, dots, arrows, `aria`             |
-| `./astro/filters`          | which items match, and what the address bar says               | every DOM read and write                        |
-| `./astro/filters-view`     | the two DOM writes every filtered list turned out to share     | finding the elements, and everything else drawn |
-| `./astro/markup`           | the attributes a template writes and a script reads, typed     | naming the roles, and everything done with them |
-| `./astro/youtube`          | the swap from poster to player, on the click and not before    | the poster, the button, the iframe's classes    |
-| `./astro/background-video` | playing or paused, playable or not, and which cut is loaded    | the play/pause control, its icons and its label |
-| `./astro/consent`          | remembering an answer, expiring it, handing it to Google       | the banner — its wording, its buttons, its law  |
-| `./astro/element`          | registering a custom element, and ending what it started        | what the element does while it is on the page   |
-| `./astro/dom`              | scoped `one`/`all` lookups, typed                              | the selectors                                   |
-| `./astro/dev-log`          | a panel a failed wiring can announce itself in, in dev only    | calling it behind `import.meta.env.DEV`         |
-
-`./astro/consent` is the only one of these with a build-time half. Its
-`consentApplies()` reports whether there is a Google tag to consent to, which a
-banner has to know — but it can only answer once it has been downloaded, so a
-project that asks it alone ships the banner's script to every page to be told,
-three requests later, that there was nothing to ask about. `consentRequired()`
-from the package root is the same question at build time: false, and the banner
-never reaches the HTML. Gate the render on that and keep the runtime check for
-the banner that is rendered. See NOT-BUILT.md on where the halves divide.
-
-**A script imports one path: `@escape-game-over/atlas/client`**, which re-exports
-every module above. All of it exists to touch a live document, so it belongs in
-a `<script src>` and not in frontmatter or `astro.config.ts`. A component's
-contract is the one thing both halves need, and it stays on `./astro/markup`,
-which touches nothing.
+| Module             | Owns                                                           | Leaves to the project                           |
+| ------------------ | -------------------------------------------------------------- | ----------------------------------------------- |
+| `carousel`         | which slide is current: modulo, swipe, autoplay, the move lock | the transform, dots, arrows, `aria`             |
+| `filters`          | which items match, and what the address bar says               | every DOM read and write                        |
+| `filters-view`     | the two DOM writes every filtered list turned out to share     | finding the elements, and everything else drawn |
+| `youtube`          | the swap from poster to player, on the click and not before    | the poster, the button, the iframe's classes    |
+| `background-video` | playing or paused, playable or not, and which cut is loaded    | the play/pause control, its icons and its label |
+| `consent`          | remembering an answer, expiring it, handing it to Google       | the banner — its wording, its buttons, its law  |
+| `element`          | registering a custom element, and ending what it started       | what the element does while it is on the page   |
+
+`consent` is the one module that ships its own behaviour: `<ConsentBanner
+analytics={…}>` (`@escape-game-over/atlas/astro/consent-banner`) renders the
+site's markup as its children, skips itself — script included — when the
+analytics need no permission, and remembers, expires and applies the answer. The
+markup spreads `consent.accept` and `consent.decline` on its buttons, and
+`consent.reopen` on the control that brings it back.
+
+**Browser code has one import path: `@escape-game-over/atlas/client`**, which
+re-exports every module above. None of it touches the DOM at import, so an
+element's contract can be imported in frontmatter from the same path.
 
 ## Lifetimes are the recurring bug
 
@@ -75,21 +68,17 @@ const detach = loop.attach(video);            // background-video: the <video>
 const detach = trailer.attach(button, box);   // youtube: what is pressed, what it replaces
 ```
 
-`defineElement` says the same thing in the shape a custom element needs. One
-function per element: it runs when the element enters the page, `signal` ends
-what it registered when the element leaves, and what it returns is the undo for
-everything else.
+`element` says the same thing in the shape a custom element needs: its function
+runs when the element enters the page, `signal` ends what it registered when the
+element leaves, and what it returns is the undo for everything else.
 
 ```ts
-defineElement(thing, (host, signal) => {
-    host.addEventListener("click", open, { signal });   // ends with the visit
-    return loop.attach(host);                           // and so does this
+export const thing = element("go-thing", ({ host, signal }) => {
+    ref(host, "[data-thing-button]").addEventListener("click", open, { signal });   // ends with the visit
+    return loop.attach(host);                                                        // and so does this
 });
 ```
 
-It takes the component rather than a tag name, so the element it registers and
-the roles it hands the function are the same contract the template spread.
-
 An element can enter the page more than once — moving it in the DOM runs the
 undo and then the function again — so it has to be able to run twice. State that
 must survive a move goes in a `WeakMap` keyed by `host`, which is what the
@@ -114,9 +103,9 @@ the URL. The caller declares fields; the item shape follows from them.
 ```ts
 const list = filters({
     fields: {
-        q:        { kind: "text",   param: "q" },
-        category: { kind: "choice", param: "category" },
-        featured: { kind: "flag",   param: "featured" },
+        q:        { kind: "text" },
+        category: { kind: "choice" },
+        featured: { kind: "flag" },
     },
     items: entries.map((entry) => ({
         key: entry.id,
@@ -186,7 +175,7 @@ pass. What is deliberately absent is one field holding several selected values;
 that is a `choices` kind, and it forces a URL encoding decision (repeated
 parameters or comma-joined) that nothing has needed yet.
 
-`param` is optional. A field without one is state-only and never reaches the URL.
+`param` defaults to the field's name. `param: false` keeps a field state-only, out of the URL.
 
 ### Facet counts: `matchedWithout`
 
@@ -278,25 +267,23 @@ The twelve lines every one of the three wrote around its search field, byte for
 byte.
 
 ```ts
-const search = searchBox({
-    input: one<HTMLInputElement>("[data-filter-search]"),
-    clear: one("[data-filter-clear]"),
-    empty: one("[data-filter-empty]"),
-});
-
 const list = filters({
     fields, items,
-    onChange({ state, matched }) {
-        search.render(state.q, matched.size);
+    onChange({ matched }) {
         // …everything this list draws for itself
     },
 });
-
-const unbind = search.bind(list, "q");
 const detach = list.attach();
+const unbind = searchBox(list, "q", {
+    input: one<HTMLInputElement>("[data-filter-search]"),
+    clear: one("[data-filter-clear]"),
+    empty: one("[data-filter-empty]"),
+});
 ```
 
-`render` is the half worth centralising, and specifically this:
+It paints the list's current state at once, then repaints on every change
+through `list.subscribe`, after the page's own `onChange`. The part worth
+centralising is this:
 
 ```ts
 if (input != null && input.value !== query) input.value = query;
@@ -306,19 +293,13 @@ It exists because `popstate` and `reset` move state without touching the
 keyboard — forget it and the back button leaves a stale query sitting in the box
 while the list shows something else. The inequality is not an optimisation:
 assigning `value` moves the caret to the end, so writing it unconditionally would
-make the field unusable mid-word.
-
-`bind` is a second call rather than part of construction because of an ordering
-knot. `render` runs inside the list's `onChange`, so the box must exist before
-the list; `bind` needs the list. Two `const`s in sequence is the honest shape,
-and the alternative is a `let` the reader has to carry. Its return is the undo,
-like `attach` — so a page-load teardown aborts both.
+make the field unusable mid-word. Its return is the undo, like `attach`.
 
 `TextFieldOf<F>` restricts the second argument to the list's `text` fields, so a
 box pointed at a `flag` is a compile error rather than a filter that silently
 never matches.
 
-Every element is optional and `null` is accepted, because `within(root).one(…)`
+Every element is optional and `null` is accepted, because a role's `one()`
 returns `null` and a page may have a search field with no clear button. Handing
 over what a lookup returned, unchecked, is the point.
 
@@ -333,7 +314,7 @@ errors, and the page looks wrong in a way that does not point at the filter.
 ```ts
 onChange({ matched }) {
     for (const item of items) item.hidden = !matched.has(keyOf(item));
-    hideEmpty(groups, (group) => within(group).all("[data-faq-key]"));
+    hideEmpty(groups, (group) => rowsIn.get(group) ?? []);
 }
 ```
 
@@ -346,8 +327,8 @@ city in it is hidden; a region is empty when every country in it is hidden,
 **Which makes the order load-bearing: innermost first.**
 
 ```ts
-hideEmpty(countries, (c) => within(c).all("[data-city]"));
-hideEmpty(regions,   (r) => within(r).all("[data-country]"));
+hideEmpty(countries, (c) => citiesIn.get(c) ?? []);
+hideEmpty(regions,   (r) => countriesIn.get(r) ?? []);
 ```
 
 Run the other way round, the regions are judged against countries nothing has
@@ -380,147 +361,72 @@ filters({ … }) + searchBox + hideEmpty  // the roll-up gone too
 A page whose markup wants a class instead of `hidden`, or removal from the DOM,
 skips the helper and writes it in `onChange`. Nothing degrades.
 
-## `markup`
+## `element`
 
-A script that enhances server-rendered markup has to agree with the template on
-attribute names, and nothing checks that agreement. `data-filter-regoin` in the
-template and `dataset.filterRegion` in the script compile, build and ship, and
-the facet simply never matches: the page reads as a filter with no results, not
-as a typo. A shared constant pins one name. `markup` pins every name a script
-and its template share, and the values in them.
+A custom element that enhances server-rendered markup: `element` registers the
+behaviour and runs it for as long as the element is on the page, and `ref` and
+`refs` find what it works on by plain attribute selectors.
 
 ```ts
-// network-markup.ts — imported by the template and by the script
-export const row = markup("network-row", {
-    key: { kind: "text" },
-    status: { kind: "choice", of: ["open", "soon"] },
-    state: { kind: "text", optional: true },
+// faq.ts — imported by the template for the tag, and loaded by the page's script
+export const faq = element("go-faq", ({ host, signal }) => {
+    const input = ref<HTMLInputElement>(host, "[data-faq-search]");
+    for (const row of refs<HTMLDetailsElement>(host, "[data-faq-row]")) {
+        row.dataset.key;
+    }
 });
-export const search = markup("network-search");
 ```
 
 ```astro
-<a {...row.attrs({ key, status: "open", state: store.state })}>
-<input {...search.attrs()} type="search">
-```
-
-```ts
-for (const { element, values } of row.all(this)) {
-    values.status; // "open" | "soon"
-}
-const input = search.require<HTMLInputElement>(this).element;
-```
-
-- **Names are derived, never spelled.** `data-network-row` marks the element and
-  `data-network-row-status` holds a field. A field that does not exist is a
-  compile error in the template and in the script.
-- **Values are typed on the way in.** `attrs` takes each field's type: a missing
-  required field, or a status outside its list, fails `astro check`. It also
-  checks at run time, because this runs at build time and a value can arrive as
-  a plain `string` from an env var or a cast; a throw there fails the build
-  rather than shipping a page whose script throws on every visit.
-- **And parsed on the way out.** `read`, `all`, `one` and `require` parse every
-  field and throw, naming the element and the attribute, when one is missing or
-  malformed. A malformed match fails the whole `all` rather than being skipped:
-  a list that quietly loses a row is the failure this exists to prevent.
-
-The kinds are data, not builders, for the reason `filters` gives:
-`text`, `number`, `list`, `template`, `choice` and `flag`, all but `flag`
-optionally `optional`. A `flag` is off by being absent, never `"false"`, so a
-stylesheet can select it with a bare attribute.
-
-A `template` is the one that keeps a sentence out of the script. It is written
-as the translated string with its placeholders left in, and read back as the
-function that fills them:
+---
+import AtlasElement from "@escape-game-over/atlas/astro/element";
+---
 
-```astro
-<p {...faq.line.attrs({ sentence: t("faq.matched", { count: "{count}" }) })}></p>
-```
+<script src="./faq.ts"></script>
 
-```ts
-line.element.textContent = line.values.sentence({ count: String(hits.size) });
+<AtlasElement of={faq} class="…">
+    <input data-faq-search type="search">
+    <details data-faq-row data-key={key}>…</details>
+</AtlasElement>
 ```
 
-So no script spells `"{count}"`, and a sentence that never says one of its own
-placeholders fails the build rather than shipping a brace to a reader.
-
-`write` sets fields back onto an element, for state a stylesheet reads — a
-dropdown that is blocked — so the script uses the names the template did.
-
-**What it still cannot reach is the stylesheet.** Tailwind generates CSS from
-class names it finds as literals in the source, so a variant keyed on one of
-these attributes has to spell it: `group-data-network-dropdown-blocked/dd:`.
-That is the one place a rename is not a compile error. It is also the one place
-a drift is visible, since the style stops applying, where a script reading the
-wrong attribute fails silently. `attribute(field)` returns the name for the
-consumers that can take a computed one, such as an `attributeFilter`.
-
-It keeps the rule at the top of this page in the only reading that admits a
-lookup: it finds only elements carrying its own marker, writes only its own
-attributes, and sets no class, `aria` or `hidden`. The names are the project's,
-so nothing in this package has to be matched.
-
-### `component`: roles owned by one custom element
-
-`markup` leaves two things to the project, and both bite: a name per role, which
-two components can pick alike, and scope, since `querySelectorAll` from an
-element also finds everything inside a nested copy of that element. `component`
-ties every role to a custom element and settles both.
+It registers itself when loaded in a browser and does nothing in Node, so the
+template imports the same file for the tag.
+
+- **What the script asks for is what devtools shows.** A selector is a string
+  the template wrote as an attribute; there is no naming scheme to decode.
+  Prefix the names per element (`data-faq-…`) so two elements sharing a
+  subtree cannot pick up each other's.
+- **Missing is loud in dev.** `ref` throws naming the root and the selector;
+  `refs` returns what it found, none included. A throw inside `connect` leaves
+  that element inert and lands in the dev panel, as does any uncaught error on
+  the page — a failing listener, a rejected `await`.
+- **Values are the DOM's.** `data(row, "key")` reads `data-key` and throws, as
+  `ref` does, when it is missing; an optional one is `row.dataset.state`. Parse
+  where the script needs a number or a list. State a stylesheet reads is a plain attribute the
+  script sets — `data-blocked` — which Tailwind selects as `group-data-blocked:`.
+- **The root says it is one.** `AtlasElement` renders the tag with
+  `data-atlas-root`, so a project gives every root a display in one stylesheet
+  rule. A root rendered by hand says so on the dev server.
+
+A sentence the script updates keeps its words in the page. The copy wraps the
+changing part in a variant run, `RichText`'s `attrs` gives that run an
+attribute, and the script writes only that run:
 
 ```ts
-export const faq = component("go-faq", {
-    row: { key: { kind: "text" }, text: { kind: "text" } },
-    search: {},
-});
+"faq.matched": { "en-US": "[v:count]{count}[/v] answers found" },
 ```
 
 ```astro
-<faq.tag {...faq.root}>
-    <input {...faq.search.attrs()} type="search">
-    <details {...faq.row.attrs({ key, text })}>…</details>
-</faq.tag>
+<RichText spans={rich("faq.matched", { count: "" })} attrs={{ count: { "data-faq-count": "" } }} />
 ```
 
 ```ts
-defineElement(faq, (host, signal, { row }) => {
-    for (const { element, values } of row.all()) { … }
-});
+for (const each of refs(host, "[data-faq-count]")) each.textContent = String(hits.size);
 ```
 
-- **Names come from the tag.** Every attribute is `data-<tag>-<role>` plus the
-  field, and the browser refuses to define one tag twice, so two components
-  cannot share an attribute. Two roles of one component that would write the
-  same attribute — `search` with a field `clear`, and a role `searchClear` — are
-  refused when the component is created.
-- **Lookups stay in their instance.** `all`, `one` and `require` return only
-  elements whose nearest ancestor with this tag is the root's. A nested copy
-  keeps its elements, and a lookup from an element inside the instance, like a
-  dropdown's own panel, still counts as that instance. Elements are filtered
-  before they are read, so a broken nested copy cannot fail the outer lookup.
-- **The tag is written once.** `faq.tag` is what the template renders, and the
-  component itself is what `defineElement` registers the behaviour under. A contract stays inert either
-  way: it names things, and nothing in it touches a document, which is why
-  frontmatter can import it.
-- **The names are checked in the editor.** A tag without a hyphen, or a role
-  that is not camelCase, is a compile error where it is written — the rules are
-  types, character by character, as in `i18n/placeholders.ts`. Nothing is
-  validated at run time, because a name that reached the browser malformed would
-  already have been refused there: by `setAttribute`, by `querySelectorAll`, or
-  by `customElements.define`.
-- **Most roles carry nothing**, and say so: `search: marker` rather than
-  `search: {}`, which reads like options somebody forgot to fill in.
-
-- **The roles arrive bound to the instance.** `defineElement` takes the
-  component, so `all`, `one` and `require` need no root: there is no way to
-  write `faq.row.all(document)`, which compiles and returns the roles belonging
-  to no instance at all.
-- **The root says it is one.** `{...faq.root}` writes `data-atlas-root`, so a
-  project gives every root a display in one stylesheet rule rather than a class
-  per component. Forget it and the element says so on the dev server.
-
-`tag` and `root` are the component's own keys, so no role may take them. A role
-that lives outside every instance, such as a footer button that reopens a
-banner, is still plain `markup`.
+Marks are parsed before placeholders are filled, so a run filled with `""`
+still renders as an empty element for the script to write into.
 
 ## `youtube`
 
@@ -655,16 +561,13 @@ right properties is a faithful stand-in.
   `matches` read live as a browser's is, and fakes the `<video>` down to
   `paused`, `currentSrc`, `networkState`, `autoplay`, `play`, `pause` and `load`,
   including what resource selection does after a reload.
-- `tests/markup.test.ts` fakes elements down to four attribute methods and a
-  root that answers bare attribute selectors, and round-trips every field kind
-  through `attrs` and `read`. `type-tests/markup.ts` pins the half that is a
-  compile error.
-- `tests/component.test.ts` builds a small element tree with parents and
-  `closest`, and pins the scoping: a nested instance, two side by side, a root
-  inside the instance, and a broken nested element that must not be read.
-  `type-tests/component.ts` pins the role types and the reserved keys.
-
-`carousel`, `consent`, `element` and `dom` have none. They need a real DOM and
+- `tests/ref.test.ts` fakes a root down to its two query methods, and pins
+  that `ref` throws naming the root and the selector.
+- `tests/element.test.ts` stubs `customElements` to upgrade on `define`, as a
+  browser does, and pins what `connect` is handed.
+
+`carousel` and `consent` have none, and `element` has no lifecycle test — moves
+and teardown. They need a real DOM and
 this package carries no environment for one; adding `happy-dom` as a dev
 dependency and setting `environment` in `vitest.config.ts` is what that would
 take.

package/docs/rich-text.md

@@ -29,10 +29,10 @@ Five marks, one void mark, two escapes. That is the whole vocabulary.
 | Written          | Short for   | Run                                | Argument | Notes                                        |
 | ---------------- | ----------- | ---------------------------------- | -------- | -------------------------------------------- |
 | `[b]…[/b]`       | **b**old    | `{ kind: "bold" }`                 | —        | `<strong>` — emphasis, not a font weight     |
-| `[v:name]…[/v]`  | **v**ariant | `{ kind: "styled", variant }`      | required | the renderer maps `name` to classes          |
+| `[v:name]…[/v]`  | **v**ariant | `{ kind: "variant", variant }`     | required | the renderer maps `name` to classes          |
 | `[a:slot]…[/a]`  | **a**nchor  | `{ kind: "link", to, href, url? }` | required | the **call site** says where `slot` goes     |
-| `[mail]…[/mail]` | `mailto:`   | `{ kind: "email", href }`          | —        | the wrapped text must be the address         |
-| `[tel]…[/tel]`   | `tel:`      | `{ kind: "phone", href }`          | —        | the wrapped text must be the number          |
+| `[mail]…[/mail]` | `mailto:`   | `{ kind: "mail", href }`           | —        | the wrapped text must be the address         |
+| `[tel]…[/tel]`   | `tel:`      | `{ kind: "tel", href }`            | —        | the wrapped text must be the number          |
 | `[br]`           | **br**eak   | `{ kind: "break" }`                | —        | wraps nothing, closed by nothing             |
 | `[[` and `]]`    | an escape   | literal `[` and `]`                | —        | the escapes, matching `{{` and `}}` in `t()` |
 
@@ -192,7 +192,7 @@ what to do:
 
 ```txt
 Message "about.intro" (en-US) carries marks, and t() can only print them.
-Read it with rich(), or with plain(rich(…)) for the words alone.
+Read it with rich(), or with site.plain() for the words alone.
 ```
 
 A malformed mark fails there too, with the same error it would give anywhere
@@ -215,10 +215,8 @@ const plainText = site.plain(locale);
 plainText("about.intro", { company })      // no `venue`, no `ask`
 ```
 
-`plain(rich(…))` is the same answer when the runs are already in hand.
-
 Reach for `t()` when the copy is structurally plain and should stay that way — a
-button label, an `aria-label`. Reach for `plain()` when the answer is prose: it
+button label, an `aria-label`. Reach for `site.plain()` when the answer is prose: it
 keeps working on the day someone adds emphasis to the sentence, where `t()` would
 start throwing.
 
@@ -236,20 +234,20 @@ faqPage([{ question, answer: html(rich("faq.city.a", { network: "network" })) }]
 
 ## The renderer half
 
-lib decides which runs exist and what they say; the project decides what they
-look like. A renderer is a `switch` over `kind` and nothing else — every string
-is already translated, every `href` already resolved.
+`@escape-game-over/atlas/astro/rich-text` renders the runs, and only the runs:
+the caller writes the element around them. The site supplies the look — a class
+per `[v:name]` and one for links — usually in a small wrapper
+([`examples/b2c/src/components/RichText.astro`](../examples/b2c/src/components/RichText.astro)):
 
-Make the `switch` exhaustive. `Span` is a closed union, so `satisfies never` on
-the fallthrough turns a run type added in lib into a compile error in the
-project, which is the failure a `default: return null` cannot have — a new kind
-rendering as nothing at all, on every page, silently.
+```astro
+<p class="…">
+    <RichText spans={rich("about.intro", { venue: "contact" })} variants={{ accent: "…" }} link="…" />
+</p>
+```
 
-[`examples/b2c/src/components/RichText.astro`](../examples/b2c/src/components/RichText.astro)
-is one to copy and restyle. The part worth keeping is its `VARIANTS` map: it is
-the only place a role becomes a colour, so a rebrand is that object rather than a
-sweep through every deployment's sentences. It falls back to no classes for a
-variant it does not know — losing the sentence is the worse failure.
+`attrs` puts attributes on a variant's run, so a script can find it and rewrite
+its words — see [client-scripts.md](client-scripts.md). A variant with neither a
+class nor attrs still renders its words, and warns at build.
 
 ## What fails, and where
 
@@ -270,4 +268,4 @@ variant it does not know — losing the sentence is the worse failure.
 | `[tel]` around a local number                       | build error — write it with a country code                            |
 | `http://` as a link target                          | build error — an `http://` link is a downgrade                        |
 | `"contact#"` — a fragment that names nothing        | build error                                                           |
-| A marked message read with `t()`                    | build error, pointing at `rich()` and `plain()`                       |
+| A marked message read with `t()`                    | build error, pointing at `rich()` and `site.plain()`                  |

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@escape-game-over/atlas",
-    "version": "0.1.24",
+    "version": "0.1.26",
     "type": "module",
     "description": "Typed, data-driven machinery for static multi-locale, multi-deployment Astro sites.",
     "private": false,
@@ -15,18 +15,12 @@
         ".": "./src/index.ts",
         "./astro": "./src/astro/index.ts",
         "./astro/images": "./src/astro/images.ts",
-        "./astro/background-video": "./src/astro/background-video.ts",
-        "./astro/carousel": "./src/astro/carousel.ts",
         "./client": "./src/astro/client.ts",
-        "./astro/consent": "./src/astro/consent.ts",
-        "./astro/dev-log": "./src/astro/dev-log.ts",
-        "./astro/dom": "./src/astro/dom.ts",
-        "./astro/element": "./src/astro/element.ts",
-        "./astro/filters": "./src/astro/filters.ts",
-        "./astro/filters-view": "./src/astro/filters-view.ts",
-        "./astro/markup": "./src/astro/markup.ts",
-        "./astro/meta-tags": "./src/astro/MetaTags.astro",
-        "./astro/youtube": "./src/astro/youtube.ts"
+        "./astro/consent-banner": "./src/astro/ConsentBanner.astro",
+        "./astro/document": "./src/astro/Document.astro",
+        "./astro/element": "./src/astro/AtlasElement.astro",
+        "./astro/image": "./src/astro/Image.astro",
+        "./astro/rich-text": "./src/astro/RichText.astro"
     },
     "bin": {
         "atlas": "bin/use-project.mjs"
@@ -57,10 +51,10 @@
         "typescript": ">=5"
     },
     "devDependencies": {
-        "@biomejs/biome": "2.5.13",
-        "@types/node": "26.5.1",
+        "@biomejs/biome": "2.5.14",
+        "@types/node": "26.6.2",
         "@vitest/coverage-istanbul": "5.0.1",
-        "astro": "7.3.2",
+        "astro": "7.3.3",
         "typescript": "6.0.3",
         "vitest": "5.0.1"
     }

package/src/analytics/google.ts

@@ -1,5 +1,5 @@
 import { warn } from "../warn.ts";
-import { type AnalyticsTags, literal } from "./tags.ts";
+import { type AnalyticsTags, literal, preconnect } from "./tags.ts";
 
 /**
  * Google's tags — Analytics and Tag Manager — and the consent state they read.
@@ -366,16 +366,16 @@ export function googleScripts(
             // Ahead of the inline block, which is the only position that buys
             // anything: for a container the loader's URL is written *by* that
             // block, so this is the only mention of the origin the browser can
-            // act on before the script has run. See `AnalyticsTag`.
-            { kind: "preconnect", origin: TAG_ORIGIN },
-            { kind: "inline", content: inline },
+            // act on before the script has run.
+            preconnect(TAG_ORIGIN),
+            { kind: "script", content: inline },
             ...(first === undefined
                 ? []
                 : [
                       {
-                          kind: "external" as const,
+                          kind: "externalScript" as const,
                           src: `${TAG_ORIGIN}/gtag/js?id=${encodeURIComponent(first)}`,
-                          attributes: {},
+                          attrs: {},
                       },
                   ]),
         ],

package/src/analytics/index.ts

@@ -1,6 +1,7 @@
+import type { MetaTag } from "../meta/tag.ts";
 import type { HttpsUrl } from "../url.ts";
 import { type GoogleSettings, googleEmits, googleScripts } from "./google.ts";
-import type { AnalyticsTag, AnalyticsTags } from "./tags.ts";
+import type { AnalyticsTags } from "./tags.ts";
 import {
     checkUmamiDomains,
     type UmamiSettings,
@@ -28,7 +29,7 @@ export {
     type ConsentState,
     type GoogleSettings,
 } from "./google.ts";
-export type { AnalyticsTag, AnalyticsTags } from "./tags.ts";
+export type { AnalyticsTags } from "./tags.ts";
 export type {
     UmamiReplay,
     UmamiSettings,
@@ -134,6 +135,6 @@ export const NOT_FOUND_TAG = "404";
  */
 export function notFoundAnalytics(
     analytics: AnalyticsSettings | undefined
-): readonly AnalyticsTag[] {
+): readonly MetaTag[] {
     return umamiScripts(analytics?.umami, NOT_FOUND_TAG);
 }