@pablozaiden/webapp 0.2.2 → 0.3.0

package/src/web/components/index.tsx

@@ -1,13 +1,21 @@
-import { useCallback, useEffect, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type InputHTMLAttributes, type MouseEvent as ReactMouseEvent, type ReactNode, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
+import { useCallback, useEffect, useId, useLayoutEffect, useRef, useState, type ButtonHTMLAttributes, type CSSProperties, type HTMLAttributes, type InputHTMLAttributes, type MouseEvent as ReactMouseEvent, type ReactNode, type RefObject, type SelectHTMLAttributes, type TextareaHTMLAttributes } from "react";
 import { createPortal } from "react-dom";
 import type { ActionMenuItem, BadgeVariant } from "../sidebar/types";
 
 export function Button({
   variant = "default",
+  loading = false,
   className = "",
+  disabled,
+  children,
   ...props
-}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "default" | "primary" | "danger" | "ghost" }) {
-  return <button {...props} className={`wapp-button wapp-button-${variant} ${className}`} />;
+}: ButtonHTMLAttributes<HTMLButtonElement> & { variant?: "default" | "primary" | "danger" | "ghost"; loading?: boolean }) {
+  return (
+    <button {...props} disabled={disabled || loading} className={`wapp-button wapp-button-${variant} ${className}`}>
+      {loading ? <span className="wapp-button-spinner" aria-hidden="true" /> : null}
+      {children}
+    </button>
+  );
 }
 
 export function IconButton({
@@ -18,8 +26,8 @@ export function IconButton({
   return <button {...props} className={`wapp-icon-button ${active ? "active" : ""} ${className}`} />;
 }
 
-export function Badge({ variant = "default", children }: { variant?: BadgeVariant; children: ReactNode }) {
-  return <span className={`wapp-badge wapp-badge-${variant}`}>{children}</span>;
+export function Badge({ variant = "default", className = "", children, ...props }: HTMLAttributes<HTMLSpanElement> & { variant?: BadgeVariant; children: ReactNode }) {
+  return <span {...props} className={`wapp-badge wapp-badge-${variant} ${className}`}>{children}</span>;
 }
 
 export function Panel({ title, description, actions, children, className = "" }: { title?: string; description?: string; actions?: ReactNode; children?: ReactNode; className?: string }) {
@@ -233,6 +241,323 @@ export function CodeValue({ value, label, copyLabel = "Copy" }: { value: string;
   );
 }
 
+function isTopmostDialog(dialog: HTMLElement): boolean {
+  const openDialogs = Array.from(document.querySelectorAll<HTMLElement>("[role='dialog'][aria-modal='true']"));
+  return openDialogs[openDialogs.length - 1] === dialog;
+}
+
+function isNativeEnterTarget(target: EventTarget | null): boolean {
+  if (!(target instanceof HTMLElement)) {
+    return false;
+  }
+  if (target.isContentEditable) {
+    return true;
+  }
+  if (target instanceof HTMLTextAreaElement) {
+    return true;
+  }
+  if (target instanceof HTMLButtonElement || target instanceof HTMLAnchorElement || target instanceof HTMLSelectElement) {
+    return true;
+  }
+  if (target instanceof HTMLInputElement) {
+    return true;
+  }
+  return false;
+}
+
+function findDefaultDialogAction(dialog: HTMLElement): HTMLElement | null {
+  const explicit = dialog.querySelector<HTMLElement>("[data-dialog-default-action]:not(:disabled)");
+  if (explicit) {
+    return explicit;
+  }
+
+  const submit = dialog.querySelector<HTMLElement>("button[type='submit']:not(:disabled), input[type='submit']:not(:disabled)");
+  if (submit) {
+    return submit;
+  }
+
+  const actionContainers = Array.from(dialog.querySelectorAll<HTMLElement>("[data-dialog-actions], .wapp-dialog-actions"));
+  const actionContainer = actionContainers[actionContainers.length - 1];
+  if (!actionContainer) {
+    return null;
+  }
+
+  const buttons = Array.from(actionContainer.querySelectorAll<HTMLElement>("button:not(:disabled), [role='button']:not([aria-disabled='true'])"));
+  return buttons[buttons.length - 1] ?? null;
+}
+
+export function useDialogKeyboardShortcuts({
+  dialogRef,
+  enabled = true,
+  onCancel,
+  onAccept,
+  acceptDisabled = false,
+}: {
+  dialogRef: RefObject<HTMLElement | null>;
+  enabled?: boolean;
+  onCancel?: () => void;
+  onAccept?: () => void;
+  acceptDisabled?: boolean;
+}) {
+  const onCancelRef = useRef(onCancel);
+  const onAcceptRef = useRef(onAccept);
+  onCancelRef.current = onCancel;
+  onAcceptRef.current = onAccept;
+
+  useEffect(() => {
+    if (!enabled) return;
+
+    function handleKeyDown(event: KeyboardEvent) {
+      const dialog = dialogRef.current;
+      if (!dialog || !isTopmostDialog(dialog)) {
+        return;
+      }
+
+      if (event.key === "Escape") {
+        if (onCancelRef.current) {
+          event.preventDefault();
+          event.stopPropagation();
+          onCancelRef.current();
+        }
+        return;
+      }
+
+      if (event.key !== "Enter" || event.shiftKey || event.altKey || event.metaKey || event.ctrlKey || event.isComposing) {
+        return;
+      }
+
+      if (isNativeEnterTarget(event.target)) {
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+      if (onAcceptRef.current) {
+        if (!acceptDisabled) {
+          onAcceptRef.current();
+        }
+        return;
+      }
+
+      if (!acceptDisabled) {
+        findDefaultDialogAction(dialog)?.click();
+      }
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [acceptDisabled, dialogRef, enabled]);
+}
+
+const FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+const MODAL_SCROLL_LOCK_COUNT_KEY = "__webappModalScrollLockCount";
+const MODAL_SCROLL_LOCK_OVERFLOW_KEY = "__webappModalScrollLockOverflow";
+
+type ScrollLockedBody = HTMLElement & {
+  [MODAL_SCROLL_LOCK_COUNT_KEY]?: number;
+  [MODAL_SCROLL_LOCK_OVERFLOW_KEY]?: string;
+};
+
+function lockBodyScroll(): () => void {
+  const body = document.body as ScrollLockedBody;
+  const lockCount = body[MODAL_SCROLL_LOCK_COUNT_KEY] ?? 0;
+  if (lockCount === 0) {
+    body[MODAL_SCROLL_LOCK_OVERFLOW_KEY] = body.style.overflow;
+    body.style.overflow = "hidden";
+  }
+  body[MODAL_SCROLL_LOCK_COUNT_KEY] = lockCount + 1;
+
+  return () => {
+    const nextLockCount = Math.max((body[MODAL_SCROLL_LOCK_COUNT_KEY] ?? 1) - 1, 0);
+    if (nextLockCount > 0) {
+      body[MODAL_SCROLL_LOCK_COUNT_KEY] = nextLockCount;
+      return;
+    }
+
+    body.style.overflow = body[MODAL_SCROLL_LOCK_OVERFLOW_KEY] ?? "";
+    delete body[MODAL_SCROLL_LOCK_COUNT_KEY];
+    delete body[MODAL_SCROLL_LOCK_OVERFLOW_KEY];
+  };
+}
+
+export interface ModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: ReactNode;
+  children: ReactNode;
+  footer?: ReactNode;
+  size?: "sm" | "md" | "lg" | "xl";
+  showCloseButton?: boolean;
+  closeOnOverlayClick?: boolean;
+  className?: string;
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  showCloseButton = true,
+  closeOnOverlayClick = true,
+  className = "",
+}: ModalProps) {
+  const modalRef = useRef<HTMLDivElement>(null);
+  const previousFocusRef = useRef<Element | null>(null);
+  const titleId = useId();
+  const onCloseRef = useRef(onClose);
+  onCloseRef.current = onClose;
+
+  useDialogKeyboardShortcuts({
+    dialogRef: modalRef,
+    enabled: isOpen,
+    onCancel: () => onCloseRef.current(),
+  });
+
+  const handleFocusTrap = useCallback((event: KeyboardEvent) => {
+    if (event.key !== "Tab") {
+      return;
+    }
+
+    const currentModal = modalRef.current;
+    const openModals = Array.from(document.querySelectorAll<HTMLElement>("[role='dialog'][aria-modal='true']"));
+    const topmostModal = openModals[openModals.length - 1];
+    if (!currentModal || currentModal !== topmostModal) {
+      return;
+    }
+
+    const focusable = currentModal.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR);
+    if (focusable.length === 0) {
+      return;
+    }
+
+    const first = focusable[0]!;
+    const last = focusable[focusable.length - 1]!;
+    if (event.shiftKey && document.activeElement === first) {
+      event.preventDefault();
+      last.focus();
+      return;
+    }
+    if (!event.shiftKey && document.activeElement === last) {
+      event.preventDefault();
+      first.focus();
+    }
+  }, []);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    previousFocusRef.current = document.activeElement;
+    document.addEventListener("keydown", handleFocusTrap);
+    const unlockBodyScroll = lockBodyScroll();
+    modalRef.current?.focus();
+
+    return () => {
+      document.removeEventListener("keydown", handleFocusTrap);
+      unlockBodyScroll();
+      if (previousFocusRef.current instanceof HTMLElement) {
+        previousFocusRef.current.focus();
+      }
+    };
+  }, [handleFocusTrap, isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  return createPortal(
+    <div className="wapp-modal-layer">
+      <div
+        className="wapp-modal-overlay"
+        onClick={closeOnOverlayClick ? onClose : undefined}
+        aria-hidden="true"
+      />
+      <div
+        ref={modalRef}
+        tabIndex={-1}
+        className={`wapp-modal wapp-modal-${size} ${className}`}
+        role="dialog"
+        aria-modal="true"
+        aria-labelledby={titleId}
+      >
+        <div className="wapp-modal-header">
+          <div className="wapp-modal-title-block">
+            <h2 id={titleId}>{title}</h2>
+            {description ? <p>{description}</p> : null}
+          </div>
+          {showCloseButton ? (
+            <button type="button" className="wapp-modal-close" aria-label="Close" onClick={onClose}>
+              ×
+            </button>
+          ) : null}
+        </div>
+        <div className="wapp-modal-body">
+          {children}
+        </div>
+        {footer ? (
+          <div className="wapp-modal-footer" data-dialog-actions>
+            {footer}
+          </div>
+        ) : null}
+      </div>
+    </div>,
+    document.body,
+  );
+}
+
+export interface ConfirmModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onConfirm: () => void;
+  title: string;
+  message: string;
+  children?: ReactNode;
+  confirmLabel?: string;
+  cancelLabel?: string;
+  loading?: boolean;
+  variant?: "danger" | "primary";
+}
+
+export function ConfirmModal({
+  isOpen,
+  onClose,
+  onConfirm,
+  title,
+  message,
+  children,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  loading = false,
+  variant = "danger",
+}: ConfirmModalProps) {
+  return (
+    <Modal
+      isOpen={isOpen}
+      onClose={onClose}
+      title={title}
+      size="sm"
+      footer={(
+        <>
+          <Button type="button" variant="ghost" onClick={onClose} disabled={loading}>
+            {cancelLabel}
+          </Button>
+          <Button type="button" variant={variant} onClick={onConfirm} loading={loading}>
+            {confirmLabel}
+          </Button>
+        </>
+      )}
+    >
+      <p>{message}</p>
+      {children}
+    </Modal>
+  );
+}
+
 export function Dialog({
   title,
   description,
@@ -248,8 +573,11 @@ export function Dialog({
   onClose?: () => void;
   className?: string;
 }) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  useDialogKeyboardShortcuts({ dialogRef, onCancel: onClose });
+
   return (
-    <div className={`wapp-dialog ${className}`} role="dialog" aria-modal="true" aria-label={title}>
+    <div ref={dialogRef} className={`wapp-dialog ${className}`} role="dialog" aria-modal="true" aria-label={title}>
       <div className="wapp-dialog-title">
         <div>
           <h2>{title}</h2>
@@ -260,7 +588,7 @@ export function Dialog({
       <div className="wapp-dialog-body">
         {children}
       </div>
-      <div className="wapp-dialog-actions">
+      <div className="wapp-dialog-actions" data-dialog-actions>
         {actions}
       </div>
     </div>
@@ -284,17 +612,6 @@ export function ConfirmDialog({
   onCancel: () => void;
   onConfirm: () => void;
 }) {
-  useEffect(() => {
-    if (!open) return;
-    function handleKeyDown(event: KeyboardEvent) {
-      if (event.key === "Escape") {
-        onCancel();
-      }
-    }
-    document.addEventListener("keydown", handleKeyDown);
-    return () => document.removeEventListener("keydown", handleKeyDown);
-  }, [onCancel, open]);
-
   if (!open) return null;
   return createPortal(
     <div className="wapp-dialog-backdrop" role="presentation">
@@ -324,6 +641,31 @@ export interface ContextMenuPosition {
   y: number;
 }
 
+interface ViewportBounds {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+  width: number;
+  height: number;
+}
+
+function getViewportBounds(): ViewportBounds {
+  const viewport = window.visualViewport;
+  const left = viewport?.offsetLeft ?? 0;
+  const top = viewport?.offsetTop ?? 0;
+  const width = viewport?.width ?? window.innerWidth;
+  const height = viewport?.height ?? window.innerHeight;
+  return {
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+  };
+}
+
 function MenuIcon() {
   return (
     <svg aria-hidden="true" viewBox="0 0 24 24" className="wapp-svg">
@@ -332,26 +674,52 @@ function MenuIcon() {
   );
 }
 
-function boundedMenuPosition(menu: HTMLDivElement | null, position: ContextMenuPosition): ContextMenuPosition {
-  if (!menu) return position;
+function boundedMenuStyle(menu: HTMLDivElement | null, position: ContextMenuPosition): CSSProperties {
   const margin = 8;
-  const rect = menu.getBoundingClientRect();
+  const viewport = getViewportBounds();
+  const rect = menu?.getBoundingClientRect();
+  const width = rect?.width ?? 180;
+  const height = rect?.height ?? 0;
+  const maxHeight = Math.max(80, viewport.height - margin * 2);
+  const boundedHeight = Math.min(height || maxHeight, maxHeight);
+  const left = Math.max(viewport.left + margin, Math.min(position.x, viewport.right - width - margin));
+  const top = Math.max(viewport.top + margin, Math.min(position.y, viewport.bottom - boundedHeight - margin));
   return {
-    x: Math.max(margin, Math.min(position.x, window.innerWidth - rect.width - margin)),
-    y: Math.max(margin, Math.min(position.y, window.innerHeight - rect.height - margin)),
+    position: "fixed",
+    left,
+    top,
+    maxHeight,
+    overflowY: "auto",
   };
 }
 
+function hiddenMenuStyle(position: ContextMenuPosition): CSSProperties {
+  return {
+    position: "fixed",
+    left: position.x,
+    top: position.y,
+    visibility: "hidden",
+  };
+}
+
+function isDestructiveActionMenuItem(item: ActionMenuItem): boolean {
+  return item.destructive === true || item.id?.toLowerCase().includes("delete") === true || item.label.toLowerCase().includes("delete");
+}
+
 function ActionMenuItems({ items, onItemClick }: { items: ActionMenuItem[]; onItemClick: (item: ActionMenuItem) => void }) {
+  const orderedItems = [
+    ...items.filter((item) => !isDestructiveActionMenuItem(item)),
+    ...items.filter(isDestructiveActionMenuItem),
+  ];
   return (
     <div className="wapp-action-menu-items">
-      {items.map((item, index) => (
+      {orderedItems.map((item, index) => (
         <button
           type="button"
           role="menuitem"
           key={item.id ?? `${item.label}:${index}`}
           disabled={item.disabled}
-          className={`wapp-action-menu-item ${item.destructive ? "danger" : ""}`}
+          className={`wapp-action-menu-item ${isDestructiveActionMenuItem(item) ? "danger" : ""}`}
           onClick={() => onItemClick(item)}
         >
           {item.label}
@@ -366,11 +734,15 @@ export function ActionMenu({
   ariaLabel = "Actions",
   disabled = false,
   trigger,
+  triggerVariant = "default",
+  triggerSize = "default",
 }: {
   items: ActionMenuItem[];
   ariaLabel?: string;
   disabled?: boolean;
   trigger?: ReactNode;
+  triggerVariant?: "default" | "ghost";
+  triggerSize?: "default" | "compact";
 }) {
   const [open, setOpen] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
@@ -399,12 +771,11 @@ export function ActionMenu({
   useLayoutEffect(() => {
     if (!open || !triggerRef.current || !menuRef.current) return;
     const triggerRect = triggerRef.current.getBoundingClientRect();
-    const menuRect = menuRef.current.getBoundingClientRect();
-    const margin = 8;
     setStyle({
-      position: "fixed",
-      top: Math.max(margin, Math.min(triggerRect.bottom + 4, window.innerHeight - menuRect.height - margin)),
-      left: Math.max(margin, Math.min(triggerRect.right - menuRect.width, window.innerWidth - menuRect.width - margin)),
+      ...boundedMenuStyle(menuRef.current, {
+        x: triggerRect.right - menuRef.current.getBoundingClientRect().width,
+        y: triggerRect.bottom + 4,
+      }),
     });
   }, [open]);
 
@@ -419,7 +790,11 @@ export function ActionMenu({
       <button
         type="button"
         ref={triggerRef}
-        className="wapp-action-menu-trigger"
+        className={[
+          "wapp-action-menu-trigger",
+          triggerVariant === "ghost" ? "wapp-action-menu-trigger-ghost" : "",
+          triggerSize === "compact" ? "wapp-action-menu-trigger-compact" : "",
+        ].filter(Boolean).join(" ")}
         aria-label={ariaLabel}
         aria-haspopup="menu"
         aria-expanded={open}
@@ -450,14 +825,33 @@ export function ContextMenu({
   ariaLabel?: string;
 }) {
   const menuRef = useRef<HTMLDivElement>(null);
-  const [resolvedPosition, setResolvedPosition] = useState<ContextMenuPosition | null>(position);
+  const [menuStyle, setMenuStyle] = useState<CSSProperties | null>(position ? hiddenMenuStyle(position) : null);
 
   useLayoutEffect(() => {
-    setResolvedPosition(position ? boundedMenuPosition(menuRef.current, position) : null);
-  }, [position]);
+    if (!position) {
+      setMenuStyle(null);
+      return;
+    }
+
+    let frameId: number | null = null;
+    const updatePosition = () => {
+      setMenuStyle(boundedMenuStyle(menuRef.current, position));
+    };
+
+    setMenuStyle(hiddenMenuStyle(position));
+    updatePosition();
+    frameId = window.requestAnimationFrame(updatePosition);
+
+    return () => {
+      if (frameId !== null) {
+        window.cancelAnimationFrame(frameId);
+      }
+    };
+  }, [items, position]);
 
   useEffect(() => {
     if (!position) return;
+    const currentPosition = position;
     function handleKeyDown(event: KeyboardEvent) {
       if (event.key === "Escape") onClose();
     }
@@ -467,17 +861,24 @@ export function ContextMenu({
     function handleScroll() {
       onClose();
     }
+    function handleResize() {
+      setMenuStyle(boundedMenuStyle(menuRef.current, currentPosition));
+    }
     document.addEventListener("keydown", handleKeyDown);
     document.addEventListener("mousedown", handleMouseDown);
     window.addEventListener("scroll", handleScroll, true);
+    window.addEventListener("resize", handleResize);
+    window.visualViewport?.addEventListener("resize", handleResize);
     return () => {
       document.removeEventListener("keydown", handleKeyDown);
       document.removeEventListener("mousedown", handleMouseDown);
       window.removeEventListener("scroll", handleScroll, true);
+      window.removeEventListener("resize", handleResize);
+      window.visualViewport?.removeEventListener("resize", handleResize);
     };
   }, [onClose, position]);
 
-  if (!position || !resolvedPosition) return null;
+  if (!position || !menuStyle) return null;
 
   function handleItemClick(item: ActionMenuItem) {
     if (item.disabled) return;
@@ -491,7 +892,7 @@ export function ContextMenu({
       className="wapp-action-menu"
       role="menu"
       aria-label={ariaLabel}
-      style={{ position: "fixed", left: resolvedPosition.x, top: resolvedPosition.y }}
+      style={menuStyle}
       onContextMenu={(event: ReactMouseEvent<HTMLDivElement>) => {
         event.preventDefault();
         event.stopPropagation();

package/src/web/index.ts

@@ -4,4 +4,5 @@ export * from "./render";
 export * from "./api-client";
 export * from "./sidebar/types";
 export * from "./realtime/useRealtime";
+export { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 export type { ThemePreference } from "../contracts";

package/src/web/sidebar/types.ts

@@ -1,6 +1,22 @@
 import type { ReactNode } from "react";
 
-export type BadgeVariant = "default" | "success" | "warning" | "error" | "info" | "disabled";
+export type BadgeVariant =
+  | "default"
+  | "success"
+  | "warning"
+  | "error"
+  | "info"
+  | "disabled"
+  | "idle"
+  | "planning"
+  | "running"
+  | "completed"
+  | "stopped"
+  | "failed"
+  | "merged"
+  | "pushed"
+  | "deleted"
+  | "plan_ready";
 
 export interface WebAppRoute {
   view: string;