@warp-drive/core 5.7.0-alpha.37 → 5.7.0-alpha.39

package/dist/{request-subscription-CjHGziEX.js → request-state-C955e0AL.js}

@@ -3,10 +3,10 @@ import { macroCondition, getGlobalConfig, dependencySatisfies, importSync } from
 import { deprecate, warn } from '@ember/debug';
 import { setLogging, getRuntimeConfig } from './types/runtime.js';
 import { getOrSetGlobal, peekTransient, setTransient } from './types/-private.js';
-import { c as createSignal, a as consumeSignal, n as notifySignal, b as createMemo, A as ARRAY_SIGNAL, O as OBJECT_SIGNAL, d as willSyncFlushWatchers } from "./configure-C3x8YXzL.js";
 import { CACHE_OWNER, DEBUG_STALE_CACHE_OWNER, DEBUG_KEY_TYPE, DEBUG_CLIENT_ORIGINATED } from './types/identifier.js';
 import { dasherize } from './utils/string.js';
 import { S as SOURCE, C as Context, D as Destroy, a as Checkout, b as Commit } from "./symbols-sql1_mdx.js";
+import { c as createSignal, a as consumeSignal, n as notifySignal, b as createMemo, A as ARRAY_SIGNAL, O as OBJECT_SIGNAL, d as willSyncFlushWatchers } from "./configure-C3x8YXzL.js";
 import { g as getPromiseResult, s as setPromiseResult } from "./context-C_7OLieY.js";
 import { RecordStore } from './types/symbols.js';
 const INITIALIZER_PROTO = {
@@ -9451,87 +9451,85 @@ function getPromiseState(promise) {
   }
   return state;
 }
-const RequestCache = new WeakMap();
-function isAbortError(error) {
-  return error instanceof DOMException && error.name === 'AbortError';
-}
-function upgradeLoadingState(state) {
-  return state;
-}
-async function watchStream(stream, loadingState) {
-  const state = upgradeLoadingState(loadingState);
-  const reader = stream.getReader();
-  let bytesLoaded = 0;
-  let shouldForward = state._stream !== null && state._stream.readable.locked;
-  let isForwarding = shouldForward;
-  let writer = state._stream?.writable.getWriter();
-  const buffer = [];
-  state._isPending = false;
-  state._isStarted = true;
-  state._startTime = performance.now();
-  while (true) {
-    const {
-      value,
-      done
-    } = await reader.read();
-    if (done) {
-      break;
-    }
-    bytesLoaded += value.byteLength;
-    state._bytesLoaded = bytesLoaded;
-    state._lastPacketTime = performance.now();
-    shouldForward = shouldForward || state._stream !== null && state._stream.readable.locked;
-    if (shouldForward) {
-      if (!isForwarding) {
-        isForwarding = true;
-        writer = state._stream.writable.getWriter();
-        for (const item of buffer) {
-          await writer.ready;
-          await writer.write(item);
-        }
-        buffer.length = 0;
-      }
-      await writer.ready;
-      await writer.write(value);
-    } else {
-      buffer.push(value);
-    }
+function decorateMethodV2(prototype, prop, decorators) {
+  const origDesc = Object.getOwnPropertyDescriptor(prototype, prop);
+  let desc = {
+    ...origDesc
+  };
+  for (let decorator of decorators) {
+    desc = decorator(prototype, prop, desc) || desc;
   }
-
-  // if we are still forwarding, we need to close the writer
-  if (isForwarding) {
-    await writer.ready;
-    await writer.close();
-  } else if (state._stream) {
-    // if we are not forwarding, we need to cancel the stream
-    await state._stream.readable.cancel('The Stream Has Already Ended');
-    state._stream = null;
+  if (desc.initializer !== void 0) {
+    desc.value = desc.initializer ? desc.initializer.call(prototype) : void 0;
+    desc.initializer = void 0;
   }
-  const endTime = performance.now();
-  state._endTime = endTime;
-  state._isComplete = true;
-  state._isStarted = false;
+  Object.defineProperty(prototype, prop, desc);
+}
+
+// default to 30 seconds unavailable before we refresh
+const DEFAULT_DEADLINE = 30_000;
+const DISPOSE = Symbol.dispose || Symbol.for('dispose');
+function isNeverString(val) {
+  return val;
 }
 
 /**
- * Lazily consumes the stream of a request, providing a number of
- * reactive properties that can be used to build UIs that respond
- * to the progress of a request.
+ * Utilities to assist in recovering from the error.
+ */
+
+/** @deprecated use {@link RecoveryFeatures} */
+
+/**
+ * Utilities for keeping the request fresh
+ */
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+/**
+ * A reactive class
  *
  * @hideconstructor
  */
-class RequestLoadingState {
-  /** @internal */
+class RequestSubscription {
+  /**
+   * Whether the browser reports that the network is online.
+   */
 
-  /** @internal */
+  /**
+   * Whether the browser reports that the tab is hidden.
+   */
 
-  /** @internal */
+  /**
+   * Whether the component is currently refreshing the request.
+   */
 
-  /** @internal */
+  /**
+   * The most recent blocking request that was made, typically
+   * the result of a reload.
+   *
+   * This will never be the original request passed as an arg to
+   * the component.
+   *
+   * @internal
+   */
 
-  /** @internal */
+  /**
+   * The most recent request that was made, typically due to either a
+   * reload or a refresh.
+   *
+   * This will never be the original request passed as an arg to
+   * the component.
+   *
+   * @internal
+   */
 
-  /** @internal */
+  /**
+   * The time at which the network was reported as offline.
+   *
+   * @internal
+   */
 
   /** @internal */
 
@@ -9543,1035 +9541,1039 @@ class RequestLoadingState {
 
   /** @internal */
 
+  /**
+   * The event listener for network status changes,
+   * cached to use the reference for removal.
+   *
+   * @internal
+   */
+
+  /**
+   * The event listener for visibility status changes,
+   * cached to use the reference for removal.
+   *
+   * @internal
+   */
+
+  /**
+   * The last request passed as an arg to the component,
+   * cached for comparison.
+   *
+   * @internal
+   */
+
+  /**
+   * The last query passed as an arg to the component,
+   * cached for comparison.
+   *
+   * @internal
+   */
+
   /** @internal */
-  _stream = null;
-  /** @internal */
-  _future;
+
   /** @internal */
-  _triggered = false;
+
   /** @internal */
-  _trigger() {
-    if (this._triggered) {
-      return;
-    }
-    this._triggered = true;
-    const future = this._future;
-    const promise = future.getStream();
-    if (promise.sizeHint) {
-      this._sizeHint = promise.sizeHint;
-    }
-    this.promise = promise.then(stream => {
-      if (!stream) {
-        this._isPending = false;
-        this._isComplete = true;
-        return;
+
+  /**
+   * The Store this subscription subscribes to or the RequestManager
+   * which issues this request.
+   */
+
+  /**
+   * The Store or RequestManager that the last subscription is attached to.
+   *
+   * This differs from 'store' because a <Request /> may be passed a
+   * request originating from a different store than the <Request />
+   * component would use if it were to issue the request itself.
+   *
+   * @internal
+   */
+  _requester;
+  constructor(store, args) {
+    this._args = args;
+    this.store = store;
+    this._subscribedTo = null;
+    this._subscription = null;
+    this._intervalStart = null;
+    this._invalidated = false;
+    this._nextInterval = null;
+    this._requester = null;
+    this.isDestroyed = false;
+    this[DISPOSE] = _DISPOSE;
+    this._installListeners();
+    void this._beginPolling();
+  }
+
+  /**
+   * @internal
+   */
+  async _beginPolling() {
+    // await the initial request
+    try {
+      if (!this.isIdle) {
+        await this.request;
       }
-      return watchStream(stream, this);
-    }, error => {
-      this._isPending = false;
-      this._isStarted = false;
-      if (isAbortError(error)) {
-        this._isCancelled = true;
-        this._isComplete = true;
+    } catch {
+      // ignore errors here, we just want to wait for the request to finish
+    } finally {
+      if (!this.isDestroyed) {
+        void this._scheduleInterval();
       }
-      this._isErrored = true;
-      this._error = error;
-    });
+    }
   }
-  promise = null;
-  get isPending() {
-    this._trigger();
-    return this._isPending;
+  get isIdle() {
+    const {
+      request,
+      query
+    } = this._args;
+    return Boolean(!request && !query);
   }
-  get sizeHint() {
-    this._trigger();
-    return this._sizeHint;
+  static {
+    decorateMethodV2(this.prototype, "isIdle", [memoized]);
   }
-  get stream() {
-    this._trigger();
-    if (!this._stream) {
-      if (this._isComplete || this._isCancelled || this._isErrored) {
-        return null;
-      }
-      this._stream = new TransformStream();
+  get autorefreshTypes() {
+    const {
+      autorefresh
+    } = this._args;
+    let types;
+    if (autorefresh === true) {
+      types = ['online', 'invalid'];
+    } else if (typeof autorefresh === 'string') {
+      types = autorefresh.split(',');
+    } else {
+      types = [];
     }
-    return this._stream.readable;
-  }
-  get isStarted() {
-    this._trigger();
-    return this._isStarted;
-  }
-  get bytesLoaded() {
-    this._trigger();
-    return this._bytesLoaded;
-  }
-  get startTime() {
-    this._trigger();
-    return this._startTime;
-  }
-  get endTime() {
-    this._trigger();
-    return this._endTime;
-  }
-  get lastPacketTime() {
-    this._trigger();
-    return this._lastPacketTime;
-  }
-  get isComplete() {
-    this._trigger();
-    return this._isComplete;
-  }
-  get isCancelled() {
-    this._trigger();
-    return this._isCancelled;
-  }
-  get isErrored() {
-    this._trigger();
-    return this._isErrored;
-  }
-  get error() {
-    this._trigger();
-    return this._error;
-  }
-  get elapsedTime() {
-    return (this.endTime || this.lastPacketTime) - this.startTime;
-  }
-  get completedRatio() {
-    return this.sizeHint ? this.bytesLoaded / this.sizeHint : 0;
-  }
-  get remainingRatio() {
-    return 1 - this.completedRatio;
-  }
-  get duration() {
-    return this.endTime - this.startTime;
-  }
-  get speed() {
-    // bytes per second
-    return this.bytesLoaded / (this.elapsedTime / 1000);
-  }
-  constructor(future) {
-    this._future = future;
-  }
-  abort = () => {
-    this._future.abort();
-  };
-}
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_isPending', true);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_isStarted', false);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_isComplete', false);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_isCancelled', false);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_isErrored', false);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_error', null);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_sizeHint', 0);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_bytesLoaded', 0);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_startTime', 0);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_endTime', 0);
-defineNonEnumerableSignal(RequestLoadingState.prototype, '_lastPacketTime', 0);
-
-/**
- * The state of a request in the "pending"
- * state. This is the default initial state.
- *
- * Extends the {@link PendingPromise} interface.
- *
- */
-
-/**
- * The state of a request in the "fulfilled" state.
- * This is the state of a request that has resolved
- * successfully.
- *
- * Extends the {@link ResolvedPromise} interface.
- *
- */
-
-/**
- * The state of a request in the "rejected" state.
- * This is the state of a request that has rejected
- * with an error.
- *
- * Extends the {@link RejectedPromise} interface.
- *
- */
-
-/**
- * The state of a request in the "cancelled" state.
- * This is the state of a promise that has been
- * cancelled.
- *
- */
-
-/**
- * RequestState extends the concept of {@link PromiseState} to provide a reactive
- * wrapper for a request {@link Future} which allows you write declarative code
- * around a Future's control flow.
- *
- * It is useful in both Template and JavaScript contexts, allowing you
- * to quickly derive behaviors and data from pending, error and success
- * states.
- *
- * The key difference between a {@link Promise} and a Future is that Futures provide
- * access to a {@link ReadableStream | stream} of their content, the {@link RequestKey} of the request (if any)
- * as well as the ability to attempt to {@link Future.abort | abort} the request.
- *
- * ```ts
- * interface Future<T> extends Promise<T>> {
- *   getStream(): Promise<ReadableStream>;
- *   abort(): void;
- *   lid: RequestKey | null;
- * }
- * ```
- *
- * These additional APIs allow us to craft even richer state experiences.
- *
- * To get the state of a request, use {@link getRequestState}.
- *
- * See also:
- * - {@link PendingRequest}
- * - {@link ResolvedRequest}
- * - {@link RejectedRequest}
- * - {@link CancelledRequest}
- *
- */
-
-const RequestStateProto = {};
-function performRefresh(requester, request, isReload) {
-  const req = Object.assign({}, request);
-  const cacheOptions = Object.assign({}, req.cacheOptions);
-  if (isReload) {
-    // force direct to network
-    cacheOptions.reload = true;
-  } else if (isReload === false) {
-    // delete reload to ensure we use backgroundReload / policy
-    delete cacheOptions.reload;
-    cacheOptions.backgroundReload = true;
-  } else {
-    // delete props to ensure we use the policy
-    delete cacheOptions.backgroundReload;
-    delete cacheOptions.reload;
+    return new Set(types);
   }
-  req.cacheOptions = cacheOptions;
-  return requester.request(req);
-}
 
-// TODO introduce a new mechanism for defining multiple properties
-// that share a common signal
-defineSignal(RequestStateProto, 'reason', null);
-defineSignal(RequestStateProto, 'value', null);
-defineSignal(RequestStateProto, 'result', null);
-defineSignal(RequestStateProto, 'error', null);
-defineSignal(RequestStateProto, 'status', 'pending');
-defineSignal(RequestStateProto, 'isPending', true);
-defineSignal(RequestStateProto, 'isLoading', true);
-defineSignal(RequestStateProto, 'isSuccess', false);
-defineSignal(RequestStateProto, 'isError', false);
-defineSignal(RequestStateProto, 'request', null);
-defineSignal(RequestStateProto, 'response', null);
-Object.defineProperty(RequestStateProto, 'isCancelled', {
-  get() {
-    return this.isError && isAbortError(this.reason);
+  // we only run this function on component creation
+  // and when an update is triggered, so it does not
+  // react to changes in the autorefreshThreshold
+  // or autorefresh args.
+  //
+  // if we need to react to those changes, we can
+  // use a modifier or internal component or some
+  // such to trigger a re-run of this function.
+  /** @internal */
+  static {
+    decorateMethodV2(this.prototype, "autorefreshTypes", [memoized]);
   }
-});
-Object.defineProperty(RequestStateProto, 'loadingState', {
-  get() {
-    if (!this._loadingState) {
-      this._loadingState = new RequestLoadingState(this._request);
+  async _scheduleInterval() {
+    const {
+      autorefreshThreshold
+    } = this._args;
+    const hasValidThreshold = typeof autorefreshThreshold === 'number' && autorefreshThreshold > 0;
+    if (
+    // dont schedule in SSR
+    typeof window === 'undefined' ||
+    // dont schedule without a threshold
+    !hasValidThreshold ||
+    // dont schedule if we weren't told to
+    !this.autorefreshTypes.has('interval') ||
+    // dont schedule if we're already scheduled
+    this._intervalStart !== null) {
+      return;
     }
-    return this._loadingState;
-  }
-});
-function createRequestState(future) {
-  const state = getPromiseResult(future);
-  const promiseState = Object.create(RequestStateProto);
-  promiseState._request = future;
-  // @ts-expect-error - we still attach it for PendingState
-  promiseState.reload = () => {
-    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
-      if (!test) {
-        throw new Error(`Cannot reload a request that is still pending. Await or abort the original request first.`);
-      }
-    })(!promiseState.isPending) : {};
-    return performRefresh(future.requester, promiseState.request, true);
-  };
 
-  // @ts-expect-error - we still attach it for PendingState
-  promiseState.refresh = (usePolicy = false) => {
-    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
-      if (!test) {
-        throw new Error(`Cannot refresh a request that is still pending. Await or abort the original request first.`);
+    // if we have a current request, wait for it to finish
+    // before scheduling the next one
+    if (this._latestRequest) {
+      try {
+        await this._latestRequest;
+      } catch {
+        // ignore errors here, we just want to wait for the request to finish
+      }
+      if (this.isDestroyed) {
+        return;
       }
-    })(!promiseState.isPending) : {};
-    return performRefresh(future.requester, promiseState.request, usePolicy === true ? null : false);
-  };
-  if (state) {
-    if (state.isError) {
-      promiseState.error = state.result;
-      promiseState.reason = state.result;
-      promiseState.status = 'rejected';
-      promiseState.isError = true;
-      promiseState.isPending = false;
-      promiseState.isLoading = false;
-      promiseState.request = state.result.request;
-      promiseState.response = state.result.response;
-    } else {
-      promiseState.result = state.result.content;
-      promiseState.value = state.result.content;
-      promiseState.status = 'fulfilled';
-      promiseState.isSuccess = true;
-      promiseState.isPending = false;
-      promiseState.isLoading = false;
-      promiseState.request = state.result.request;
-      promiseState.response = state.result.response;
     }
-  } else {
-    void future.then(result => {
-      setPromiseResult(future, {
-        isError: false,
-        result
-      });
-      promiseState.result = result.content;
-      promiseState.value = result.content;
-      promiseState.status = 'fulfilled';
-      promiseState.isSuccess = true;
-      promiseState.isPending = false;
-      promiseState.isLoading = false;
-      promiseState.request = result.request;
-      promiseState.response = result.response;
-    }, error => {
-      setPromiseResult(future, {
-        isError: true,
-        result: error
-      });
-      promiseState.error = error;
-      promiseState.reason = error;
-      promiseState.status = 'rejected';
-      promiseState.isError = true;
-      promiseState.isPending = false;
-      promiseState.isLoading = false;
-      promiseState.request = error.request;
-      promiseState.response = error.response;
-    });
-  }
-  return promiseState;
-}
 
-/**
- * `getRequestState` can be used in both JavaScript and Template contexts.
- *
- * ```ts
- * import { getRequestState } from '@warp-drive/ember';
- *
- * const state = getRequestState(future);
- * ```
- *
- * For instance, we could write a getter on a component that updates whenever
- * the request state advances or the future changes, by combining the function
- * with the use of `@cached`
- *
- * ```ts
- * class Component {
- *   @cached
- *   get title() {
- *     const state = getRequestState(this.args.request);
- *     if (state.isPending) {
- *       return 'loading...';
- *     }
- *     if (state.isError) { return null; }
- *     return state.result.title;
- *   }
- * }
- * ```
- *
- * Or in a template as a helper:
- *
- * ```gjs
- * import { getRequestState } from '@warp-drive/ember';
- *
- * <template>
- *   {{#let (getRequestState @request) as |state|}}
- *     {{#if state.isPending}}
- *       <Spinner />
- *     {{else if state.isError}}
- *       <ErrorForm @error={{state.error}} />
- *     {{else}}
- *       <h1>{{state.result.title}}</h1>
- *     {{/if}}
- *   {{/let}}
- * </template>
- * ```
- *
- * If looking to use in a template, consider also the `<Request />` component
- * which offers a numbe of additional capabilities for requests *beyond* what
- * `RequestState` provides.
- *
- */
-function getRequestState(future) {
-  let state = RequestCache.get(future);
-  if (!state) {
-    state = createRequestState(future);
-    RequestCache.set(future, state);
-  }
-  return state;
-}
-function decorateMethodV2(prototype, prop, decorators) {
-  const origDesc = Object.getOwnPropertyDescriptor(prototype, prop);
-  let desc = {
-    ...origDesc
-  };
-  for (let decorator of decorators) {
-    desc = decorator(prototype, prop, desc) || desc;
-  }
-  if (desc.initializer !== void 0) {
-    desc.value = desc.initializer ? desc.initializer.call(prototype) : void 0;
-    desc.initializer = void 0;
+    // setup the next interval
+    this._intervalStart = Date.now();
+    this._nextInterval = setTimeout(() => {
+      this._maybeUpdate();
+    }, autorefreshThreshold);
   }
-  Object.defineProperty(prototype, prop, desc);
-}
-const DEFAULT_DEADLINE = 30_000;
-const DISPOSE = Symbol.dispose || Symbol.for('dispose');
-function isNeverString(val) {
-  return val;
-}
-
-/**
- * Utilities to assist in recovering from the error.
- */
 
-/** @deprecated use {@link RecoveryFeatures} */
-
-/**
- * Utilities for keeping the request fresh
- */
+  /** @internal */
+  _clearInterval() {
+    if (this._nextInterval) {
+      clearTimeout(this._nextInterval);
+      this._intervalStart = null;
+    }
+  }
+  /**
+   * @internal
+   */
+  _updateSubscriptions() {
+    if (this.isIdle) {
+      return;
+    }
+    const requestId = this._request.lid;
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // if we're already subscribed to this request, we don't need to do anything
+    if (this._subscribedTo === requestId) {
+      return;
+    }
 
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // if we're subscribed to a different request, we need to unsubscribe
+    this._removeSubscriptions();
 
-/**
- * A reactive class
- *
- * @hideconstructor
- */
-class RequestSubscription {
-  /**
-   * Whether the browser reports that the network is online.
-   */
+    // if we have a request, we need to subscribe to it
+    const store = this._getRequester();
+    this._requester = store;
+    if (requestId && isStore(store)) {
+      this._subscribedTo = requestId;
+      this._subscription = store.notifications.subscribe(requestId, (_id, op) => {
+        // ignore subscription events that occur while our own component's request
+        // is occurring
+        if (this._isUpdating) {
+          return;
+        }
+        switch (op) {
+          case 'invalidated':
+            {
+              // if we're subscribed to invalidations, we need to update
+              if (this.autorefreshTypes.has('invalid')) {
+                this._invalidated = true;
+                this._maybeUpdate();
+              }
+              break;
+            }
+          case 'state':
+            {
+              const latest = store.requestManager._deduped.get(requestId);
+              const priority = latest?.priority;
+              const state = this.reqState;
+              if (!priority) {
+                // if there is no priority, we have completed whatever request
+                // was occurring and so we are no longer refreshing (if we were)
+                this.isRefreshing = false;
+              } else if (priority.blocking && !state.isLoading) {
+                // if we are blocking, there is an active request for this identity
+                // that MUST be fulfilled from network (not cache).
+                // Thus this is not "refreshing" because we should clear out and
+                // block on this request.
+                //
+                // we receive state notifications when either a request initiates
+                // or completes.
+                //
+                // In the completes case: we may receive the state notification
+                // slightly before the request is finalized because the NotificationManager
+                // may sync flush it (and thus deliver it before the microtask completes)
+                //
+                // In the initiates case: we aren't supposed to receive one unless there
+                // is no other request in flight for this identity.
+                //
+                // However, there is a race condition here where the completed
+                // notification can trigger an update that generates a new request
+                // thus giving us an initiated notification before the older request
+                // finalizes.
+                //
+                // When this occurs, if the triggered update happens to have caused
+                // a new request to be made for the same identity AND that request
+                // is the one passed into this component as the @request arg, then
+                // getRequestState will return the state of the new request.
+                // We can detect this by checking if the request state is "loading"
+                // as outside of this case we would have a completed request.
+                //
+                // That is the reason for the `&& !state.isLoading` check above.
 
-  /**
-   * Whether the browser reports that the tab is hidden.
-   */
+                // TODO should we just treat this as refreshing?
+                this.isRefreshing = false;
+                this._maybeUpdate('policy', true);
+              } else {
+                this.isRefreshing = true;
+              }
+            }
+        }
+      });
+    }
+  }
 
   /**
-   * Whether the component is currently refreshing the request.
+   * @internal
    */
+  _removeSubscriptions() {
+    const store = this._requester;
+    if (this._subscription && store && isStore(store)) {
+      store.notifications.unsubscribe(this._subscription);
+      this._subscribedTo = null;
+      this._subscription = null;
+      this._requester = null;
+    }
+  }
 
   /**
-   * The most recent blocking request that was made, typically
-   * the result of a reload.
-   *
-   * This will never be the original request passed as an arg to
-   * the component.
+   * Install the event listeners for network and visibility changes.
+   * This is only done in browser environments with a global `window`.
    *
    * @internal
    */
+  _installListeners() {
+    if (typeof window === 'undefined') {
+      return;
+    }
+    this.isOnline = window.navigator.onLine;
+    this._unavailableStart = this.isOnline ? null : Date.now();
+    this.isHidden = document.visibilityState === 'hidden';
+    this._onlineChanged = event => {
+      this.isOnline = event.type === 'online';
+      if (event.type === 'offline' && this._unavailableStart === null) {
+        this._unavailableStart = Date.now();
+      }
+      this._maybeUpdate();
+    };
+    this._backgroundChanged = () => {
+      const isHidden = document.visibilityState === 'hidden';
+      this.isHidden = isHidden;
+      if (isHidden && this._unavailableStart === null) {
+        this._unavailableStart = Date.now();
+      }
+      this._maybeUpdate();
+    };
+    window.addEventListener('online', this._onlineChanged, {
+      passive: true,
+      capture: true
+    });
+    window.addEventListener('offline', this._onlineChanged, {
+      passive: true,
+      capture: true
+    });
+    document.addEventListener('visibilitychange', this._backgroundChanged, {
+      passive: true,
+      capture: true
+    });
+  }
 
   /**
-   * The most recent request that was made, typically due to either a
-   * reload or a refresh.
+   * If the network is online and the tab is visible, either reload or refresh the request
+   * based on the component's configuration and the requested update mode.
    *
-   * This will never be the original request passed as an arg to
-   * the component.
+   * Valid modes are:
    *
-   * @internal
-   */
-
-  /**
-   * The time at which the network was reported as offline.
+   * - `'reload'`: Force a reload of the request.
+   * - `'refresh'`: Refresh the request in the background.
+   * - `'policy'`: Make the request, letting the store's configured CachePolicy decide whether to reload, refresh, or do nothing.
+   * - `undefined`: Make the request using the component's autorefreshBehavior setting if the autorefreshThreshold has passed.
    *
    * @internal
    */
+  _maybeUpdate(mode, silent) {
+    if (this.isIdle) {
+      return;
+    }
+    const {
+      reqState
+    } = this;
+    if (reqState.isPending) {
+      return;
+    }
+    const canAttempt = Boolean(this.isOnline && !this.isHidden && (mode || this.autorefreshTypes.size));
+    if (!canAttempt) {
+      if (!silent && mode && mode !== '_invalidated') {
+        throw new Error(`Reload not available: the network is not online or the tab is hidden`);
+      }
+      return;
+    }
+    const {
+      autorefreshTypes
+    } = this;
+    let shouldAttempt = this._invalidated || Boolean(mode);
+    if (!shouldAttempt && autorefreshTypes.has('online')) {
+      const {
+        _unavailableStart
+      } = this;
+      const {
+        autorefreshThreshold
+      } = this._args;
+      const deadline = typeof autorefreshThreshold === 'number' ? autorefreshThreshold : DEFAULT_DEADLINE;
+      shouldAttempt = Boolean(_unavailableStart && Date.now() - _unavailableStart > deadline);
+    }
+    if (!shouldAttempt && autorefreshTypes.has('interval')) {
+      const {
+        _intervalStart
+      } = this;
+      const {
+        autorefreshThreshold
+      } = this._args;
+      if (_intervalStart && typeof autorefreshThreshold === 'number' && autorefreshThreshold > 0) {
+        shouldAttempt = Boolean(Date.now() - _intervalStart >= autorefreshThreshold);
+      }
+    }
+    this._unavailableStart = null;
+    this._invalidated = false;
+    if (shouldAttempt) {
+      this._clearInterval();
+      this._isUpdating = true;
+      const realMode = mode === '_invalidated' ? null : mode;
+      const val = realMode ?? this._args.autorefreshBehavior ?? 'policy';
 
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
-
-  /**
-   * The event listener for network status changes,
-   * cached to use the reference for removal.
-   *
-   * @internal
-   */
+      // if the future was generated by an older store version, it may not have
+      // a requester set. In this case we append it to ensure that reload and
+      // refresh will work appropriately.
+      const requester = this._getRequester();
+      if (!reqState._request.requester) {
+        reqState._request.requester = requester;
+      }
+      switch (val) {
+        case 'reload':
+          this._latestRequest = reqState.reload();
+          break;
+        case 'refresh':
+          this._latestRequest = reqState.refresh();
+          break;
+        case 'policy':
+          this._latestRequest = reqState.refresh(true);
+          break;
+        default:
+          macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+            {
+              throw new Error(`Invalid ${mode ? 'update mode' : '@autorefreshBehavior'} for <Request />: ${isNeverString(val)}`);
+            }
+          })() : {};
+      }
+      if (val !== 'refresh') {
+        this._localRequest = this._latestRequest;
+      }
+      void this._scheduleInterval();
+      void this._latestRequest.finally(() => {
+        this._isUpdating = false;
+      });
+    }
+  }
 
   /**
-   * The event listener for visibility status changes,
-   * cached to use the reference for removal.
-   *
    * @internal
    */
+  _getRequester() {
+    // Note: we check for the requester's presence
+    // as well as the request's presence because we may
+    // be subscribed to a request issued by a store from an older
+    // version of the library that didn't yet set requester.
+    if (this._args.request?.requester) {
+      return this._args.request.requester;
+    }
+    return this.store;
+  }
 
   /**
-   * The last request passed as an arg to the component,
-   * cached for comparison.
-   *
-   * @internal
+   * Retry the request, reloading it from the server.
    */
+  retry = async () => {
+    this._maybeUpdate('reload');
+    await this._localRequest;
+  };
 
   /**
-   * The last query passed as an arg to the component,
-   * cached for comparison.
-   *
-   * @internal
+   * Refresh the request, updating it in the background.
    */
-
-  /** @internal */
-
-  /** @internal */
-
-  /** @internal */
+  refresh = async () => {
+    this._maybeUpdate('refresh');
+    await this._latestRequest;
+  };
 
   /**
-   * The Store this subscription subscribes to or the RequestManager
-   * which issues this request.
+   * features to yield to the error slot of a component
    */
+  get errorFeatures() {
+    return {
+      isHidden: this.isHidden,
+      isOnline: this.isOnline,
+      retry: this.retry
+    };
+  }
 
   /**
-   * The Store or RequestManager that the last subscription is attached to.
-   *
-   * This differs from 'store' because a <Request /> may be passed a
-   * request originating from a different store than the <Request />
-   * component would use if it were to issue the request itself.
-   *
-   * @internal
+   * features to yield to the content slot of a component
    */
-  _requester;
-  constructor(store, args) {
-    this._args = args;
-    this.store = store;
-    this._subscribedTo = null;
-    this._subscription = null;
-    this._intervalStart = null;
-    this._invalidated = false;
-    this._nextInterval = null;
-    this._requester = null;
-    this.isDestroyed = false;
-    this[DISPOSE] = _DISPOSE;
-    this._installListeners();
-    void this._beginPolling();
+  static {
+    decorateMethodV2(this.prototype, "errorFeatures", [memoized]);
+  }
+  get contentFeatures() {
+    const feat = {
+      isHidden: this.isHidden,
+      isOnline: this.isOnline,
+      reload: this.retry,
+      refresh: this.refresh,
+      isRefreshing: this.isRefreshing,
+      latestRequest: this._latestRequest
+    };
+    if (feat.isRefreshing) {
+      feat.abort = () => {
+        this._latestRequest?.abort();
+      };
+    }
+    return feat;
   }
 
   /**
    * @internal
    */
-  async _beginPolling() {
-    // await the initial request
-    try {
-      if (!this.isIdle) {
-        await this.request;
-      }
-    } catch {
-      // ignore errors here, we just want to wait for the request to finish
-    } finally {
-      if (!this.isDestroyed) {
-        void this._scheduleInterval();
-      }
-    }
+  static {
+    decorateMethodV2(this.prototype, "contentFeatures", [memoized]);
   }
-  get isIdle() {
+  get _request() {
     const {
       request,
       query
     } = this._args;
-    return Boolean(!request && !query);
+    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+      if (!test) {
+        throw new Error(`Cannot use both @request and @query args with the <Request> component`);
+      }
+    })(!request || !query) : {};
+    const {
+      _localRequest,
+      _originalRequest,
+      _originalQuery
+    } = this;
+    const isOriginalRequest = request === _originalRequest && query === _originalQuery;
+    if (_localRequest && isOriginalRequest) {
+      return _localRequest;
+    }
+
+    // update state checks for the next time
+    this._originalQuery = query;
+    this._originalRequest = request;
+    if (request) {
+      return request;
+    }
+    macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
+      if (!test) {
+        throw new Error(`You must provide either @request or an @query arg with the <Request> component`);
+      }
+    })(query) : {};
+    return this.store.request(query);
   }
   static {
-    decorateMethodV2(this.prototype, "isIdle", [memoized]);
+    decorateMethodV2(this.prototype, "_request", [memoized]);
   }
-  get autorefreshTypes() {
-    const {
-      autorefresh
-    } = this._args;
-    let types;
-    if (autorefresh === true) {
-      types = ['online', 'invalid'];
-    } else if (typeof autorefresh === 'string') {
-      types = autorefresh.split(',');
+  get request() {
+    if (macroCondition(getGlobalConfig().WarpDrive.env.DEBUG)) {
+      try {
+        const request = this._request;
+        this._updateSubscriptions();
+        return request;
+      } catch (e) {
+        // eslint-disable-next-line no-console
+        console.log(e);
+        throw new Error(`Unable to initialize the request`, {
+          cause: e
+        });
+      }
     } else {
-      types = [];
+      const request = this._request;
+      this._updateSubscriptions();
+      return request;
     }
-    return new Set(types);
   }
-
-  // we only run this function on component creation
-  // and when an update is triggered, so it does not
-  // react to changes in the autorefreshThreshold
-  // or autorefresh args.
-  //
-  // if we need to react to those changes, we can
-  // use a modifier or internal component or some
-  // such to trigger a re-run of this function.
-  /** @internal */
   static {
-    decorateMethodV2(this.prototype, "autorefreshTypes", [memoized]);
+    decorateMethodV2(this.prototype, "request", [memoized]);
   }
-  async _scheduleInterval() {
+  get reqState() {
+    return getRequestState(this.request);
+  }
+  get result() {
+    return this.reqState.result;
+  }
+}
+defineSignal(RequestSubscription.prototype, 'isOnline', true);
+defineSignal(RequestSubscription.prototype, 'isHidden', false);
+defineSignal(RequestSubscription.prototype, 'isRefreshing', false);
+defineSignal(RequestSubscription.prototype, '_localRequest', undefined);
+defineSignal(RequestSubscription.prototype, '_latestRequest', undefined);
+function isStore(store) {
+  return 'requestManager' in store;
+}
+function createRequestSubscription(store, args) {
+  return new RequestSubscription(store, args);
+}
+function upgradeSubscription(sub) {
+  return sub;
+}
+function _DISPOSE() {
+  const self = upgradeSubscription(this);
+  self.isDestroyed = true;
+  self._removeSubscriptions();
+  if (typeof window === 'undefined') {
+    return;
+  }
+  self._clearInterval();
+  window.removeEventListener('online', self._onlineChanged, {
+    passive: true,
+    capture: true
+  });
+  window.removeEventListener('offline', self._onlineChanged, {
+    passive: true,
+    capture: true
+  });
+  document.removeEventListener('visibilitychange', self._backgroundChanged, {
+    passive: true,
+    capture: true
+  });
+}
+const RequestCache = new WeakMap();
+function isAbortError(error) {
+  return error instanceof DOMException && error.name === 'AbortError';
+}
+function upgradeLoadingState(state) {
+  return state;
+}
+async function watchStream(stream, loadingState) {
+  const state = upgradeLoadingState(loadingState);
+  const reader = stream.getReader();
+  let bytesLoaded = 0;
+  let shouldForward = state._stream !== null && state._stream.readable.locked;
+  let isForwarding = shouldForward;
+  let writer = state._stream?.writable.getWriter();
+  const buffer = [];
+  state._isPending = false;
+  state._isStarted = true;
+  state._startTime = performance.now();
+  while (true) {
     const {
-      autorefreshThreshold
-    } = this._args;
-    const hasValidThreshold = typeof autorefreshThreshold === 'number' && autorefreshThreshold > 0;
-    if (
-    // dont schedule in SSR
-    typeof window === 'undefined' ||
-    // dont schedule without a threshold
-    !hasValidThreshold ||
-    // dont schedule if we weren't told to
-    !this.autorefreshTypes.has('interval') ||
-    // dont schedule if we're already scheduled
-    this._intervalStart !== null) {
-      return;
+      value,
+      done
+    } = await reader.read();
+    if (done) {
+      break;
     }
-
-    // if we have a current request, wait for it to finish
-    // before scheduling the next one
-    if (this._latestRequest) {
-      try {
-        await this._latestRequest;
-      } catch {
-        // ignore errors here, we just want to wait for the request to finish
-      }
-      if (this.isDestroyed) {
-        return;
+    bytesLoaded += value.byteLength;
+    state._bytesLoaded = bytesLoaded;
+    state._lastPacketTime = performance.now();
+    shouldForward = shouldForward || state._stream !== null && state._stream.readable.locked;
+    if (shouldForward) {
+      if (!isForwarding) {
+        isForwarding = true;
+        writer = state._stream.writable.getWriter();
+        for (const item of buffer) {
+          await writer.ready;
+          await writer.write(item);
+        }
+        buffer.length = 0;
       }
+      await writer.ready;
+      await writer.write(value);
+    } else {
+      buffer.push(value);
     }
+  }
 
-    // setup the next interval
-    this._intervalStart = Date.now();
-    this._nextInterval = setTimeout(() => {
-      this._maybeUpdate();
-    }, autorefreshThreshold);
+  // if we are still forwarding, we need to close the writer
+  if (isForwarding) {
+    await writer.ready;
+    await writer.close();
+  } else if (state._stream) {
+    // if we are not forwarding, we need to cancel the stream
+    await state._stream.readable.cancel('The Stream Has Already Ended');
+    state._stream = null;
   }
+  const endTime = performance.now();
+  state._endTime = endTime;
+  state._isComplete = true;
+  state._isStarted = false;
+}
 
+/**
+ * Lazily consumes the stream of a request, providing a number of
+ * reactive properties that can be used to build UIs that respond
+ * to the progress of a request.
+ *
+ * @hideconstructor
+ */
+class RequestLoadingState {
   /** @internal */
-  _clearInterval() {
-    if (this._nextInterval) {
-      clearTimeout(this._nextInterval);
-      this._intervalStart = null;
-    }
-  }
-  /**
-   * @internal
-   */
-  _updateSubscriptions() {
-    if (this.isIdle) {
-      return;
-    }
-    const requestId = this._request.lid;
 
-    // if we're already subscribed to this request, we don't need to do anything
-    if (this._subscribedTo === requestId) {
-      return;
-    }
+  /** @internal */
 
-    // if we're subscribed to a different request, we need to unsubscribe
-    this._removeSubscriptions();
+  /** @internal */
 
-    // if we have a request, we need to subscribe to it
-    const store = this._getRequester();
-    this._requester = store;
-    if (requestId && isStore(store)) {
-      this._subscribedTo = requestId;
-      this._subscription = store.notifications.subscribe(requestId, (_id, op) => {
-        // ignore subscription events that occur while our own component's request
-        // is occurring
-        if (this._isUpdating) {
-          return;
-        }
-        switch (op) {
-          case 'invalidated':
-            {
-              // if we're subscribed to invalidations, we need to update
-              if (this.autorefreshTypes.has('invalid')) {
-                this._invalidated = true;
-                this._maybeUpdate();
-              }
-              break;
-            }
-          case 'state':
-            {
-              const latest = store.requestManager._deduped.get(requestId);
-              const priority = latest?.priority;
-              const state = this.reqState;
-              if (!priority) {
-                // if there is no priority, we have completed whatever request
-                // was occurring and so we are no longer refreshing (if we were)
-                this.isRefreshing = false;
-              } else if (priority.blocking && !state.isLoading) {
-                // if we are blocking, there is an active request for this identity
-                // that MUST be fulfilled from network (not cache).
-                // Thus this is not "refreshing" because we should clear out and
-                // block on this request.
-                //
-                // we receive state notifications when either a request initiates
-                // or completes.
-                //
-                // In the completes case: we may receive the state notification
-                // slightly before the request is finalized because the NotificationManager
-                // may sync flush it (and thus deliver it before the microtask completes)
-                //
-                // In the initiates case: we aren't supposed to receive one unless there
-                // is no other request in flight for this identity.
-                //
-                // However, there is a race condition here where the completed
-                // notification can trigger an update that generates a new request
-                // thus giving us an initiated notification before the older request
-                // finalizes.
-                //
-                // When this occurs, if the triggered update happens to have caused
-                // a new request to be made for the same identity AND that request
-                // is the one passed into this component as the @request arg, then
-                // getRequestState will return the state of the new request.
-                // We can detect this by checking if the request state is "loading"
-                // as outside of this case we would have a completed request.
-                //
-                // That is the reason for the `&& !state.isLoading` check above.
+  /** @internal */
 
-                // TODO should we just treat this as refreshing?
-                this.isRefreshing = false;
-                this._maybeUpdate('policy', true);
-              } else {
-                this.isRefreshing = true;
-              }
-            }
-        }
-      });
-    }
-  }
+  /** @internal */
 
-  /**
-   * @internal
-   */
-  _removeSubscriptions() {
-    const store = this._requester;
-    if (this._subscription && store && isStore(store)) {
-      store.notifications.unsubscribe(this._subscription);
-      this._subscribedTo = null;
-      this._subscription = null;
-      this._requester = null;
-    }
-  }
+  /** @internal */
 
-  /**
-   * Install the event listeners for network and visibility changes.
-   * This is only done in browser environments with a global `window`.
-   *
-   * @internal
-   */
-  _installListeners() {
-    if (typeof window === 'undefined') {
-      return;
-    }
-    this.isOnline = window.navigator.onLine;
-    this._unavailableStart = this.isOnline ? null : Date.now();
-    this.isHidden = document.visibilityState === 'hidden';
-    this._onlineChanged = event => {
-      this.isOnline = event.type === 'online';
-      if (event.type === 'offline' && this._unavailableStart === null) {
-        this._unavailableStart = Date.now();
-      }
-      this._maybeUpdate();
-    };
-    this._backgroundChanged = () => {
-      const isHidden = document.visibilityState === 'hidden';
-      this.isHidden = isHidden;
-      if (isHidden && this._unavailableStart === null) {
-        this._unavailableStart = Date.now();
-      }
-      this._maybeUpdate();
-    };
-    window.addEventListener('online', this._onlineChanged, {
-      passive: true,
-      capture: true
-    });
-    window.addEventListener('offline', this._onlineChanged, {
-      passive: true,
-      capture: true
-    });
-    document.addEventListener('visibilitychange', this._backgroundChanged, {
-      passive: true,
-      capture: true
-    });
-  }
+  /** @internal */
 
-  /**
-   * If the network is online and the tab is visible, either reload or refresh the request
-   * based on the component's configuration and the requested update mode.
-   *
-   * Valid modes are:
-   *
-   * - `'reload'`: Force a reload of the request.
-   * - `'refresh'`: Refresh the request in the background.
-   * - `'policy'`: Make the request, letting the store's configured CachePolicy decide whether to reload, refresh, or do nothing.
-   * - `undefined`: Make the request using the component's autorefreshBehavior setting if the autorefreshThreshold has passed.
-   *
-   * @internal
-   */
-  _maybeUpdate(mode, silent) {
-    if (this.isIdle) {
-      return;
-    }
-    const {
-      reqState
-    } = this;
-    if (reqState.isPending) {
-      return;
-    }
-    const canAttempt = Boolean(this.isOnline && !this.isHidden && (mode || this.autorefreshTypes.size));
-    if (!canAttempt) {
-      if (!silent && mode && mode !== '_invalidated') {
-        throw new Error(`Reload not available: the network is not online or the tab is hidden`);
-      }
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+
+  /** @internal */
+  _stream = null;
+  /** @internal */
+  _future;
+  /** @internal */
+  _triggered = false;
+  /** @internal */
+  _trigger() {
+    if (this._triggered) {
       return;
     }
-    const {
-      autorefreshTypes
-    } = this;
-    let shouldAttempt = this._invalidated || Boolean(mode);
-    if (!shouldAttempt && autorefreshTypes.has('online')) {
-      const {
-        _unavailableStart
-      } = this;
-      const {
-        autorefreshThreshold
-      } = this._args;
-      const deadline = typeof autorefreshThreshold === 'number' ? autorefreshThreshold : DEFAULT_DEADLINE;
-      shouldAttempt = Boolean(_unavailableStart && Date.now() - _unavailableStart > deadline);
-    }
-    if (!shouldAttempt && autorefreshTypes.has('interval')) {
-      const {
-        _intervalStart
-      } = this;
-      const {
-        autorefreshThreshold
-      } = this._args;
-      if (_intervalStart && typeof autorefreshThreshold === 'number' && autorefreshThreshold > 0) {
-        shouldAttempt = Boolean(Date.now() - _intervalStart >= autorefreshThreshold);
-      }
+    this._triggered = true;
+    const future = this._future;
+    const promise = future.getStream();
+    if (promise.sizeHint) {
+      this._sizeHint = promise.sizeHint;
     }
-    this._unavailableStart = null;
-    this._invalidated = false;
-    if (shouldAttempt) {
-      this._clearInterval();
-      this._isUpdating = true;
-      const realMode = mode === '_invalidated' ? null : mode;
-      const val = realMode ?? this._args.autorefreshBehavior ?? 'policy';
-
-      // if the future was generated by an older store version, it may not have
-      // a requester set. In this case we append it to ensure that reload and
-      // refresh will work appropriately.
-      const requester = this._getRequester();
-      if (!reqState._request.requester) {
-        reqState._request.requester = requester;
+    this.promise = promise.then(stream => {
+      if (!stream) {
+        this._isPending = false;
+        this._isComplete = true;
+        return;
       }
-      switch (val) {
-        case 'reload':
-          this._latestRequest = reqState.reload();
-          break;
-        case 'refresh':
-          this._latestRequest = reqState.refresh();
-          break;
-        case 'policy':
-          this._latestRequest = reqState.refresh(true);
-          break;
-        default:
-          macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
-            {
-              throw new Error(`Invalid ${mode ? 'update mode' : '@autorefreshBehavior'} for <Request />: ${isNeverString(val)}`);
-            }
-          })() : {};
+      return watchStream(stream, this);
+    }, error => {
+      this._isPending = false;
+      this._isStarted = false;
+      if (isAbortError(error)) {
+        this._isCancelled = true;
+        this._isComplete = true;
       }
-      if (val !== 'refresh') {
-        this._localRequest = this._latestRequest;
+      this._isErrored = true;
+      this._error = error;
+    });
+  }
+  promise = null;
+  get isPending() {
+    this._trigger();
+    return this._isPending;
+  }
+  get sizeHint() {
+    this._trigger();
+    return this._sizeHint;
+  }
+  get stream() {
+    this._trigger();
+    if (!this._stream) {
+      if (this._isComplete || this._isCancelled || this._isErrored) {
+        return null;
       }
-      void this._scheduleInterval();
-      void this._latestRequest.finally(() => {
-        this._isUpdating = false;
-      });
+      this._stream = new TransformStream();
     }
+    return this._stream.readable;
   }
-
-  /**
-   * @internal
-   */
-  _getRequester() {
-    // Note: we check for the requester's presence
-    // as well as the request's presence because we may
-    // be subscribed to a request issued by a store from an older
-    // version of the library that didn't yet set requester.
-    if (this._args.request?.requester) {
-      return this._args.request.requester;
-    }
-    return this.store;
+  get isStarted() {
+    this._trigger();
+    return this._isStarted;
   }
-
-  /**
-   * Retry the request, reloading it from the server.
-   */
-  retry = async () => {
-    this._maybeUpdate('reload');
-    await this._localRequest;
+  get bytesLoaded() {
+    this._trigger();
+    return this._bytesLoaded;
+  }
+  get startTime() {
+    this._trigger();
+    return this._startTime;
+  }
+  get endTime() {
+    this._trigger();
+    return this._endTime;
+  }
+  get lastPacketTime() {
+    this._trigger();
+    return this._lastPacketTime;
+  }
+  get isComplete() {
+    this._trigger();
+    return this._isComplete;
+  }
+  get isCancelled() {
+    this._trigger();
+    return this._isCancelled;
+  }
+  get isErrored() {
+    this._trigger();
+    return this._isErrored;
+  }
+  get error() {
+    this._trigger();
+    return this._error;
+  }
+  get elapsedTime() {
+    return (this.endTime || this.lastPacketTime) - this.startTime;
+  }
+  get completedRatio() {
+    return this.sizeHint ? this.bytesLoaded / this.sizeHint : 0;
+  }
+  get remainingRatio() {
+    return 1 - this.completedRatio;
+  }
+  get duration() {
+    return this.endTime - this.startTime;
+  }
+  get speed() {
+    // bytes per second
+    return this.bytesLoaded / (this.elapsedTime / 1000);
+  }
+  constructor(future) {
+    this._future = future;
+  }
+  abort = () => {
+    this._future.abort();
   };
+}
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_isPending', true);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_isStarted', false);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_isComplete', false);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_isCancelled', false);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_isErrored', false);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_error', null);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_sizeHint', 0);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_bytesLoaded', 0);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_startTime', 0);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_endTime', 0);
+defineNonEnumerableSignal(RequestLoadingState.prototype, '_lastPacketTime', 0);
 
-  /**
-   * Refresh the request, updating it in the background.
-   */
-  refresh = async () => {
-    this._maybeUpdate('refresh');
-    await this._latestRequest;
-  };
+/**
+ * The state of a request in the "pending"
+ * state. This is the default initial state.
+ *
+ * Extends the {@link PendingPromise} interface.
+ *
+ */
 
-  /**
-   * features to yield to the error slot of a component
-   */
-  get errorFeatures() {
-    return {
-      isHidden: this.isHidden,
-      isOnline: this.isOnline,
-      retry: this.retry
-    };
+/**
+ * The state of a request in the "fulfilled" state.
+ * This is the state of a request that has resolved
+ * successfully.
+ *
+ * Extends the {@link ResolvedPromise} interface.
+ *
+ */
+
+/**
+ * The state of a request in the "rejected" state.
+ * This is the state of a request that has rejected
+ * with an error.
+ *
+ * Extends the {@link RejectedPromise} interface.
+ *
+ */
+
+/**
+ * The state of a request in the "cancelled" state.
+ * This is the state of a promise that has been
+ * cancelled.
+ *
+ */
+
+/**
+ * RequestState extends the concept of {@link PromiseState} to provide a reactive
+ * wrapper for a request {@link Future} which allows you write declarative code
+ * around a Future's control flow.
+ *
+ * It is useful in both Template and JavaScript contexts, allowing you
+ * to quickly derive behaviors and data from pending, error and success
+ * states.
+ *
+ * The key difference between a {@link Promise} and a Future is that Futures provide
+ * access to a {@link ReadableStream | stream} of their content, the {@link RequestKey} of the request (if any)
+ * as well as the ability to attempt to {@link Future.abort | abort} the request.
+ *
+ * ```ts
+ * interface Future<T> extends Promise<T>> {
+ *   getStream(): Promise<ReadableStream>;
+ *   abort(): void;
+ *   lid: RequestKey | null;
+ * }
+ * ```
+ *
+ * These additional APIs allow us to craft even richer state experiences.
+ *
+ * To get the state of a request, use {@link getRequestState}.
+ *
+ * See also:
+ * - {@link PendingRequest}
+ * - {@link ResolvedRequest}
+ * - {@link RejectedRequest}
+ * - {@link CancelledRequest}
+ *
+ */
+
+const RequestStateProto = {};
+function performRefresh(requester, request, isReload) {
+  const req = Object.assign({}, request);
+  const cacheOptions = Object.assign({}, req.cacheOptions);
+  if (isReload) {
+    // force direct to network
+    cacheOptions.reload = true;
+  } else if (isReload === false) {
+    // delete reload to ensure we use backgroundReload / policy
+    delete cacheOptions.reload;
+    cacheOptions.backgroundReload = true;
+  } else {
+    // delete props to ensure we use the policy
+    delete cacheOptions.backgroundReload;
+    delete cacheOptions.reload;
   }
+  req.cacheOptions = cacheOptions;
+  return requester.request(req);
+}
 
-  /**
-   * features to yield to the content slot of a component
-   */
-  static {
-    decorateMethodV2(this.prototype, "errorFeatures", [memoized]);
+// TODO introduce a new mechanism for defining multiple properties
+// that share a common signal
+defineSignal(RequestStateProto, 'reason', null);
+defineSignal(RequestStateProto, 'value', null);
+defineSignal(RequestStateProto, 'result', null);
+defineSignal(RequestStateProto, 'error', null);
+defineSignal(RequestStateProto, 'status', 'pending');
+defineSignal(RequestStateProto, 'isPending', true);
+defineSignal(RequestStateProto, 'isLoading', true);
+defineSignal(RequestStateProto, 'isSuccess', false);
+defineSignal(RequestStateProto, 'isError', false);
+defineSignal(RequestStateProto, 'request', null);
+defineSignal(RequestStateProto, 'response', null);
+Object.defineProperty(RequestStateProto, 'isCancelled', {
+  get() {
+    return this.isError && isAbortError(this.reason);
   }
-  get contentFeatures() {
-    const feat = {
-      isHidden: this.isHidden,
-      isOnline: this.isOnline,
-      reload: this.retry,
-      refresh: this.refresh,
-      isRefreshing: this.isRefreshing,
-      latestRequest: this._latestRequest
-    };
-    if (feat.isRefreshing) {
-      feat.abort = () => {
-        this._latestRequest?.abort();
-      };
+});
+Object.defineProperty(RequestStateProto, 'loadingState', {
+  get() {
+    if (!this._loadingState) {
+      this._loadingState = new RequestLoadingState(this._request);
     }
-    return feat;
-  }
-
-  /**
-   * @internal
-   */
-  static {
-    decorateMethodV2(this.prototype, "contentFeatures", [memoized]);
+    return this._loadingState;
   }
-  get _request() {
-    const {
-      request,
-      query
-    } = this._args;
+});
+function createRequestState(future) {
+  const state = getPromiseResult(future);
+  const promiseState = Object.create(RequestStateProto);
+  promiseState._request = future;
+  // @ts-expect-error - we still attach it for PendingState
+  promiseState.reload = () => {
     macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
       if (!test) {
-        throw new Error(`Cannot use both @request and @query args with the <Request> component`);
+        throw new Error(`Cannot reload a request that is still pending. Await or abort the original request first.`);
       }
-    })(!request || !query) : {};
-    const {
-      _localRequest,
-      _originalRequest,
-      _originalQuery
-    } = this;
-    const isOriginalRequest = request === _originalRequest && query === _originalQuery;
-    if (_localRequest && isOriginalRequest) {
-      return _localRequest;
-    }
+    })(!promiseState.isPending) : {};
+    return performRefresh(future.requester, promiseState.request, true);
+  };
 
-    // update state checks for the next time
-    this._originalQuery = query;
-    this._originalRequest = request;
-    if (request) {
-      return request;
-    }
+  // @ts-expect-error - we still attach it for PendingState
+  promiseState.refresh = (usePolicy = false) => {
     macroCondition(getGlobalConfig().WarpDrive.env.DEBUG) ? (test => {
       if (!test) {
-        throw new Error(`You must provide either @request or an @query arg with the <Request> component`);
-      }
-    })(query) : {};
-    return this.store.request(query);
-  }
-  static {
-    decorateMethodV2(this.prototype, "_request", [memoized]);
-  }
-  get request() {
-    if (macroCondition(getGlobalConfig().WarpDrive.env.DEBUG)) {
-      try {
-        const request = this._request;
-        this._updateSubscriptions();
-        return request;
-      } catch (e) {
-        // eslint-disable-next-line no-console
-        console.log(e);
-        throw new Error(`Unable to initialize the request`, {
-          cause: e
-        });
+        throw new Error(`Cannot refresh a request that is still pending. Await or abort the original request first.`);
       }
+    })(!promiseState.isPending) : {};
+    return performRefresh(future.requester, promiseState.request, usePolicy === true ? null : false);
+  };
+  if (state) {
+    if (state.isError) {
+      promiseState.error = state.result;
+      promiseState.reason = state.result;
+      promiseState.status = 'rejected';
+      promiseState.isError = true;
+      promiseState.isPending = false;
+      promiseState.isLoading = false;
+      promiseState.request = state.result.request;
+      promiseState.response = state.result.response;
     } else {
-      const request = this._request;
-      this._updateSubscriptions();
-      return request;
+      promiseState.result = state.result.content;
+      promiseState.value = state.result.content;
+      promiseState.status = 'fulfilled';
+      promiseState.isSuccess = true;
+      promiseState.isPending = false;
+      promiseState.isLoading = false;
+      promiseState.request = state.result.request;
+      promiseState.response = state.result.response;
     }
+  } else {
+    void future.then(result => {
+      setPromiseResult(future, {
+        isError: false,
+        result
+      });
+      promiseState.result = result.content;
+      promiseState.value = result.content;
+      promiseState.status = 'fulfilled';
+      promiseState.isSuccess = true;
+      promiseState.isPending = false;
+      promiseState.isLoading = false;
+      promiseState.request = result.request;
+      promiseState.response = result.response;
+    }, error => {
+      setPromiseResult(future, {
+        isError: true,
+        result: error
+      });
+      promiseState.error = error;
+      promiseState.reason = error;
+      promiseState.status = 'rejected';
+      promiseState.isError = true;
+      promiseState.isPending = false;
+      promiseState.isLoading = false;
+      promiseState.request = error.request;
+      promiseState.response = error.response;
+    });
   }
-  static {
-    decorateMethodV2(this.prototype, "request", [memoized]);
-  }
-  get reqState() {
-    return getRequestState(this.request);
-  }
-  get result() {
-    return this.reqState.result;
-  }
-}
-defineSignal(RequestSubscription.prototype, 'isOnline', true);
-defineSignal(RequestSubscription.prototype, 'isHidden', false);
-defineSignal(RequestSubscription.prototype, 'isRefreshing', false);
-defineSignal(RequestSubscription.prototype, '_localRequest', undefined);
-defineSignal(RequestSubscription.prototype, '_latestRequest', undefined);
-function isStore(store) {
-  return 'requestManager' in store;
-}
-function createRequestSubscription(store, args) {
-  return new RequestSubscription(store, args);
-}
-function upgradeSubscription(sub) {
-  return sub;
+  return promiseState;
 }
-function _DISPOSE() {
-  const self = upgradeSubscription(this);
-  self.isDestroyed = true;
-  self._removeSubscriptions();
-  if (typeof window === 'undefined') {
-    return;
+
+/**
+ * `getRequestState` can be used in both JavaScript and Template contexts.
+ *
+ * ```ts
+ * import { getRequestState } from '@warp-drive/ember';
+ *
+ * const state = getRequestState(future);
+ * ```
+ *
+ * For instance, we could write a getter on a component that updates whenever
+ * the request state advances or the future changes, by combining the function
+ * with the use of `@cached`
+ *
+ * ```ts
+ * class Component {
+ *   @cached
+ *   get title() {
+ *     const state = getRequestState(this.args.request);
+ *     if (state.isPending) {
+ *       return 'loading...';
+ *     }
+ *     if (state.isError) { return null; }
+ *     return state.result.title;
+ *   }
+ * }
+ * ```
+ *
+ * Or in a template as a helper:
+ *
+ * ```gjs
+ * import { getRequestState } from '@warp-drive/ember';
+ *
+ * <template>
+ *   {{#let (getRequestState @request) as |state|}}
+ *     {{#if state.isPending}}
+ *       <Spinner />
+ *     {{else if state.isError}}
+ *       <ErrorForm @error={{state.error}} />
+ *     {{else}}
+ *       <h1>{{state.result.title}}</h1>
+ *     {{/if}}
+ *   {{/let}}
+ * </template>
+ * ```
+ *
+ * If looking to use in a template, consider also the `<Request />` component
+ * which offers a numbe of additional capabilities for requests *beyond* what
+ * `RequestState` provides.
+ *
+ */
+function getRequestState(future) {
+  let state = RequestCache.get(future);
+  if (!state) {
+    state = createRequestState(future);
+    RequestCache.set(future, state);
   }
-  self._clearInterval();
-  window.removeEventListener('online', self._onlineChanged, {
-    passive: true,
-    capture: true
-  });
-  window.removeEventListener('offline', self._onlineChanged, {
-    passive: true,
-    capture: true
-  });
-  document.removeEventListener('visibilitychange', self._backgroundChanged, {
-    passive: true,
-    capture: true
-  });
+  return state;
 }
 export { defineGate as A, defineNonEnumerableSignal as B, CacheHandler as C, DISPOSE as D, Signals as E, peekInternalSignal as F, createInternalMemo as G, withSignalStore as H, notifyInternalSignal as I, consumeInternalSignal as J, getOrCreateInternalSignal as K, ReactiveResource as L, isNonIdentityCacheableField as M, getFieldCacheKeyStrict as N, checkout as O, commit as P, setIdentifierGenerationMethod as Q, RecordArrayManager as R, Store as S, setIdentifierUpdateMethod as T, setIdentifierForgetMethod as U, setIdentifierResetMethod as V, setKeyInfoForResource as W, _clearCaches as _, isRequestKey as a, coerceId as b, constructResource as c, assertPrivateStore as d, ensureStringId as e, fastPush as f, isPrivateStore as g, assertPrivateCapabilities as h, isResourceKey as i, setRecordIdentifier as j, StoreMap as k, createLegacyManyArray as l, log as m, normalizeModelName as n, logGroup as o, getPromiseState as p, createRequestSubscription as q, recordIdentifierFor as r, storeFor as s, getRequestState as t, signal as u, memoized as v, gate as w, entangleSignal as x, entangleInitiallyStaleSignal as y, defineSignal as z };