@hexdspace/react 0.0.3 → 0.0.5

package/dist/index.cjs

@@ -0,0 +1,324 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_NOTIFICATION_CHANNEL: () => DEFAULT_NOTIFICATION_CHANNEL,
+  NotificationHost: () => NotificationHost,
+  NotifierController: () => NotifierController,
+  NotifierProvider: () => NotifierProvider,
+  notifierController: () => notifierController,
+  ui: () => ui,
+  useNotifierController: () => useNotifierController,
+  useResponsiveMutation: () => useResponsiveMutation
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/util/responsive-query/ui-result.ts
+var import_uuid = require("uuid");
+var ui = {
+  success: (value, ...effects) => ({
+    ok: true,
+    value,
+    effects
+  }),
+  failure: (error, ...extraEffects) => ({
+    ok: false,
+    error,
+    effects: [
+      {
+        type: "notify",
+        notification: {
+          id: (0, import_uuid.v4)(),
+          title: "Error",
+          content: error,
+          variant: "error"
+        }
+      },
+      ...extraEffects
+    ]
+  })
+};
+
+// src/util/responsive-query/use-responsive-mutation.ts
+var import_react_query = require("@tanstack/react-query");
+
+// src/feature/notifier/entity/notification-bus.ts
+var NotificationBus = class {
+  channels = /* @__PURE__ */ new Map();
+  subscribe(channel, listener) {
+    const listeners = this.ensureChannel(channel);
+    listeners.add(listener);
+    return () => {
+      const set = this.channels.get(channel);
+      if (!set) return;
+      set.delete(listener);
+      if (set.size === 0) {
+        this.channels.delete(channel);
+      }
+    };
+  }
+  publish(channel, notification) {
+    const listeners = this.channels.get(channel);
+    if (!listeners || listeners.size === 0) return;
+    for (const listener of listeners) {
+      try {
+        listener.notify(notification);
+      } catch (error) {
+        console.error("Notification listener failed to handle notification", error);
+      }
+    }
+  }
+  ensureChannel(channel) {
+    let listeners = this.channels.get(channel);
+    if (!listeners) {
+      listeners = /* @__PURE__ */ new Set();
+      this.channels.set(channel, listeners);
+    }
+    return listeners;
+  }
+};
+
+// src/feature/notifier/application/use-case/send-notification-use-case.ts
+var SendNotificationUseCase = class {
+  constructor(bus2) {
+    this.bus = bus2;
+  }
+  async execute(channel, notification) {
+    this.bus.publish(channel, notification);
+  }
+};
+
+// src/feature/notifier/application/use-case/subscribe-use-case.ts
+var SubscribeUseCase = class {
+  constructor(bus2) {
+    this.bus = bus2;
+  }
+  async execute(channel, observer) {
+    return this.bus.subscribe(channel, observer);
+  }
+};
+
+// src/feature/notifier/infra/controllers/notifier-controller.ts
+var NotifierController = class {
+  constructor(sender, subscriber) {
+    this.sender = sender;
+    this.subscriber = subscriber;
+  }
+  handleSendNotification(channel, notification) {
+    return this.sender.execute(channel, notification);
+  }
+  handleSubscribe(channel, listener) {
+    return this.subscriber.execute(channel, listener);
+  }
+};
+var bus = new NotificationBus();
+var sendNotification = new SendNotificationUseCase(bus);
+var subscribe = new SubscribeUseCase(bus);
+var notifierController = new NotifierController(sendNotification, subscribe);
+
+// src/feature/notifier/infra/web/react/NotificationHost.tsx
+var import_react2 = require("react");
+var import_react_toastify2 = require("react-toastify");
+var import_lucide_react = require("lucide-react");
+
+// src/feature/notifier/entity/notification.ts
+var DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
+
+// src/feature/notifier/infra/web/react/NotifierProvider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var NotifierContext = (0, import_react.createContext)(null);
+var NotifierProvider = ({ children }) => {
+  const controller = (0, import_react.useMemo)(() => notifierController, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotifierContext.Provider, { value: { controller }, children });
+};
+function useNotifierController() {
+  const ctx = (0, import_react.useContext)(NotifierContext);
+  if (!ctx) throw new Error("useNotifierController must be used within <NotifierProvider>");
+  return ctx.controller;
+}
+
+// src/feature/notifier/infra/web/react/CustomToastTransition.tsx
+var import_react_toastify = require("react-toastify");
+var SlideUp = (0, import_react_toastify.cssTransition)({
+  enter: "slideIn",
+  exit: "slideOut",
+  collapseDuration: 300,
+  appendPosition: false,
+  collapse: true
+});
+
+// src/feature/notifier/infra/web/react/NotificationHost.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
+  const controller = useNotifierController();
+  (0, import_react2.useEffect)(() => {
+    let unsub;
+    let disposed = false;
+    const listener = {
+      notify(notification) {
+        renderToast(notification);
+      }
+    };
+    controller.handleSubscribe(channel, listener).then((unsubHandler) => {
+      if (disposed) {
+        unsubHandler();
+        return;
+      }
+      unsub = unsubHandler;
+    }).catch((error) => {
+      console.error("Failed to subscribe to notifications", error);
+    });
+    return () => {
+      disposed = true;
+      if (unsub) unsub();
+    };
+  }, [channel, controller]);
+  const theme = (0, import_react2.useMemo)(() => {
+    if (!isDark) {
+      return "light";
+    }
+    return isDark() ? "dark" : "light";
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_react_toastify2.ToastContainer,
+    {
+      position: "bottom-right",
+      transition: SlideUp,
+      newestOnTop: true,
+      draggable: true,
+      pauseOnFocusLoss: false,
+      icon: false,
+      pauseOnHover: true,
+      hideProgressBar: false,
+      className: "custom-toast-container",
+      theme
+    }
+  );
+};
+var DEFAULT_NOTIFICATION_VARIANT = "info";
+var TOAST_ICON_BY_VARIANT = {
+  success: { Icon: import_lucide_react.CheckCircleIcon, color: "var(--success)" },
+  warning: { Icon: import_lucide_react.AlertTriangleIcon, color: "var(--warning)" },
+  error: { Icon: import_lucide_react.XCircleIcon, color: "var(--danger)" },
+  info: { Icon: import_lucide_react.InfoIcon, color: "var(--accent)" }
+};
+function renderToast(notification) {
+  const variant = notification.variant ?? DEFAULT_NOTIFICATION_VARIANT;
+  (0, import_react_toastify2.toast)(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToastContent, { notification }), {
+    type: variant,
+    toastId: notification.id,
+    icon: false
+  });
+}
+var ToastContent = ({ notification }) => {
+  const { title, content, action } = notification;
+  const variant = notification.variant ?? DEFAULT_NOTIFICATION_VARIANT;
+  const { Icon, color } = TOAST_ICON_BY_VARIANT[variant];
+  const handleActionClick = async () => {
+    if (!action) return;
+    try {
+      await action.onClick?.();
+    } catch (error) {
+      console.error("Notification action failed", error);
+    } finally {
+      import_react_toastify2.toast.dismiss(notification.id);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "toast-content flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        Icon,
+        {
+          className: "h-4 w-4 shrink-0",
+          style: { color },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold", children: title })
+    ] }),
+    (content || action) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
+      content && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1 text-sm text-muted-foreground", children: content }),
+      action && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "toast-action text-sm font-medium ml-auto shrink-0 self-end",
+          onClick: handleActionClick,
+          children: action.label
+        }
+      )
+    ] })
+  ] });
+};
+
+// src/util/responsive-query/use-responsive-mutation.ts
+function useResponsiveMutation(responsiveMutation) {
+  const { mutationFn, optimistic, onSuccess } = responsiveMutation;
+  const qc = (0, import_react_query.useQueryClient)();
+  return (0, import_react_query.useMutation)({
+    mutationFn: async (args) => {
+      const res = await mutationFn(args);
+      if (!res.ok) throw res;
+      return res;
+    },
+    onMutate: async (args) => {
+      if (!optimistic) return void 0;
+      const snapshot = await optimistic(args, { queryClient: qc });
+      return snapshot ?? void 0;
+    },
+    onError: (err, _args, ctx) => {
+      if (ctx) void ctx.rollback();
+      executeEffects(err.effects, { queryClient: qc });
+    },
+    onSuccess: (res) => {
+      executeEffects(res.effects, { queryClient: qc });
+      onSuccess?.(res.value);
+    }
+  });
+}
+var executeEffects = (effects, ctx) => {
+  effects.forEach((effect) => {
+    if (effect.type === "invalidate") {
+      void ctx.queryClient.invalidateQueries({ queryKey: effect.queryKey });
+    } else if (effect.type === "update") {
+      ctx.queryClient.setQueryData(effect.queryKey, effect.updater);
+    } else if (effect.type === "notify") {
+      const notification = typeof effect.notification === "function" ? effect.notification(ctx) : effect.notification;
+      void notifierController.handleSendNotification(DEFAULT_NOTIFICATION_CHANNEL, {
+        ...notification
+      });
+    } else if (effect.type === "custom") {
+      void effect.run(ctx);
+    }
+  });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_NOTIFICATION_CHANNEL,
+  NotificationHost,
+  NotifierController,
+  NotifierProvider,
+  notifierController,
+  ui,
+  useNotifierController,
+  useResponsiveMutation
+});

package/dist/index.d.cts

@@ -0,0 +1,96 @@
+import * as _tanstack_react_query from '@tanstack/react-query';
+import { QueryClient, QueryKey } from '@tanstack/react-query';
+import { ResultOk, ResultError } from '@hexdspace/util';
+import React from 'react';
+
+type NotificationVariant = 'success' | 'warning' | 'error' | 'info';
+declare const DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
+type NotificationAction = {
+    label: string;
+    onClick?: () => void | Promise<void>;
+};
+interface Notification {
+    id: string;
+    title: string;
+    content?: string;
+    variant?: NotificationVariant;
+    action?: NotificationAction;
+}
+
+interface SendNotification {
+    execute(channel: string, notification: Notification): Promise<void>;
+}
+
+interface NotificationListener {
+    notify: (notification: Notification) => void;
+}
+
+type UnsubscribeHandler = () => void;
+interface Subscribe {
+    execute(channel: string, observer: NotificationListener): Promise<UnsubscribeHandler>;
+}
+
+declare class NotifierController {
+    private readonly sender;
+    private readonly subscriber;
+    constructor(sender: SendNotification, subscriber: Subscribe);
+    handleSendNotification(channel: string, notification: Notification): Promise<void>;
+    handleSubscribe(channel: string, listener: NotificationListener): Promise<UnsubscribeHandler>;
+}
+declare const notifierController: NotifierController;
+
+type NotificationHostProps = {
+    channel?: string;
+    isDark?: () => boolean;
+};
+declare const NotificationHost: React.FC<NotificationHostProps>;
+
+declare const NotifierProvider: React.FC<{
+    children: React.ReactNode;
+}>;
+declare function useNotifierController(): NotifierController;
+
+type InstructionContext = {
+    queryClient: QueryClient;
+};
+type CacheInstruction = {
+    type: 'invalidate';
+    queryKey: QueryKey;
+} | {
+    type: 'update';
+    queryKey: QueryKey;
+    updater: (old: unknown) => unknown;
+};
+type NotificationInstruction = {
+    type: 'notify';
+    notification: Notification | ((ctx: InstructionContext) => Notification);
+};
+type CustomInstruction = {
+    type: 'custom';
+    run: (ctx: InstructionContext) => void | Promise<void>;
+};
+type Instruction = CacheInstruction | NotificationInstruction | CustomInstruction;
+type UIOk<T> = ResultOk<T> & {
+    effects: Instruction[];
+};
+type UIFail = ResultError<string> & {
+    effects: Instruction[];
+};
+type UIResult<T> = UIOk<T> | UIFail;
+declare const ui: {
+    success: <T>(value: T, ...effects: Instruction[]) => UIResult<T>;
+    failure: (error: string, ...extraEffects: Instruction[]) => UIResult<never>;
+};
+
+type OptimisticSnapshot = {
+    rollback: () => void | Promise<void>;
+};
+type ResponsiveMutation<Args, Res> = {
+    mutationFn: (args: Args) => Promise<UIResult<Res>>;
+    optimistic?: (args: Args, ctx: InstructionContext) => Promise<OptimisticSnapshot | void> | OptimisticSnapshot | void;
+    onSuccess?: (data: Res) => void;
+};
+
+declare function useResponsiveMutation<Args, Res>(responsiveMutation: ResponsiveMutation<Args, Res>): _tanstack_react_query.UseMutationResult<UIOk<Res>, UIFail, Args, OptimisticSnapshot | undefined>;
+
+export { type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type Instruction, type InstructionContext, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, NotifierProvider, type OptimisticSnapshot, type ResponsiveMutation, type UIFail, type UIOk, type UIResult, notifierController, ui, useNotifierController, useResponsiveMutation };

package/dist/index.js

@@ -1,38 +1,5 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// src/index.ts
-var index_exports = {};
-__export(index_exports, {
-  DEFAULT_NOTIFICATION_CHANNEL: () => DEFAULT_NOTIFICATION_CHANNEL,
-  NotificationHost: () => NotificationHost,
-  NotifierController: () => NotifierController,
-  NotifierProvider: () => NotifierProvider,
-  notifierController: () => notifierController,
-  ui: () => ui,
-  useNotifierController: () => useNotifierController,
-  useResponsiveMutation: () => useResponsiveMutation
-});
-module.exports = __toCommonJS(index_exports);
-
 // src/util/responsive-query/ui-result.ts
-var import_uuid = require("uuid");
+import { v4 as uuid } from "uuid";
 var ui = {
   success: (value, ...effects) => ({
     ok: true,
@@ -46,7 +13,7 @@ var ui = {
       {
         type: "notify",
         notification: {
-          id: (0, import_uuid.v4)(),
+          id: uuid(),
           title: "Error",
           content: error,
           variant: "error"
@@ -58,7 +25,7 @@ var ui = {
 };
 
 // src/util/responsive-query/use-responsive-mutation.ts
-var import_react_query = require("@tanstack/react-query");
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 // src/feature/notifier/entity/notification-bus.ts
 var NotificationBus = class {
@@ -135,30 +102,30 @@ var subscribe = new SubscribeUseCase(bus);
 var notifierController = new NotifierController(sendNotification, subscribe);
 
 // src/feature/notifier/infra/web/react/NotificationHost.tsx
-var import_react2 = require("react");
-var import_react_toastify2 = require("react-toastify");
-var import_lucide_react = require("lucide-react");
+import { useEffect, useMemo as useMemo2 } from "react";
+import { ToastContainer, toast } from "react-toastify";
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from "lucide-react";
 
 // src/feature/notifier/entity/notification.ts
 var DEFAULT_NOTIFICATION_CHANNEL = "app.notifications";
 
 // src/feature/notifier/infra/web/react/NotifierProvider.tsx
-var import_react = require("react");
-var import_jsx_runtime = require("react/jsx-runtime");
-var NotifierContext = (0, import_react.createContext)(null);
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var NotifierContext = createContext(null);
 var NotifierProvider = ({ children }) => {
-  const controller = (0, import_react.useMemo)(() => notifierController, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NotifierContext.Provider, { value: { controller }, children });
+  const controller = useMemo(() => notifierController, []);
+  return /* @__PURE__ */ jsx(NotifierContext.Provider, { value: { controller }, children });
 };
 function useNotifierController() {
-  const ctx = (0, import_react.useContext)(NotifierContext);
+  const ctx = useContext(NotifierContext);
   if (!ctx) throw new Error("useNotifierController must be used within <NotifierProvider>");
   return ctx.controller;
 }
 
 // src/feature/notifier/infra/web/react/CustomToastTransition.tsx
-var import_react_toastify = require("react-toastify");
-var SlideUp = (0, import_react_toastify.cssTransition)({
+import { cssTransition } from "react-toastify";
+var SlideUp = cssTransition({
   enter: "slideIn",
   exit: "slideOut",
   collapseDuration: 300,
@@ -167,10 +134,10 @@ var SlideUp = (0, import_react_toastify.cssTransition)({
 });
 
 // src/feature/notifier/infra/web/react/NotificationHost.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
   const controller = useNotifierController();
-  (0, import_react2.useEffect)(() => {
+  useEffect(() => {
     let unsub;
     let disposed = false;
     const listener = {
@@ -192,14 +159,14 @@ var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
       if (unsub) unsub();
     };
   }, [channel, controller]);
-  const theme = (0, import_react2.useMemo)(() => {
+  const theme = useMemo2(() => {
     if (!isDark) {
       return "light";
     }
     return isDark() ? "dark" : "light";
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_react_toastify2.ToastContainer,
+  return /* @__PURE__ */ jsx2(
+    ToastContainer,
     {
       position: "bottom-right",
       transition: SlideUp,
@@ -216,14 +183,14 @@ var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
 };
 var DEFAULT_NOTIFICATION_VARIANT = "info";
 var TOAST_ICON_BY_VARIANT = {
-  success: { Icon: import_lucide_react.CheckCircleIcon, color: "var(--success)" },
-  warning: { Icon: import_lucide_react.AlertTriangleIcon, color: "var(--warning)" },
-  error: { Icon: import_lucide_react.XCircleIcon, color: "var(--danger)" },
-  info: { Icon: import_lucide_react.InfoIcon, color: "var(--accent)" }
+  success: { Icon: CheckCircleIcon, color: "var(--success)" },
+  warning: { Icon: AlertTriangleIcon, color: "var(--warning)" },
+  error: { Icon: XCircleIcon, color: "var(--danger)" },
+  info: { Icon: InfoIcon, color: "var(--accent)" }
 };
 function renderToast(notification) {
   const variant = notification.variant ?? DEFAULT_NOTIFICATION_VARIANT;
-  (0, import_react_toastify2.toast)(/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(ToastContent, { notification }), {
+  toast(/* @__PURE__ */ jsx2(ToastContent, { notification }), {
     type: variant,
     toastId: notification.id,
     icon: false
@@ -240,12 +207,12 @@ var ToastContent = ({ notification }) => {
     } catch (error) {
       console.error("Notification action failed", error);
     } finally {
-      import_react_toastify2.toast.dismiss(notification.id);
+      toast.dismiss(notification.id);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "toast-content flex w-full flex-col gap-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+  return /* @__PURE__ */ jsxs("div", { className: "toast-content flex w-full flex-col gap-2", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx2(
         Icon,
         {
           className: "h-4 w-4 shrink-0",
@@ -253,11 +220,11 @@ var ToastContent = ({ notification }) => {
           "aria-hidden": "true"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "font-semibold", children: title })
+      /* @__PURE__ */ jsx2("span", { className: "font-semibold", children: title })
     ] }),
-    (content || action) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "flex w-full items-start gap-3", children: [
-      content && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1 text-sm text-muted-foreground", children: content }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    (content || action) && /* @__PURE__ */ jsxs("div", { className: "flex w-full items-start gap-3", children: [
+      content && /* @__PURE__ */ jsx2("span", { className: "flex-1 text-sm text-muted-foreground", children: content }),
+      action && /* @__PURE__ */ jsx2(
         "button",
         {
           type: "button",
@@ -273,8 +240,8 @@ var ToastContent = ({ notification }) => {
 // src/util/responsive-query/use-responsive-mutation.ts
 function useResponsiveMutation(responsiveMutation) {
   const { mutationFn, optimistic, onSuccess } = responsiveMutation;
-  const qc = (0, import_react_query.useQueryClient)();
-  return (0, import_react_query.useMutation)({
+  const qc = useQueryClient();
+  return useMutation({
     mutationFn: async (args) => {
       const res = await mutationFn(args);
       if (!res.ok) throw res;
@@ -311,8 +278,7 @@ var executeEffects = (effects, ctx) => {
     }
   });
 };
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
+export {
   DEFAULT_NOTIFICATION_CHANNEL,
   NotificationHost,
   NotifierController,
@@ -321,4 +287,4 @@ var executeEffects = (effects, ctx) => {
   ui,
   useNotifierController,
   useResponsiveMutation
-});
+};

package/package.json

@@ -1,9 +1,12 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.0.3",
-  "main": "dist/index.js",
-  "module": "dist/index.mjs",
+  "version": "0.0.5",
+  "type": "module",
+  "main": "dist/index.mjs",
   "types": "dist/index.d.ts",
+  "exports": {
+    ".": "./dist/index.mjs"
+  },
   "files": [
     "dist"
   ],
@@ -24,7 +27,7 @@
     "@types/react": "^19.2.7"
   },
   "scripts": {
-    "build": "tsup src/index.ts --dts --format cjs,esm",
+    "build": "tsup src/index.ts --dts --format esm",
     "test": "vitest"
   }
 }