@optilogic/core 1.0.0-beta.0

package/src/components/confirmation-modal.tsx

@@ -0,0 +1,195 @@
+import * as React from "react";
+
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "./alert-dialog";
+
+export interface ConfirmationModalProps {
+  /** Whether the modal is open */
+  open: boolean;
+  /** Callback when open state changes */
+  onOpenChange: (open: boolean) => void;
+  /** Title of the confirmation dialog */
+  title: string;
+  /** Description/message to display */
+  description: string;
+  /** Label for the confirm button */
+  confirmLabel?: string;
+  /** Label for the cancel button */
+  cancelLabel?: string;
+  /** Whether this is a destructive action (styles confirm button as destructive) */
+  destructive?: boolean;
+  /** Callback when confirmed */
+  onConfirm: () => void;
+  /** Callback when cancelled (optional, defaults to closing) */
+  onCancel?: () => void;
+}
+
+/**
+ * ConfirmationModal
+ *
+ * A simple yes/no confirmation dialog built on AlertDialog.
+ * Use for actions that need user confirmation before proceeding.
+ *
+ * @example
+ * <ConfirmationModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Delete Item"
+ *   description="Are you sure you want to delete this item?"
+ *   destructive
+ *   onConfirm={handleDelete}
+ * />
+ */
+export function ConfirmationModal({
+  open,
+  onOpenChange,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  onConfirm,
+  onCancel,
+}: ConfirmationModalProps) {
+  const handleCancel = () => {
+    onCancel?.();
+    onOpenChange(false);
+  };
+
+  const handleConfirm = () => {
+    onConfirm();
+    onOpenChange(false);
+  };
+
+  return (
+    <AlertDialog open={open} onOpenChange={onOpenChange}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          <AlertDialogDescription>{description}</AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel onClick={handleCancel}>
+            {cancelLabel}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={handleConfirm}
+            className={
+              destructive
+                ? "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+                : undefined
+            }
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}
+
+/**
+ * useConfirmation Hook
+ *
+ * A hook that provides imperative confirmation dialogs.
+ * Returns a confirm function that shows a dialog and returns a promise.
+ *
+ * @example
+ * const { confirm, ConfirmationDialog } = useConfirmation();
+ *
+ * const handleDelete = async () => {
+ *   const confirmed = await confirm({
+ *     title: "Delete Item",
+ *     description: "Are you sure you want to delete this item?",
+ *     destructive: true,
+ *   });
+ *   if (confirmed) {
+ *     // perform delete
+ *   }
+ * };
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleDelete}>Delete</button>
+ *     {ConfirmationDialog}
+ *   </>
+ * );
+ */
+export function useConfirmation() {
+  const [state, setState] = React.useState<{
+    open: boolean;
+    title: string;
+    description: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+    resolve?: (value: boolean) => void;
+  }>({
+    open: false,
+    title: "",
+    description: "",
+  });
+
+  const confirm = React.useCallback(
+    (options: {
+      title: string;
+      description: string;
+      confirmLabel?: string;
+      cancelLabel?: string;
+      destructive?: boolean;
+    }): Promise<boolean> => {
+      return new Promise((resolve) => {
+        setState({
+          open: true,
+          ...options,
+          resolve,
+        });
+      });
+    },
+    []
+  );
+
+  const handleConfirm = React.useCallback(() => {
+    state.resolve?.(true);
+    setState((prev) => ({ ...prev, open: false }));
+  }, [state.resolve]);
+
+  const handleCancel = React.useCallback(() => {
+    state.resolve?.(false);
+    setState((prev) => ({ ...prev, open: false }));
+  }, [state.resolve]);
+
+  const handleOpenChange = React.useCallback(
+    (open: boolean) => {
+      if (!open) {
+        state.resolve?.(false);
+      }
+      setState((prev) => ({ ...prev, open }));
+    },
+    [state.resolve]
+  );
+
+  const ConfirmationDialog = (
+    <ConfirmationModal
+      open={state.open}
+      onOpenChange={handleOpenChange}
+      title={state.title}
+      description={state.description}
+      confirmLabel={state.confirmLabel}
+      cancelLabel={state.cancelLabel}
+      destructive={state.destructive}
+      onConfirm={handleConfirm}
+      onCancel={handleCancel}
+    />
+  );
+
+  return { confirm, ConfirmationDialog };
+}

package/src/components/context-menu.tsx

@@ -0,0 +1,406 @@
+/**
+ * ContextMenu Component
+ *
+ * Unified context menu primitive with support for:
+ * - Icons
+ * - Keyboard shortcuts
+ * - Nested submenus
+ * - Dividers
+ * - Destructive actions
+ * - Disabled states
+ */
+
+import * as React from "react";
+import { ChevronRight, type LucideIcon } from "lucide-react";
+
+import { cn } from "../utils/cn";
+
+/**
+ * Context menu item definition
+ */
+export interface ContextMenuItem {
+  /** Unique identifier */
+  id: string;
+  /** Display label */
+  label: string;
+  /** Optional icon component */
+  icon?: LucideIcon;
+  /** Click handler (ignored if has submenu) */
+  action?: () => void;
+  /** Keyboard shortcut display text */
+  shortcut?: string;
+  /** Whether item is disabled */
+  disabled?: boolean;
+  /** Whether to show as destructive/danger action */
+  destructive?: boolean;
+  /** Show divider line after this item */
+  divider?: boolean;
+  /** Nested submenu items */
+  submenu?: ContextMenuItem[];
+}
+
+export interface ContextMenuProps {
+  /** Menu items */
+  items: ContextMenuItem[];
+  /** Whether menu is open */
+  isOpen: boolean;
+  /** Close handler */
+  onClose: () => void;
+  /** Menu position (x, y) */
+  position: { x: number; y: number };
+  /** Anchor element (alternative to position) */
+  anchorEl?: HTMLElement | null;
+  /** Additional class names */
+  className?: string;
+}
+
+/**
+ * Calculate safe menu position to keep it within viewport
+ */
+function getSafePosition(
+  x: number,
+  y: number,
+  menuWidth: number,
+  menuHeight: number
+): { x: number; y: number } {
+  const padding = 8;
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+
+  let safeX = x;
+  let safeY = y;
+
+  if (x + menuWidth > viewportWidth - padding) {
+    safeX = viewportWidth - menuWidth - padding;
+  }
+  if (safeX < padding) {
+    safeX = padding;
+  }
+
+  if (y + menuHeight > viewportHeight - padding) {
+    safeY = viewportHeight - menuHeight - padding;
+  }
+  if (safeY < padding) {
+    safeY = padding;
+  }
+
+  return { x: safeX, y: safeY };
+}
+
+/**
+ * Individual menu item component with submenu support
+ */
+interface MenuItemProps {
+  item: ContextMenuItem;
+  onClose: () => void;
+  depth?: number;
+}
+
+function MenuItem({ item, onClose, depth = 0 }: MenuItemProps) {
+  const [isSubmenuOpen, setIsSubmenuOpen] = React.useState(false);
+  const [submenuPosition, setSubmenuPosition] = React.useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+  const itemRef = React.useRef<HTMLButtonElement>(null);
+  const hoverTimeoutRef = React.useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  const hasSubmenu = item.submenu && item.submenu.length > 0;
+
+  React.useEffect(() => {
+    return () => {
+      if (hoverTimeoutRef.current) {
+        clearTimeout(hoverTimeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleMouseEnter = React.useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+
+    if (hasSubmenu && itemRef.current) {
+      const rect = itemRef.current.getBoundingClientRect();
+      const submenuWidth = 200;
+      const submenuHeight = (item.submenu?.length || 0) * 40;
+
+      const spaceOnRight = window.innerWidth - rect.right;
+      const posX =
+        spaceOnRight > submenuWidth
+          ? rect.right - 4
+          : rect.left - submenuWidth + 4;
+
+      const { x, y } = getSafePosition(
+        posX,
+        rect.top,
+        submenuWidth,
+        submenuHeight
+      );
+      setSubmenuPosition({ x, y });
+      setIsSubmenuOpen(true);
+    }
+  }, [hasSubmenu, item.submenu?.length]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsSubmenuOpen(false);
+    }, 100);
+  }, []);
+
+  const handleSubmenuMouseEnter = React.useCallback(() => {
+    if (hoverTimeoutRef.current) {
+      clearTimeout(hoverTimeoutRef.current);
+    }
+  }, []);
+
+  const handleSubmenuMouseLeave = React.useCallback(() => {
+    hoverTimeoutRef.current = setTimeout(() => {
+      setIsSubmenuOpen(false);
+    }, 100);
+  }, []);
+
+  const handleClick = React.useCallback(() => {
+    if (item.disabled) return;
+
+    if (!hasSubmenu && item.action) {
+      item.action();
+      onClose();
+    }
+  }, [item, hasSubmenu, onClose]);
+
+  if (item.divider && !item.label) {
+    return <div className="my-1 h-px bg-border" />;
+  }
+
+  return (
+    <div className="relative" onMouseLeave={handleMouseLeave}>
+      <button
+        ref={itemRef}
+        onClick={handleClick}
+        onMouseEnter={handleMouseEnter}
+        disabled={item.disabled}
+        className={cn(
+          "w-full flex items-center gap-3 px-3 py-2 text-sm rounded-sm",
+          "transition-colors text-left",
+          "focus:outline-none focus:bg-accent focus:text-accent-foreground",
+          item.disabled
+            ? "opacity-50 cursor-not-allowed text-muted-foreground"
+            : "hover:bg-accent hover:text-accent-foreground cursor-pointer",
+          item.destructive &&
+            !item.disabled &&
+            "text-destructive hover:text-destructive"
+        )}
+      >
+        {item.icon && (
+          <item.icon
+            className={cn(
+              "w-4 h-4 flex-shrink-0",
+              item.destructive && !item.disabled && "text-destructive"
+            )}
+          />
+        )}
+        <span className="flex-1 truncate">{item.label}</span>
+        {item.shortcut && (
+          <span className="ml-auto text-xs text-muted-foreground opacity-60">
+            {item.shortcut}
+          </span>
+        )}
+        {hasSubmenu && (
+          <ChevronRight className="w-4 h-4 flex-shrink-0 ml-2 text-muted-foreground" />
+        )}
+      </button>
+
+      {item.divider && <div className="my-1 h-px bg-border" />}
+
+      {hasSubmenu && isSubmenuOpen && submenuPosition && (
+        <div
+          className={cn(
+            "fixed z-[60] min-w-[180px] max-w-[280px]",
+            "rounded-md border border-border",
+            "bg-popover text-popover-foreground",
+            "shadow-lg",
+            "animate-in fade-in-0 zoom-in-95",
+            "p-1"
+          )}
+          style={{
+            left: `${submenuPosition.x}px`,
+            top: `${submenuPosition.y}px`,
+          }}
+          onMouseEnter={handleSubmenuMouseEnter}
+          onMouseLeave={handleSubmenuMouseLeave}
+        >
+          {item.submenu!.map((subItem) => (
+            <MenuItem
+              key={subItem.id}
+              item={subItem}
+              onClose={onClose}
+              depth={depth + 1}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  );
+}
+
+/**
+ * ContextMenu component
+ *
+ * A unified context menu with support for icons, shortcuts, submenus, and more.
+ *
+ * @example
+ * const { isOpen, position, openMenu, closeMenu } = useContextMenu();
+ *
+ * <div onContextMenu={(e) => {
+ *   e.preventDefault();
+ *   openMenu(e.clientX, e.clientY, item);
+ * }}>
+ *   Right click me
+ * </div>
+ *
+ * <ContextMenu
+ *   isOpen={isOpen}
+ *   position={position}
+ *   onClose={closeMenu}
+ *   items={[
+ *     { id: 'edit', label: 'Edit', icon: Edit, action: handleEdit },
+ *     { id: 'delete', label: 'Delete', icon: Trash, destructive: true, action: handleDelete },
+ *   ]}
+ * />
+ */
+export function ContextMenu({
+  items,
+  isOpen,
+  onClose,
+  position,
+  anchorEl,
+  className,
+}: ContextMenuProps) {
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const [menuPosition, setMenuPosition] = React.useState<{ x: number; y: number }>({
+    x: 0,
+    y: 0,
+  });
+
+  React.useEffect(() => {
+    if (!isOpen) return;
+
+    let x = position.x;
+    let y = position.y;
+
+    if (anchorEl) {
+      const rect = anchorEl.getBoundingClientRect();
+      x = rect.left;
+      y = rect.bottom + 4;
+    }
+
+    requestAnimationFrame(() => {
+      if (menuRef.current) {
+        const menuRect = menuRef.current.getBoundingClientRect();
+        const safePos = getSafePosition(x, y, menuRect.width, menuRect.height);
+        setMenuPosition(safePos);
+      } else {
+        setMenuPosition({ x, y });
+      }
+    });
+  }, [isOpen, position, anchorEl]);
+
+  React.useEffect(() => {
+    if (!isOpen) return;
+
+    const handleClickOutside = (e: MouseEvent) => {
+      if (menuRef.current && !menuRef.current.contains(e.target as Node)) {
+        onClose();
+      }
+    };
+
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        onClose();
+      }
+    };
+
+    document.addEventListener("mousedown", handleClickOutside);
+    document.addEventListener("keydown", handleEscape);
+
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, [isOpen, onClose]);
+
+  if (!isOpen) return null;
+
+  return (
+    <div
+      ref={menuRef}
+      className={cn(
+        "fixed z-50 min-w-[180px] max-w-[280px]",
+        "rounded-md border border-border",
+        "bg-popover text-popover-foreground",
+        "shadow-lg",
+        "animate-in fade-in-0 zoom-in-95",
+        "p-1",
+        className
+      )}
+      style={{
+        left: `${menuPosition.x}px`,
+        top: `${menuPosition.y}px`,
+      }}
+      role="menu"
+      aria-orientation="vertical"
+    >
+      {items.map((item) => (
+        <MenuItem key={item.id} item={item} onClose={onClose} />
+      ))}
+    </div>
+  );
+}
+
+/**
+ * Hook to manage context menu state
+ */
+export interface UseContextMenuResult<T = unknown> {
+  /** Whether menu is open */
+  isOpen: boolean;
+  /** Menu position */
+  position: { x: number; y: number };
+  /** Target item that was right-clicked */
+  targetItem: T | null;
+  /** Ref for the menu element */
+  menuRef: React.RefObject<HTMLDivElement>;
+  /** Open the context menu */
+  openMenu: (x: number, y: number, item: T) => void;
+  /** Close the context menu */
+  closeMenu: () => void;
+}
+
+export function useContextMenu<T = unknown>(): UseContextMenuResult<T> {
+  const [isOpen, setIsOpen] = React.useState(false);
+  const [position, setPosition] = React.useState({ x: 0, y: 0 });
+  const [targetItem, setTargetItem] = React.useState<T | null>(null);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  const openMenu = React.useCallback((x: number, y: number, item: T) => {
+    setPosition({ x, y });
+    setTargetItem(item);
+    setIsOpen(true);
+  }, []);
+
+  const closeMenu = React.useCallback(() => {
+    setIsOpen(false);
+    setTargetItem(null);
+  }, []);
+
+  return {
+    isOpen,
+    position,
+    targetItem,
+    menuRef,
+    openMenu,
+    closeMenu,
+  };
+}
+
+export default ContextMenu;

package/src/components/copy-button.tsx

@@ -0,0 +1,84 @@
+import * as React from "react";
+import { Copy, Check } from "lucide-react";
+
+import { cn } from "../utils/cn";
+
+export interface CopyButtonProps {
+  /**
+   * Content to copy to clipboard
+   */
+  content: string;
+
+  /**
+   * Additional class names
+   */
+  className?: string;
+
+  /**
+   * Size of the button
+   */
+  size?: "sm" | "md" | "lg";
+}
+
+/**
+ * CopyButton component
+ *
+ * A button that copies content to clipboard and shows feedback.
+ *
+ * @example
+ * <CopyButton content="Text to copy" />
+ *
+ * @example
+ * <div className="group relative">
+ *   <pre>some code</pre>
+ *   <CopyButton content="some code" className="absolute top-2 right-2" />
+ * </div>
+ */
+export function CopyButton({ content, className, size = "md" }: CopyButtonProps) {
+  const [copied, setCopied] = React.useState(false);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(content);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy text: ", err);
+    }
+  };
+
+  const sizeClasses = {
+    sm: "w-6 h-6",
+    md: "w-8 h-8",
+    lg: "w-10 h-10",
+  };
+
+  const iconSizes = {
+    sm: 12,
+    md: 16,
+    lg: 20,
+  };
+
+  return (
+    <button
+      onClick={handleCopy}
+      className={cn(
+        "inline-flex items-center justify-center",
+        "bg-black/20 hover:bg-black/30",
+        "text-white/80 hover:text-white",
+        "rounded-md transition-all duration-200",
+        "opacity-0 group-hover:opacity-100",
+        "focus:opacity-100 focus:outline-none",
+        sizeClasses[size],
+        className
+      )}
+      title={copied ? "Copied!" : "Copy to clipboard"}
+    >
+      {copied ? (
+        <Check size={iconSizes[size]} />
+      ) : (
+        <Copy size={iconSizes[size]} />
+      )}
+    </button>
+  );
+}