@toolr/ui-design 0.1.9 → 0.1.11

package/components/lib/form-colors.ts

@@ -38,22 +38,22 @@ export const ACCENT_TEXT: Record<AccentColor, string> = {
 
 export const ACCENT_ICON = ACCENT_TEXT
 
-export const ACCENT_NAV: Record<AccentColor, { bg: string; text: string }> = {
-  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400' },
-  green: { bg: 'bg-green-500/10', text: 'text-green-400' },
-  red: { bg: 'bg-red-500/10', text: 'text-red-400' },
-  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400' },
-  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400' },
-  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400' },
-  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400' },
-  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400' },
-  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400' },
-  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400' },
-  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400' },
-  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400' },
-  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400' },
-  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400' },
-  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400' },
+export const ACCENT_NAV: Record<AccentColor, { bg: string; text: string; border: string }> = {
+  blue: { bg: 'bg-blue-500/10', text: 'text-blue-400', border: 'border-blue-500/30' },
+  green: { bg: 'bg-green-500/10', text: 'text-green-400', border: 'border-green-500/30' },
+  red: { bg: 'bg-red-500/10', text: 'text-red-400', border: 'border-red-500/30' },
+  orange: { bg: 'bg-orange-500/10', text: 'text-orange-400', border: 'border-orange-500/30' },
+  cyan: { bg: 'bg-cyan-500/10', text: 'text-cyan-400', border: 'border-cyan-500/30' },
+  yellow: { bg: 'bg-yellow-500/10', text: 'text-yellow-400', border: 'border-yellow-500/30' },
+  purple: { bg: 'bg-purple-500/10', text: 'text-purple-400', border: 'border-purple-500/30' },
+  indigo: { bg: 'bg-indigo-500/10', text: 'text-indigo-400', border: 'border-indigo-500/30' },
+  emerald: { bg: 'bg-emerald-500/10', text: 'text-emerald-400', border: 'border-emerald-500/30' },
+  amber: { bg: 'bg-amber-500/10', text: 'text-amber-400', border: 'border-amber-500/30' },
+  violet: { bg: 'bg-violet-500/10', text: 'text-violet-400', border: 'border-violet-500/30' },
+  neutral: { bg: 'bg-neutral-500/10', text: 'text-neutral-400', border: 'border-neutral-500/30' },
+  sky: { bg: 'bg-sky-500/10', text: 'text-sky-400', border: 'border-sky-500/30' },
+  pink: { bg: 'bg-pink-500/10', text: 'text-pink-400', border: 'border-pink-500/30' },
+  teal: { bg: 'bg-teal-500/10', text: 'text-teal-400', border: 'border-teal-500/30' },
 }
 
 export const FORM_COLORS: Record<FormColor, FormColorConfig> = {

package/components/lib/toolr-brand.tsx

@@ -9,7 +9,7 @@ export const TOOLR_APPS: Record<ToolrAppId, { name: string; accent: string }> =
   configr: { name: 'Configr', accent: 'violet' },   // #8b5cf6
   reviewr: { name: 'Reviewr', accent: 'orange' },   // #f97316
   learnr:  { name: 'Learnr',  accent: 'yellow' },   // #eab308
-  seedr:   { name: 'Seedr',   accent: 'cyan' },     // #06b6d4
+  seedr:   { name: 'Seedr',   accent: 'green' },    // #22c55e
   planr:   { name: 'Planr',   accent: 'pink' },     // #ec4899 (not in ACCENT_DEFS, fallback hex)
   vibr:    { name: 'Vibr',    accent: 'red' },      // #ef4444
 }

package/components/ui/breadcrumb.tsx

@@ -77,13 +77,13 @@ export function Breadcrumb({
     <nav className={cn('flex items-center min-w-0', className)}>
       <div className={cn(
         'flex items-center gap-1',
-        isBox && [s.px, s.py, 'bg-neutral-960/50 border border-neutral-700/50 rounded-lg'],
+        isBox && [s.px, s.py, 'bg-neutral-960/50 rounded-lg'],
       )}>
         {segments.map((segment, index) => {
           const isLast = index === segments.length - 1
           const isClickable = !isLast && !!segment.onClick
           const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
-          const isFirstPlain = !isBox && index === 0
+          const isFirst = !isBox && index === 0
 
           return (
             <div key={segment.id} className="flex items-center gap-1 min-w-0">
@@ -94,7 +94,7 @@ export function Breadcrumb({
                   onClick={segment.onClick}
                   className={cn(
                     'flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
-                    isFirstPlain ? 'pl-0' : 'pl-2',
+                    isFirst ? 'pl-0' : 'pl-2',
                     s.text,
                     'font-medium hover:text-white',
                     colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
@@ -107,10 +107,10 @@ export function Breadcrumb({
                 <div
                   className={cn(
                     'flex items-center gap-1.5 pr-2 py-0.5 rounded-md min-w-0',
-                    isFirstPlain ? 'pl-0' : 'pl-2',
+                    isFirst ? 'pl-0' : 'pl-2',
                     s.text,
                     isLast
-                      ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
+                      ? 'font-medium text-white'
                       : ['font-medium', colors ? colors.text : 'text-neutral-300'],
                   )}
                 >

package/components/ui/file-structure-section.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect, useCallback, useRef, useMemo, type ReactNode } from 'react'
 import { FileCode, FolderTree, Loader2, AlertCircle, AlignLeft, Code2, Type } from 'lucide-react'
 import { type AccentColor, ACCENT_ICON } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { CollapseButton } from './icon-button.tsx'
 import { SegmentedToggle } from './segmented-toggle.tsx'
 import { FileTree, collectDirPaths, type FileTreeNode } from './file-tree.tsx'
@@ -124,10 +125,12 @@ export function FileStructureSection({
   format,
   language,
   default: defaultMode,
-  accentColor = 'blue',
+  accentColor: accentColorProp,
   renderPreview,
   initialHeight,
 }: FileStructureSectionProps) {
+  const contextAccent = useAccentColor()
+  const accentColor = accentColorProp ?? contextAccent ?? 'blue'
   const [selectedFilePath, setSelectedFilePath] = useState<string | null>(null)
   const [fileContent, setFileContent] = useState<string | null>(null)
   const [fetchedFilePath, setFetchedFilePath] = useState<string | null>(null)
@@ -335,7 +338,7 @@ export function FileStructureSection({
         <CollapseButton
           collapsed={allCollapsed}
           onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
-          accentColor={accentColor}
+          accentColor="neutral"
         />
       </div>
       <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>

package/components/ui/input.tsx

@@ -26,7 +26,7 @@ import { useAccentColor } from '../lib/accent-context.ts'
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
   value: string
   onChange: (value: string) => void
-  type?: 'text' | 'search' | 'password'
+  type?: 'text' | 'search' | 'password' | 'email'
   debounceMs?: number
   error?: boolean | string
   variant?: 'filled' | 'outline'

package/components/ui/navigation-bar.tsx

@@ -18,10 +18,13 @@ export interface NavigationBarProps {
   onForward?: () => void
   showHistory?: boolean
   historyEntries?: BreadcrumbSegment[][]
+  currentHistoryIndex?: number
   onHistorySelect?: (index: number) => void
   leadingAction?: { icon: IconName; onClick?: () => void }
   separator?: 'chevron' | 'slash' | 'dot'
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
+  /** 'bar' (default): all-in-one bordered box. 'header': nav controls left-aligned, breadcrumb absolutely centered. */
+  layout?: 'bar' | 'header'
   accentColor?: AccentColor
   className?: string
 }
@@ -113,10 +116,12 @@ export function NavigationBar({
   onForward,
   showHistory = false,
   historyEntries,
+  currentHistoryIndex,
   onHistorySelect,
   leadingAction,
   separator = 'chevron',
   size = 'sm',
+  layout = 'bar',
   accentColor,
   className,
 }: NavigationBarProps) {
@@ -135,6 +140,128 @@ export function NavigationBar({
 
   const hasHistoryEntries = historyEntries && historyEntries.length > 0
 
+  const renderSegments = () => segments.map((segment, index) => {
+    const isLast = index === segments.length - 1
+    const isClickable = !isLast && !!segment.onClick
+    const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
+
+    return (
+      <div key={segment.id} className="flex items-center gap-1 min-w-0">
+        {index > 0 && <SegmentSeparator type={separator} size={size} />}
+        {isClickable ? (
+          <button
+            type="button"
+            onClick={segment.onClick}
+            className={cn(
+              'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
+              s.text,
+              'font-medium hover:text-white',
+              colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
+            )}
+          >
+            {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+            <span className="truncate max-w-[200px]">{segment.label}</span>
+          </button>
+        ) : (
+          <div
+            className={cn(
+              'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
+              s.text,
+              isLast
+                ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
+                : ['font-medium', colors ? colors.text : 'text-neutral-300'],
+            )}
+          >
+            {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
+            <span className="truncate max-w-[200px]">{segment.label}</span>
+          </div>
+        )}
+      </div>
+    )
+  })
+
+  const renderHistoryDropdown = () => {
+    if (!historyOpen || !hasHistoryEntries || !historyEntries) return null
+    const entries = layout === 'header' ? [...historyEntries].reverse() : historyEntries
+    return (
+      <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-black/80 backdrop-blur-sm border border-neutral-700 rounded-lg shadow-lg z-50">
+        <div className="px-3 py-1.5 border-b border-neutral-700/50">
+          <p className="text-sm font-medium text-neutral-500">History{layout === 'header' && ` (${historyEntries.length})`}</p>
+        </div>
+        <div className="max-h-[300px] overflow-y-auto py-1">
+          {entries.map((entry, entryIdx) => {
+            const actualIdx = layout === 'header' ? historyEntries.length - 1 - entryIdx : entryIdx
+            const isCurrent = currentHistoryIndex !== undefined && actualIdx === currentHistoryIndex
+            return (
+              <button
+                key={actualIdx}
+                type="button"
+                onClick={() => {
+                  onHistorySelect?.(actualIdx)
+                  setHistoryOpen(false)
+                }}
+                className={cn(
+                  'w-full px-3 py-1.5 flex items-center gap-1 text-left transition-colors cursor-pointer',
+                  isCurrent ? 'bg-green-500/10' : 'hover:bg-neutral-800',
+                )}
+              >
+                {entry.map((seg, segIdx) => (
+                  <span key={seg.id} className="flex items-center gap-1 min-w-0">
+                    {segIdx > 0 && <ChevronRight className="w-2.5 h-2.5 text-neutral-600 flex-shrink-0" />}
+                    {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
+                    <span className={cn(
+                      'text-sm truncate',
+                      seg.color && ACCENT_NAV[seg.color as AccentColor] ? ACCENT_NAV[seg.color as AccentColor].text : 'text-neutral-300',
+                    )}>
+                      {seg.label}
+                    </span>
+                  </span>
+                ))}
+                {isCurrent && <span className="ml-auto pl-4 text-xs text-green-400 flex-shrink-0">Current</span>}
+              </button>
+            )
+          })}
+        </div>
+      </div>
+    )
+  }
+
+  if (layout === 'header') {
+    return (
+      <nav className={cn('relative flex items-center h-full', className)}>
+        {/* Left: nav controls */}
+        <div className="flex items-center gap-2 flex-shrink-0">
+          {hasNav && (
+            <>
+              <NavButton icon={ChevronLeft} onClick={onBack} disabled={!canGoBack} size={size} colorStyle={colorStyle} />
+              <NavButton icon={ChevronRight} onClick={onForward} disabled={!canGoForward} size={size} colorStyle={colorStyle} />
+            </>
+          )}
+          {showHistory && (
+            <div className="relative" ref={historyRef}>
+              <NavButton
+                icon={History}
+                onClick={() => setHistoryOpen(o => !o)}
+                disabled={!hasHistoryEntries}
+                size={size}
+                active={historyOpen}
+                colorStyle={colorStyle}
+              />
+              {renderHistoryDropdown()}
+            </div>
+          )}
+        </div>
+
+        {/* Center: breadcrumb absolutely centered */}
+        <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
+          <div className={cn('pointer-events-auto flex items-center gap-1', s.px, s.py, 'bg-neutral-960/50 rounded-lg')}>
+            {renderSegments()}
+          </div>
+        </div>
+      </nav>
+    )
+  }
+
   return (
     <nav className={cn('flex items-center', className)}>
       <div className={cn('flex items-center gap-1', s.px, s.py, 'bg-neutral-960/50 border rounded-lg', colorStyle.border)}>
@@ -166,86 +293,13 @@ export function NavigationBar({
                 active={historyOpen}
                 colorStyle={colorStyle}
               />
-              {historyOpen && hasHistoryEntries && (
-                <div className="absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-960 border border-neutral-700 rounded-lg shadow-lg z-50">
-                  <div className="px-3 py-1.5 border-b border-neutral-700/50">
-                    <p className="text-sm font-medium text-neutral-500">History</p>
-                  </div>
-                  <div className="max-h-[300px] overflow-y-auto py-1">
-                    {historyEntries.map((entry, i) => (
-                      <button
-                        key={i}
-                        type="button"
-                        onClick={() => {
-                          onHistorySelect?.(i)
-                          setHistoryOpen(false)
-                        }}
-                        className="w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-960 transition-colors cursor-pointer"
-                      >
-                        {entry.map((seg, segIdx) => (
-                          <span key={seg.id} className="flex items-center gap-1 min-w-0">
-                            {segIdx > 0 && <ChevronRight className="w-2.5 h-2.5 text-neutral-600 flex-shrink-0" />}
-                            {seg.icon && <SegmentIcon icon={seg.icon} color={seg.color} size="xs" />}
-                            <span className={cn(
-                              'text-sm truncate',
-                              seg.color && ACCENT_NAV[seg.color as AccentColor] ? ACCENT_NAV[seg.color as AccentColor].text : 'text-neutral-300',
-                            )}>
-                              {seg.label}
-                            </span>
-                          </span>
-                        ))}
-                      </button>
-                    ))}
-                  </div>
-                  <div className="px-3 py-1.5 border-t border-neutral-700/50">
-                    <p className="text-sm text-neutral-600">Click to navigate</p>
-                  </div>
-                </div>
-              )}
+              {renderHistoryDropdown()}
             </div>
             <Divider size={size} />
           </>
         )}
 
-        {segments.map((segment, index) => {
-          const isLast = index === segments.length - 1
-          const isClickable = !isLast && !!segment.onClick
-          const colors = segment.color && ACCENT_NAV[segment.color as AccentColor] ? ACCENT_NAV[segment.color as AccentColor] : null
-
-          return (
-            <div key={segment.id} className="flex items-center gap-1 min-w-0">
-              {index > 0 && <SegmentSeparator type={separator} size={size} />}
-              {isClickable ? (
-                <button
-                  type="button"
-                  onClick={segment.onClick}
-                  className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0',
-                    s.text,
-                    'font-medium hover:text-white',
-                    colors ? [colors.text, `hover:${colors.bg}`] : ['text-neutral-300', 'hover:bg-neutral-700/50'],
-                  )}
-                >
-                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
-                  <span className="truncate max-w-[200px]">{segment.label}</span>
-                </button>
-              ) : (
-                <div
-                  className={cn(
-                    'flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0',
-                    s.text,
-                    isLast
-                      ? ['font-medium bg-neutral-700/50', colors ? colors.text : 'text-white']
-                      : ['font-medium', colors ? colors.text : 'text-neutral-300'],
-                  )}
-                >
-                  {segment.icon && <SegmentIcon icon={segment.icon} color={segment.color} size={size} />}
-                  <span className="truncate max-w-[200px]">{segment.label}</span>
-                </div>
-              )}
-            </div>
-          )
-        })}
+        {renderSegments()}
       </div>
     </nav>
   )

package/components/ui/registry-detail.tsx

@@ -3,6 +3,7 @@ import { ChevronsUpDown, ChevronsDownUp } from 'lucide-react'
 import { IconButton } from './icon-button.tsx'
 import { Label, type LabelProps } from './label.tsx'
 import { CodingAgentIcon, CODING_AGENT_NAMES, type CodingAgentKey } from '../lib/coding-agents.tsx'
+import { Tooltip } from './tooltip.tsx'
 import { FileStructureSection, type FileStructureSectionProps } from './file-structure-section.tsx'
 import { type AccentColor } from '../lib/form-colors.ts'
 import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
@@ -24,7 +25,7 @@ export interface RegistryDetailProps {
 
   // Standard sections (rendered in order before children)
   description?: string
-  longDescription?: string
+  longDescription?: ReactNode
   integration?: boolean
   compatibleTools?: string[]
 
@@ -56,7 +57,7 @@ const MARKDOWN_CLASSES = 'text-md text-neutral-400 leading-relaxed [&_strong]:te
 
 const COLLAPSED_MAX_HEIGHT = 240
 
-function CollapsibleTextSection({ children, header }: { children: string; header?: string }) {
+function CollapsibleTextSection({ children, header }: { children: ReactNode; header?: string }) {
   const contentRef = useRef<HTMLDivElement>(null)
   const [overflows, setOverflows] = useState(false)
   const [expanded, setExpanded] = useState(false)
@@ -107,7 +108,7 @@ function CollapsibleTextSection({ children, header }: { children: string; header
           className={MARKDOWN_CLASSES}
           style={showCollapsed ? { maxHeight: COLLAPSED_MAX_HEIGHT, overflow: 'hidden' } : undefined}
         >
-          <p>{children}</p>
+          <div>{children}</div>
         </div>
 
         {showCollapsed && (
@@ -128,10 +129,9 @@ function CompatibleWithSection({ agents }: { agents: string[] }) {
       <h3 className="text-sm font-medium text-neutral-500 uppercase tracking-wider mb-3">Compatible with</h3>
       <div className="flex items-start gap-3">
         {agents.map((agent) => (
-          <div key={agent} className="flex flex-col items-center gap-1">
-            <CodingAgentIcon agent={agent} size={18} />
-            <span className="text-xs text-neutral-400">{CODING_AGENT_NAMES[agent as CodingAgentKey] ?? agent}</span>
-          </div>
+          <Tooltip key={agent} content={{ description: CODING_AGENT_NAMES[agent as CodingAgentKey] ?? agent }} position="top">
+            <CodingAgentIcon agent={agent} size={24} />
+          </Tooltip>
         ))}
       </div>
     </div>
@@ -166,8 +166,8 @@ export function RegistryDetail({
   const resolvedAccent = accentColor ?? contextAccent
 
   const content = (
-    <div className="h-full overflow-y-auto p-6">
-      <div className={`${maxWidth} mx-auto space-y-6`}>
+    <div className="h-full overflow-y-auto">
+      <div className={`${maxWidth} mx-auto px-4 py-6 space-y-8`}>
         {/* Above header badges */}
         {aboveHeader}
         {/* Header row */}

package/components/ui/tooltip.tsx

@@ -247,6 +247,29 @@ export function Tooltip({
     return () => window.removeEventListener('scroll', handleScroll, true)
   }, [trigger, isVisible, position, align])
 
+  // Dismiss hover tooltips on scroll, keyboard, click elsewhere, or window blur to prevent orphans
+  useEffect(() => {
+    if (trigger !== 'hover' || !isVisible) return
+    const dismiss = () => setIsVisible(false)
+    window.addEventListener('scroll', dismiss, true)
+    window.addEventListener('keydown', dismiss)
+    window.addEventListener('pointerdown', dismiss)
+    window.addEventListener('blur', dismiss)
+    return () => {
+      window.removeEventListener('scroll', dismiss, true)
+      window.removeEventListener('keydown', dismiss)
+      window.removeEventListener('pointerdown', dismiss)
+      window.removeEventListener('blur', dismiss)
+    }
+  }, [trigger, isVisible])
+
+  // Clear pending hide timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current)
+    }
+  }, [])
+
   const resolvedPos = position === 'auto' ? actualPosition : position
   const arrowClasses = getArrowClasses(resolvedPos, align)
 

package/dist/index.d.ts

@@ -24,6 +24,7 @@ declare const ACCENT_ICON: Record<FormColor, string>;
 declare const ACCENT_NAV: Record<AccentColor, {
     bg: string;
     text: string;
+    border: string;
 }>;
 declare const FORM_COLORS: Record<FormColor, FormColorConfig>;
 
@@ -399,7 +400,7 @@ declare function Toggle({ checked, onChange, disabled, size, className, accentCo
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
     value: string;
     onChange: (value: string) => void;
-    type?: 'text' | 'search' | 'password';
+    type?: 'text' | 'search' | 'password' | 'email';
     debounceMs?: number;
     error?: boolean | string;
     variant?: 'filled' | 'outline';
@@ -1030,7 +1031,7 @@ interface FileStructureSectionProps {
     initialHeight?: number;
 }
 declare function getLanguageFromPath(filePath: string): string;
-declare function FileStructureSection({ files, rootName, variant, isLoading, error, onFetchContent, format, language, default: defaultMode, accentColor, renderPreview, initialHeight, }: FileStructureSectionProps): react_jsx_runtime.JSX.Element | null;
+declare function FileStructureSection({ files, rootName, variant, isLoading, error, onFetchContent, format, language, default: defaultMode, accentColor: accentColorProp, renderPreview, initialHeight, }: FileStructureSectionProps): react_jsx_runtime.JSX.Element | null;
 
 interface RegistryDetailProps {
     icon: LucideIcon;
@@ -1041,7 +1042,7 @@ interface RegistryDetailProps {
     actionButton?: ReactNode;
     labels?: LabelProps[];
     description?: string;
-    longDescription?: string;
+    longDescription?: ReactNode;
     integration?: boolean;
     compatibleTools?: string[];
     files?: FileStructureSectionProps['files'];
@@ -2540,6 +2541,7 @@ interface NavigationBarProps {
     onForward?: () => void;
     showHistory?: boolean;
     historyEntries?: BreadcrumbSegment[][];
+    currentHistoryIndex?: number;
     onHistorySelect?: (index: number) => void;
     leadingAction?: {
         icon: IconName;
@@ -2547,10 +2549,12 @@ interface NavigationBarProps {
     };
     separator?: 'chevron' | 'slash' | 'dot';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    /** 'bar' (default): all-in-one bordered box. 'header': nav controls left-aligned, breadcrumb absolutely centered. */
+    layout?: 'bar' | 'header';
     accentColor?: AccentColor;
     className?: string;
 }
-declare function NavigationBar({ segments, canGoBack, canGoForward, onBack, onForward, showHistory, historyEntries, onHistorySelect, leadingAction, separator, size, accentColor, className, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ segments, canGoBack, canGoForward, onBack, onForward, showHistory, historyEntries, currentHistoryIndex, onHistorySelect, leadingAction, separator, size, layout, accentColor, className, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 interface Tab {
     id: string;

package/dist/index.js

@@ -18,21 +18,21 @@ var ACCENT_TEXT = {
 };
 var ACCENT_ICON = ACCENT_TEXT;
 var ACCENT_NAV = {
-  blue: { bg: "bg-blue-500/10", text: "text-blue-400" },
-  green: { bg: "bg-green-500/10", text: "text-green-400" },
-  red: { bg: "bg-red-500/10", text: "text-red-400" },
-  orange: { bg: "bg-orange-500/10", text: "text-orange-400" },
-  cyan: { bg: "bg-cyan-500/10", text: "text-cyan-400" },
-  yellow: { bg: "bg-yellow-500/10", text: "text-yellow-400" },
-  purple: { bg: "bg-purple-500/10", text: "text-purple-400" },
-  indigo: { bg: "bg-indigo-500/10", text: "text-indigo-400" },
-  emerald: { bg: "bg-emerald-500/10", text: "text-emerald-400" },
-  amber: { bg: "bg-amber-500/10", text: "text-amber-400" },
-  violet: { bg: "bg-violet-500/10", text: "text-violet-400" },
-  neutral: { bg: "bg-neutral-500/10", text: "text-neutral-400" },
-  sky: { bg: "bg-sky-500/10", text: "text-sky-400" },
-  pink: { bg: "bg-pink-500/10", text: "text-pink-400" },
-  teal: { bg: "bg-teal-500/10", text: "text-teal-400" }
+  blue: { bg: "bg-blue-500/10", text: "text-blue-400", border: "border-blue-500/30" },
+  green: { bg: "bg-green-500/10", text: "text-green-400", border: "border-green-500/30" },
+  red: { bg: "bg-red-500/10", text: "text-red-400", border: "border-red-500/30" },
+  orange: { bg: "bg-orange-500/10", text: "text-orange-400", border: "border-orange-500/30" },
+  cyan: { bg: "bg-cyan-500/10", text: "text-cyan-400", border: "border-cyan-500/30" },
+  yellow: { bg: "bg-yellow-500/10", text: "text-yellow-400", border: "border-yellow-500/30" },
+  purple: { bg: "bg-purple-500/10", text: "text-purple-400", border: "border-purple-500/30" },
+  indigo: { bg: "bg-indigo-500/10", text: "text-indigo-400", border: "border-indigo-500/30" },
+  emerald: { bg: "bg-emerald-500/10", text: "text-emerald-400", border: "border-emerald-500/30" },
+  amber: { bg: "bg-amber-500/10", text: "text-amber-400", border: "border-amber-500/30" },
+  violet: { bg: "bg-violet-500/10", text: "text-violet-400", border: "border-violet-500/30" },
+  neutral: { bg: "bg-neutral-500/10", text: "text-neutral-400", border: "border-neutral-500/30" },
+  sky: { bg: "bg-sky-500/10", text: "text-sky-400", border: "border-sky-500/30" },
+  pink: { bg: "bg-pink-500/10", text: "text-pink-400", border: "border-pink-500/30" },
+  teal: { bg: "bg-teal-500/10", text: "text-teal-400", border: "border-teal-500/30" }
 };
 var FORM_COLORS = {
   blue: { border: "border-blue-500/30", hover: "hover:bg-blue-500/20 hover:border-blue-500/40", focus: "focus:border-blue-500", selectedBg: "bg-blue-600/20", accent: "text-blue-400" },
@@ -193,8 +193,8 @@ var TOOLR_APPS = {
   // #f97316
   learnr: { name: "Learnr", accent: "yellow" },
   // #eab308
-  seedr: { name: "Seedr", accent: "cyan" },
-  // #06b6d4
+  seedr: { name: "Seedr", accent: "green" },
+  // #22c55e
   planr: { name: "Planr", accent: "pink" },
   // #ec4899 (not in ACCENT_DEFS, fallback hex)
   vibr: { name: "Vibr", accent: "red" }
@@ -566,6 +566,25 @@ function Tooltip({
     window.addEventListener("scroll", handleScroll, true);
     return () => window.removeEventListener("scroll", handleScroll, true);
   }, [trigger, isVisible, position, align]);
+  useEffect2(() => {
+    if (trigger !== "hover" || !isVisible) return;
+    const dismiss = () => setIsVisible(false);
+    window.addEventListener("scroll", dismiss, true);
+    window.addEventListener("keydown", dismiss);
+    window.addEventListener("pointerdown", dismiss);
+    window.addEventListener("blur", dismiss);
+    return () => {
+      window.removeEventListener("scroll", dismiss, true);
+      window.removeEventListener("keydown", dismiss);
+      window.removeEventListener("pointerdown", dismiss);
+      window.removeEventListener("blur", dismiss);
+    };
+  }, [trigger, isVisible]);
+  useEffect2(() => {
+    return () => {
+      if (hideTimeoutRef.current) clearTimeout(hideTimeoutRef.current);
+    };
+  }, []);
   const resolvedPos = position === "auto" ? actualPosition : position;
   const arrowClasses = getArrowClasses(resolvedPos, align);
   const tooltipContent = /* @__PURE__ */ jsxs3(
@@ -4377,10 +4396,12 @@ function FileStructureSection({
   format,
   language,
   default: defaultMode,
-  accentColor = "blue",
+  accentColor: accentColorProp,
   renderPreview,
   initialHeight
 }) {
+  const contextAccent = useAccentColor();
+  const accentColor = accentColorProp ?? contextAccent ?? "blue";
   const [selectedFilePath, setSelectedFilePath] = useState14(null);
   const [fileContent, setFileContent] = useState14(null);
   const [fetchedFilePath, setFetchedFilePath] = useState14(null);
@@ -4550,7 +4571,7 @@ function FileStructureSection({
         {
           collapsed: allCollapsed,
           onToggle: () => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : /* @__PURE__ */ new Set()),
-          accentColor
+          accentColor: "neutral"
         }
       )
     ] }),
@@ -4661,7 +4682,7 @@ function CollapsibleTextSection({ children, header }) {
           ref: contentRef,
           className: MARKDOWN_CLASSES,
           style: showCollapsed ? { maxHeight: COLLAPSED_MAX_HEIGHT, overflow: "hidden" } : void 0,
-          children: /* @__PURE__ */ jsx34("p", { children })
+          children: /* @__PURE__ */ jsx34("div", { children })
         }
       ),
       showCollapsed && /* @__PURE__ */ jsx34("div", { className: "absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-neutral-960 to-transparent pointer-events-none" })
@@ -4672,10 +4693,7 @@ function CompatibleWithSection({ agents }) {
   if (agents.length === 0) return null;
   return /* @__PURE__ */ jsxs26("div", { children: [
     /* @__PURE__ */ jsx34("h3", { className: "text-sm font-medium text-neutral-500 uppercase tracking-wider mb-3", children: "Compatible with" }),
-    /* @__PURE__ */ jsx34("div", { className: "flex items-start gap-3", children: agents.map((agent) => /* @__PURE__ */ jsxs26("div", { className: "flex flex-col items-center gap-1", children: [
-      /* @__PURE__ */ jsx34(CodingAgentIcon, { agent, size: 18 }),
-      /* @__PURE__ */ jsx34("span", { className: "text-xs text-neutral-400", children: CODING_AGENT_NAMES[agent] ?? agent })
-    ] }, agent)) })
+    /* @__PURE__ */ jsx34("div", { className: "flex items-start gap-3", children: agents.map((agent) => /* @__PURE__ */ jsx34(Tooltip, { content: { description: CODING_AGENT_NAMES[agent] ?? agent }, position: "top", children: /* @__PURE__ */ jsx34(CodingAgentIcon, { agent, size: 24 }) }, agent)) })
   ] });
 }
 function RegistryDetail({
@@ -4702,7 +4720,7 @@ function RegistryDetail({
 }) {
   const contextAccent = useAccentColor();
   const resolvedAccent = accentColor ?? contextAccent;
-  const content = /* @__PURE__ */ jsx34("div", { className: "h-full overflow-y-auto p-6", children: /* @__PURE__ */ jsxs26("div", { className: `${maxWidth} mx-auto space-y-6`, children: [
+  const content = /* @__PURE__ */ jsx34("div", { className: "h-full overflow-y-auto", children: /* @__PURE__ */ jsxs26("div", { className: `${maxWidth} mx-auto px-4 py-6 space-y-8`, children: [
     aboveHeader,
     /* @__PURE__ */ jsxs26("div", { className: "flex items-start justify-between gap-4", children: [
       /* @__PURE__ */ jsxs26("div", { className: "min-w-0", children: [
@@ -9886,12 +9904,12 @@ function Breadcrumb({
   const isBox = variant === "box";
   return /* @__PURE__ */ jsx56(AccentColorProvider, { value: effectiveColor, children: /* @__PURE__ */ jsx56("nav", { className: cn("flex items-center min-w-0", className), children: /* @__PURE__ */ jsx56("div", { className: cn(
     "flex items-center gap-1",
-    isBox && [s.px, s.py, "bg-neutral-960/50 border border-neutral-700/50 rounded-lg"]
+    isBox && [s.px, s.py, "bg-neutral-960/50 rounded-lg"]
   ), children: segments.map((segment, index) => {
     const isLast = index === segments.length - 1;
     const isClickable = !isLast && !!segment.onClick;
     const colors = segment.color && ACCENT_NAV[segment.color] ? ACCENT_NAV[segment.color] : null;
-    const isFirstPlain = !isBox && index === 0;
+    const isFirst = !isBox && index === 0;
     return /* @__PURE__ */ jsxs47("div", { className: "flex items-center gap-1 min-w-0", children: [
       index > 0 && /* @__PURE__ */ jsx56(Separator, { type: separator, size }),
       isClickable ? /* @__PURE__ */ jsxs47(
@@ -9901,7 +9919,7 @@ function Breadcrumb({
           onClick: segment.onClick,
           className: cn(
             "flex items-center gap-1.5 pr-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0",
-            isFirstPlain ? "pl-0" : "pl-2",
+            isFirst ? "pl-0" : "pl-2",
             s.text,
             "font-medium hover:text-white",
             colors ? [colors.text, `hover:${colors.bg}`] : ["text-neutral-300", "hover:bg-neutral-700/50"]
@@ -9916,9 +9934,9 @@ function Breadcrumb({
         {
           className: cn(
             "flex items-center gap-1.5 pr-2 py-0.5 rounded-md min-w-0",
-            isFirstPlain ? "pl-0" : "pl-2",
+            isFirst ? "pl-0" : "pl-2",
             s.text,
-            isLast ? ["font-medium bg-neutral-700/50", colors ? colors.text : "text-white"] : ["font-medium", colors ? colors.text : "text-neutral-300"]
+            isLast ? "font-medium text-white" : ["font-medium", colors ? colors.text : "text-neutral-300"]
           ),
           children: [
             segment.icon && /* @__PURE__ */ jsx56(SegmentIcon, { icon: segment.icon, color: segment.color, size }),
@@ -9998,10 +10016,12 @@ function NavigationBar({
   onForward,
   showHistory = false,
   historyEntries,
+  currentHistoryIndex,
   onHistorySelect,
   leadingAction,
   separator = "chevron",
   size = "sm",
+  layout = "bar",
   accentColor,
   className
 }) {
@@ -10016,6 +10036,109 @@ function NavigationBar({
   const closeHistory = useCallback20(() => setHistoryOpen(false), []);
   useClickOutside(historyRef, historyOpen, closeHistory);
   const hasHistoryEntries = historyEntries && historyEntries.length > 0;
+  const renderSegments = () => segments.map((segment, index) => {
+    const isLast = index === segments.length - 1;
+    const isClickable = !isLast && !!segment.onClick;
+    const colors = segment.color && ACCENT_NAV[segment.color] ? ACCENT_NAV[segment.color] : null;
+    return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1 min-w-0", children: [
+      index > 0 && /* @__PURE__ */ jsx57(SegmentSeparator, { type: separator, size }),
+      isClickable ? /* @__PURE__ */ jsxs48(
+        "button",
+        {
+          type: "button",
+          onClick: segment.onClick,
+          className: cn(
+            "flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0",
+            s.text,
+            "font-medium hover:text-white",
+            colors ? [colors.text, `hover:${colors.bg}`] : ["text-neutral-300", "hover:bg-neutral-700/50"]
+          ),
+          children: [
+            segment.icon && /* @__PURE__ */ jsx57(SegmentIcon2, { icon: segment.icon, color: segment.color, size }),
+            /* @__PURE__ */ jsx57("span", { className: "truncate max-w-[200px]", children: segment.label })
+          ]
+        }
+      ) : /* @__PURE__ */ jsxs48(
+        "div",
+        {
+          className: cn(
+            "flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0",
+            s.text,
+            isLast ? ["font-medium bg-neutral-700/50", colors ? colors.text : "text-white"] : ["font-medium", colors ? colors.text : "text-neutral-300"]
+          ),
+          children: [
+            segment.icon && /* @__PURE__ */ jsx57(SegmentIcon2, { icon: segment.icon, color: segment.color, size }),
+            /* @__PURE__ */ jsx57("span", { className: "truncate max-w-[200px]", children: segment.label })
+          ]
+        }
+      )
+    ] }, segment.id);
+  });
+  const renderHistoryDropdown = () => {
+    if (!historyOpen || !hasHistoryEntries || !historyEntries) return null;
+    const entries = layout === "header" ? [...historyEntries].reverse() : historyEntries;
+    return /* @__PURE__ */ jsxs48("div", { className: "absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-black/80 backdrop-blur-sm border border-neutral-700 rounded-lg shadow-lg z-50", children: [
+      /* @__PURE__ */ jsx57("div", { className: "px-3 py-1.5 border-b border-neutral-700/50", children: /* @__PURE__ */ jsxs48("p", { className: "text-sm font-medium text-neutral-500", children: [
+        "History",
+        layout === "header" && ` (${historyEntries.length})`
+      ] }) }),
+      /* @__PURE__ */ jsx57("div", { className: "max-h-[300px] overflow-y-auto py-1", children: entries.map((entry, entryIdx) => {
+        const actualIdx = layout === "header" ? historyEntries.length - 1 - entryIdx : entryIdx;
+        const isCurrent = currentHistoryIndex !== void 0 && actualIdx === currentHistoryIndex;
+        return /* @__PURE__ */ jsxs48(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              onHistorySelect?.(actualIdx);
+              setHistoryOpen(false);
+            },
+            className: cn(
+              "w-full px-3 py-1.5 flex items-center gap-1 text-left transition-colors cursor-pointer",
+              isCurrent ? "bg-green-500/10" : "hover:bg-neutral-800"
+            ),
+            children: [
+              entry.map((seg, segIdx) => /* @__PURE__ */ jsxs48("span", { className: "flex items-center gap-1 min-w-0", children: [
+                segIdx > 0 && /* @__PURE__ */ jsx57(ChevronRight10, { className: "w-2.5 h-2.5 text-neutral-600 flex-shrink-0" }),
+                seg.icon && /* @__PURE__ */ jsx57(SegmentIcon2, { icon: seg.icon, color: seg.color, size: "xs" }),
+                /* @__PURE__ */ jsx57("span", { className: cn(
+                  "text-sm truncate",
+                  seg.color && ACCENT_NAV[seg.color] ? ACCENT_NAV[seg.color].text : "text-neutral-300"
+                ), children: seg.label })
+              ] }, seg.id)),
+              isCurrent && /* @__PURE__ */ jsx57("span", { className: "ml-auto pl-4 text-xs text-green-400 flex-shrink-0", children: "Current" })
+            ]
+          },
+          actualIdx
+        );
+      }) })
+    ] });
+  };
+  if (layout === "header") {
+    return /* @__PURE__ */ jsxs48("nav", { className: cn("relative flex items-center h-full", className), children: [
+      /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-2 flex-shrink-0", children: [
+        hasNav && /* @__PURE__ */ jsxs48(Fragment12, { children: [
+          /* @__PURE__ */ jsx57(NavButton, { icon: ChevronLeft2, onClick: onBack, disabled: !canGoBack, size, colorStyle }),
+          /* @__PURE__ */ jsx57(NavButton, { icon: ChevronRight10, onClick: onForward, disabled: !canGoForward, size, colorStyle })
+        ] }),
+        showHistory && /* @__PURE__ */ jsxs48("div", { className: "relative", ref: historyRef, children: [
+          /* @__PURE__ */ jsx57(
+            NavButton,
+            {
+              icon: History3,
+              onClick: () => setHistoryOpen((o) => !o),
+              disabled: !hasHistoryEntries,
+              size,
+              active: historyOpen,
+              colorStyle
+            }
+          ),
+          renderHistoryDropdown()
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx57("div", { className: "absolute inset-0 flex items-center justify-center pointer-events-none", children: /* @__PURE__ */ jsx57("div", { className: cn("pointer-events-auto flex items-center gap-1", s.px, s.py, "bg-neutral-960/50 rounded-lg"), children: renderSegments() }) })
+    ] });
+  }
   return /* @__PURE__ */ jsx57("nav", { className: cn("flex items-center", className), children: /* @__PURE__ */ jsxs48("div", { className: cn("flex items-center gap-1", s.px, s.py, "bg-neutral-960/50 border rounded-lg", colorStyle.border), children: [
     leadingAction && LeadIcon && /* @__PURE__ */ jsxs48(Fragment12, { children: [
       /* @__PURE__ */ jsx57(NavButton, { icon: LeadIcon, onClick: leadingAction.onClick, size, colorStyle }),
@@ -10041,71 +10164,11 @@ function NavigationBar({
             colorStyle
           }
         ),
-        historyOpen && hasHistoryEntries && /* @__PURE__ */ jsxs48("div", { className: "absolute left-0 top-full mt-1 w-max min-w-[200px] max-w-[420px] bg-neutral-960 border border-neutral-700 rounded-lg shadow-lg z-50", children: [
-          /* @__PURE__ */ jsx57("div", { className: "px-3 py-1.5 border-b border-neutral-700/50", children: /* @__PURE__ */ jsx57("p", { className: "text-sm font-medium text-neutral-500", children: "History" }) }),
-          /* @__PURE__ */ jsx57("div", { className: "max-h-[300px] overflow-y-auto py-1", children: historyEntries.map((entry, i) => /* @__PURE__ */ jsx57(
-            "button",
-            {
-              type: "button",
-              onClick: () => {
-                onHistorySelect?.(i);
-                setHistoryOpen(false);
-              },
-              className: "w-full px-3 py-1.5 flex items-center gap-1 text-left hover:bg-neutral-960 transition-colors cursor-pointer",
-              children: entry.map((seg, segIdx) => /* @__PURE__ */ jsxs48("span", { className: "flex items-center gap-1 min-w-0", children: [
-                segIdx > 0 && /* @__PURE__ */ jsx57(ChevronRight10, { className: "w-2.5 h-2.5 text-neutral-600 flex-shrink-0" }),
-                seg.icon && /* @__PURE__ */ jsx57(SegmentIcon2, { icon: seg.icon, color: seg.color, size: "xs" }),
-                /* @__PURE__ */ jsx57("span", { className: cn(
-                  "text-sm truncate",
-                  seg.color && ACCENT_NAV[seg.color] ? ACCENT_NAV[seg.color].text : "text-neutral-300"
-                ), children: seg.label })
-              ] }, seg.id))
-            },
-            i
-          )) }),
-          /* @__PURE__ */ jsx57("div", { className: "px-3 py-1.5 border-t border-neutral-700/50", children: /* @__PURE__ */ jsx57("p", { className: "text-sm text-neutral-600", children: "Click to navigate" }) })
-        ] })
+        renderHistoryDropdown()
       ] }),
       /* @__PURE__ */ jsx57(Divider, { size })
     ] }),
-    segments.map((segment, index) => {
-      const isLast = index === segments.length - 1;
-      const isClickable = !isLast && !!segment.onClick;
-      const colors = segment.color && ACCENT_NAV[segment.color] ? ACCENT_NAV[segment.color] : null;
-      return /* @__PURE__ */ jsxs48("div", { className: "flex items-center gap-1 min-w-0", children: [
-        index > 0 && /* @__PURE__ */ jsx57(SegmentSeparator, { type: separator, size }),
-        isClickable ? /* @__PURE__ */ jsxs48(
-          "button",
-          {
-            type: "button",
-            onClick: segment.onClick,
-            className: cn(
-              "flex items-center gap-1.5 px-2 py-0.5 rounded-md transition-colors cursor-pointer min-w-0",
-              s.text,
-              "font-medium hover:text-white",
-              colors ? [colors.text, `hover:${colors.bg}`] : ["text-neutral-300", "hover:bg-neutral-700/50"]
-            ),
-            children: [
-              segment.icon && /* @__PURE__ */ jsx57(SegmentIcon2, { icon: segment.icon, color: segment.color, size }),
-              /* @__PURE__ */ jsx57("span", { className: "truncate max-w-[200px]", children: segment.label })
-            ]
-          }
-        ) : /* @__PURE__ */ jsxs48(
-          "div",
-          {
-            className: cn(
-              "flex items-center gap-1.5 px-2 py-0.5 rounded-md min-w-0",
-              s.text,
-              isLast ? ["font-medium bg-neutral-700/50", colors ? colors.text : "text-white"] : ["font-medium", colors ? colors.text : "text-neutral-300"]
-            ),
-            children: [
-              segment.icon && /* @__PURE__ */ jsx57(SegmentIcon2, { icon: segment.icon, color: segment.color, size }),
-              /* @__PURE__ */ jsx57("span", { className: "truncate max-w-[200px]", children: segment.label })
-            ]
-          }
-        )
-      ] }, segment.id);
-    })
+    renderSegments()
   ] }) });
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toolr/ui-design",
-  "version": "0.1.9",
+  "version": "0.1.11",
   "private": false,
   "type": "module",
   "main": "./dist/index.js",