@srcroot/ui 0.0.2 → 0.0.4

package/registry/dropdown-menu.tsx

@@ -4,6 +4,7 @@ import { cn } from "@/lib/utils"
 interface DropdownMenuContextValue {
     open: boolean
     onOpenChange: (open: boolean) => void
+    triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)
@@ -16,7 +17,7 @@ interface DropdownMenuProps {
 }
 
 /**
- * DropdownMenu component with keyboard navigation
+ * DropdownMenu component with keyboard navigation and proper positioning
  * 
  * @example
  * <DropdownMenu>
@@ -33,12 +34,13 @@ interface DropdownMenuProps {
  */
 function DropdownMenu({ children, open: controlledOpen, onOpenChange, defaultOpen = false }: DropdownMenuProps) {
     const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)
+    const triggerRef = React.useRef<HTMLButtonElement>(null)
 
     const open = controlledOpen !== undefined ? controlledOpen : uncontrolledOpen
     const setOpen = onOpenChange || setUncontrolledOpen
 
     return (
-        <DropdownMenuContext.Provider value={{ open, onOpenChange: setOpen }}>
+        <DropdownMenuContext.Provider value={{ open, onOpenChange: setOpen, triggerRef }}>
             <div className="relative inline-block text-left">
                 {children}
             </div>
@@ -60,18 +62,25 @@ const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrig
             context.onOpenChange(!context.open)
         }
 
+        // Combine refs
+        const combinedRef = (node: HTMLButtonElement | null) => {
+            (context.triggerRef as React.MutableRefObject<HTMLButtonElement | null>).current = node
+            if (typeof ref === 'function') ref(node)
+            else if (ref) ref.current = node
+        }
+
         if (asChild && React.isValidElement(children)) {
             return React.cloneElement(children as React.ReactElement<any>, {
                 onClick: handleClick,
                 "aria-expanded": context.open,
                 "aria-haspopup": "menu",
-                ref,
+                ref: combinedRef,
             })
         }
 
         return (
             <button
-                ref={ref}
+                ref={combinedRef}
                 aria-expanded={context.open}
                 aria-haspopup="menu"
                 onClick={handleClick}
@@ -84,53 +93,94 @@ const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTrig
 )
 DropdownMenuTrigger.displayName = "DropdownMenuTrigger"
 
-const DropdownMenuContent = React.forwardRef<
-    HTMLDivElement,
-    React.HTMLAttributes<HTMLDivElement>
->(({ className, ...props }, ref) => {
-    const context = React.useContext(DropdownMenuContext)
-    if (!context) throw new Error("DropdownMenuContent must be used within DropdownMenu")
+interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Alignment relative to trigger: 'start' | 'center' | 'end' */
+    align?: 'start' | 'center' | 'end'
+    /** Side of trigger to open: 'bottom' | 'top' */
+    side?: 'bottom' | 'top'
+    /** Offset from trigger in pixels */
+    sideOffset?: number
+}
 
-    React.useEffect(() => {
-        const handleClickOutside = () => {
-            if (context.open) {
-                context.onOpenChange(false)
+const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(
+    ({ className, align = 'start', side = 'bottom', sideOffset = 4, ...props }, ref) => {
+        const context = React.useContext(DropdownMenuContext)
+        if (!context) throw new Error("DropdownMenuContent must be used within DropdownMenu")
+        const contentRef = React.useRef<HTMLDivElement>(null)
+
+        React.useEffect(() => {
+            const handleClickOutside = (e: MouseEvent) => {
+                if (context.open) {
+                    const target = e.target as Node
+                    const content = contentRef.current
+                    const trigger = context.triggerRef.current
+
+                    // Don't close if clicking inside content or trigger
+                    if (content?.contains(target) || trigger?.contains(target)) {
+                        return
+                    }
+                    context.onOpenChange(false)
+                }
             }
-        }
 
-        const handleEscape = (e: KeyboardEvent) => {
-            if (e.key === "Escape" && context.open) {
-                context.onOpenChange(false)
+            const handleEscape = (e: KeyboardEvent) => {
+                if (e.key === "Escape" && context.open) {
+                    context.onOpenChange(false)
+                }
             }
-        }
 
-        const timer = setTimeout(() => {
-            document.addEventListener("click", handleClickOutside)
-        }, 0)
-        document.addEventListener("keydown", handleEscape)
+            const timer = setTimeout(() => {
+                document.addEventListener("click", handleClickOutside)
+            }, 0)
+            document.addEventListener("keydown", handleEscape)
+
+            return () => {
+                clearTimeout(timer)
+                document.removeEventListener("click", handleClickOutside)
+                document.removeEventListener("keydown", handleEscape)
+            }
+        }, [context.open, context])
+
+        if (!context.open) return null
 
-        return () => {
-            clearTimeout(timer)
-            document.removeEventListener("click", handleClickOutside)
-            document.removeEventListener("keydown", handleEscape)
+        // Calculate alignment classes
+        const alignmentClasses = {
+            start: 'left-0',
+            center: 'left-1/2 -translate-x-1/2',
+            end: 'right-0',
         }
-    }, [context.open, context])
 
-    if (!context.open) return null
+        // Calculate side classes
+        const sideClasses = {
+            bottom: `top-full mt-${sideOffset}`,
+            top: `bottom-full mb-${sideOffset}`,
+        }
 
-    return (
-        <div
-            ref={ref}
-            role="menu"
-            className={cn(
-                "absolute right-0 z-50 mt-2 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
-                className
-            )}
-            onClick={(e) => e.stopPropagation()}
-            {...props}
-        />
-    )
-})
+        return (
+            <div
+                ref={(node) => {
+                    (contentRef as React.MutableRefObject<HTMLDivElement | null>).current = node
+                    if (typeof ref === 'function') ref(node)
+                    else if (ref) ref.current = node
+                }}
+                role="menu"
+                aria-orientation="vertical"
+                className={cn(
+                    "absolute z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+                    "animate-in fade-in-0 zoom-in-95",
+                    alignmentClasses[align],
+                    side === 'bottom' ? 'top-full' : 'bottom-full',
+                    className
+                )}
+                style={{
+                    marginTop: side === 'bottom' ? sideOffset : undefined,
+                    marginBottom: side === 'top' ? sideOffset : undefined,
+                }}
+                {...props}
+            />
+        )
+    }
+)
 DropdownMenuContent.displayName = "DropdownMenuContent"
 
 const DropdownMenuItem = React.forwardRef<
@@ -188,8 +238,6 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     HTMLDivElement,
     React.HTMLAttributes<HTMLDivElement> & { checked?: boolean; disabled?: boolean }
 >(({ className, children, checked, disabled, onClick, ...props }, ref) => {
-    const context = React.useContext(DropdownMenuContext)
-
     const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {
         if (disabled) return
         onClick?.(e)

package/registry/hover-card.tsx

@@ -6,7 +6,7 @@ import { cn } from "@/lib/utils"
 // HoverCard Context
 interface HoverCardContextValue {
     open: boolean
-    triggerRef: React.RefObject<HTMLDivElement>
+    triggerRef: React.RefObject<HTMLDivElement | null>
 }
 
 const HoverCardContext = React.createContext<HoverCardContextValue | null>(null)

package/registry/image.tsx

@@ -69,8 +69,8 @@ const Image = React.forwardRef<HTMLImageElement, ImageProps>(
         }, [src])
 
         const containerStyle: React.CSSProperties = aspectRatio
-            ? { paddingBottom: `${100 / aspectRatio}%`, ...style }
-            : style
+            ? { paddingBottom: `${100 / aspectRatio}%`, ...(style || {}) }
+            : (style || {})
 
         // Render fallback
         if (status === "error" && fallback) {

package/registry/menubar.tsx

@@ -22,7 +22,7 @@ function useMenubar() {
 // MenubarMenu Context
 interface MenubarMenuContextValue {
     menuId: string
-    triggerRef: React.RefObject<HTMLButtonElement>
+    triggerRef: React.RefObject<HTMLButtonElement | null>
 }
 
 const MenubarMenuContext = React.createContext<MenubarMenuContextValue | null>(null)

package/registry/resizable.tsx

@@ -5,10 +5,12 @@ import { cn } from "@/lib/utils"
 
 // Resizable Context
 interface ResizablePanelGroupContextValue {
+    groupId: string
     direction: "horizontal" | "vertical"
-    sizes: number[]
-    setSizes: React.Dispatch<React.SetStateAction<number[]>>
-    registerPanel: () => number
+    registerPanel: (defaultSize: number, minSize: number, maxSize: number) => number
+    getSize: (index: number) => number
+    getTotalSize: () => number
+    onResize: (handleIndex: number, delta: number) => void
 }
 
 const ResizablePanelGroupContext = React.createContext<ResizablePanelGroupContextValue | null>(null)
@@ -27,29 +29,115 @@ interface ResizablePanelGroupProps extends React.HTMLAttributes<HTMLDivElement>
     onLayout?: (sizes: number[]) => void
 }
 
+interface PanelConfig {
+    defaultSize: number
+    minSize: number
+    maxSize: number
+}
+
 const ResizablePanelGroup = React.forwardRef<HTMLDivElement, ResizablePanelGroupProps>(
     ({ className, direction = "horizontal", children, onLayout, ...props }, ref) => {
-        const [sizes, setSizes] = React.useState<number[]>([])
+        const groupId = React.useId()
+        const containerRef = React.useRef<HTMLDivElement>(null)
+        const [, forceUpdate] = React.useReducer(x => x + 1, 0)
+
+        // Store panel configs and sizes in refs for stable access
+        const panelConfigsRef = React.useRef<PanelConfig[]>([])
+        const sizesRef = React.useRef<number[]>([])
         const panelCountRef = React.useRef(0)
 
-        const registerPanel = React.useCallback(() => {
-            const index = panelCountRef.current
-            panelCountRef.current += 1
+        // Reset panel count at start of each render
+        panelCountRef.current = 0
+
+        const registerPanel = React.useCallback((defaultSize: number, minSize: number, maxSize: number) => {
+            const index = panelCountRef.current++
+
+            // Only initialize if not already set
+            if (sizesRef.current[index] === undefined) {
+                sizesRef.current[index] = defaultSize
+                panelConfigsRef.current[index] = { defaultSize, minSize, maxSize }
+            }
+
             return index
         }, [])
 
-        // Notify layout changes
-        React.useEffect(() => {
-            if (sizes.length > 0) {
-                onLayout?.(sizes)
+        const getSize = React.useCallback((index: number) => {
+            return sizesRef.current[index] ?? 50
+        }, [])
+
+        const getTotalSize = React.useCallback(() => {
+            return sizesRef.current.reduce((sum, s) => sum + s, 0)
+        }, [])
+
+        const onResize = React.useCallback((handleIndex: number, delta: number) => {
+            const container = containerRef.current
+            if (!container) return
+
+            const containerSize = direction === "horizontal"
+                ? container.offsetWidth
+                : container.offsetHeight
+
+            if (containerSize === 0) return
+
+            const deltaPercent = (delta / containerSize) * 100
+
+            const leftIndex = handleIndex
+            const rightIndex = handleIndex + 1
+            const sizes = sizesRef.current
+            const configs = panelConfigsRef.current
+
+            if (leftIndex >= sizes.length || rightIndex >= sizes.length) return
+
+            const leftSize = sizes[leftIndex]
+            const rightSize = sizes[rightIndex]
+            const totalSize = leftSize + rightSize
+
+            let newLeftSize = leftSize + deltaPercent
+            let newRightSize = rightSize - deltaPercent
+
+            const leftMin = configs[leftIndex]?.minSize ?? 10
+            const leftMax = configs[leftIndex]?.maxSize ?? 90
+            const rightMin = configs[rightIndex]?.minSize ?? 10
+            const rightMax = configs[rightIndex]?.maxSize ?? 90
+
+            // Apply constraints
+            if (newLeftSize < leftMin) {
+                newLeftSize = leftMin
+                newRightSize = totalSize - leftMin
             }
-        }, [sizes, onLayout])
+            if (newRightSize < rightMin) {
+                newRightSize = rightMin
+                newLeftSize = totalSize - rightMin
+            }
+            if (newLeftSize > leftMax) {
+                newLeftSize = leftMax
+                newRightSize = totalSize - leftMax
+            }
+            if (newRightSize > rightMax) {
+                newRightSize = rightMax
+                newLeftSize = totalSize - rightMax
+            }
+
+            sizesRef.current[leftIndex] = newLeftSize
+            sizesRef.current[rightIndex] = newRightSize
+
+            // Force re-render to update panel sizes
+            forceUpdate()
+
+            // Notify layout changes
+            onLayout?.([...sizesRef.current])
+        }, [direction, onLayout])
 
         return (
-            <ResizablePanelGroupContext.Provider value={{ direction, sizes, setSizes, registerPanel }}>
+            <ResizablePanelGroupContext.Provider value={{ groupId, direction, registerPanel, getSize, getTotalSize, onResize }}>
                 <div
-                    ref={ref}
+                    ref={(node) => {
+                        containerRef.current = node
+                        if (typeof ref === "function") ref(node)
+                        else if (ref) ref.current = node
+                    }}
                     data-panel-group
+                    data-panel-group-id={groupId}
                     data-direction={direction}
                     className={cn(
                         "flex h-full w-full",
@@ -75,33 +163,30 @@ interface ResizablePanelProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ResizablePanel = React.forwardRef<HTMLDivElement, ResizablePanelProps>(
     ({ className, defaultSize = 50, minSize = 10, maxSize = 90, children, style, ...props }, ref) => {
-        const { direction, sizes, setSizes, registerPanel } = useResizablePanelGroup()
-        const indexRef = React.useRef<number | null>(null)
-
-        React.useEffect(() => {
-            if (indexRef.current === null) {
-                indexRef.current = registerPanel()
-                setSizes(prev => {
-                    const newSizes = [...prev]
-                    newSizes[indexRef.current!] = defaultSize
-                    return newSizes
-                })
-            }
-        }, [registerPanel, setSizes, defaultSize])
+        const { groupId, direction, registerPanel, getSize, getTotalSize } = useResizablePanelGroup()
+        const indexRef = React.useRef<number>(-1)
 
-        const size = indexRef.current !== null ? sizes[indexRef.current] ?? defaultSize : defaultSize
+        // Register panel on first render only
+        if (indexRef.current === -1) {
+            indexRef.current = registerPanel(defaultSize, minSize, maxSize)
+        }
+
+        const size = getSize(indexRef.current)
+        const totalSize = getTotalSize()
+        // Convert to actual percentage of total
+        // const actualPercent = totalSize > 0 ? (size / totalSize) * 100 : size
 
         return (
             <div
                 ref={ref}
                 data-panel
+                data-panel-group-id={groupId}
                 data-panel-index={indexRef.current}
                 className={cn("overflow-hidden", className)}
                 style={{
                     ...style,
-                    [direction === "horizontal" ? "width" : "height"]: `${size}%`,
-                    flexShrink: 0,
-                    flexGrow: 0,
+                    // Use flex-grow with the size as the ratio for smoother resizing
+                    flex: `${size} 1 0`,
                 }}
                 {...props}
             >
@@ -119,62 +204,78 @@ interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
     ({ className, withHandle = false, ...props }, ref) => {
-        const { direction, sizes, setSizes } = useResizablePanelGroup()
+        const { direction, onResize } = useResizablePanelGroup()
         const [isDragging, setIsDragging] = React.useState(false)
+        const handleIndexRef = React.useRef<number>(-1)
+        const lastPosRef = React.useRef<number>(0)
         const handleRef = React.useRef<HTMLDivElement>(null)
 
-        const handleMouseDown = (e: React.MouseEvent) => {
-            e.preventDefault()
-            setIsDragging(true)
+        // Determine handle index from DOM position
+        const getHandleIndex = React.useCallback(() => {
+            const handle = handleRef.current
+            if (!handle) return 0
 
-            const startX = e.clientX
-            const startY = e.clientY
-            const startSizes = [...sizes]
-            const container = handleRef.current?.parentElement
+            const parent = handle.parentElement
+            if (!parent) return 0
 
-            if (!container) return
+            let handleCount = 0
+            for (const child of Array.from(parent.children)) {
+                if (child === handle) break
+                if (child.hasAttribute('data-panel-resize-handle')) {
+                    handleCount++
+                }
+            }
+            return handleCount
+        }, [])
+
+        const handleMouseDown = React.useCallback((e: React.MouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsDragging(true)
 
-            const containerRect = container.getBoundingClientRect()
-            const containerSize = direction === "horizontal" ? containerRect.width : containerRect.height
+            const handleIndex = getHandleIndex()
+            const startPos = direction === "horizontal" ? e.clientX : e.clientY
+            lastPosRef.current = startPos
 
             const handleMouseMove = (moveEvent: MouseEvent) => {
-                const delta = direction === "horizontal"
-                    ? moveEvent.clientX - startX
-                    : moveEvent.clientY - startY
-                const deltaPercent = (delta / containerSize) * 100
-
-                setSizes(prev => {
-                    const newSizes = [...prev]
-                    // Adjust first two panels (simple implementation)
-                    if (newSizes.length >= 2) {
-                        newSizes[0] = Math.max(10, Math.min(90, startSizes[0] + deltaPercent))
-                        newSizes[1] = Math.max(10, Math.min(90, startSizes[1] - deltaPercent))
-                    }
-                    return newSizes
-                })
+                const currentPos = direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
+                const delta = currentPos - lastPosRef.current
+                lastPosRef.current = currentPos
+
+                if (delta !== 0) {
+                    onResize(handleIndex, delta)
+                }
             }
 
             const handleMouseUp = () => {
                 setIsDragging(false)
                 document.removeEventListener("mousemove", handleMouseMove)
                 document.removeEventListener("mouseup", handleMouseUp)
+                document.body.style.cursor = ""
+                document.body.style.userSelect = ""
             }
 
+            document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize"
+            document.body.style.userSelect = "none"
             document.addEventListener("mousemove", handleMouseMove)
             document.addEventListener("mouseup", handleMouseUp)
-        }
+        }, [direction, onResize, getHandleIndex])
 
         return (
             <div
-                ref={handleRef}
+                ref={(node) => {
+                    handleRef.current = node
+                    if (typeof ref === "function") ref(node)
+                    else if (ref) ref.current = node
+                }}
                 data-panel-resize-handle
+                data-dragging={isDragging}
                 className={cn(
-                    "relative flex items-center justify-center bg-border",
+                    "relative flex shrink-0 items-center justify-center bg-border",
                     direction === "horizontal"
-                        ? "w-px cursor-col-resize hover:w-1 hover:bg-primary/50"
-                        : "h-px cursor-row-resize hover:h-1 hover:bg-primary/50",
-                    isDragging && (direction === "horizontal" ? "w-1 bg-primary" : "h-1 bg-primary"),
-                    "transition-all",
+                        ? "w-1 cursor-col-resize hover:bg-primary/50 active:bg-primary"
+                        : "h-1 cursor-row-resize hover:bg-primary/50 active:bg-primary",
+                    isDragging && "bg-primary",
                     className
                 )}
                 onMouseDown={handleMouseDown}

package/registry/scroll-area.tsx

@@ -3,17 +3,47 @@ import { cn } from "@/lib/utils"
 
 interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Orientation of scrollbar */
-    orientation?: "vertical" | "horizontal" | "both"
+    orientation?: "vertical" | "horizontal"
+    /** Scrollbar size: "thin" (4px), "default" (8px), "thick" (12px) */
+    scrollbarSize?: "thin" | "default" | "thick"
+    /** Hide scrollbar until hover */
+    hideScrollbar?: boolean
+}
+
+// CSS for custom scrollbar styling
+const scrollbarStyles = {
+    thin: {
+        width: "4px",
+        height: "4px",
+    },
+    default: {
+        width: "8px",
+        height: "8px",
+    },
+    thick: {
+        width: "12px",
+        height: "12px",
+    },
 }
 
 /**
  * ScrollArea - Custom scrollbar container
  * 
  * Provides a styled scrollbar that is thin and consistent across browsers.
- * Uses CSS scrollbar styling for webkit and Firefox.
+ * Supports customizable scrollbar size and orientation.
  */
 const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
-    ({ className, children, orientation = "vertical", ...props }, ref) => {
+    ({ className, children, orientation = "vertical", scrollbarSize = "thin", hideScrollbar = false, style, ...props }, ref) => {
+        const sizes = scrollbarStyles[scrollbarSize]
+
+        const scrollbarCSS: React.CSSProperties = {
+            ...style,
+            // Webkit browsers (Chrome, Safari, Edge)
+            // @ts-ignore - CSS custom properties for scrollbar
+            "--scrollbar-width": sizes.width,
+            "--scrollbar-height": sizes.height,
+        }
+
         return (
             <div
                 ref={ref}
@@ -22,13 +52,42 @@ const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
                     // Container overflow based on orientation
                     orientation === "vertical" && "overflow-y-auto overflow-x-hidden",
                     orientation === "horizontal" && "overflow-x-auto overflow-y-hidden",
-                    orientation === "both" && "overflow-auto",
-                    // Custom scrollbar styling
-                    "scrollbar-thin",
+                    // Custom scrollbar classes
+                    "scrollbar-custom",
+                    hideScrollbar && "scrollbar-hide hover:scrollbar-show",
                     className
                 )}
+                style={scrollbarCSS}
                 {...props}
             >
+                <style>{`
+                    .scrollbar-custom::-webkit-scrollbar {
+                        width: var(--scrollbar-width, 4px);
+                        height: var(--scrollbar-height, 4px);
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-track {
+                        background: transparent;
+                        border-radius: 9999px;
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-thumb {
+                        background: hsl(var(--muted-foreground) / 0.3);
+                        border-radius: 9999px;
+                    }
+                    .scrollbar-custom::-webkit-scrollbar-thumb:hover {
+                        background: hsl(var(--muted-foreground) / 0.5);
+                    }
+                    .scrollbar-custom {
+                        scrollbar-width: thin;
+                        scrollbar-color: hsl(var(--muted-foreground) / 0.3) transparent;
+                    }
+                    .scrollbar-hide::-webkit-scrollbar {
+                        opacity: 0;
+                    }
+                    .scrollbar-hide:hover::-webkit-scrollbar,
+                    .scrollbar-show::-webkit-scrollbar {
+                        opacity: 1;
+                    }
+                `}</style>
                 {children}
             </div>
         )
@@ -36,7 +95,7 @@ const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
 )
 ScrollArea.displayName = "ScrollArea"
 
-// ScrollBar component for explicit scrollbar styling reference
+// ScrollBar component for explicit scrollbar styling reference (optional usage)
 interface ScrollBarProps extends React.HTMLAttributes<HTMLDivElement> {
     orientation?: "vertical" | "horizontal"
 }