@gentleduck/registry-ui 0.2.6 → 0.2.8

package/src/preview-panel/preview-panel.tsx

@@ -3,7 +3,7 @@
 import { cn } from '@gentleduck/libs/cn'
 import { type Direction, useDirection } from '@gentleduck/primitives/direction'
 import { Minus, Plus, RotateCcw } from 'lucide-react'
-import { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import React, { memo, useCallback, useEffect, useMemo, useRef, useState } from 'react'
 import { Badge } from '../badge'
 import { Button } from '../button'
 import { ButtonGroup } from '../button-group'
@@ -89,300 +89,307 @@ const ZoomControls = memo(function ZoomControls({
 // All transforms bypass React via direct DOM writes for zero re-renders
 // during continuous interactions (drag, wheel, pinch).
 
-function PreviewPanel({
-  maxHeight,
-  minZoom = 0.25,
-  maxZoom = 4,
-  initialZoom = 1,
-  showControls = true,
-  html,
-  children,
-  className,
-  style,
-  onStateChange,
-  syncState,
-  dir,
-  ...rest
-}: PreviewPanelProps) {
-  const containerRef = useRef<HTMLDivElement>(null)
-  const contentRef = useRef<HTMLDivElement>(null)
-
-  // All mutable interaction state lives in a single ref object.
-  // Nothing here triggers React re-renders.
-  const s = useRef({
-    zoom: initialZoom,
-    x: 0,
-    y: 0,
-    dragging: false,
-    dragStartX: 0,
-    dragStartY: 0,
-    posStartX: 0,
-    posStartY: 0,
-    rafId: 0,
-    emitPending: false,
-    pinchDist: 0,
-    pinchZoom: initialZoom,
-    willChangeTimer: 0,
-  })
-
-  // Only React state: the zoom label percentage
-  const [displayZoom, setDisplayZoom] = useState(initialZoom)
-
-  // Stable ref for the callback so effects never re-subscribe
-  const onStateChangeRef = useRef(onStateChange)
-  onStateChangeRef.current = onStateChange
-
-  // Flush a pending state emission. Called from RAF or directly by button handlers.
-  const flushEmit = useCallback(() => {
-    if (!s.current.emitPending) return
-    s.current.emitPending = false
-    onStateChangeRef.current?.({
-      zoom: s.current.zoom,
-      x: s.current.x,
-      y: s.current.y,
+const PreviewPanel = React.forwardRef<HTMLDivElement, PreviewPanelProps>(
+  (
+    {
+      maxHeight,
+      minZoom = 0.25,
+      maxZoom = 4,
+      initialZoom = 1,
+      showControls = true,
+      html,
+      children,
+      className,
+      style,
+      onStateChange,
+      syncState,
+      dir,
+      ...rest
+    },
+    ref,
+  ) => {
+    const containerRef = useRef<HTMLDivElement>(null)
+    const contentRef = useRef<HTMLDivElement>(null)
+
+    // All mutable interaction state lives in a single ref object.
+    // Nothing here triggers React re-renders.
+    const s = useRef({
+      zoom: initialZoom,
+      x: 0,
+      y: 0,
+      dragging: false,
+      dragStartX: 0,
+      dragStartY: 0,
+      posStartX: 0,
+      posStartY: 0,
+      rafId: 0,
+      emitPending: false,
+      pinchDist: 0,
+      pinchZoom: initialZoom,
+      willChangeTimer: 0,
     })
-  }, [])
-
-  // Mark state as dirty so the next RAF tick emits it.
-  // For continuous interactions (drag, wheel, pinch) this batches
-  // multiple events into one React state update per frame.
-  const markDirty = useCallback(() => {
-    s.current.emitPending = true
-  }, [])
-
-  // Write transform directly to the DOM element.
-  const applyTransform = useCallback((animate: boolean) => {
-    const el = contentRef.current
-    if (!el) return
-    const { x, y, zoom } = s.current
-    el.style.transform = `translate3d(${x}px,${y}px,0) scale(${zoom})`
-    el.style.transition = animate ? 'transform 0.15s ease-out' : 'none'
-    // GPU-composite during interaction, then clear so browser
-    // re-rasterizes at the new zoom for crisp SVG text
-    el.style.willChange = 'transform'
-    clearTimeout(s.current.willChangeTimer)
-    s.current.willChangeTimer = window.setTimeout(() => {
-      if (contentRef.current && !s.current.dragging) {
-        contentRef.current.style.willChange = 'auto'
-      }
-    }, 200)
-  }, [])
-
-  // Batch DOM writes behind a single requestAnimationFrame.
-  // Also flushes any pending state emission in the same frame.
-  const scheduleApply = useCallback(() => {
-    if (s.current.rafId) return
-    s.current.rafId = requestAnimationFrame(() => {
-      s.current.rafId = 0
-      applyTransform(false)
-      flushEmit()
-    })
-  }, [applyTransform, flushEmit])
-
-  const syncDisplay = useCallback(() => setDisplayZoom(s.current.zoom), [])
-
-  // -- Sync from external state (receives changes from a paired panel) --
-
-  useEffect(() => {
-    if (!syncState) return
-    const { zoom, x, y } = syncState
-    // Epsilon check prevents applying our own emitted state back
-    if (Math.abs(s.current.zoom - zoom) < 0.001 && Math.abs(s.current.x - x) < 0.5 && Math.abs(s.current.y - y) < 0.5)
-      return
-    s.current.zoom = zoom
-    s.current.x = x
-    s.current.y = y
-    // Apply silently without emitting back to avoid ping-pong
-    applyTransform(true)
-    syncDisplay()
-  }, [syncState, applyTransform, syncDisplay])
-
-  // -- Button handlers (discrete, emit immediately) --
-
-  const handleZoomIn = useCallback(() => {
-    s.current.zoom = clamp(s.current.zoom + ZOOM_STEP_BUTTON, minZoom, maxZoom)
-    applyTransform(true)
-    syncDisplay()
-    markDirty()
-    flushEmit()
-  }, [applyTransform, syncDisplay, markDirty, flushEmit, minZoom, maxZoom])
-
-  const handleZoomOut = useCallback(() => {
-    s.current.zoom = clamp(s.current.zoom - ZOOM_STEP_BUTTON, minZoom, maxZoom)
-    applyTransform(true)
-    syncDisplay()
-    markDirty()
-    flushEmit()
-  }, [applyTransform, syncDisplay, markDirty, flushEmit, minZoom, maxZoom])
-
-  const handleReset = useCallback(() => {
-    s.current.zoom = initialZoom
-    s.current.x = 0
-    s.current.y = 0
-    applyTransform(true)
-    syncDisplay()
-    markDirty()
-    flushEmit()
-  }, [applyTransform, syncDisplay, markDirty, flushEmit, initialZoom])
-
-  // -- Pointer drag --
-
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-
-    const onDown = (e: PointerEvent) => {
-      if (e.button !== 0) return
-      if ((e.target as HTMLElement).closest('[data-slot="preview-panel-controls"]')) return
-      e.preventDefault()
-      el.setPointerCapture(e.pointerId)
-      s.current.dragging = true
-      s.current.dragStartX = e.clientX
-      s.current.dragStartY = e.clientY
-      s.current.posStartX = s.current.x
-      s.current.posStartY = s.current.y
-      el.style.cursor = 'grabbing'
-    }
-
-    const onMove = (e: PointerEvent) => {
-      if (!s.current.dragging) return
-      s.current.x = s.current.posStartX + (e.clientX - s.current.dragStartX)
-      s.current.y = s.current.posStartY + (e.clientY - s.current.dragStartY)
+
+    // Only React state: the zoom label percentage
+    const [displayZoom, setDisplayZoom] = useState(initialZoom)
+
+    // Stable ref for the callback so effects never re-subscribe
+    const onStateChangeRef = useRef(onStateChange)
+    onStateChangeRef.current = onStateChange
+
+    // Flush a pending state emission. Called from RAF or directly by button handlers.
+    const flushEmit = useCallback(() => {
+      if (!s.current.emitPending) return
+      s.current.emitPending = false
+      onStateChangeRef.current?.({
+        zoom: s.current.zoom,
+        x: s.current.x,
+        y: s.current.y,
+      })
+    }, [])
+
+    // Mark state as dirty so the next RAF tick emits it.
+    // For continuous interactions (drag, wheel, pinch) this batches
+    // multiple events into one React state update per frame.
+    const markDirty = useCallback(() => {
+      s.current.emitPending = true
+    }, [])
+
+    // Write transform directly to the DOM element.
+    const applyTransform = useCallback((animate: boolean) => {
+      const el = contentRef.current
+      if (!el) return
+      const { x, y, zoom } = s.current
+      el.style.transform = `translate3d(${x}px,${y}px,0) scale(${zoom})`
+      el.style.transition = animate ? 'transform 0.15s ease-out' : 'none'
+      // GPU-composite during interaction, then clear so browser
+      // re-rasterizes at the new zoom for crisp SVG text
+      el.style.willChange = 'transform'
+      clearTimeout(s.current.willChangeTimer)
+      s.current.willChangeTimer = window.setTimeout(() => {
+        if (contentRef.current && !s.current.dragging) {
+          contentRef.current.style.willChange = 'auto'
+        }
+      }, 200)
+    }, [])
+
+    // Batch DOM writes behind a single requestAnimationFrame.
+    // Also flushes any pending state emission in the same frame.
+    const scheduleApply = useCallback(() => {
+      if (s.current.rafId) return
+      s.current.rafId = requestAnimationFrame(() => {
+        s.current.rafId = 0
+        applyTransform(false)
+        flushEmit()
+      })
+    }, [applyTransform, flushEmit])
+
+    const syncDisplay = useCallback(() => setDisplayZoom(s.current.zoom), [])
+
+    // -- Sync from external state (receives changes from a paired panel) --
+
+    useEffect(() => {
+      if (!syncState) return
+      const { zoom, x, y } = syncState
+      // Epsilon check prevents applying our own emitted state back
+      if (Math.abs(s.current.zoom - zoom) < 0.001 && Math.abs(s.current.x - x) < 0.5 && Math.abs(s.current.y - y) < 0.5)
+        return
+      s.current.zoom = zoom
+      s.current.x = x
+      s.current.y = y
+      // Apply silently without emitting back to avoid ping-pong
+      applyTransform(true)
+      syncDisplay()
+    }, [syncState, applyTransform, syncDisplay])
+
+    // -- Button handlers (discrete, emit immediately) --
+
+    const handleZoomIn = useCallback(() => {
+      s.current.zoom = clamp(s.current.zoom + ZOOM_STEP_BUTTON, minZoom, maxZoom)
+      applyTransform(true)
+      syncDisplay()
       markDirty()
-      scheduleApply()
-    }
-
-    const onUp = (e: PointerEvent) => {
-      if (!s.current.dragging) return
-      s.current.dragging = false
-      el.releasePointerCapture(e.pointerId)
-      el.style.cursor = 'grab'
-    }
-
-    const onLeave = () => {
-      if (!s.current.dragging) return
-      s.current.dragging = false
-      el.style.cursor = 'grab'
-    }
-
-    el.addEventListener('pointerdown', onDown)
-    el.addEventListener('pointermove', onMove)
-    el.addEventListener('pointerup', onUp)
-    el.addEventListener('pointerleave', onLeave)
-    return () => {
-      el.removeEventListener('pointerdown', onDown)
-      el.removeEventListener('pointermove', onMove)
-      el.removeEventListener('pointerup', onUp)
-      el.removeEventListener('pointerleave', onLeave)
-    }
-  }, [markDirty, scheduleApply])
-
-  // -- Wheel zoom (passive: false to preventDefault page scroll) --
-
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
-
-    const onWheel = (e: WheelEvent) => {
-      e.preventDefault()
-      e.stopPropagation()
-      const delta = e.deltaY > 0 ? -ZOOM_STEP_WHEEL : ZOOM_STEP_WHEEL
-      s.current.zoom = clamp(s.current.zoom + delta, minZoom, maxZoom)
+      flushEmit()
+    }, [applyTransform, syncDisplay, markDirty, flushEmit, minZoom, maxZoom])
+
+    const handleZoomOut = useCallback(() => {
+      s.current.zoom = clamp(s.current.zoom - ZOOM_STEP_BUTTON, minZoom, maxZoom)
+      applyTransform(true)
+      syncDisplay()
       markDirty()
-      scheduleApply()
+      flushEmit()
+    }, [applyTransform, syncDisplay, markDirty, flushEmit, minZoom, maxZoom])
+
+    const handleReset = useCallback(() => {
+      s.current.zoom = initialZoom
+      s.current.x = 0
+      s.current.y = 0
+      applyTransform(true)
       syncDisplay()
-    }
+      markDirty()
+      flushEmit()
+    }, [applyTransform, syncDisplay, markDirty, flushEmit, initialZoom])
 
-    el.addEventListener('wheel', onWheel, { passive: false })
-    return () => el.removeEventListener('wheel', onWheel)
-  }, [markDirty, scheduleApply, syncDisplay, minZoom, maxZoom])
+    // -- Pointer drag --
 
-  // -- Pinch to zoom (two-finger touch) --
+    useEffect(() => {
+      const el = containerRef.current
+      if (!el) return
 
-  useEffect(() => {
-    const el = containerRef.current
-    if (!el) return
+      const onDown = (e: PointerEvent) => {
+        if (e.button !== 0) return
+        if ((e.target as HTMLElement).closest('[data-slot="preview-panel-controls"]')) return
+        e.preventDefault()
+        el.setPointerCapture(e.pointerId)
+        s.current.dragging = true
+        s.current.dragStartX = e.clientX
+        s.current.dragStartY = e.clientY
+        s.current.posStartX = s.current.x
+        s.current.posStartY = s.current.y
+        el.style.cursor = 'grabbing'
+      }
 
-    const dist = (e: TouchEvent) => {
-      const a = e.touches[0] ?? { clientX: 0, clientY: 0 }
-      const b = e.touches[1] ?? { clientX: 0, clientY: 0 }
-      return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY)
-    }
+      const onMove = (e: PointerEvent) => {
+        if (!s.current.dragging) return
+        s.current.x = s.current.posStartX + (e.clientX - s.current.dragStartX)
+        s.current.y = s.current.posStartY + (e.clientY - s.current.dragStartY)
+        markDirty()
+        scheduleApply()
+      }
 
-    const onTouchStart = (e: TouchEvent) => {
-      if (e.touches.length === 2) {
-        e.preventDefault()
-        s.current.pinchDist = dist(e)
-        s.current.pinchZoom = s.current.zoom
+      const onUp = (e: PointerEvent) => {
+        if (!s.current.dragging) return
+        s.current.dragging = false
+        el.releasePointerCapture(e.pointerId)
+        el.style.cursor = 'grab'
+      }
+
+      const onLeave = () => {
+        if (!s.current.dragging) return
+        s.current.dragging = false
+        el.style.cursor = 'grab'
+      }
+
+      el.addEventListener('pointerdown', onDown)
+      el.addEventListener('pointermove', onMove)
+      el.addEventListener('pointerup', onUp)
+      el.addEventListener('pointerleave', onLeave)
+      return () => {
+        el.removeEventListener('pointerdown', onDown)
+        el.removeEventListener('pointermove', onMove)
+        el.removeEventListener('pointerup', onUp)
+        el.removeEventListener('pointerleave', onLeave)
       }
-    }
+    }, [markDirty, scheduleApply])
 
-    const onTouchMove = (e: TouchEvent) => {
-      if (e.touches.length === 2) {
+    // -- Wheel zoom (passive: false to preventDefault page scroll) --
+
+    useEffect(() => {
+      const el = containerRef.current
+      if (!el) return
+
+      const onWheel = (e: WheelEvent) => {
         e.preventDefault()
-        const scale = dist(e) / s.current.pinchDist
-        s.current.zoom = clamp(s.current.pinchZoom * scale, minZoom, maxZoom)
+        e.stopPropagation()
+        const delta = e.deltaY > 0 ? -ZOOM_STEP_WHEEL : ZOOM_STEP_WHEEL
+        s.current.zoom = clamp(s.current.zoom + delta, minZoom, maxZoom)
         markDirty()
         scheduleApply()
         syncDisplay()
       }
-    }
-
-    el.addEventListener('touchstart', onTouchStart, { passive: false })
-    el.addEventListener('touchmove', onTouchMove, { passive: false })
-    return () => {
-      el.removeEventListener('touchstart', onTouchStart)
-      el.removeEventListener('touchmove', onTouchMove)
-    }
-  }, [markDirty, scheduleApply, syncDisplay, minZoom, maxZoom])
-
-  // Cleanup on unmount
-  useEffect(() => {
-    return () => {
-      if (s.current.rafId) cancelAnimationFrame(s.current.rafId)
-      clearTimeout(s.current.willChangeTimer)
-    }
-  }, [])
 
-  // Stable content props - only changes when html/children identity changes
-  const contentProps = useMemo(
-    () => (html ? { dangerouslySetInnerHTML: { __html: html } } : { children }),
-    [html, children],
-  )
+      el.addEventListener('wheel', onWheel, { passive: false })
+      return () => el.removeEventListener('wheel', onWheel)
+    }, [markDirty, scheduleApply, syncDisplay, minZoom, maxZoom])
 
-  // Stable inline style for the container
-  const containerStyle = useMemo(
-    () => ({ maxHeight, cursor: 'grab' as const, touchAction: 'none' as const }),
-    [maxHeight],
-  )
-  const direction = useDirection(dir as Direction)
+    // -- Pinch to zoom (two-finger touch) --
 
-  return (
-    <div
-      data-slot="preview-panel"
-      className={cn('relative flex flex-col', className)}
-      dir={direction}
-      style={style}
-      {...rest}>
-      {showControls && (
-        <div className="absolute end-3 top-3 z-10">
-          <ZoomControls onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} onReset={handleReset} zoom={displayZoom} />
-        </div>
-      )}
+    useEffect(() => {
+      const el = containerRef.current
+      if (!el) return
+
+      const dist = (e: TouchEvent) => {
+        const a = e.touches[0] ?? { clientX: 0, clientY: 0 }
+        const b = e.touches[1] ?? { clientX: 0, clientY: 0 }
+        return Math.hypot(a.clientX - b.clientX, a.clientY - b.clientY)
+      }
+
+      const onTouchStart = (e: TouchEvent) => {
+        if (e.touches.length === 2) {
+          e.preventDefault()
+          s.current.pinchDist = dist(e)
+          s.current.pinchZoom = s.current.zoom
+        }
+      }
+
+      const onTouchMove = (e: TouchEvent) => {
+        if (e.touches.length === 2) {
+          e.preventDefault()
+          const scale = dist(e) / s.current.pinchDist
+          s.current.zoom = clamp(s.current.pinchZoom * scale, minZoom, maxZoom)
+          markDirty()
+          scheduleApply()
+          syncDisplay()
+        }
+      }
+
+      el.addEventListener('touchstart', onTouchStart, { passive: false })
+      el.addEventListener('touchmove', onTouchMove, { passive: false })
+      return () => {
+        el.removeEventListener('touchstart', onTouchStart)
+        el.removeEventListener('touchmove', onTouchMove)
+      }
+    }, [markDirty, scheduleApply, syncDisplay, minZoom, maxZoom])
+
+    // Cleanup on unmount
+    useEffect(() => {
+      return () => {
+        if (s.current.rafId) cancelAnimationFrame(s.current.rafId)
+        clearTimeout(s.current.willChangeTimer)
+      }
+    }, [])
+
+    // Stable content props - only changes when html/children identity changes
+    const contentProps = useMemo(
+      () => (html ? { dangerouslySetInnerHTML: { __html: html } } : { children }),
+      [html, children],
+    )
+
+    // Stable inline style for the container
+    const containerStyle = useMemo(
+      () => ({ maxHeight, cursor: 'grab' as const, touchAction: 'none' as const }),
+      [maxHeight],
+    )
+    const direction = useDirection(dir as Direction)
+
+    return (
       <div
-        ref={containerRef}
-        className="flex flex-1 items-center justify-center overflow-hidden"
-        style={containerStyle}>
+        ref={ref}
+        data-slot="preview-panel"
+        className={cn('relative flex flex-col', className)}
+        dir={direction}
+        style={style}
+        {...rest}>
+        {showControls && (
+          <div className="absolute end-3 top-3 z-10">
+            <ZoomControls onZoomIn={handleZoomIn} onZoomOut={handleZoomOut} onReset={handleReset} zoom={displayZoom} />
+          </div>
+        )}
         <div
-          ref={contentRef}
-          className="flex w-full items-center justify-center p-6"
-          style={CONTENT_STYLE}
-          {...contentProps}
-        />
+          ref={containerRef}
+          className="flex flex-1 items-center justify-center overflow-hidden"
+          style={containerStyle}>
+          <div
+            ref={contentRef}
+            className="flex w-full items-center justify-center p-6"
+            style={CONTENT_STYLE}
+            {...contentProps}
+          />
+        </div>
       </div>
-    </div>
-  )
-}
+    )
+  },
+)
+PreviewPanel.displayName = 'PreviewPanel'
 
 const CONTENT_STYLE = { transformOrigin: 'center center' } as const
 

package/src/resizable/resizable.tsx

@@ -3,35 +3,36 @@
 import { cn } from '@gentleduck/libs/cn'
 import { type Direction, useDirection } from '@gentleduck/primitives/direction'
 import { GripVertical } from 'lucide-react'
-import type * as React from 'react'
+import React from 'react'
 import * as ResizablePrimitive from 'react-resizable-panels'
 
-const ResizablePanelGroup = ({
-  className,
-  dir,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Group> & { dir?: Direction }) => {
+const ResizablePanelGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Group> & { dir?: Direction }
+>(({ className, dir, ...props }, ref) => {
   const direction = useDirection(dir as Direction)
   return (
     <ResizablePrimitive.Group
       className={cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', className)}
       data-slot="panel-group"
       dir={direction}
+      elementRef={ref}
       {...props}
     />
   )
-}
+})
+ResizablePanelGroup.displayName = 'ResizablePanelGroup'
 
 const ResizablePanel = ResizablePrimitive.Panel
 
-const ResizableHandle = ({
-  withHandle,
-  className,
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Separator> & {
-  withHandle?: boolean
-}) => (
+const ResizableHandle = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<typeof ResizablePrimitive.Separator> & {
+    withHandle?: boolean
+  }
+>(({ withHandle, className, ...props }, ref) => (
   <ResizablePrimitive.Separator
+    elementRef={ref}
     aria-label="Resize panels"
     className={cn(
       'relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90',
@@ -47,6 +48,7 @@ const ResizableHandle = ({
       </div>
     )}
   </ResizablePrimitive.Separator>
-)
+))
+ResizableHandle.displayName = 'ResizableHandle'
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

package/src/select/select.tsx

@@ -6,10 +6,13 @@ import { Check, ChevronDown, ChevronUp } from 'lucide-react'
 import * as React from 'react'
 
 const Select = SelectPrimitive.Root
+Select.displayName = 'Select'
 
 const SelectGroup = SelectPrimitive.Group
+SelectGroup.displayName = 'SelectGroup'
 
 const SelectValue = SelectPrimitive.Value
+SelectValue.displayName = 'SelectValue'
 
 const SelectTrigger = React.forwardRef<
   React.ComponentRef<typeof SelectPrimitive.Trigger>,