@toolr/ui-design 0.1.0

package/components/ui/number-input.tsx

@@ -0,0 +1,165 @@
+import { useState, useRef, useCallback, type KeyboardEvent } from 'react'
+import { ChevronUp, ChevronDown } from 'lucide-react'
+import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+
+export interface NumberInputProps {
+  value: number
+  onChange: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  variant?: 'filled' | 'outline'
+  color?: FormColor
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  disabled?: boolean
+  className?: string
+}
+
+const SIZE_CONFIG = {
+  xss: { wrapper: 'h-[18px]', input: 'px-1 text-[10px]', chevron: 'w-2.5 h-2.5', stepperW: 'w-4' },
+  xs: { wrapper: 'h-6', input: 'px-1.5 text-xs', chevron: 'w-2.5 h-2.5', stepperW: 'w-5' },
+  sm: { wrapper: 'h-7', input: 'px-2 text-xs', chevron: 'w-3 h-3', stepperW: 'w-5' },
+  md: { wrapper: 'h-8', input: 'px-3 text-sm', chevron: 'w-3 h-3', stepperW: 'w-6' },
+  lg: { wrapper: 'h-9', input: 'px-3 text-sm', chevron: 'w-3.5 h-3.5', stepperW: 'w-7' },
+}
+
+const VARIANT_CLASSES = {
+  filled: 'bg-neutral-800',
+  outline: 'bg-transparent',
+}
+
+export function NumberInput({
+  value,
+  onChange,
+  min,
+  max,
+  step = 1,
+  variant = 'outline',
+  color = 'blue',
+  size = 'sm',
+  disabled = false,
+  className = '',
+}: NumberInputProps) {
+  const [focused, setFocused] = useState(false)
+  const [editText, setEditText] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+
+  const clamp = useCallback((n: number) => {
+    if (min != null && n < min) return min
+    if (max != null && n > max) return max
+    return n
+  }, [min, max])
+
+  const nudge = useCallback((direction: 1 | -1) => {
+    onChange(clamp(value + step * direction))
+  }, [value, step, clamp, onChange])
+
+  const handleKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'ArrowUp') {
+      e.preventDefault()
+      nudge(1)
+    } else if (e.key === 'ArrowDown') {
+      e.preventDefault()
+      nudge(-1)
+    }
+  }
+
+  const commitEdit = () => {
+    if (editText != null) {
+      const parsed = Number(editText)
+      if (!Number.isNaN(parsed)) {
+        onChange(clamp(parsed))
+      }
+      setEditText(null)
+    }
+    setFocused(false)
+  }
+
+  const sc = SIZE_CONFIG[size]
+  const fc = FORM_COLORS[color]
+
+  return (
+    <div
+      className={`
+        inline-flex items-stretch rounded-lg border transition-colors
+        ${VARIANT_CLASSES[variant]}
+        ${focused ? fc.focus.replace('focus:', '') : fc.border}
+        ${disabled ? 'opacity-50 cursor-not-allowed' : ''}
+        ${className}
+      `}
+    >
+      <input
+        ref={inputRef}
+        type="text"
+        inputMode="numeric"
+        value={editText ?? value}
+        onChange={(e) => setEditText(e.target.value)}
+        onFocus={() => {
+          setFocused(true)
+          setEditText(String(value))
+        }}
+        onBlur={commitEdit}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter') {
+            commitEdit()
+            inputRef.current?.blur()
+          } else {
+            handleKeyDown(e)
+          }
+        }}
+        disabled={disabled}
+        style={{ width: `${Math.max(1, String(editText ?? value).length) + 0.5}ch` }}
+        className={`
+          ${sc.wrapper} ${sc.input}
+          bg-transparent text-neutral-200 text-right
+          focus:outline-none
+          box-content min-w-0
+          disabled:cursor-not-allowed
+          [appearance:textfield]
+          [&::-webkit-outer-spin-button]:appearance-none
+          [&::-webkit-inner-spin-button]:appearance-none
+        `}
+      />
+      <div
+        className={`
+          flex flex-col border-l ${fc.border} ${sc.stepperW}
+          ${disabled ? 'pointer-events-none' : ''}
+        `}
+      >
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => nudge(1)}
+          disabled={disabled || (max != null && value >= max)}
+          className={`
+            flex-1 flex items-center justify-center
+            text-neutral-500 hover:text-neutral-200 hover:bg-white/5
+            transition-colors cursor-pointer
+            disabled:opacity-30 disabled:cursor-not-allowed
+            rounded-tr-[calc(0.5rem-1px)]
+          `}
+        >
+          <ChevronUp className={sc.chevron} />
+        </button>
+        <div className={`border-t ${fc.border}`} />
+        <button
+          type="button"
+          tabIndex={-1}
+          onMouseDown={(e) => e.preventDefault()}
+          onClick={() => nudge(-1)}
+          disabled={disabled || (min != null && value <= min)}
+          className={`
+            flex-1 flex items-center justify-center
+            text-neutral-500 hover:text-neutral-200 hover:bg-white/5
+            transition-colors cursor-pointer
+            disabled:opacity-30 disabled:cursor-not-allowed
+            rounded-br-[calc(0.5rem-1px)]
+          `}
+        >
+          <ChevronDown className={sc.chevron} />
+        </button>
+      </div>
+    </div>
+  )
+}

package/components/ui/registry-browser.tsx

@@ -0,0 +1,261 @@
+import { type ReactNode, useState, useEffect, useRef, useCallback } from 'react'
+import { Search, ArrowRight, RefreshCw, Loader2, X, AlertTriangle } from 'lucide-react'
+import { IconButton } from './icon-button.tsx'
+import { Input } from './input.tsx'
+import { RegistryCard, type RegistryCardProps } from './registry-card.tsx'
+
+const PAGE_SIZE = 60
+
+export interface RegistryBrowserProps {
+  // Content states
+  isLoading: boolean
+  loadingMessage?: string
+  error: string | null
+  isEmpty: boolean
+  emptyMessage?: string
+  onRetry?: () => void
+
+  // Search
+  searchQuery: string
+  onSearchChange: (q: string) => void
+  onSearchSubmit?: () => void
+  searchPlaceholder?: string
+
+  // Debounce indicator: increment key on each keystroke to restart the animation
+  debounceKey?: number
+  debounceDurationMs?: number
+
+  // Toolbar extras (between search and refresh)
+  toolbarCenter?: ReactNode
+  toolbarEnd?: ReactNode
+
+  // Refresh
+  onRefresh?: () => void
+  refreshTooltip?: { title?: string; description: string }
+
+  // Above grid (e.g., type tabs, suggested tags)
+  aboveGrid?: ReactNode
+
+  // Reset filters
+  hasActiveFilters?: boolean
+  onResetFilters?: () => void
+
+  // Scroll persistence
+  initialScrollTop?: number
+  onScrollChange?: (scrollTop: number) => void
+
+  // Max width class
+  maxWidth?: string
+
+  // Grid items
+  items: RegistryCardProps[]
+}
+
+export function RegistryBrowser({
+  isLoading,
+  loadingMessage = 'Loading...',
+  error,
+  isEmpty,
+  emptyMessage = 'No items match your filters.',
+  onRetry,
+  searchQuery,
+  onSearchChange,
+  onSearchSubmit,
+  searchPlaceholder = 'Search...',
+  debounceKey,
+  debounceDurationMs = 1000,
+  toolbarCenter,
+  toolbarEnd,
+  onRefresh,
+  refreshTooltip,
+  aboveGrid,
+  hasActiveFilters,
+  onResetFilters,
+  initialScrollTop,
+  onScrollChange,
+  maxWidth = 'max-w-[1440px]',
+  items,
+}: RegistryBrowserProps) {
+  // Incremental rendering: render a page at a time, load more on scroll
+  const totalCount = items.length
+  const needsPaging = totalCount > PAGE_SIZE
+
+  const [visibleCount, setVisibleCount] = useState(PAGE_SIZE)
+  const scrollRef = useRef<HTMLDivElement>(null)
+  const sentinelRef = useRef<HTMLDivElement>(null)
+  const isFirstRender = useRef(true)
+  const prevTotalCount = useRef(totalCount)
+
+  // Reset visible count when the item list changes (filters/sort/search)
+  useEffect(() => {
+    setVisibleCount(PAGE_SIZE)
+  }, [totalCount])
+
+  // Scroll back to top when list changes — but skip on first render if restoring scroll
+  useEffect(() => {
+    if (isFirstRender.current) {
+      isFirstRender.current = false
+      if (initialScrollTop && initialScrollTop > 0) {
+        // Restore scroll position on first render
+        requestAnimationFrame(() => {
+          scrollRef.current?.scrollTo(0, initialScrollTop)
+        })
+        prevTotalCount.current = totalCount
+        return
+      }
+    }
+    // Only scroll to top when totalCount actually changes (filter/search action)
+    if (totalCount !== prevTotalCount.current) {
+      scrollRef.current?.scrollTo(0, 0)
+      prevTotalCount.current = totalCount
+    }
+  }, [totalCount, initialScrollTop])
+
+  // Debounced scroll position reporting
+  const scrollTimerRef = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
+  const handleScroll = useCallback(() => {
+    if (!onScrollChange) return
+    clearTimeout(scrollTimerRef.current)
+    scrollTimerRef.current = setTimeout(() => {
+      if (scrollRef.current) {
+        onScrollChange(scrollRef.current.scrollTop)
+      }
+    }, 150)
+  }, [onScrollChange])
+
+  const loadMore = useCallback(() => {
+    setVisibleCount((prev: number) => Math.min(prev + PAGE_SIZE, totalCount))
+  }, [totalCount])
+
+  // IntersectionObserver using the scroll container as root
+  useEffect(() => {
+    const sentinel = sentinelRef.current
+    const scrollRoot = scrollRef.current
+    if (!sentinel || !scrollRoot || !needsPaging) return
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) loadMore()
+      },
+      { root: scrollRoot, rootMargin: '400px' },
+    )
+    observer.observe(sentinel)
+    return () => observer.disconnect()
+  }, [needsPaging, loadMore])
+
+  const visibleItems = needsPaging ? items.slice(0, visibleCount) : items
+  const hasMore = visibleCount < totalCount
+
+  return (
+    <div ref={scrollRef} className="h-full overflow-y-auto p-4 pb-8" onScroll={handleScroll}>
+      {/* Toolbar */}
+      <div className="sticky top-0 flex items-center gap-2 pb-4">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500" />
+          <Input
+            value={searchQuery}
+            onChange={onSearchChange}
+            onKeyDown={onSearchSubmit ? (e: { key: string }) => { if (e.key === 'Enter') onSearchSubmit() } : undefined}
+            placeholder={searchPlaceholder}
+            variant="outline"
+            className="pl-8 pr-8"
+          />
+          {searchQuery && (
+            <button
+              type="button"
+              onClick={() => onSearchChange('')}
+              className="absolute right-2 top-1/2 -translate-y-1/2 w-[18px] h-[18px] flex items-center justify-center rounded-md text-neutral-400 hover:text-neutral-300 hover:bg-neutral-500/20 transition-colors"
+            >
+              <X className="w-2.5 h-2.5" />
+            </button>
+          )}
+          {debounceKey != null && debounceKey > 0 && (
+            <svg
+              key={debounceKey}
+              className="absolute inset-0 pointer-events-none"
+              style={{ width: '100%', height: '100%' }}
+            >
+              <rect
+                x="1" y="1" rx="5" ry="5"
+                fill="none"
+                stroke="rgb(52 211 153 / 0.7)"
+                strokeWidth="1.5"
+                pathLength="100"
+                strokeDasharray="100"
+                strokeDashoffset="0"
+                style={{
+                  width: 'calc(100% - 2px)',
+                  height: 'calc(100% - 2px)',
+                  animation: `debounce-border-drain ${debounceDurationMs}ms linear forwards`,
+                }}
+              />
+            </svg>
+          )}
+        </div>
+
+        {onSearchSubmit && (
+          <IconButton
+            icon={<ArrowRight className="w-3.5 h-3.5" />}
+            onClick={onSearchSubmit}
+            size="sm"
+            color="blue"
+            tooltip={{ description: 'Search' }}
+          />
+        )}
+
+        <div className="flex-1" />
+
+        {toolbarCenter}
+        {toolbarEnd}
+
+        {onRefresh && (
+          <IconButton
+            icon={<RefreshCw className="w-3.5 h-3.5" />}
+            onClick={onRefresh}
+            size="sm"
+            tooltip={refreshTooltip ?? { description: 'Refresh registry data' }}
+          />
+        )}
+      </div>
+
+      {/* Above grid */}
+      {aboveGrid}
+
+      {/* Content */}
+      <div className={`${maxWidth} mx-auto relative z-10`}>
+        {isLoading ? (
+          <div className="flex items-center justify-center py-12 text-neutral-500">
+            <Loader2 className="w-5 h-5 animate-spin mr-2" />
+            {loadingMessage}
+          </div>
+        ) : error ? (
+          <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
+            <AlertTriangle className="w-6 h-6 text-amber-400 mb-2" />
+            <p className="text-sm">{error}</p>
+            {onRetry && (
+              <button onClick={onRetry} className="mt-2 text-xs text-blue-400 hover:underline cursor-pointer">
+                Try again
+              </button>
+            )}
+          </div>
+        ) : isEmpty ? (
+          <div className="flex flex-col items-center justify-center py-12 text-neutral-500">
+            <p className="text-sm">{emptyMessage}</p>
+            {hasActiveFilters && onResetFilters && (
+              <button onClick={onResetFilters} className="mt-2 text-xs text-blue-400 hover:underline cursor-pointer">
+                Reset filters
+              </button>
+            )}
+          </div>
+        ) : (
+          <div className="grid grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-2">
+            {visibleItems.map((item) => (
+              <RegistryCard key={item.name} {...item} />
+            ))}
+            {hasMore && <div ref={sentinelRef} className="col-span-full h-1" />}
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}