feat: add domains, ideas, layouts, widgets API modules

- Add DomainsModule with full CRUD, search, and activity logging
- Add IdeasModule with quick capture endpoint
- Add LayoutsModule for user dashboard layouts
- Add WidgetsModule for widget definitions (read-only)
- Update ActivityService with domain/idea logging methods
- Register all new modules in AppModule

packages/ui/src/components/Modal.tsx

@@ -0,0 +1,121 @@
+import { useEffect, useRef, type ReactNode, type HTMLAttributes } from "react";
+
+export interface ModalProps extends HTMLAttributes<HTMLDivElement> {
+  isOpen: boolean;
+  onClose: () => void;
+  title?: string;
+  footer?: ReactNode;
+  closeOnOverlayClick?: boolean;
+  closeOnEscape?: boolean;
+  size?: "sm" | "md" | "lg" | "xl" | "full";
+}
+
+export function Modal({
+  isOpen,
+  onClose,
+  title,
+  footer,
+  closeOnOverlayClick = true,
+  closeOnEscape = true,
+  size = "md",
+  children,
+  className = "",
+  ...props
+}: ModalProps) {
+  const dialogRef = useRef<HTMLDivElement>(null);
+  const modalId = useRef(`modal-${Math.random().toString(36).substr(2, 9)}`);
+
+  const sizeStyles = {
+    sm: "max-w-md",
+    md: "max-w-lg",
+    lg: "max-w-2xl",
+    xl: "max-w-4xl",
+    full: "max-w-full mx-4",
+  };
+
+  useEffect(() => {
+    const handleEscape = (event: KeyboardEvent) => {
+      if (closeOnEscape && event.key === "Escape" && isOpen) {
+        onClose();
+      }
+    };
+
+    if (isOpen) {
+      document.addEventListener("keydown", handleEscape);
+      document.body.style.overflow = "hidden";
+      // Focus the modal when opened
+      dialogRef.current?.focus();
+    }
+
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [isOpen, closeOnEscape, onClose]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>) => {
+    if (closeOnOverlayClick && event.target === event.currentTarget) {
+      onClose();
+    }
+  };
+
+  return (
+    <div
+      className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50 p-4"
+      onClick={handleOverlayClick}
+      role="dialog"
+      aria-modal="true"
+      aria-labelledby={title ? `${modalId.current}-title` : undefined}
+      {...props}
+    >
+      <div
+        ref={dialogRef}
+        tabIndex={-1}
+        className={`bg-white rounded-lg shadow-xl w-full ${sizeStyles[size]} ${className}`}
+        role="document"
+      >
+        {title && (
+          <div className="px-6 py-4 border-b border-gray-200 flex items-center justify-between">
+            <h2
+              id={`${modalId.current}-title`}
+              className="text-lg font-semibold text-gray-900"
+            >
+              {title}
+            </h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="text-gray-400 hover:text-gray-600 transition-colors p-1 rounded hover:bg-gray-100"
+              aria-label="Close modal"
+            >
+              <svg
+                className="w-6 h-6"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+                aria-hidden="true"
+              >
+                <path
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  strokeWidth={2}
+                  d="M6 18L18 6M6 6l12 12"
+                />
+              </svg>
+            </button>
+          </div>
+        )}
+        <div className="px-6 py-4 max-h-[70vh] overflow-y-auto">{children}</div>
+        {footer && (
+          <div className="px-6 py-4 border-t border-gray-200 bg-gray-50 rounded-b-lg flex justify-end gap-2">
+            {footer}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}