@toolr/ui-design 0.1.0 → 0.1.2

package/components/sections/snapshot-browser/snapshot-tree.tsx

@@ -194,14 +194,14 @@ function SnapshotEntryRow({
 
   return (
     <div
-      className="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-[#313244]/50 text-[#a6adc8]"
+      className="flex items-center gap-2 px-2 py-1.5 text-sm rounded-md group transition-colors hover:bg-neutral-700/50 text-neutral-400"
       style={{ paddingLeft: `${depth * 16 + 8}px` }}
     >
-      <Clock className="w-3 h-3 shrink-0 text-[#6c7086]" />
+      <Clock className="w-3 h-3 shrink-0 text-neutral-500" />
       <span className="text-xs flex-1 truncate">
         {searchQuery ? highlightMatch(displayName, searchQuery) : displayName}
       </span>
-      <span className="text-[10px] text-[#6c7086] shrink-0" title={formatFullDate(entry.savedAt)}>
+      <span className="text-[10px] text-neutral-500 shrink-0" title={formatFullDate(entry.savedAt)}>
         {formatRelativeTime(entry.savedAt)}
       </span>
       <IconButton
@@ -248,7 +248,7 @@ function ExpandableNode({
     <div>
       <button
         onClick={() => onToggle(path)}
-        className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-[#a6adc8] hover:bg-[#313244]/50 hover:text-[#cdd6f4]"
+        className="w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer text-neutral-400 hover:bg-neutral-700/50 hover:text-neutral-300"
         style={{ paddingLeft: `${depth * 16 + 8}px` }}
       >
         <span className="w-4 h-4 flex items-center justify-center shrink-0">
@@ -266,7 +266,7 @@ function ExpandableNode({
         </span>
 
         {snapshotCount > 0 && (
-          <span className="text-xs text-[#6c7086] bg-[#313244] px-1.5 py-0.5 rounded shrink-0">
+          <span className="text-xs text-neutral-500 bg-neutral-700 px-1.5 py-0.5 rounded shrink-0">
             {snapshotCount}
           </span>
         )}
@@ -322,7 +322,7 @@ export function SnapshotTree({
 
   if (totalCount === 0) {
     return (
-      <div className={cn('text-sm text-[#6c7086] py-8 text-center', className)}>
+      <div className={cn('text-sm text-neutral-500 py-8 text-center', className)}>
         No snapshots saved yet.
         <br />
         <span className="text-xs">Use the camera button in editors to save snapshots.</span>
@@ -335,7 +335,7 @@ export function SnapshotTree({
       {/* Search and controls */}
       <div className="flex items-center gap-2">
         <div className="relative flex-1">
-          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-[#6c7086] pointer-events-none" />
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-neutral-500 pointer-events-none" />
           <Input
             placeholder="Search snapshots..."
             value={searchQuery}
@@ -375,9 +375,9 @@ export function SnapshotTree({
       </div>
 
       {/* Tree */}
-      <div className="bg-[#181825] border border-[#313244] rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
+      <div className="bg-neutral-900 border border-neutral-700 rounded-lg p-2 min-h-[200px] max-h-[60vh] overflow-y-auto">
         {filteredScopes.length === 0 && searchQuery ? (
-          <p className="text-xs text-[#6c7086] text-center py-4">
+          <p className="text-xs text-neutral-500 text-center py-4">
             No snapshots match &ldquo;{searchQuery}&rdquo;
           </p>
         ) : (
@@ -401,7 +401,7 @@ export function SnapshotTree({
                   label={category.name}
                   icon={
                     category.icon ? (
-                      <History className={cn('w-3.5 h-3.5', CATEGORY_ICON_COLORS[category.icon] || 'text-[#6c7086]')} />
+                      <History className={cn('w-3.5 h-3.5', CATEGORY_ICON_COLORS[category.icon] || 'text-neutral-500')} />
                     ) : undefined
                   }
                   snapshotCount={countCategorySnapshots(category)}
@@ -416,7 +416,7 @@ export function SnapshotTree({
                       id={item.id}
                       path={`${scope.id}/${category.id}/${item.id}`}
                       label={item.name}
-                      icon={<History className="w-3.5 h-3.5 text-[#6c7086]" />}
+                      icon={<History className="w-3.5 h-3.5 text-neutral-500" />}
                       snapshotCount={item.snapshots.length}
                       depth={2}
                       isExpanded={expandedPaths.has(`${scope.id}/${category.id}/${item.id}`)}

package/components/sections/snippets-editor/snippets-editor.tsx

@@ -98,25 +98,25 @@ export function SnippetsEditor({
   )
 
   return (
-    <div className={cn('flex flex-col bg-[#181825] border border-[#313244] rounded-lg overflow-hidden', className)}>
+    <div className={cn('flex flex-col bg-neutral-900 border border-neutral-700 rounded-lg overflow-hidden', className)}>
       {/* Header */}
-      <div className="flex items-center justify-between px-4 py-3 border-b border-[#313244] bg-purple-500/5">
+      <div className="flex items-center justify-between px-4 py-3 border-b border-neutral-700 bg-purple-500/5">
         <div className="flex items-center gap-2">
           <Braces className="w-4 h-4 text-purple-400" />
-          <h3 className="text-sm font-medium text-[#cdd6f4]">{title}</h3>
-          <span className="px-2 py-0.5 text-xs rounded-full bg-[#313244] text-[#a6adc8]">
+          <h3 className="text-sm font-medium text-neutral-300">{title}</h3>
+          <span className="px-2 py-0.5 text-xs rounded-full bg-neutral-700 text-neutral-400">
             {snippets.length}
           </span>
         </div>
-        <p className="text-xs text-[#6c7086] hidden sm:block">{description}</p>
+        <p className="text-xs text-neutral-500 hidden sm:block">{description}</p>
       </div>
 
       {/* Body: two columns */}
       <div className="flex flex-1 min-h-[400px]">
         {/* Left: Snippet list */}
-        <div className="flex flex-col border-r border-[#313244]" style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR }}>
+        <div className="flex flex-col border-r border-neutral-700" style={{ width: sidebarWidth, minWidth: MIN_SIDEBAR }}>
           {/* Search + Add */}
-          <div className="flex items-center gap-1.5 p-2 border-b border-[#313244]">
+          <div className="flex items-center gap-1.5 p-2 border-b border-neutral-700">
             <div className="flex-1">
               <Input
                 type="search"
@@ -141,10 +141,10 @@ export function SnippetsEditor({
             {filteredSnippets.length === 0 && !isAdding && (
               <div className="text-center py-10 px-4">
                 <Braces className="w-8 h-8 mx-auto text-purple-400/40 mb-3" />
-                <p className="text-xs text-[#6c7086] mb-1">
+                <p className="text-xs text-neutral-500 mb-1">
                   {searchQuery ? 'No matching snippets' : 'No snippets defined'}
                 </p>
-                <p className="text-[10px] text-[#45475a]">
+                <p className="text-[10px] text-neutral-600">
                   {searchQuery ? 'Try a different search term' : 'Click + to add your first snippet'}
                 </p>
               </div>
@@ -186,8 +186,8 @@ export function SnippetsEditor({
             <div className="flex-1 flex items-center justify-center p-6">
               <div className="text-center max-w-xs">
                 <Braces className="w-10 h-10 mx-auto text-purple-400/30 mb-4" />
-                <p className="text-sm text-[#6c7086] mb-2">Select a snippet to edit</p>
-                <p className="text-xs text-[#45475a] leading-relaxed">
+                <p className="text-sm text-neutral-500 mb-2">Select a snippet to edit</p>
+                <p className="text-xs text-neutral-600 leading-relaxed">
                   Choose a snippet from the list, or click{' '}
                   <span className="text-blue-400">+</span> to create a new one.
                   Reference snippets in prompts with{' '}
@@ -219,20 +219,20 @@ function SnippetListItem({ snippet, selected, onSelect, onDelete }: SnippetListI
       className={cn(
         'group flex items-start gap-2 px-3 py-2.5 cursor-pointer transition-colors border-l-2',
         selected
-          ? 'bg-[#1e1e2e] border-l-[#89b4fa]'
-          : 'border-l-transparent hover:bg-[#1e1e2e]/50',
+          ? 'bg-neutral-850 border-l-blue-400'
+          : 'border-l-transparent hover:bg-neutral-850/50',
       )}
       onClick={onSelect}
     >
       <div className="flex-1 min-w-0">
-        <p className="text-xs font-mono font-medium text-[#cdd6f4] truncate">
+        <p className="text-xs font-mono font-medium text-neutral-300 truncate">
           {snippet.name}
         </p>
-        <p className="text-[10px] text-[#6c7086] truncate mt-0.5">
+        <p className="text-[10px] text-neutral-500 truncate mt-0.5">
           {snippet.description}
         </p>
         {snippet.value && (
-          <p className="text-[10px] text-[#45475a] truncate mt-0.5 font-mono">
+          <p className="text-[10px] text-neutral-600 truncate mt-0.5 font-mono">
             {snippet.value.slice(0, 80)}{snippet.value.length > 80 ? '...' : ''}
           </p>
         )}
@@ -240,7 +240,7 @@ function SnippetListItem({ snippet, selected, onSelect, onDelete }: SnippetListI
       <button
         type="button"
         onClick={(e) => { e.stopPropagation(); onDelete() }}
-        className="opacity-0 group-hover:opacity-100 mt-0.5 p-0.5 rounded text-[#6c7086] hover:text-red-400 hover:bg-red-500/10 transition-all"
+        className="opacity-0 group-hover:opacity-100 mt-0.5 p-0.5 rounded text-neutral-500 hover:text-red-400 hover:bg-red-500/10 transition-all"
       >
         <X className="w-3 h-3" />
       </button>
@@ -282,7 +282,7 @@ function SnippetForm({
       <div className="flex-1 overflow-y-auto p-4 space-y-4">
         {/* Name */}
         <div>
-          <label className="block text-xs text-[#6c7086] mb-1.5">
+          <label className="block text-xs text-neutral-500 mb-1.5">
             Snippet Name <span className="text-red-400">*</span>
           </label>
           <Input
@@ -292,14 +292,14 @@ function SnippetForm({
             error={nameHasError}
             autoFocus={!isEditing}
           />
-          <p className="mt-1 text-[10px] text-[#45475a]">
+          <p className="mt-1 text-[10px] text-neutral-600">
             Use in prompts as <span className="font-mono text-purple-400">{'{{' + (formData.name || 'NAME') + '}}'}</span>
           </p>
         </div>
 
         {/* Description */}
         <div>
-          <label className="block text-xs text-[#6c7086] mb-1.5">
+          <label className="block text-xs text-neutral-500 mb-1.5">
             Description <span className="text-red-400">*</span>
           </label>
           <Input
@@ -311,7 +311,7 @@ function SnippetForm({
 
         {/* Value */}
         <div>
-          <label className="block text-xs text-[#6c7086] mb-1.5">Value</label>
+          <label className="block text-xs text-neutral-500 mb-1.5">Value</label>
           <ResizableTextarea
             mode="code"
             language="markdown"
@@ -319,7 +319,7 @@ function SnippetForm({
             onChange={(val) => setFormField('value', val)}
             minHeight={160}
           />
-          <p className="mt-1 text-[10px] text-[#45475a]">
+          <p className="mt-1 text-[10px] text-neutral-600">
             Can be a single value, multi-line text, or an entire document
           </p>
         </div>
@@ -333,7 +333,7 @@ function SnippetForm({
       </div>
 
       {/* Footer actions */}
-      <div className="flex items-center justify-between gap-2 border-t border-[#313244] px-4 py-3">
+      <div className="flex items-center justify-between gap-2 border-t border-neutral-700 px-4 py-3">
         <div>
           {onDelete && (
             <IconButton
@@ -352,7 +352,7 @@ function SnippetForm({
               type="button"
               onClick={onCancel}
               disabled={isSaving}
-              className="rounded-md border border-[#313244] bg-transparent px-3 py-1.5 text-xs text-[#a6adc8] transition-colors hover:bg-[#313244] hover:text-[#cdd6f4] disabled:opacity-50"
+              className="rounded-md border border-neutral-700 bg-transparent px-3 py-1.5 text-xs text-neutral-400 transition-colors hover:bg-neutral-700 hover:text-neutral-300 disabled:opacity-50"
             >
               Cancel
             </button>

package/components/settings/SettingsHeader.tsx

@@ -0,0 +1,78 @@
+import { type ReactNode } from 'react'
+import { RotateCcw, Info } from 'lucide-react'
+import { IconButton } from '../ui/icon-button.tsx'
+
+export interface SettingsHeaderProps {
+  description: string
+  icon?: ReactNode
+  onReset?: () => void
+  resetTooltip?: {
+    title: string
+    description: string
+  }
+  confirmReset?: boolean
+  action?: ReactNode
+  variant?: 'default' | 'info' | 'warning' | 'danger'
+}
+
+const variantStyles = {
+  default: {
+    border: 'border-l-blue-500/60',
+    iconBg: 'bg-blue-500/10',
+    iconColor: 'text-blue-400',
+  },
+  info: {
+    border: 'border-l-cyan-500/60',
+    iconBg: 'bg-cyan-500/10',
+    iconColor: 'text-cyan-400',
+  },
+  warning: {
+    border: 'border-l-orange-500/60',
+    iconBg: 'bg-orange-500/10',
+    iconColor: 'text-orange-400',
+  },
+  danger: {
+    border: 'border-l-red-500/60',
+    iconBg: 'bg-red-500/10',
+    iconColor: 'text-red-400',
+  },
+}
+
+export function SettingsHeader({
+  description,
+  icon,
+  onReset,
+  resetTooltip,
+  action,
+  variant = 'default',
+}: SettingsHeaderProps) {
+  const styles = variantStyles[variant]
+
+  return (
+    <div
+      className={`bg-neutral-950 border border-neutral-700 border-l-2 ${styles.border} rounded-lg p-4 flex items-center gap-4`}
+    >
+      <div className={`flex-shrink-0 w-8 h-8 rounded-lg ${styles.iconBg} flex items-center justify-center`}>
+        {icon ?? <Info className={`w-4 h-4 ${styles.iconColor}`} />}
+      </div>
+      <p className="flex-1 text-sm text-neutral-400 leading-relaxed">{description}</p>
+      <div className="flex-shrink-0 flex items-center gap-2">
+        {action}
+        {onReset && (
+          <IconButton
+            icon={<RotateCcw className="w-4 h-4" />}
+            onClick={onReset}
+            size="sm"
+            color="orange"
+            tooltip={
+              resetTooltip ?? {
+                title: 'Reset to Defaults',
+                description: 'Restore all settings to their default values',
+              }
+            }
+          />
+        )}
+      </div>
+    </div>
+  )
+}

package/components/settings/SettingsPanel.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react'
+import { SettingsTreeNav } from './SettingsTreeNav.tsx'
+import type { SettingsTreeNode } from './settings-tree-utils.ts'
+
+export interface SettingsPanelProps {
+  tree: SettingsTreeNode[]
+  selectedPath: string
+  onSelectPath: (path: string) => void
+  children: ReactNode
+}
+
+export function SettingsPanel({ tree, selectedPath, onSelectPath, children }: SettingsPanelProps) {
+  return (
+    <div className="flex-1 flex overflow-hidden">
+      <SettingsTreeNav tree={tree} selectedPath={selectedPath} onSelectPath={onSelectPath} />
+      <div className="flex-1 overflow-y-auto">
+        {children}
+      </div>
+    </div>
+  )
+}

package/components/settings/SettingsTreeNav.tsx

@@ -0,0 +1,256 @@
+import { useState, useEffect, useMemo } from 'react'
+import { ChevronRight, ChevronDown, ChevronsUpDown, ChevronsDownUp } from 'lucide-react'
+import { Input } from '../ui/input.tsx'
+import { IconButton } from '../ui/icon-button.tsx'
+import {
+  type SettingsTreeNode,
+  isLeafNode,
+  collectExpandablePaths,
+  getParentPaths,
+  filterTree,
+} from './settings-tree-utils.ts'
+
+export interface SettingsTreeNavProps {
+  tree: SettingsTreeNode[]
+  selectedPath: string
+  onSelectPath: (path: string) => void
+}
+
+interface TreeNodeProps {
+  node: SettingsTreeNode
+  path: string
+  selectedPath: string
+  onSelectPath: (path: string) => void
+  expandedPaths: Set<string>
+  onToggleExpand: (path: string) => void
+  depth: number
+  searchQuery?: string
+}
+
+function highlightMatch(text: string, query: string | undefined) {
+  if (!query) return text
+  const lowerText = text.toLowerCase()
+  const lowerQuery = query.toLowerCase()
+  const index = lowerText.indexOf(lowerQuery)
+  if (index === -1) return text
+  return (
+    <>
+      {text.slice(0, index)}
+      <span className="bg-yellow-500/30 text-yellow-200">
+        {text.slice(index, index + query.length)}
+      </span>
+      {text.slice(index + query.length)}
+    </>
+  )
+}
+
+function TreeNode({
+  node,
+  path,
+  selectedPath,
+  onSelectPath,
+  expandedPaths,
+  onToggleExpand,
+  depth,
+  searchQuery,
+}: TreeNodeProps) {
+  const isLeaf = isLeafNode(node)
+  const isExpanded = expandedPaths.has(path)
+  const isSelected = selectedPath === path
+  const isInSelectedPath = selectedPath.startsWith(path + '.')
+
+  const handleClick = () => {
+    if (isLeaf) {
+      onSelectPath(path)
+    } else {
+      onToggleExpand(path)
+    }
+  }
+
+  return (
+    <div>
+      <button
+        onClick={handleClick}
+        className={`
+          w-full flex items-center gap-2 px-2 py-1.5 text-sm rounded-md transition-colors cursor-pointer
+          ${isSelected ? 'bg-blue-500/20 text-blue-400' : isInSelectedPath ? 'text-neutral-300' : 'text-neutral-400'}
+          ${!isSelected && 'hover:bg-neutral-800 hover:text-neutral-200'}
+        `}
+        style={{ paddingLeft: `${depth * 12 + 8}px` }}
+      >
+        {!isLeaf && (
+          <span className="w-4 h-4 flex items-center justify-center flex-shrink-0">
+            {isExpanded ? (
+              <ChevronDown className="w-3.5 h-3.5" />
+            ) : (
+              <ChevronRight className="w-3.5 h-3.5" />
+            )}
+          </span>
+        )}
+
+        {isLeaf && <span className="w-4 h-4 flex-shrink-0" />}
+
+        <span className="flex-shrink-0">{node.icon}</span>
+
+        <span className="truncate">
+          {searchQuery ? highlightMatch(node.label, searchQuery) : node.label}
+        </span>
+      </button>
+
+      {!isLeaf && isExpanded && node.children && (
+        <div>
+          {node.children.map((child) => (
+            <TreeNode
+              key={child.id}
+              node={child}
+              path={`${path}.${child.id}`}
+              selectedPath={selectedPath}
+              onSelectPath={onSelectPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={onToggleExpand}
+              depth={depth + 1}
+              searchQuery={searchQuery}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export function SettingsTreeNav({ tree, selectedPath, onSelectPath }: SettingsTreeNavProps) {
+  const [expandedPaths, setExpandedPaths] = useState<Set<string>>(() => {
+    const expanded = new Set<string>()
+    if (selectedPath) {
+      for (const p of getParentPaths(selectedPath)) {
+        expanded.add(p)
+      }
+    }
+    return expanded
+  })
+
+  const [searchQuery, setSearchQuery] = useState('')
+
+  const allExpandablePaths = useMemo(() => collectExpandablePaths(tree), [tree])
+
+  const filteredTree = useMemo(
+    () => filterTree(tree, searchQuery),
+    [tree, searchQuery],
+  )
+
+  const collapsedCount = allExpandablePaths.filter((p) => !expandedPaths.has(p)).length
+  const allCollapsed = collapsedCount === allExpandablePaths.length && allExpandablePaths.length > 0
+  const allExpanded = collapsedCount === 0
+
+  useEffect(() => {
+    if (selectedPath) {
+      const parents = getParentPaths(selectedPath)
+      const newExpanded = new Set(expandedPaths)
+      let changed = false
+
+      for (const p of parents) {
+        if (!newExpanded.has(p)) {
+          newExpanded.add(p)
+          changed = true
+        }
+      }
+
+      if (changed) {
+        setExpandedPaths(newExpanded)
+      }
+    }
+  }, [selectedPath])
+
+  useEffect(() => {
+    if (searchQuery.trim()) {
+      setExpandedPaths(new Set(allExpandablePaths))
+    }
+  }, [searchQuery, allExpandablePaths])
+
+  const handleToggleExpand = (path: string) => {
+    setExpandedPaths((prev) => {
+      const next = new Set(prev)
+      if (next.has(path)) {
+        next.delete(path)
+      } else {
+        next.add(path)
+      }
+      return next
+    })
+  }
+
+  const handleExpandAll = () => {
+    setExpandedPaths(new Set(allExpandablePaths))
+  }
+
+  const handleCollapseAll = () => {
+    const parentPaths = getParentPaths(selectedPath)
+    setExpandedPaths(new Set(parentPaths))
+  }
+
+  return (
+    <nav className="w-56 flex-shrink-0 bg-neutral-900 border-r border-neutral-800 flex flex-col overflow-hidden">
+      <div className="p-2 border-b border-neutral-800">
+        <div className="flex items-center gap-1">
+          <Input
+            type="search"
+            placeholder="Search..."
+            value={searchQuery}
+            onChange={setSearchQuery}
+            size="sm"
+            variant="filled"
+          />
+
+          {!allExpanded && allExpandablePaths.length > 0 && (
+            <IconButton
+              icon={<ChevronsUpDown className="w-3.5 h-3.5" />}
+              onClick={handleExpandAll}
+              size="sm"
+              color="neutral"
+              tooltipPosition="left"
+              tooltip={{
+                title: 'Expand All',
+                description: 'Expand all sections',
+              }}
+            />
+          )}
+          {!allCollapsed && allExpandablePaths.length > 0 && (
+            <IconButton
+              icon={<ChevronsDownUp className="w-3.5 h-3.5" />}
+              onClick={handleCollapseAll}
+              size="sm"
+              color="neutral"
+              tooltipPosition="left"
+              tooltip={{
+                title: 'Collapse All',
+                description: 'Collapse all sections',
+              }}
+            />
+          )}
+        </div>
+      </div>
+
+      <div className="flex-1 overflow-y-auto py-2">
+        {filteredTree.length === 0 && searchQuery ? (
+          <p className="text-xs text-neutral-500 text-center py-4 px-2">
+            No settings match &quot;{searchQuery}&quot;
+          </p>
+        ) : (
+          filteredTree.map((node) => (
+            <TreeNode
+              key={node.id}
+              node={node}
+              path={node.id}
+              selectedPath={selectedPath}
+              onSelectPath={onSelectPath}
+              expandedPaths={expandedPaths}
+              onToggleExpand={handleToggleExpand}
+              depth={0}
+              searchQuery={searchQuery}
+            />
+          ))
+        )}
+      </div>
+    </nav>
+  )
+}

package/components/settings/index.ts

@@ -0,0 +1,7 @@
+export { SettingsPanel } from './SettingsPanel.tsx'
+export type { SettingsPanelProps } from './SettingsPanel.tsx'
+export { SettingsTreeNav } from './SettingsTreeNav.tsx'
+export type { SettingsTreeNavProps } from './SettingsTreeNav.tsx'
+export { SettingsHeader } from './SettingsHeader.tsx'
+export type { SettingsHeaderProps } from './SettingsHeader.tsx'
+export * from './settings-tree-utils.ts'