@toolr/ui-design 0.1.7 → 0.1.9

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>
   )
 }

package/components/ui/editor-placeholder-card.tsx

@@ -1,6 +1,8 @@
 import { useState, useRef, useLayoutEffect } from 'react'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { Input } from './input.tsx'
+import { useAccentColor } from '../lib/accent-context.ts'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface EditorPlaceholderCardProps {
   /** Placeholder name (without braces) */
@@ -14,7 +16,7 @@ export interface EditorPlaceholderCardProps {
   /** Label for the value section (default: "Value:") */
   valueLabel?: string
   /** Color scheme */
-  accentColor?: 'purple' | 'blue' | 'neutral' | 'sky'
+  accentColor?: FormColor
   /** Action buttons to show on the right (e.g., edit/delete for settings) */
   actions?: ActionItem[]
   /** Show copy button that copies the {{PLACEHOLDER}} syntax */
@@ -27,23 +29,22 @@ export interface EditorPlaceholderCardProps {
   className?: string
 }
 
-const COLORS = {
-  purple: {
-    name: 'text-purple-400',
-    nameBg: 'bg-purple-500/10',
-  },
-  blue: {
-    name: 'text-blue-400',
-    nameBg: 'bg-blue-500/10',
-  },
-  neutral: {
-    name: 'text-neutral-400',
-    nameBg: 'bg-neutral-500/10',
-  },
-  sky: {
-    name: 'text-sky-400',
-    nameBg: 'bg-sky-500/10',
-  },
+const COLORS: Record<FormColor, { name: string; nameBg: string }> = {
+  blue: { name: 'text-blue-400', nameBg: 'bg-blue-500/10' },
+  green: { name: 'text-green-400', nameBg: 'bg-green-500/10' },
+  red: { name: 'text-red-400', nameBg: 'bg-red-500/10' },
+  orange: { name: 'text-orange-400', nameBg: 'bg-orange-500/10' },
+  cyan: { name: 'text-cyan-400', nameBg: 'bg-cyan-500/10' },
+  yellow: { name: 'text-yellow-400', nameBg: 'bg-yellow-500/10' },
+  purple: { name: 'text-purple-400', nameBg: 'bg-purple-500/10' },
+  indigo: { name: 'text-indigo-400', nameBg: 'bg-indigo-500/10' },
+  emerald: { name: 'text-emerald-400', nameBg: 'bg-emerald-500/10' },
+  amber: { name: 'text-amber-400', nameBg: 'bg-amber-500/10' },
+  violet: { name: 'text-violet-400', nameBg: 'bg-violet-500/10' },
+  neutral: { name: 'text-neutral-400', nameBg: 'bg-neutral-500/10' },
+  sky: { name: 'text-sky-400', nameBg: 'bg-sky-500/10' },
+  pink: { name: 'text-pink-400', nameBg: 'bg-pink-500/10' },
+  teal: { name: 'text-teal-400', nameBg: 'bg-teal-500/10' },
 }
 
 export function EditorPlaceholderCard({
@@ -52,20 +53,22 @@ export function EditorPlaceholderCard({
   value,
   required = false,
   valueLabel = 'Value:',
-  accentColor = 'purple',
+  accentColor,
   actions,
   showCopyPlaceholder = false,
   showCopyValue = false,
   hideValue = false,
   className = '',
 }: EditorPlaceholderCardProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColor ?? contextAccent ?? 'purple'
   const [isExpanded, setIsExpanded] = useState(false)
   const [isPlaceholderCopied, setIsPlaceholderCopied] = useState(false)
   const [isValueCopied, setIsValueCopied] = useState(false)
   const [isOverflowing, setIsOverflowing] = useState(false)
   const valueRef = useRef<HTMLDivElement>(null)
 
-  const colors = COLORS[accentColor]
+  const colors = COLORS[effectiveColor]
   const hasValue = !!value
 
   // Check if content overflows (truncated) - sync state with DOM measurement
@@ -123,7 +126,7 @@ export function EditorPlaceholderCard({
               icon={isPlaceholderCopied ? 'check' : 'copy'}
               onClick={handleCopyPlaceholder}
               size="sm"
-              color={isPlaceholderCopied ? 'green' : 'neutral'}
+              accentColor={isPlaceholderCopied ? 'green' : 'neutral'}
               tooltip={{ description: `Copy {{${name}}}` }}
               tooltipPosition="left"
             />
@@ -133,7 +136,7 @@ export function EditorPlaceholderCard({
               icon={isValueCopied ? 'check' : 'copy'}
               onClick={handleCopyValue}
               size="sm"
-              color={isValueCopied ? 'green' : 'neutral'}
+              accentColor={isValueCopied ? 'green' : 'neutral'}
               tooltip={{ description: 'Copy value to clipboard' }}
               tooltipPosition="left"
             />
@@ -156,7 +159,7 @@ export function EditorPlaceholderCard({
                   readOnly
                   size="xs"
                   variant="filled"
-                  color="neutral"
+                  accentColor="neutral"
 
                 />
               </div>
@@ -170,13 +173,14 @@ export function EditorPlaceholderCard({
                     icon={isExpanded ? 'chevron-up' : 'chevron-down'}
                     onClick={() => setIsExpanded(!isExpanded)}
                     size="xss"
+                    accentColor="neutral"
                     tooltip={{ description: isExpanded ? 'Show less' : 'Show more' }}
                   />
                 )}
               </div>
               <div
                 ref={valueRef}
-                className={`mt-1.5 px-2 py-1.5 bg-neutral-800/50 rounded text-sm text-neutral-400 font-mono ${
+                className={`mt-1.5 px-2 py-1.5 bg-neutral-960/50 rounded text-sm text-neutral-400 font-mono ${
                   isExpanded
                     ? 'whitespace-pre-wrap break-all max-h-[190px] overflow-y-auto'
                     : 'truncate'

package/components/ui/editor-toolbar.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import { IconButton, type ActionItem } from './icon-button.tsx'
 import { Label } from './label.tsx'
 import { ConfirmModal } from './modal.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
 
 export interface EditorToolbarProps {
   /** Optional title displayed in the toolbar */
@@ -31,6 +32,7 @@ export interface EditorToolbarProps {
   leftActions?: ActionItem[]
   /** Optional: Additional action buttons on the right side (before save) */
   rightActions?: ActionItem[]
+  accentColor?: FormColor
 }
 
 export function EditorToolbar({
@@ -49,6 +51,7 @@ export function EditorToolbar({
   hasError = false,
   leftActions,
   rightActions,
+  accentColor: _accentColor,
 }: EditorToolbarProps) {
   const [showConfirmDialog, setShowConfirmDialog] = useState(false)
 
@@ -69,7 +72,7 @@ export function EditorToolbar({
 
   return (
     <>
-      <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-900 border-b border-neutral-800">
+      <div className="flex items-center justify-between px-4 py-1.5 bg-neutral-980 border-b border-neutral-960">
         {/* Left side */}
         <div className="flex items-center gap-2">
           {(title || description) && (
@@ -85,7 +88,7 @@ export function EditorToolbar({
         {isDirty && (
           <Label
             text="modified"
-            color="yellow"
+            accentColor="yellow"
             icon="pencil"
             size="xs"
             tooltip={{ description: 'File has unsaved changes' }}
@@ -101,7 +104,7 @@ export function EditorToolbar({
               icon="rotate"
               onClick={handleResetClick}
               size="sm"
-              color="orange"
+              accentColor="orange"
               tooltip={resetTooltip}
             />
           )}
@@ -112,7 +115,7 @@ export function EditorToolbar({
               onClick={onSave}
               disabled={!isDirty || isSaving || hasError}
               size="sm"
-              color={isDirty && !hasError ? 'amber' : 'neutral'}
+              accentColor={isDirty && !hasError ? 'green' : 'neutral'}
               status={isSaving ? 'loading' : undefined}
               tooltip={{ description: 'Save changes to file' }}
             />

package/components/ui/execution-details-panel.tsx

@@ -6,10 +6,12 @@
  * Used inside ActionDialog as the mandatory execution details section.
  */
 
-import { AlertTriangle, Info } from 'lucide-react'
+import { AlertTriangle } from 'lucide-react'
 import { Checkbox } from './checkbox.tsx'
 import { cn } from '../lib/cn.ts'
 import type { DetailRow } from './detail-section.tsx'
+import type { FormColor } from '../lib/form-colors.ts'
+import { useAccentColor, AccentColorProvider } from '../lib/accent-context.ts'
 
 export interface ExecutionDetailsPanelProps {
   details: DetailRow[]
@@ -19,6 +21,7 @@ export interface ExecutionDetailsPanelProps {
   /** Warning message shown below the toggle */
   warningMessage?: string
   className?: string
+  accentColor?: FormColor
 }
 
 export function ExecutionDetailsPanel({
@@ -27,16 +30,17 @@ export function ExecutionDetailsPanel({
   onAllowDirectEditsChange,
   warningMessage,
   className,
+  accentColor: accentColorProp,
 }: ExecutionDetailsPanelProps) {
+  const contextAccent = useAccentColor()
+  const effectiveColor = accentColorProp ?? contextAccent ?? 'blue'
   const showToggle = onAllowDirectEditsChange !== undefined
 
   return (
+    <AccentColorProvider value={effectiveColor}>
     <div className={cn('space-y-3', className)}>
       {/* Header */}
-      <div className="flex items-center gap-2">
-        <Info className="w-4 h-4 text-neutral-500" />
-        <span className="font-medium text-neutral-400 text-md">Execution Details</span>
-      </div>
+      <div className="font-medium text-neutral-400 text-md">Execution Details:</div>
 
       {/* Direct edits toggle */}
       {showToggle && (
@@ -84,5 +88,6 @@ export function ExecutionDetailsPanel({
         </div>
       )}
     </div>
+    </AccentColorProvider>
   )
 }

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

@@ -328,14 +328,14 @@ export function FileStructureSection({
   }
 
   const treePanel = (
-    <div className={`flex flex-col bg-neutral-900 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden ${variant === 'split' && effectiveFilePath ? 'w-1/3 shrink-0' : 'flex-1'}`}>
+    <div className={`flex flex-col bg-neutral-980 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden ${variant === 'split' && effectiveFilePath ? 'w-1/3 shrink-0' : 'flex-1'}`}>
       <div className={`flex items-center px-3 py-2 border-b ${ACCENT_BORDER[accentColor]} shrink-0 gap-2 min-w-0`}>
         <FolderTree className={`w-3.5 h-3.5 shrink-0 ${ACCENT_ICON[accentColor]}`} />
         <span className="text-sm text-neutral-200 truncate flex-1">Files</span>
         <CollapseButton
           collapsed={allCollapsed}
           onToggle={() => setExpandedPaths(allCollapsed ? new Set(allDirPaths) : new Set())}
-          color={accentColor}
+          accentColor={accentColor}
         />
       </div>
       <div className={`${variant === 'split' ? 'flex-1 overflow-y-auto' : ''} p-3`}>
@@ -353,7 +353,7 @@ export function FileStructureSection({
   )
 
   const previewPanel = effectiveFilePath ? (
-    <div className={`flex-1 flex flex-col bg-neutral-900 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden`}>
+    <div className={`flex-1 flex flex-col bg-neutral-980 border ${ACCENT_BORDER[accentColor]} rounded-lg overflow-hidden`}>
       <div className={`flex items-center px-3 py-2 border-b ${ACCENT_BORDER[accentColor]} shrink-0 gap-2 min-w-0`}>
         <FileCode className={`w-3.5 h-3.5 shrink-0 ${ACCENT_ICON[accentColor]}`} />
         <span className="text-sm text-neutral-200 truncate flex-1">{selectedFileName}</span>

package/components/ui/file-tree.tsx

@@ -1,5 +1,6 @@
 import { FileCode, Folder, FolderOpen, ChevronRight, ChevronDown } from 'lucide-react'
 import { ACCENT_ICON, type AccentColor } from '../lib/form-colors.ts'
+import { useAccentColor } from '../lib/accent-context.ts'
 
 export interface FileTreeNode {
   name: string
@@ -57,11 +58,12 @@ export function collectDirPaths(nodes: FileTreeNode[], rootName?: string, prefix
   return paths
 }
 
-export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = '', expandedPaths, onTogglePath, accentColor = 'blue' }: FileTreeProps) {
+export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix = '', expandedPaths, onTogglePath, accentColor: accentColorProp }: FileTreeProps) {
+  const accentColor = accentColorProp ?? useAccentColor() ?? 'blue'
   if (rootName) {
     const rootNode: FileTreeNode = { name: rootName, type: 'directory', children: nodes }
     return (
-      <ul className="space-y-0.5">
+      <ul role="tree" className="space-y-0.5">
         <FileTreeNodeItem
           node={rootNode}
           path={rootName}
@@ -76,7 +78,7 @@ export function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix =
   }
 
   return (
-    <ul className="space-y-0.5">
+    <ul role="tree" className="space-y-0.5">
       {nodes.filter(nodeHasFiles).map((node) => {
         const fullPath = prefix ? `${prefix}/${node.name}` : node.name
         return (
@@ -120,7 +122,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
       : `${base} cursor-pointer text-white hover:bg-neutral-700/50 hover:text-neutral-200`
 
   return (
-    <li>
+    <li role="treeitem" aria-expanded={isDir ? expanded : undefined} aria-selected={isSelected}>
       <button
         onClick={isDir ? () => onTogglePath(path) : () => onSelectFile(path)}
         className={rowClass}
@@ -138,7 +140,7 @@ function FileTreeNodeItem({ node, path, selectedPath, onSelectFile, expandedPath
         <span className="truncate">{node.name}</span>
       </button>
       {isDir && expanded && node.children && (
-        <ul className="ml-4 space-y-0.5">
+        <ul role="group" className="ml-4 space-y-0.5">
           {node.children.filter(nodeHasFiles).map((child) => {
             const childPath = `${path}/${child.name}`
             return (