@effect-app/vue 2.51.18 → 2.52.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effect-app/vue",
-  "version": "2.51.18",
+  "version": "2.52.0",
   "license": "MIT",
   "type": "module",
   "homepage": "https://github.com/effect-ts-app/libs/tree/main/packages/vue",
@@ -12,16 +12,19 @@
     "effect-app": "3.2.3"
   },
   "peerDependencies": {
-    "@effect/platform": "^0.90.0",
-    "@effect/platform-browser": "^0.70.0",
     "@effect-atom/atom": "^0.1.4",
     "@effect-atom/atom-vue": "^0.1.3",
+    "@effect/platform": "^0.90.0",
+    "@effect/platform-browser": "^0.70.0",
     "@sentry/browser": "^10.2.0",
     "effect": "^3.17.6",
     "vue": "^3.5.18"
   },
   "devDependencies": {
+    "@effect/vitest": "^0.25.1",
+    "@formatjs/icu-messageformat-parser": "^2.11.2",
     "@types/node": "~24.2.0",
+    "@vitejs/plugin-vue": "^6.0.1",
     "intl-messageformat": "^10.7.16",
     "json5": "^2.2.3",
     "typescript": "~5.9.2",
@@ -44,6 +47,22 @@
       "types": "./dist/errorReporter.d.ts",
       "default": "./dist/errorReporter.js"
     },
+    "./experimental/makeExperimental": {
+      "types": "./dist/experimental/makeExperimental.d.ts",
+      "default": "./dist/experimental/makeExperimental.js"
+    },
+    "./experimental/useCommand": {
+      "types": "./dist/experimental/useCommand.d.ts",
+      "default": "./dist/experimental/useCommand.js"
+    },
+    "./experimental/useConfirm": {
+      "types": "./dist/experimental/useConfirm.d.ts",
+      "default": "./dist/experimental/useConfirm.js"
+    },
+    "./experimental/useWithToast": {
+      "types": "./dist/experimental/useWithToast.d.ts",
+      "default": "./dist/experimental/useWithToast.js"
+    },
     "./form": {
       "types": "./dist/form.d.ts",
       "default": "./dist/form.js"

package/src/experimental/makeExperimental.ts

@@ -0,0 +1,27 @@
+import { type Runtime } from "effect-app"
+import { type MakeIntlReturn } from "../makeIntl.js"
+import { makeUseCommand } from "./useCommand.js"
+import { makeUseConfirm } from "./useConfirm.js"
+import { makeUseWithToast, type UseToast } from "./useWithToast.js"
+
+export const makeExperimental = <Locale extends string, R>(
+  // NOTE: underscores to not collide with auto exports in nuxt apps
+  _useIntl: MakeIntlReturn<Locale>["useIntl"],
+  _useToast: UseToast,
+  runtime: Runtime.Runtime<R>
+) => {
+  const _useConfirm = makeUseConfirm(_useIntl)
+  const _useWithToast = makeUseWithToast(_useToast)
+  const _useCommand = makeUseCommand(
+    _useIntl,
+    _useConfirm,
+    _useWithToast,
+    runtime
+  )
+
+  return {
+    useConfirm: _useConfirm,
+    useCommand: _useCommand,
+    useWithToast: _useWithToast
+  }
+}

package/src/experimental/useCommand.ts

@@ -0,0 +1,513 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { asResult, type MakeIntlReturn, reportRuntimeError } from "@effect-app/vue"
+import { reportMessage } from "@effect-app/vue/errorReporter"
+import { type Result } from "@effect-atom/atom/Result"
+import { Cause, Context, Effect, type Exit, flow, Match, Option, Runtime, S } from "effect-app"
+import { SupportedErrors } from "effect-app/client"
+import { OperationFailure, OperationSuccess } from "effect-app/Operations"
+import { type RuntimeFiber } from "effect/Fiber"
+import { type YieldWrap } from "effect/Utils"
+import { computed, type ComputedRef } from "vue"
+import { type makeUseConfirm } from "./useConfirm.js"
+import { type makeUseWithToast } from "./useWithToast.js"
+
+export const DefaultIntl = {
+  de: {
+    "handle.confirmation": "{action} bestätigen?",
+    "handle.waiting": "{action} wird ausgeführt...",
+    "handle.success": "{action} erfolgreich",
+    "handle.with_errors": "{action} fehlgeschlagen",
+    "handle.with_warnings": "{action} erfolgreich, mit Warnungen",
+    "handle.error_response":
+      "Die Anfrage war nicht erfolgreich:\n{error}\nWir wurden benachrichtigt und werden das Problem in Kürze beheben.",
+    "handle.response_error": "Die Antwort konnte nicht verarbeitet werden:\n{error}",
+    "handle.request_error": "Die Anfrage konnte nicht gesendet werden:\n{error}",
+    "handle.unexpected_error2": "{action} unerwarteter Fehler, probieren sie es in kurze nochmals."
+  },
+  en: {
+    "handle.confirmation": "Confirm {action}?",
+    "handle.waiting": "{action} executing...",
+    "handle.success": "{action} Success",
+    "handle.with_errors": "{action} Failed",
+    "handle.with_warnings": "{action}, with warnings",
+    "handle.error_response":
+      "There was an error in processing the response:\n{error}\nWe have been notified and will fix the problem shortly.",
+    "handle.request_error": "There was an error in the request:\n{error}",
+    "handle.response_error": "The request was not successful:\n{error}",
+    "handle.unexpected_error2": "{action} unexpected error, please try again shortly."
+  }
+}
+
+export class CommandContext extends Context.Tag("CommandContext")<
+  CommandContext,
+  { action: string }
+>() {}
+
+export const makeUseCommand = <Locale extends string, RT>(
+  // NOTE: underscores to not collide with auto exports in nuxt apps
+  _useIntl: MakeIntlReturn<Locale>["useIntl"],
+  _useConfirm: ReturnType<typeof makeUseConfirm>,
+  _useWithToast: ReturnType<typeof makeUseWithToast>,
+  runtime: Runtime.Runtime<RT>
+) =>
+() => {
+  const withToast = _useWithToast()
+  const { intl } = _useIntl()
+  const { confirmOrInterrupt } = _useConfirm()
+
+  const runFork = Runtime.runFork(runtime)
+
+  type CommandOut<Args extends Array<any>, A, E> = ComputedRef<
+    ((...a: Args) => RuntimeFiber<Exit.Exit<A, E>, never>) & {
+      action: string
+      result: Result<A, E>
+      waiting: boolean
+    }
+  >
+
+  type CommandOutHelper<Args extends Array<any>, Eff extends Effect.Effect<any, any, any>> = CommandOut<
+    Args,
+    Effect.Effect.Success<Eff>,
+    Effect.Effect.Error<Eff>
+  >
+
+  return {
+    /** Version of confirmOrInterrupt that automatically includes the action name in the default messages */
+    confirmOrInterrupt: Effect.fnUntraced(function*(
+      message: string | undefined = undefined
+    ) {
+      const context = yield* CommandContext
+      yield* confirmOrInterrupt(
+        message
+          ?? intl.value.formatMessage(
+            { id: "handle.confirmation" },
+            { action: context.action }
+          )
+      )
+    }),
+    /** Version of withDefaultToast that automatically includes the action name in the default messages and uses intl */
+    withDefaultToast: <A, E>(
+      self: Effect.Effect<A, E, CommandContext>,
+      errorRenderer?: (e: E) => string | undefined // undefined falls back to default?
+    ) =>
+      Effect.gen(function*() {
+        const { action } = yield* CommandContext
+
+        const defaultWarnMessage = intl.value.formatMessage(
+          { id: "handle.with_warnings" },
+          { action }
+        )
+        const defaultErrorMessage = intl.value.formatMessage(
+          { id: "handle.with_errors" },
+          { action }
+        )
+        function renderError(e: E): string {
+          if (errorRenderer) {
+            const m = errorRenderer(e)
+            if (m) {
+              return m
+            }
+          }
+          if (!S.is(SupportedErrors)(e) && !S.ParseResult.isParseError(e)) {
+            if (typeof e === "object" && e !== null) {
+              if ("message" in e) {
+                return `${e.message}`
+              }
+              if ("_tag" in e) {
+                return `${e._tag}`
+              }
+            }
+            return ""
+          }
+          const e2: SupportedErrors | S.ParseResult.ParseError = e
+          return Match.value(e2).pipe(
+            Match.tags({
+              ParseError: (e) => {
+                console.warn(e.toString())
+                return intl.value.formatMessage({ id: "validation.failed" })
+              }
+            }),
+            Match.orElse((e) => `${e.message ?? e._tag ?? e}`)
+          )
+        }
+
+        return yield* self.pipe(
+          withToast({
+            onWaiting: intl.value.formatMessage(
+              { id: "handle.waiting" },
+              { action }
+            ),
+            onSuccess: (a) =>
+              intl.value.formatMessage({ id: "handle.success" }, { action })
+              + (S.is(OperationSuccess)(a) && a.message ? "\n" + a.message : ""),
+            onFailure: Option.match({
+              onNone: () =>
+                intl.value.formatMessage(
+                  { id: "handle.unexpected_error2" },
+                  {
+                    action,
+                    error: "" // TODO consider again Cause.pretty(cause), // will be reported to Sentry/Otel anyway.. and we shouldn't bother users with error dumps?
+                  }
+                ),
+              onSome: (e) =>
+                S.is(OperationFailure)(e)
+                  ? {
+                    level: "warn",
+                    message: defaultWarnMessage + e.message ? "\n" + e.message : ""
+                  }
+                  : `${defaultErrorMessage}:\n` + renderError(e)
+            })
+          })
+        )
+      }),
+    /**
+     * Define a Command
+     * @param actionName The internal name of the action. will be used as Span. will be used to lookup user facing name via intl. `action.${actionName}`
+     * @returns A function that can be called to execute the mutation, like directly in a `@click` handler. Error reporting is built-in.
+     * the Effects **only** have access to the `CommandContext` service, which contains the user-facing action name.
+     * The function also has the following properties:
+     * - action: The user-facing name of the action, as defined in the intl messages. Can be used e.g as Button label.
+     * - result: The Result of the mutation
+     * - waiting: Whether the mutation is currently in progress. (shorthand for .result.waiting). Can be used e.g as Button loading/disabled state.
+     * Reporting status to the user is recommended to use the `withDefaultToast` helper, or render the .result inline
+     */
+    fn: (actionName: string): {
+      <Eff extends YieldWrap<Effect.Effect<any, any, RT | CommandContext>>, AEff, Args extends Array<any>>(
+        body: (...args: Args) => Generator<Eff, AEff, never>
+      ): CommandOut<
+        Args,
+        AEff,
+        [Eff] extends [never] ? never
+          : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+          : never
+      >
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A
+      ): CommandOutHelper<Args, A>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B
+      ): CommandOutHelper<Args, B>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C
+      ): CommandOutHelper<Args, C>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C,
+        D extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C,
+        d: (_: C /* TODO , ...args: NoInfer<Args> */) => D
+      ): CommandOutHelper<Args, D>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C,
+        D,
+        E extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C,
+        d: (_: C /* TODO , ...args: NoInfer<Args> */) => D,
+        e: (_: D /* TODO , ...args: NoInfer<Args> */) => E
+      ): CommandOutHelper<Args, E>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C,
+        D,
+        E,
+        F extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C,
+        d: (_: C /* TODO , ...args: NoInfer<Args> */) => D,
+        e: (_: D /* TODO , ...args: NoInfer<Args> */) => E,
+        f: (_: E /* TODO , ...args: NoInfer<Args> */) => F
+      ): CommandOutHelper<Args, F>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C,
+        D,
+        E,
+        F,
+        G extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C,
+        d: (_: C /* TODO , ...args: NoInfer<Args> */) => D,
+        e: (_: D /* TODO , ...args: NoInfer<Args> */) => E,
+        f: (_: E /* TODO , ...args: NoInfer<Args> */) => F,
+        g: (_: F /* TODO , ...args: NoInfer<Args> */) => G
+      ): CommandOutHelper<Args, G>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C,
+        D,
+        E,
+        F,
+        G,
+        H extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C,
+        d: (_: C /* TODO , ...args: NoInfer<Args> */) => D,
+        e: (_: D /* TODO , ...args: NoInfer<Args> */) => E,
+        f: (_: E /* TODO , ...args: NoInfer<Args> */) => F,
+        g: (_: F /* TODO , ...args: NoInfer<Args> */) => G,
+        h: (_: G /* TODO , ...args: NoInfer<Args> */) => H
+      ): CommandOutHelper<Args, H>
+      <
+        Eff extends YieldWrap<Effect.Effect<any, any, any>>,
+        AEff,
+        Args extends Array<any>,
+        A,
+        B,
+        C,
+        D,
+        E,
+        F,
+        G,
+        H,
+        I extends Effect.Effect<any, any, RT | CommandContext>
+      >(
+        body: (...args: Args) => Generator<Eff, AEff, never>,
+        a: (
+          _: Effect.Effect<
+            AEff,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer E, infer _R>>] ? E
+              : never,
+            [Eff] extends [never] ? never
+              : [Eff] extends [YieldWrap<Effect.Effect<infer _A, infer _E, infer R>>] ? R
+              : never
+          > /* TODO ,
+          ...args: NoInfer<Args> */
+        ) => A,
+        b: (_: A /* TODO , ...args: NoInfer<Args> */) => B,
+        c: (_: B /* TODO , ...args: NoInfer<Args> */) => C,
+        d: (_: C /* TODO , ...args: NoInfer<Args> */) => D,
+        e: (_: D /* TODO , ...args: NoInfer<Args> */) => E,
+        f: (_: E /* TODO , ...args: NoInfer<Args> */) => F,
+        g: (_: F /* TODO , ...args: NoInfer<Args> */) => G,
+        h: (_: G /* TODO , ...args: NoInfer<Args> */) => H,
+        i: (_: H /* TODO , ...args: NoInfer<Args> */) => I
+      ): CommandOutHelper<Args, I>
+    } =>
+    // TODO constrain/type combinators
+    (
+      fn: any,
+      // TODO: combinators can freely take A, E, R and change it to whatever they want, as long as the end result Requires not more than CommandContext | R
+      ...combinators: any[]
+    ): any => {
+      const action = intl.value.formatMessage({
+        id: `action.${actionName}`,
+        defaultMessage: actionName
+      })
+      const context = { action }
+
+      const errorReporter = <A, E, R>(self: Effect.Effect<A, E, R>) =>
+        self.pipe(
+          Effect.tapErrorCause(
+            Effect.fnUntraced(function*(cause) {
+              if (Cause.isInterruptedOnly(cause)) {
+                console.info(`Interrupted while trying to ${actionName}`)
+                return
+              }
+
+              const fail = Cause.failureOption(cause)
+              if (Option.isSome(fail)) {
+                // if (fail.value._tag === "SuppressErrors") {
+                //   console.info(
+                //     `Suppressed error trying to ${action}`,
+                //     fail.value,
+                //   )
+                //   return
+                // }
+                const message = `Failure trying to ${actionName}`
+                yield* reportMessage(message, {
+                  action: actionName,
+                  error: fail.value
+                })
+                return
+              }
+
+              const extra = {
+                action,
+                message: `Unexpected Error trying to ${actionName}`
+              }
+              yield* reportRuntimeError(cause, extra)
+            })
+          )
+        )
+
+      // TODO: override span stack set by Effect.fn as it points here instead of to the caller of Command.fn.
+      // perhaps copying Effect.fn implementation is better than using it?
+      const handler = Effect.fn(actionName)(
+        fn,
+        ...(combinators as [any]),
+        // all must be within the Effect.fn to fit within the Span
+        Effect.provideService(CommandContext, context) as any, /* TODO */
+        ((_: any) => Effect.annotateCurrentSpan({ action }).pipe(Effect.zipRight(_))) as any, /* TODO */
+        errorReporter as any /* TODO */
+      ) as any // (...args: Args) => Effect.Effect<AEff, $WrappedEffectError, R>
+
+      const [result, mut] = asResult(handler)
+
+      return computed(() =>
+        Object.assign(
+          flow(
+            mut as any,
+            runFork
+            // (_) => {}
+          ), /* make sure always create a new one, or the state won't properly propagate */
+          {
+            action,
+            result: result.value,
+            waiting: result.value.waiting
+          }
+        )
+      )
+    }
+  }
+}

package/src/experimental/useConfirm.ts

@@ -0,0 +1,17 @@
+import { Effect } from "effect-app"
+import { type MakeIntlReturn } from "../makeIntl.js"
+
+export const makeUseConfirm = <Locale extends string>(_useIntl: MakeIntlReturn<Locale>["useIntl"]) => () => {
+  const { intl } = _useIntl()
+  const getDefaultMessage = () =>
+    intl.value.formatMessage({ id: "confirm.default", defaultMessage: "Sind sie Sicher?" })
+
+  const confirm = (message = getDefaultMessage()) => Effect.sync(() => window.confirm(message))
+
+  const confirmOrInterrupt = (message = getDefaultMessage()) =>
+    confirm(message).pipe(
+      Effect.flatMap((result) => (result ? Effect.void : Effect.interrupt))
+    )
+
+  return { confirm, confirmOrInterrupt }
+}

package/src/experimental/useWithToast.ts

@@ -0,0 +1,65 @@
+import { Cause, Effect, type Option } from "effect-app"
+
+export interface ToastOptions<A, E, Args extends ReadonlyArray<unknown>> {
+  onWaiting: string | ((...args: Args) => string)
+  onSuccess: string | ((a: A, ...args: Args) => string)
+  onFailure:
+    | string
+    | ((
+      error: Option.Option<E>,
+      ...args: Args
+    ) => string | { level: "warn" | "error"; message: string })
+}
+
+export type ToastId = string | number
+export type ToastOpts = { id?: ToastId; timeout?: number }
+
+export type UseToast = () => {
+  error: (message: string, options?: ToastOpts) => ToastId
+  warning: (message: string, options?: ToastOpts) => ToastId
+  success: (message: string, options?: ToastOpts) => ToastId
+  info: (message: string, options?: ToastOpts) => ToastId
+  dismiss: (id: ToastId) => void
+}
+
+export const makeUseWithToast = (useToast: UseToast) => () => {
+  const toast = useToast()
+  return <A, E, Args extends ReadonlyArray<unknown>, R>(
+    options: ToastOptions<A, E, Args>
+  ) =>
+    Effect.fnUntraced(function*(self: Effect.Effect<A, E, R>, ...args: Args) {
+      const toastId = toast.info(
+        // .loading
+        typeof options.onWaiting === "string"
+          ? options.onWaiting
+          : options.onWaiting(...args)
+      )
+      return yield* self.pipe(
+        Effect.tap((a) => {
+          toast.success(
+            typeof options.onSuccess === "string"
+              ? options.onSuccess
+              : options.onSuccess(a, ...args),
+            { id: toastId, timeout: 3_000 }
+          )
+        }),
+        Effect.tapErrorCause((cause) =>
+          Effect.sync(() => {
+            if (Cause.isInterruptedOnly(cause)) {
+              toast.dismiss(toastId)
+              return
+            }
+            const t = typeof options.onFailure === "string"
+              ? options.onFailure
+              : options.onFailure(Cause.failureOption(cause), ...args)
+            if (typeof t === "object") {
+              return t.level === "warn"
+                ? toast.warning(t.message, { id: toastId, timeout: 5_000 })
+                : toast.error(t.message, { id: toastId, timeout: 5_000 })
+            }
+            toast.error(t, { id: toastId, timeout: 5_000 })
+          })
+        )
+      )
+    })
+}