@hexdspace/react 0.0.3

package/dist/index.css

@@ -0,0 +1,79 @@
+/* src/feature/notifier/infra/web/react/notification-host.css */
+@layer base {
+  .custom-toast-container {
+    --toastify-color-light: var(--surface-3);
+    --toastify-text-color-light: var(--text-1);
+    --toastify-color-progress-light: color-mix(in oklab, var(--accent-high), transparent 30%);
+    --toastify-color-dark: var(--surface-1);
+    --toastify-text-color-dark: var(--text-1);
+    --toastify-color-progress-dark: color-mix(in oklab, var(--accent-high), transparent 30%);
+    --toastify-color-progress-info: color-mix(in oklab, var(--accent), transparent 30%);
+    --toastify-color-progress-success: color-mix(in oklab, var(--success), transparent 30%);
+    --toastify-color-progress-warning: color-mix(in oklab, var(--warning), transparent 30%);
+    --toastify-color-progress-error: color-mix(in oklab, var(--danger), transparent 30%);
+    --toastify-toast-width: min(24rem, calc(100vw - 2rem));
+  }
+}
+@supports (color-mix(in oklab, white, transparent)) {
+  @layer base {
+    .custom-toast-container {
+    }
+  }
+}
+@layer components {
+  .toast-content {
+    padding: 0.5rem 0.75rem 1rem 0.5rem;
+  }
+  .toast-action {
+    align-self: flex-start;
+    padding: 0.35rem 0.75rem;
+    border-radius: var(--shape-radius-btn);
+    background: color-mix(in oklab, var(--secondary-3), transparent 30%);
+    color: var(--color-contrast-inverted);
+    font: inherit;
+    font-weight: 600;
+    cursor: pointer;
+    transition:
+      background-color 0.2s ease,
+      color 0.2s ease,
+      transform 0.2s ease;
+  }
+  .toast-action:hover {
+    background: var(--secondary-3);
+    color: var(--contrast-inverted);
+  }
+  .toast-action:focus-visible {
+    outline: 2px solid var(--focus);
+    outline-offset: 2px;
+    transform: translateY(-1px);
+  }
+  .toast-action:active {
+    transform: translateY(0);
+  }
+}
+@keyframes slideIn {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+@keyframes slideOut {
+  from {
+    transform: translateY(0);
+    opacity: 1;
+  }
+  to {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+}
+.slideIn {
+  animation: slideIn 0.35s forwards;
+}
+.slideOut {
+  animation: slideOut 0.25s forwards;
+}

package/dist/index.d.mts

@@ -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.d.ts

@@ -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

@@ -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.mjs

@@ -0,0 +1,290 @@
+// src/util/responsive-query/ui-result.ts
+import { v4 as uuid } from "uuid";
+var ui = {
+  success: (value, ...effects) => ({
+    ok: true,
+    value,
+    effects
+  }),
+  failure: (error, ...extraEffects) => ({
+    ok: false,
+    error,
+    effects: [
+      {
+        type: "notify",
+        notification: {
+          id: uuid(),
+          title: "Error",
+          content: error,
+          variant: "error"
+        }
+      },
+      ...extraEffects
+    ]
+  })
+};
+
+// src/util/responsive-query/use-responsive-mutation.ts
+import { useMutation, useQueryClient } from "@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
+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
+import { createContext, useContext, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var NotifierContext = createContext(null);
+var NotifierProvider = ({ children }) => {
+  const controller = useMemo(() => notifierController, []);
+  return /* @__PURE__ */ jsx(NotifierContext.Provider, { value: { controller }, children });
+};
+function useNotifierController() {
+  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
+import { cssTransition } from "react-toastify";
+var SlideUp = cssTransition({
+  enter: "slideIn",
+  exit: "slideOut",
+  collapseDuration: 300,
+  appendPosition: false,
+  collapse: true
+});
+
+// src/feature/notifier/infra/web/react/NotificationHost.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var NotificationHost = ({ channel = DEFAULT_NOTIFICATION_CHANNEL, isDark }) => {
+  const controller = useNotifierController();
+  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 = useMemo2(() => {
+    if (!isDark) {
+      return "light";
+    }
+    return isDark() ? "dark" : "light";
+  }, []);
+  return /* @__PURE__ */ jsx2(
+    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: 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;
+  toast(/* @__PURE__ */ jsx2(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 {
+      toast.dismiss(notification.id);
+    }
+  };
+  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",
+          style: { color },
+          "aria-hidden": "true"
+        }
+      ),
+      /* @__PURE__ */ jsx2("span", { className: "font-semibold", children: title })
+    ] }),
+    (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",
+          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 = useQueryClient();
+  return 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);
+    }
+  });
+};
+export {
+  DEFAULT_NOTIFICATION_CHANNEL,
+  NotificationHost,
+  NotifierController,
+  NotifierProvider,
+  notifierController,
+  ui,
+  useNotifierController,
+  useResponsiveMutation
+};

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@hexdspace/react",
+  "version": "0.0.3",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "author": "piotr.jasinski990@gmail.com",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-query": "^5.90.11",
+    "lucide-react": "^0.555.0",
+    "react": "^19.2.0",
+    "react-toastify": "^11.0.5",
+    "uuid": "^13.0.0",
+    "@hexdspace/util": "0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --dts --format cjs,esm",
+    "test": "vitest"
+  }
+}