@hexdspace/react 0.1.9 → 0.1.11

package/dist/css/component.css

@@ -81,20 +81,6 @@
 }
 
 @layer components {
-    .card {
-        background: var(--surface-2);
-        border: 1px solid color-mix(in oklab, var(--border), transparent 80%);
-        border-radius: var(--radius-card);
-        box-shadow: var(--shadow-elevated);
-    }
-
-    .popover {
-        background: var(--surface-3);
-        border: 1px solid color-mix(in oklab, var(--border), transparent 40%);
-        border-radius: var(--radius-card);
-        box-shadow: var(--shadow-popover);
-    }
-
     .shell {
         background: var(--surface-1);
         border-radius: var(--radius-shell);
@@ -107,10 +93,11 @@
         box-shadow: var(--shadow-elevated);
     }
 
-    .inset {
-        background: var(--surface-1);
+    .card {
+        background: var(--surface-2);
+        border: 1px solid color-mix(in oklab, var(--border), transparent 80%);
         border-radius: var(--radius-card);
-        box-shadow: inset 0 1px 0 color-mix(in oklab, var(--border), transparent 60%);
+        box-shadow: var(--shadow-elevated);
     }
 
     .chip {
@@ -156,10 +143,58 @@
         }
     }
 
-    .brand-gradient {
-        background: linear-gradient(90deg, var(--brand-strong) 0%, var(--brand) 30%);
-        -webkit-background-clip: text;
-        -webkit-text-fill-color: transparent;
+    @keyframes dialog-overlay-in {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes dialog-overlay-out {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes dialog-fade-in {
+        from {
+            opacity: 0;
+        }
+        to {
+            opacity: 1;
+        }
+    }
+
+    @keyframes dialog-fade-out {
+        from {
+            opacity: 1;
+        }
+        to {
+            opacity: 0;
+        }
+    }
+
+    @keyframes dialog-surface-in {
+        from {
+            transform: translateY(0.75rem);
+        }
+        to {
+            transform: translateY(0);
+        }
+    }
+
+    @keyframes dialog-surface-out {
+        from {
+            transform: translateY(0);
+        }
+        to {
+            transform: translateY(0.75rem);
+        }
     }
 
     :root .prose code {

package/dist/index.d.ts

@@ -155,8 +155,8 @@ type UIFail = ResultError<string> & {
 };
 type UIResult<T> = UIOk<T> | UIFail;
 declare const ui: {
-    success: <T>(value: T, ...effects: Instruction[]) => UIResult<T>;
-    failure: (error: string, ...effects: Instruction[]) => UIResult<never>;
+    success: <T>(value: T, ...effects: Instruction[]) => UIOk<T>;
+    failure: (error: string, ...effects: Instruction[]) => UIFail;
 };
 
 type OptimisticSnapshot = {
@@ -409,6 +409,163 @@ interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>
 }
 declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>;
 
+type ConfirmPayload = {
+    title: string;
+    message?: string;
+    confirmText?: string;
+    cancelText?: string;
+    variant?: React__default.ComponentProps<typeof Button>['variant'];
+    danger?: boolean;
+    children?: React__default.ReactNode;
+};
+interface ConfirmDialogProps {
+    id: string;
+    payload?: ConfirmPayload;
+    onResolve?: (result?: unknown) => void;
+}
+declare const ConfirmDialog: React__default.FC<ConfirmDialogProps>;
+
+interface CustomDialogPayload {
+    children?: React__default.ReactNode;
+}
+interface CustomDialogProps {
+    id: string;
+    payload?: CustomDialogPayload;
+    onResolve?: (result?: unknown) => void;
+}
+declare const CustomDialog: React__default.FC<CustomDialogProps>;
+
+interface InfoPayload {
+    title: string;
+    children?: React__default.ReactNode;
+    confirmText?: string;
+}
+interface InfoDialogProps {
+    id: string;
+    payload?: InfoPayload;
+    onResolve?: (result?: unknown) => void;
+}
+declare const InfoDialog: React__default.FC<InfoDialogProps>;
+
+declare function registerDefaultDialogs(): void;
+type DefaultDialogPayloads = {
+    custom: CustomDialogPayload;
+    confirm: ConfirmPayload;
+    info: InfoPayload;
+};
+type DefaultDialogTemplateKey = keyof DefaultDialogPayloads;
+declare const DefaultDialogTemplateKeys: ["custom", "confirm", "info"];
+
+type DialogTemplate<TPayload = unknown> = React__default.ComponentType<{
+    id: string;
+    payload?: TPayload;
+    onResolve?: (result?: unknown) => void;
+}>;
+declare function registerDialogTemplate<TPayload>(key: string, component: DialogTemplate<TPayload>): void;
+declare function unregisterDialogTemplate(key: string): void;
+declare function getDialogTemplate<K extends DefaultDialogTemplateKey>(key: K): DialogTemplate<DefaultDialogPayloads[K]> | undefined;
+declare function getDialogTemplate<TPayload = unknown>(key: string): DialogTemplate<TPayload> | undefined;
+
+declare const DialogHost: React.FC;
+
+interface DialogOptions {
+    modal: boolean;
+    dismissible: boolean;
+    zIndex: number;
+}
+interface DialogInstance {
+    id: string;
+    templateKey: string;
+    payload: unknown;
+    options: DialogOptions;
+}
+
+type OpenDialogCommand = {
+    templateKey: string;
+    payload?: unknown;
+    options?: DialogOptions;
+};
+interface OpenDialog {
+    execute<T = unknown>(cmd: OpenDialogCommand): Promise<T | undefined>;
+}
+
+declare function useDialog(): {
+    open: (cmd: Parameters<(<T>(cmd: OpenDialogCommand) => Promise<T | undefined>)>[0]) => Promise<unknown>;
+    resolve: (id: string, result?: unknown) => void;
+    dismiss: (id: string) => void;
+    closeTop: () => void;
+};
+
+interface CloseTopDialog {
+    execute(): void;
+}
+
+interface DismissDialog {
+    execute(id: string): void;
+}
+
+interface ResolveDialog {
+    execute(id: string, result?: unknown): void;
+}
+
+type DialogState = {
+    stack: DialogInstance[];
+};
+
+interface DialogRegistry {
+    getState(): DialogState;
+    subscribe(cb: (s: DialogState) => void): () => void;
+    push(instance: DialogInstance): void;
+    remove(id: string): void;
+    findById(id: string): DialogInstance | undefined;
+    createDeferred(id: string): {
+        promise: Promise<unknown>;
+        resolve: (v?: unknown) => void;
+        reject: (r?: unknown) => void;
+    };
+    takeDeferred(id: string): {
+        resolve: (v?: unknown) => void;
+        reject: (r?: unknown) => void;
+    } | undefined;
+    getTop(): DialogInstance | undefined;
+}
+
+declare class DialogController {
+    private readonly registry;
+    private readonly open;
+    private readonly resolve;
+    private readonly dismiss;
+    private readonly closeTop;
+    constructor(registry: DialogRegistry, open: OpenDialog, resolve: ResolveDialog, dismiss: DismissDialog, closeTop: CloseTopDialog);
+    handleOpen<T>(cmd: OpenDialogCommand): Promise<T | undefined>;
+    handleResolve(id: string, result?: unknown): void;
+    handleDismiss(id: string): void;
+    handleCloseTop(): void;
+    handleGetRegistry(): DialogRegistry;
+}
+declare const dialogController: DialogController;
+
+declare const dialogPanelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare function DialogContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+interface DialogProps<TPayload = unknown> extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>, VariantProps<typeof dialogPanelVariants> {
+    id: string;
+    template: DialogTemplate<TPayload>;
+    payload: TPayload;
+    trigger?: React.ReactElement;
+    modal?: boolean;
+    dismissible?: boolean;
+    zIndex?: number;
+    maxWidthPx?: number;
+    onDismiss?: () => void;
+    onResolve?: (result?: unknown) => void;
+    onOpenChange?: (open: boolean) => void;
+    showClose?: boolean;
+    closeLabel?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+}
+declare function Dialog<TPayload>({ id, template, payload, trigger, modal, dismissible, zIndex, maxWidthPx, onDismiss, onResolve, onOpenChange, showClose, closeLabel, open, defaultOpen, className, style, ...props }: DialogProps<TPayload>): react_jsx_runtime.JSX.Element;
+
 type ControlLikeProps = {
     id?: string;
     disabled?: boolean;
@@ -468,4 +625,15 @@ interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement
 }
 declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
 
-export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type ErrorResponse, Field, type FieldProps, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, Input, type InputProps, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, Skeleton, type SkeletonProps, Textarea, type TextareaProps, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, httpClient as fetchHttpClient, notifierController, resolveToastTheme, ui, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useResponsiveMutation };
+type Props = {
+    children: React.ReactElement;
+    content: React.ReactNode;
+    delayMs?: number;
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    maxWidthPx?: number;
+    preserveWhitespace?: boolean;
+};
+declare function Tooltip({ children, content, delayMs, side, sideOffset, maxWidthPx, preserveWhitespace, }: Props): react_jsx_runtime.JSX.Element;
+
+export { AuthController, AuthControllerCtx, type AuthControllerDeps, AuthControllerProvider, AuthDispatchCtx, AuthProvider, type AuthState, AuthStateCtx, Button, type ButtonProps, type CacheInstruction, ConfirmDialog, type ConfirmDialogProps, type ConfirmPayload, CustomDialog, type CustomDialogPayload, type CustomDialogProps, type CustomInstruction, DEFAULT_NOTIFICATION_CHANNEL, type DefaultDialogPayloads, type DefaultDialogTemplateKey, DefaultDialogTemplateKeys, Dialog, DialogContent, DialogController, DialogHost, type DialogInstance, type DialogOptions, type DialogProps, type DialogTemplate, type ErrorResponse, Field, type FieldProps, type GenericResponse, type HttpClient, HttpError, type HttpMethod, type HttpResponse, InfoDialog, type InfoDialogProps, type InfoPayload, Input, type InputProps, type Instruction, type InstructionContext, MockAuthHttpClient, MockHttpClient, type MutationFn, type Notification, type NotificationAction, NotificationHost, type NotificationInstruction, type NotificationVariant, NotifierController, type OnSuccessFn, type OptimisticSnapshot, type OptimisticUpdateFn, RedirectIfAuthed, type RedirectIfAuthedProps, type RequestConfig, RequireAuth, type RequireAuthProps, type ResolvedToastTheme, type ResponsiveMutation, Skeleton, type SkeletonProps, Textarea, type TextareaProps, type ToastActionTheme, type ToastTheme, type ToastTransition, type ToastifyCSSVars, Tooltip, type UIFail, type UIOk, type UIResult, type User, authController, controllerFactory, createAuthController, dialogController, httpClient as fetchHttpClient, getDialogTemplate, notifierController, registerDefaultDialogs, registerDialogTemplate, resolveToastTheme, ui, unregisterDialogTemplate, useAuth, useAuthActions, useAuthController, useAuthDispatch, useAuthedUser, useDialog, useResponsiveMutation };

package/dist/index.js

@@ -1026,7 +1026,7 @@ var MockAuthHttpClient = class extends MockHttpClient {
   }
   registerAuthRoutes() {
     this.register("GET", "/auth/me", async () => {
-      await new Promise((resolve) => setTimeout(resolve, this.delayMs));
+      await new Promise((resolve2) => setTimeout(resolve2, this.delayMs));
       if (this.fixtures.meError) {
         throw this.fixtures.meError;
       }
@@ -1036,7 +1036,7 @@ var MockAuthHttpClient = class extends MockHttpClient {
       throw unauthorized();
     });
     this.register("POST", "/auth/login", async (payload) => {
-      await new Promise((resolve) => setTimeout(resolve, this.delayMs));
+      await new Promise((resolve2) => setTimeout(resolve2, this.delayMs));
       if (this.fixtures.loginError) {
         throw this.fixtures.loginError;
       }
@@ -1048,14 +1048,14 @@ var MockAuthHttpClient = class extends MockHttpClient {
       return httpResponse({ message: "Logged in" });
     });
     this.register("POST", "/auth/register", async () => {
-      await new Promise((resolve) => setTimeout(resolve, this.delayMs));
+      await new Promise((resolve2) => setTimeout(resolve2, this.delayMs));
       if (this.fixtures.registerError) {
         throw this.fixtures.registerError;
       }
       return httpResponse({ message: "Registered" });
     });
     this.register("POST", "/auth/logout", async () => {
-      await new Promise((resolve) => setTimeout(resolve, this.delayMs));
+      await new Promise((resolve2) => setTimeout(resolve2, this.delayMs));
       if (this.fixtures.logoutError) {
         throw this.fixtures.logoutError;
       }
@@ -1065,6 +1065,9 @@ var MockAuthHttpClient = class extends MockHttpClient {
   }
 };
 
+// src/ui/components/dialog/dialog-variant/ConfirmDialog.tsx
+import { Dialog as DialogPrimitive2 } from "radix-ui";
+
 // src/ui/components/Button.tsx
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
@@ -1537,14 +1540,419 @@ var Button = React.forwardRef(
 );
 Button.displayName = "Button";
 
-// src/ui/components/Field.tsx
+// src/ui/components/dialog/Dialog.tsx
+import { cva as cva2 } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+import * as React2 from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var dialogPanelVariants = cva2(
+  cn(
+    "fixed left-1/2 top-1/2",
+    "-translate-x-1/2 -translate-y-1/2",
+    "w-[min(92vw,var(--dialog-width))]",
+    "pointer-events-auto",
+    "data-[state=open]:animate-[dialog-fade-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
+    "data-[state=closed]:animate-[dialog-fade-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+    "motion-reduce:animate-none",
+    "data-[state=closed]:pointer-events-none"
+  )
+);
+var dialogOverlayClass = cn(
+  "fixed inset-0 bg-[color:var(--overlay)]",
+  "data-[state=open]:animate-[dialog-overlay-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
+  "data-[state=closed]:animate-[dialog-overlay-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+  "motion-reduce:animate-none",
+  "data-[state=closed]:pointer-events-none"
+);
+function DialogContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx7("div", { className: cn("DialogContent p-6", className), ...props });
+}
+function AutoHeight({ children }) {
+  const ref = React2.useRef(null);
+  const [height, setHeight] = React2.useState("auto");
+  React2.useLayoutEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    const dpr = Math.max(1, Math.round(window.devicePixelRatio || 1));
+    let raf = 0;
+    const ro = new ResizeObserver((entries) => {
+      const entry = entries[0];
+      const raw = entry.borderBoxSize?.[0]?.blockSize ?? entry.contentRect.height;
+      const snapped = Math.round(raw * dpr) / dpr;
+      raf = requestAnimationFrame(() => {
+        setHeight((prev) => {
+          const prevNum = prev === "auto" ? -1 : prev;
+          if (prevNum < 0 || Math.abs(snapped - prevNum) >= 2) return snapped;
+          return prev;
+        });
+      });
+    });
+    ro.observe(el);
+    return () => {
+      ro.disconnect();
+      cancelAnimationFrame(raf);
+    };
+  }, []);
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: "transition-[height] duration-(--motion-med) ease",
+      style: { height: height === "auto" ? "auto" : height, overflow: "hidden", willChange: "height" },
+      children: /* @__PURE__ */ jsx7("div", { ref, style: { boxSizing: "border-box" }, children })
+    }
+  );
+}
+function Dialog({
+  id,
+  template,
+  payload,
+  trigger,
+  modal = true,
+  dismissible = true,
+  zIndex = 0,
+  maxWidthPx = 800,
+  onDismiss,
+  onResolve,
+  onOpenChange,
+  showClose = true,
+  closeLabel = "Close dialog",
+  open: open2,
+  defaultOpen,
+  className,
+  style,
+  ...props
+}) {
+  const fallbackId = React2.useId();
+  const resolvedRef = React2.useRef(false);
+  const Template = template;
+  const handleOpenChange = (nextOpen) => {
+    onOpenChange?.(nextOpen);
+    if (nextOpen) {
+      resolvedRef.current = false;
+      return;
+    }
+    if (resolvedRef.current) {
+      resolvedRef.current = false;
+      return;
+    }
+    onDismiss?.();
+  };
+  const handleResolve = React2.useCallback(
+    (result) => {
+      resolvedRef.current = true;
+      onResolve?.(result);
+    },
+    [onResolve]
+  );
+  return /* @__PURE__ */ jsxs3(DialogPrimitive.Root, { open: open2, defaultOpen, onOpenChange: handleOpenChange, modal, children: [
+    trigger ? /* @__PURE__ */ jsx7(DialogPrimitive.Trigger, { asChild: true, children: trigger }) : null,
+    /* @__PURE__ */ jsxs3(DialogPrimitive.Portal, { children: [
+      modal ? /* @__PURE__ */ jsx7(
+        DialogPrimitive.Overlay,
+        {
+          className: cn("DialogOverlay", dialogOverlayClass),
+          style: { zIndex: zIndex - 1 }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx7(
+        DialogPrimitive.Content,
+        {
+          className: cn(
+            "DialogContent",
+            dialogPanelVariants(),
+            "data-[state=open]:[&_.dialog-surface]:animate-[dialog-surface-in_var(--motion-med)_cubic-bezier(0.16,1,0.3,1)]",
+            "data-[state=closed]:[&_.dialog-surface]:animate-[dialog-surface-out_var(--motion-fast)_cubic-bezier(0.4,0,1,1)]",
+            "motion-reduce:[&_.dialog-surface]:animate-none",
+            className
+          ),
+          style: {
+            ...style,
+            zIndex,
+            "--dialog-width": `${maxWidthPx}px`
+          },
+          onInteractOutside: (event) => {
+            if (!dismissible) event.preventDefault();
+          },
+          onEscapeKeyDown: (event) => {
+            if (!dismissible) event.preventDefault();
+          },
+          ...props,
+          children: /* @__PURE__ */ jsxs3("div", { className: "dialog-surface relative shell overflow-hidden", children: [
+            showClose ? /* @__PURE__ */ jsx7(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx7(
+              Button,
+              {
+                variant: "ghost",
+                size: "icon",
+                leftIcon: /* @__PURE__ */ jsx7(XIcon, { className: "w-5 h-5" }),
+                className: "absolute right-2 top-2 z-10 rounded-full",
+                "aria-label": closeLabel
+              }
+            ) }) : null,
+            /* @__PURE__ */ jsx7(AutoHeight, { children: /* @__PURE__ */ jsx7(Template, { id: id ?? fallbackId, payload, onResolve: handleResolve }) })
+          ] })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/ui/components/dialog/dialog-variant/ConfirmDialog.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var ConfirmDialog = (props) => {
+  const p = props.payload ?? { title: "Are you sure?" };
+  const confirmVariant = p.variant ?? (p.danger ? "danger" : "secondary");
+  return /* @__PURE__ */ jsxs4(DialogContent, { children: [
+    /* @__PURE__ */ jsx8("h3", { className: "text-lg font-semibold", children: p.title }),
+    p.children && p.children,
+    p.message ? /* @__PURE__ */ jsx8("p", { className: "mt-2 text-sm opacity-80", children: p.message }) : null,
+    /* @__PURE__ */ jsxs4("div", { className: "mt-5 flex items-center justify-end gap-4", children: [
+      /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: "secondary", children: p.cancelText ?? "Cancel" }) }),
+      /* @__PURE__ */ jsx8(DialogPrimitive2.Close, { asChild: true, children: /* @__PURE__ */ jsx8(Button, { variant: confirmVariant, onClick: () => props.onResolve?.({ confirmed: true }), children: p.confirmText ?? "Confirm" }) })
+    ] })
+  ] });
+};
+
+// src/ui/components/dialog/dialog-variant/CustomDialog.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+var CustomDialog = (props) => {
+  const p = props.payload ?? { children: /* @__PURE__ */ jsx9("div", { children: "Empty custom dialog" }) };
+  return /* @__PURE__ */ jsx9(DialogContent, { children: p.children });
+};
+
+// src/ui/components/dialog/dialog-variant/InfoDialog.tsx
+import { Dialog as DialogPrimitive3 } from "radix-ui";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+var InfoDialog = (props) => {
+  const p = props.payload ?? { title: "Information" };
+  return /* @__PURE__ */ jsxs5(DialogContent, { children: [
+    /* @__PURE__ */ jsx10("h3", { className: "text-lg font-semibold", children: p.title }),
+    p.children,
+    /* @__PURE__ */ jsx10("div", { className: "mt-5 flex items-center justify-end gap-4", children: /* @__PURE__ */ jsx10(DialogPrimitive3.Close, { asChild: true, children: /* @__PURE__ */ jsx10(Button, { variant: "secondary", children: p.confirmText || "Dismiss" }) }) })
+  ] });
+};
+
+// src/feature/dialog/infra/web/react/DialogTemplate.tsx
+var templates = /* @__PURE__ */ new Map();
+function registerDialogTemplate(key, component) {
+  templates.set(key, component);
+}
+function unregisterDialogTemplate(key) {
+  templates.delete(key);
+}
+function getDialogTemplate(key) {
+  return templates.get(key);
+}
+
+// src/feature/dialog/infra/web/react/bootstrap-dialogs.ts
+function registerDefaultDialogs() {
+  registerDialogTemplate("custom", CustomDialog);
+  registerDialogTemplate("confirm", ConfirmDialog);
+  registerDialogTemplate("info", InfoDialog);
+}
+var DefaultDialogTemplateKeys = ["custom", "confirm", "info"];
+
+// src/feature/dialog/infra/web/react/DialogHost.tsx
 import * as React3 from "react";
 
+// src/feature/dialog/application/use-case/close-top-dialog-use-case.ts
+var CloseTopUseCase = class {
+  constructor(reg) {
+    this.reg = reg;
+  }
+  execute() {
+    const top = this.reg.getTop();
+    if (!top) return;
+    this.reg.takeDeferred(top.id)?.resolve(void 0);
+    this.reg.remove(top.id);
+  }
+};
+
+// src/feature/dialog/application/use-case/dismiss-dialog-use-case.ts
+var DismissDialogUseCase = class {
+  constructor(reg) {
+    this.reg = reg;
+  }
+  execute(id) {
+    this.reg.takeDeferred(id)?.resolve(void 0);
+    this.reg.remove(id);
+  }
+};
+
+// src/feature/dialog/application/use-case/open-dialog-use-case.ts
+import { v4 as uuid } from "uuid";
+var OpenDialogUseCase = class {
+  constructor(reg) {
+    this.reg = reg;
+  }
+  async execute(cmd) {
+    const id = uuid();
+    const options = cmd.options ?? getDefaultOptions();
+    if (!options.zIndex) {
+      options.zIndex = 2e3;
+    }
+    this.reg.push({
+      id,
+      templateKey: cmd.templateKey,
+      payload: cmd.payload ?? {},
+      options
+    });
+    const { promise } = this.reg.createDeferred(id);
+    const result = await promise;
+    return result;
+  }
+};
+function getDefaultOptions() {
+  return {
+    modal: true,
+    dismissible: true,
+    zIndex: 2500
+  };
+}
+
+// src/feature/dialog/application/use-case/resolve-dialog-use-case.ts
+var ResolveDialogUseCase = class {
+  constructor(reg) {
+    this.reg = reg;
+  }
+  execute(id, result) {
+    this.reg.takeDeferred(id)?.resolve(result);
+    this.reg.remove(id);
+  }
+};
+
+// src/feature/dialog/infra/provider/in-memory-dialog-registry.ts
+var InMemoryDialogRegistry = class {
+  state = { stack: [] };
+  subs = /* @__PURE__ */ new Set();
+  deferred = /* @__PURE__ */ new Map();
+  getState() {
+    return this.state;
+  }
+  subscribe(cb) {
+    this.subs.add(cb);
+    cb(this.state);
+    return () => this.subs.delete(cb);
+  }
+  emit() {
+    for (const cb of this.subs) cb(this.state);
+  }
+  push(instance) {
+    this.state = { stack: [...this.state.stack, instance] };
+    this.emit();
+  }
+  remove(id) {
+    this.state = { stack: this.state.stack.filter((d) => d.id !== id) };
+    this.emit();
+  }
+  findById(id) {
+    return this.state.stack.find((d) => d.id === id);
+  }
+  getTop() {
+    const s = this.state.stack;
+    return s.length ? s[s.length - 1] : void 0;
+  }
+  createDeferred(id) {
+    let resolve2;
+    let reject;
+    const promise = new Promise((res, rej) => {
+      resolve2 = res;
+      reject = rej;
+    });
+    this.deferred.set(id, { resolve: resolve2, reject });
+    return { promise, resolve: resolve2, reject };
+  }
+  takeDeferred(id) {
+    const d = this.deferred.get(id);
+    this.deferred.delete(id);
+    return d;
+  }
+};
+
+// src/feature/dialog/infra/controller/dialog-controller.ts
+var DialogController = class {
+  constructor(registry2, open2, resolve2, dismiss2, closeTop2) {
+    this.registry = registry2;
+    this.open = open2;
+    this.resolve = resolve2;
+    this.dismiss = dismiss2;
+    this.closeTop = closeTop2;
+  }
+  handleOpen(cmd) {
+    return this.open.execute(cmd);
+  }
+  handleResolve(id, result) {
+    return this.resolve.execute(id, result);
+  }
+  handleDismiss(id) {
+    return this.dismiss.execute(id);
+  }
+  handleCloseTop() {
+    return this.closeTop.execute();
+  }
+  handleGetRegistry() {
+    return this.registry;
+  }
+};
+var registry = new InMemoryDialogRegistry();
+var open = new OpenDialogUseCase(registry);
+var resolve = new ResolveDialogUseCase(registry);
+var dismiss = new DismissDialogUseCase(registry);
+var closeTop = new CloseTopUseCase(registry);
+var dialogController = new DialogController(registry, open, resolve, dismiss, closeTop);
+
+// src/feature/dialog/infra/web/react/DialogHost.tsx
+import { Fragment as Fragment2, jsx as jsx11 } from "react/jsx-runtime";
+var DialogHost = () => {
+  const [state, setState] = React3.useState(dialogController.handleGetRegistry().getState());
+  React3.useEffect(() => dialogController.handleGetRegistry().subscribe(setState), []);
+  return /* @__PURE__ */ jsx11(Fragment2, { children: state.stack.map((dialog, index) => {
+    const template = getDialogTemplate(dialog.templateKey);
+    if (!template) {
+      console.error(`Missing dialog template: ${dialog.templateKey}`);
+      return null;
+    }
+    return /* @__PURE__ */ jsx11(
+      Dialog,
+      {
+        id: dialog.id,
+        template,
+        payload: dialog.payload,
+        modal: dialog.options.modal,
+        dismissible: dialog.options.dismissible,
+        zIndex: dialog.options.zIndex + index,
+        defaultOpen: true,
+        onResolve: (result) => dialogController.handleResolve(dialog.id, result),
+        onDismiss: () => dialogController.handleDismiss(dialog.id)
+      },
+      dialog.id
+    );
+  }) });
+};
+
+// src/feature/dialog/infra/web/react/useDialog.tsx
+import { useMemo as useMemo3 } from "react";
+function useDialog() {
+  const c = dialogController;
+  return useMemo3(
+    () => ({
+      open: (cmd) => c.handleOpen(cmd),
+      resolve: (id, result) => c.handleResolve(id, result),
+      dismiss: (id) => c.handleDismiss(id),
+      closeTop: () => c.handleCloseTop()
+    }),
+    [c]
+  );
+}
+
+// src/ui/components/Field.tsx
+import * as React5 from "react";
+
 // src/ui/components/Label.tsx
-import * as React2 from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var Label = React2.forwardRef(
-  ({ className, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsx7(
+import * as React4 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Label = React4.forwardRef(
+  ({ className, htmlFor, children, ...props }, ref) => /* @__PURE__ */ jsx12(
     "label",
     {
       ref,
@@ -1558,9 +1966,9 @@ var Label = React2.forwardRef(
 Label.displayName = "Label";
 
 // src/ui/components/Field.tsx
-import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs6 } from "react/jsx-runtime";
 function Field({ label, hint, error, required, disabled, id, children, className, ...props }) {
-  const reactId = React3.useId();
+  const reactId = React5.useId();
   const controlId = id ?? `field-${reactId}`;
   const hintId = hint ? `${controlId}-hint` : void 0;
   const errorId = error ? `${controlId}-error` : void 0;
@@ -1570,31 +1978,31 @@ function Field({ label, hint, error, required, disabled, id, children, className
   const ariaDescribedBy = describedByParts.length ? describedByParts.join(" ") : void 0;
   const resolvedDisabled = disabled ?? children.props.disabled;
   const resolvedRequired = required ?? children.props.required;
-  const control = React3.cloneElement(children, {
+  const control = React5.cloneElement(children, {
     id: controlId,
     disabled: resolvedDisabled,
     required: resolvedRequired,
     invalid,
     "aria-describedby": ariaDescribedBy
   });
-  return /* @__PURE__ */ jsxs3("div", { className: cn("grid gap-1.5", className), ...props, children: [
-    label ? /* @__PURE__ */ jsx8("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxs3(Label, { htmlFor: controlId, children: [
+  return /* @__PURE__ */ jsxs6("div", { className: cn("grid gap-1.5", className), ...props, children: [
+    label ? /* @__PURE__ */ jsx13("div", { className: "flex items-center justify-between gap-3", children: /* @__PURE__ */ jsxs6(Label, { htmlFor: controlId, children: [
       label,
-      resolvedRequired ? /* @__PURE__ */ jsxs3("span", { "aria-hidden": "true", className: "text-(--muted)", children: [
+      resolvedRequired ? /* @__PURE__ */ jsxs6("span", { "aria-hidden": "true", className: "text-(--muted)", children: [
         " ",
         "*"
       ] }) : null
     ] }) }) : null,
     control,
-    error ? /* @__PURE__ */ jsx8("p", { id: errorId, className: "text-xs leading-5 text-(--danger-contrast)", role: "alert", children: error }) : null,
-    hint ? /* @__PURE__ */ jsx8("p", { id: hintId, className: "text-xs leading-5 text-(--muted)", children: hint }) : null
+    error ? /* @__PURE__ */ jsx13("p", { id: errorId, className: "text-xs leading-5 text-(--danger-contrast)", role: "alert", children: error }) : null,
+    hint ? /* @__PURE__ */ jsx13("p", { id: hintId, className: "text-xs leading-5 text-(--muted)", children: hint }) : null
   ] });
 }
 
 // src/ui/components/Input.tsx
-import { cva as cva2 } from "class-variance-authority";
-import * as React4 from "react";
-import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+import { cva as cva3 } from "class-variance-authority";
+import * as React6 from "react";
+import { jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
 var controlShellBase = cn(
   "relative inline-flex items-center gap-2",
   "rounded-[var(--radius-input)]",
@@ -1611,7 +2019,7 @@ var controlShellBase = cn(
   "data-[disabled]:border-[color:var(--disabled-border)]",
   "data-[disabled]:cursor-not-allowed"
 );
-var controlShellVariants = cva2(controlShellBase, {
+var controlShellVariants = cva3(controlShellBase, {
   variants: {
     variant: {
       surface: cn("bg-[color:var(--surface-2)]", "hover:bg-[color:var(--surface-hover)]"),
@@ -1649,7 +2057,7 @@ var slotBase = cn(
   "data-[disabled]:text-[color:var(--disabled-fg)]"
 );
 var slotReserve = "min-w-[var(--input-slot-size)]";
-var Input = React4.forwardRef(
+var Input = React6.forwardRef(
   ({
     variant,
     size,
@@ -1667,14 +2075,14 @@ var Input = React4.forwardRef(
     const isDisabled = Boolean(disabled);
     const showLeftSlot = Boolean(leftSlot || reserveLeftSlot);
     const showRightSlot = Boolean(rightSlot || reserveRightSlot);
-    return /* @__PURE__ */ jsxs4(
+    return /* @__PURE__ */ jsxs7(
       "div",
       {
         className: cn(controlShellVariants({ variant, size, fullWidth }), className),
         "data-invalid": invalid ? "" : void 0,
         "data-disabled": isDisabled ? "" : void 0,
         children: [
-          showLeftSlot ? /* @__PURE__ */ jsx9(
+          showLeftSlot ? /* @__PURE__ */ jsx14(
             "span",
             {
               className: cn(slotBase, reserveLeftSlot && slotReserve),
@@ -1682,7 +2090,7 @@ var Input = React4.forwardRef(
               children: leftSlot
             }
           ) : null,
-          /* @__PURE__ */ jsx9(
+          /* @__PURE__ */ jsx14(
             "input",
             {
               ref,
@@ -1692,7 +2100,7 @@ var Input = React4.forwardRef(
               ...props
             }
           ),
-          showRightSlot ? /* @__PURE__ */ jsx9(
+          showRightSlot ? /* @__PURE__ */ jsx14(
             "span",
             {
               className: cn(slotBase, reserveRightSlot && slotReserve),
@@ -1708,9 +2116,9 @@ var Input = React4.forwardRef(
 Input.displayName = "Input";
 
 // src/ui/components/Skeleton.tsx
-import { cva as cva3 } from "class-variance-authority";
-import * as React5 from "react";
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { cva as cva4 } from "class-variance-authority";
+import * as React7 from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
 var skeletonBase = cn(
   "relative isolate inline-flex overflow-hidden",
   "bg-[color:color-mix(in_oklab,var(--surface-2),var(--border)_25%)]",
@@ -1723,7 +2131,7 @@ var shimmerEffect = cn(
   "before:[background-size:200%_100%]",
   "before:animate-[skeleton-shimmer_1.6s_linear_infinite] motion-reduce:before:animate-none"
 );
-var skeletonVariants = cva3(skeletonBase, {
+var skeletonVariants = cva4(skeletonBase, {
   variants: {
     variant: {
       surface: "",
@@ -1764,10 +2172,10 @@ var skeletonVariants = cva3(skeletonBase, {
     preset: "none"
   }
 });
-var Skeleton = React5.forwardRef(
+var Skeleton = React7.forwardRef(
   ({ variant, size, radius, fullWidth, animation, preset, animate, className, ...props }, ref) => {
     const resolvedAnimation = animation ?? (animate === false ? "none" : animate ? "pulse" : void 0);
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx15(
       "div",
       {
         ref,
@@ -1790,9 +2198,9 @@ var Skeleton = React5.forwardRef(
 Skeleton.displayName = "Skeleton";
 
 // src/ui/components/Textarea.tsx
-import { cva as cva4 } from "class-variance-authority";
-import * as React6 from "react";
-import { jsx as jsx11 } from "react/jsx-runtime";
+import { cva as cva5 } from "class-variance-authority";
+import * as React8 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var controlShellBase2 = cn(
   "relative inline-flex w-full",
   "rounded-[var(--radius-input)]",
@@ -1809,7 +2217,7 @@ var controlShellBase2 = cn(
   "data-[disabled]:border-[color:var(--disabled-border)]",
   "data-[disabled]:cursor-not-allowed"
 );
-var textareaShellVariants = cva4(controlShellBase2, {
+var textareaShellVariants = cva5(controlShellBase2, {
   variants: {
     variant: {
       surface: cn("bg-[color:var(--surface-2)]", "hover:bg-[color:var(--surface-hover)]"),
@@ -1854,7 +2262,7 @@ function mergeRefs(...refs) {
     }
   };
 }
-var Textarea = React6.forwardRef(
+var Textarea = React8.forwardRef(
   ({
     variant,
     size,
@@ -1871,8 +2279,8 @@ var Textarea = React6.forwardRef(
     ...props
   }, ref) => {
     const isDisabled = Boolean(disabled);
-    const innerRef = React6.useRef(null);
-    const resize = React6.useCallback(() => {
+    const innerRef = React8.useRef(null);
+    const resize = React8.useCallback(() => {
       if (!autoResize) return;
       const el = innerRef.current;
       if (!el) return;
@@ -1884,16 +2292,16 @@ var Textarea = React6.forwardRef(
       resize();
       onInput?.(e);
     };
-    React6.useLayoutEffect(() => {
+    React8.useLayoutEffect(() => {
       resize();
     }, [resize, value]);
-    return /* @__PURE__ */ jsx11(
+    return /* @__PURE__ */ jsx16(
       "div",
       {
         className: cn(textareaShellVariants({ variant, size, fullWidth }), className),
         "data-invalid": invalid ? "" : void 0,
         "data-disabled": isDisabled ? "" : void 0,
-        children: /* @__PURE__ */ jsx11(
+        children: /* @__PURE__ */ jsx16(
           "textarea",
           {
             ref: mergeRefs(innerRef, ref),
@@ -1915,6 +2323,54 @@ var Textarea = React6.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
+
+// src/ui/components/Tooltip.tsx
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
+var tooltipContentBase = cn(
+  "panel shadow-none px-4 py-2.5 text-xs z-5000 select-none",
+  "origin-center will-change-[transform,opacity]",
+  "[--tooltip-x:0px] [--tooltip-y:4px]",
+  "data-[side=bottom]:[--tooltip-y:-4px]",
+  "data-[side=left]:[--tooltip-x:4px] data-[side=left]:[--tooltip-y:0px]",
+  "data-[side=right]:[--tooltip-x:-4px] data-[side=right]:[--tooltip-y:0px]",
+  "data-[state=delayed-open]:animate-[tooltip-in_140ms_ease-out]",
+  "data-[state=instant-open]:animate-[tooltip-in_140ms_ease-out]",
+  "data-[state=closed]:animate-[tooltip-out_120ms_ease-in]",
+  "motion-reduce:animate-none"
+);
+function Tooltip({
+  children,
+  content,
+  delayMs = 300,
+  side = "top",
+  sideOffset = 12,
+  maxWidthPx = 240,
+  preserveWhitespace = false
+}) {
+  return /* @__PURE__ */ jsx17(TooltipPrimitive.Provider, { delayDuration: delayMs, children: /* @__PURE__ */ jsxs8(TooltipPrimitive.Root, { children: [
+    /* @__PURE__ */ jsx17(TooltipPrimitive.Trigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx17(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsxs8(
+      TooltipPrimitive.Content,
+      {
+        side,
+        sideOffset,
+        className: tooltipContentBase,
+        style: {
+          width: "max-content",
+          maxWidth: `min(${maxWidthPx}px, 90vw)`,
+          whiteSpace: preserveWhitespace ? "pre-line" : "normal",
+          overflowWrap: "break-word",
+          hyphens: "auto"
+        },
+        children: [
+          content,
+          /* @__PURE__ */ jsx17(TooltipPrimitive.Arrow, { style: { fill: "var(--surface-2)" } })
+        ]
+      }
+    ) })
+  ] }) });
+}
 export {
   AuthController,
   AuthControllerCtx,
@@ -1923,9 +2379,17 @@ export {
   AuthProvider,
   AuthStateCtx,
   Button,
+  ConfirmDialog,
+  CustomDialog,
   DEFAULT_NOTIFICATION_CHANNEL,
+  DefaultDialogTemplateKeys,
+  Dialog,
+  DialogContent,
+  DialogController,
+  DialogHost,
   Field,
   HttpError,
+  InfoDialog,
   Input,
   MockAuthHttpClient,
   MockHttpClient,
@@ -1935,17 +2399,24 @@ export {
   RequireAuth,
   Skeleton,
   Textarea,
+  Tooltip,
   authController,
   controllerFactory,
   createAuthController,
+  dialogController,
   httpClient as fetchHttpClient,
+  getDialogTemplate,
   notifierController,
+  registerDefaultDialogs,
+  registerDialogTemplate,
   resolveToastTheme,
   ui,
+  unregisterDialogTemplate,
   useAuth,
   useAuthActions,
   useAuthController,
   useAuthDispatch,
   useAuthedUser,
+  useDialog,
   useResponsiveMutation
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hexdspace/react",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -71,6 +71,8 @@
     "build": "tsup src/index.ts --dts --format esm --clean && pnpm run build:css",
     "build:css": "mkdir -p dist/css && cp -R src/ui/theme/css/* dist/css/",
     "test": "vitest",
+    "test:unit": "vitest --project unit",
+    "test:storybook": "vitest --project storybook",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   }