@toolr/ui-design 0.1.0

package/components/ui/registry-detail.tsx

@@ -0,0 +1,224 @@
+import { type ReactNode, useState, useRef, useEffect, useCallback } from 'react'
+import { ChevronsUpDown, ChevronsDownUp } from 'lucide-react'
+import { IconButton } from './icon-button.tsx'
+import { Label, type LabelProps } from './label.tsx'
+import { AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from '../lib/ai-tools.tsx'
+import { FileStructureSection, type FileStructureSectionProps } from './file-structure-section.tsx'
+import type { LucideIcon } from 'lucide-react'
+
+export interface RegistryDetailProps {
+  // Header
+  icon: LucideIcon
+  iconColor: string
+  title: string
+  titleExtra?: ReactNode
+  subtitle: ReactNode
+
+  // Action button area
+  actionButton?: ReactNode
+
+  // Labels (rendered in title row after title)
+  labels?: LabelProps[]
+
+  // Standard sections (rendered in order before children)
+  description?: string
+  longDescription?: string
+  integration?: boolean
+  compatibleTools?: string[]
+
+  // File structure (rendered when files + onFetchContent are provided)
+  files?: FileStructureSectionProps['files']
+  rootName?: string
+  onFetchContent?: FileStructureSectionProps['onFetchContent']
+
+  // Above header (e.g. badge row)
+  aboveHeader?: ReactNode
+
+  // Max width class
+  maxWidth?: string
+
+  // Custom body sections
+  children?: ReactNode
+}
+
+const MARKDOWN_CLASSES = 'text-sm text-neutral-400 leading-relaxed [&_strong]:text-neutral-200 [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:bg-neutral-700/40 [&_code]:border [&_code]:border-neutral-500/40 [&_code]:text-neutral-200 [&_code]:font-mono [&_code]:text-xs [&_h1]:text-lg [&_h1]:font-semibold [&_h1]:text-neutral-200 [&_h1]:mb-2 [&_h2]:text-base [&_h2]:font-semibold [&_h2]:text-neutral-200 [&_h2]:mb-2 [&_h3]:text-sm [&_h3]:font-medium [&_h3]:text-neutral-200 [&_h3]:mb-1 [&_ul]:list-disc [&_ul]:pl-4 [&_ol]:list-decimal [&_ol]:pl-4 [&_li]:mb-1 [&_p]:mb-2 [&_pre]:bg-neutral-900 [&_pre]:rounded [&_pre]:p-3 [&_pre]:overflow-x-auto [&_pre]:text-xs'
+
+// ── CollapsibleSection ────────────────────────────────────────────────────────
+
+const COLLAPSED_MAX_HEIGHT = 240
+
+function CollapsibleTextSection({ children, header }: { children: string; header?: string }) {
+  const contentRef = useRef<HTMLDivElement>(null)
+  const [overflows, setOverflows] = useState(false)
+  const [expanded, setExpanded] = useState(false)
+
+  const measure = useCallback(() => {
+    const el = contentRef.current
+    if (!el) return
+    setOverflows(el.scrollHeight > COLLAPSED_MAX_HEIGHT + 8)
+  }, [])
+
+  useEffect(() => {
+    measure()
+  }, [children, measure])
+
+  useEffect(() => {
+    const el = contentRef.current
+    if (!el) return
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    return () => observer.disconnect()
+  }, [measure])
+
+  const showCollapsed = overflows && !expanded
+
+  return (
+    <div>
+      {(header || overflows) && (
+        <div className="flex items-center justify-between mb-2">
+          {header && (
+            <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider">{header}</h3>
+          )}
+          {overflows && (
+            <IconButton
+              icon={expanded
+                ? <ChevronsDownUp className="w-3.5 h-3.5" />
+                : <ChevronsUpDown className="w-3.5 h-3.5" />}
+              onClick={() => setExpanded(!expanded)}
+              size="sm"
+              tooltip={{ description: expanded ? 'Show less content' : 'Show full content' }}
+            />
+          )}
+        </div>
+      )}
+
+      <div className="relative">
+        <div
+          ref={contentRef}
+          className={MARKDOWN_CLASSES}
+          style={showCollapsed ? { maxHeight: COLLAPSED_MAX_HEIGHT, overflow: 'hidden' } : undefined}
+        >
+          <p>{children}</p>
+        </div>
+
+        {showCollapsed && (
+          <div className="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-neutral-800 to-transparent pointer-events-none" />
+        )}
+      </div>
+    </div>
+  )
+}
+
+// ── CompatibleWithSection ─────────────────────────────────────────────────────
+
+function CompatibleWithSection({ tools }: { tools: string[] }) {
+  if (tools.length === 0) return null
+
+  return (
+    <div>
+      <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-3">Compatible with</h3>
+      <div className="flex items-start gap-3">
+        {tools.map((tool) => (
+          <div key={tool} className="flex flex-col items-center gap-1">
+            <AiToolIcon tool={tool} size={18} />
+            <span className="text-[10px] text-neutral-400">{AI_TOOL_NAMES[tool as AiToolKey] ?? tool}</span>
+          </div>
+        ))}
+      </div>
+    </div>
+  )
+}
+
+// ── Main Component ────────────────────────────────────────────────────────────
+
+export function RegistryDetail({
+  icon: Icon,
+  iconColor,
+  title,
+  titleExtra,
+  subtitle,
+  actionButton,
+  labels,
+  description,
+  longDescription,
+  integration,
+  compatibleTools,
+  files,
+  rootName,
+  onFetchContent,
+  aboveHeader,
+  maxWidth = 'max-w-[1440px]',
+  children,
+}: RegistryDetailProps) {
+  return (
+    <div className="h-full overflow-y-auto p-6">
+      <div className={`${maxWidth} mx-auto space-y-6`}>
+        {/* Above header badges */}
+        {aboveHeader}
+        {/* Header row */}
+        <div className="flex items-start justify-between gap-4">
+          <div className="min-w-0">
+            <div className="flex items-center gap-3 flex-wrap">
+              <Icon className={`w-6 h-6 shrink-0 ${iconColor}`} />
+              <h2 className="text-xl font-semibold text-neutral-200">{title}</h2>
+              {labels && labels.length > 0 && labels.map((labelProps, i) => (
+                <Label key={i} size="lg" {...labelProps} />
+              ))}
+              {titleExtra}
+            </div>
+            <div className="mt-1">{subtitle}</div>
+          </div>
+
+          {actionButton && (
+            <div className="shrink-0">
+              {actionButton}
+            </div>
+          )}
+        </div>
+
+        {/* Description */}
+        {description && (
+          <div>
+            <h3 className="text-xs font-medium text-neutral-500 uppercase tracking-wider mb-2">Description</h3>
+            <p className="text-sm text-neutral-400 leading-relaxed">{description}</p>
+          </div>
+        )}
+
+        {/* Long description (TL;DR) */}
+        {longDescription && (
+          <CollapsibleTextSection header="TL;DR">{longDescription}</CollapsibleTextSection>
+        )}
+
+        {/* Integration explanation */}
+        {integration && (
+          <CollapsibleTextSection header="Info">
+            {[
+              'This plugin contains no source files \u2014 only a README with setup instructions for an external tool you need to install on your machine (e.g. via brew or npm).',
+              '',
+              'Why install it then? Installing the plugin adds it to enabledPlugins in your settings. That entry is the signal the AI tool needs \u2014 without it, the AI tool has no idea the external tool exists, even if it\'s already on your machine. With it enabled, the AI tool will automatically find and use the external tool for code intelligence (go-to-definition, type checking, etc.).',
+              '',
+              'In short: the README tells you what to install locally, and the plugin setting tells the AI tool to use it.',
+            ].join('\n')}
+          </CollapsibleTextSection>
+        )}
+
+        {/* Compatible with */}
+        {compatibleTools && compatibleTools.length > 0 && (
+          <CompatibleWithSection tools={compatibleTools} />
+        )}
+
+        {/* File structure */}
+        {files && onFetchContent && rootName && (
+          <FileStructureSection
+            files={files}
+            rootName={rootName}
+            onFetchContent={onFetchContent}
+          />
+        )}
+
+        {/* Custom content */}
+        {children}
+      </div>
+    </div>
+  )
+}

package/components/ui/resizable-textarea.tsx

@@ -0,0 +1,290 @@
+import { useCallback, useRef, useState } from 'react'
+import Editor from '@monaco-editor/react'
+import { FORM_COLORS, type FormColor } from '../lib/form-colors.ts'
+
+const variantClasses = {
+  filled: 'bg-neutral-800 border text-neutral-200 placeholder-neutral-500',
+  outline: 'bg-transparent border text-neutral-200 placeholder-neutral-500',
+}
+
+interface ResizableTextareaBaseProps {
+  wrapperClassName?: string
+  resizable?: boolean
+  variant?: 'filled' | 'outline'
+  color?: FormColor
+}
+
+interface ResizableTextareaFieldProps
+  extends ResizableTextareaBaseProps,
+    Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color'> {
+  mode?: never
+  language?: never
+  children?: never
+  minHeight?: never
+  onHeightChange?: never
+}
+
+interface ResizableTextareaCodeProps extends ResizableTextareaBaseProps {
+  mode: 'code'
+  language?: string
+  value?: string
+  onChange?: (value: string) => void
+  readOnly?: boolean
+  minHeight?: number
+  onHeightChange?: (height: number) => void
+  children?: never
+}
+
+interface ResizableTextareaChildrenProps extends ResizableTextareaBaseProps {
+  mode?: never
+  language?: never
+  children: React.ReactNode
+  minHeight?: number
+  onHeightChange?: (height: number) => void
+}
+
+export type ResizableTextareaProps =
+  | ResizableTextareaFieldProps
+  | ResizableTextareaCodeProps
+  | ResizableTextareaChildrenProps
+
+function isCodeMode(props: ResizableTextareaProps): props is ResizableTextareaCodeProps {
+  return 'mode' in props && props.mode === 'code'
+}
+
+function isChildrenVariant(props: ResizableTextareaProps): props is ResizableTextareaChildrenProps {
+  return 'children' in props && props.children !== undefined
+}
+
+const ResizeSvg = () => (
+  <svg className="w-2.5 h-2.5 text-neutral-600 pointer-events-none" viewBox="0 0 10 10">
+    <line x1="9" y1="1" x2="1" y2="9" stroke="currentColor" strokeWidth="1" />
+    <line x1="9" y1="4.5" x2="4.5" y2="9" stroke="currentColor" strokeWidth="1" />
+  </svg>
+)
+
+export function ResizableTextarea(props: ResizableTextareaProps) {
+  if (isCodeMode(props)) {
+    return <ResizableCode {...props} />
+  }
+
+  if (isChildrenVariant(props)) {
+    return <ResizableChildren {...props} />
+  }
+
+  const { wrapperClassName, resizable = true, variant, color, ...rest } = props
+  return <ResizableField wrapperClassName={wrapperClassName} resizable={resizable} variant={variant} color={color} {...rest} />
+}
+
+// ---------------------------------------------------------------------------
+// Shared resize hook
+// ---------------------------------------------------------------------------
+
+function useResize(minHeight: number, onHeightChange?: (height: number) => void) {
+  const [height, setHeight] = useState<number | null>(null)
+  const dragRef = useRef<{ startY: number; startH: number } | null>(null)
+
+  const onResizeStart = useCallback(
+    (e: React.MouseEvent) => {
+      e.preventDefault()
+      const wrapper = (e.target as HTMLElement).closest('[data-resizable-wrapper]') as HTMLElement
+      if (!wrapper) return
+      const startH = wrapper.offsetHeight
+      dragRef.current = { startY: e.clientY, startH }
+      const onMove = (ev: MouseEvent) => {
+        if (!dragRef.current) return
+        const newH = Math.max(minHeight, dragRef.current.startH + ev.clientY - dragRef.current.startY)
+        setHeight(newH)
+        onHeightChange?.(newH)
+      }
+      const onUp = () => {
+        dragRef.current = null
+        document.removeEventListener('mousemove', onMove)
+        document.removeEventListener('mouseup', onUp)
+      }
+      document.addEventListener('mousemove', onMove)
+      document.addEventListener('mouseup', onUp)
+    },
+    [minHeight, onHeightChange],
+  )
+
+  return { height, onResizeStart }
+}
+
+// ---------------------------------------------------------------------------
+// Code variant — Monaco editor with resize handle
+// ---------------------------------------------------------------------------
+
+const MONACO_THEME = 'resizable-textarea-dark'
+let themeRegistered = false
+
+const codeWrapperClasses = {
+  filled: 'bg-neutral-800 border rounded-lg overflow-hidden',
+  outline: 'bg-transparent border rounded-lg overflow-hidden',
+}
+
+function ResizableCode({
+  value = '',
+  onChange,
+  language = 'plaintext',
+  readOnly = false,
+  variant = 'outline',
+  color = 'blue',
+  resizable = true,
+  wrapperClassName,
+  minHeight = 80,
+  onHeightChange,
+}: ResizableTextareaCodeProps) {
+  const { height, onResizeStart } = useResize(minHeight, onHeightChange)
+
+  return (
+    <div
+      className={`relative ${codeWrapperClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
+      data-resizable-wrapper
+      style={{ height: height ?? minHeight }}
+    >
+      <Editor
+        height="100%"
+        language={language}
+        value={value}
+        onChange={(v) => onChange?.(v ?? '')}
+        theme={MONACO_THEME}
+        options={{
+          minimap: { enabled: false },
+          fontSize: 13,
+          lineNumbers: 'off',
+          wordWrap: 'on',
+          scrollBeyondLastLine: false,
+          automaticLayout: true,
+          folding: false,
+          lineDecorationsWidth: 8,
+          renderLineHighlight: 'none',
+          scrollbar: { vertical: 'auto', horizontal: 'hidden', verticalScrollbarSize: 8 },
+          contextmenu: false,
+          tabSize: 2,
+          padding: { top: 8, bottom: 8 },
+          readOnly,
+          overviewRulerLanes: 0,
+          hideCursorInOverviewRuler: true,
+          overviewRulerBorder: false,
+          glyphMargin: false,
+        }}
+        beforeMount={(monaco) => {
+          if (!themeRegistered) {
+            monaco.editor.defineTheme(MONACO_THEME, {
+              base: 'vs-dark',
+              inherit: true,
+              rules: [],
+              colors: {
+                'editor.background': variant === 'filled' ? '#1f2937' : '#00000000',
+                'editorGutter.background': variant === 'filled' ? '#1f2937' : '#00000000',
+                'editor.lineHighlightBackground': '#00000000',
+                'editor.lineHighlightBorder': '#00000000',
+              },
+            })
+            themeRegistered = true
+          }
+        }}
+      />
+      {resizable && (
+        <div
+          className="absolute bottom-[4px] right-[3px] w-4 h-3 cursor-row-resize flex items-end justify-end z-10"
+          onMouseDown={onResizeStart}
+        >
+          <ResizeSvg />
+        </div>
+      )}
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Children variant — wraps any element with resize handle
+// ---------------------------------------------------------------------------
+
+const childrenVariantClasses = {
+  filled: 'bg-neutral-800 border rounded-lg overflow-hidden',
+  outline: 'bg-transparent border rounded-lg overflow-hidden',
+}
+
+function ResizableChildren({
+  children,
+  wrapperClassName,
+  resizable = true,
+  variant = 'outline',
+  color = 'blue',
+  minHeight = 40,
+  onHeightChange,
+}: ResizableTextareaChildrenProps) {
+  const { height, onResizeStart } = useResize(minHeight, onHeightChange)
+
+  if (!resizable) {
+    return <>{children}</>
+  }
+
+  return (
+    <div
+      className={`relative ${childrenVariantClasses[variant]} ${FORM_COLORS[color].border} ${wrapperClassName ?? ''}`}
+      data-resizable-wrapper
+      style={height != null ? { height } : undefined}
+    >
+      {children}
+      <div
+        className="absolute bottom-[4px] right-[3px] w-4 h-3 cursor-row-resize flex items-end justify-end"
+        onMouseDown={onResizeStart}
+      >
+        <ResizeSvg />
+      </div>
+    </div>
+  )
+}
+
+// ---------------------------------------------------------------------------
+// Field variant — original textarea with resize handle
+// ---------------------------------------------------------------------------
+
+function ResizableField({
+  wrapperClassName,
+  resizable = true,
+  variant = 'outline',
+  color = 'blue',
+  ...props
+}: ResizableTextareaBaseProps & Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color'>) {
+  const taRef = useRef<HTMLTextAreaElement>(null)
+  const dragRef = useRef<{ startY: number; startH: number } | null>(null)
+  const onResizeStart = useCallback((e: React.MouseEvent) => {
+    e.preventDefault()
+    const ta = taRef.current
+    if (!ta) return
+    dragRef.current = { startY: e.clientY, startH: ta.offsetHeight }
+    const onMove = (ev: MouseEvent) => {
+      if (!dragRef.current || !ta) return
+      ta.style.height = `${Math.max(40, dragRef.current.startH + ev.clientY - dragRef.current.startY)}px`
+    }
+    const onUp = () => {
+      dragRef.current = null
+      document.removeEventListener('mousemove', onMove)
+      document.removeEventListener('mouseup', onUp)
+    }
+    document.addEventListener('mousemove', onMove)
+    document.addEventListener('mouseup', onUp)
+  }, [])
+
+  const className = `w-full rounded-lg focus:outline-none transition-colors ${variantClasses[variant]} ${FORM_COLORS[color].border} ${FORM_COLORS[color].focus} ${props.className ?? ''}`
+
+  if (!resizable) {
+    return <textarea {...props} className={className} style={{ resize: 'none', ...props.style }} />
+  }
+
+  return (
+    <div className={`relative ${wrapperClassName ?? ''}`}>
+      <textarea ref={taRef} {...props} className={className} style={{ resize: 'none', ...props.style }} />
+      <div
+        className="absolute bottom-[8px] right-[3px] w-4 h-3 cursor-row-resize flex items-end justify-end"
+        onMouseDown={onResizeStart}
+      >
+        <ResizeSvg />
+      </div>
+    </div>
+  )
+}

package/components/ui/scope-badge.tsx

@@ -0,0 +1,67 @@
+import { Home, Folder, Lock, Eye } from 'lucide-react'
+import { Label, type LabelColor } from './label.tsx'
+
+export type ScopeType = 'user' | 'project' | 'local' | 'read-only'
+
+interface ScopeBadgeProps {
+  scope: ScopeType
+  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+}
+
+const scopeConfig: Record<
+  ScopeType,
+  {
+    icon: typeof Home
+    label: string
+    color: LabelColor
+    title: string
+    description: string
+  }
+> = {
+  user: {
+    icon: Home,
+    label: 'user',
+    color: 'emerald',
+    title: 'User-level',
+    description: 'From ~/.claude/ - Available to all projects',
+  },
+  project: {
+    icon: Folder,
+    label: 'project',
+    color: 'blue',
+    title: 'Project-level',
+    description: 'From .claude/ - Shared via version control',
+  },
+  local: {
+    icon: Lock,
+    label: 'local',
+    color: 'pink',
+    title: 'Local',
+    description: 'Personal to this project only, gitignored',
+  },
+  'read-only': {
+    icon: Eye,
+    label: 'read-only',
+    color: 'amber',
+    title: 'Read-Only',
+    description: 'This file cannot be edited',
+  },
+}
+
+export function ScopeBadge({ scope, size = 'xs' }: ScopeBadgeProps) {
+  const config = scopeConfig[scope]
+  const Icon = config.icon
+
+  return (
+    <Label
+      text={config.label}
+      color={config.color}
+      IconComponent={Icon}
+      tooltip={{
+        title: config.title,
+        description: config.description,
+      }}
+      size={size}
+    />
+  )
+}