@mhmo91/schmancy 0.10.28 → 0.10.30

package/src/form/form.ts

@@ -16,7 +16,7 @@
  * etc.) via the `schema` property to get typed `submit` event detail.
  */
 
-import { html } from 'lit'
+import { css, html } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
 import { fromEvent, takeUntil } from 'rxjs'
 import { SchmancyElement } from '../../mixins'
@@ -48,6 +48,10 @@ export type SchmancyFormSubmitDetail<T = Record<string, FormDataEntryValue>> = {
 @customElement('schmancy-form')
 export default class SchmancyForm<TSchema extends ParseSchema | undefined = undefined>
 	extends SchmancyElement {
+	static styles = css`
+		:host { display: block; }
+	`
+
 	public static readonly tagName: string = 'schmancy-form'
 
 	/**

package/src/overlay/overlay.animations.ts

@@ -154,35 +154,6 @@ export function surfaceAnimation(layout: OverlayLayout, direction: 'in' | 'out')
 	}
 
 	switch (layout) {
-		case 'centered':
-			// Anchor-origin bloom: scale 0.6 → 1 from the var-driven origin.
-			// More aggressive than dialog's 0.92 because the origin carries the
-			// spatial work, so less translate is needed. Caller sets the origin
-			// vars via anchorOriginVars() before triggering this animation.
-			return direction === 'in'
-				? {
-						keyframes: [
-							{ opacity: 0, transform: 'scale(0.6)', transformOrigin: ORIGIN_CSS },
-							{ opacity: 1, transform: 'scale(1)', transformOrigin: ORIGIN_CSS },
-						],
-						options: {
-							duration: SPRING_SNAPPY.duration,
-							easing: getEasing(SPRING_SNAPPY),
-							fill: 'forwards',
-						},
-					}
-				: {
-						keyframes: [
-							{ opacity: 1, transform: 'scale(1)', transformOrigin: ORIGIN_CSS },
-							{ opacity: 0, transform: 'scale(0.95)', transformOrigin: ORIGIN_CSS },
-						],
-						options: {
-							duration: DURATION_EXIT,
-							easing: getEasing(SPRING_SMOOTH),
-							fill: 'forwards',
-						},
-					}
-
 		case 'sheet':
 			return direction === 'in'
 				? {

package/src/overlay/overlay.component.ts

@@ -24,7 +24,6 @@ import {
 } from './overlay.animations'
 import { swipeToDismiss$ } from './overlay.gestures'
 import {
-	readViewport,
 	resolveAnchorRef,
 	resolveLayout,
 	type ResolvedAnchor,
@@ -35,6 +34,7 @@ import {
 	positionFloatingUI,
 	positionPopoverAPI,
 } from './overlay.positioning'
+import { currentStack } from './overlay.stack'
 import type {
 	Anchor,
 	CloseReason,
@@ -98,7 +98,7 @@ export class SchmancyOverlay extends SchmancyElement {
 	}
 `]
 
-	@property({ type: String, reflect: true }) layout: OverlayLayout = 'centered'
+	@property({ type: String, reflect: true }) layout: OverlayLayout = 'sheet'
 	@property({ type: Boolean, reflect: true }) dismissable = true
 	@property({ type: Boolean, reflect: true }) modal = true
 	@property({ type: String, reflect: true }) tier: OverlayTier = 'modal'
@@ -149,21 +149,11 @@ export class SchmancyOverlay extends SchmancyElement {
 		if (!mount) throw new Error('schmancy-overlay: mount point missing')
 		await mountContent(content, mount, options.props)
 
-		// Measure content after mount for layout dispatch.
-		const viewport = readViewport()
-		const contentSize = {
-			width: mount.scrollWidth,
-			height: mount.scrollHeight,
-		}
-		this.layout = resolveLayout({
-			anchor: options.anchor,
-			content: contentSize,
-			viewport,
-		})
+		// Caller-forced layout (`as`) wins; otherwise resolver decides from anchor.
+		this.layout = options.as ?? resolveLayout({ anchor: options.anchor })
 
-		// Modal defaults per layout, with the caller's `modal` as escape hatch.
-		this.modal =
-			options.modal ?? (this.layout === 'centered' || this.layout === 'sheet')
+		// Modal is derived from layout: sheet is always modal, anchored never is.
+		this.modal = this.layout === 'sheet'
 
 		// Pick the positioning tier. Modal layouts always use the 'modal'
 		// tier (custom shell + manual backdrop); anchored uses the CAPS-driven
@@ -264,11 +254,9 @@ export class SchmancyOverlay extends SchmancyElement {
 			'bg-surface-container/85 text-surface-on backdrop-blur-md ' +
 			'border border-surface-on/8'
 		const layoutClasses =
-			this.layout === 'centered'
-				? 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 max-w-[min(calc(100vw-2rem),560px)] max-h-[90dvh] rounded-3xl shadow-overlay'
-				: this.layout === 'sheet'
-					? 'left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay'
-					: 'max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored'
+			this.layout === 'sheet'
+				? 'left-0 right-0 bottom-0 w-full max-h-[90dvh] rounded-t-[28px] shadow-overlay'
+				: 'max-w-[min(480px,calc(100vw-2rem))] max-h-[90dvh] rounded-3xl shadow-overlay-anchored'
 		return html`
 			<div class="shell fixed inset-0 pointer-events-none" part="shell">
 				${when(
@@ -301,11 +289,9 @@ export class SchmancyOverlay extends SchmancyElement {
 		if (!surface) return
 		const rect = surface.getBoundingClientRect()
 		const vars =
-			this.layout === 'centered' && !this._anchorOriginAnchor
-				? { '--schmancy-overlay-origin-x': '50%', '--schmancy-overlay-origin-y': '50%' }
-				: this.layout === 'sheet' && !this._anchorOriginAnchor
-					? { '--schmancy-overlay-origin-x': '50%', '--schmancy-overlay-origin-y': '100%' }
-					: anchorOriginVars(this._anchorOriginAnchor, rect)
+			this.layout === 'sheet' && !this._anchorOriginAnchor
+				? { '--schmancy-overlay-origin-x': '50%', '--schmancy-overlay-origin-y': '100%' }
+				: anchorOriginVars(this._anchorOriginAnchor, rect)
 		for (const [k, v] of Object.entries(vars)) {
 			surface.style.setProperty(k, v)
 		}
@@ -407,6 +393,19 @@ export class SchmancyOverlay extends SchmancyElement {
 					const path = e.composedPath()
 					if (this._surface && path.includes(this._surface)) return false
 					if (this._resolvedAnchor?.el && path.includes(this._resolvedAnchor.el)) return false
+					// Suppress dismiss when the click lands inside any overlay that sits
+					// ABOVE this one in the stack (nested overlays sibling-appended to
+					// body). Read the stack fresh per pointerdown — it mutates as overlays
+					// open and close.
+					const stack = currentStack()
+					const myIndex = stack.findIndex((entry) => entry.element === this)
+					if (myIndex !== -1) {
+						for (let i = myIndex + 1; i < stack.length; i++) {
+							if (path.includes(stack[i].element)) return false
+							const aboveSurface = stack[i].element.shadowRoot?.querySelector('.surface')
+							if (aboveSurface && path.includes(aboveSurface)) return false
+						}
+					}
 					return true
 				}),
 				map(() => ({ reason: 'backdrop' as CloseReason })),
@@ -464,14 +463,9 @@ export class SchmancyOverlay extends SchmancyElement {
 			.subscribe((size) => this.maybeReResolve(size))
 	}
 
-	private async maybeReResolve(size: { w: number; h: number }): Promise<void> {
+	private async maybeReResolve(_size: { w: number; h: number }): Promise<void> {
 		if (this._closing) return
-		const viewport = readViewport()
-		const next = resolveLayout({
-			anchor: this._rawAnchor,
-			content: { width: size.w, height: size.h },
-			viewport,
-		})
+		const next = resolveLayout({ anchor: this._rawAnchor })
 		if (next === this.layout) return
 		// Cooldown: prevent churn-driven bouncing.
 		const now = performance.now()
@@ -592,9 +586,7 @@ function isLazy(x: unknown): x is LazyComponent {
 }
 
 function isUpwardTransition(from: OverlayLayout, to: OverlayLayout): boolean {
-	// Upward ladder: centered < sheet. anchored → sheet is also upward
-	// (overflow went past threshold). anchored → centered is NOT upward.
-	if (from === 'centered' && to === 'sheet') return true
-	if (from === 'anchored' && to === 'sheet') return true
-	return false
+	// Anchored → sheet is the only valid runtime transition (content
+	// overflowed and the surface re-resolves to a sheet). Sheet stays sheet.
+	return from === 'anchored' && to === 'sheet'
 }

package/src/overlay/overlay.confirm-body.ts

@@ -7,7 +7,7 @@ import { ifDefined } from 'lit/directives/if-defined.js'
 import { gravity } from '../directives/gravity'
 import type SchmancyInput from '../form/fields/input/input'
 
-import '../icons/icon'
+import '../form/form'
 import '../form/fields/input/input'
 import '../typography/typography'
 import '../button/button'
@@ -30,7 +30,6 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 			display: block;
 			min-width: 280px;
 			max-width: 480px;
-			padding: 1.5rem;
 		}
 	`]
 
@@ -99,19 +98,8 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 
 	protected render(): TemplateResult {
 		return html`
-			<form @submit=${this.handleSubmit}>
+			<schmancy-form @submit=${this.handleSubmit} class="p-6">
 				<div class="flex flex-col gap-3">
-					${when(
-						this.variant === 'danger',
-						() => html`
-							<schmancy-icon
-								${gravity({ delay: 0, mass: 0.7 })}
-								class="text-error-default"
-								style="font-size:32px"
-							>error_outline</schmancy-icon>
-						`,
-					)}
-
 					${when(
 						this.heading,
 						() => html`
@@ -192,7 +180,7 @@ export class SchmancyOverlayPromptBody extends SchmancyElement {
 						color=${this.variant === 'danger' ? 'error' : 'primary'}
 					>${this.confirmText}</schmancy-button>
 				</div>
-			</form>
+			</schmancy-form>
 		`
 	}
 }

package/src/overlay/overlay.layout.ts

@@ -9,70 +9,28 @@ import type { Anchor, OverlayLayout, VirtualAnchor } from './overlay.types'
  * "thresholds ARE the policy").
  */
 
-/** Below this viewport width, every overlay becomes a bottom sheet. */
-export const NARROW_VIEWPORT_PX = 640
-
-/** Content taller than this fraction of viewport height → sheet. */
-export const TALL_CONTENT_FRACTION = 0.8
-
-/** Content wider than this fraction of viewport width → sheet. */
-export const WIDE_CONTENT_FRACTION = 0.9
-
 /** Floating UI / CSS anchor-positioning safety padding. */
 export const ANCHOR_FIT_PADDING_PX = 16
 
 export interface LayoutInputs {
 	anchor?: Anchor
-	content: { width: number; height: number }
-	viewport: {
-		width: number
-		height: number
-		/** `matchMedia('(pointer: coarse)').matches` at call time. */
-		isCoarsePointer: boolean
-	}
 }
 
 /**
- * Priority order:
- *   1. viewport / content forces sheet
- *   2. anchor provided → anchored (the novel default)
- *   3. fallback → centered
+ * Two outcomes, one signal: anchor presence.
+ *
+ * - anchor provided → anchored (popover/menu/dropdown next to a trigger)
+ * - no anchor       → sheet    (everything else: dialogs, takeovers, content panels)
  *
- * Floating UI's `flip` + `shift` + `size` middleware handles "anchor
- * doesn't fit initially" — it returns a fitting position rather than
- * rejecting. So step 2 does NOT branch on "does the anchor fit?";
- * Floating UI's output IS the answer. If content is genuinely too
- * large for any anchored position, step 1 already routed to sheet.
+ * Callers who want to force a specific layout regardless of anchor pass
+ * `ShowOptions.as` — the resolver is bypassed entirely in that case.
+ *
+ * Floating UI's `flip` + `shift` + `size` middleware handles "anchor doesn't
+ * fit initially" — it returns a fitting position rather than rejecting. So
+ * anchored layouts don't need a fallback; Floating UI's output IS the answer.
  */
 export function resolveLayout(inputs: LayoutInputs): OverlayLayout {
-	const { anchor, content, viewport } = inputs
-
-	const isNarrow = viewport.width < NARROW_VIEWPORT_PX
-	const isCoarse = viewport.isCoarsePointer
-	const contentTall = content.height > viewport.height * TALL_CONTENT_FRACTION
-	const contentWide = content.width > viewport.width * WIDE_CONTENT_FRACTION
-
-	if (isNarrow || isCoarse || contentTall || contentWide) {
-		return 'sheet'
-	}
-
-	if (anchor !== undefined) {
-		return 'anchored'
-	}
-
-	return 'centered'
-}
-
-/**
- * Read the current viewport + pointer inputs. Separated so tests can
- * substitute synthetic inputs and the `resolveLayout` fn stays pure.
- */
-export function readViewport(): LayoutInputs['viewport'] {
-	return {
-		width: window.innerWidth,
-		height: window.innerHeight,
-		isCoarsePointer: window.matchMedia('(pointer: coarse)').matches,
-	}
+	return inputs.anchor !== undefined ? 'anchored' : 'sheet'
 }
 
 /**

package/src/overlay/overlay.stack.test.ts

@@ -0,0 +1,113 @@
+// overlay.stack.test.ts — unit tests for the stacked-overlay dismiss guard
+//
+// Exercises the outsideClick$ filter in SchmancyOverlay by driving the element
+// state directly and calling wireCloseTriggers via type-cast. The test spies on
+// close() so it doesn't need to wait for animation promises to settle.
+//
+// Uses the real browser DOM (vitest browser mode) so composedPath and
+// shadow-DOM queries behave identically to production.
+
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import './overlay.component'
+import { clearStack, currentStack, pushEntry, removeEntry } from './overlay.stack'
+import type { OverlayEntry } from './overlay.types'
+
+const nextFrame = () => new Promise<void>(r => requestAnimationFrame(() => r()))
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+type AnyOverlay = any
+
+function entryFor(element: HTMLElement, id: string): OverlayEntry {
+	return { id, element, layout: 'anchored', modal: false, tier: 'fui-only' }
+}
+
+// Patch the @query getter for _surface (read-only) so wireCloseTriggers reads it.
+function patchSurface(overlay: AnyOverlay, surface: HTMLElement): void {
+	Object.defineProperty(overlay, '_surface', { get: () => surface, configurable: true })
+}
+
+// Stub close() so tests don't wait for animation promises.
+function stubClose(overlay: AnyOverlay): ReturnType<typeof vi.fn> {
+	const spy = vi.fn().mockResolvedValue(undefined)
+	Object.defineProperty(overlay, 'close', { value: spy, configurable: true })
+	return spy
+}
+
+describe('overlay stacked-dismiss guard', () => {
+	beforeEach(() => clearStack())
+	afterEach(() => { clearStack(); vi.restoreAllMocks() })
+
+	it('single overlay: body click invokes close("backdrop") (baseline)', async () => {
+		const overlayA: AnyOverlay = document.createElement('schmancy-overlay')
+		document.body.appendChild(overlayA)
+		await nextFrame()
+
+		const fakesurf = document.createElement('div')
+		fakesurf.className = 'surface'
+		document.body.appendChild(fakesurf)
+		patchSurface(overlayA, fakesurf)
+
+		overlayA.tier = 'fui-only'
+		overlayA.dismissable = true
+		overlayA.modal = false
+
+		const closeSpy = stubClose(overlayA)
+
+		pushEntry(entryFor(overlayA, 'a'))
+		expect(currentStack()).toHaveLength(1)
+
+		overlayA.wireCloseTriggers()
+
+		// Dispatch on a separate span — not inside the overlay's surface.
+		const outside = document.createElement('span')
+		document.body.appendChild(outside)
+		outside.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true, cancelable: true }))
+		await nextFrame()
+
+		expect(closeSpy.mock.calls[0]?.[0]).toBe('backdrop')
+
+		outside.remove()
+		fakesurf.remove()
+		overlayA.remove()
+		removeEntry('a')
+	})
+
+	it('nested overlay: click inside overlay B does not close overlay A', async () => {
+		const overlayA: AnyOverlay = document.createElement('schmancy-overlay')
+		const overlayB: AnyOverlay = document.createElement('schmancy-overlay')
+		document.body.appendChild(overlayA)
+		document.body.appendChild(overlayB)
+		await nextFrame()
+
+		const surfA = document.createElement('div')
+		surfA.className = 'surface'
+		document.body.appendChild(surfA)
+		patchSurface(overlayA, surfA)
+
+		overlayA.tier = 'fui-only'
+		overlayA.dismissable = true
+		overlayA.modal = false
+
+		const closeSpy = stubClose(overlayA)
+
+		// Register A first, then B on top.
+		pushEntry(entryFor(overlayA, 'a'))
+		pushEntry(entryFor(overlayB, 'b'))
+		expect(currentStack()).toHaveLength(2)
+
+		overlayA.wireCloseTriggers()
+
+		// Dispatch a pointerdown on overlayB — its host element IS in composedPath.
+		overlayB.dispatchEvent(new PointerEvent('pointerdown', { bubbles: true, composed: true, cancelable: true }))
+		await nextFrame()
+
+		// A must not have been closed.
+		expect(closeSpy).not.toHaveBeenCalled()
+
+		surfA.remove()
+		overlayA.remove()
+		overlayB.remove()
+		removeEntry('a')
+		removeEntry('b')
+	})
+})

package/src/overlay/overlay.types.ts

@@ -97,11 +97,11 @@ export interface ShowOptions {
 	 *  dismisses (same as unsubscribe). */
 	signal?: AbortSignal
 
-	/** Rare escape hatch. Defaults: `false` for anchored, `true` for
-	 *  centered/sheet. Setting `modal: true` on an anchored overlay forces
-	 *  <dialog>.showModal() semantics (focus trap + background inert) —
-	 *  use for destructive-confirm menus. */
-	modal?: boolean
+	/** Override the resolved layout. When set, short-circuits the resolver
+	 *  and forces this layout. Use when the caller knows the content's nature
+	 *  better than the resolver can — e.g. `as: 'sheet'` for an immersive
+	 *  takeover view that doesn't have an anchor. */
+	as?: OverlayLayout
 
 	/** Default `'push'`. Same vocabulary as `area.push()`.
 	 *  - `'push'` — new history entry; back dismisses, forward re-opens.
@@ -129,14 +129,20 @@ export interface ShowOptions {
 }
 
 /**
- * Resolved layout. Pure output of the dispatch engine; callers never pick.
- * - `'centered'`  — native <dialog>.showModal(), focus-trapped.
+ * Resolved layout. Two values:
  * - `'anchored'`  — popover="auto" + CSS Anchor Positioning / Floating UI,
- *                    non-modal, background stays interactive.
- * - `'sheet'`     — native <dialog>.showModal() as a bottom sheet,
- *                    swipe-to-dismiss, safe-area aware.
+ *                    non-modal, background stays interactive. Used when the
+ *                    caller passes an anchor (the novel default for menus,
+ *                    popovers, dropdowns).
+ * - `'sheet'`     — bottom sheet (mobile) or modal panel (desktop) with
+ *                    swipe-to-dismiss, safe-area aware. The default for every
+ *                    non-anchored overlay — confirm/prompt, immersive content
+ *                    views, legal pages, takeovers.
+ *
+ * Callers can force a layout with `ShowOptions.as` — useful for an anchored
+ * trigger whose content should still render as a sheet, or vice versa.
  */
-export type OverlayLayout = 'centered' | 'anchored' | 'sheet'
+export type OverlayLayout = 'anchored' | 'sheet'
 
 /**
  * Positioning tier an anchored overlay is using.

package/src/state/active-host.ts

@@ -177,10 +177,59 @@ export function resolveActiveHost(): HTMLElement | undefined {
 		return document.activeElement
 	}
 
-	// 4. undefined — caller falls back to module-scoped.
+	// 4. undefined — caller falls back to module-scoped (or ambient tier 5).
 	return undefined
 }
 
+// ---------------------------------------------------------------------------
+// Tier 5 — Ambient provider registry.
+//
+// When exactly one <schmancy-context> provides a namespace and no active host
+// is on the stack, state writes from async callbacks (Firestore onSnapshot,
+// setTimeout, WebSocket handlers, etc.) automatically route to that isolated
+// copy. No consumer-side _activeHost.run() boilerplate required.
+//
+// Ambiguity rule: if two or more contexts simultaneously provide the same
+// namespace the entry is marked AMBIGUOUS and getAmbientProvider returns
+// undefined — we fall through to the global rather than guess. Safe
+// degradation: never silently write to the wrong isolated copy.
+//
+// Singleton across module copies via Symbol.for so source + dist share one map.
+// ---------------------------------------------------------------------------
+const AMBIENT_KEY = Symbol.for('schmancy.state.activeHost.ambientProviders')
+type AmbientEntry = { instance: unknown; count: number }
+const _ambientMap: Map<string, AmbientEntry> =
+	((globalThis as { [AMBIENT_KEY]?: Map<string, AmbientEntry> })[AMBIENT_KEY] ??= new Map())
+
+const AMBIGUOUS: unique symbol = Symbol('ambiguous')
+
+export function registerAmbientProvider(namespace: string, instance: unknown): void {
+	const e = _ambientMap.get(namespace)
+	if (e) {
+		e.count++
+		e.instance = AMBIGUOUS
+	} else {
+		_ambientMap.set(namespace, { instance, count: 1 })
+	}
+}
+
+export function deregisterAmbientProvider(namespace: string): void {
+	const e = _ambientMap.get(namespace)
+	if (!e) return
+	if (e.count <= 1) {
+		_ambientMap.delete(namespace)
+	} else {
+		e.count--
+		// Once ambiguous, stays ambiguous until fully deregistered — we've lost
+		// the individual instance references so can't safely restore one.
+	}
+}
+
+export function getAmbientProvider(namespace: string): unknown | undefined {
+	const e = _ambientMap.get(namespace)
+	return e && e.instance !== AMBIGUOUS ? e.instance : undefined
+}
+
 /** Stable context key for a state namespace. `Symbol.for(...)` so the same
  *  namespace string yields the same symbol across module boundaries — the
  *  ContextProvider on `<schmancy-context>` and the ContextRequestEvent

package/src/state/index.ts

@@ -19,11 +19,11 @@ import { Signal } from '@lit-labs/signals'
 // `@lit/context` re-exports `ContextRequestEvent` as `ContextEvent` from
 // its public entry. Same class, just a shorter public name.
 import { ContextEvent as ContextRequestEvent, createContext } from '@lit/context'
-import { Observable } from 'rxjs'
+import { Observable, type MonoTypeOperatorFunction } from 'rxjs'
 import { produce, type Draft } from 'immer'
 
 import { createAdapter, type StorageAdapter, type StorageBackend } from './persist'
-import { resolveActiveHost, stateContextKey } from './active-host'
+import { _activeHost, getAmbientProvider, resolveActiveHost, stateContextKey } from './active-host'
 // Side-effect import: registers the `<schmancy-context>` element so users
 // only need to import from `@mhmo91/schmancy/state` to get both the factory
 // and the scoping primitive.
@@ -31,7 +31,7 @@ import './schmancy-context'
 
 export type { StorageBackend } from './persist'
 export { Signal } from '@lit-labs/signals'
-export { _activeHost } from './active-host'
+export { _activeHost, registerAmbientProvider, deregisterAmbientProvider, getAmbientProvider } from './active-host'
 export { SchmancyContext } from './schmancy-context'
 
 // ---------------------------------------------------------------------------
@@ -253,7 +253,10 @@ const hostResolverCache = __cacheSlot[CACHE_KEY]!
 
 function resolveContextual(namespace: string, fallback: unknown): unknown {
 	const host = resolveActiveHost()
-	if (host === undefined) return fallback
+	if (host === undefined) {
+		const ambient = getAmbientProvider(namespace)
+		return ambient !== undefined ? ambient : fallback
+	}
 
 	const cached = hostResolverCache.get(host)?.get(namespace)
 	if (cached !== undefined) return cached
@@ -266,14 +269,25 @@ function resolveContextual(namespace: string, fallback: unknown): unknown {
 		}),
 	)
 
-	const result = resolved !== undefined ? resolved : fallback
-	let perHost = hostResolverCache.get(host)
-	if (!perHost) {
-		perHost = new Map<string, unknown>()
-		hostResolverCache.set(host, perHost)
+	if (resolved !== undefined) {
+		// Real provider in the host's ancestor chain — safe to cache against
+		// the host: the binding lives as long as the host is connected.
+		let perHost = hostResolverCache.get(host)
+		if (!perHost) {
+			perHost = new Map<string, unknown>()
+			hostResolverCache.set(host, perHost)
+		}
+		perHost.set(namespace, resolved)
+		return resolved
 	}
-	perHost.set(namespace, result)
-	return result
+
+	// Host exists (tier 1/2/3 found one) but it's not inside a schmancy-context
+	// for this namespace. Try the ambient registry before falling through to
+	// the global. Don't cache: the ambient provider can be unmounted while
+	// this host remains connected, which would leave a stale isolated copy
+	// pinned in the cache.
+	const ambient = getAmbientProvider(namespace)
+	return ambient !== undefined ? ambient : fallback
 }
 
 interface InternalState {
@@ -897,3 +911,28 @@ export function observe<T>(source: ObservableState<T>) {
 		})
 	}
 }
+
+
+/**
+ * RxJS operator that restores `host` as the active schmancy context for every
+ * emission. Drop this into any pipeline whose subscriber calls state mutators
+ * from an async scheduler that bypasses the Promise.then patch (Firestore
+ * onSnapshot, WebSockets, native timers, etc.).
+ *
+ * ```ts
+ * snapshotDoc$(ref).pipe(
+ *   schmancyContext(this),
+ *   takeUntil(this.disconnecting),
+ * ).subscribe(snap => { ws.legalEntity.set(parse(snap)) })
+ * ```
+ */
+export function schmancyContext<T>(host: HTMLElement): MonoTypeOperatorFunction<T> {
+	return (source) =>
+		new Observable<T>((subscriber) =>
+			source.subscribe({
+				next: (v) => _activeHost.run(host, () => subscriber.next(v)),
+				error: (e) => subscriber.error(e),
+				complete: () => subscriber.complete(),
+			}),
+		)
+}