@srcroot/ui 0.0.3 → 0.0.5

package/registry/resizable.tsx

@@ -5,11 +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
-    getPanelCount: () => 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)
@@ -28,38 +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)
 
-        // Reset panel count on each render to handle re-renders properly
-        React.useLayoutEffect(() => {
-            panelCountRef.current = 0
-        })
+        // 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 }
+            }
 
-        const registerPanel = React.useCallback(() => {
-            const index = panelCountRef.current
-            panelCountRef.current += 1
             return index
         }, [])
 
-        const getPanelCount = React.useCallback(() => {
-            return panelCountRef.current
+        const getSize = React.useCallback((index: number) => {
+            return sizesRef.current[index] ?? 50
         }, [])
 
-        // Notify layout changes
-        React.useEffect(() => {
-            if (sizes.length > 0) {
-                onLayout?.(sizes)
+        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
+            }
+            if (newRightSize < rightMin) {
+                newRightSize = rightMin
+                newLeftSize = totalSize - rightMin
+            }
+            if (newLeftSize > leftMax) {
+                newLeftSize = leftMax
+                newRightSize = totalSize - leftMax
             }
-        }, [sizes, onLayout])
+            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, getPanelCount }}>
+            <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",
@@ -85,31 +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 [index] = React.useState(() => registerPanel())
-
-        // Initialize size
-        React.useLayoutEffect(() => {
-            setSizes(prev => {
-                const newSizes = [...prev]
-                if (newSizes[index] === undefined) {
-                    newSizes[index] = defaultSize
-                }
-                return newSizes
-            })
-        }, [index, defaultSize, setSizes])
+        const { groupId, direction, registerPanel, getSize, getTotalSize } = useResizablePanelGroup()
+        const indexRef = React.useRef<number>(-1)
+
+        // Register panel on first render only
+        if (indexRef.current === -1) {
+            indexRef.current = registerPanel(defaultSize, minSize, maxSize)
+        }
 
-        const size = sizes[index] ?? defaultSize
+        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-index={index}
+                data-panel-group-id={groupId}
+                data-panel-index={indexRef.current}
                 className={cn("overflow-hidden", className)}
                 style={{
                     ...style,
-                    flex: `0 0 ${size}%`,
+                    // Use flex-grow with the size as the ratio for smoother resizing
+                    flex: `${size} 1 0`,
                 }}
                 {...props}
             >
@@ -127,92 +204,78 @@ interface ResizableHandleProps extends React.HTMLAttributes<HTMLDivElement> {
 
 const ResizableHandle = React.forwardRef<HTMLDivElement, ResizableHandleProps>(
     ({ className, withHandle = false, ...props }, ref) => {
-        const { direction, 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)
-
-            const startPos = direction === "horizontal" ? e.clientX : e.clientY
+        // Determine handle index from DOM position
+        const getHandleIndex = React.useCallback(() => {
             const handle = handleRef.current
-            if (!handle) return
+            if (!handle) return 0
+
+            const parent = handle.parentElement
+            if (!parent) return 0
 
-            // Find adjacent panels
-            const prevPanel = handle.previousElementSibling as HTMLElement
-            const nextPanel = handle.nextElementSibling as HTMLElement
-            if (!prevPanel || !nextPanel) 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 prevIndex = parseInt(prevPanel.dataset.panelIndex || "0")
-            const nextIndex = parseInt(nextPanel.dataset.panelIndex || "1")
+        const handleMouseDown = React.useCallback((e: React.MouseEvent) => {
+            e.preventDefault()
+            e.stopPropagation()
+            setIsDragging(true)
 
-            // Get current sizes
-            const prevRect = prevPanel.getBoundingClientRect()
-            const nextRect = nextPanel.getBoundingClientRect()
-            const totalSize = direction === "horizontal"
-                ? prevRect.width + nextRect.width
-                : prevRect.height + nextRect.height
+            const handleIndex = getHandleIndex()
+            const startPos = direction === "horizontal" ? e.clientX : e.clientY
+            lastPosRef.current = startPos
 
             const handleMouseMove = (moveEvent: MouseEvent) => {
                 const currentPos = direction === "horizontal" ? moveEvent.clientX : moveEvent.clientY
-                const delta = currentPos - startPos
-                const deltaPercent = (delta / totalSize) * 100
-
-                setSizes(prev => {
-                    const newSizes = [...prev]
-                    const prevSize = prev[prevIndex] ?? 50
-                    const nextSize = prev[nextIndex] ?? 50
-
-                    // Calculate new sizes with constraints
-                    let newPrevSize = prevSize + deltaPercent
-                    let newNextSize = nextSize - deltaPercent
-
-                    // Apply min/max constraints
-                    if (newPrevSize < 10) {
-                        newPrevSize = 10
-                        newNextSize = prevSize + nextSize - 10
-                    }
-                    if (newNextSize < 10) {
-                        newNextSize = 10
-                        newPrevSize = prevSize + nextSize - 10
-                    }
-                    if (newPrevSize > 90) {
-                        newPrevSize = 90
-                        newNextSize = prevSize + nextSize - 90
-                    }
-                    if (newNextSize > 90) {
-                        newNextSize = 90
-                        newPrevSize = prevSize + nextSize - 90
-                    }
-
-                    newSizes[prevIndex] = newPrevSize
-                    newSizes[nextIndex] = newNextSize
-                    return newSizes
-                })
+                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/themes/gray.css

@@ -0,0 +1,86 @@
+/**
+ * @srcroot/ui - Gray Theme
+ * True neutral gray (the default)
+ */
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 224 71.4% 4.1%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 224 71.4% 4.1%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 224 71.4% 4.1%;
+
+        --primary: 220.9 39.3% 11%;
+        --primary-foreground: 210 20% 98%;
+
+        --secondary: 220 14.3% 95.9%;
+        --secondary-foreground: 220.9 39.3% 11%;
+
+        --muted: 220 14.3% 95.9%;
+        --muted-foreground: 220 8.9% 46.1%;
+
+        --accent: 220 14.3% 95.9%;
+        --accent-foreground: 220.9 39.3% 11%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 20% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 210 20% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 220.9 39.3% 11%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 210 20% 98%;
+
+        --border: 220 13% 91%;
+        --input: 220 13% 91%;
+        --ring: 224 71.4% 4.1%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 224 71.4% 4.1%;
+        --foreground: 210 20% 98%;
+
+        --card: 224 71.4% 4.1%;
+        --card-foreground: 210 20% 98%;
+
+        --popover: 224 71.4% 4.1%;
+        --popover-foreground: 210 20% 98%;
+
+        --primary: 210 20% 98%;
+        --primary-foreground: 220.9 39.3% 11%;
+
+        --secondary: 215 27.9% 16.9%;
+        --secondary-foreground: 210 20% 98%;
+
+        --muted: 215 27.9% 16.9%;
+        --muted-foreground: 217.9 10.6% 64.9%;
+
+        --accent: 215 27.9% 16.9%;
+        --accent-foreground: 210 20% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 20% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 220.9 39.3% 11%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 220.9 39.3% 11%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 220.9 39.3% 11%;
+
+        --border: 215 27.9% 16.9%;
+        --input: 215 27.9% 16.9%;
+        --ring: 216 12.2% 83.9%;
+    }
+}

package/registry/themes/index.css

@@ -0,0 +1,19 @@
+/**
+ * @srcroot/ui Theme Index
+ * 
+ * Available themes:
+ * - neutral.css  - Pure gray, no undertones
+ * - stone.css    - Warm gray with brown undertones
+ * - zinc.css     - Cool gray with subtle blue undertones
+ * - gray.css     - True neutral gray
+ * - slate.css    - Cool gray with strong blue undertones (default)
+ * 
+ * Usage:
+ * Copy the theme file contents into your globals.css or import it:
+ * 
+ * @import '@srcroot/ui/themes/slate.css';
+ * 
+ * Or with the base tokens:
+ * @import '@srcroot/ui/design-tokens.css';
+ * @import '@srcroot/ui/themes/zinc.css';
+ */

package/registry/themes/neutral.css

@@ -0,0 +1,86 @@
+/**
+ * @srcroot/ui - Neutral Theme
+ * A balanced gray with no strong undertones
+ */
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 0 0% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 0 0% 9%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 0 0% 98%;
+
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 0 0% 9%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 0 0% 9%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 0 0% 9%;
+
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+    }
+}

package/registry/themes/slate.css

@@ -0,0 +1,86 @@
+/**
+ * @srcroot/ui - Slate Theme
+ * Cool gray with strong blue undertones (shadcn default)
+ */
+
+@layer base {
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 222.2 84% 4.9%;
+
+        --card: 0 0% 100%;
+        --card-foreground: 222.2 84% 4.9%;
+
+        --popover: 0 0% 100%;
+        --popover-foreground: 222.2 84% 4.9%;
+
+        --primary: 222.2 47.4% 11.2%;
+        --primary-foreground: 210 40% 98%;
+
+        --secondary: 210 40% 96.1%;
+        --secondary-foreground: 222.2 47.4% 11.2%;
+
+        --muted: 210 40% 96.1%;
+        --muted-foreground: 215.4 16.3% 46.9%;
+
+        --accent: 210 40% 96.1%;
+        --accent-foreground: 222.2 47.4% 11.2%;
+
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 210 40% 98%;
+
+        --success: 142.1 76.2% 36.3%;
+        --success-foreground: 210 40% 98%;
+
+        --warning: 45.4 93.4% 47.5%;
+        --warning-foreground: 222.2 47.4% 11.2%;
+
+        --info: 201.3 96.3% 32.2%;
+        --info-foreground: 210 40% 98%;
+
+        --border: 214.3 31.8% 91.4%;
+        --input: 214.3 31.8% 91.4%;
+        --ring: 222.2 84% 4.9%;
+
+        --radius: 0.5rem;
+    }
+
+    .dark {
+        --background: 222.2 84% 4.9%;
+        --foreground: 210 40% 98%;
+
+        --card: 222.2 84% 4.9%;
+        --card-foreground: 210 40% 98%;
+
+        --popover: 222.2 84% 4.9%;
+        --popover-foreground: 210 40% 98%;
+
+        --primary: 210 40% 98%;
+        --primary-foreground: 222.2 47.4% 11.2%;
+
+        --secondary: 217.2 32.6% 17.5%;
+        --secondary-foreground: 210 40% 98%;
+
+        --muted: 217.2 32.6% 17.5%;
+        --muted-foreground: 215 20.2% 65.1%;
+
+        --accent: 217.2 32.6% 17.5%;
+        --accent-foreground: 210 40% 98%;
+
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 210 40% 98%;
+
+        --success: 142.1 70.6% 45.3%;
+        --success-foreground: 222.2 47.4% 11.2%;
+
+        --warning: 48 96.5% 53.1%;
+        --warning-foreground: 222.2 47.4% 11.2%;
+
+        --info: 199.4 95.5% 53.8%;
+        --info-foreground: 222.2 47.4% 11.2%;
+
+        --border: 217.2 32.6% 17.5%;
+        --input: 217.2 32.6% 17.5%;
+        --ring: 212.7 26.8% 83.9%;
+    }
+}