From 20efce2404e8606489f1c6f9d239e3490a368a41 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <sebiitv@gmail.com>
Date: Fri, 17 Jul 2026 16:30:08 +0300
Subject: [PATCH 1/5] feat: add Alpine adapter at full matrix parity
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ship @stainless-code/alpine-layers — plugin magics, x-layer-outlet, Rank-2
layerStack, Svelte-shaped hooks, CDN bootstrap, and docs/site parity.
---
 .agents/skills/docs-voice/SKILL.md            |   2 +-
 .agents/skills/harden-pr/LEDGER.md            |   3 +
 .changeset/alpine-adapter.md                  |   5 +
 .size-limit.json                              |   7 +
 README.md                                     |   3 +-
 apps/docs/blume.config.ts                     |   2 +-
 apps/docs/content/adapters/alpine.mdx         | 182 +++++
 apps/docs/content/adapters/index.mdx          |  35 +-
 apps/docs/content/adapters/meta.ts            |  12 +-
 apps/docs/content/concepts/comparison.mdx     | 194 ++---
 apps/docs/content/concepts/glossary.mdx       |   6 +-
 apps/docs/content/concepts/overview.mdx       |   2 +-
 apps/docs/content/concepts/stability.mdx      |   4 +-
 apps/docs/content/concepts/when-to-use.mdx    |  26 +-
 apps/docs/content/examples/confirm-dialog.mdx |  51 +-
 .../content/guides/headless-rendering.mdx     |  65 +-
 apps/docs/content/guides/install.mdx          |   8 +
 apps/docs/content/guides/nested-overlays.mdx  |  74 +-
 apps/docs/content/reference/adapter-hooks.mdx |  86 +-
 apps/docs/content/reference/api/index.mdx     |  38 +-
 apps/docs/content/reference/core-api.mdx      |  79 +-
 apps/docs/content/reference/index.mdx         |  14 +-
 apps/docs/content/reference/migration.mdx     |  12 +-
 apps/docs/content/reference/roadmap.mdx       |   4 +-
 apps/docs/package.json                        |   1 +
 apps/docs/pages/_home/FrameworkTabs.astro     |  21 +-
 apps/docs/pages/_home/Hero.astro              |   2 +-
 apps/docs/pages/_home/UseCases.astro          |   2 +-
 apps/docs/pages/_home/adapter-snippets.ts     |  45 ++
 apps/docs/public/icons/alpine.svg             |   5 +-
 apps/docs/recipes/confirm-dialog/alpine.html  |  49 ++
 bun.lock                                      |  31 +-
 docs/architecture.md                          |  26 +-
 docs/glossary.md                              |   6 +-
 docs/roadmap.md                               |   4 +-
 knip.json                                     |   8 +
 packages/alpine/README.md                     |  75 ++
 packages/alpine/package.json                  |  88 ++
 packages/alpine/skills/alpine-layers/SKILL.md |  44 +
 packages/alpine/src/alpine-types.ts           |  35 +
 packages/alpine/src/cdn.ts                    |  20 +
 packages/alpine/src/index.test.ts             | 186 +++++
 packages/alpine/src/index.ts                  | 753 ++++++++++++++++++
 packages/alpine/src/layer-client.ts           |  39 +
 packages/alpine/tests-dom/alpinejs.d.ts       |  15 +
 packages/alpine/tests-dom/cdn.test.ts         |  21 +
 packages/alpine/tests-dom/headless.test.ts    |  75 ++
 packages/alpine/tests-dom/inference.test-d.ts |  22 +
 packages/alpine/tests-dom/outlet.test.ts      | 238 ++++++
 packages/alpine/tsconfig.json                 |   4 +
 packages/alpine/tsdown.config.ts              |   9 +
 packages/alpine/vitest.config.ts              |  12 +
 52 files changed, 2467 insertions(+), 283 deletions(-)
 create mode 100644 .changeset/alpine-adapter.md
 create mode 100644 apps/docs/content/adapters/alpine.mdx
 create mode 100644 apps/docs/recipes/confirm-dialog/alpine.html
 create mode 100644 packages/alpine/README.md
 create mode 100644 packages/alpine/package.json
 create mode 100644 packages/alpine/skills/alpine-layers/SKILL.md
 create mode 100644 packages/alpine/src/alpine-types.ts
 create mode 100644 packages/alpine/src/cdn.ts
 create mode 100644 packages/alpine/src/index.test.ts
 create mode 100644 packages/alpine/src/index.ts
 create mode 100644 packages/alpine/src/layer-client.ts
 create mode 100644 packages/alpine/tests-dom/alpinejs.d.ts
 create mode 100644 packages/alpine/tests-dom/cdn.test.ts
 create mode 100644 packages/alpine/tests-dom/headless.test.ts
 create mode 100644 packages/alpine/tests-dom/inference.test-d.ts
 create mode 100644 packages/alpine/tests-dom/outlet.test.ts
 create mode 100644 packages/alpine/tsconfig.json
 create mode 100644 packages/alpine/tsdown.config.ts
 create mode 100644 packages/alpine/vitest.config.ts

diff --git a/.agents/skills/docs-voice/SKILL.md b/.agents/skills/docs-voice/SKILL.md
index 282505d..e6ea098 100644
--- a/.agents/skills/docs-voice/SKILL.md
+++ b/.agents/skills/docs-voice/SKILL.md
@@ -34,7 +34,7 @@ was rejected) and the "when **not** to use it" anti-sell — keep both.
   `meta.ts` icons and tab icons stay. Nested brand groups (e.g. Svelte): icon
   on the group only — don't repeat the same SVG on indented children.
 - **Adapter list order:** core/vanilla → react → preact → solid → angular →
-  vue → lit → svelte (runes → store). Every multi-adapter listing.
+  vue → lit → alpine → svelte (runes → store). Every multi-adapter listing.
 
 ## Don't
 
diff --git a/.agents/skills/harden-pr/LEDGER.md b/.agents/skills/harden-pr/LEDGER.md
index 72fab88..05c104e 100644
--- a/.agents/skills/harden-pr/LEDGER.md
+++ b/.agents/skills/harden-pr/LEDGER.md
@@ -16,6 +16,9 @@ By-design or false-positive findings — do not re-raise.
 
 - **[public-api]** `packages/lit/src/index.ts` `layerClientContext` export — by-design; rationale on the const JSDoc.
 - **[public-api]** `packages/lit/src/index.ts` `StackController` `queued`/`deferClient`/`bindClient` — by-design; rationale on the class/ctor JSDoc (factories are the supported path).
+- **[correctness]** `packages/alpine/src/index.ts` multi-child `x-layer-outlet` template — by-design; Alpine `<template>` loops (`x-for`/`x-if`) require a single root element; outlet matches that contract (document in alpine.mdx).
+- **[docs]** `typedoc.json` omit Alpine/Lit entryPoints — by-design for now; TypeDoc covers core + compiler-friendly adapters; Lit/Alpine documented on adapter pages + softened reference/index claim.
+- **[docs]** `apps/docs/content/adapters/index.mdx` Alpine footnote `⁷` vs `docs/architecture.md` `⁸` — by-design; each matrix numbers footnotes for its own footnote set (architecture also has Lit `⁷`).
 
 ## Deferred
 
diff --git a/.changeset/alpine-adapter.md b/.changeset/alpine-adapter.md
new file mode 100644
index 0000000..c2f2e44
--- /dev/null
+++ b/.changeset/alpine-adapter.md
@@ -0,0 +1,5 @@
+---
+"@stainless-code/alpine-layers": minor
+---
+
+Add `@stainless-code/alpine-layers` — Alpine plugin (`$layers`, `$layer`, `x-layer-outlet`, `Alpine.data('layerStack')`) plus Svelte-shaped JS hooks and CDN bootstrap.
diff --git a/.size-limit.json b/.size-limit.json
index 445746e..5c45667 100644
--- a/.size-limit.json
+++ b/.size-limit.json
@@ -52,6 +52,13 @@
     "limit": "4.5 KB",
     "gzip": true
   },
+  {
+    "name": "@stainless-code/alpine-layers",
+    "path": "packages/alpine/dist/index.mjs",
+    "ignore": ["@stainless-code/layers", "alpinejs"],
+    "limit": "3 KB",
+    "gzip": true
+  },
   {
     "name": "@stainless-code/solid-layers",
     "path": "packages/solid/dist/index.mjs",
diff --git a/README.md b/README.md
index 8365605..edfd1a5 100644
--- a/README.md
+++ b/README.md
@@ -7,7 +7,7 @@
 
 Modals are just async functions you forgot to `await`.
 
-Headless layer/stack manager — modals, dialogs, drawers, popovers, toasts are **layers in named stacks**. Open any layer from anywhere and `await` a typed result. A zero-dependency core plus React, Preact, Solid, Angular, Vue, Lit, and Svelte adapters. State coordination, not UI ownership: Layers owns ordering, keys, transitions, blockers, and the `await client.open(...)` contract; you own rendering, focus, portals, and a11y.
+Headless layer/stack manager — modals, dialogs, drawers, popovers, toasts are **layers in named stacks**. Open any layer from anywhere and `await` a typed result. A zero-dependency core plus React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte adapters. State coordination, not UI ownership: Layers owns ordering, keys, transitions, blockers, and the `await client.open(...)` contract; you own rendering, focus, portals, and a11y.
 
 > Experimental — the API may change between minor releases. Pin your version. ([Stability & versioning](https://stainless-code.com/layers/concepts/stability))
 
@@ -24,6 +24,7 @@ Full docs: [stainless-code.com/layers](https://stainless-code.com/layers).
 | [`@stainless-code/angular-layers`](packages/angular) | `@angular/core`       | `bun add @stainless-code/angular-layers` |
 | [`@stainless-code/vue-layers`](packages/vue)         | `vue`                 | `bun add @stainless-code/vue-layers`     |
 | [`@stainless-code/lit-layers`](packages/lit)         | `lit`, `@lit/context` | `bun add @stainless-code/lit-layers`     |
+| [`@stainless-code/alpine-layers`](packages/alpine)   | `alpinejs`            | `bun add @stainless-code/alpine-layers`  |
 | [`@stainless-code/svelte-layers`](packages/svelte)   | `svelte`              | `bun add @stainless-code/svelte-layers`  |
 
 Install only the adapter for your framework — it pulls the core in transitively and re-exports it, so adapter APIs (`StackProvider`, `useStack`, …) and core APIs (`LayerClient`, `layerOptions`, …) both come from the one package. Each adapter lists its framework as a required peer. Svelte ships two entries: `@stainless-code/svelte-layers` (runes, 5.7+) and `@stainless-code/svelte-layers/store` (stores, 3+).
diff --git a/apps/docs/blume.config.ts b/apps/docs/blume.config.ts
index e4b66b4..dd34251 100644
--- a/apps/docs/blume.config.ts
+++ b/apps/docs/blume.config.ts
@@ -3,7 +3,7 @@ import { defineConfig } from "blume";
 export default defineConfig({
   title: "Layers",
   description:
-    "Headless modal/dialog/drawer/popover/toast manager — open any layer from anywhere. Zero-dep core + React, Preact, Solid, Angular, Vue, Lit, and Svelte adapters.",
+    "Headless modal/dialog/drawer/popover/toast manager — open any layer from anywhere. Zero-dep core + React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte adapters.",
 
   logo: { image: "/logo.svg", text: "Layers" },
 
diff --git a/apps/docs/content/adapters/alpine.mdx b/apps/docs/content/adapters/alpine.mdx
new file mode 100644
index 0000000..09bc35f
--- /dev/null
+++ b/apps/docs/content/adapters/alpine.mdx
@@ -0,0 +1,182 @@
+---
+title: Alpine
+description: Alpine adapter — plugin magics, x-layer-outlet, Rank-2 layerStack + callFor.
+search:
+  tags: ["adapter", "alpine"]
+sidebar:
+  icon: /icons/alpine.svg
+---
+
+`@stainless-code/alpine-layers` binds stacks through an Alpine plugin and markup directives. The core is re-exported.
+
+:::tip
+Alpine builds compiler-free (tsdown, no framework components shipped). Render with `x-layer-outlet` or Rank-2 `layerStack` + `x-for` + `callFor` in your markup — **intentional primitive design**, not a parity gap. See the [parity matrix](/adapters).
+:::
+
+## Install
+
+```package-install
+npm i @stainless-code/alpine-layers
+```
+
+**Peer:** `alpinejs` >=3.13
+
+**Optional peer:** `@alpinejs/focus` >=3.13 — focus trap / inert backdrop (`x-trap.inert.noscroll`)
+
+## Register the plugin
+
+**Vite / bundled app** — register before `Alpine.start()`:
+
+```ts
+import Alpine from "alpinejs";
+import layers from "@stainless-code/alpine-layers";
+
+Alpine.plugin(layers);
+window.Alpine = Alpine;
+Alpine.start();
+```
+
+**CDN** — load the bootstrap **before** Alpine core (registers on `alpine:init`):
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@stainless-code/alpine-layers/cdn"
+></script>
+<script
+  defer
+  src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"
+></script>
+```
+
+The plugin registers `$layers`, `$layer`, `x-layer-outlet`, and `Alpine.data('layerStack', …)`.
+
+## Client
+
+Hold the client in the plugin closure — not `Alpine.store`. `getLayerClient()` lazy-inits on first access. Call `setLayerClient(client?)` only when you need to pin a custom client **before** first use (creates a `LayerClient` when omitted). `createStackHook({ client })` calls `setLayerClient` for you.
+
+```js
+import { setLayerClient } from "@stainless-code/alpine-layers";
+
+setLayerClient(); // optional — only to pin a client before first stack use
+```
+
+:::note
+`setLayerClient` after the singleton exists **throws**. Custom apps: set explicitly in bootstrap; `createStackHook` is the Angular-shaped `{ setClient, useAppStack }` helper (no `AppHost` / `AppLayer`).
+:::
+
+## Render a stack
+
+**Outlet** — declare markup inside `x-layer-outlet`; the directive evaluates the expression as a stack id. Bare `confirm` resolves to `window.confirm` (a function), so the outlet falls back to the `"default"` stack — always quote: `x-layer-outlet="'confirm'"`. Keys by `state.id` and exposes the active row as `$layer` (`LayerComponentProps` bag — `$layer.call`, `$layer.payload`, …):
+
+```html
+<template x-layer-outlet="'confirm'">
+  <div role="dialog">
+    <h2 x-text="$layer.payload.title"></h2>
+    <button type="button" @click="$layer.call.end(true)">Yes</button>
+    <button type="button" @click="$layer.call.end(false)">No</button>
+  </div>
+</template>
+```
+
+:::tip
+Outlet templates need a **single root** element (same Alpine convention as `x-for` / `x-if`). Wrap siblings in one `<div>` (or teleport target).
+:::
+
+**Rank-2** — `Alpine.data('layerStack', stackId?)` returns reactive `{ states, callFor(state) }`; pair with `x-for` where an outlet is not enough:
+
+```html
+<div x-data="layerStack('confirm')">
+  <template x-for="state in states" :key="state.id">
+    <div role="dialog">
+      <h2 x-text="state.payload.title"></h2>
+      <button type="button" @click="callFor(state)?.end(true)">Yes</button>
+    </div>
+  </template>
+</div>
+```
+
+`layerOptions` has **no** `component` field — Alpine markup lives in the outlet / loop, like Svelte runes without shipped `.svelte` files.
+
+:::tip
+No `StackSubscribe` — Rank-2 `layerStack` + `x-for` + `callFor` is intentional (same story as [Svelte runes](/adapters/svelte/runes)). Focus trapping and scroll lock: optional [`@alpinejs/focus`](https://alpinejs.dev/plugins/focus); portaling: consumer [`x-teleport`](https://alpinejs.dev/directives/teleport), not the adapter.
+:::
+
+## Confirm dialog
+
+```html
+<div x-data="demo">
+  <button type="button" @click="remove()">Remove</button>
+
+  <template x-layer-outlet="'confirm'">
+    <div role="dialog">
+      <h2 x-text="$layer.payload.title"></h2>
+      <button type="button" @click="$layer.call.end(true)">Yes</button>
+      <button type="button" @click="$layer.call.end(false)">No</button>
+    </div>
+  </template>
+</div>
+```
+
+```ts
+import Alpine from "alpinejs";
+import layers, {
+  createLayer,
+  layerOptions,
+  setLayerClient,
+} from "@stainless-code/alpine-layers";
+
+Alpine.plugin(layers);
+setLayerClient();
+
+const confirm = layerOptions<{ title: string }, boolean>({
+  stack: "confirm",
+  key: ["confirm", "remove"],
+});
+
+const confirmHandle = createLayer(confirm);
+
+async function remove() {
+  const ok = await confirmHandle.open({ title: "Remove item?" });
+  //    ^? boolean
+}
+
+Alpine.data("demo", () => ({ remove }));
+
+window.Alpine = Alpine;
+Alpine.start();
+```
+
+Prefer `createLayer` / `confirmHandle.open` from JS. `$layers.open` is the template-reachable facade over `client.open` (it lives in Alpine scope; a module-local `client` does not). Pass a full options bag that is in scope (e.g. put `confirm` on `Alpine.data`). For strict CSP, pair Alpine with [`@alpinejs/csp`](https://alpinejs.dev/advanced/csp).
+
+## Primitives
+
+Options bag plus optional trailing `LayerClient`. **Drive** with `createLayer(options, client?)`; **observe** with `createLayerState({ key, … })`. Core headless `createLayer` is re-exported as `createLayerHandle`.
+
+| Export                                                          | Role                                                                                                   |
+| --------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------ |
+| `getLayerClient()` / `setLayerClient(client?)`                  | Singleton client in plugin closure (not `Alpine.store`); `get` lazy-inits; `set` only before first use |
+| `useStack({ stack?, select?, compare? }, client?)`              | Subscribe stack slice into Alpine reactivity                                                           |
+| `useQueuedStack({ … }, client?)`                                | Queued snapshot binding                                                                                |
+| `createLayer(options, client?)`                                 | **Drive** — wired handle + reactive `state` / `queued` / `top`                                         |
+| `createLayerState({ key, stack?, select?, compare? }, client?)` | **Observe** — mounted same-key layers                                                                  |
+| `createLayerQueuedState({ key, … }, client?)`                   | **Observe** — queued same-key layers                                                                   |
+
+## Ergonomic APIs
+
+| Export / surface                 | Role                                                                                                                            |
+| -------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- |
+| `$layers`                        | Magic facade — `open`, `dismissAll`, `getStack` (per-layer dismiss via `$layer.call.dismiss`)                                   |
+| `$layer`                         | Current outlet row as `LayerComponentProps` inside `x-layer-outlet`                                                             |
+| `x-layer-outlet="'<stackId>'"`   | `<template>` outlet; id-keyed, directive `effect` + `cleanup`                                                                   |
+| `Alpine.data('layerStack', id?)` | Rank-2 `{ states, callFor(state) }` + subscribe teardown in `destroy()`                                                         |
+| `useMutationFlow(call)`          | Reactive `pending`; `run(fn).orEnd(response)`                                                                                   |
+| `useLayerGroup(call, options?)`  | `{ open, dismissAll, states, stackId, dispose }` — nest `x-layer-outlet` in markup; call `dispose()` when tearing down manually |
+| `createStackHook(config?)`       | `{ setClient, useAppStack }` — no `AppHost` / `AppLayer`                                                                        |
+
+No `StackSubscribe`, `useStackHandles`, or React-shaped `component` registry — by design. Optional `Alpine.data('confirm', …)` is for reusable **behavior**, not template registration.
+
+## Learn more
+
+- [Lifecycle](/concepts/lifecycle) · [Identity & types](/concepts/identity-and-types)
+- [Adapter parity](/adapters)
diff --git a/apps/docs/content/adapters/index.mdx b/apps/docs/content/adapters/index.mdx
index 1d59864..3807d0f 100644
--- a/apps/docs/content/adapters/index.mdx
+++ b/apps/docs/content/adapters/index.mdx
@@ -12,23 +12,23 @@ Pick a framework binding — same engine, native reactivity. The [core](/adapter
 
 ## Adapter ergonomics
 
-Same primitives on every adapter: client context, `useStack`, **drive** handles, **observe** hooks. Engine parity; wrappers (`StackOutlet`, `createStackHook`, …) are sugar and diverge by design. React/Preact/Solid/Angular/Vue/Lit re-export the full core; Svelte re-exports selectively. Angular and Svelte ship compiler-free — imperative / primitive render, no shipped host components. Lit: `<stack-provider>` is shadow + `<slot>`; outlet / subscribe / `app-host` are light DOM.
+Same primitives on every adapter: client context, `useStack`, **drive** handles, **observe** hooks. Engine parity; wrappers (`StackOutlet`, `createStackHook`, …) are sugar and diverge by design. React/Preact/Solid/Angular/Vue/Lit/Alpine re-export the full core; Svelte re-exports selectively. Angular, Alpine, and Svelte ship compiler-free — markup in your templates, no React-shaped `component` registry. Lit: `<stack-provider>` is shadow + `<slot>`; outlet / subscribe / `app-host` are light DOM.
 
-| Capability                                             | React | Preact | Solid | Angular | Vue | Lit | Svelte (runes) | Svelte (store) |
-| ------------------------------------------------------ | :---: | :----: | :---: | :-----: | :-: | :-: | :------------: | :------------: |
-| Primitives + core re-export                            |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |       ✅       |       ✅       |
-| Drive: `useLayer` / `injectLayer` / `createLayer`      |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |       ✅       |       ✅       |
-| Observe: `useLayerState` / `injectLayerState` / `createLayerState` |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |       ✅       |       ✅       |
-| `StackOutlet` (built-in host)                          |  ✅   |   ✅   |  ✅   |   ✅¹   | ✅  | ✅  |       —⁴       |       —⁴       |
-| `StackSubscribe` (render-prop / scoped slot)           |  ✅   |   ✅   |  ✅   |   —²    | ✅  | ✅  |       —⁴       |       —⁴       |
-| `useStackHandles` (headless `{ states, getCall }`)     |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |       —⁵       |       —⁵       |
-| `useMutationFlow` (async-action helper)                |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |       ✅       |       ✅       |
-| `useLayerGroup` (nested-stack hook)                    |  ✅   |   ✅   |  ✅   |   ✅³   | ✅  | ✅  |      ✅⁶       |      ✅⁶       |
-| `createStackHook` (`useAppStack`/`AppHost`/`AppLayer`) |  ✅   |   ✅   |  ✅   |   ✅³   | ✅  | ✅  |       —⁴       |       —⁴       |
+| Capability                                                         | React | Preact | Solid | Angular | Vue | Lit | Alpine | Svelte (runes) | Svelte (store) |
+| ------------------------------------------------------------------ | :---: | :----: | :---: | :-----: | :-: | :-: | :----: | :------------: | :------------: |
+| Primitives + core re-export                                        |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |   ✅   |       ✅       |       ✅       |
+| Drive: `useLayer` / `injectLayer` / `createLayer`                  |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |   ✅   |       ✅       |       ✅       |
+| Observe: `useLayerState` / `injectLayerState` / `createLayerState` |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |   ✅   |       ✅       |       ✅       |
+| `StackOutlet` (built-in host)                                      |  ✅   |   ✅   |  ✅   |   ✅¹   | ✅  | ✅  |  ✅⁷   |       —⁴       |       —⁴       |
+| `StackSubscribe` (render-prop / scoped slot)                       |  ✅   |   ✅   |  ✅   |   —²    | ✅  | ✅  |   —⁷   |       —⁴       |       —⁴       |
+| `useStackHandles` (headless `{ states, getCall }`)                 |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |   —⁷   |       —⁵       |       —⁵       |
+| `useMutationFlow` (async-action helper)                            |  ✅   |   ✅   |  ✅   |   ✅    | ✅  | ✅  |   ✅   |       ✅       |       ✅       |
+| `useLayerGroup` (nested-stack hook)                                |  ✅   |   ✅   |  ✅   |   ✅³   | ✅  | ✅  |  ✅⁷   |      ✅⁶       |      ✅⁶       |
+| `createStackHook` (`useAppStack`/`AppHost`/`AppLayer`)             |  ✅   |   ✅   |  ✅   |   ✅³   | ✅  | ✅  |  ✅⁷   |       —⁴       |       —⁴       |
 
-¹ Angular ships `renderStack(vcr)` — a compiler-free imperative outlet (`ViewContainerRef.createComponent` + `setInput`, id-keyed so state changes update inputs without recreating components). ² Angular has no `StackSubscribe`; `useStack({ stack, select })` as a signal is the idiomatic equivalent. ³ Angular's `useLayerGroup`/`createStackHook` expose `renderInto(vcr)` instead of an `Outlet` component; `createStackHook` returns `{ provideClient, useAppStack, renderInto }` (no `AppHost`/`AppLayer`). ⁴ Svelte ships no `.svelte` components: render with `{#each useStack({ stack }).current as s}` + `callFor(s)` (runes) / `{#each $stack}` + `callFor(client, stackId, s)` (store) in your own markup. ⁵ Svelte's `useStack({ stack })` already returns the headless pair — `.current` (states) + `callFor`. ⁶ Svelte's `useLayerGroup` exposes the child `stack` (`SvelteStack` / `Readable`) instead of an `Outlet`.
+¹ Angular ships `renderStack(vcr)` — a compiler-free imperative outlet (`ViewContainerRef.createComponent` + `setInput`, id-keyed so state changes update inputs without recreating components). ² Angular has no `StackSubscribe`; `useStack({ stack, select })` as a signal is the idiomatic equivalent. ³ Angular's `useLayerGroup`/`createStackHook` expose `renderInto(vcr)` instead of an `Outlet` component; `createStackHook` returns `{ provideClient, useAppStack, renderInto }` (no `AppHost`/`AppLayer`). ⁴ Svelte ships no `.svelte` components: render with `{#each useStack({ stack }).current as s}` + `callFor(s)` (runes) / `{#each $stack}` + `callFor(client, stackId, s)` (store) in your own markup. ⁵ Svelte's `useStack({ stack })` already returns the headless pair — `.current` (states) + `callFor`. ⁶ Svelte's `useLayerGroup` exposes the child `stack` (`SvelteStack` / `Readable`) instead of an `Outlet`. ⁷ Alpine: `x-layer-outlet` + `$layer` bag; Rank-2 `Alpine.data('layerStack')` + `x-for` + `callFor` instead of `StackSubscribe` / `useStackHandles`; no `component` on `layerOptions`; `createStackHook` → `{ setClient, useAppStack }` (no `AppHost`/`AppLayer`); `getLayerClient` / `setLayerClient` in plugin closure (not `Alpine.store`).
 
-Name map: Angular `injectLayer` (`useLayer` alias); Svelte `createLayer` / `createLayerState`; Solid also aliases `createLayerState`. Full signatures: [Adapter hooks](/reference/adapter-hooks).
+Name map: Angular `injectLayer` (`useLayer` alias); Alpine `createLayer` / `createLayerState` / `useQueuedStack` / `createLayerQueuedState`; Svelte `createLayer` / `createLayerState`; Solid also aliases `createLayerState`. Full signatures: [Adapter hooks](/reference/adapter-hooks).
 
 ## Adapter pages
 
@@ -82,6 +82,13 @@ Name map: Angular `injectLayer` (`useLayer` alias); Svelte `createLayer` / `crea
     description="@stainless-code/lit-layers"
     arrow
   />
+  <Card
+    title="Alpine"
+    icon="/icons/alpine.svg"
+    href="/adapters/alpine"
+    description="@stainless-code/alpine-layers"
+    arrow
+  />
   <Card
     title="Svelte (runes)"
     icon="/icons/svelte.svg"
diff --git a/apps/docs/content/adapters/meta.ts b/apps/docs/content/adapters/meta.ts
index 7183c12..ef52d73 100644
--- a/apps/docs/content/adapters/meta.ts
+++ b/apps/docs/content/adapters/meta.ts
@@ -3,5 +3,15 @@ import { defineMeta } from "blume";
 export default defineMeta({
   title: "Adapters",
   icon: "plug",
-  pages: ["core", "react", "preact", "solid", "angular", "vue", "lit", "svelte"],
+  pages: [
+    "core",
+    "react",
+    "preact",
+    "solid",
+    "angular",
+    "vue",
+    "lit",
+    "alpine",
+    "svelte",
+  ],
 });
diff --git a/apps/docs/content/concepts/comparison.mdx b/apps/docs/content/concepts/comparison.mdx
index 908ba8f..fd30058 100644
--- a/apps/docs/content/concepts/comparison.mdx
+++ b/apps/docs/content/concepts/comparison.mdx
@@ -11,34 +11,34 @@ Experimental — the API may change between minor releases. Pin your version. Se
 
 ## Four kinds of "modal library"
 
-| Category | Examples | Compare on |
-| --- | --- | --- |
-| Orchestration engine | Layers, react-call, ui-call, overlastic | Engine depth + typing + composability |
-| Registry / reducer manager | nice-modal-react, overlay-kit | React DX + adoption |
-| Batteries-included UI | @mantine/modals, vue-final-modal, react-dialog-flow | Integration depth — different category |
-| DOM primitive | Ark/Zag, @corvu/dialog, ui-primitives | Complementary — pair, don't compete |
+| Category                   | Examples                                            | Compare on                             |
+| -------------------------- | --------------------------------------------------- | -------------------------------------- |
+| Orchestration engine       | Layers, react-call, ui-call, overlastic             | Engine depth + typing + composability  |
+| Registry / reducer manager | nice-modal-react, overlay-kit                       | React DX + adoption                    |
+| Batteries-included UI      | @mantine/modals, vue-final-modal, react-dialog-flow | Integration depth — different category |
+| DOM primitive              | Ark/Zag, @corvu/dialog, ui-primitives               | Complementary — pair, don't compete    |
 
 ## What Layers targets (and what it delegates by design)
 
 Layers owns **state coordination, not UI ownership**. The matrix below scores engine axes only — typed <Tooltip tip="A branded key on layerOptions; open() infers payload and response types via DataTag.">await</Tooltip>, named stacks, serial queues, <Tooltip tip="A consumer predicate that gates dismissal; true allows, falsy or a thrown error vetoes.">blockers</Tooltip>, and the rest. Focus traps, portals, backdrop, and confirm chrome live in your component library.
 
-Two views: this matrix contrasts **one exemplar per category**; the [full spectrum](#across-the-whole-landscape) below scores **every audited library across all six frameworks**. Columns here are the libraries evaluators most often weigh against Layers — the React registry incumbents (`nice-modal`, `overlay-kit`), the closest React DX peer (`react-call`), the highest-adoption batteries-included manager (`@mantine/modals` — the category contrast), and the closest multi-framework peer (`overlastic`). Non-React peers like `kolirt/vue-modal`, `@gwn-sheet-stack`, and `dialog-fn` are in the full-spectrum tables.
-
-| Capability | Layers | react-call | nice-modal | overlay-kit | @mantine/modals | overlastic |
-| --- | :---: | :---: | :---: | :---: | :---: | :---: |
-| **Category** | Orchestration engine | Orchestration engine | Registry / reducer | Registry / reducer | Batteries-included UI | Orchestration engine |
-| Multi-framework | ✅ 7 | ❌ R | ❌ R | ❌ R | ❌ R | ✅ 4 |
-| Zero-dep core | ✅ | ✅ | ✅ | ✅ | ❌ | ✅ |
-| Typed await | ✅ DataTag | ✅ | 🟡 | 🟡 | ❌ | 🟡 |
-| Named stacks | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Serial queue + cancel | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Async blockers | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| loadFn + abort + gc | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Payload validation | ✅ Std Schema | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Nested groups | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Upsert / live-update | ✅ | ✅ | 🟡 | 🟡 | ✅ | 🟡 |
-| Transition axis | ✅ 3-state+settle | 🟡 exit delay | 🟡 delayVisible | 🟡 close/unmount | 🟡 | ❌ |
-| SSR subscribe-safe | ✅ | ✅ EMPTY_STACK | 🟡 | 🟡 | 🟡 | ❌ |
+Two views: this matrix contrasts **one exemplar per category**; the [full spectrum](#across-the-whole-landscape) below scores **every audited library across all eight frameworks**. Columns here are the libraries evaluators most often weigh against Layers — the React registry incumbents (`nice-modal`, `overlay-kit`), the closest React DX peer (`react-call`), the highest-adoption batteries-included manager (`@mantine/modals` — the category contrast), and the closest multi-framework peer (`overlastic`). Non-React peers like `kolirt/vue-modal`, `@gwn-sheet-stack`, and `dialog-fn` are in the full-spectrum tables.
+
+| Capability            |        Layers        |      react-call      |     nice-modal     |    overlay-kit     |    @mantine/modals    |      overlastic      |
+| --------------------- | :------------------: | :------------------: | :----------------: | :----------------: | :-------------------: | :------------------: |
+| **Category**          | Orchestration engine | Orchestration engine | Registry / reducer | Registry / reducer | Batteries-included UI | Orchestration engine |
+| Multi-framework       |         ✅ 8         |         ❌ R         |        ❌ R        |        ❌ R        |         ❌ R          |         ✅ 4         |
+| Zero-dep core         |          ✅          |          ✅          |         ✅         |         ✅         |          ❌           |          ✅          |
+| Typed await           |      ✅ DataTag      |          ✅          |         🟡         |         🟡         |          ❌           |          🟡          |
+| Named stacks          |          ✅          |          ❌          |         ❌         |         ❌         |          ❌           |          ❌          |
+| Serial queue + cancel |          ✅          |          ❌          |         ❌         |         ❌         |          ❌           |          ❌          |
+| Async blockers        |          ✅          |          ❌          |         ❌         |         ❌         |          ❌           |          ❌          |
+| loadFn + abort + gc   |          ✅          |          ❌          |         ❌         |         ❌         |          ❌           |          ❌          |
+| Payload validation    |    ✅ Std Schema     |          ❌          |         ❌         |         ❌         |          ❌           |          ❌          |
+| Nested groups         |          ✅          |          ❌          |         ❌         |         ❌         |          ❌           |          ❌          |
+| Upsert / live-update  |          ✅          |          ✅          |         🟡         |         🟡         |          ✅           |          🟡          |
+| Transition axis       |  ✅ 3-state+settle   |    🟡 exit delay     |  🟡 delayVisible   |  🟡 close/unmount  |          🟡           |          ❌          |
+| SSR subscribe-safe    |          ✅          |    ✅ EMPTY_STACK    |         🟡         |         🟡         |          🟡           |          ❌          |
 
 Legend: ✅ full · 🟡 partial · ❌ none · (R) React-only. Cells are engine axes only — see the next section for what Layers deliberately leaves to your UI stack.
 
@@ -48,81 +48,81 @@ Focus containment, ARIA/dialog semantics, portals/top-layer, backdrop/Escape, sc
 
 ## Across the whole landscape
 
-The matrix above contrasts one exemplar per category. The tables below are the full spectrum — every audited library a real evaluator weighs, across all six frameworks, scored on the engine axes Layers targets. One table per category (orchestration engines split into multi-framework and single-framework so no table is wider than the eye can scan). **Layers is the baseline column in every table — the only column green on every row.** `R/V/S/Solid/Ang/Lit` = React/Vue/Svelte/Solid/Angular/Lit; `Nfw` = N frameworks.
+The matrix above contrasts one exemplar per category. The tables below are the full spectrum — every audited library a real evaluator weighs, across all eight frameworks, scored on the engine axes Layers targets. One table per category (orchestration engines split into multi-framework and single-framework so no table is wider than the eye can scan). **Layers is the baseline column in every table — the only column green on every row.** `R/V/S/Solid/Ang/Lit/Alpine` = React/Vue/Svelte/Solid/Angular/Lit/Alpine; `Nfw` = N frameworks.
 
 **Multi-framework orchestration engines**
 
-| Capability | Layers | overlastic | ui-call | dialog-fn | @gwn-sheet-stack |
-| --- | :---: | :---: | :---: | :---: | :---: |
-| Multi-framework | ✅ 7 | ✅ 4 | ✅ 5 | 🟡 3 | 🟡 2 |
-| Zero-dep core | ✅ | ✅ core | ✅ | ✅ | ✅ |
-| Typed await | ✅ DataTag | 🟡 generic | 🟡 generic | 🟡 dismiss=undefined | ✅ `push<R>` |
-| Named stacks | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Serial queue + cancel | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Async blockers | ✅ | ❌ | ❌ | ❌ | ❌ |
-| loadFn + abort + gc | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Payload validation | ✅ Std Schema | ❌ | ❌ | ❌ | ❌ |
-| Nested groups | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Upsert / live-update | ✅ | 🟡 only | 🟡 singleton | 🟡 | 🟡 snapshot |
+| Capability            |    Layers     | overlastic |   ui-call    |      dialog-fn       | @gwn-sheet-stack |
+| --------------------- | :-----------: | :--------: | :----------: | :------------------: | :--------------: |
+| Multi-framework       |     ✅ 8      |    ✅ 4    |     ✅ 5     |         🟡 3         |       🟡 2       |
+| Zero-dep core         |      ✅       |  ✅ core   |      ✅      |          ✅          |        ✅        |
+| Typed await           |  ✅ DataTag   | 🟡 generic |  🟡 generic  | 🟡 dismiss=undefined |   ✅ `push<R>`   |
+| Named stacks          |      ✅       |     ❌     |      ❌      |          ❌          |        ❌        |
+| Serial queue + cancel |      ✅       |     ❌     |      ❌      |          ❌          |        ❌        |
+| Async blockers        |      ✅       |     ❌     |      ❌      |          ❌          |        ❌        |
+| loadFn + abort + gc   |      ✅       |     ❌     |      ❌      |          ❌          |        ❌        |
+| Payload validation    | ✅ Std Schema |     ❌     |      ❌      |          ❌          |        ❌        |
+| Nested groups         |      ✅       |     ❌     |      ❌      |          ❌          |        ❌        |
+| Upsert / live-update  |      ✅       |  🟡 only   | 🟡 singleton |          🟡          |   🟡 snapshot    |
 
 **Single-framework orchestration engines**
 
-| Capability | Layers | react-call | jenesius-vue-modal | ngx-call | @angular-libs/dialog | @svelte-put/async-stack |
-| --- | :---: | :---: | :---: | :---: | :---: | :---: |
-| Multi-framework | ✅ 7 | ❌ React | ❌ Vue | ❌ Angular | ❌ Angular | ❌ Svelte |
-| Zero-dep core | ✅ | ✅ | — | ✅ | — | ✅ |
-| Typed await | ✅ DataTag | ✅ generic | 🟡 any | ✅ generic | ❌ | ✅ resolution |
-| Named stacks | ✅ | ❌ | ✅ NamespaceStore | ❌ | ❌ global list | ❌ single |
-| Serial queue + cancel | ✅ | ❌ | 🟡 close-guard | ❌ | ❌ | ❌ |
-| Async blockers | ✅ | ❌ | ❌ | ❌ | 🟡 beforeClose+plugin | 🟡 onResolve+cancel |
-| loadFn + abort + gc | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Payload validation | ✅ Std Schema | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Nested groups | ✅ | ❌ | ❌ | ❌ | ❌ | ❌ |
-| Upsert / live-update | ✅ | ✅ | — | ✅ | — | — |
+| Capability            |    Layers     | react-call | jenesius-vue-modal |  ngx-call  | @angular-libs/dialog  | @svelte-put/async-stack |
+| --------------------- | :-----------: | :--------: | :----------------: | :--------: | :-------------------: | :---------------------: |
+| Multi-framework       |     ✅ 8      |  ❌ React  |       ❌ Vue       | ❌ Angular |      ❌ Angular       |        ❌ Svelte        |
+| Zero-dep core         |      ✅       |     ✅     |         —          |     ✅     |           —           |           ✅            |
+| Typed await           |  ✅ DataTag   | ✅ generic |       🟡 any       | ✅ generic |          ❌           |      ✅ resolution      |
+| Named stacks          |      ✅       |     ❌     | ✅ NamespaceStore  |     ❌     |    ❌ global list     |        ❌ single        |
+| Serial queue + cancel |      ✅       |     ❌     |   🟡 close-guard   |     ❌     |          ❌           |           ❌            |
+| Async blockers        |      ✅       |     ❌     |         ❌         |     ❌     | 🟡 beforeClose+plugin |   🟡 onResolve+cancel   |
+| loadFn + abort + gc   |      ✅       |     ❌     |         ❌         |     ❌     |          ❌           |           ❌            |
+| Payload validation    | ✅ Std Schema |     ❌     |         ❌         |     ❌     |          ❌           |           ❌            |
+| Nested groups         |      ✅       |     ❌     |         ❌         |     ❌     |          ❌           |           ❌            |
+| Upsert / live-update  |      ✅       |     ✅     |         —          |     ✅     |           —           |            —            |
 
 **Registry / reducer managers**
 
-| Capability | Layers | nice-modal-react | overlay-kit | pushmodal | @ngneat/dialog |
-| --- | :---: | :---: | :---: | :---: | :---: |
-| Multi-framework | ✅ 7 | ❌ React | ❌ React | ❌ React | ❌ Angular |
-| Zero-dep core | ✅ | ✅ | ✅ | — | — |
-| Typed await | ✅ DataTag | 🟡 unknown | 🟡 generic | ❌ void | ✅ afterClosed$ |
-| Named stacks | ✅ | ❌ id-map | ❌ | ✅ LIFO | ❌ |
-| Serial queue + cancel | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Async blockers | ✅ | ❌ | ❌ | ❌ | 🟡 beforeClose |
-| loadFn + abort + gc | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Payload validation | ✅ Std Schema | ❌ | ❌ | ❌ | ❌ |
-| Nested groups | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Upsert / live-update | ✅ | 🟡 | 🟡 | 🟡 replaceWith | — |
+| Capability            |    Layers     | nice-modal-react | overlay-kit |   pushmodal    | @ngneat/dialog  |
+| --------------------- | :-----------: | :--------------: | :---------: | :------------: | :-------------: |
+| Multi-framework       |     ✅ 8      |     ❌ React     |  ❌ React   |    ❌ React    |   ❌ Angular    |
+| Zero-dep core         |      ✅       |        ✅        |     ✅      |       —        |        —        |
+| Typed await           |  ✅ DataTag   |    🟡 unknown    | 🟡 generic  |    ❌ void     | ✅ afterClosed$ |
+| Named stacks          |      ✅       |    ❌ id-map     |     ❌      |    ✅ LIFO     |       ❌        |
+| Serial queue + cancel |      ✅       |        ❌        |     ❌      |       ❌       |       ❌        |
+| Async blockers        |      ✅       |        ❌        |     ❌      |       ❌       | 🟡 beforeClose  |
+| loadFn + abort + gc   |      ✅       |        ❌        |     ❌      |       ❌       |       ❌        |
+| Payload validation    | ✅ Std Schema |        ❌        |     ❌      |       ❌       |       ❌        |
+| Nested groups         |      ✅       |        ❌        |     ❌      |       ❌       |       ❌        |
+| Upsert / live-update  |      ✅       |        🟡        |     🟡      | 🟡 replaceWith |        —        |
 
 **Batteries-included UI** (different product category — ships DOM/a11y)
 
-| Capability | Layers | @mantine/modals | vue-final-modal | svelte-promise-modals | kolirt/vue-modal |
-| --- | :---: | :---: | :---: | :---: | :---: |
-| Multi-framework | ✅ 7 | ❌ React | ❌ Vue | ❌ Svelte | ❌ Vue |
-| Zero-dep core | ✅ | ❌ @mantine/core | ❌ @vueuse+focus-trap | ❌ focus-trap+deepmerge | — |
-| Typed await | ✅ DataTag | ❌ string id | ❌ lifecycle strings | ✅ closeModal prop | ✅ awaitable |
-| Named stacks | ✅ | ❌ | ❌ | ❌ | ✅ grouped |
-| Serial queue + cancel | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Async blockers | ✅ | ❌ | 🟡 beforeClose.stop() | ❌ | ✅ async guards |
-| loadFn + abort + gc | ✅ | ❌ | ❌ | ❌ | ❌ |
-| Payload validation | ✅ Std Schema | ❌ | ❌ | ❌ | ❌ |
-| Nested groups | ✅ | ❌ | ❌ | 🟡 child | ✅ |
-| Upsert / live-update | ✅ | ✅ updateModal | 🟡 patchOptions | ❌ | ✅ replace |
+| Capability            |    Layers     | @mantine/modals  |    vue-final-modal    |  svelte-promise-modals  | kolirt/vue-modal |
+| --------------------- | :-----------: | :--------------: | :-------------------: | :---------------------: | :--------------: |
+| Multi-framework       |     ✅ 8      |     ❌ React     |        ❌ Vue         |        ❌ Svelte        |      ❌ Vue      |
+| Zero-dep core         |      ✅       | ❌ @mantine/core | ❌ @vueuse+focus-trap | ❌ focus-trap+deepmerge |        —         |
+| Typed await           |  ✅ DataTag   |   ❌ string id   | ❌ lifecycle strings  |   ✅ closeModal prop    |   ✅ awaitable   |
+| Named stacks          |      ✅       |        ❌        |          ❌           |           ❌            |    ✅ grouped    |
+| Serial queue + cancel |      ✅       |        ❌        |          ❌           |           ❌            |        ❌        |
+| Async blockers        |      ✅       |        ❌        | 🟡 beforeClose.stop() |           ❌            | ✅ async guards  |
+| loadFn + abort + gc   |      ✅       |        ❌        |          ❌           |           ❌            |        ❌        |
+| Payload validation    | ✅ Std Schema |        ❌        |          ❌           |           ❌            |        ❌        |
+| Nested groups         |      ✅       |        ❌        |          ❌           |        🟡 child         |        ✅        |
+| Upsert / live-update  |      ✅       |  ✅ updateModal  |    🟡 patchOptions    |           ❌            |    ✅ replace    |
 
 **DOM primitive** (complementary — pair, don't compete)
 
-| Capability | Layers | @corvu/dialog | Ark / Zag |
-| --- | :---: | :---: | :---: |
-| Multi-framework | ✅ 7 | ❌ Solid | ✅ R/V/S/Solid |
-| Zero-dep core | ✅ | ✅ | ✅ |
-| Typed await | ✅ DataTag | ❌ no await | ❌ no await |
-| Named stacks | ✅ | ❌ | ❌ |
-| Serial queue + cancel | ✅ | ❌ | ❌ |
-| Async blockers | ✅ | ❌ | ❌ |
-| loadFn + abort + gc | ✅ | ❌ | ❌ |
-| Payload validation | ✅ Std Schema | ❌ | ❌ |
-| Nested groups | ✅ | ❌ | ❌ |
+| Capability            |    Layers     | @corvu/dialog |   Ark / Zag    |
+| --------------------- | :-----------: | :-----------: | :------------: |
+| Multi-framework       |     ✅ 8      |   ❌ Solid    | ✅ R/V/S/Solid |
+| Zero-dep core         |      ✅       |      ✅       |       ✅       |
+| Typed await           |  ✅ DataTag   |  ❌ no await  |  ❌ no await   |
+| Named stacks          |      ✅       |      ❌       |       ❌       |
+| Serial queue + cancel |      ✅       |      ❌       |       ❌       |
+| Async blockers        |      ✅       |      ❌       |       ❌       |
+| loadFn + abort + gc   |      ✅       |      ❌       |       ❌       |
+| Payload validation    | ✅ Std Schema |      ❌       |       ❌       |
+| Nested groups         |      ✅       |      ❌       |       ❌       |
 
 Legend: ✅ full · 🟡 partial · ❌ none. Cells are engine axes only — focus traps, portals, ARIA, and backdrop are delegated to your UI stack (see [By design, not missing](#by-design-not-missing)). `kolirt/vue-modal` is the closest non-React analog: it matches Layers on grouped stacks, async guards, and nested groups, but ships Reka UI integration (batteries) and lacks the serial queue, `loadFn`/abort/`gc`, and Standard Schema validation. The long tail of dormant/abandoned footnote libraries (svelte-modals, vue-modals, demodal, react-popup-manager, …) is covered in the internal landscape research; omitted here because they add no decision signal.
 
@@ -134,20 +134,20 @@ Stars and npm downloads measure adoption, not engine depth. Layers is v0.1.0 and
 Last verified: 2026-07-15
 :::
 
-| Library | Category | Stars | npm dl/mo | Note |
-| --- | --- | --- | --- | --- |
-| nice-modal-react | Registry / reducer | ~2.3k | ~1.1M | Incumbent registry (React) |
-| react-call | Orchestration engine | ~1.3k | ~160k | Closest React DX peer |
-| overlay-kit | Registry / reducer | ~0.7k | ~190k | Toss-backed reducer (React) |
-| react-modal-hook | Registry / reducer | ~0.25k | ~292k | Hook + portal host (React, migration pool) |
-| react-modal-promise | Registry / reducer | ~0.07k | ~187k | Promise primitive (React, migration pool) |
-| pushmodal | Registry / reducer | ~0.2k | ~10k | shadcn LIFO stack (React) |
-| @mantine/modals | Batteries-included UI | (in 31.4k★ monorepo) | — | Batteries-included (React) |
-| vue-final-modal | Batteries-included UI | ~1k | ~275k | Vue batteries-included (stalled since 2024-09) |
-| @corvu/dialog | DOM primitive | ~0.7k | ~38k | Solid DOM primitive (complementary) |
-| jenesius-vue-modal | Orchestration engine | ~160 | ~19k | Vue orchestration engine |
-| svelte-promise-modals | Batteries-included UI | ~34 | — | Svelte batteries-included |
-| Layers | Orchestration engine | ~1 | — | v0.1.0, pre-launch |
+| Library               | Category              | Stars                | npm dl/mo | Note                                           |
+| --------------------- | --------------------- | -------------------- | --------- | ---------------------------------------------- |
+| nice-modal-react      | Registry / reducer    | ~2.3k                | ~1.1M     | Incumbent registry (React)                     |
+| react-call            | Orchestration engine  | ~1.3k                | ~160k     | Closest React DX peer                          |
+| overlay-kit           | Registry / reducer    | ~0.7k                | ~190k     | Toss-backed reducer (React)                    |
+| react-modal-hook      | Registry / reducer    | ~0.25k               | ~292k     | Hook + portal host (React, migration pool)     |
+| react-modal-promise   | Registry / reducer    | ~0.07k               | ~187k     | Promise primitive (React, migration pool)      |
+| pushmodal             | Registry / reducer    | ~0.2k                | ~10k      | shadcn LIFO stack (React)                      |
+| @mantine/modals       | Batteries-included UI | (in 31.4k★ monorepo) | —         | Batteries-included (React)                     |
+| vue-final-modal       | Batteries-included UI | ~1k                  | ~275k     | Vue batteries-included (stalled since 2024-09) |
+| @corvu/dialog         | DOM primitive         | ~0.7k                | ~38k      | Solid DOM primitive (complementary)            |
+| jenesius-vue-modal    | Orchestration engine  | ~160                 | ~19k      | Vue orchestration engine                       |
+| svelte-promise-modals | Batteries-included UI | ~34                  | —         | Svelte batteries-included                      |
+| Layers                | Orchestration engine  | ~1                   | —         | v0.1.0, pre-launch                             |
 
 Live demos, source, and the changelog are the proof — not a star count.
 
diff --git a/apps/docs/content/concepts/glossary.mdx b/apps/docs/content/concepts/glossary.mdx
index 5ab71f1..3cf1877 100644
--- a/apps/docs/content/concepts/glossary.mdx
+++ b/apps/docs/content/concepts/glossary.mdx
@@ -54,10 +54,10 @@ From `LayerClient` down to `keySignature` — every term in code, docs, and issu
     - **Drive vs observe** — **drive** = wired handle (`useLayer` / `injectLayer` / `createLayer`) for `open`/`upsert`/`dismiss`/`update`/`cancelQueued`; **observe** = `useLayerState` / `useLayerQueuedState` / `useQueuedStack` / `useStack` for reactive snapshots without control. Both paths are first-class; `client.open({ …layerOptions, payload })` remains valid.
   </AccordionItem>
   <AccordionItem title="Adapters & rendering">
-    - **Observer / selector** — adapters subscribe to `LayerStack.getSnapshot()` and project via a selector (React/Preact `useSyncExternalStore`, Solid `from`, Angular `signal`, Vue `shallowRef`, Lit reactive controllers, Svelte runes).
+    - **Observer / selector** — adapters subscribe to `LayerStack.getSnapshot()` and project via a selector (React/Preact `useSyncExternalStore`, Solid `from`, Angular `signal`, Vue `shallowRef`, Lit reactive controllers, Alpine `Alpine.reactive` / data `states`, Svelte runes).
     - **Options helper** (`layerOptions`) — identity function carrying `<P, R, E, D>` generics so `LayerClient.open` infers the response type end-to-end.
-    - **Outlet** — renders the active stack. React, Preact, Solid, and Vue ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Lit ships `<stack-outlet>`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](/adapters#adapter-ergonomics).
-    - **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
+    - **Outlet** — renders the active stack. React, Preact, Solid, and Vue ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Lit ships `<stack-outlet>`; Alpine ships `x-layer-outlet` + `$layer`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](/adapters#adapter-ergonomics).
+    - **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Alpine Rank-2 `layerStack` + `callFor`; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
     - **Validator** (`validate`) — a Standard Schema or sync `(input) => output` fn that parses/validates a layer's `payload` at `open`; the layer stores the parsed output. Failure rejects `open` with a `PayloadValidationError`.
   </AccordionItem>
 </Accordion>
diff --git a/apps/docs/content/concepts/overview.mdx b/apps/docs/content/concepts/overview.mdx
index 7e89e5c..80b9c71 100644
--- a/apps/docs/content/concepts/overview.mdx
+++ b/apps/docs/content/concepts/overview.mdx
@@ -1,6 +1,6 @@
 ---
 title: Overview
-description: Overlay state is cross-cutting; a zero-dep headless engine plus seven framework adapters split it from UI rendering.
+description: Overlay state is cross-cutting; a zero-dep headless engine plus eight framework adapters split it from UI rendering.
 search:
   tags: ["concept"]
 ---
diff --git a/apps/docs/content/concepts/stability.mdx b/apps/docs/content/concepts/stability.mdx
index 909f10a..879a4a2 100644
--- a/apps/docs/content/concepts/stability.mdx
+++ b/apps/docs/content/concepts/stability.mdx
@@ -11,9 +11,9 @@ While the project is pre-1.0, treat semver as a signal, not a guarantee of zero
 
 ## What we ship
 
-- A **zero-dep core** (`@stainless-code/layers`) and **seven framework adapters** with engine + primitive parity — React, Preact, Solid, Angular, Vue, Lit, and Svelte.
+- A **zero-dep core** (`@stainless-code/layers`) and **eight framework adapters** with engine + primitive parity — React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte.
 - When the engine gains capability, every adapter moves together.
-- Angular and Svelte diverge by design at the rendering surface (compiler-free builds → imperative / primitive APIs, not shipped outlet components).
+- Angular, Alpine, and Svelte diverge by design at the rendering surface (compiler-free builds → imperative / primitive APIs, not shipped outlet components).
 
 ## Versioning posture
 
diff --git a/apps/docs/content/concepts/when-to-use.mdx b/apps/docs/content/concepts/when-to-use.mdx
index 1e406e9..9806070 100644
--- a/apps/docs/content/concepts/when-to-use.mdx
+++ b/apps/docs/content/concepts/when-to-use.mdx
@@ -9,19 +9,19 @@ Overlay UI is cross-cutting, but component models push its state local. You end
 
 Awaiting a result is **optional** — `void client.open({ ...toast, payload })` is a complete fire-and-forget call; the typed response is a bonus axis, not a requirement.
 
-| Use case                                                                                                                                      | What it involves                                         | Fit                               |
-| --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------- | --------------------------------- |
-| Confirm/prompt that returns a value                                                                                                           | `await open` + `DataTag` response inference              | Ideal                             |
-| Open an overlay from non-UI code (route guard, event bus, effect, util)                                                                       | global `LayerClient.open`                                | Ideal (incl. fire-and-forget)     |
-| Toast / snackbar / progress — one instance, updated live                                                                                      | `upsert` + `update`                                      | Ideal                             |
-| One-at-a-time / sequential flows (onboarding, queued confirms)                                                                                | serial `scope` + `getQueuedSnapshot`                     | Ideal                             |
-| Stacked or nested overlays (drawer → sub-dialog)                                                                                              | layer groups (`useLayerGroup` / `createLayerGroup`)      | Ideal                             |
-| Enter/exit animated overlays                                                                                                                  | `transition` + `enteringDelay`/`exitingDelay` `settle()` | Ideal                             |
-| Guard dismissal ("discard unsaved changes?")                                                                                                  | <Tooltip tip="A consumer predicate that gates dismissal; true allows, falsy or a thrown error vetoes.">blockers</Tooltip> (`addBlocker`, `dismissing`, `dismissAll`)      | Ideal                             |
-| Validate an untrusted payload at open                                                                                                         | `validate` (Standard Schema or a function)               | Nice-to-have                      |
-| One overlay system across React/Preact/Solid/Angular/Vue/Lit/Svelte                                                                               | UI-agnostic core + adapters                              | Ideal                             |
-| A single, always-local overlay opened from one component — no return, stacking, queue, animation, or guard, and no wish for a global registry | —                                                        | Skip → plain controlled component |
-| Static/inline content with no overlay semantics; full-page navigation                                                                         | —                                                        | Skip → plain markup / a router    |
+| Use case                                                                                                                                      | What it involves                                                                                                                                                     | Fit                               |
+| --------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- |
+| Confirm/prompt that returns a value                                                                                                           | `await open` + `DataTag` response inference                                                                                                                          | Ideal                             |
+| Open an overlay from non-UI code (route guard, event bus, effect, util)                                                                       | global `LayerClient.open`                                                                                                                                            | Ideal (incl. fire-and-forget)     |
+| Toast / snackbar / progress — one instance, updated live                                                                                      | `upsert` + `update`                                                                                                                                                  | Ideal                             |
+| One-at-a-time / sequential flows (onboarding, queued confirms)                                                                                | serial `scope` + `getQueuedSnapshot`                                                                                                                                 | Ideal                             |
+| Stacked or nested overlays (drawer → sub-dialog)                                                                                              | layer groups (`useLayerGroup` / `createLayerGroup`)                                                                                                                  | Ideal                             |
+| Enter/exit animated overlays                                                                                                                  | `transition` + `enteringDelay`/`exitingDelay` `settle()`                                                                                                             | Ideal                             |
+| Guard dismissal ("discard unsaved changes?")                                                                                                  | <Tooltip tip="A consumer predicate that gates dismissal; true allows, falsy or a thrown error vetoes.">blockers</Tooltip> (`addBlocker`, `dismissing`, `dismissAll`) | Ideal                             |
+| Validate an untrusted payload at open                                                                                                         | `validate` (Standard Schema or a function)                                                                                                                           | Nice-to-have                      |
+| One overlay system across React/Preact/Solid/Angular/Vue/Lit/Alpine/Svelte                                                                    | UI-agnostic core + adapters                                                                                                                                          | Ideal                             |
+| A single, always-local overlay opened from one component — no return, stacking, queue, animation, or guard, and no wish for a global registry | —                                                                                                                                                                    | Skip → plain controlled component |
+| Static/inline content with no overlay semantics; full-page navigation                                                                         | —                                                                                                                                                                    | Skip → plain markup / a router    |
 
 Comparing Layers to other modal and overlay managers? See [Comparison](/concepts/comparison).
 
diff --git a/apps/docs/content/examples/confirm-dialog.mdx b/apps/docs/content/examples/confirm-dialog.mdx
index b832cef..c22982c 100644
--- a/apps/docs/content/examples/confirm-dialog.mdx
+++ b/apps/docs/content/examples/confirm-dialog.mdx
@@ -15,6 +15,7 @@ import confirmSvelteRunesSrc from "../../recipes/confirm-dialog/svelte-runes.sve
 import confirmSvelteStoreSrc from "../../recipes/confirm-dialog/svelte-store.svelte?raw";
 import confirmAngularSrc from "../../recipes/confirm-dialog/angular.ts?raw";
 import confirmLitSrc from "../../recipes/confirm-dialog/lit.ts?raw";
+import confirmAlpineSrc from "../../recipes/confirm-dialog/alpine.html?raw";
 
 A delete button in a sidebar needs a yes/no. `useLayer(confirm)` + `await confirm.open({ title })` returns the typed boolean.
 
@@ -37,21 +38,51 @@ Declare a typed layer, bind it with `useLayer(confirm)` (or `createLayer` headle
 One complete recipe per framework adapter (live demo above is React).
 
 <Tabs dropdown sync={false} hash={false}>
-  <Tab title="React"><CodeBlock code={confirmSrc} lang="tsx" /></Tab>
-  <Tab title="Preact"><CodeBlock code={confirmPreactSrc} lang="tsx" /></Tab>
-  <Tab title="Solid"><CodeBlock code={confirmSolidSrc} lang="tsx" /></Tab>
-  <Tab title="Angular"><CodeBlock code={confirmAngularSrc} lang="ts" /></Tab>
-  <Tab title="Vue"><CodeBlock code={confirmVueLayerSrc} lang="vue" title="ConfirmDialog.vue" /><CodeBlock code={confirmVueHostSrc} lang="vue" title="App.vue" /></Tab>
-  <Tab title="Lit"><CodeBlock code={confirmLitSrc} lang="ts" /></Tab>
-  <Tab title="Svelte (runes)"><CodeBlock code={confirmSvelteRunesSrc} lang="svelte" /></Tab>
-  <Tab title="Svelte (store)"><CodeBlock code={confirmSvelteStoreSrc} lang="svelte" /></Tab>
+  <Tab title="React">
+    <CodeBlock code={confirmSrc} lang="tsx" />
+  </Tab>
+  <Tab title="Preact">
+    <CodeBlock code={confirmPreactSrc} lang="tsx" />
+  </Tab>
+  <Tab title="Solid">
+    <CodeBlock code={confirmSolidSrc} lang="tsx" />
+  </Tab>
+  <Tab title="Angular">
+    <CodeBlock code={confirmAngularSrc} lang="ts" />
+  </Tab>
+  <Tab title="Vue">
+    <CodeBlock code={confirmVueLayerSrc} lang="vue" title="ConfirmDialog.vue" />
+    <CodeBlock code={confirmVueHostSrc} lang="vue" title="App.vue" />
+  </Tab>
+  <Tab title="Lit">
+    <CodeBlock code={confirmLitSrc} lang="ts" />
+  </Tab>
+  <Tab title="Alpine">
+    <CodeBlock code={confirmAlpineSrc} lang="html" />
+  </Tab>
+  <Tab title="Svelte (runes)">
+    <CodeBlock code={confirmSvelteRunesSrc} lang="svelte" />
+  </Tab>
+  <Tab title="Svelte (store)">
+    <CodeBlock code={confirmSvelteStoreSrc} lang="svelte" />
+  </Tab>
 </Tabs>
 
 ## Integrations
 
 <CardGroup cols={2}>
-  <Card title="Confirm dialog + React Aria" href="/integrations/react-aria/confirm-dialog" icon="/icons/react-aria.svg" arrow />
-  <Card title="Confirm dialog + Base UI" href="/integrations/base-ui/confirm-dialog" icon="/icons/base-ui.svg" arrow />
+  <Card
+    title="Confirm dialog + React Aria"
+    href="/integrations/react-aria/confirm-dialog"
+    icon="/icons/react-aria.svg"
+    arrow
+  />
+  <Card
+    title="Confirm dialog + Base UI"
+    href="/integrations/base-ui/confirm-dialog"
+    icon="/icons/base-ui.svg"
+    arrow
+  />
 </CardGroup>
 
 ## Variations
diff --git a/apps/docs/content/guides/headless-rendering.mdx b/apps/docs/content/guides/headless-rendering.mdx
index 8325a0f..6189a3f 100644
--- a/apps/docs/content/guides/headless-rendering.mdx
+++ b/apps/docs/content/guides/headless-rendering.mdx
@@ -152,16 +152,42 @@ class CustomHost extends LitElement {
 
   render() {
     return html`${this.#handles.states.current.map(
-      (s) => html`<my-modal
-        .call=${this.#handles.getCall(s)}
-        .payload=${s.payload}
-        .transition=${s.transition}
-      ></my-modal>`,
+      (s) =>
+        html`<my-modal
+          .call=${this.#handles.getCall(s)}
+          .payload=${s.payload}
+          .transition=${s.transition}
+        ></my-modal>`,
     )}`;
   }
 }
 ```
 
+</Tab>
+<Tab title="Alpine" icon="/icons/alpine.svg">
+
+```html lineNumbers
+<!-- Rank-2: Alpine.data('layerStack') + x-for + callFor -->
+<div x-data="layerStack('modal')">
+  <template x-for="s in states" :key="s.id">
+    <div role="dialog">
+      <h2 x-text="s.payload.title"></h2>
+      <button type="button" @click="callFor(s)?.end(true)">OK</button>
+    </div>
+  </template>
+</div>
+
+<!-- Convenience outlet: x-layer-outlet + $layer bag -->
+<template x-layer-outlet="'modal'">
+  <div role="dialog">
+    <h2 x-text="$layer.payload.title"></h2>
+    <button type="button" @click="$layer.call.end(true)">OK</button>
+  </div>
+</template>
+```
+
+`layerStack` / `useStack().current` + `callFor` — no `useStackHandles`. Prefer `x-layer-outlet` when markup-per-row is enough.
+
 </Tab>
 <Tab title="Svelte (runes)" icon="/icons/svelte.svg">
 
@@ -241,7 +267,6 @@ function OpenCount() {
 }
 ```
 
-
 </Tab>
 <Tab title="Solid" icon="/icons/solid.svg">
 
@@ -312,6 +337,29 @@ class OpenCount extends LitElement {
 }
 ```
 
+</Tab>
+<Tab title="Alpine" icon="/icons/alpine.svg">
+
+```ts lineNumbers
+import Alpine from "alpinejs";
+import layers, { useStack } from "@stainless-code/alpine-layers";
+
+Alpine.plugin(layers);
+
+Alpine.data("openCount", () => {
+  const count = useStack({ stack: "modal", select: (s) => s.length });
+  return { count };
+});
+```
+
+```html lineNumbers
+<div x-data="openCount">
+  <span x-text="count.current + ' open'"></span>
+</div>
+```
+
+No `StackSubscribe` — `useStack({ stack, select })` with `.current`, or Rank-2 `layerStack` + `x-for`.
+
 </Tab>
 <Tab title="Svelte (runes)" icon="/icons/svelte.svg">
 
@@ -356,11 +404,12 @@ For fully-typed selector output in Vue, prefer `useStack({ stack, select })` in
 | Angular        | `useStackHandles`, `renderStack(vcr)`        | `renderStack`             |
 | Vue            | `useStackHandles`, `StackSubscribe`          | `StackOutlet`             |
 | Lit            | `useStackHandles`, `<stack-subscribe>`       | `<stack-outlet>`          |
+| Alpine         | `layerStack` + `x-for` + `callFor`           | `x-layer-outlet`          |
 | Svelte (runes) | `useStack().current` + `callFor`             | — (render in your markup) |
 | Svelte (store) | `$stack` + `callFor(client, stackId, state)` | —                         |
 
 :::tip
-Svelte's `useStack()` already returns the headless pair — `.current` for states and `callFor` for call contexts. No separate `useStackHandles` export.
+Svelte's `useStack()` already returns the headless pair — `.current` for states and `callFor` for call contexts. No separate `useStackHandles` export. Alpine's `layerStack` / `useStack()` is the same shape.
 :::
 
 Angular has no `StackSubscribe`; `useStack({ stack, select })` as a signal is the idiomatic equivalent.
@@ -370,6 +419,6 @@ Angular has no `StackSubscribe`; `useStack({ stack, select })` as a signal is th
 - Custom portal targets or z-index layering
 - Switching on `state.key` to pick arbitrary components (not the registered `component`)
 - Integrating with a design-system modal primitive that owns its own DOM
-- Angular and Svelte — imperative/primitive rendering by design
+- Angular, Alpine, and Svelte — imperative/primitive rendering by design
 
 Dev warning: `StackOutlet` logs when a layer has no `component` and renders nothing.
diff --git a/apps/docs/content/guides/install.mdx b/apps/docs/content/guides/install.mdx
index be542f9..b388d18 100644
--- a/apps/docs/content/guides/install.mdx
+++ b/apps/docs/content/guides/install.mdx
@@ -63,6 +63,14 @@ Peers: `lit` (≥3.2), `@lit/context` (≥1.1)
 npm i @stainless-code/lit-layers
 ```
 
+## Alpine
+
+Peer: `alpinejs` (≥3.13). Optional peer: `@alpinejs/focus` (≥3.13).
+
+```package-install
+npm i @stainless-code/alpine-layers
+```
+
 ## Svelte
 
 Peer: `svelte` (≥3). Two package entries in one npm package:
diff --git a/apps/docs/content/guides/nested-overlays.mdx b/apps/docs/content/guides/nested-overlays.mdx
index 6033722..2f808c2 100644
--- a/apps/docs/content/guides/nested-overlays.mdx
+++ b/apps/docs/content/guides/nested-overlays.mdx
@@ -15,14 +15,15 @@ A drawer that opens a sub-dialog needs its own stack — but tied to the parent
 import { createLayerGroup } from "@stainless-code/layers";
 
 // headless / custom adapter
-const group = createLayerGroup(client, call);void group.open({ ...nestedConfirm, payload });
+const group = createLayerGroup(client, call);
+void group.open({ ...nestedConfirm, payload });
 group.dismissAll();
 group.dispose(); // usually automatic via adapter lifecycle
 ```
 
 ## Render the child stack inline
 
-Render the child stack inside the parent layer's DOM. React, Preact, Solid, Angular, Vue, Lit, and Svelte each expose a child render path — `Outlet`, `renderInto`, `outlet()`, or the child `stack` (tabs below):
+Render the child stack inside the parent layer's DOM. React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte each expose a child render path — `Outlet`, `renderInto`, `outlet()`, nested `x-layer-outlet`, or the child `stack` (tabs below):
 
 <Tabs>
 <Tab title="React" icon="/icons/react.svg">
@@ -62,7 +63,6 @@ function Drawer({ call }: LayerComponentProps<void, void>) {
 }
 ```
 
-
 </Tab>
 <Tab title="Solid" icon="/icons/solid.svg">
 
@@ -88,7 +88,7 @@ function Drawer(props: LayerComponentProps<void, void>) {
 ```ts lineNumbers
 import { useLayerGroup } from "@stainless-code/angular-layers";
 
-@Component({ /* … */ })
+@Component({/* … */})
 class Drawer {
   group = useLayerGroup(this.call);
   openNested() {
@@ -111,7 +111,8 @@ import { useLayerGroup } from "@stainless-code/vue-layers";
 import type { LayerComponentProps } from "@stainless-code/vue-layers";
 
 const { call } = defineProps<LayerComponentProps<void, void>>();
-const group = useLayerGroup(call);</script>
+const group = useLayerGroup(call);
+</script>
 
 <template>
   <div role="dialog">
@@ -163,6 +164,55 @@ class Drawer extends LitElement {
 }
 ```
 
+</Tab>
+<Tab title="Alpine" icon="/icons/alpine.svg">
+
+```html
+<div role="dialog" x-data="drawer($layer.call)">
+  <button type="button" @click="openNested()">Edit details</button>
+  <template x-layer-outlet="stackId">
+    <div role="dialog">
+      <p x-text="$layer.payload.title"></p>
+      <button type="button" @click="$layer.call.end(true)">Done</button>
+    </div>
+  </template>
+</div>
+```
+
+```ts
+import Alpine from "alpinejs";
+import layers, {
+  layerOptions,
+  setLayerClient,
+  useLayerGroup,
+} from "@stainless-code/alpine-layers";
+
+Alpine.plugin(layers);
+setLayerClient();
+
+const nestedConfirm = layerOptions<{ title: string }, boolean>({
+  key: ["confirm", "nested"],
+});
+
+Alpine.data("drawer", (call) => {
+  const group = useLayerGroup(call);
+  return {
+    stackId: group.stackId,
+    openNested() {
+      void group.open({
+        ...nestedConfirm,
+        payload: { title: "Nested" },
+      });
+    },
+    destroy() {
+      group.dispose();
+    },
+  };
+});
+```
+
+Nest `x-layer-outlet` on `group.stackId` inside a parent outlet row (`x-data="drawer($layer.call)"`). Alpine auto-calls `destroy()` on teardown; call `dispose()` yourself only when tearing down outside that lifecycle.
+
 </Tab>
 <Tab title="Svelte (runes)" icon="/icons/svelte.svg">
 
@@ -214,13 +264,13 @@ Store entry renders via `$childStack` + standalone `callFor` — same `group.ope
 
 ## Inspect the group handle
 
-| Member | Role |
-| ------ | ---- |
-| `open` | Opens on the child stack (stack id pre-bound) |
-| `dismissAll` | Closes all child layers |
-| `states` / `stack` | Reactive snapshot of child layers |
-| `Outlet` / `outlet()` / `renderInto` / `stack` | Render surface (adapter-specific) |
-| `stackId` | Derived id — `` `${parentStackId}~${parentLayerId}~${name}` `` |
+| Member                                                            | Role                                                           |
+| ----------------------------------------------------------------- | -------------------------------------------------------------- |
+| `open`                                                            | Opens on the child stack (stack id pre-bound)                  |
+| `dismissAll`                                                      | Closes all child layers                                        |
+| `states` / `stack`                                                | Reactive snapshot of child layers                              |
+| `Outlet` / `outlet()` / `renderInto` / `x-layer-outlet` / `stack` | Render surface (adapter-specific)                              |
+| `stackId`                                                         | Derived id — `` `${parentStackId}~${parentLayerId}~${name}` `` |
 
 :::warning[Heads up]
 Child stacks cascade on parent dismiss — blockers on the parent are the right place to guard "close drawer with open sub-dialog?". Children are force-drained; see [Dismissal blockers](/guides/dismissal-blockers).
diff --git a/apps/docs/content/reference/adapter-hooks.mdx b/apps/docs/content/reference/adapter-hooks.mdx
index 776ab90..634e992 100644
--- a/apps/docs/content/reference/adapter-hooks.mdx
+++ b/apps/docs/content/reference/adapter-hooks.mdx
@@ -1,11 +1,11 @@
 ---
 title: Adapter hooks
-description: Hook and provider signatures across React, Preact, Solid, Angular, Vue, Lit, and Svelte adapters.
+description: Hook and provider signatures across React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte adapters.
 search:
   tags: ["reference", "adapters"]
 ---
 
-**Wire** a definition to imperative ops, or **observe** stack snapshots for rendering — same options bags on every adapter, framework-native wrappers only. React/Preact/Solid/Angular/Vue/Lit re-export the full core. Svelte re-exports selectively — core's headless `createLayer` is `createLayerHandle`.
+**Wire** a definition to imperative ops, or **observe** stack snapshots for rendering — same options bags on every adapter, framework-native wrappers only. React/Preact/Solid/Angular/Vue/Lit/Alpine re-export the full core. Svelte re-exports selectively — core's headless `createLayer` is `createLayerHandle`.
 
 :::note[Svelte entries]
 `@stainless-code/svelte-layers` (runes, 5.7+) and `@stainless-code/svelte-layers/store` (readable stores, 3+) share client helpers but differ in stack reactivity and rendering.
@@ -13,11 +13,11 @@ search:
 
 ## Wired vs observe
 
-| Role | Hooks | Default return |
-| ---- | ----- | -------------- |
-| **Wire** — `createLayer` + reactive fields | `useLayer` (React / Preact / Solid / Vue / Lit); `injectLayer` (Angular); `createLayer` (Svelte) | `WiredLayerHandle` — ops + `state` / `queued` / `top` |
-| **Observe mounted** — whole stack or per-key filter | `useStack`, `useLayerState` | `LayerState[]` (or selected `T`) |
-| **Observe queued** — serial-waiting layers | `useQueuedStack`, `useLayerQueuedState` | `LayerState[]` (or selected `T`) |
+| Role                                                | Hooks                                                                                                     | Default return                                        |
+| --------------------------------------------------- | --------------------------------------------------------------------------------------------------------- | ----------------------------------------------------- |
+| **Wire** — `createLayer` + reactive fields          | `useLayer` (React / Preact / Solid / Vue / Lit); `injectLayer` (Angular); `createLayer` (Alpine / Svelte) | `WiredLayerHandle` — ops + `state` / `queued` / `top` |
+| **Observe mounted** — whole stack or per-key filter | `useStack`, `useLayerState`                                                                               | `LayerState[]` (or selected `T`)                      |
+| **Observe queued** — serial-waiting layers          | `useQueuedStack`, `useLayerQueuedState`                                                                   | `LayerState[]` (or selected `T`)                      |
 
 Wired handles take a full `layerOptions` bag (including `key`) and expose payload-only `open` / `upsert`:
 
@@ -39,7 +39,7 @@ Lit: pass the element host first (`useLayer(this, options)`, `useLayerState(this
 
 ## Options bags
 
-Shared across React, Preact, Solid, Angular, Vue, and Lit:
+Shared across React, Preact, Solid, Angular, Vue, Lit, and Alpine:
 
 ```ts
 interface UseStackOptions<T = LayerState[]> {
@@ -62,49 +62,53 @@ Svelte runes/store use the same option shapes; runes entries return `SvelteStack
 
 ## Provider / client acquisition
 
-| Adapter | Provider / setup | Client hook |
-| ------- | ---------------- | ----------- |
-| React | `StackProvider({ client?, children })` | `useLayerClient(): LayerClient` |
-| Preact | `StackProvider({ client?, children })` | `useLayerClient(): LayerClient` |
-| Solid | `<LayerClientContext.Provider value={client}>` | `useLayerClient(): LayerClient` |
-| Angular | `provideLayerClient(client?): FactoryProvider` + `LAYER_CLIENT` token | `useLayerClient(): LayerClient` (injection context) |
-| Vue | `provideLayerClient(client?): LayerClient` | `useLayerClient(): LayerClient` |
-| Lit | `provideLayerClient(host, client?): LayerClient` / `<stack-provider .client>` | `useLayerClient(host).current: LayerClient` |
-| Svelte (runes) | `setLayerClient(client?): LayerClient` | `useLayerClient(): LayerClient` |
-| Svelte (store) | `setLayerClient(client?): LayerClient` | `useLayerClient(): LayerClient` |
+| Adapter        | Provider / setup                                                                         | Client hook                                         |
+| -------------- | ---------------------------------------------------------------------------------------- | --------------------------------------------------- |
+| React          | `StackProvider({ client?, children })`                                                   | `useLayerClient(): LayerClient`                     |
+| Preact         | `StackProvider({ client?, children })`                                                   | `useLayerClient(): LayerClient`                     |
+| Solid          | `<LayerClientContext.Provider value={client}>`                                           | `useLayerClient(): LayerClient`                     |
+| Angular        | `provideLayerClient(client?): FactoryProvider` + `LAYER_CLIENT` token                    | `useLayerClient(): LayerClient` (injection context) |
+| Vue            | `provideLayerClient(client?): LayerClient`                                               | `useLayerClient(): LayerClient`                     |
+| Lit            | `provideLayerClient(host, client?): LayerClient` / `<stack-provider .client>`            | `useLayerClient(host).current: LayerClient`         |
+| Alpine         | `setLayerClient(client?)` (optional pin before first use; `getLayerClient()` lazy-inits) | `getLayerClient(): LayerClient`                     |
+| Svelte (runes) | `setLayerClient(client?): LayerClient`                                                   | `useLayerClient(): LayerClient`                     |
+| Svelte (store) | `setLayerClient(client?): LayerClient`                                                   | `useLayerClient(): LayerClient`                     |
 
 ## Hook matrix
 
-| Hook | React / Preact / Solid | Angular | Vue | Lit | Svelte (runes) | Svelte (store) |
-| ---- | ---------------------- | ------- | --- | --- | -------------- | -------------- |
-| Wired handle | `useLayer(options, client?)` | `injectLayer` (`useLayer` alias) | `useLayer(options, client?)` | `useLayer(host, options, client?)` | `createLayer` | `createLayer` |
-| Mounted stack | `useStack(opts?, client?)` | `useStack` / `injectStack` | `useStack(opts?, client?)` | `useStack(host, opts?, client?)` | `useStack` | `useStack` |
-| Queued stack | `useQueuedStack(opts?, client?)` | `useQueuedStack` / `injectQueuedStack` | `useQueuedStack(opts?, client?)` | `useQueuedStack(host, opts?, client?)` | `createQueuedStack` | `createQueuedStack` |
-| Mounted per-key | `useLayerState(opts, client?)` | `useLayerState` / `injectLayerState` | `useLayerState(opts, client?)` | `useLayerState(host, opts, client?)` | `createLayerState` | `createLayerState` |
-| Queued per-key | `useLayerQueuedState(opts, client?)` | `useLayerQueuedState` / `injectLayerQueuedState` | `useLayerQueuedState(opts, client?)` | `useLayerQueuedState(host, opts, client?)` | `createLayerQueuedState` | `createLayerQueuedState` |
-| Client | `useLayerClient()` | `useLayerClient()` | `useLayerClient()` | `useLayerClient(host)` → `.current` | `useLayerClient()` | `useLayerClient()` |
+| Hook            | React / Preact / Solid               | Angular                                          | Vue                                  | Lit                                        | Alpine                   | Svelte (runes)           | Svelte (store)           |
+| --------------- | ------------------------------------ | ------------------------------------------------ | ------------------------------------ | ------------------------------------------ | ------------------------ | ------------------------ | ------------------------ |
+| Wired handle    | `useLayer(options, client?)`         | `injectLayer` (`useLayer` alias)                 | `useLayer(options, client?)`         | `useLayer(host, options, client?)`         | `createLayer`            | `createLayer`            | `createLayer`            |
+| Mounted stack   | `useStack(opts?, client?)`           | `useStack` / `injectStack`                       | `useStack(opts?, client?)`           | `useStack(host, opts?, client?)`           | `useStack`               | `useStack`               | `useStack`               |
+| Queued stack    | `useQueuedStack(opts?, client?)`     | `useQueuedStack` / `injectQueuedStack`           | `useQueuedStack(opts?, client?)`     | `useQueuedStack(host, opts?, client?)`     | `useQueuedStack`         | `createQueuedStack`      | `createQueuedStack`      |
+| Mounted per-key | `useLayerState(opts, client?)`       | `useLayerState` / `injectLayerState`             | `useLayerState(opts, client?)`       | `useLayerState(host, opts, client?)`       | `createLayerState`       | `createLayerState`       | `createLayerState`       |
+| Queued per-key  | `useLayerQueuedState(opts, client?)` | `useLayerQueuedState` / `injectLayerQueuedState` | `useLayerQueuedState(opts, client?)` | `useLayerQueuedState(host, opts, client?)` | `createLayerQueuedState` | `createLayerQueuedState` | `createLayerQueuedState` |
+| Client          | `useLayerClient()`                   | `useLayerClient()`                               | `useLayerClient()`                   | `useLayerClient(host)` → `.current`        | `getLayerClient()`       | `useLayerClient()`       | `useLayerClient()`       |
 
 ### Return shapes
 
-| Hook kind | React / Preact | Solid | Angular | Vue | Lit | Svelte (runes) | Svelte (store) |
-| --------- | -------------- | ----- | ------- | --- | --- | -------------- | -------------- |
-| Wired handle | `WiredLayerHandle` | same | same + `state`/`queued`/`top` as `Signal` | same + refs on fields | same + `StackController` fields | `WiredLayerHandle` + runes getters | `WiredLayerStoreHandle` (`Readable` fields) |
-| `useStack` / `useQueuedStack` | `T` | `Accessor<T>` | `Signal<T>` | `Readonly<Ref<T>>` | `StackController<T>` (`.current`) | `SvelteStack<T>` | `Readable<T>` |
-| `useLayerState` / `useLayerQueuedState` | `U` (default `LayerState[]`) | `Accessor<U>` | `Signal<U>` | `Readonly<Ref<U>>` | `StackController<U>` (`.current`) | `SvelteStack<U>` | `Readable<U>` |
+| Hook kind                               | React / Preact               | Solid         | Angular                                   | Vue                   | Lit                               | Alpine                                    | Svelte (runes)                     | Svelte (store)                              |
+| --------------------------------------- | ---------------------------- | ------------- | ----------------------------------------- | --------------------- | --------------------------------- | ----------------------------------------- | ---------------------------------- | ------------------------------------------- |
+| Wired handle                            | `WiredLayerHandle`           | same          | same + `state`/`queued`/`top` as `Signal` | same + refs on fields | same + `StackController` fields   | same + Alpine `reactive` fields           | `WiredLayerHandle` + runes getters | `WiredLayerStoreHandle` (`Readable` fields) |
+| `useStack` / `useQueuedStack`           | `T`                          | `Accessor<T>` | `Signal<T>`                               | `Readonly<Ref<T>>`    | `StackController<T>` (`.current`) | `AlpineStack<T>` (`.current` + `callFor`) | `SvelteStack<T>`                   | `Readable<T>`                               |
+| `useLayerState` / `useLayerQueuedState` | `U` (default `LayerState[]`) | `Accessor<U>` | `Signal<U>`                               | `Readonly<Ref<U>>`    | `StackController<U>` (`.current`) | `AlpineStack<U>`                          | `SvelteStack<U>`                   | `Readable<U>`                               |
 
-<AutoTypeTable path="../../packages/core/src/createLayer.ts" name="LayerHandle" />
+<AutoTypeTable
+  path="../../packages/core/src/createLayer.ts"
+  name="LayerHandle"
+/>
 
 Wired adapters extend `LayerHandle` with reactive `state`, `queued`, and `top` (`top` = last entry in `state`, the topmost same-key mounted layer).
 
 ### Ergonomic wrappers
 
-| Wrapper | React / Preact / Solid | Angular | Vue | Lit | Svelte |
-| ------- | ---------------------- | ------- | --- | --- | ------ |
-| Stack render | `StackOutlet` | `renderStack(vcr)` | `StackOutlet` | `<stack-outlet>` (`defineStackElements()`) | `{#each …current}` + `callFor` |
-| Headless render | `useStackHandles` | `useStackHandles` | `useStackHandles` | `useStackHandles(host, …)` | — |
-| Nested stack | `useLayerGroup` → `Outlet` | `useLayerGroup` → `renderInto(vcr)` | `useLayerGroup` → `Outlet` | `useLayerGroup(host, call)` → `outlet()` | `useLayerGroup` → `stack` |
-| Async actions | `useMutationFlow` | same | same | `useMutationFlow(host, call)` | same |
-| App factory | `createStackHook` | `createStackHook` → `renderInto` | `createStackHook` | `createStackHook` → CEs | not shipped |
+| Wrapper         | React / Preact / Solid     | Angular                             | Vue                        | Lit                                        | Alpine                                           | Svelte                         |
+| --------------- | -------------------------- | ----------------------------------- | -------------------------- | ------------------------------------------ | ------------------------------------------------ | ------------------------------ |
+| Stack render    | `StackOutlet`              | `renderStack(vcr)`                  | `StackOutlet`              | `<stack-outlet>` (`defineStackElements()`) | `x-layer-outlet`                                 | `{#each …current}` + `callFor` |
+| Headless render | `useStackHandles`          | `useStackHandles`                   | `useStackHandles`          | `useStackHandles(host, …)`                 | Rank-2 `layerStack` + `callFor`                  | —                              |
+| Nested stack    | `useLayerGroup` → `Outlet` | `useLayerGroup` → `renderInto(vcr)` | `useLayerGroup` → `Outlet` | `useLayerGroup(host, call)` → `outlet()`   | `useLayerGroup` → nest `x-layer-outlet`          | `useLayerGroup` → `stack`      |
+| Async actions   | `useMutationFlow`          | same                                | same                       | `useMutationFlow(host, call)`              | same                                             | same                           |
+| App factory     | `createStackHook`          | `createStackHook` → `renderInto`    | `createStackHook`          | `createStackHook` → CEs                    | `createStackHook` → `{ setClient, useAppStack }` | not shipped                    |
 
 ## Stack rendering divergences
 
@@ -128,6 +132,8 @@ function renderStack(
 
 Store entry: `{#each $stack as state}` with `callFor(client, stackId, state)`.
 
+**Alpine** — `x-layer-outlet="'stackId'"` on `<template>` (quote the id — bare names hit `window`); Rank-2 `Alpine.data('layerStack')` + `x-for` + `callFor`. No `component` on `layerOptions`.
+
 :::tip[Cross-adapter porting]
-Wired/observe parity means anything one adapter can do is reachable in another. Angular and Svelte diverge at the **rendering surface** by design (compiler-free builds). Lit is host-first controllers + custom elements (`defineStackElements()`).
+Wired/observe parity means anything one adapter can do is reachable in another. Angular, Alpine, and Svelte diverge at the **rendering surface** by design (compiler-free builds). Lit is host-first controllers + custom elements (`defineStackElements()`).
 :::
diff --git a/apps/docs/content/reference/api/index.mdx b/apps/docs/content/reference/api/index.mdx
index a6dcfda..0a2d1bb 100644
--- a/apps/docs/content/reference/api/index.mdx
+++ b/apps/docs/content/reference/api/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: API
-description: Exhaustive CI-generated TypeDoc reference — every export across core and the adapters.
+description: Exhaustive CI-generated TypeDoc for core and the React/Preact/Solid/Angular/Vue/Svelte entries — Lit and Alpine are on their adapter pages.
 sidebar:
   label: Overview
 search:
@@ -10,7 +10,7 @@ search:
 import Card from "blume/components/content/Card.astro";
 import CardGroup from "blume/components/content/CardGroup.astro";
 
-One TypeDoc module per package. [Reference](/reference) · [Core API](/reference/core-api) · [Adapter hooks](/reference/adapter-hooks)
+One TypeDoc module per entry in `typedoc.json`. Lit and Alpine are on their adapter pages (not generated here yet). [Reference](/reference) · [Core API](/reference/core-api) · [Adapter hooks](/reference/adapter-hooks)
 
 <CardGroup cols={3}>
   <Card title="Core" href="/reference/api/core" icon="/icons/vanilla.svg" arrow>
@@ -19,22 +19,48 @@ One TypeDoc module per package. [Reference](/reference) · [Core API](/reference
   <Card title="React" href="/reference/api/react" icon="/icons/react.svg" arrow>
     `@stainless-code/react-layers`
   </Card>
-  <Card title="Preact" href="/reference/api/preact" icon="/icons/preact.svg" arrow>
+  <Card
+    title="Preact"
+    href="/reference/api/preact"
+    icon="/icons/preact.svg"
+    arrow
+  >
     `@stainless-code/preact-layers`
   </Card>
   <Card title="Solid" href="/reference/api/solid" icon="/icons/solid.svg" arrow>
     `@stainless-code/solid-layers`
   </Card>
-  <Card title="Angular" href="/reference/api/angular" icon="/icons/angular.svg" arrow>
+  <Card
+    title="Angular"
+    href="/reference/api/angular"
+    icon="/icons/angular.svg"
+    arrow
+  >
     `@stainless-code/angular-layers`
   </Card>
   <Card title="Vue" href="/reference/api/vue" icon="/icons/vue.svg" arrow>
     `@stainless-code/vue-layers`
   </Card>
-  <Card title="Svelte (runes)" href="/reference/api/svelte" icon="/icons/svelte.svg" arrow>
+  <Card title="Lit" href="/adapters/lit" icon="/icons/lit.svg" arrow>
+    `@stainless-code/lit-layers` (adapter page)
+  </Card>
+  <Card title="Alpine" href="/adapters/alpine" icon="/icons/alpine.svg" arrow>
+    `@stainless-code/alpine-layers` (adapter page)
+  </Card>
+  <Card
+    title="Svelte (runes)"
+    href="/reference/api/svelte"
+    icon="/icons/svelte.svg"
+    arrow
+  >
     `@stainless-code/svelte-layers`
   </Card>
-  <Card title="Svelte (store)" href="/reference/api/svelte-store" icon="/icons/svelte.svg" arrow>
+  <Card
+    title="Svelte (store)"
+    href="/reference/api/svelte-store"
+    icon="/icons/svelte.svg"
+    arrow
+  >
     `@stainless-code/svelte-layers/store`
   </Card>
   <Card
diff --git a/apps/docs/content/reference/core-api.mdx b/apps/docs/content/reference/core-api.mdx
index f0c88ed..12098cd 100644
--- a/apps/docs/content/reference/core-api.mdx
+++ b/apps/docs/content/reference/core-api.mdx
@@ -5,7 +5,7 @@ search:
   tags: ["reference", "api"]
 ---
 
-Symbols below are exported from `@stainless-code/layers` (`packages/core`). React/Preact/Solid/Angular/Vue/Lit re-export the full core. Svelte re-exports selectively — core's headless `createLayer` is `createLayerHandle`.
+Symbols below are exported from `@stainless-code/layers` (`packages/core`). React/Preact/Solid/Angular/Vue/Lit/Alpine re-export the full core. Svelte re-exports selectively — core's headless `createLayer` is `createLayerHandle`.
 
 :::note[Curated overview]
 This page is a hand-written tour of the core API — method-purpose tables and type tables pulled live from source via `<AutoTypeTable>`. For the authoritative, exhaustive reference (every export, including internals like `ControlledPromise`, `Subscribable`, and all type aliases), see the [generated API reference](/reference/api/core).
@@ -23,20 +23,27 @@ class LayerClient {
   ensureStack(id: string, options?: StackOptions): LayerStack;
   getStackIds(): string[];
   subscribeStacks(listener: (stackId: string) => void): () => void;
-  dismissAll(stackId?: string, response?: unknown, opts?: DismissAllOptions): Promise<void>;
+  dismissAll(
+    stackId?: string,
+    response?: unknown,
+    opts?: DismissAllOptions,
+  ): Promise<void>;
 }
 ```
 
-| Method | Purpose |
-| ------ | ------- |
-| `open` | Opens a layer on a stack; resolves with the dismissal response (or rejects on load/validation failure) |
-| `getStack` | Returns a stack by id, creating the default stack on first access |
-| `ensureStack` | Returns a stack, applying `StackOptions` only when creating it |
-| `getStackIds` | Lists materialized stack ids |
-| `subscribeStacks` | Notifies when a stack is created for the first time |
-| `dismissAll` | Async bulk dismiss on one stack (honors blockers unless `mode: "force"`) |
+| Method            | Purpose                                                                                                |
+| ----------------- | ------------------------------------------------------------------------------------------------------ |
+| `open`            | Opens a layer on a stack; resolves with the dismissal response (or rejects on load/validation failure) |
+| `getStack`        | Returns a stack by id, creating the default stack on first access                                      |
+| `ensureStack`     | Returns a stack, applying `StackOptions` only when creating it                                         |
+| `getStackIds`     | Lists materialized stack ids                                                                           |
+| `subscribeStacks` | Notifies when a stack is created for the first time                                                    |
+| `dismissAll`      | Async bulk dismiss on one stack (honors blockers unless `mode: "force"`)                               |
 
-<AutoTypeTable path="../../packages/core/src/types.ts" name="LayerClientOptions" />
+<AutoTypeTable
+  path="../../packages/core/src/types.ts"
+  name="LayerClientOptions"
+/>
 
 ## LayerStack
 
@@ -63,15 +70,15 @@ class LayerStack {
 }
 ```
 
-| Method | Purpose |
-| ------ | ------- |
-| `getSnapshot` | Stable-ref snapshot of mounted layers (`pending`/`active`/`dismissed`/`error`) |
-| `getQueuedSnapshot` | Serial-scope queue — layers waiting behind an active layer |
-| `subscribe` | Register for snapshot changes (batched via `notifyManager`) |
-| `find` | Topmost mounted layer for a logical key (key signature; `findLast`) |
-| `dismiss` | Resolve one layer; returns whether dismissal succeeded (blockers may veto) |
-| `cancelQueued` | Resolve a serial `queued` layer without mounting; omit `{ id }` → FIFO head for the key, `{ id }` → exact queued instance |
-| `addBlocker` | Stack-scoped dismiss gate; returns a disposer |
+| Method              | Purpose                                                                                                                   |
+| ------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `getSnapshot`       | Stable-ref snapshot of mounted layers (`pending`/`active`/`dismissed`/`error`)                                            |
+| `getQueuedSnapshot` | Serial-scope queue — layers waiting behind an active layer                                                                |
+| `subscribe`         | Register for snapshot changes (batched via `notifyManager`)                                                               |
+| `find`              | Topmost mounted layer for a logical key (key signature; `findLast`)                                                       |
+| `dismiss`           | Resolve one layer; returns whether dismissal succeeded (blockers may veto)                                                |
+| `cancelQueued`      | Resolve a serial `queued` layer without mounting; omit `{ id }` → FIFO head for the key, `{ id }` → exact queued instance |
+| `addBlocker`        | Stack-scoped dismiss gate; returns a disposer                                                                             |
 
 ## LayerState
 
@@ -90,7 +97,13 @@ Per-stack options passed to `ensureStack` or `LayerClientOptions.defaultStackOpt
 Brands a reusable options object's `key` with `DataTag` so `open` infers response and error types without an explicit generic.
 
 ```ts
-function layerOptions<P, R = void, E = DefaultLayerError, D = unknown, RootProps = unknown>(
+function layerOptions<
+  P,
+  R = void,
+  E = DefaultLayerError,
+  D = unknown,
+  RootProps = unknown,
+>(
   options: LayerOptions<P, R, E, D, RootProps> & { key: Key },
 ): LayerOptions<P, R, E, D, RootProps> & { key: DataTag<Key, R, E> };
 ```
@@ -142,7 +155,9 @@ class PayloadValidationError extends Error {
   readonly issues: ReadonlyArray<ValidationIssue>;
 }
 
-function isPayloadValidationError(value: unknown): value is PayloadValidationError;
+function isPayloadValidationError(
+  value: unknown,
+): value is PayloadValidationError;
 ```
 
 ## createLayer
@@ -168,7 +183,10 @@ confirm.dismiss(false);
 confirm.cancelQueued(undefined, { id: "queued-id" }); // optional exact match
 ```
 
-<AutoTypeTable path="../../packages/core/src/createLayer.ts" name="LayerHandle" />
+<AutoTypeTable
+  path="../../packages/core/src/createLayer.ts"
+  name="LayerHandle"
+/>
 
 When `options.validate` is set, `ValidatedLayerHandle` narrows `open`/`upsert` to schema **input** and `current`/`update` to parsed **output**.
 
@@ -187,13 +205,19 @@ function createCallContext<P, R, RootProps = unknown>(
 
 `LayerCallContext` exposes `end`, `dismiss`, `addBlocker`, `update`, `setRunning`, `settle`, plus read-only `ended`, `index`, `stackSize`, `root`, `stackId`, and `layerId`.
 
-<AutoTypeTable path="../../packages/core/src/types.ts" name="LayerCallContext" />
+<AutoTypeTable
+  path="../../packages/core/src/types.ts"
+  name="LayerCallContext"
+/>
 
 ## LayerComponentProps
 
 Props passed to layer components by adapters when rendering a mounted layer.
 
-<AutoTypeTable path="../../packages/core/src/types.ts" name="LayerComponentProps" />
+<AutoTypeTable
+  path="../../packages/core/src/types.ts"
+  name="LayerComponentProps"
+/>
 
 ## createLayerGroup
 
@@ -229,7 +253,10 @@ Wrap independent mutations that should produce one UI update: `notifyManager.bat
 
 ## Dismiss options
 
-<AutoTypeTable path="../../packages/core/src/types.ts" name="DismissAllOptions" />
+<AutoTypeTable
+  path="../../packages/core/src/types.ts"
+  name="DismissAllOptions"
+/>
 
 <AutoTypeTable path="../../packages/core/src/types.ts" name="DismissOptions" />
 
diff --git a/apps/docs/content/reference/index.mdx b/apps/docs/content/reference/index.mdx
index a7b67b8..5e21267 100644
--- a/apps/docs/content/reference/index.mdx
+++ b/apps/docs/content/reference/index.mdx
@@ -7,13 +7,13 @@ The symbols and hook signatures you reach for most often — with minimal exampl
 
 ## What's here
 
-| Page | Contents |
-| ---- | -------- |
-| [Core API](/reference/core-api) | `LayerClient`, `LayerStack`, `layerOptions`, typing helpers, errors, and utilities — a curated tour; see the [generated reference](/reference/api/core) for every export |
-| [Adapter hooks](/reference/adapter-hooks) | Hook and provider matrix across React, Preact, Solid, Angular, Vue, Lit, and Svelte |
-| [Roadmap](/reference/roadmap) | Forward-looking work — not a mirror of shipped `src/` |
-| [Migration](/reference/migration) | Breaking-change policy and migration notes when they ship |
-| [API reference](/reference/api) | Exhaustive CI-generated TypeDoc reference — every export across `core` and the adapters, regenerated on every docs build |
+| Page                                      | Contents                                                                                                                                                                 |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| [Core API](/reference/core-api)           | `LayerClient`, `LayerStack`, `layerOptions`, typing helpers, errors, and utilities — a curated tour; see the [generated reference](/reference/api/core) for every export |
+| [Adapter hooks](/reference/adapter-hooks) | Hook and provider matrix across React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte                                                                              |
+| [Roadmap](/reference/roadmap)             | Forward-looking work — not a mirror of shipped `src/`                                                                                                                    |
+| [Migration](/reference/migration)         | Breaking-change policy and migration notes when they ship                                                                                                                |
+| [API reference](/reference/api)           | Exhaustive CI-generated TypeDoc for `core` and the React/Preact/Solid/Angular/Vue/Svelte entries (Lit/Alpine: adapter pages); regenerated on every docs build            |
 
 ## Release history
 
diff --git a/apps/docs/content/reference/migration.mdx b/apps/docs/content/reference/migration.mdx
index 6fbd2b0..c21f35c 100644
--- a/apps/docs/content/reference/migration.mdx
+++ b/apps/docs/content/reference/migration.mdx
@@ -73,12 +73,12 @@ On `LayerStack`: `cancelQueued(key, response, opts?: { id? })`. Omit `id` → fi
 
 ### Adapter entry names
 
-| Role | React / Preact / Solid / Vue / Lit | Angular | Svelte |
-| ---- | ---------------------------------- | ------- | ------ |
-| Wired | `useLayer` | `injectLayer` (`useLayer` alias) | `createLayer` |
-| Mounted per-key | `useLayerState` | `injectLayerState` | `createLayerState` |
-| Queued stack | `useQueuedStack` | `injectQueuedStack` | `createQueuedStack` |
-| Queued per-key | `useLayerQueuedState` | `injectLayerQueuedState` | `createLayerQueuedState` |
+| Role            | React / Preact / Solid / Vue / Lit | Angular                          | Alpine                   | Svelte                   |
+| --------------- | ---------------------------------- | -------------------------------- | ------------------------ | ------------------------ |
+| Wired           | `useLayer`                         | `injectLayer` (`useLayer` alias) | `createLayer`            | `createLayer`            |
+| Mounted per-key | `useLayerState`                    | `injectLayerState`               | `createLayerState`       | `createLayerState`       |
+| Queued stack    | `useQueuedStack`                   | `injectQueuedStack`              | `useQueuedStack`         | `createQueuedStack`      |
+| Queued per-key  | `useLayerQueuedState`              | `injectLayerQueuedState`         | `createLayerQueuedState` | `createLayerQueuedState` |
 
 :::note[Pin in production]
 Lock `@stainless-code/layers` and your adapter package in `package.json`. Review the changelog before upgrading.
diff --git a/apps/docs/content/reference/roadmap.mdx b/apps/docs/content/reference/roadmap.mdx
index 73c25a6..456e4b5 100644
--- a/apps/docs/content/reference/roadmap.mdx
+++ b/apps/docs/content/reference/roadmap.mdx
@@ -22,9 +22,9 @@ Shipped features live in [Overview](/concepts/overview) + [Glossary](/concepts/g
 
 ## Adapters
 
-- **Qwik** + **Alpine** + **Marko** + **Angular SSR** + **React Native** bindings if demand materializes.
+- **Qwik** + **Marko** + **Angular SSR** bindings if demand materializes.
 
 ## Out of scope
 
-- **No `HostAdapter` / portal abstraction** — `StackOutlet` renders inline; wrap it in your own `createPortal` when you need a portal target. Keeping the core agnostic means no host/portal layer is baked in.
+- **No `HostAdapter` / portal abstraction** — `StackOutlet` renders inline; wrap it in your own `createPortal` or RN `Modal` when you need a different target.
 - Sidecar / nested-portal hosting, route masking, and z-order management — consumer concerns, not core. Re-evaluate only if a real consumer needs them and the agnostic contract can express it without leaking library- or framework-specific details.
diff --git a/apps/docs/package.json b/apps/docs/package.json
index a1a6373..da847e9 100644
--- a/apps/docs/package.json
+++ b/apps/docs/package.json
@@ -34,6 +34,7 @@
     "@astrojs/vue": "7.0.1",
     "@base-ui/react": "1.6.0",
     "@lit/context": "1.1.6",
+    "@stainless-code/alpine-layers": "workspace:*",
     "@stainless-code/angular-layers": "workspace:*",
     "@stainless-code/lit-layers": "workspace:*",
     "@stainless-code/preact-layers": "workspace:*",
diff --git a/apps/docs/pages/_home/FrameworkTabs.astro b/apps/docs/pages/_home/FrameworkTabs.astro
index 2d7f919..1b015f1 100644
--- a/apps/docs/pages/_home/FrameworkTabs.astro
+++ b/apps/docs/pages/_home/FrameworkTabs.astro
@@ -29,6 +29,7 @@ const adapters = [
   { name: "Angular", icon: "/icons/angular.svg" },
   { name: "Vue", icon: "/icons/vue.svg" },
   { name: "Lit", icon: "/icons/lit.svg" },
+  { name: "Alpine", icon: "/icons/alpine.svg" },
   { name: "Svelte (runes)", icon: "/icons/svelte.svg" },
   { name: "Svelte (store)", icon: "/icons/svelte.svg" },
 ];
@@ -36,23 +37,23 @@ const adapters = [
 const rows = [
   {
     feature: "Primitives + core re-export",
-    values: [true, true, true, true, true, true, true, true],
+    values: [true, true, true, true, true, true, true, true, true],
   },
   {
     feature: "StackOutlet (built-in host)",
-    values: [true, true, true, false, true, true, false, false],
+    values: [true, true, true, false, true, true, true, false, false],
   },
   {
     feature: "useLayerGroup",
-    values: [true, true, true, true, true, true, true, true],
+    values: [true, true, true, true, true, true, true, true, true],
   },
   {
     feature: "useMutationFlow",
-    values: [true, true, true, true, true, true, true, true],
+    values: [true, true, true, true, true, true, true, true, true],
   },
   {
     feature: "createStackHook",
-    values: [true, true, true, true, true, true, false, false],
+    values: [true, true, true, true, true, true, true, false, false],
   },
 ];
 
@@ -66,7 +67,7 @@ const featureClass =
 <section>
   <div class="mx-auto max-w-2xl text-center">
     <h2 class="font-medium text-3xl tracking-tight sm:text-4xl">
-      One core, seven adapters.
+      One core, eight adapters.
     </h2>
     <p class="mx-auto mt-4 max-w-lg text-balance text-muted-foreground">
       Declare a layer once, then open and <code
@@ -100,14 +101,14 @@ const featureClass =
         Every adapter, the same API.
       </h3>
       <p class="mx-auto mt-4 max-w-lg text-balance text-muted-foreground">
-        React, Preact, Solid, Angular, Vue, and Lit re-export the full core;
-        Svelte re-exports selectively. Angular and Svelte diverge by design —
-        imperative render instead of shipped outlet components.
+        React, Preact, Solid, Angular, Vue, Lit, and Alpine re-export the full
+        core; Svelte re-exports selectively. Angular, Alpine, and Svelte diverge
+        by design — imperative / markup outlets instead of React-shaped hosts.
       </p>
     </div>
 
     <div class="mt-10 overflow-x-auto rounded-blume border border-border">
-      <table class="w-full min-w-[820px] border-collapse">
+      <table class="w-full min-w-[920px] border-collapse">
         <thead>
           <tr class="bg-muted/50">
             <th class={thClass}>Capability</th>
diff --git a/apps/docs/pages/_home/Hero.astro b/apps/docs/pages/_home/Hero.astro
index 0793cd1..536a5ba 100644
--- a/apps/docs/pages/_home/Hero.astro
+++ b/apps/docs/pages/_home/Hero.astro
@@ -35,7 +35,7 @@ const defaultFramework = "vanilla";
   </p>
 
   <p class="mx-auto mt-4 max-w-2xl text-balance text-muted-foreground">
-    Modals, drawers, toasts, and confirms as named, ordered stacks — open one from any component, effect, or route guard and <code class="rounded bg-muted px-1 font-mono text-sm">await</code> a typed result. Headless core, seven framework adapters.
+    Modals, drawers, toasts, and confirms as named, ordered stacks — open one from any component, effect, or route guard and <code class="rounded bg-muted px-1 font-mono text-sm">await</code> a typed result. Headless core, eight framework adapters.
   </p>
 
   <div class="mx-auto mt-8 flex items-center justify-center gap-10">
diff --git a/apps/docs/pages/_home/UseCases.astro b/apps/docs/pages/_home/UseCases.astro
index fea5964..941ae9f 100644
--- a/apps/docs/pages/_home/UseCases.astro
+++ b/apps/docs/pages/_home/UseCases.astro
@@ -45,7 +45,7 @@ const reachFor = [
   },
   {
     useCase:
-      "One overlay system across React/Preact/Solid/Angular/Vue/Lit/Svelte",
+      "One overlay system across React/Preact/Solid/Angular/Vue/Lit/Alpine/Svelte",
     involves: "UI-agnostic core + adapters",
     fit: "Ideal",
   },
diff --git a/apps/docs/pages/_home/adapter-snippets.ts b/apps/docs/pages/_home/adapter-snippets.ts
index 10aeff0..5867199 100644
--- a/apps/docs/pages/_home/adapter-snippets.ts
+++ b/apps/docs/pages/_home/adapter-snippets.ts
@@ -264,6 +264,51 @@ class AppShell extends LitElement {
     \`;
   }
 }`,
+  },
+  {
+    framework: "alpine",
+    icon: "/icons/alpine.svg",
+    label: "Alpine",
+    installCommand: "bun add @stainless-code/alpine-layers",
+    lang: "html",
+    code: `<script type="module">
+  import Alpine from "alpinejs";
+  import layers, {
+    createLayer,
+    layerOptions,
+    setLayerClient,
+  } from "@stainless-code/alpine-layers";
+
+  Alpine.plugin(layers);
+  setLayerClient();
+
+  const confirm = layerOptions<{ title: string }, boolean>({
+    stack: "confirm",
+    key: ["confirm", "remove"],
+  });
+
+  const c = createLayer(confirm);
+
+  Alpine.data("demo", () => ({
+    async remove() {
+      const ok = await c.open({ title: "Remove?" });
+      //    ^? boolean
+    },
+  }));
+
+  window.Alpine = Alpine;
+  Alpine.start();
+</script>
+
+<div x-data="demo">
+  <template x-layer-outlet="'confirm'">
+    <div role="dialog">
+      <h2 x-text="$layer.payload.title"></h2>
+      <button type="button" @click="$layer.call.end(true)">Yes</button>
+    </div>
+  </template>
+  <button type="button" @click="remove()">Remove</button>
+</div>`,
   },
   {
     framework: "svelte",
diff --git a/apps/docs/public/icons/alpine.svg b/apps/docs/public/icons/alpine.svg
index ba3d399..84be5a8 100644
--- a/apps/docs/public/icons/alpine.svg
+++ b/apps/docs/public/icons/alpine.svg
@@ -1 +1,4 @@
-<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 128 128'><path fill='#77c1d2' fill-rule='evenodd' d='M98.444 35.562 126 62.997 98.444 90.432 70.889 62.997z' clip-rule='evenodd'/><path fill='#2d3441' fill-rule='evenodd' d='m29.556 35.562 57.126 56.876H31.571L2 62.997z' clip-rule='evenodd'/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" image-rendering="optimizeQuality" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" viewBox="0 0 512 234.84">
+  <path fill="#77c1d2" d="M398.22 0 512 113.28 398.22 226.56 284.44 113.28z"/>
+  <path fill="#2d3441" d="m113.78 0 235.87 234.84H122.1L0 113.28z"/>
+</svg>
diff --git a/apps/docs/recipes/confirm-dialog/alpine.html b/apps/docs/recipes/confirm-dialog/alpine.html
new file mode 100644
index 0000000..41b5f90
--- /dev/null
+++ b/apps/docs/recipes/confirm-dialog/alpine.html
@@ -0,0 +1,49 @@
+<!-- Bundler recipe (Vite / Blume). For CDN: load @stainless-code/alpine-layers/cdn before alpinejs@3, then register Alpine.data on alpine:init. -->
+<script type="module">
+  import Alpine from "alpinejs";
+  import layers, {
+    createLayer,
+    layerOptions,
+    setLayerClient,
+  } from "@stainless-code/alpine-layers";
+
+  Alpine.plugin(layers);
+  setLayerClient();
+
+  // Under TypeScript: layerOptions<{ title: string }, boolean>({ … })
+  const confirm = layerOptions({
+    stack: "example-confirm",
+    key: ["example-confirm"],
+  });
+
+  const c = createLayer(confirm);
+
+  Alpine.data("demo", () => ({
+    result: null,
+    async deleteFile() {
+      this.result = null;
+      const ok = await c.open({ title: "Delete this file?" });
+      this.result = ok;
+    },
+  }));
+
+  window.Alpine = Alpine;
+  Alpine.start();
+</script>
+
+<div x-data="demo">
+  <button type="button" @click="deleteFile()">Delete file</button>
+  <template x-if="result !== null">
+    <span x-text="'Result: ' + result"></span>
+  </template>
+
+  <template x-layer-outlet="'example-confirm'">
+    <div role="dialog" aria-modal="true">
+      <h2 x-text="$layer.payload.title"></h2>
+      <div>
+        <button type="button" @click="$layer.call.end(false)">No</button>
+        <button type="button" @click="$layer.call.end(true)">Yes</button>
+      </div>
+    </div>
+  </template>
+</div>
diff --git a/bun.lock b/bun.lock
index 3d8c7ac..e6f4213 100644
--- a/bun.lock
+++ b/bun.lock
@@ -65,6 +65,25 @@
         "vue-tsc": "3.3.7",
       },
     },
+    "packages/alpine": {
+      "name": "@stainless-code/alpine-layers",
+      "version": "0.1.0",
+      "dependencies": {
+        "@stainless-code/layers": "workspace:*",
+      },
+      "devDependencies": {
+        "alpinejs": "3.15.8",
+        "jsdom": "29.1.1",
+        "vitest": "4.1.9",
+      },
+      "peerDependencies": {
+        "@alpinejs/focus": "*",
+        "alpinejs": ">=3.13.0",
+      },
+      "optionalPeers": [
+        "@alpinejs/focus",
+      ],
+    },
     "packages/angular": {
       "name": "@stainless-code/angular-layers",
       "version": "0.1.0",
@@ -1110,6 +1129,8 @@
 
     "@solidjs/testing-library": ["@solidjs/testing-library@0.8.10", "", { "dependencies": { "@testing-library/dom": "^10.4.0" }, "peerDependencies": { "@solidjs/router": ">=0.9.0", "solid-js": ">=1.0.0" }, "optionalPeers": ["@solidjs/router"] }, "sha512-qdeuIerwyq7oQTIrrKvV0aL9aFeuwTd86VYD3afdq5HYEwoox1OBTJy4y8A3TFZr8oAR0nujYgCzY/8wgHGfeQ=="],
 
+    "@stainless-code/alpine-layers": ["@stainless-code/alpine-layers@workspace:packages/alpine"],
+
     "@stainless-code/angular-layers": ["@stainless-code/angular-layers@workspace:packages/angular"],
 
     "@stainless-code/codemap": ["@stainless-code/codemap@0.11.2", "", { "dependencies": { "@clack/prompts": "1.7.0", "@modelcontextprotocol/sdk": "1.29.0", "better-sqlite3": "12.11.1", "chokidar": "5.0.0", "lightningcss": "1.32.0", "oxc-parser": "0.139.0", "oxc-resolver": "11.23.0", "package-manager-detector": "1.7.0", "tinyglobby": "0.2.17", "zod": "4.4.3" }, "bin": { "codemap": "dist/index.mjs" } }, "sha512-MEtXJ2x6LHxH+1MhFng7MIj02pcXODSGcRnTinLUTZ28jQJF7ygapQEAbvCnWhmqYXmlcevJ95Aep+nSlP6NcA=="],
@@ -1396,7 +1417,7 @@
 
     "@vue/language-core": ["@vue/language-core@3.3.7", "", { "dependencies": { "@volar/language-core": "2.4.28", "@vue/compiler-dom": "^3.5.0", "@vue/shared": "^3.5.0", "alien-signals": "^3.2.1", "muggle-string": "^0.4.1", "path-browserify": "^1.0.1", "picomatch": "^4.0.4" } }, "sha512-LzmkKinXAMMoh8Jfi/jMUSDUjuPdv8mynH5WJGKfXyZtDw3hQ6GBaoI6Bcnl/Xqlu32q/0Z6i/trp4VXykzyLw=="],
 
-    "@vue/reactivity": ["@vue/reactivity@3.5.39", "", { "dependencies": { "@vue/shared": "3.5.39" } }, "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog=="],
+    "@vue/reactivity": ["@vue/reactivity@3.1.5", "", { "dependencies": { "@vue/shared": "3.1.5" } }, "sha512-1tdfLmNjWG6t/CsPldh+foumYFo3cpyCHgBYQ34ylaMsJ+SNHQ1kApMIa8jN+i593zQuaw3AdWH0nJTARzCFhg=="],
 
     "@vue/runtime-core": ["@vue/runtime-core@3.5.39", "", { "dependencies": { "@vue/reactivity": "3.5.39", "@vue/shared": "3.5.39" } }, "sha512-9GLtNyRvPAUMbX+7ono0RC2j0guo2LXVi8LvcmAooImACUKm0oFf0jjwbX8/H0AE/t1nxhAkn8RSl9PMCzzxZw=="],
 
@@ -1434,6 +1455,8 @@
 
     "alien-signals": ["alien-signals@3.2.1", "", {}, "sha512-I8FjmltrfnDFoZedi5CG8DghVYNhzb/Ijluz7tCSJH0xpd0484Kowhbb1XDYOxfJpU1p5wnM2X54dA+IfGyD1g=="],
 
+    "alpinejs": ["alpinejs@3.15.8", "", { "dependencies": { "@vue/reactivity": "~3.1.1" } }, "sha512-zxIfCRTBGvF1CCLIOMQOxAyBuqibxSEwS6Jm1a3HGA9rgrJVcjEWlwLcQTVGAWGS8YhAsTRLVrtQ5a5QT9bSSQ=="],
+
     "am-i-vibing": ["am-i-vibing@0.4.0", "", { "dependencies": { "process-ancestry": "^0.1.0" }, "bin": { "am-i-vibing": "dist/cli.mjs" } }, "sha512-MxT4XZL7pzLHpuvhDKdMaQHMGGkJDLluKBLsbstn+8wv9sWcFT6h+0ve9qkml95amVTZtZV83gQe2hY+ojgHLg=="],
 
     "ansi-colors": ["ansi-colors@4.1.3", "", {}, "sha512-/6w/C21Pm1A7aZitlI5Ni/2J6FFQN8i1Cvz3kHABAAbw93v/NlvKdVOqz7CCWz/3iv/JplRSEEZ83XION15ovw=="],
@@ -3422,6 +3445,12 @@
 
     "@vue/devtools-kit/hookable": ["hookable@5.5.3", "", {}, "sha512-Yc+BQe8SvoXH1643Qez1zqLRmbA5rCL+sSmk6TVos0LWVfNIB7PGncdlId77WzLGSIB5KaWgTaNTs2lNVEI6VQ=="],
 
+    "@vue/reactivity/@vue/shared": ["@vue/shared@3.1.5", "", {}, "sha512-oJ4F3TnvpXaQwZJNF3ZK+kLPHKarDmJjJ6jyzVNDKH9md1dptjC7lWR//jrGuLdek/U6iltWxqAnYOu8gCiOvA=="],
+
+    "@vue/runtime-core/@vue/reactivity": ["@vue/reactivity@3.5.39", "", { "dependencies": { "@vue/shared": "3.5.39" } }, "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog=="],
+
+    "@vue/runtime-dom/@vue/reactivity": ["@vue/reactivity@3.5.39", "", { "dependencies": { "@vue/shared": "3.5.39" } }, "sha512-TpsuBJ9gGlZa5d23XcM2y8EXanz9dZeVDQBXRwzy46ItgvM+rWpzs+UVM0wcRLxGvcav0HE5jz2gNL53xlRAog=="],
+
     "anymatch/picomatch": ["picomatch@2.3.2", "", {}, "sha512-V7+vQEJ06Z+c5tSye8S+nHUfI51xoXIXjHQ99cQtKUkQqqO1kO/KCJUfZXuB47h/YBlDhah2H3hdUGXn8ie0oA=="],
 
     "astro/aria-query": ["aria-query@5.3.2", "", {}, "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw=="],
diff --git a/docs/architecture.md b/docs/architecture.md
index 5c1d7d1..555d854 100644
--- a/docs/architecture.md
+++ b/docs/architecture.md
@@ -22,7 +22,7 @@ The seam is a **published package boundary** in a bun-workspaces monorepo: one z
 ```
 
 - **Core** (`packages/core` → `@stainless-code/layers`): `LayerClient` (`ensureStack`, `getStackIds`, `subscribeStacks`), `LayerStack` (`dismiss`/`dismissAll`/`addBlocker`/`settle`/`setRunning`/`cancelQueued`/`getQueuedSnapshot`), `Layer`, `Subscribable`, `notifyManager`, `ControlledPromise`, `createCallContext`, `layerOptions`, `layerKey`/`DataTag`, `createLayer`/`LayerHandle`/`ValidatedLayerHandle`, `createLayerGroup`/`childStackId`, `layerGcCache` (internal), `errors`, payload validation (`StandardSchemaV1`, `Validator`, `PayloadValidationError`, `isPayloadValidationError`), `Register`/`DefaultLayerError`, `utils`. Zero deps; `sideEffects: false`. Entry `.` → `src/index.ts`.
-- **Adapters** (`packages/<fw>` → `@stainless-code/<fw>-layers`): each declares the library or framework as a **required peer dependency** and `@stainless-code/layers` as a direct dependency, re-exports core (including `createLayer`), and exposes the wired/observe hooks (`useLayer` / `useLayerState` / `useQueuedStack` / `useLayerQueuedState` — names vary per § Adapter ergonomics), a `useStack`-shaped binding, an idiomatic client-context provider + `useLayerClient` (React/Preact `StackProvider`; Svelte `setLayerClient`; Vue/Lit `provideLayerClient`; Solid `LayerClientContext`; Angular `LAYER_CLIENT` + `provideLayerClient`), and a rendering surface (`StackOutlet`, or the imperative/primitive equivalent — see § Adapter ergonomics). Lit peers are `lit` + `@lit/context`; CEs register via explicit `defineStackElements()` (not on import). **Svelte ships two entries in one package:** `.` (runes, `svelte/reactivity`, 5.7+) and `./store` (stores, `svelte/store`, 3.0+). All adapters have reached ergonomic parity; Angular and Svelte diverge by design (compiler-free builds → imperative / primitive rendering rather than shipped components); Lit diverges with shadow provider + light-DOM outlet CEs + `LayerGroup.outlet()` (footnote ⁷).
+- **Adapters** (`packages/<fw>` → `@stainless-code/<fw>-layers`): each declares the library or framework as a **required peer dependency** and `@stainless-code/layers` as a direct dependency, re-exports core (including `createLayer`), and exposes the wired/observe hooks (`useLayer` / `useLayerState` / `useQueuedStack` / `useLayerQueuedState` — names vary per § Adapter ergonomics), a `useStack`-shaped binding, an idiomatic client-context provider + `useLayerClient` (React/Preact `StackProvider`; Svelte `setLayerClient`; Vue/Lit `provideLayerClient`; Solid `LayerClientContext`; Angular `LAYER_CLIENT` + `provideLayerClient`; Alpine `getLayerClient` / `setLayerClient` in plugin closure), and a rendering surface (`StackOutlet`, or the imperative/primitive equivalent — see § Adapter ergonomics). Lit peers are `lit` + `@lit/context`; CEs register via explicit `defineStackElements()` (not on import). Alpine peers `alpinejs` (required) plus optional peer `@alpinejs/focus` (`peerDependenciesMeta.optional`); `./cdn` bootstrap mirrors ESM. **Svelte ships two entries in one package:** `.` (runes, `svelte/reactivity`, 5.7+) and `./store` (stores, `svelte/store`, 3.0+). All adapters have reached ergonomic parity; Angular, Alpine, and Svelte diverge by design (compiler-free / markup-in-template → primitive rendering rather than shipped host components or a `component` registry); Lit diverges with shadow provider + light-DOM outlet CEs + `LayerGroup.outlet()` (footnote ⁷).
 
 Cross-package type resolution in dev uses a `@stainless-code/source` export condition (each package's `exports` maps it to `src`) plus tsconfig `customConditions`, so typecheck resolves core's source without a build-order dependency; published consumers get `dist` via the standard `types`/`import` conditions.
 
@@ -30,23 +30,23 @@ The isolation invariant: each adapter package imports **only** `@stainless-code/
 
 ## Adapter ergonomics
 
-Every adapter exposes the same primitives (client context, `useLayerClient`, wired + observe hooks, `useStack`/`useQueuedStack` options-bag subscriptions) and re-exports the full core, so anything one adapter can do is reachable in another through those. On top of the primitives each adapter ships ergonomic wrappers — sugar over the primitives, not extra engine capability. All adapters have reached parity; **Angular and Svelte diverge by design** because they build compiler-free (tsdown, no framework compiler), so they render through imperative / primitive APIs instead of shipped components.
+Every adapter exposes the same primitives (client context, `useLayerClient`, wired + observe hooks, `useStack`/`useQueuedStack` options-bag subscriptions) and re-exports the full core, so anything one adapter can do is reachable in another through those. On top of the primitives each adapter ships ergonomic wrappers — sugar over the primitives, not extra engine capability. All adapters have reached parity; **Angular, Alpine, and Svelte diverge by design** because they build compiler-free (tsdown, no framework compiler), so they render through markup-in-template / primitive APIs instead of shipped host components or a `component` registry.
 
 **Drive vs observe:** `useLayer` / `createLayer` drive; `useLayerState` / `useLayerQueuedState` / `useStack` / `useQueuedStack` observe only. Stack-level ops route via `handle.stack.*` (not re-delegated onto the handle). Terms: [glossary](./glossary.md).
 
 **Array observe + topmost find:** observe hooks return `LayerState[]` (all same-key). `LayerStack.find` is **topmost** (`findLast`); `cancelQueued` without `{ id }` is first-queued (FIFO), with `{ id }` the exact queued instance — different collections, different defaults.
 
-| Capability                                             | React | Preact | Vue | Solid | Angular | Lit | Svelte (runes) | Svelte (store) |
-| ------------------------------------------------------ | :---: | :----: | :-: | :---: | :-----: | :-: | :------------: | :------------: |
-| Primitives + core re-export                            |  ✅   |   ✅   | ✅  |  ✅   |   ✅    | ✅  |       ✅       |       ✅       |
-| `StackOutlet` (built-in host)                          |  ✅   |   ✅   | ✅  |  ✅   |   ✅¹   | ✅  |       —⁴       |       —⁴       |
-| `StackSubscribe` (render-prop / scoped slot)           |  ✅   |   ✅   | ✅  |  ✅   |   —²    | ✅  |       —⁴       |       —⁴       |
-| `useStackHandles` (headless `{ states, getCall }`)     |  ✅   |   ✅   | ✅  |  ✅   |   ✅    | ✅  |       —⁵       |       —⁵       |
-| `useMutationFlow` (async-action helper)                |  ✅   |   ✅   | ✅  |  ✅   |   ✅    | ✅  |       ✅       |       ✅       |
-| `useLayerGroup` (nested-stack hook)                    |  ✅   |   ✅   | ✅  |  ✅   |   ✅³   | ✅  |      ✅⁶       |      ✅⁶       |
-| `createStackHook` (`useAppStack`/`AppHost`/`AppLayer`) |  ✅   |   ✅   | ✅  |  ✅   |   ✅³   | ✅  |       —⁴       |       —⁴       |
+| Capability                                             | React | Preact | Vue | Solid | Angular | Lit | Alpine | Svelte (runes) | Svelte (store) |
+| ------------------------------------------------------ | :---: | :----: | :-: | :---: | :-----: | :-: | :----: | :------------: | :------------: |
+| Primitives + core re-export                            |  ✅   |   ✅   | ✅  |  ✅   |   ✅    | ✅  |   ✅   |       ✅       |       ✅       |
+| `StackOutlet` (built-in host)                          |  ✅   |   ✅   | ✅  |  ✅   |   ✅¹   | ✅  |  ✅⁸   |       —⁴       |       —⁴       |
+| `StackSubscribe` (render-prop / scoped slot)           |  ✅   |   ✅   | ✅  |  ✅   |   —²    | ✅  |   —⁸   |       —⁴       |       —⁴       |
+| `useStackHandles` (headless `{ states, getCall }`)     |  ✅   |   ✅   | ✅  |  ✅   |   ✅    | ✅  |   —⁸   |       —⁵       |       —⁵       |
+| `useMutationFlow` (async-action helper)                |  ✅   |   ✅   | ✅  |  ✅   |   ✅    | ✅  |   ✅   |       ✅       |       ✅       |
+| `useLayerGroup` (nested-stack hook)                    |  ✅   |   ✅   | ✅  |  ✅   |   ✅³   | ✅  |  ✅⁸   |      ✅⁶       |      ✅⁶       |
+| `createStackHook` (`useAppStack`/`AppHost`/`AppLayer`) |  ✅   |   ✅   | ✅  |  ✅   |   ✅³   | ✅  |  ✅⁸   |       —⁴       |       —⁴       |
 
-¹ Angular ships `renderStack(vcr)` — a compiler-free imperative outlet (`ViewContainerRef.createComponent` + `setInput`, id-keyed so state changes update inputs without recreating components). ² Angular has no `StackSubscribe`; its `useStack({ select })` signal is the idiomatic equivalent. ³ Angular's `useLayerGroup`/`createStackHook` expose `renderInto(vcr)` instead of an `Outlet` component; `createStackHook` returns `{ provideClient, useAppStack, renderInto }` (no `AppHost`/`AppLayer`). ⁴ Svelte ships no `.svelte` components: render with `{#each useStack().current as s}` + `callFor(s)` (runes) / `{#each $stack}` + `callFor(client, stackId, s)` (store) in your own markup. ⁵ Svelte's `useStack()` already returns the headless pair — `.current` (states) + `callFor`. ⁶ Svelte's `useLayerGroup` exposes the child `stack` (`SvelteStack` / `Readable`) instead of an `Outlet`. ⁷ Lit's `useLayerGroup` exposes `outlet(): TemplateResult` (router `Routes.outlet()`-shaped) instead of an `Outlet` component; `StackProvider` uses default shadow + `<slot>`; `StackOutlet`/`StackSubscribe`/`app-host` are light-DOM CEs. Register via explicit `defineStackElements()` (not on import; `"sideEffects": false`). Layer `component` is a `LitElement` constructor or `(props) => TemplateResult` — no tag strings. No `./signals` until Lit first-party signals (Svelte dual-API bar); `@lit/context` `ContextRoot` stays optional for late-upgraded providers (not auto-installed).
+¹ Angular ships `renderStack(vcr)` — a compiler-free imperative outlet (`ViewContainerRef.createComponent` + `setInput`, id-keyed so state changes update inputs without recreating components). ² Angular has no `StackSubscribe`; its `useStack({ select })` signal is the idiomatic equivalent. ³ Angular's `useLayerGroup`/`createStackHook` expose `renderInto(vcr)` instead of an `Outlet` component; `createStackHook` returns `{ provideClient, useAppStack, renderInto }` (no `AppHost`/`AppLayer`). ⁴ Svelte ships no `.svelte` components: render with `{#each useStack().current as s}` + `callFor(s)` (runes) / `{#each $stack}` + `callFor(client, stackId, s)` (store) in your own markup. ⁵ Svelte's `useStack()` already returns the headless pair — `.current` (states) + `callFor`. ⁶ Svelte's `useLayerGroup` exposes the child `stack` (`SvelteStack` / `Readable`) instead of an `Outlet`. ⁷ Lit's `useLayerGroup` exposes `outlet(): TemplateResult` (router `Routes.outlet()`-shaped) instead of an `Outlet` component; `StackProvider` uses default shadow + `<slot>`; `StackOutlet`/`StackSubscribe`/`app-host` are light-DOM CEs. Register via explicit `defineStackElements()` (not on import; `"sideEffects": false`). Layer `component` is a `LitElement` constructor or `(props) => TemplateResult` — no tag strings. No `./signals` until Lit first-party signals (Svelte dual-API bar); `@lit/context` `ContextRoot` stays optional for late-upgraded providers (not auto-installed). ⁸ Alpine: `x-layer-outlet` + `$layer` (outlet expression evaluates to a stack id string — quote in markup); Rank-2 `Alpine.data('layerStack')` + `x-for` + `callFor`; no `component` on `layerOptions`; `createStackHook` → `{ setClient, useAppStack }` (no `AppHost`/`AppLayer`); client via `getLayerClient` / `setLayerClient` (not `Alpine.store`); CDN `./cdn` before Alpine core (`alpine:init`).
 
 Per-adapter API detail lives on the [Blume adapters pages](https://stainless-code.com/layers/adapters); this matrix is the cross-adapter comparison for choosing and porting between adapters.
 
@@ -201,4 +201,4 @@ Each package owns its tests (`bun run --filter '*' test` fans out).
 
 Adapter binding tests mock the library or framework module (`solid-js` → client build; `@angular/core` stub; `preact/compat` stub) or use a real reactive scope (`vue` `effectScope`), and assert the value contract. The reactive auto-update path that needs a full renderer is pinned per adapter by the DOM suites; the `LayerStack` subscription it rides on is pinned in core tests. Package-level import isolation (each adapter only depends on core + its library or framework peer) is enforced by the package boundary + `sherif`/`knip` rather than a per-file test.
 
-**DOM-harness convention:** each DOM-tested package owns a `vitest.config.ts` + its framework's testing library + `jsdom`/`vitest` devDeps (React/Preact/Vue `@testing-library/<fw>`; Solid `vite-plugin-solid` + `@solidjs/testing-library`; Angular `@analogjs/vite-plugin-angular` + TestBed with a self-contained `tsconfig.spec.json`; Lit vitest + jsdom with real custom elements; Svelte `@sveltejs/vite-plugin-svelte` + `@testing-library/svelte`), a `test:dom` script, and its `tests-dom/**` registered as a `knip` entry. Test deps are version-pinned to match React's so `sherif` stays green. DOM tests resolve the package by name → its built `dist`, so **build before `test:dom`** (the root `check` builds first).
+**DOM-harness convention:** each DOM-tested package owns a `vitest.config.ts` + its framework's testing library + `jsdom`/`vitest` devDeps (React/Preact/Vue `@testing-library/<fw>`; Solid `vite-plugin-solid` + `@solidjs/testing-library`; Angular `@analogjs/vite-plugin-angular` + TestBed with a self-contained `tsconfig.spec.json`; Lit vitest + jsdom with real custom elements; Alpine vitest + jsdom with real `alpinejs`; Svelte `@sveltejs/vite-plugin-svelte` + `@testing-library/svelte`), a `test:dom` script, and its `tests-dom/**` registered as a `knip` entry. Test deps are version-pinned to match React's so `sherif` stays green. DOM tests resolve the package by name → its built `dist`, so **build before `test:dom`** (the root `check` builds first).
diff --git a/docs/glossary.md b/docs/glossary.md
index 3ee0f70..fe9b75a 100644
--- a/docs/glossary.md
+++ b/docs/glossary.md
@@ -27,10 +27,10 @@ Ubiquitous language for the `@stainless-code/layers` domain. Keep terms stable a
 - **scope** — per-stack queueing on `StackOptions`: `scope: { strategy: "serial" | "parallel" }` (`parallel` when omitted); `serial` = one active layer at a time, `parallel` = stack freely.
 - **gcTime** — keep dismissed layers in a cache so re-opening the same key restores `data` without re-running `loadFn`. One slot per key (last-dismissed-wins); evicted after `gcTime` with explicit teardown.
 - **loadFn** — optional async load run on `open`; cancelable via `AbortController`; `pending` → `active` with `data` on success, `error` on throw.
-- **Observer / selector** — adapters subscribe to `LayerStack.getSnapshot()` and project via a selector (React/Preact `useSyncExternalStore`, Solid `from`, Angular `signal`, Vue `shallowRef`, Lit reactive controllers, Svelte runes).
+- **Observer / selector** — adapters subscribe to `LayerStack.getSnapshot()` and project via a selector (React/Preact `useSyncExternalStore`, Solid `from`, Angular `signal`, Vue `shallowRef`, Lit reactive controllers, Alpine `Alpine.reactive` / data `states`, Svelte runes).
 - **Options helper** (`layerOptions`) — identity function carrying `<P, R, E, D>` generics so `LayerClient.open` infers the response type end-to-end.
-- **Outlet** — renders the active stack. React, Preact, Solid, and Vue ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Lit ships `<stack-outlet>`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](./architecture.md#adapter-ergonomics).
-- **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
+- **Outlet** — renders the active stack. React, Preact, Solid, and Vue ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Lit ships `<stack-outlet>`; Alpine ships `x-layer-outlet` + `$layer`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](./architecture.md#adapter-ergonomics).
+- **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Alpine Rank-2 `layerStack` + `callFor`; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
 - **Layer group** — a child stack owned by a parent layer and tied to its lifetime: created via `createLayerGroup` / adapter `useLayerGroup`; when the parent dismisses, the group's stack auto-drains. Same `LayerClient`, no second client.
 - **Child stack** — the stack a layer group opens onto; id derived from the parent's `stackId` + `layerId` via `childStackId` (`` `${parentStackId}~${parentLayerId}~${name}` ``).
 - **Validator** (`validate`) — a Standard Schema or sync `(input) => output` fn that parses/validates a layer's `payload` at `open`; the layer stores the parsed output. Failure rejects `open` with a `PayloadValidationError`.
diff --git a/docs/roadmap.md b/docs/roadmap.md
index 0442431..0315aac 100644
--- a/docs/roadmap.md
+++ b/docs/roadmap.md
@@ -18,8 +18,8 @@ Forward-looking work only — not a mirror of `src/`. Shipped features live in [
 
 ## Adapters
 
-- **Qwik** + **Alpine** + **Marko** + **Angular SSR** + **React Native** bindings if demand materializes.
-- A **`HostAdapter`** contract is deliberately **not** planned — `StackOutlet` renders inline; consumers wrap it in their own `createPortal` if they need a portal target. Keeping the core agnostic means no host/portal abstraction baked in.
+- **Qwik** + **Marko** + **Angular SSR** bindings if demand materializes.
+- A **`HostAdapter`** contract is deliberately **not** planned — `StackOutlet` renders inline; consumers wrap it in their own `createPortal` / RN `Modal` / root host if they need a different target. Keeping the core agnostic means no host/portal abstraction baked in. React Native uses `@stainless-code/react-layers` (no separate package); mount patterns are on the React adapter docs.
 
 ## Docs site (`apps/docs/`, Blume)
 
diff --git a/knip.json b/knip.json
index 6b1c371..e238a38 100644
--- a/knip.json
+++ b/knip.json
@@ -50,6 +50,14 @@
       ],
       "project": ["src/**/*.ts", "tests-dom/**/*.ts"]
     },
+    "packages/alpine": {
+      "entry": [
+        "src/**/*.test.ts",
+        "tests-dom/**/*.test.ts",
+        "tests-dom/**/*.test-d.ts"
+      ],
+      "project": ["src/**/*.ts", "tests-dom/**/*.ts"]
+    },
     "packages/solid": {
       "entry": [
         "src/**/*.test.ts",
diff --git a/packages/alpine/README.md b/packages/alpine/README.md
new file mode 100644
index 0000000..6ed812c
--- /dev/null
+++ b/packages/alpine/README.md
@@ -0,0 +1,75 @@
+# @stainless-code/alpine-layers
+
+<p align="center">
+  <img src="https://raw.githubusercontent.com/stainless-code/layers/main/apps/docs/public/logo.svg" alt="Layers" height="48" />
+</p>
+
+Modals are just async functions you forgot to `await`.
+
+Alpine.js adapter — open any layer from anywhere and `await` a typed result. State coordination, not UI ownership: you own markup, focus (`@alpinejs/focus`), portals (`x-teleport`), and a11y.
+
+> Experimental — the API may change between minor releases. Pin your version.
+
+## Install
+
+`bun add @stainless-code/alpine-layers`
+
+**Peer:** `alpinejs` (`>=3.13`). Optional: `@alpinejs/focus` for modal trap recipes.
+
+## CDN
+
+Load before Alpine core; the CDN entry listens for `alpine:init` and registers the plugin.
+
+```html
+<script
+  type="module"
+  src="https://cdn.jsdelivr.net/npm/@stainless-code/alpine-layers/cdn"
+></script>
+<script
+  defer
+  src="https://cdn.jsdelivr.net/npm/alpinejs@3/dist/cdn.min.js"
+></script>
+```
+
+## Taste (Vite / bundled)
+
+```js
+import Alpine from "alpinejs";
+import layers, {
+  LayerClient,
+  createLayer,
+  layerOptions,
+  setLayerClient,
+} from "@stainless-code/alpine-layers";
+
+const client = new LayerClient();
+setLayerClient(client);
+Alpine.plugin(layers);
+Alpine.start();
+```
+
+```html
+<div x-data>
+  <template x-layer-outlet="'modal'">
+    <div x-data role="dialog">
+      <h2 x-text="$layer.payload.title"></h2>
+      <button type="button" @click="$layer.call.end(true)">Yes</button>
+    </div>
+  </template>
+</div>
+```
+
+```js
+const confirm = layerOptions({
+  stack: "modal",
+  key: ["confirm"],
+  exitingDelay: 0,
+});
+const c = createLayer(confirm, client);
+void c.open({ title: "Remove?" });
+```
+
+## Learn more
+
+- [Adapter parity](https://stainless-code.com/layers/adapters) · [Adapter hooks](https://stainless-code.com/layers/reference/adapter-hooks)
+- [Concepts: lifecycle](https://stainless-code.com/layers/concepts/lifecycle) · [identity & types](https://stainless-code.com/layers/concepts/identity-and-types)
diff --git a/packages/alpine/package.json b/packages/alpine/package.json
new file mode 100644
index 0000000..c808590
--- /dev/null
+++ b/packages/alpine/package.json
@@ -0,0 +1,88 @@
+{
+  "name": "@stainless-code/alpine-layers",
+  "version": "0.1.0",
+  "description": "Alpine.js adapter for @stainless-code/layers — call a layer like an async function and await its response.",
+  "keywords": [
+    "alpine",
+    "alpinejs",
+    "dialog",
+    "drawer",
+    "headless",
+    "layer",
+    "modal",
+    "popover",
+    "stack",
+    "tanstack-intent",
+    "typescript"
+  ],
+  "homepage": "https://stainless-code.com/layers/adapters/alpine",
+  "bugs": {
+    "url": "https://github.com/stainless-code/layers/issues"
+  },
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/stainless-code/layers.git",
+    "directory": "packages/alpine"
+  },
+  "funding": "https://github.com/sponsors/SutuSebastian",
+  "files": [
+    "dist",
+    "skills",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test-d.ts"
+  ],
+  "type": "module",
+  "sideEffects": [
+    "./dist/cdn.mjs",
+    "./src/cdn.ts"
+  ],
+  "unpkg": "./dist/cdn.mjs",
+  "exports": {
+    ".": {
+      "@stainless-code/source": "./src/index.ts",
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    },
+    "./cdn": {
+      "@stainless-code/source": "./src/cdn.ts",
+      "types": "./dist/cdn.d.mts",
+      "import": "./dist/cdn.mjs"
+    },
+    "./package.json": "./package.json"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "scripts": {
+    "build": "tsdown",
+    "check:pack": "attw --pack . --profile esm-only && publint --strict",
+    "test": "bun test ./src",
+    "test:coverage": "bun test ./src --coverage --coverage-threshold=0.75",
+    "test:dom": "vitest run",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@stainless-code/layers": "workspace:*"
+  },
+  "devDependencies": {
+    "alpinejs": "3.15.8",
+    "jsdom": "29.1.1",
+    "vitest": "4.1.9"
+  },
+  "peerDependencies": {
+    "@alpinejs/focus": ">=3.13.0",
+    "alpinejs": ">=3.13.0"
+  },
+  "peerDependenciesMeta": {
+    "@alpinejs/focus": {
+      "optional": true
+    }
+  },
+  "engines": {
+    "bun": ">=1.0.0",
+    "node": "^20.19.0 || >=22.12.0"
+  }
+}
diff --git a/packages/alpine/skills/alpine-layers/SKILL.md b/packages/alpine/skills/alpine-layers/SKILL.md
new file mode 100644
index 0000000..65a5b93
--- /dev/null
+++ b/packages/alpine/skills/alpine-layers/SKILL.md
@@ -0,0 +1,44 @@
+---
+name: alpine-layers
+description: Alpine.js adapter for @stainless-code/alpine-layers; plugin magics, x-layer-outlet, layerStack data, and Svelte-shaped JS hooks for typed layer stacks
+license: MIT
+keywords:
+  - tanstack-intent
+  - alpinejs
+  - alpine
+  - modal
+  - dialog
+  - stack
+  - typescript
+metadata:
+  library: "@stainless-code/alpine-layers"
+  library_version: "0.1.0"
+  framework: "alpinejs"
+sources:
+  - https://stainless-code.com/layers/adapters/alpine
+  - https://github.com/stainless-code/layers/blob/main/docs/architecture.md
+---
+
+# Alpine layer/stack UI with @stainless-code/alpine-layers
+
+Open overlay UI imperatively and manage it as an ordered, named stack. The package re-exports `@stainless-code/layers`. For engine internals, use the [`layers` core skill](https://github.com/stainless-code/layers/blob/main/packages/core/skills/layers/SKILL.md).
+
+## Install
+
+```bash
+bun add @stainless-code/alpine-layers
+```
+
+Peer: `alpinejs` (>=3.13). Register with `Alpine.plugin(layers)` before `Alpine.start()`, or use the `./cdn` entry on `alpine:init`.
+
+## Binding model
+
+- **Client:** `getLayerClient()` lazy-inits; `setLayerClient()` only required to pin a custom client before first use.
+- **Drive:** `$layers.open` (magic) + `createLayer` (wired `state` / `queued` / `top`).
+- **Observe:** `useStack`, `createLayerState`, `Alpine.data('layerStack')` + `x-for`.
+- **Outlet:** `x-layer-outlet` on `<template>`; row props via `$layer` (`call`, `payload`, …).
+
+## Learn more
+
+- [When to use Layers](https://stainless-code.com/layers/concepts/when-to-use)
+- [Adapter hooks reference](https://stainless-code.com/layers/reference/adapter-hooks)
diff --git a/packages/alpine/src/alpine-types.ts b/packages/alpine/src/alpine-types.ts
new file mode 100644
index 0000000..ee94249
--- /dev/null
+++ b/packages/alpine/src/alpine-types.ts
@@ -0,0 +1,35 @@
+interface AlpineDirectiveUtils {
+  Alpine: AlpineLike;
+  effect: (fn: () => void) => void;
+  cleanup: (fn: () => void) => void;
+  evaluate: (expression: string) => unknown;
+  evaluateLater: (
+    expression: string,
+  ) => (callback: (value: unknown) => void) => void;
+}
+
+type AlpineDirectiveHandler = (
+  el: Element,
+  directive: {
+    value?: string;
+    modifiers: string[];
+    expression: string;
+  },
+  utils: AlpineDirectiveUtils,
+) => void;
+
+/** Minimal Alpine surface used by the adapter (no `@types/alpinejs` required). */
+export interface AlpineLike {
+  reactive<T extends object>(obj: T): T;
+  magic(
+    name: string,
+    fn: (el: Element, utils: { Alpine: AlpineLike }) => unknown,
+  ): void;
+  directive(name: string, fn: AlpineDirectiveHandler): void;
+  data(
+    name: string,
+    factory: (...args: unknown[]) => Record<string, unknown>,
+  ): void;
+  initTree(el: Element): void;
+  destroyTree(el: Element): void;
+}
diff --git a/packages/alpine/src/cdn.ts b/packages/alpine/src/cdn.ts
new file mode 100644
index 0000000..7adeb29
--- /dev/null
+++ b/packages/alpine/src/cdn.ts
@@ -0,0 +1,20 @@
+/**
+ * CDN / `unpkg` bootstrap — register the plugin on `alpine:init`.
+ * Load this module **before** Alpine's CDN script so the listener is attached
+ * in time. Same runtime as `Alpine.plugin(layers)` from the package root.
+ */
+import layers from "./index.js";
+
+document.addEventListener("alpine:init", () => {
+  const Alpine = (
+    window as Window & { Alpine?: { plugin: (fn: typeof layers) => void } }
+  ).Alpine;
+  if (!Alpine) {
+    throw new Error(
+      "[layers/alpine] CDN entry requires window.Alpine before alpine:init.",
+    );
+  }
+  Alpine.plugin(layers);
+});
+
+export { layers };
diff --git a/packages/alpine/src/index.test.ts b/packages/alpine/src/index.test.ts
new file mode 100644
index 0000000..c07ab71
--- /dev/null
+++ b/packages/alpine/src/index.test.ts
@@ -0,0 +1,186 @@
+import { beforeEach, describe, expect, it } from "bun:test";
+
+import {
+  createCallContext,
+  LayerClient,
+  layerOptions,
+} from "@stainless-code/layers";
+import type { LayerState } from "@stainless-code/layers";
+
+import {
+  createLayer,
+  createStackHook,
+  getLayerClient,
+  setLayerClient,
+  useLayerGroup,
+  useMutationFlow,
+  useStack,
+} from "./index";
+import { __resetLayerClientForTests } from "./layer-client";
+
+beforeEach(() => {
+  __resetLayerClientForTests();
+});
+
+describe("getLayerClient / setLayerClient", () => {
+  it("lazy-creates a client on first getLayerClient()", () => {
+    const a = getLayerClient();
+    const b = getLayerClient();
+    expect(a).toBeInstanceOf(LayerClient);
+    expect(b).toBe(a);
+  });
+
+  it("setLayerClient before first use pins the client", () => {
+    const client = new LayerClient();
+    setLayerClient(client);
+    expect(getLayerClient()).toBe(client);
+  });
+
+  it("setLayerClient throws after getLayerClient has run", () => {
+    getLayerClient();
+    expect(() => setLayerClient(new LayerClient())).toThrow(
+      "[layers/alpine] setLayerClient()",
+    );
+  });
+});
+
+describe("useStack (alpine)", () => {
+  it("current mirrors the stack snapshot and updates on open", () => {
+    const client = new LayerClient();
+    const stack = useStack({ stack: "confirm" }, client);
+    expect(stack.current).toHaveLength(0);
+    client.open({ key: ["a"], payload: 1, stack: "confirm" });
+    expect(stack.current).toHaveLength(1);
+    expect(stack.current[0]?.payload).toBe(1);
+  });
+
+  it("destroy unsubscribes from the stack", () => {
+    const client = new LayerClient();
+    const stack = useStack({ stack: "confirm" }, client);
+    expect(client.getStack("confirm").size).toBe(1);
+    stack.destroy();
+    expect(client.getStack("confirm").size).toBe(0);
+    client.open({ key: ["a"], payload: 1, stack: "confirm" });
+    expect(stack.current).toHaveLength(0);
+  });
+
+  it("callFor ends the layer", async () => {
+    const client = new LayerClient();
+    const stack = useStack({ stack: "confirm" }, client);
+    const pending = client.open<number, boolean>({
+      key: ["b"],
+      payload: 2,
+      stack: "confirm",
+    });
+    const call = stack.callFor(stack.current[0]!);
+    expect(call).not.toBeNull();
+    call!.end(true);
+    expect(await pending).toBe(true);
+  });
+});
+
+describe("createLayer (alpine)", () => {
+  it("open resolves with the layer response", async () => {
+    const client = new LayerClient();
+    const opts = layerOptions<{ title: string }, boolean>({
+      stack: "modal",
+      key: ["confirm", "test"],
+      exitingDelay: 0,
+    });
+    const handle = createLayer(opts, client);
+    const pending = handle.open({ title: "Hi" });
+    expect(handle.state).toHaveLength(1);
+    const top = handle.top;
+    expect(top?.payload).toEqual({ title: "Hi" });
+    const obs = useStack({ stack: "modal" }, client);
+    const call = obs.callFor(top! as LayerState);
+    call!.end(false);
+    obs.destroy();
+    expect(await pending).toBe(false);
+  });
+});
+
+describe("useMutationFlow (alpine)", () => {
+  it("orEnd ends the layer after the action succeeds", async () => {
+    const client = new LayerClient();
+    const pending = client.open<void, string>({
+      key: ["m"],
+      payload: undefined,
+      stack: "confirm",
+      exitingDelay: 0,
+    });
+    const stack = client.getStack("confirm");
+    const state = stack.getSnapshot()[0]!;
+    const call = createCallContext(
+      stack as never,
+      stack.getLayer(state.id)! as never,
+      state as never,
+    );
+    const flow = useMutationFlow(call);
+    expect(flow.pending).toBe(false);
+    await flow.run(async () => {}).orEnd("ok");
+    expect(await pending).toBe("ok");
+  });
+});
+
+describe("useLayerGroup (alpine)", () => {
+  it("opens on a child stackId and dispose tears down", async () => {
+    const client = new LayerClient();
+    const parentPending = client.open<void, boolean>({
+      key: ["parent"],
+      payload: undefined,
+      stack: "confirm",
+      exitingDelay: 0,
+    });
+    const parentStack = client.getStack("confirm");
+    const parentState = parentStack.getSnapshot()[0]!;
+    const call = createCallContext(
+      parentStack as never,
+      parentStack.getLayer(parentState.id)! as never,
+      parentState as never,
+    );
+    const group = useLayerGroup(call, { name: "child" }, client);
+    expect(group.stackId).toContain(parentState.id);
+    const childPending = group.open<number, boolean>({
+      key: ["c"],
+      payload: 1,
+      exitingDelay: 0,
+    });
+    expect(group.states.current).toHaveLength(1);
+    const childState = group.states.current[0]!;
+    const childStack = client.getStack(group.stackId);
+    createCallContext(
+      childStack as never,
+      childStack.getLayer(childState.id)! as never,
+      childState as never,
+    ).end(true);
+    expect(await childPending).toBe(true);
+    group.dispose();
+    expect(client.getStack(group.stackId).getSnapshot()).toHaveLength(0);
+    call.end(false);
+    expect(await parentPending).toBe(false);
+  });
+});
+
+describe("createStackHook (alpine)", () => {
+  it("setClient pins and useAppStack opens the bound stack", async () => {
+    const client = new LayerClient();
+    const hook = createStackHook({ client, stack: "app" });
+    const app = hook.useAppStack();
+    const pending = app.open<number, boolean>({
+      key: ["x"],
+      payload: 1,
+      exitingDelay: 0,
+    });
+    expect(app.states.current).toHaveLength(1);
+    const state = app.states.current[0]!;
+    const stack = client.getStack("app");
+    createCallContext(
+      stack as never,
+      stack.getLayer(state.id)! as never,
+      state as never,
+    ).end(true);
+    expect(await pending).toBe(true);
+    app.states.destroy();
+  });
+});
diff --git a/packages/alpine/src/index.ts b/packages/alpine/src/index.ts
new file mode 100644
index 0000000..715e7fc
--- /dev/null
+++ b/packages/alpine/src/index.ts
@@ -0,0 +1,753 @@
+import type {
+  DataTag,
+  DefaultLayerError,
+  ErrorOf,
+  InferValidatorOutput,
+  LayerCallContext,
+  LayerComponentProps,
+  LayerGroupOptions,
+  LayerHandle,
+  LayerKey,
+  LayerOptions,
+  LayerStack,
+  LayerState,
+  OmitKeyof,
+  OpenLayerOptions,
+  ResponseOf,
+  ValidatedLayerHandle,
+  Validator,
+} from "@stainless-code/layers";
+import {
+  childStackId,
+  createCallContext,
+  createLayer as createLayerHandle,
+  createLayerGroup,
+  keySignature,
+  shallowArrayEqual,
+  LayerClient,
+} from "@stainless-code/layers";
+
+import type { AlpineLike } from "./alpine-types.js";
+import { getLayerClient, setLayerClient } from "./layer-client.js";
+
+export * from "@stainless-code/layers";
+/** Core headless factory — not the wired {@link createLayer}. */
+export { createLayer as createLayerHandle } from "@stainless-code/layers";
+export { getLayerClient, setLayerClient } from "./layer-client.js";
+export type { AlpineLike } from "./alpine-types.js";
+
+let alpineRuntime: AlpineLike | undefined;
+
+function setAlpineRuntime(Alpine: AlpineLike | undefined): void {
+  alpineRuntime = Alpine;
+}
+
+/** Props bag for the current outlet row — keyed on outlet root elements. */
+const layerPropsByElement = new WeakMap<Element, LayerComponentProps>();
+
+type TeleportMarked = Element & { _x_teleportBack?: Element };
+
+function findLayerProps(el: Element): LayerComponentProps | undefined {
+  let node: Element | null = el;
+  while (node) {
+    const bag = layerPropsByElement.get(node);
+    if (bag) return bag;
+    const back: Element | undefined = (node as TeleportMarked)._x_teleportBack;
+    if (back) {
+      node = back;
+      continue;
+    }
+    node = node.parentElement;
+  }
+  return undefined;
+}
+
+function syncLayerProps(
+  Alpine: AlpineLike,
+  root: Element,
+  props: LayerComponentProps,
+): void {
+  const existing = layerPropsByElement.get(root);
+  if (existing) {
+    existing.call = props.call;
+    existing.payload = props.payload;
+    existing.data = props.data;
+    existing.error = props.error;
+    existing.phase = props.phase;
+    existing.transition = props.transition;
+    existing.dismissing = props.dismissing;
+    existing.actionStatus = props.actionStatus;
+    return;
+  }
+  layerPropsByElement.set(root, Alpine.reactive({ ...props }));
+}
+
+function defaultSelector(states: LayerState[]): LayerState[] {
+  return states;
+}
+
+type NoValidateOptions<Opts> = Opts extends { validate: Validator<unknown> }
+  ? never
+  : Opts;
+
+export interface UseStackOptions<T = LayerState[]> {
+  stack?: string;
+  select?: (states: LayerState[]) => T;
+  compare?: (a: T, b: T) => boolean;
+  client?: LayerClient;
+}
+
+export interface UseLayerStateOptions<
+  Key extends LayerKey,
+  P = unknown,
+  D = unknown,
+  U = LayerState<P, ResponseOf<Key>, ErrorOf<Key>, D>[],
+> {
+  key: Key;
+  stack?: string;
+  select?: (states: LayerState<P, ResponseOf<Key>, ErrorOf<Key>, D>[]) => U;
+  compare?: (a: U, b: U) => boolean;
+}
+
+/** Reactive stack accessor (Svelte-shaped `.current` + `callFor`). */
+export interface AlpineStack<RootProps = unknown, T = LayerState[]> {
+  readonly current: T;
+  callFor(
+    state: LayerState,
+    rootProps?: RootProps,
+  ): LayerCallContext<unknown, unknown, RootProps> | null;
+  destroy(): void;
+}
+
+function createSnapshotSelector<T>(
+  select: (states: LayerState[]) => T,
+  compare: (a: T, b: T) => boolean,
+): { runSelect: (base: LayerState[]) => T } {
+  let cache: { base: LayerState[]; value: T } | null = null;
+
+  const runSelect = (base: LayerState[]): T => {
+    const prev = cache;
+    if (prev && prev.base === base) return prev.value;
+    const next = select(base);
+    if (prev && compare(prev.value, next)) {
+      cache = { base, value: prev.value };
+      return prev.value;
+    }
+    cache = { base, value: next };
+    return next;
+  };
+
+  return { runSelect };
+}
+
+function makeAlpineStack<RootProps, T>(
+  stack: LayerStack,
+  getSource: () => LayerState[],
+  select: (states: LayerState[]) => T,
+  compare: (a: T, b: T) => boolean,
+): AlpineStack<RootProps, T> {
+  const { runSelect } = createSnapshotSelector(select, compare);
+  const initial = runSelect(getSource());
+  const holder = alpineRuntime?.reactive({ current: initial }) ?? {
+    current: initial,
+  };
+
+  const unsubscribe = stack.subscribe(() => {
+    const prev = holder.current;
+    const next = runSelect(getSource());
+    if (!compare(prev, next)) {
+      holder.current = next;
+    }
+  });
+
+  return {
+    get current() {
+      return holder.current;
+    },
+    callFor(state, rootProps) {
+      const layer = stack.getLayer(state.id);
+      return layer
+        ? (createCallContext(
+            stack,
+            layer,
+            state,
+            rootProps,
+          ) as LayerCallContext<unknown, unknown, RootProps>)
+        : null;
+    },
+    destroy() {
+      unsubscribe();
+    },
+  };
+}
+
+function resolveClient(explicit?: LayerClient): LayerClient {
+  return explicit ?? getLayerClient();
+}
+
+/**
+ * Subscribe to a stack snapshot (Svelte-shaped `.current` + `callFor`).
+ *
+ * @param opts Stack id, selector, compare, optional client.
+ * @param client Optional client override (also accepted on `opts.client`).
+ * @default `stack` is `"default"`; `select` is identity; `compare` is `Object.is`.
+ */
+export function useStack<RootProps = unknown, T = LayerState[]>(
+  opts: UseStackOptions<T> = {},
+  client?: LayerClient,
+): AlpineStack<RootProps, T> {
+  const resolved = resolveClient(client ?? opts.client);
+  const stackId = opts.stack ?? "default";
+  const stack = resolved.getStack(stackId);
+  const select =
+    opts.select ?? (defaultSelector as unknown as (s: LayerState[]) => T);
+  const compare = opts.compare ?? Object.is;
+  return makeAlpineStack(stack, () => stack.getSnapshot(), select, compare);
+}
+
+/**
+ * Subscribe to a stack's queued snapshot (Svelte-shaped `.current` + `callFor`).
+ *
+ * @param opts Stack id, selector, compare, optional client.
+ * @param client Optional client override (also accepted on `opts.client`).
+ * @default `stack` is `"default"`; `select` is identity; `compare` is `Object.is`.
+ */
+export function useQueuedStack<RootProps = unknown, T = LayerState[]>(
+  opts: UseStackOptions<T> = {},
+  client?: LayerClient,
+): AlpineStack<RootProps, T> {
+  const resolved = resolveClient(client ?? opts.client);
+  const stackId = opts.stack ?? "default";
+  const stack = resolved.getStack(stackId);
+  const select =
+    opts.select ?? (defaultSelector as unknown as (s: LayerState[]) => T);
+  const compare = opts.compare ?? Object.is;
+  return makeAlpineStack(
+    stack,
+    () => stack.getQueuedSnapshot(),
+    select,
+    compare,
+  );
+}
+
+/**
+ * Observe all mounted layers matching a key (Svelte-shaped `.current` + `callFor`).
+ *
+ * A {@link DataTag} key infers its response and error types.
+ */
+export function createLayerState<
+  Key extends LayerKey,
+  P = unknown,
+  D = unknown,
+  U = LayerState<P, ResponseOf<Key>, ErrorOf<Key>, D>[],
+>(
+  opts: UseLayerStateOptions<Key, P, D, U>,
+  client?: LayerClient,
+): AlpineStack<unknown, U> {
+  const sig = keySignature(opts.key);
+  return useStack<unknown, U>(
+    {
+      stack: opts.stack,
+      select: (states) => {
+        const filtered = states.filter(
+          (s) => keySignature(s.key) === sig,
+        ) as LayerState<P, ResponseOf<Key>, ErrorOf<Key>, D>[];
+        return opts.select ? opts.select(filtered) : (filtered as unknown as U);
+      },
+      compare: opts.compare ?? (shallowArrayEqual as (a: U, b: U) => boolean),
+      client,
+    },
+    client,
+  );
+}
+
+/** Observe all queued layers matching a key. */
+export function createLayerQueuedState<
+  Key extends LayerKey,
+  P = unknown,
+  D = unknown,
+  U = LayerState<P, ResponseOf<Key>, ErrorOf<Key>, D>[],
+>(
+  opts: UseLayerStateOptions<Key, P, D, U>,
+  client?: LayerClient,
+): AlpineStack<unknown, U> {
+  const sig = keySignature(opts.key);
+  return useQueuedStack<unknown, U>(
+    {
+      stack: opts.stack,
+      select: (states) => {
+        const filtered = states.filter(
+          (s) => keySignature(s.key) === sig,
+        ) as LayerState<P, ResponseOf<Key>, ErrorOf<Key>, D>[];
+        return opts.select ? opts.select(filtered) : (filtered as unknown as U);
+      },
+      compare: opts.compare ?? (shallowArrayEqual as (a: U, b: U) => boolean),
+      client,
+    },
+    client,
+  );
+}
+
+export type WiredLayerHandle<
+  P,
+  R,
+  E = DefaultLayerError,
+  D = unknown,
+  RP = unknown,
+> = LayerHandle<P, R, E, D, RP> & {
+  readonly state: LayerState<P, R, E, D>[];
+  readonly queued: LayerState<P, R, E, D>[];
+  readonly top: LayerState<P, R, E, D> | null;
+};
+
+export type WiredValidatedLayerHandle<
+  V extends Validator<unknown>,
+  R,
+  E = DefaultLayerError,
+  D = unknown,
+  RP = unknown,
+> = ValidatedLayerHandle<V, R, E, D, RP> & {
+  readonly state: LayerState<InferValidatorOutput<V>, R, E, D>[];
+  readonly queued: LayerState<InferValidatorOutput<V>, R, E, D>[];
+  readonly top: LayerState<InferValidatorOutput<V>, R, E, D> | null;
+};
+
+function createLayerImpl<
+  P,
+  R,
+  E = DefaultLayerError,
+  D = unknown,
+  RP = unknown,
+>(
+  options: LayerOptions<P, R, E, D, RP> & { key: LayerKey },
+  client?: LayerClient,
+): WiredLayerHandle<P, R, E, D, RP> {
+  const resolved = resolveClient(client);
+  const stackId = options.stack ?? "default";
+  const sig = keySignature(options.key);
+  const selectByKey = (states: LayerState[]) =>
+    states.filter((s) => keySignature(s.key) === sig) as LayerState<
+      P,
+      R,
+      E,
+      D
+    >[];
+  const stateObs = useStack<RP, LayerState<P, R, E, D>[]>(
+    { stack: stackId, select: selectByKey, compare: shallowArrayEqual },
+    resolved,
+  );
+  const queuedObs = useQueuedStack<RP, LayerState<P, R, E, D>[]>(
+    { stack: stackId, select: selectByKey, compare: shallowArrayEqual },
+    resolved,
+  );
+  const handle = createLayerHandle(options, resolved);
+  Object.defineProperties(handle, {
+    state: {
+      get(): LayerState<P, R, E, D>[] {
+        return stateObs.current;
+      },
+      enumerable: true,
+    },
+    queued: {
+      get(): LayerState<P, R, E, D>[] {
+        return queuedObs.current;
+      },
+      enumerable: true,
+    },
+    top: {
+      get(): LayerState<P, R, E, D> | null {
+        return stateObs.current.at(-1) ?? null;
+      },
+      enumerable: true,
+    },
+  });
+  return handle as WiredLayerHandle<P, R, E, D, RP>;
+}
+
+/**
+ * Drive a layer — wired handle with reactive `state` / `queued` / `top`.
+ * Prefer `$layers.open` from markup when a typed handle is not needed.
+ */
+export function createLayer<
+  V extends Validator<unknown>,
+  R,
+  E = DefaultLayerError,
+  D = unknown,
+  RP = unknown,
+>(
+  options: LayerOptions<InferValidatorOutput<V>, R, E, D, RP> & {
+    key: LayerKey;
+    validate: V;
+  },
+  client?: LayerClient,
+): WiredValidatedLayerHandle<V, R, E, D, RP>;
+
+export function createLayer<
+  P,
+  R,
+  E = DefaultLayerError,
+  D = unknown,
+  RP = unknown,
+>(
+  options: NoValidateOptions<LayerOptions<P, R, E, D, RP> & { key: LayerKey }>,
+  client?: LayerClient,
+): WiredLayerHandle<P, R, E, D, RP>;
+
+export function createLayer<
+  P,
+  R,
+  E = DefaultLayerError,
+  D = unknown,
+  RP = unknown,
+>(
+  options: LayerOptions<P, R, E, D, RP> & { key: LayerKey },
+  client?: LayerClient,
+): WiredLayerHandle<P, R, E, D, RP> {
+  return createLayerImpl(options, client);
+}
+
+export interface MutationRun<R> {
+  /** End the layer with `response` after the action succeeds. */
+  orEnd: (response: R) => Promise<void>;
+}
+
+export interface MutationFlow<R> {
+  /** True while the async action passed to `run` is in flight. */
+  readonly pending: boolean;
+  run: (fn: () => Promise<void> | void) => MutationRun<R>;
+}
+
+/** Coordinate `call.setRunning` with an async action; `orEnd` ends on success. */
+export function useMutationFlow<P, R, RootProps = unknown>(
+  call: LayerCallContext<P, R, RootProps>,
+): MutationFlow<R> {
+  const holder =
+    alpineRuntime?.reactive({ pending: false }) ??
+    ({ pending: false } as {
+      pending: boolean;
+    });
+  return {
+    get pending() {
+      return holder.pending;
+    },
+    run: (fn) => ({
+      orEnd: async (response: R) => {
+        holder.pending = true;
+        call.setRunning(true);
+        try {
+          await fn();
+          call.end(response);
+        } finally {
+          call.setRunning(false);
+          holder.pending = false;
+        }
+      },
+    }),
+  };
+}
+
+/** Open on a pre-bound stack; {@link DataTag} keys infer response/error types. */
+export interface ScopedOpen {
+  <P, R, E = DefaultLayerError, D = unknown, RootProps = unknown>(
+    options: OmitKeyof<
+      OpenLayerOptions<P, R, E, D, RootProps> & {
+        key: DataTag<LayerKey, R, E>;
+      },
+      "stack" | "validate"
+    >,
+  ): Promise<R>;
+  <P, R = void, E = DefaultLayerError, D = unknown, RootProps = unknown>(
+    options: OmitKeyof<OpenLayerOptions<P, R, E, D, RootProps>, "stack">,
+  ): Promise<R>;
+}
+
+export interface LayerGroup<RootProps = unknown> {
+  open: ScopedOpen;
+  dismissAll: (response?: unknown) => void;
+  states: AlpineStack<RootProps>;
+  stackId: string;
+  /** Tear down the child stack group subscription and dismiss child layers. */
+  dispose(): void;
+}
+
+/**
+ * Nested child stack for a parent layer call. Render with a nested
+ * `x-layer-outlet` bound to {@link LayerGroup.stackId}.
+ */
+export function useLayerGroup<P, R, RootProps = unknown>(
+  call: LayerCallContext<P, R, RootProps>,
+  options?: LayerGroupOptions,
+  client?: LayerClient,
+): LayerGroup<RootProps> {
+  const resolved = resolveClient(client);
+  const stackId = childStackId(call, options?.name);
+  const group = createLayerGroup(resolved, call, options);
+  const states = useStack<RootProps>({ stack: stackId }, resolved);
+  const dispose = () => {
+    group.dispose();
+    resolved.dismissAll(group.stackId);
+    states.destroy();
+  };
+  const open = (<
+    P2,
+    R2 = void,
+    E = DefaultLayerError,
+    D = unknown,
+    RP = unknown,
+  >(
+    opts: OmitKeyof<OpenLayerOptions<P2, R2, E, D, RP>, "stack">,
+  ) =>
+    resolved.open({
+      ...opts,
+      stack: stackId,
+    } as OpenLayerOptions<P2, R2, E, D, RP>)) as unknown as ScopedOpen;
+  const dismissAll = (response?: unknown) =>
+    resolved.dismissAll(stackId, response);
+  return { open, dismissAll, states, stackId, dispose };
+}
+
+export interface AppStack {
+  open: ScopedOpen;
+  dismissAll: (response?: unknown) => void;
+  states: AlpineStack;
+}
+
+export interface StackHook {
+  setClient: typeof setLayerClient;
+  useAppStack: () => AppStack;
+}
+
+/**
+ * Bind a named stack + client (Angular-shaped). No `AppHost` / `AppLayer`.
+ * @returns `{ setClient, useAppStack }` — open/dismissAll/states scoped to `stack`.
+ */
+export function createStackHook(
+  config: { client?: LayerClient; stack?: string } = {},
+): StackHook {
+  if (config.client !== undefined) {
+    setLayerClient(config.client);
+  }
+  const stackId = config.stack ?? "default";
+  return {
+    setClient: setLayerClient,
+    useAppStack() {
+      const states = useStack({ stack: stackId });
+      const client = getLayerClient();
+      const open = (<
+        P,
+        R = void,
+        E = DefaultLayerError,
+        D = unknown,
+        RootProps = unknown,
+      >(
+        options: OmitKeyof<OpenLayerOptions<P, R, E, D, RootProps>, "stack">,
+      ) =>
+        client.open({
+          ...options,
+          stack: stackId,
+        } as OpenLayerOptions<P, R, E, D, RootProps>)) as unknown as ScopedOpen;
+      const dismissAll = (response?: unknown) =>
+        client.dismissAll(stackId, response);
+      return { open, dismissAll, states };
+    },
+  };
+}
+
+function buildLayerComponentProps(
+  stack: LayerStack,
+  state: LayerState,
+  rootProps?: unknown,
+): LayerComponentProps | null {
+  const layer = stack.getLayer(state.id);
+  if (!layer) return null;
+  const call = createCallContext(
+    stack,
+    layer,
+    state,
+    rootProps,
+  ) as LayerCallContext<unknown, unknown>;
+  return {
+    call,
+    payload: state.payload,
+    data: state.data,
+    error: state.error,
+    phase: state.phase,
+    transition: state.transition,
+    dismissing: state.dismissing,
+    actionStatus: state.actionStatus,
+  };
+}
+
+function registerLayerOutletDirective(Alpine: AlpineLike): void {
+  Alpine.directive("layer-outlet", (el, { expression }, utils) => {
+    if (!(el instanceof HTMLTemplateElement)) {
+      throw new Error(
+        "[layers/alpine] x-layer-outlet must be used on a <template> element.",
+      );
+    }
+    const template = el;
+    const lookup = new Map<string, Element>();
+    let stackId = "default";
+    let stack: LayerStack | null = null;
+    let unsubscribe: (() => void) | null = null;
+    const rootProps: unknown = undefined;
+
+    const syncStack = () => {
+      if (!stack) return;
+      const states = stack.getSnapshot();
+      const nextIds = new Set(states.map((s) => s.id));
+
+      for (const [id, node] of lookup) {
+        if (nextIds.has(id)) continue;
+        layerPropsByElement.delete(node);
+        Alpine.destroyTree(node);
+        node.remove();
+        lookup.delete(id);
+      }
+
+      let insertAfter: ChildNode = template;
+      for (const state of states) {
+        let root = lookup.get(state.id);
+        if (!root) {
+          const fragment = template.content.cloneNode(true) as DocumentFragment;
+          root =
+            fragment.firstElementChild ??
+            (() => {
+              const wrap = document.createElement("div");
+              wrap.append(...fragment.childNodes);
+              return wrap;
+            })();
+          insertAfter.after(root);
+          lookup.set(state.id, root);
+          const props = buildLayerComponentProps(stack, state, rootProps);
+          if (props) syncLayerProps(Alpine, root, props);
+          Alpine.initTree(root);
+        } else if (root.previousSibling !== insertAfter) {
+          insertAfter.after(root);
+          const props = buildLayerComponentProps(stack, state, rootProps);
+          if (props) syncLayerProps(Alpine, root, props);
+        } else {
+          const props = buildLayerComponentProps(stack, state, rootProps);
+          if (props) syncLayerProps(Alpine, root, props);
+        }
+        insertAfter = root;
+      }
+    };
+
+    const bindStack = () => {
+      unsubscribe?.();
+      const client = getLayerClient();
+      stack = client.getStack(stackId);
+      unsubscribe = stack.subscribe(syncStack);
+      syncStack();
+    };
+
+    if (expression.trim()) {
+      const evaluateStackId = utils.evaluateLater(expression);
+      utils.effect(() => {
+        evaluateStackId((value) => {
+          stackId =
+            typeof value === "string" && value.length > 0 ? value : "default";
+          bindStack();
+        });
+      });
+    } else {
+      utils.effect(() => {
+        bindStack();
+      });
+    }
+
+    utils.cleanup(() => {
+      unsubscribe?.();
+      for (const node of lookup.values()) {
+        layerPropsByElement.delete(node);
+        Alpine.destroyTree(node);
+        node.remove();
+      }
+      lookup.clear();
+    });
+  });
+}
+
+interface LayerStackData {
+  states: LayerState[];
+  callFor(
+    state: LayerState,
+    rootProps?: unknown,
+  ): LayerCallContext<unknown, unknown> | null;
+  init(this: LayerStackData): void;
+  destroy(this: LayerStackData & { _unsub?: () => void }): void;
+}
+
+function registerLayerStackData(Alpine: AlpineLike): void {
+  Alpine.data("layerStack", ((stackId?: string) => {
+    const id = stackId ?? "default";
+    const data: LayerStackData = {
+      states: [],
+      callFor(state, rootProps) {
+        const stack = getLayerClient().getStack(id);
+        const layer = stack.getLayer(state.id);
+        return layer
+          ? (createCallContext(
+              stack,
+              layer,
+              state,
+              rootProps,
+            ) as LayerCallContext<unknown, unknown>)
+          : null;
+      },
+      init() {
+        const stack = getLayerClient().getStack(id);
+        const sync = () => {
+          this.states.splice(0, this.states.length, ...stack.getSnapshot());
+        };
+        sync();
+        (this as LayerStackData & { _unsub?: () => void })._unsub =
+          stack.subscribe(sync);
+      },
+      destroy() {
+        const self = this as LayerStackData & { _unsub?: () => void };
+        self._unsub?.();
+      },
+    };
+    return data;
+  }) as unknown as (...args: unknown[]) => Record<string, unknown>);
+}
+
+function registerLayersMagic(Alpine: AlpineLike): void {
+  Alpine.magic("layers", () => {
+    const client = getLayerClient();
+    return {
+      open: client.open.bind(client),
+      dismissAll: client.dismissAll.bind(client),
+      getStack: client.getStack.bind(client),
+    };
+  });
+}
+
+function registerLayerMagic(Alpine: AlpineLike): void {
+  // Return the reactive bag directly so Alpine tracks `$layer.phase` etc.
+  Alpine.magic("layer", (el) => {
+    const bag = findLayerProps(el);
+    if (!bag) {
+      throw new Error(
+        "[layers/alpine] $layer is only available inside an x-layer-outlet row.",
+      );
+    }
+    return bag;
+  });
+}
+
+/**
+ * Alpine plugin — registers `$layers`, `$layer`, `x-layer-outlet`, and
+ * `Alpine.data('layerStack')`.
+ */
+export default function layers(Alpine: AlpineLike): void {
+  setAlpineRuntime(Alpine);
+  registerLayersMagic(Alpine);
+  registerLayerMagic(Alpine);
+  registerLayerOutletDirective(Alpine);
+  registerLayerStackData(Alpine);
+}
+
+export { layers };
diff --git a/packages/alpine/src/layer-client.ts b/packages/alpine/src/layer-client.ts
new file mode 100644
index 0000000..af52b51
--- /dev/null
+++ b/packages/alpine/src/layer-client.ts
@@ -0,0 +1,39 @@
+import { LayerClient } from "@stainless-code/layers";
+
+let _client: LayerClient | undefined;
+let _clientLocked = false;
+
+/** @internal Test-only reset for module singleton state. */
+export function __resetLayerClientForTests(): void {
+  _client = undefined;
+  _clientLocked = false;
+}
+
+function lockClient(): void {
+  _clientLocked = true;
+}
+
+/**
+ * Lazy {@link LayerClient} singleton. Created on first access when
+ * {@link setLayerClient} has not run yet.
+ */
+export function getLayerClient(): LayerClient {
+  lockClient();
+  if (!_client) _client = new LayerClient();
+  return _client;
+}
+
+/**
+ * Pin the shared client before first use. Throws when called after the client
+ * has been resolved lazily or by any adapter API.
+ */
+export function setLayerClient(client?: LayerClient): LayerClient {
+  if (_clientLocked) {
+    throw new Error(
+      "[layers/alpine] setLayerClient() must be called before the first use of getLayerClient() or any adapter API that resolves the client implicitly.",
+    );
+  }
+  lockClient();
+  _client = client ?? new LayerClient();
+  return _client;
+}
diff --git a/packages/alpine/tests-dom/alpinejs.d.ts b/packages/alpine/tests-dom/alpinejs.d.ts
new file mode 100644
index 0000000..2db4e28
--- /dev/null
+++ b/packages/alpine/tests-dom/alpinejs.d.ts
@@ -0,0 +1,15 @@
+declare module "alpinejs" {
+  import type { AlpineLike } from "../src/alpine-types.js";
+
+  interface AlpineInstance extends AlpineLike {
+    plugin(callback: (Alpine: AlpineLike) => void): void;
+    start(): void;
+    initTree(el: Element): void;
+    destroyTree(el: Element): void;
+    nextTick(): Promise<void>;
+    $data(el: Element): Record<string, unknown>;
+  }
+
+  const Alpine: AlpineInstance;
+  export default Alpine;
+}
diff --git a/packages/alpine/tests-dom/cdn.test.ts b/packages/alpine/tests-dom/cdn.test.ts
new file mode 100644
index 0000000..5af13f0
--- /dev/null
+++ b/packages/alpine/tests-dom/cdn.test.ts
@@ -0,0 +1,21 @@
+import { afterEach, describe, expect, it } from "vitest";
+
+describe("Alpine adapter — CDN bootstrap", () => {
+  afterEach(() => {
+    delete (window as Window & { Alpine?: unknown }).Alpine;
+  });
+
+  it("registers the plugin on alpine:init when window.Alpine exists", async () => {
+    const plugins: unknown[] = [];
+    (window as Window & { Alpine?: { plugin: (fn: unknown) => void } }).Alpine =
+      {
+        plugin(fn) {
+          plugins.push(fn);
+        },
+      };
+
+    await import("../src/cdn");
+    document.dispatchEvent(new Event("alpine:init"));
+    expect(plugins.length).toBeGreaterThanOrEqual(1);
+  });
+});
diff --git a/packages/alpine/tests-dom/headless.test.ts b/packages/alpine/tests-dom/headless.test.ts
new file mode 100644
index 0000000..b594563
--- /dev/null
+++ b/packages/alpine/tests-dom/headless.test.ts
@@ -0,0 +1,75 @@
+import Alpine from "alpinejs";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+
+import layers, { LayerClient, setLayerClient } from "../src/index";
+import { __resetLayerClientForTests } from "../src/layer-client";
+
+beforeAll(() => {
+  Alpine.plugin(layers);
+});
+
+let alpineStarted = false;
+
+async function mount(html: string, client: LayerClient) {
+  __resetLayerClientForTests();
+  setLayerClient(client);
+  document.body.innerHTML = html;
+  if (!alpineStarted) {
+    Alpine.start();
+    alpineStarted = true;
+  } else {
+    Alpine.initTree(document.body);
+  }
+  return Alpine.nextTick();
+}
+
+describe("Alpine adapter — headless layerStack", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    __resetLayerClientForTests();
+  });
+
+  it("layerStack data renders states and callFor ends the layer", async () => {
+    const client = new LayerClient();
+    await mount(
+      `
+      <div x-data="layerStack('modal')">
+        <template x-for="state in states" :key="state.id">
+          <button type="button" @click="callFor(state)?.end(true)">
+            Close
+          </button>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    const pending = client.open({
+      key: ["headless"],
+      payload: { n: 1 },
+      stack: "modal",
+    });
+
+    await viWaitFor(() =>
+      expect(document.querySelector("button")).toBeTruthy(),
+    );
+    document.querySelector("button")!.click();
+    await expect(pending).resolves.toBe(true);
+  });
+});
+
+function viWaitFor(assertion: () => void, timeout = 2000): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const tick = () => {
+      try {
+        assertion();
+        resolve();
+      } catch (err) {
+        if (Date.now() - start > timeout) reject(err);
+        else setTimeout(tick, 0);
+      }
+    };
+    tick();
+  });
+}
diff --git a/packages/alpine/tests-dom/inference.test-d.ts b/packages/alpine/tests-dom/inference.test-d.ts
new file mode 100644
index 0000000..de984bb
--- /dev/null
+++ b/packages/alpine/tests-dom/inference.test-d.ts
@@ -0,0 +1,22 @@
+import { LayerClient, layerOptions } from "@stainless-code/layers";
+
+import { createLayer, setLayerClient } from "../src/index";
+
+/** Invariant mutual-assignability check. */
+export type Equal<A, B> =
+  (<T>() => T extends A ? 1 : 2) extends <T>() => T extends B ? 1 : 2
+    ? true
+    : false;
+export type Expect<T extends true> = T;
+
+const client = new LayerClient();
+setLayerClient(client);
+const opts = layerOptions<{ title: string }, boolean>({
+  stack: "modal",
+  key: ["confirm"],
+  exitingDelay: 0,
+});
+const handle = createLayer(opts, client);
+const pending = handle.open({ title: "x" });
+type OpenResult = Expect<Equal<typeof pending, Promise<boolean>>>;
+export type _CreateLayerOpen = OpenResult;
diff --git a/packages/alpine/tests-dom/outlet.test.ts b/packages/alpine/tests-dom/outlet.test.ts
new file mode 100644
index 0000000..85bd8f5
--- /dev/null
+++ b/packages/alpine/tests-dom/outlet.test.ts
@@ -0,0 +1,238 @@
+import { createCallContext } from "@stainless-code/layers";
+import Alpine from "alpinejs";
+import { afterEach, beforeAll, beforeEach, describe, expect, it } from "vitest";
+
+import layers, {
+  layerOptions,
+  LayerClient,
+  setLayerClient,
+} from "../src/index";
+import { __resetLayerClientForTests } from "../src/layer-client";
+
+const modalOptions = layerOptions<{ title: string }, boolean>({
+  stack: "modal",
+  key: ["modal", "outlet"],
+  exitingDelay: 0,
+});
+
+beforeAll(() => {
+  Alpine.plugin(layers);
+});
+
+let alpineStarted = false;
+
+function mount(html: string, client: LayerClient) {
+  __resetLayerClientForTests();
+  setLayerClient(client);
+  document.body.innerHTML = html;
+  if (!alpineStarted) {
+    Alpine.start();
+    alpineStarted = true;
+  } else {
+    Alpine.initTree(document.body);
+  }
+  return Alpine.nextTick();
+}
+
+describe("Alpine adapter — plugin + outlet", () => {
+  beforeEach(() => {
+    document.body.innerHTML = "";
+  });
+
+  afterEach(() => {
+    document.body.innerHTML = "";
+    __resetLayerClientForTests();
+  });
+
+  it("x-layer-outlet renders cloned markup and $layer.call.end resolves open", async () => {
+    const client = new LayerClient();
+    await mount(
+      `
+      <div id="app" x-data>
+        <template x-layer-outlet="'modal'">
+          <div>
+            <button type="button" @click="$layer.call.end(true)">
+              Close <span x-text="JSON.stringify($layer.payload)"></span>
+            </button>
+          </div>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    const pending = client.open({
+      ...modalOptions,
+      payload: { title: "Outlet modal" },
+    });
+
+    await viWaitFor(() =>
+      expect(document.body.textContent).toContain("Outlet modal"),
+    );
+
+    const button = document.querySelector("button");
+    expect(button).toBeTruthy();
+    button!.click();
+
+    await expect(pending).resolves.toBe(true);
+    await viWaitFor(() => expect(document.querySelector("button")).toBeNull());
+  });
+
+  it("keeps the outlet row mounted and refreshes $layer.transition on settle", async () => {
+    const client = new LayerClient();
+    await mount(
+      `
+      <div id="app" x-data>
+        <template x-layer-outlet="'modal'">
+          <div x-data>
+            <span id="tr" x-text="$layer.transition"></span>
+            <span id="title" x-text="$layer.payload.title"></span>
+          </div>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    const pending = client.open({
+      ...modalOptions,
+      enteringDelay: 80,
+      payload: { title: "Phase" },
+    });
+
+    await viWaitFor(() =>
+      expect(document.getElementById("tr")?.textContent).toBe("entering"),
+    );
+    const row = document.getElementById("tr");
+    await viWaitFor(() =>
+      expect(document.getElementById("tr")?.textContent).toBe("settled"),
+    );
+    expect(document.getElementById("tr")).toBe(row);
+
+    const stack = client.getStack("modal");
+    const state = stack.getSnapshot()[0]!;
+    createCallContext(
+      stack as never,
+      stack.getLayer(state.id)! as never,
+      state as never,
+    ).end(true);
+    await pending;
+  });
+
+  it("resolves $layer through x-teleport via _x_teleportBack", async () => {
+    const client = new LayerClient();
+    await mount(
+      `
+      <div id="app" x-data>
+        <template x-layer-outlet="'modal'">
+          <template x-teleport="body">
+            <div>
+              <button type="button" id="tel" @click="$layer.call.end(true)">
+                Close <span x-text="$layer.payload.title"></span>
+              </button>
+            </div>
+          </template>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    const pending = client.open({
+      ...modalOptions,
+      payload: { title: "Teleported" },
+    });
+
+    await viWaitFor(() =>
+      expect(document.getElementById("tel")?.textContent).toContain(
+        "Teleported",
+      ),
+    );
+    expect(document.getElementById("tel")?.closest("#app")).toBeNull();
+
+    document.getElementById("tel")!.click();
+    await expect(pending).resolves.toBe(true);
+    await viWaitFor(() => expect(document.getElementById("tel")).toBeNull());
+  });
+
+  it("outlet cleanup unsubscribes the stack", async () => {
+    const client = new LayerClient();
+    await mount(
+      `
+      <div id="app" x-data>
+        <template x-layer-outlet="'modal'">
+          <div><span x-text="$layer.payload.title"></span></div>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    const stack = client.getStack("modal");
+    expect(stack.size).toBeGreaterThan(0);
+
+    const app = document.getElementById("app")!;
+    Alpine.destroyTree(app);
+    app.remove();
+    expect(stack.size).toBe(0);
+  });
+
+  it("x-layer-outlet rebinds when the stack id expression changes", async () => {
+    const client = new LayerClient();
+    await mount(
+      `
+      <div id="app" x-data="{ sid: 'modal' }">
+        <template x-layer-outlet="sid">
+          <div>
+            <span id="row" x-text="$layer.payload.title"></span>
+          </div>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    const other = layerOptions<{ title: string }, boolean>({
+      stack: "other",
+      key: ["modal", "other"],
+      exitingDelay: 0,
+    });
+
+    void client.open({
+      ...modalOptions,
+      payload: { title: "On modal" },
+    });
+    await viWaitFor(() =>
+      expect(document.getElementById("row")?.textContent).toBe("On modal"),
+    );
+
+    const app = document.getElementById("app")!;
+    (Alpine.$data(app) as { sid: string }).sid = "other";
+    await Alpine.nextTick();
+
+    void client.open({
+      ...other,
+      payload: { title: "On other" },
+    });
+    await viWaitFor(() =>
+      expect(document.getElementById("row")?.textContent).toBe("On other"),
+    );
+  });
+});
+
+function viWaitFor(assertion: () => void, timeout = 2000): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const start = Date.now();
+    const tick = () => {
+      try {
+        assertion();
+        resolve();
+      } catch (err) {
+        // Macrotask: enter/exit delays use setTimeout and must not be starved.
+        if (Date.now() - start > timeout) reject(err);
+        else setTimeout(tick, 0);
+      }
+    };
+    tick();
+  });
+}
diff --git a/packages/alpine/tsconfig.json b/packages/alpine/tsconfig.json
new file mode 100644
index 0000000..750c792
--- /dev/null
+++ b/packages/alpine/tsconfig.json
@@ -0,0 +1,4 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "include": ["src/**/*.ts", "tests-dom/**/*.ts", "tsdown.config.ts"]
+}
diff --git a/packages/alpine/tsdown.config.ts b/packages/alpine/tsdown.config.ts
new file mode 100644
index 0000000..34fefbe
--- /dev/null
+++ b/packages/alpine/tsdown.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsdown";
+
+export default defineConfig({
+  entry: { index: "src/index.ts", cdn: "src/cdn.ts" },
+  outDir: "dist",
+  format: "esm",
+  dts: true,
+  clean: true,
+});
diff --git a/packages/alpine/vitest.config.ts b/packages/alpine/vitest.config.ts
new file mode 100644
index 0000000..89d3a5a
--- /dev/null
+++ b/packages/alpine/vitest.config.ts
@@ -0,0 +1,12 @@
+import { defineConfig } from "vitest/config";
+
+// Real alpinejs + jsdom — bun:test cannot run Alpine's mutation lifecycle.
+export default defineConfig({
+  test: {
+    environment: "jsdom",
+    include: ["tests-dom/**/*.test.ts"],
+    globals: false,
+    clearMocks: true,
+    restoreMocks: true,
+  },
+});

From 6a7a39da2aef09eb55ac12fa5e2f0099c4f299e9 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <sebiitv@gmail.com>
Date: Fri, 17 Jul 2026 16:32:06 +0300
Subject: [PATCH 2/5] chore: format integrations meta page arrays

---
 apps/docs/content/integrations/base-ui/meta.ts    | 8 +++++++-
 apps/docs/content/integrations/react-aria/meta.ts | 8 +++++++-
 2 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/apps/docs/content/integrations/base-ui/meta.ts b/apps/docs/content/integrations/base-ui/meta.ts
index 4618d67..6641787 100644
--- a/apps/docs/content/integrations/base-ui/meta.ts
+++ b/apps/docs/content/integrations/base-ui/meta.ts
@@ -3,5 +3,11 @@ import { defineMeta } from "blume";
 export default defineMeta({
   title: "Base UI",
   icon: "/icons/base-ui.svg",
-  pages: ["toast", "confirm-dialog", "drawer", "nested-confirm", "animated-enter-exit"],
+  pages: [
+    "toast",
+    "confirm-dialog",
+    "drawer",
+    "nested-confirm",
+    "animated-enter-exit",
+  ],
 });
diff --git a/apps/docs/content/integrations/react-aria/meta.ts b/apps/docs/content/integrations/react-aria/meta.ts
index 06c9b31..1bca4d1 100644
--- a/apps/docs/content/integrations/react-aria/meta.ts
+++ b/apps/docs/content/integrations/react-aria/meta.ts
@@ -3,5 +3,11 @@ import { defineMeta } from "blume";
 export default defineMeta({
   title: "React Aria",
   icon: "/icons/react-aria.svg",
-  pages: ["toast", "confirm-dialog", "drawer", "nested-confirm", "animated-enter-exit"],
+  pages: [
+    "toast",
+    "confirm-dialog",
+    "drawer",
+    "nested-confirm",
+    "animated-enter-exit",
+  ],
 });

From 111d791388a45ad2dbdbe799232929b0e07223e5 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <sebiitv@gmail.com>
Date: Fri, 17 Jul 2026 16:36:43 +0300
Subject: [PATCH 3/5] docs: generate TypeDoc for Lit and Alpine adapters

Add both packages to typedoc entryPoints, map Lit external symbols so
treatWarningsAsErrors stays green, and point the API index at the new modules.
---
 .agents/skills/harden-pr/LEDGER.md        |  1 -
 apps/docs/content/reference/api/index.mdx | 12 ++++++------
 apps/docs/content/reference/index.mdx     |  2 +-
 packages/lit/src/index.ts                 |  4 ++--
 typedoc.json                              | 17 ++++++++++++++++-
 5 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/.agents/skills/harden-pr/LEDGER.md b/.agents/skills/harden-pr/LEDGER.md
index 05c104e..bffef67 100644
--- a/.agents/skills/harden-pr/LEDGER.md
+++ b/.agents/skills/harden-pr/LEDGER.md
@@ -17,7 +17,6 @@ By-design or false-positive findings — do not re-raise.
 - **[public-api]** `packages/lit/src/index.ts` `layerClientContext` export — by-design; rationale on the const JSDoc.
 - **[public-api]** `packages/lit/src/index.ts` `StackController` `queued`/`deferClient`/`bindClient` — by-design; rationale on the class/ctor JSDoc (factories are the supported path).
 - **[correctness]** `packages/alpine/src/index.ts` multi-child `x-layer-outlet` template — by-design; Alpine `<template>` loops (`x-for`/`x-if`) require a single root element; outlet matches that contract (document in alpine.mdx).
-- **[docs]** `typedoc.json` omit Alpine/Lit entryPoints — by-design for now; TypeDoc covers core + compiler-friendly adapters; Lit/Alpine documented on adapter pages + softened reference/index claim.
 - **[docs]** `apps/docs/content/adapters/index.mdx` Alpine footnote `⁷` vs `docs/architecture.md` `⁸` — by-design; each matrix numbers footnotes for its own footnote set (architecture also has Lit `⁷`).
 
 ## Deferred
diff --git a/apps/docs/content/reference/api/index.mdx b/apps/docs/content/reference/api/index.mdx
index 0a2d1bb..811bde4 100644
--- a/apps/docs/content/reference/api/index.mdx
+++ b/apps/docs/content/reference/api/index.mdx
@@ -1,6 +1,6 @@
 ---
 title: API
-description: Exhaustive CI-generated TypeDoc for core and the React/Preact/Solid/Angular/Vue/Svelte entries — Lit and Alpine are on their adapter pages.
+description: Exhaustive CI-generated TypeDoc reference — every export across core and the adapters.
 sidebar:
   label: Overview
 search:
@@ -10,7 +10,7 @@ search:
 import Card from "blume/components/content/Card.astro";
 import CardGroup from "blume/components/content/CardGroup.astro";
 
-One TypeDoc module per entry in `typedoc.json`. Lit and Alpine are on their adapter pages (not generated here yet). [Reference](/reference) · [Core API](/reference/core-api) · [Adapter hooks](/reference/adapter-hooks)
+One TypeDoc module per package. [Reference](/reference) · [Core API](/reference/core-api) · [Adapter hooks](/reference/adapter-hooks)
 
 <CardGroup cols={3}>
   <Card title="Core" href="/reference/api/core" icon="/icons/vanilla.svg" arrow>
@@ -41,11 +41,11 @@ One TypeDoc module per entry in `typedoc.json`. Lit and Alpine are on their adap
   <Card title="Vue" href="/reference/api/vue" icon="/icons/vue.svg" arrow>
     `@stainless-code/vue-layers`
   </Card>
-  <Card title="Lit" href="/adapters/lit" icon="/icons/lit.svg" arrow>
-    `@stainless-code/lit-layers` (adapter page)
+  <Card title="Lit" href="/reference/api/lit" icon="/icons/lit.svg" arrow>
+    `@stainless-code/lit-layers`
   </Card>
-  <Card title="Alpine" href="/adapters/alpine" icon="/icons/alpine.svg" arrow>
-    `@stainless-code/alpine-layers` (adapter page)
+  <Card title="Alpine" href="/reference/api/alpine" icon="/icons/alpine.svg" arrow>
+    `@stainless-code/alpine-layers`
   </Card>
   <Card
     title="Svelte (runes)"
diff --git a/apps/docs/content/reference/index.mdx b/apps/docs/content/reference/index.mdx
index 5e21267..28330ca 100644
--- a/apps/docs/content/reference/index.mdx
+++ b/apps/docs/content/reference/index.mdx
@@ -13,7 +13,7 @@ The symbols and hook signatures you reach for most often — with minimal exampl
 | [Adapter hooks](/reference/adapter-hooks) | Hook and provider matrix across React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte                                                                              |
 | [Roadmap](/reference/roadmap)             | Forward-looking work — not a mirror of shipped `src/`                                                                                                                    |
 | [Migration](/reference/migration)         | Breaking-change policy and migration notes when they ship                                                                                                                |
-| [API reference](/reference/api)           | Exhaustive CI-generated TypeDoc for `core` and the React/Preact/Solid/Angular/Vue/Svelte entries (Lit/Alpine: adapter pages); regenerated on every docs build            |
+| [API reference](/reference/api)           | Exhaustive CI-generated TypeDoc reference — every export across `core` and the adapters, regenerated on every docs build                                                 |
 
 ## Release history
 
diff --git a/packages/lit/src/index.ts b/packages/lit/src/index.ts
index 810a7ae..28e432a 100644
--- a/packages/lit/src/index.ts
+++ b/packages/lit/src/index.ts
@@ -71,8 +71,8 @@ function isElementHost(
 /**
  * Provides a {@link LayerClient} to descendant consumers via `@lit/context`.
  *
- * Attaches a {@link ContextProvider} to `host`; descendants resolve it with
- * {@link useLayerClient} or by omitting `client` on a hook. A new client is
+ * Attaches a `@lit/context` `ContextProvider` to `host`; descendants resolve it
+ * with {@link useLayerClient} or by omitting `client` on a hook. A new client is
  * created when `client` is omitted.
  *
  * @param host Lit element host that owns the context provider.
diff --git a/typedoc.json b/typedoc.json
index f0764f0..4c98d1f 100644
--- a/typedoc.json
+++ b/typedoc.json
@@ -9,7 +9,9 @@
     "packages/vue/src/index.ts",
     "packages/solid/src/index.ts",
     "packages/preact/src/index.ts",
-    "packages/angular/src/index.ts"
+    "packages/angular/src/index.ts",
+    "packages/lit/src/index.ts",
+    "packages/alpine/src/index.ts"
   ],
   "tsconfig": "tsconfig.docs.json",
   "cleanOutputDir": false,
@@ -51,6 +53,19 @@
   },
   "excludePrivate": true,
   "excludeInternal": true,
+  "excludeCategories": ["styles"],
+  "externalSymbolLinkMappings": {
+    "@lit/context": {
+      "ContextProvider": "https://lit.dev/docs/data/context/"
+    },
+    "@lit/reactive-element": {
+      "PropertyDeclaration": "https://lit.dev/docs/api/ReactiveElement/#PropertyDeclaration",
+      "css": "https://lit.dev/docs/api/styles/#css"
+    },
+    "lit": {
+      "css": "https://lit.dev/docs/api/styles/#css"
+    }
+  },
   "frontmatterGlobals": {
     "search": {
       "tags": ["api", "reference"]

From 918329d2cacb6d5abcb9791d5df0bf22c4e83a35 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <sebiitv@gmail.com>
Date: Fri, 17 Jul 2026 16:39:09 +0300
Subject: [PATCH 4/5] docs: link Comparison on concepts index

Also note React Native portal targets in the React adapter skill.
---
 apps/docs/content/concepts/index.mdx        | 1 +
 packages/react/skills/react-layers/SKILL.md | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/docs/content/concepts/index.mdx b/apps/docs/content/concepts/index.mdx
index cfc02a8..5542db1 100644
--- a/apps/docs/content/concepts/index.mdx
+++ b/apps/docs/content/concepts/index.mdx
@@ -9,6 +9,7 @@ A headless `LayerClient` owns named stacks of layers; adapters subscribe and ren
 
 - [Overview](/concepts/overview) — core + adapter boundary
 - [When to use](/concepts/when-to-use) — use-case matrix
+- [Comparison](/concepts/comparison) — where Layers fits among modal/overlay managers
 - [Lifecycle](/concepts/lifecycle) — phase, transition, actionStatus
 - [Stacks, scope & GC](/concepts/stacks-scope-gc) — named stacks, serial/parallel, gcTime, upsert, update
 - [Identity & types](/concepts/identity-and-types) — keys, instance ids, DataTag inference
diff --git a/packages/react/skills/react-layers/SKILL.md b/packages/react/skills/react-layers/SKILL.md
index 125d561..5c7b88d 100644
--- a/packages/react/skills/react-layers/SKILL.md
+++ b/packages/react/skills/react-layers/SKILL.md
@@ -203,7 +203,7 @@ import { StackSubscribe } from "@stainless-code/react-layers";
 
 `StackOutlet` is the default host. It maps each state to its registered `component` with full props (`call`, `payload`, `data`, `error`, `phase`, `transition`, `actionStatus`, `dismissing`). A missing component renders nothing and warns in development.
 
-`StackOutlet` renders inline. Wrap it in your own `createPortal` if you need a specific portal target; sidecar and nested-portal hosting are consumer concerns, not built into the adapter.
+`StackOutlet` renders inline. Wrap it in your own `createPortal` (web) or root sibling / single host `Modal` / navigator overlay (React Native — same package, no `react-dom` peer) if you need a different target; sidecar and nested-portal hosting are consumer concerns, not built into the adapter.
 
 ### Headless: useStackHandles
 

From 7b4d2b0ef25654abcf0bf79af11f8f8dac465e53 Mon Sep 17 00:00:00 2001
From: Sutu Sebastian <sebiitv@gmail.com>
Date: Fri, 17 Jul 2026 16:51:18 +0300
Subject: [PATCH 5/5] fix: Alpine outlet warnings and adapter-local docs voice

Warn on non-string x-layer-outlet ids and pre-plugin hooks; drop peer-adapter name-drops from per-adapter surfaces; sync Hero adapter count.
---
 apps/docs/content/adapters/alpine.mdx         | 18 +++---
 apps/docs/content/adapters/angular.mdx        |  4 +-
 apps/docs/content/adapters/index.mdx          |  2 +-
 apps/docs/content/adapters/svelte/runes.mdx   |  4 +-
 apps/docs/content/adapters/svelte/store.mdx   |  4 +-
 apps/docs/content/concepts/comparison.mdx     |  4 +-
 apps/docs/content/concepts/glossary.mdx       |  4 +-
 apps/docs/content/concepts/overview.mdx       |  2 +-
 apps/docs/content/concepts/stability.mdx      |  2 +-
 .../content/guides/headless-rendering.mdx     | 12 ++--
 apps/docs/pages/_home/Hero.astro              |  2 +-
 bun.lock                                      |  3 +-
 docs/glossary.md                              |  4 +-
 packages/alpine/skills/alpine-layers/SKILL.md |  2 +-
 packages/alpine/src/cdn.ts                    |  2 +-
 packages/alpine/src/index.test.ts             | 10 +++-
 packages/alpine/src/index.ts                  | 60 ++++++++++---------
 packages/alpine/tests-dom/outlet.test.ts      | 43 ++++++++++++-
 .../angular/skills/angular-layers/SKILL.md    |  6 +-
 packages/svelte/skills/svelte-layers/SKILL.md |  4 +-
 20 files changed, 125 insertions(+), 67 deletions(-)

diff --git a/apps/docs/content/adapters/alpine.mdx b/apps/docs/content/adapters/alpine.mdx
index 09bc35f..709ee2d 100644
--- a/apps/docs/content/adapters/alpine.mdx
+++ b/apps/docs/content/adapters/alpine.mdx
@@ -7,7 +7,7 @@ sidebar:
   icon: /icons/alpine.svg
 ---
 
-`@stainless-code/alpine-layers` binds stacks through an Alpine plugin and markup directives. The core is re-exported.
+Stop wiring `x-show` / `x-data` open flags for every modal — open a named stack from anywhere and `await` a typed result. `@stainless-code/alpine-layers` is the Alpine plugin + outlet; the core is re-exported.
 
 :::tip
 Alpine builds compiler-free (tsdown, no framework components shipped). Render with `x-layer-outlet` or Rank-2 `layerStack` + `x-for` + `callFor` in your markup — **intentional primitive design**, not a parity gap. See the [parity matrix](/adapters).
@@ -62,12 +62,14 @@ setLayerClient(); // optional — only to pin a client before first stack use
 ```
 
 :::note
-`setLayerClient` after the singleton exists **throws**. Custom apps: set explicitly in bootstrap; `createStackHook` is the Angular-shaped `{ setClient, useAppStack }` helper (no `AppHost` / `AppLayer`).
+`setLayerClient` after the singleton exists **throws**. Custom apps: set explicitly in bootstrap; `createStackHook` returns `{ setClient, useAppStack }`.
 :::
 
 ## Render a stack
 
-**Outlet** — declare markup inside `x-layer-outlet`; the directive evaluates the expression as a stack id. Bare `confirm` resolves to `window.confirm` (a function), so the outlet falls back to the `"default"` stack — always quote: `x-layer-outlet="'confirm'"`. Keys by `state.id` and exposes the active row as `$layer` (`LayerComponentProps` bag — `$layer.call`, `$layer.payload`, …):
+**Outlet** — declare markup inside `x-layer-outlet`; the directive evaluates the expression as a stack id. Keys by `state.id` and exposes the active row as `$layer` (`LayerComponentProps` bag — `$layer.call`, `$layer.payload`, …).
+
+Always quote the id: `x-layer-outlet="'confirm'"`. Bare `confirm` resolves to `window.confirm` (a function) — the outlet warns in development and falls back to `"default"`.
 
 ```html
 <template x-layer-outlet="'confirm'">
@@ -83,7 +85,7 @@ setLayerClient(); // optional — only to pin a client before first stack use
 Outlet templates need a **single root** element (same Alpine convention as `x-for` / `x-if`). Wrap siblings in one `<div>` (or teleport target).
 :::
 
-**Rank-2** — `Alpine.data('layerStack', stackId?)` returns reactive `{ states, callFor(state) }`; pair with `x-for` where an outlet is not enough:
+**Rank-2** (subscribe + render yourself — no component registry) — `Alpine.data('layerStack', stackId?)` returns reactive `{ states, callFor(state) }`; pair with `x-for` where an outlet is not enough:
 
 ```html
 <div x-data="layerStack('confirm')">
@@ -96,10 +98,10 @@ Outlet templates need a **single root** element (same Alpine convention as `x-fo
 </div>
 ```
 
-`layerOptions` has **no** `component` field — Alpine markup lives in the outlet / loop, like Svelte runes without shipped `.svelte` files.
+`layerOptions` has **no** `component` field — Alpine markup lives in the outlet / loop.
 
 :::tip
-No `StackSubscribe` — Rank-2 `layerStack` + `x-for` + `callFor` is intentional (same story as [Svelte runes](/adapters/svelte/runes)). Focus trapping and scroll lock: optional [`@alpinejs/focus`](https://alpinejs.dev/plugins/focus); portaling: consumer [`x-teleport`](https://alpinejs.dev/directives/teleport), not the adapter.
+Rank-2 `layerStack` + `x-for` + `callFor` is intentional — no shipped components. Focus trapping and scroll lock: optional [`@alpinejs/focus`](https://alpinejs.dev/plugins/focus); portaling: consumer [`x-teleport`](https://alpinejs.dev/directives/teleport), not the adapter.
 :::
 
 ## Confirm dialog
@@ -172,9 +174,9 @@ Options bag plus optional trailing `LayerClient`. **Drive** with `createLayer(op
 | `Alpine.data('layerStack', id?)` | Rank-2 `{ states, callFor(state) }` + subscribe teardown in `destroy()`                                                         |
 | `useMutationFlow(call)`          | Reactive `pending`; `run(fn).orEnd(response)`                                                                                   |
 | `useLayerGroup(call, options?)`  | `{ open, dismissAll, states, stackId, dispose }` — nest `x-layer-outlet` in markup; call `dispose()` when tearing down manually |
-| `createStackHook(config?)`       | `{ setClient, useAppStack }` — no `AppHost` / `AppLayer`                                                                        |
+| `createStackHook(config?)`       | `{ setClient, useAppStack }`                                                                                                    |
 
-No `StackSubscribe`, `useStackHandles`, or React-shaped `component` registry — by design. Optional `Alpine.data('confirm', …)` is for reusable **behavior**, not template registration.
+No `component` registry — markup stays in your templates. Optional `Alpine.data('confirm', …)` is for reusable **behavior**, not template registration.
 
 ## Learn more
 
diff --git a/apps/docs/content/adapters/angular.mdx b/apps/docs/content/adapters/angular.mdx
index f0afb8d..3190fa7 100644
--- a/apps/docs/content/adapters/angular.mdx
+++ b/apps/docs/content/adapters/angular.mdx
@@ -10,7 +10,7 @@ sidebar:
 `@stainless-code/angular-layers` bridges stacks into Angular signals, rendered imperatively via `renderStack(vcr)`. The core is re-exported.
 
 :::tip
-Angular builds compiler-free (tsdown, no framework compiler). Stack rendering is **intentional imperative design** — `renderStack(vcr)` instead of a shipped `StackOutlet` component. This is not a parity gap; see the [parity matrix](/adapters).
+Angular builds compiler-free (tsdown, no framework compiler). Stack rendering is **intentional imperative design** — `renderStack(vcr)` instead of a shipped outlet component. **Not a parity gap.** See the [parity matrix](/adapters).
 :::
 
 ## Install
@@ -134,7 +134,7 @@ Options bag plus optional trailing `LayerClient`. **Drive** with `injectLayer(op
 | `renderStack(vcr, stackId?, rootProps?)` | Imperative outlet — **the Angular rendering surface** |
 | `useMutationFlow(call)` | `pending` is a `Signal<boolean>`; `run(fn).orEnd(response)` |
 | `useLayerGroup(call, options?)` | Child stack with `renderInto(vcr)` instead of `Outlet` |
-| `createStackHook(config?)` | `{ provideClient, useAppStack, renderInto }` — no `AppHost`/`AppLayer` |
+| `createStackHook(config?)` | `{ provideClient, useAppStack, renderInto }` |
 
 ## Learn more
 
diff --git a/apps/docs/content/adapters/index.mdx b/apps/docs/content/adapters/index.mdx
index 3807d0f..3cc4f99 100644
--- a/apps/docs/content/adapters/index.mdx
+++ b/apps/docs/content/adapters/index.mdx
@@ -12,7 +12,7 @@ Pick a framework binding — same engine, native reactivity. The [core](/adapter
 
 ## Adapter ergonomics
 
-Same primitives on every adapter: client context, `useStack`, **drive** handles, **observe** hooks. Engine parity; wrappers (`StackOutlet`, `createStackHook`, …) are sugar and diverge by design. React/Preact/Solid/Angular/Vue/Lit/Alpine re-export the full core; Svelte re-exports selectively. Angular, Alpine, and Svelte ship compiler-free — markup in your templates, no React-shaped `component` registry. Lit: `<stack-provider>` is shadow + `<slot>`; outlet / subscribe / `app-host` are light DOM.
+Same primitives on every adapter: client context, `useStack`, **drive** handles, **observe** hooks. Engine parity; wrappers (`StackOutlet`, `createStackHook`, …) are sugar and diverge by design. React/Preact/Solid/Angular/Vue/Lit/Alpine re-export the full core; Svelte re-exports selectively. Angular, Alpine, and Svelte ship compiler-free — markup in your templates, no `component` registry on `layerOptions`. Lit: `<stack-provider>` is shadow + `<slot>`; outlet / subscribe / `app-host` are light DOM.
 
 | Capability                                                         | React | Preact | Solid | Angular | Vue | Lit | Alpine | Svelte (runes) | Svelte (store) |
 | ------------------------------------------------------------------ | :---: | :----: | :---: | :-----: | :-: | :-: | :----: | :------------: | :------------: |
diff --git a/apps/docs/content/adapters/svelte/runes.mdx b/apps/docs/content/adapters/svelte/runes.mdx
index e6b0a0b..016035e 100644
--- a/apps/docs/content/adapters/svelte/runes.mdx
+++ b/apps/docs/content/adapters/svelte/runes.mdx
@@ -41,7 +41,7 @@ Import client/stack APIs from **one** entry only. Mixing this package with `@sta
 
 ## Render a stack
 
-`useStack({ stack })` returns a `SvelteStack` with `.current` (the selected snapshot) and `.callFor(state)` (the call context). No `StackOutlet` — iterate in your markup:
+`useStack({ stack })` returns a `SvelteStack` with `.current` (the selected snapshot) and `.callFor(state)` (the call context). Iterate in your markup:
 
 ```svelte
 <script>
@@ -122,7 +122,7 @@ Options bag plus optional trailing `LayerClient`. **Drive** with `createLayer(op
 | `useMutationFlow(call)` | `pending` getter (reactive via `createSubscriber`); `run(fn).orEnd(response)` |
 | `useLayerGroup(call, options?)` | Child stack — render `{#each group.stack.current}` + `group.stack.callFor(s)` |
 
-No `StackOutlet`, `StackSubscribe`, `useStackHandles`, or `createStackHook` — by design.
+No shipped outlet or subscribe components — render with `useStack().current` + `callFor` in your markup.
 
 ## Learn more
 
diff --git a/apps/docs/content/adapters/svelte/store.mdx b/apps/docs/content/adapters/svelte/store.mdx
index da489d1..0c5abde 100644
--- a/apps/docs/content/adapters/svelte/store.mdx
+++ b/apps/docs/content/adapters/svelte/store.mdx
@@ -10,7 +10,7 @@ sidebar:
 `@stainless-code/svelte-layers/store` binds stacks to Svelte `readable` stores. Most core symbols are re-exported. Core's headless `createLayer` is `createLayerHandle`; the wired handle is `createLayer`. Use this entry for Svelte 3+ projects that prefer the store contract over runes.
 
 :::tip
-Like the [runes entry](/adapters/svelte/runes), this adapter ships no `.svelte` components — render with `{#each $stack}` + `callFor(client, stackId, s)` in your own markup. **Intentional compiler-free design**; see the [parity matrix](/adapters).
+Like the [runes entry](/adapters/svelte/runes), this adapter ships no `.svelte` components — render with `{#each $stack}` + `callFor(client, stackId, s)` in your own markup. **Intentional primitive design**, not a parity gap. See the [parity matrix](/adapters).
 :::
 
 ## Install
@@ -127,7 +127,7 @@ Options bag plus optional trailing `LayerClient`. **Drive** with `createLayer(op
 | `useMutationFlow(call)` | `pending` is a `Readable<boolean>` — subscribe with `$pending` |
 | `useLayerGroup(call, options?)` | Child stack as `Readable<LayerState[]>` — render `{#each $group.stack}` + `callFor` |
 
-No `StackOutlet`, `StackSubscribe`, `useStackHandles`, or `createStackHook` — by design.
+No shipped outlet or subscribe components — render with `$stack` + `callFor` in your markup.
 
 ## Learn more
 
diff --git a/apps/docs/content/concepts/comparison.mdx b/apps/docs/content/concepts/comparison.mdx
index fd30058..7aae341 100644
--- a/apps/docs/content/concepts/comparison.mdx
+++ b/apps/docs/content/concepts/comparison.mdx
@@ -22,7 +22,7 @@ Experimental — the API may change between minor releases. Pin your version. Se
 
 Layers owns **state coordination, not UI ownership**. The matrix below scores engine axes only — typed <Tooltip tip="A branded key on layerOptions; open() infers payload and response types via DataTag.">await</Tooltip>, named stacks, serial queues, <Tooltip tip="A consumer predicate that gates dismissal; true allows, falsy or a thrown error vetoes.">blockers</Tooltip>, and the rest. Focus traps, portals, backdrop, and confirm chrome live in your component library.
 
-Two views: this matrix contrasts **one exemplar per category**; the [full spectrum](#across-the-whole-landscape) below scores **every audited library across all eight frameworks**. Columns here are the libraries evaluators most often weigh against Layers — the React registry incumbents (`nice-modal`, `overlay-kit`), the closest React DX peer (`react-call`), the highest-adoption batteries-included manager (`@mantine/modals` — the category contrast), and the closest multi-framework peer (`overlastic`). Non-React peers like `kolirt/vue-modal`, `@gwn-sheet-stack`, and `dialog-fn` are in the full-spectrum tables.
+Two views: this matrix contrasts **one exemplar per category**; the [full spectrum](#across-the-whole-landscape) below scores **every audited library** on the engine axes Layers targets. Columns here are the libraries evaluators most often weigh against Layers — the React registry incumbents (`nice-modal`, `overlay-kit`), the closest React DX peer (`react-call`), the highest-adoption batteries-included manager (`@mantine/modals` — the category contrast), and the closest multi-framework peer (`overlastic`). Non-React peers like `kolirt/vue-modal`, `@gwn-sheet-stack`, and `dialog-fn` are in the full-spectrum tables.
 
 | Capability            |        Layers        |      react-call      |     nice-modal     |    overlay-kit     |    @mantine/modals    |      overlastic      |
 | --------------------- | :------------------: | :------------------: | :----------------: | :----------------: | :-------------------: | :------------------: |
@@ -48,7 +48,7 @@ Focus containment, ARIA/dialog semantics, portals/top-layer, backdrop/Escape, sc
 
 ## Across the whole landscape
 
-The matrix above contrasts one exemplar per category. The tables below are the full spectrum — every audited library a real evaluator weighs, across all eight frameworks, scored on the engine axes Layers targets. One table per category (orchestration engines split into multi-framework and single-framework so no table is wider than the eye can scan). **Layers is the baseline column in every table — the only column green on every row.** `R/V/S/Solid/Ang/Lit/Alpine` = React/Vue/Svelte/Solid/Angular/Lit/Alpine; `Nfw` = N frameworks.
+The matrix above contrasts one exemplar per category. The tables below are the full spectrum — every audited library a real evaluator weighs, scored on the engine axes Layers targets. One table per category (orchestration engines split into multi-framework and single-framework so no table is wider than the eye can scan). Layers is the baseline column in every table. Layers' `✅ 8` is its adapter count; peer cells use `R/V/S/Solid/Ang/Lit/Alpine` = React/Vue/Svelte/Solid/Angular/Lit/Alpine (no audited Preact peer in these tables); `Nfw` = N frameworks.
 
 **Multi-framework orchestration engines**
 
diff --git a/apps/docs/content/concepts/glossary.mdx b/apps/docs/content/concepts/glossary.mdx
index 3cf1877..837c750 100644
--- a/apps/docs/content/concepts/glossary.mdx
+++ b/apps/docs/content/concepts/glossary.mdx
@@ -56,8 +56,8 @@ From `LayerClient` down to `keySignature` — every term in code, docs, and issu
   <AccordionItem title="Adapters & rendering">
     - **Observer / selector** — adapters subscribe to `LayerStack.getSnapshot()` and project via a selector (React/Preact `useSyncExternalStore`, Solid `from`, Angular `signal`, Vue `shallowRef`, Lit reactive controllers, Alpine `Alpine.reactive` / data `states`, Svelte runes).
     - **Options helper** (`layerOptions`) — identity function carrying `<P, R, E, D>` generics so `LayerClient.open` infers the response type end-to-end.
-    - **Outlet** — renders the active stack. React, Preact, Solid, and Vue ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Lit ships `<stack-outlet>`; Alpine ships `x-layer-outlet` + `$layer`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](/adapters#adapter-ergonomics).
-    - **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Alpine Rank-2 `layerStack` + `callFor`; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
+    - **Outlet** — renders the active stack. React, Preact, and Solid ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Vue ships `StackOutlet`; Lit ships `<stack-outlet>`; Alpine ships `x-layer-outlet` + `$layer`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](/adapters#adapter-ergonomics).
+    - **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Alpine Rank-2 = subscribe + render yourself via `layerStack` + `callFor`; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
     - **Validator** (`validate`) — a Standard Schema or sync `(input) => output` fn that parses/validates a layer's `payload` at `open`; the layer stores the parsed output. Failure rejects `open` with a `PayloadValidationError`.
   </AccordionItem>
 </Accordion>
diff --git a/apps/docs/content/concepts/overview.mdx b/apps/docs/content/concepts/overview.mdx
index 80b9c71..592efd8 100644
--- a/apps/docs/content/concepts/overview.mdx
+++ b/apps/docs/content/concepts/overview.mdx
@@ -1,6 +1,6 @@
 ---
 title: Overview
-description: Overlay state is cross-cutting; a zero-dep headless engine plus eight framework adapters split it from UI rendering.
+description: Overlay state is cross-cutting; a zero-dep headless engine plus framework adapters split it from UI rendering.
 search:
   tags: ["concept"]
 ---
diff --git a/apps/docs/content/concepts/stability.mdx b/apps/docs/content/concepts/stability.mdx
index 879a4a2..7987bfa 100644
--- a/apps/docs/content/concepts/stability.mdx
+++ b/apps/docs/content/concepts/stability.mdx
@@ -11,7 +11,7 @@ While the project is pre-1.0, treat semver as a signal, not a guarantee of zero
 
 ## What we ship
 
-- A **zero-dep core** (`@stainless-code/layers`) and **eight framework adapters** with engine + primitive parity — React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte.
+- A **zero-dep core** (`@stainless-code/layers`) and **framework adapters** with engine + primitive parity — React, Preact, Solid, Angular, Vue, Lit, Alpine, and Svelte.
 - When the engine gains capability, every adapter moves together.
 - Angular, Alpine, and Svelte diverge by design at the rendering surface (compiler-free builds → imperative / primitive APIs, not shipped outlet components).
 
diff --git a/apps/docs/content/guides/headless-rendering.mdx b/apps/docs/content/guides/headless-rendering.mdx
index 6189a3f..6067e57 100644
--- a/apps/docs/content/guides/headless-rendering.mdx
+++ b/apps/docs/content/guides/headless-rendering.mdx
@@ -296,7 +296,7 @@ class OpenCount {
 }
 ```
 
-No `StackSubscribe` — `useStack({ stack, select })` as a signal is the equivalent.
+`useStack({ stack, select })` returns a signal — bind it in the template.
 
 </Tab>
 <Tab title="Vue" icon="/icons/vue.svg">
@@ -358,7 +358,7 @@ Alpine.data("openCount", () => {
 </div>
 ```
 
-No `StackSubscribe` — `useStack({ stack, select })` with `.current`, or Rank-2 `layerStack` + `x-for`.
+Bind `count.current` in markup, or use Rank-2 `layerStack` + `x-for`.
 
 </Tab>
 <Tab title="Svelte (runes)" icon="/icons/svelte.svg">
@@ -373,7 +373,7 @@ No `StackSubscribe` — `useStack({ stack, select })` with `.current`, or Rank-2
 <span>{count.current} open</span>
 ```
 
-No `StackSubscribe` — `useStack({ stack, select })` with `.current` is the equivalent.
+`useStack({ stack, select })` returns `.current` — bind it in markup.
 
 </Tab>
 <Tab title="Svelte (store)" icon="/icons/svelte.svg">
@@ -388,7 +388,7 @@ No `StackSubscribe` — `useStack({ stack, select })` with `.current` is the equ
 <span>{$count} open</span>
 ```
 
-No `StackSubscribe` — subscribe to the selector `Readable` with `$count`.
+Subscribe to the selector `Readable` with `$count`.
 
 </Tab>
 </Tabs>
@@ -409,10 +409,10 @@ For fully-typed selector output in Vue, prefer `useStack({ stack, select })` in
 | Svelte (store) | `$stack` + `callFor(client, stackId, state)` | —                         |
 
 :::tip
-Svelte's `useStack()` already returns the headless pair — `.current` for states and `callFor` for call contexts. No separate `useStackHandles` export. Alpine's `layerStack` / `useStack()` is the same shape.
+Svelte's `useStack()` already returns the headless pair — `.current` for states and `callFor` for call contexts. No separate `useStackHandles` export.
 :::
 
-Angular has no `StackSubscribe`; `useStack({ stack, select })` as a signal is the idiomatic equivalent.
+Angular: `useStack({ stack, select })` as a signal is the idiomatic projected-value path.
 
 ## When to skip StackOutlet
 
diff --git a/apps/docs/pages/_home/Hero.astro b/apps/docs/pages/_home/Hero.astro
index 536a5ba..2cfe415 100644
--- a/apps/docs/pages/_home/Hero.astro
+++ b/apps/docs/pages/_home/Hero.astro
@@ -40,7 +40,7 @@ const defaultFramework = "vanilla";
 
   <div class="mx-auto mt-8 flex items-center justify-center gap-10">
     <div>
-      <div class="font-bold text-3xl text-foreground">7</div>
+      <div class="font-bold text-3xl text-foreground">8</div>
       <div class="text-muted-foreground text-xs">adapters</div>
     </div>
     <div>
diff --git a/bun.lock b/bun.lock
index e6f4213..74fe3cd 100644
--- a/bun.lock
+++ b/bun.lock
@@ -47,6 +47,7 @@
         "@astrojs/vue": "7.0.1",
         "@base-ui/react": "1.6.0",
         "@lit/context": "1.1.6",
+        "@stainless-code/alpine-layers": "workspace:*",
         "@stainless-code/angular-layers": "workspace:*",
         "@stainless-code/lit-layers": "workspace:*",
         "@stainless-code/preact-layers": "workspace:*",
@@ -77,7 +78,7 @@
         "vitest": "4.1.9",
       },
       "peerDependencies": {
-        "@alpinejs/focus": "*",
+        "@alpinejs/focus": ">=3.13.0",
         "alpinejs": ">=3.13.0",
       },
       "optionalPeers": [
diff --git a/docs/glossary.md b/docs/glossary.md
index fe9b75a..fee4993 100644
--- a/docs/glossary.md
+++ b/docs/glossary.md
@@ -29,8 +29,8 @@ Ubiquitous language for the `@stainless-code/layers` domain. Keep terms stable a
 - **loadFn** — optional async load run on `open`; cancelable via `AbortController`; `pending` → `active` with `data` on success, `error` on throw.
 - **Observer / selector** — adapters subscribe to `LayerStack.getSnapshot()` and project via a selector (React/Preact `useSyncExternalStore`, Solid `from`, Angular `signal`, Vue `shallowRef`, Lit reactive controllers, Alpine `Alpine.reactive` / data `states`, Svelte runes).
 - **Options helper** (`layerOptions`) — identity function carrying `<P, R, E, D>` generics so `LayerClient.open` infers the response type end-to-end.
-- **Outlet** — renders the active stack. React, Preact, Solid, and Vue ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Lit ships `<stack-outlet>`; Alpine ships `x-layer-outlet` + `$layer`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](./architecture.md#adapter-ergonomics).
-- **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Alpine Rank-2 `layerStack` + `callFor`; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
+- **Outlet** — renders the active stack. React, Preact, and Solid ship `StackOutlet`; Angular exposes `renderStack(vcr)`; Vue ships `StackOutlet`; Lit ships `<stack-outlet>`; Alpine ships `x-layer-outlet` + `$layer`; Svelte renders from `useStack().current` + `callFor`. See [adapter ergonomics](./architecture.md#adapter-ergonomics).
+- **Stack handles** (`useStackHandles`) — headless `{ states, getCall }` for custom hosts (React/Preact/Solid/Angular/Vue/Lit; Alpine Rank-2 = subscribe + render yourself via `layerStack` + `callFor`; Svelte's `useStack()` already returns `.current` + `callFor`). `StackOutlet` is the registered-component convenience built on it where shipped.
 - **Layer group** — a child stack owned by a parent layer and tied to its lifetime: created via `createLayerGroup` / adapter `useLayerGroup`; when the parent dismisses, the group's stack auto-drains. Same `LayerClient`, no second client.
 - **Child stack** — the stack a layer group opens onto; id derived from the parent's `stackId` + `layerId` via `childStackId` (`` `${parentStackId}~${parentLayerId}~${name}` ``).
 - **Validator** (`validate`) — a Standard Schema or sync `(input) => output` fn that parses/validates a layer's `payload` at `open`; the layer stores the parsed output. Failure rejects `open` with a `PayloadValidationError`.
diff --git a/packages/alpine/skills/alpine-layers/SKILL.md b/packages/alpine/skills/alpine-layers/SKILL.md
index 65a5b93..75eb0d7 100644
--- a/packages/alpine/skills/alpine-layers/SKILL.md
+++ b/packages/alpine/skills/alpine-layers/SKILL.md
@@ -1,6 +1,6 @@
 ---
 name: alpine-layers
-description: Alpine.js adapter for @stainless-code/alpine-layers; plugin magics, x-layer-outlet, layerStack data, and Svelte-shaped JS hooks for typed layer stacks
+description: Alpine.js adapter for @stainless-code/alpine-layers; plugin magics, x-layer-outlet, layerStack data, and JS hooks for typed layer stacks
 license: MIT
 keywords:
   - tanstack-intent
diff --git a/packages/alpine/src/cdn.ts b/packages/alpine/src/cdn.ts
index 7adeb29..66b159c 100644
--- a/packages/alpine/src/cdn.ts
+++ b/packages/alpine/src/cdn.ts
@@ -1,5 +1,5 @@
 /**
- * CDN / `unpkg` bootstrap — register the plugin on `alpine:init`.
+ * CDN bootstrap — register the plugin on `alpine:init`.
  * Load this module **before** Alpine's CDN script so the listener is attached
  * in time. Same runtime as `Alpine.plugin(layers)` from the package root.
  */
diff --git a/packages/alpine/src/index.test.ts b/packages/alpine/src/index.test.ts
index c07ab71..d827e34 100644
--- a/packages/alpine/src/index.test.ts
+++ b/packages/alpine/src/index.test.ts
@@ -1,4 +1,4 @@
-import { beforeEach, describe, expect, it } from "bun:test";
+import { afterEach, beforeEach, describe, expect, it } from "bun:test";
 
 import {
   createCallContext,
@@ -18,8 +18,16 @@ import {
 } from "./index";
 import { __resetLayerClientForTests } from "./layer-client";
 
+const originalWarn = console.warn;
+
 beforeEach(() => {
   __resetLayerClientForTests();
+  // Unit suite runs without Alpine.plugin — alpineReactive's one-shot warn is expected.
+  console.warn = () => {};
+});
+
+afterEach(() => {
+  console.warn = originalWarn;
 });
 
 describe("getLayerClient / setLayerClient", () => {
diff --git a/packages/alpine/src/index.ts b/packages/alpine/src/index.ts
index 715e7fc..bbc6c27 100644
--- a/packages/alpine/src/index.ts
+++ b/packages/alpine/src/index.ts
@@ -37,14 +37,29 @@ export { getLayerClient, setLayerClient } from "./layer-client.js";
 export type { AlpineLike } from "./alpine-types.js";
 
 let alpineRuntime: AlpineLike | undefined;
+let warnedMissingRuntime = false;
 
 function setAlpineRuntime(Alpine: AlpineLike | undefined): void {
   alpineRuntime = Alpine;
+  if (Alpine) warnedMissingRuntime = false;
+}
+
+/** Reactive holder when the plugin has run; plain object fallback for unit tests. */
+function alpineReactive<T extends object>(seed: T): T {
+  if (alpineRuntime) return alpineRuntime.reactive(seed);
+  if (process.env.NODE_ENV !== "production" && !warnedMissingRuntime) {
+    warnedMissingRuntime = true;
+    console.warn(
+      "[layers/alpine] useStack/useMutationFlow called before Alpine.plugin(layers); updates won't be reactive.",
+    );
+  }
+  return seed;
 }
 
 /** Props bag for the current outlet row — keyed on outlet root elements. */
 const layerPropsByElement = new WeakMap<Element, LayerComponentProps>();
 
+/** Alpine marks teleported nodes with `_x_teleportBack` (private; verified in outlet DOM tests). */
 type TeleportMarked = Element & { _x_teleportBack?: Element };
 
 function findLayerProps(el: Element): LayerComponentProps | undefined {
@@ -69,14 +84,7 @@ function syncLayerProps(
 ): void {
   const existing = layerPropsByElement.get(root);
   if (existing) {
-    existing.call = props.call;
-    existing.payload = props.payload;
-    existing.data = props.data;
-    existing.error = props.error;
-    existing.phase = props.phase;
-    existing.transition = props.transition;
-    existing.dismissing = props.dismissing;
-    existing.actionStatus = props.actionStatus;
+    Object.assign(existing, props);
     return;
   }
   layerPropsByElement.set(root, Alpine.reactive({ ...props }));
@@ -109,7 +117,7 @@ export interface UseLayerStateOptions<
   compare?: (a: U, b: U) => boolean;
 }
 
-/** Reactive stack accessor (Svelte-shaped `.current` + `callFor`). */
+/** Reactive stack accessor (`.current` + `callFor`). */
 export interface AlpineStack<RootProps = unknown, T = LayerState[]> {
   readonly current: T;
   callFor(
@@ -148,9 +156,7 @@ function makeAlpineStack<RootProps, T>(
 ): AlpineStack<RootProps, T> {
   const { runSelect } = createSnapshotSelector(select, compare);
   const initial = runSelect(getSource());
-  const holder = alpineRuntime?.reactive({ current: initial }) ?? {
-    current: initial,
-  };
+  const holder = alpineReactive({ current: initial });
 
   const unsubscribe = stack.subscribe(() => {
     const prev = holder.current;
@@ -186,10 +192,8 @@ function resolveClient(explicit?: LayerClient): LayerClient {
 }
 
 /**
- * Subscribe to a stack snapshot (Svelte-shaped `.current` + `callFor`).
+ * Subscribe to a stack snapshot (`.current` + `callFor`).
  *
- * @param opts Stack id, selector, compare, optional client.
- * @param client Optional client override (also accepted on `opts.client`).
  * @default `stack` is `"default"`; `select` is identity; `compare` is `Object.is`.
  */
 export function useStack<RootProps = unknown, T = LayerState[]>(
@@ -206,10 +210,8 @@ export function useStack<RootProps = unknown, T = LayerState[]>(
 }
 
 /**
- * Subscribe to a stack's queued snapshot (Svelte-shaped `.current` + `callFor`).
+ * Subscribe to a stack's queued snapshot (`.current` + `callFor`).
  *
- * @param opts Stack id, selector, compare, optional client.
- * @param client Optional client override (also accepted on `opts.client`).
  * @default `stack` is `"default"`; `select` is identity; `compare` is `Object.is`.
  */
 export function useQueuedStack<RootProps = unknown, T = LayerState[]>(
@@ -231,7 +233,7 @@ export function useQueuedStack<RootProps = unknown, T = LayerState[]>(
 }
 
 /**
- * Observe all mounted layers matching a key (Svelte-shaped `.current` + `callFor`).
+ * Observe all mounted layers matching a key (`.current` + `callFor`).
  *
  * A {@link DataTag} key infers its response and error types.
  */
@@ -421,11 +423,7 @@ export interface MutationFlow<R> {
 export function useMutationFlow<P, R, RootProps = unknown>(
   call: LayerCallContext<P, R, RootProps>,
 ): MutationFlow<R> {
-  const holder =
-    alpineRuntime?.reactive({ pending: false }) ??
-    ({ pending: false } as {
-      pending: boolean;
-    });
+  const holder = alpineReactive({ pending: false });
   return {
     get pending() {
       return holder.pending;
@@ -518,7 +516,7 @@ export interface StackHook {
 }
 
 /**
- * Bind a named stack + client (Angular-shaped). No `AppHost` / `AppLayer`.
+ * Bind a named stack + client.
  * @returns `{ setClient, useAppStack }` — open/dismissAll/states scoped to `stack`.
  */
 export function createStackHook(
@@ -646,8 +644,16 @@ function registerLayerOutletDirective(Alpine: AlpineLike): void {
       const evaluateStackId = utils.evaluateLater(expression);
       utils.effect(() => {
         evaluateStackId((value) => {
-          stackId =
-            typeof value === "string" && value.length > 0 ? value : "default";
+          if (typeof value === "string" && value.length > 0) {
+            stackId = value;
+          } else {
+            if (process.env.NODE_ENV !== "production") {
+              console.warn(
+                `[layers/alpine] x-layer-outlet expected a non-empty string stack id, got ${typeof value}; using "default". Quote the id: x-layer-outlet="'confirm'".`,
+              );
+            }
+            stackId = "default";
+          }
           bindStack();
         });
       });
diff --git a/packages/alpine/tests-dom/outlet.test.ts b/packages/alpine/tests-dom/outlet.test.ts
index 85bd8f5..cc6c1a2 100644
--- a/packages/alpine/tests-dom/outlet.test.ts
+++ b/packages/alpine/tests-dom/outlet.test.ts
@@ -1,6 +1,14 @@
 import { createCallContext } from "@stainless-code/layers";
 import Alpine from "alpinejs";
-import { afterEach, beforeAll, beforeEach, describe, expect, it } from "vitest";
+import {
+  afterEach,
+  beforeAll,
+  beforeEach,
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
 
 import layers, {
   layerOptions,
@@ -177,6 +185,39 @@ describe("Alpine adapter — plugin + outlet", () => {
     expect(stack.size).toBe(0);
   });
 
+  it("x-layer-outlet warns and falls back to default when the stack id is not a string", async () => {
+    const warn = vi.spyOn(console, "warn").mockImplementation(() => {});
+    const client = new LayerClient();
+    await mount(
+      `
+      <div id="app" x-data>
+        <template x-layer-outlet="confirm">
+          <div>
+            <span id="row" x-text="$layer.payload.title"></span>
+          </div>
+        </template>
+      </div>
+    `,
+      client,
+    );
+
+    expect(warn).toHaveBeenCalledWith(
+      expect.stringContaining(
+        "x-layer-outlet expected a non-empty string stack id",
+      ),
+    );
+
+    void client.open({
+      key: ["default", "warn"],
+      payload: { title: "On default" },
+      exitingDelay: 0,
+    });
+    await viWaitFor(() =>
+      expect(document.getElementById("row")?.textContent).toBe("On default"),
+    );
+    warn.mockRestore();
+  });
+
   it("x-layer-outlet rebinds when the stack id expression changes", async () => {
     const client = new LayerClient();
     await mount(
diff --git a/packages/angular/skills/angular-layers/SKILL.md b/packages/angular/skills/angular-layers/SKILL.md
index 802040b..b97cee3 100644
--- a/packages/angular/skills/angular-layers/SKILL.md
+++ b/packages/angular/skills/angular-layers/SKILL.md
@@ -273,9 +273,9 @@ export class ConfirmOutletComponent {
 }
 ```
 
-### Angular vs React rendering
+### Rendering surface
 
-The adapter ships **no** `StackOutlet`, `Outlet`, `AppHost`, `AppLayer`, or `StackProvider` components — the package is compiler-free. React mounts `<StackOutlet />`; Angular calls `renderStack(vcr, stack)` or `group.renderInto(vcr)` / `stackHook.renderInto(vcr)`. There is no `StackSubscribe`; use `useStack({ select })` instead.
+The package is compiler-free — no shipped Angular components. Call `renderStack(vcr, stack)` or `group.renderInto(vcr)` / `stackHook.renderInto(vcr)` for outlets; use `useStack({ select })` when you need a projected signal instead of a host.
 
 ## Nested layers
 
@@ -405,7 +405,7 @@ export class OpenerComponent {
 }
 ```
 
-Returns `{ provideClient, useAppStack, renderInto }` — register `provideClient()` in app config, then call `renderInto(vcr)` from a host component to mount the bound stack (no component-style host; see § Angular vs React rendering).
+Returns `{ provideClient, useAppStack, renderInto }` — register `provideClient()` in app config, then call `renderInto(vcr)` from a host component to mount the bound stack (see § Rendering surface).
 
 ## Adapter API
 
diff --git a/packages/svelte/skills/svelte-layers/SKILL.md b/packages/svelte/skills/svelte-layers/SKILL.md
index d829350..eb51c05 100644
--- a/packages/svelte/skills/svelte-layers/SKILL.md
+++ b/packages/svelte/skills/svelte-layers/SKILL.md
@@ -252,7 +252,7 @@ Set `enteringDelay` / `exitingDelay` on `layerOptions`. For spring or variable-d
 
 ### Rendering location
 
-The adapter has no built-in outlet, portal host, `StackOutlet`, `StackSubscribe`, or `createStackHook`. Render active layers inline in a layout with `useStack().current` and `callFor`, or move them with the app's portal pattern; nested child stacks from `useLayerGroup` follow the same render path.
+The adapter has no built-in outlet or portal host. Render active layers inline in a layout with `useStack().current` and `callFor`, or move them with the app's portal pattern; nested child stacks from `useLayerGroup` follow the same render path.
 
 ## Wired handle: createLayer
 
@@ -350,7 +350,7 @@ Stores entry: same names (`createLayer`, `createLayerState`, `createQueuedStack`
 
 ## Nested stacks
 
-`useLayerGroup(call, options?)` creates a child stack scoped to the calling layer's lifetime. Returns `{ open, dismissAll, stack, stackId }`. The group is disposed and all child layers dismissed on `onDestroy`. Render child layers inline with the group's stack handle — there is no `StackOutlet`, `StackSubscribe`, or `createStackHook`.
+`useLayerGroup(call, options?)` creates a child stack scoped to the calling layer's lifetime. Returns `{ open, dismissAll, stack, stackId }`. The group is disposed and all child layers dismissed on `onDestroy`. Render child layers inline with the group's stack handle.
 
 ### Runes