@toolr/ui-design 0.1.8 → 0.1.9

package/components/ui/bottom-panel-header.tsx

@@ -3,6 +3,7 @@ import { RefreshCw } from 'lucide-react'
 import { IconButton, type IconName, type ActionItem, iconMap } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { Tooltip } from './tooltip.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
 
 /** Status banner configuration for outdated/info messages */
 export interface StatusBanner {
@@ -59,11 +60,12 @@ export interface BottomPanelHeaderProps<T extends string = string> {
   statusBanner?: StatusBanner
   /** Callback when collapse button is clicked */
   onCollapse?: () => void
+  accentColor?: FormColor
 }
 
 // Default styling classes
 const DEFAULT_ACTIVE_TEXT = 'text-neutral-300'
-const DEFAULT_INACTIVE_CLASSES = 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-800/30'
+const DEFAULT_INACTIVE_CLASSES = 'border-transparent text-neutral-500 hover:text-neutral-300 hover:bg-neutral-960/30'
 
 // Layout mode: full → compact banner → compact tabs
 type LayoutMode = 'full' | 'compact-banner' | 'compact-all'
@@ -93,6 +95,7 @@ export function BottomPanelHeader<T extends string = string>({
   customLeftContent,
   statusBanner,
   onCollapse,
+  accentColor: _accentColor,
 }: BottomPanelHeaderProps<T>) {
   const containerRef = useRef<HTMLDivElement>(null)
   const actionsRef = useRef<HTMLDivElement>(null)
@@ -140,7 +143,7 @@ export function BottomPanelHeader<T extends string = string>({
   return (
     <div
       ref={containerRef}
-      className={`flex-shrink-0 h-[41px] flex justify-between bg-neutral-900 border-b border-neutral-800 ${className}`}
+      className={`flex-shrink-0 h-[41px] flex justify-between bg-neutral-980 border-b border-neutral-960 ${className}`}
     >
       {/* Tabs or custom content - left aligned */}
       <div className="flex flex-shrink-0">
@@ -156,7 +159,7 @@ export function BottomPanelHeader<T extends string = string>({
             ? tab.activeBorderClass || 'border-current'
             : ''
           const baseClasses = isActive
-            ? `${textClass} ${borderClass} bg-neutral-800/50`
+            ? `${textClass} ${borderClass} bg-neutral-960/50`
             : DEFAULT_INACTIVE_CLASSES
           const tabButton = (
             <button
@@ -170,7 +173,7 @@ export function BottomPanelHeader<T extends string = string>({
                   {TabIcon && <TabIcon className="w-[18px] h-[18px]" />}
                   {tab.count !== undefined && (
                     <span className="absolute -top-1.5 -right-2">
-                      <Badge value={tab.count} color={tab.countColor} size="xss" />
+                      <Badge value={tab.count} accentColor={tab.countColor} size="xss" />
                     </span>
                   )}
                 </span>
@@ -185,7 +188,7 @@ export function BottomPanelHeader<T extends string = string>({
                     <span>{tab.label}</span>
                   )}
                   {tab.count !== undefined && (
-                    <Badge value={tab.count} color={tab.countColor} size="xss" />
+                    <Badge value={tab.count} accentColor={tab.countColor} size="xss" />
                   )}
                 </>
               )}
@@ -231,6 +234,7 @@ export function BottomPanelHeader<T extends string = string>({
             icon="panel-bottom-close"
             onClick={onCollapse}
             size="sm"
+            accentColor="neutral"
             tooltip={{ description: 'Collapse panel' }}
           />
         )}

package/components/ui/breadcrumb.tsx

@@ -3,6 +3,8 @@
 import { ChevronRight } from 'lucide-react'
 import { iconMap, type IconName } from './icon-button.tsx'
 import { ACCENT_NAV, type AccentColor } from '../lib/form-colors.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { AccentColorProvider, useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 
 export interface BreadcrumbSegment {
@@ -20,6 +22,7 @@ export interface BreadcrumbProps {
   /** 'box' (default) wraps in a bordered container; 'plain' renders inline with no background */
   variant?: 'box' | 'plain'
   className?: string
+  accentColor?: FormColor
 }
 
 const sizeConfig = {
@@ -62,15 +65,19 @@ export function Breadcrumb({
   size = 'sm',
   variant = 'box',
   className,
+  accentColor,
 }: BreadcrumbProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const s = sizeConfig[size]
   const isBox = variant === 'box'
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <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-800/50 border border-neutral-700/50 rounded-lg'],
+        isBox && [s.px, s.py, 'bg-neutral-960/50 border border-neutral-700/50 rounded-lg'],
       )}>
         {segments.map((segment, index) => {
           const isLast = index === segments.length - 1
@@ -116,5 +123,6 @@ export function Breadcrumb({
         })}
       </div>
     </nav>
+    </AccentColorProvider>
   )
 }

package/components/ui/{extension-list-card.tsx → capability-list-card.tsx}

@@ -1,5 +1,5 @@
 /**
- * ExtensionListCard — Standardized card for extension list view items.
+ * CapabilityListCard — Standardized card for capability list view items.
  *
  * Used across apps for skill, command, hook, agent, plugin, MCP server,
  * Gemini extension, and marketplace cards.
@@ -14,8 +14,10 @@
 
 import { memo, useState, useRef, useCallback, useEffect, type ReactNode, type ElementType } from 'react'
 import { cn } from '../lib/cn.ts'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
-export interface ExtensionListCardProps {
+export interface CapabilityListCardProps {
   /** Lucide icon component */
   icon: ElementType
   /** Tailwind color class for icon (e.g. 'text-teal-400') */
@@ -38,9 +40,10 @@ export interface ExtensionListCardProps {
   isInactive?: boolean
   /** Test ID for E2E testing */
   testId?: string
+  accentColor?: FormColor
 }
 
-export const ExtensionListCard = memo(function ExtensionListCard({
+export const CapabilityListCard = memo(function CapabilityListCard({
   icon: Icon,
   iconColor,
   borderColor,
@@ -52,7 +55,10 @@ export const ExtensionListCard = memo(function ExtensionListCard({
   metadata,
   isInactive,
   testId,
-}: ExtensionListCardProps) {
+  accentColor: accentColorProp,
+}: CapabilityListCardProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const [isHovered, setIsHovered] = useState(false)
   const hoverTimerRef = useRef<ReturnType<typeof setTimeout>>(undefined)
   useEffect(() => () => clearTimeout(hoverTimerRef.current), [])
@@ -65,9 +71,10 @@ export const ExtensionListCard = memo(function ExtensionListCard({
   }, [])
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div
       className={cn(
-        'relative flex flex-col p-3 bg-neutral-800/50 rounded-lg border border-neutral-700/50 border-l-4 hover:bg-neutral-800 transition-colors',
+        'relative flex flex-col p-3 bg-neutral-960/50 rounded-lg border border-neutral-700/50 border-l-4 hover:bg-neutral-960 transition-colors',
         borderColor,
         isInactive && 'opacity-60',
         isHovered ? 'h-auto z-10' : 'h-full',
@@ -101,5 +108,6 @@ export const ExtensionListCard = memo(function ExtensionListCard({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 })

package/components/ui/checkbox.tsx

@@ -9,6 +9,7 @@
 
 import { Check } from 'lucide-react'
 import { type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 
 export type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg'
@@ -48,7 +49,7 @@ export interface CheckboxProps {
   onChange: (checked: boolean) => void
   disabled?: boolean
   size?: CheckboxSize
-  color?: CheckboxColor
+  accentColor?: CheckboxColor
   variant?: CheckboxVariant
   className?: string
   /** Accessible label — required for screen readers */
@@ -62,14 +63,16 @@ export function Checkbox({
   onChange,
   disabled = false,
   size = 'sm',
-  color = 'blue',
+  accentColor,
   variant = 'outline',
   className,
   'aria-label': ariaLabel,
   testId,
 }: CheckboxProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const s = CHECKBOX_SIZES[size]
-  const c = CHECKBOX_COLORS[color]
+  const c = CHECKBOX_COLORS[effectiveColor]
   return (
     <button
       type="button"

package/components/ui/collapsible-section.tsx

@@ -3,6 +3,9 @@ import { ChevronRight } from 'lucide-react'
 import { iconMap, type IconName } from './icon-button.tsx'
 import { Badge, type BadgeColor } from './badge.tsx'
 import { cn } from '../lib/cn.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
+import { AccentColorProvider } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface CollapsibleSectionProps {
   title: string
@@ -13,6 +16,7 @@ export interface CollapsibleSectionProps {
   badgeColor?: BadgeColor
   children: React.ReactNode
   className?: string
+  accentColor?: FormColor
 }
 
 export function CollapsibleSection({
@@ -24,40 +28,45 @@ export function CollapsibleSection({
   badgeColor,
   children,
   className,
+  accentColor,
 }: CollapsibleSectionProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const [open, setOpen] = useState(defaultOpen)
   const Icon = icon ? iconMap[icon] : undefined
 
   return (
-    <div className={cn('border-b border-neutral-700', className)}>
-      <button
-        type="button"
-        aria-expanded={open}
-        onClick={() => setOpen(!open)}
-        className="flex w-full items-center gap-2 py-2.5 px-1 text-left hover:bg-neutral-700/30 transition-colors cursor-pointer"
-      >
-        <ChevronRight
-          className={cn(
-            'w-3.5 h-3.5 text-neutral-500 transition-transform duration-150',
-            open && 'rotate-90',
+    <AccentColorProvider value={effectiveColor}>
+      <div className={cn('border-b border-neutral-700', className)}>
+        <button
+          type="button"
+          aria-expanded={open}
+          onClick={() => setOpen(!open)}
+          className="flex w-full items-center gap-2 py-2.5 px-1 text-left hover:bg-neutral-700/30 transition-colors cursor-pointer"
+        >
+          <ChevronRight
+            className={cn(
+              'w-3.5 h-3.5 text-neutral-500 transition-transform duration-150',
+              open && 'rotate-90',
+            )}
+          />
+          {Icon && (
+            <span
+              className="flex items-center justify-center w-5 h-5 rounded bg-neutral-700/60"
+              style={iconColor ? { color: iconColor } : undefined}
+            >
+              <Icon className="w-3.5 h-3.5" />
+            </span>
           )}
-        />
-        {Icon && (
-          <span
-            className="flex items-center justify-center w-5 h-5 rounded bg-neutral-700/60"
-            style={iconColor ? { color: iconColor } : undefined}
-          >
-            <Icon className="w-3.5 h-3.5" />
-          </span>
-        )}
-        <span className="text-md font-medium text-neutral-200">{title}</span>
-        {badge !== undefined && (
-          <span className="ml-auto">
-            <Badge value={badge} color={badgeColor} size="xss" />
-          </span>
-        )}
-      </button>
-      {open && <div className="pb-3 pl-7 pr-2">{children}</div>}
-    </div>
+          <span className="text-md font-medium text-neutral-200">{title}</span>
+          {badge !== undefined && (
+            <span className="ml-auto">
+              <Badge value={badge} accentColor={badgeColor} size="xss" />
+            </span>
+          )}
+        </button>
+        {open && <div className="pb-3 pl-7 pr-2">{children}</div>}
+      </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/confirm-badge.tsx

@@ -14,12 +14,13 @@
 import { memo } from 'react'
 import { Check } from 'lucide-react'
 import { FORM_COLORS, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 import { cn } from '../lib/cn.ts'
 
 export type ConfirmBadgeColor = AccentColor
 
 export interface ConfirmBadgeProps {
-  color?: ConfirmBadgeColor
+  accentColor?: ConfirmBadgeColor
   size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg'
   className?: string
   testId?: string
@@ -42,18 +43,20 @@ const iconSizeClasses = {
 }
 
 export const ConfirmBadge = memo(function ConfirmBadge({
-  color = 'neutral',
+  accentColor,
   size = 'sm',
   className,
   testId,
 }: ConfirmBadgeProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'neutral'
   return (
     <span
       data-testid={testId}
       className={cn(
         'inline-flex items-center justify-center border',
-        FORM_COLORS[color].border,
-        FORM_COLORS[color].accent,
+        FORM_COLORS[effectiveColor].border,
+        FORM_COLORS[effectiveColor].accent,
         sizeClasses[size],
         className,
       )}

package/components/ui/cookie-consent.tsx

@@ -1,5 +1,7 @@
 import { useState, useEffect } from 'react'
 import { IconButton } from './icon-button.tsx'
+import { useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export type ConsentChoice = 'accepted' | 'declined' | 'essential'
 
@@ -7,7 +9,7 @@ export interface CookieConsentProps {
   /** localStorage key used to persist the choice */
   storageKey: string
   /** Accent color for the "Accept All" button (default: 'cyan') */
-  accentColor?: string
+  accentColor?: FormColor
   /** Heading text (default: 'We value your privacy') */
   heading?: string
   /** Description text */
@@ -30,15 +32,19 @@ const ACCENT_BUTTON_CLASSES: Record<string, string> = {
   teal: 'bg-teal-600 border-teal-500 hover:bg-teal-500',
   violet: 'bg-violet-600 border-violet-500 hover:bg-violet-500',
   sky: 'bg-sky-600 border-sky-500 hover:bg-sky-500',
+  yellow: 'bg-yellow-600 border-yellow-500 hover:bg-yellow-500',
+  neutral: 'bg-neutral-600 border-neutral-500 hover:bg-neutral-500',
 }
 
 export function CookieConsent({
   storageKey,
-  accentColor = 'cyan',
+  accentColor,
   heading = 'We value your privacy',
   description = 'This site uses only essential cookies for functionality. No tracking or analytics.',
   onConsent,
 }: CookieConsentProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'cyan'
   const [isVisible, setIsVisible] = useState(false)
 
   useEffect(() => {
@@ -55,7 +61,7 @@ export function CookieConsent({
   if (!isVisible) return null
 
   return (
-    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-900 border-t border-neutral-700/50">
+    <div className="fixed bottom-0 left-0 right-0 z-50 p-4 bg-neutral-980 border-t border-neutral-700/50">
       <div className="max-w-6xl mx-auto flex flex-col sm:flex-row items-start sm:items-center gap-4">
         <div className="flex-grow">
           <p className="text-md text-neutral-200 mb-1">{heading}</p>
@@ -65,19 +71,19 @@ export function CookieConsent({
         <div className="flex items-center gap-2 flex-shrink-0">
           <button
             onClick={() => handleConsent('declined')}
-            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-960 transition-colors"
           >
             Decline
           </button>
           <button
             onClick={() => handleConsent('essential')}
-            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-800 transition-colors"
+            className="px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-neutral-400 border border-transparent hover:text-neutral-200 hover:border-neutral-600 hover:bg-neutral-960 transition-colors"
           >
             Essential Only
           </button>
           <button
             onClick={() => handleConsent('accepted')}
-            className={`px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors ${ACCENT_BUTTON_CLASSES[accentColor] ?? ACCENT_BUTTON_CLASSES.cyan}`}
+            className={`px-3 py-1.5 text-md h-[26px] inline-flex items-center justify-center font-medium rounded-md cursor-pointer text-white border transition-colors ${ACCENT_BUTTON_CLASSES[effectiveColor] ?? ACCENT_BUTTON_CLASSES.cyan}`}
           >
             Accept All
           </button>
@@ -85,7 +91,7 @@ export function CookieConsent({
 
         <IconButton
           icon="x"
-          color="neutral"
+          accentColor="neutral"
           size="xs"
           tooltip={{ description: 'Dismiss' }}
           tooltipPosition="top"

package/components/ui/detail-section.tsx

@@ -9,6 +9,9 @@
 
 import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
+import { AccentColorProvider } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface DetailRow {
   label: string
@@ -24,27 +27,32 @@ export interface DetailSectionProps {
   /** Detail rows to display */
   rows: DetailRow[]
   className?: string
+  accentColor?: FormColor
 }
 
-export function DetailSection({ title, icon, rows, className }: DetailSectionProps) {
+export function DetailSection({ title, icon, rows, className, accentColor }: DetailSectionProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
   const Icon = icon ? iconMap[icon] : undefined
 
   return (
-    <div className={className}>
-      <div className="flex items-center gap-2 mb-3">
-        {Icon && <Icon className="w-4 h-4 text-neutral-500" />}
-        <span className="text-md font-medium text-neutral-400">{title}</span>
+    <AccentColorProvider value={effectiveColor}>
+      <div className={className}>
+        <div className="flex items-center gap-2 mb-3">
+          {Icon && <Icon className="w-4 h-4 text-neutral-500" />}
+          <span className="text-md font-medium text-neutral-400">{title}</span>
+        </div>
+        <div className="space-y-2">
+          {rows.map((row) => (
+            <div key={row.label} className="flex items-start gap-3">
+              <span className="text-sm text-neutral-500 w-24 shrink-0">{row.label}:</span>
+              <span className={cn('text-sm text-neutral-400', row.mono && 'font-mono')}>
+                {row.value}
+              </span>
+            </div>
+          ))}
+        </div>
       </div>
-      <div className="space-y-2">
-        {rows.map((row) => (
-          <div key={row.label} className="flex items-start gap-3">
-            <span className="text-sm text-neutral-500 w-24 shrink-0">{row.label}:</span>
-            <span className={cn('text-sm text-neutral-400', row.mono && 'font-mono')}>
-              {row.value}
-            </span>
-          </div>
-        ))}
-      </div>
-    </div>
+    </AccentColorProvider>
   )
 }

package/components/ui/detail-view-wrapper.tsx

@@ -1,4 +1,6 @@
 import { type ReactNode } from 'react'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface DetailViewWrapperProps {
   /** Main editor content */
@@ -12,6 +14,7 @@ export interface DetailViewWrapperProps {
   /** Optional right sidebar */
   rightSidebar?: ReactNode
   showRightSidebar?: boolean
+  accentColor?: FormColor
 }
 
 export function DetailViewWrapper({
@@ -20,36 +23,41 @@ export function DetailViewWrapper({
   bottomPanel,
   rightSidebar,
   showRightSidebar = false,
+  accentColor,
 }: DetailViewWrapperProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'blue'
 
   return (
-    <div className="flex-1 flex flex-col overflow-hidden min-h-0">
-      {actions && (
-        <div className="flex items-center justify-end border-b border-neutral-800 bg-neutral-950/50 px-2 h-[36px]">
-          <div className="flex items-center gap-1">{actions}</div>
-        </div>
-      )}
+    <AccentColorProvider value={effectiveColor}>
+      <div className="flex-1 flex flex-col overflow-hidden min-h-0">
+        {actions && (
+          <div className="flex items-center justify-end border-b border-neutral-960 bg-neutral-990/50 px-2 h-[36px]">
+            <div className="flex items-center gap-1">{actions}</div>
+          </div>
+        )}
 
-      {/* Main content area */}
-      <div className="flex-1 flex overflow-hidden min-h-0">
-        <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
-          {editorContent && (
-            <div className="flex-1 flex flex-col overflow-hidden">{editorContent}</div>
+        {/* Main content area */}
+        <div className="flex-1 flex overflow-hidden min-h-0">
+          <div className="flex-1 flex flex-col min-w-0 overflow-hidden">
+            {editorContent && (
+              <div className="flex-1 flex flex-col overflow-hidden">{editorContent}</div>
+            )}
+          </div>
+
+          {/* Optional right sidebar */}
+          {showRightSidebar && rightSidebar && (
+            <div className="w-[300px] border-l border-neutral-960 overflow-hidden flex-shrink-0">
+              {rightSidebar}
+            </div>
           )}
         </div>
 
-        {/* Optional right sidebar */}
-        {showRightSidebar && rightSidebar && (
-          <div className="w-[300px] border-l border-neutral-800 overflow-hidden flex-shrink-0">
-            {rightSidebar}
-          </div>
+        {/* Optional bottom panel */}
+        {bottomPanel && (
+          <div className="border-t border-neutral-960">{bottomPanel}</div>
         )}
       </div>
-
-      {/* Optional bottom panel */}
-      {bottomPanel && (
-        <div className="border-t border-neutral-800">{bottomPanel}</div>
-      )}
-    </div>
+    </AccentColorProvider>
   )
 }