@toolr/ui-design 0.1.6 → 0.1.7

package/components/ui/settings-info-box.tsx

@@ -1,7 +1,8 @@
 import { Info, AlertTriangle, CheckCircle, AlertCircle } from 'lucide-react'
+import { ACCENT_TEXT, type AccentColor } from '../lib/form-colors.ts'
 import { cn } from '../lib/cn.ts'
 
-export type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal'
+export type SettingsInfoBoxColor = AccentColor
 
 export interface SettingsInfoBoxProps {
   children: React.ReactNode
@@ -10,7 +11,7 @@ export interface SettingsInfoBoxProps {
   testId?: string
 }
 
-const iconMap: Record<SettingsInfoBoxColor, typeof Info> = {
+const INFO_BOX_ICONS: Record<SettingsInfoBoxColor, typeof Info> = {
   neutral: Info,
   blue: Info,
   amber: AlertTriangle,
@@ -28,24 +29,6 @@ const iconMap: Record<SettingsInfoBoxColor, typeof Info> = {
   teal: Info,
 }
 
-const iconColorMap: Record<SettingsInfoBoxColor, string> = {
-  neutral: 'text-neutral-500',
-  blue: 'text-blue-400',
-  amber: 'text-amber-400',
-  green: 'text-green-400',
-  red: 'text-red-400',
-  orange: 'text-orange-400',
-  cyan: 'text-cyan-400',
-  yellow: 'text-yellow-400',
-  purple: 'text-purple-400',
-  indigo: 'text-indigo-400',
-  emerald: 'text-emerald-400',
-  violet: 'text-violet-400',
-  sky: 'text-sky-400',
-  pink: 'text-pink-400',
-  teal: 'text-teal-400',
-}
-
 const borderColorMap: Record<SettingsInfoBoxColor, string> = {
   neutral: 'border-l-neutral-600',
   blue: 'border-l-blue-500',
@@ -65,7 +48,7 @@ const borderColorMap: Record<SettingsInfoBoxColor, string> = {
 }
 
 export function SettingsInfoBox({ children, color = 'neutral', className, testId }: SettingsInfoBoxProps) {
-  const Icon = iconMap[color]
+  const Icon = INFO_BOX_ICONS[color]
 
   return (
     <div
@@ -73,7 +56,7 @@ export function SettingsInfoBox({ children, color = 'neutral', className, testId
       style={{ paddingLeft: 10 }}
       data-testid={testId}
     >
-      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', iconColorMap[color])} />
+      <Icon className={cn('w-4 h-4 mt-0.5 shrink-0', ACCENT_TEXT[color])} />
       <div className="text-md text-neutral-500">{children}</div>
     </div>
   )

package/components/ui/status-card.tsx

@@ -1,19 +1,8 @@
 /** Status card displaying a list of labeled items with color-coded status indicators. */
 
-import {
-  Settings, Shield, Database, Globe, Zap, Code, Terminal,
-  Star, Cloud, Bell, Heart, Sparkles, Bot, Plug,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { iconMap, type IconName } from './icon-button.tsx'
 import { cn } from '../lib/cn.ts'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  settings: Settings, shield: Shield, database: Database, globe: Globe,
-  zap: Zap, code: Code, terminal: Terminal, star: Star, cloud: Cloud,
-  bell: Bell, heart: Heart, sparkles: Sparkles, bot: Bot, plug: Plug,
-}
-
 type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral'
 
 export interface StatusItem {
@@ -55,7 +44,7 @@ export function StatusCard({
   action,
   className,
 }: StatusCardProps) {
-  const Icon = icon ? iconSubset[icon] : undefined
+  const Icon = icon ? iconMap[icon] : undefined
 
   return (
     <div className={cn('rounded-lg border border-neutral-700 bg-neutral-800 overflow-hidden', className)}>

package/components/ui/tab-bar.tsx

@@ -1,38 +1,12 @@
 /** Tab bar with underline, pill, and card variants, closable tabs, color-coded icons, and auto-collapse to icon-only. */
 
 import { useRef, useState, useEffect, useCallback } from 'react'
-import {
-  Settings, Folder, File, Code, Terminal, Database,
-  Globe, Star, Users, User, Tag, X,
-  Zap, Shield, Sparkles, Eye, Lock, Search, Heart,
-} from 'lucide-react'
-import type { LucideIcon } from 'lucide-react'
-import type { IconName } from './icon-button.tsx'
+import { X } 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 { Tooltip } from './tooltip.tsx'
 
-const iconSubset: Partial<Record<IconName, LucideIcon>> = {
-  folder: Folder,
-  file: File,
-  settings: Settings,
-  code: Code,
-  terminal: Terminal,
-  database: Database,
-  globe: Globe,
-  star: Star,
-  users: Users,
-  user: User,
-  tag: Tag,
-  zap: Zap,
-  shield: Shield,
-  sparkles: Sparkles,
-  eye: Eye,
-  lock: Lock,
-  search: Search,
-  heart: Heart,
-}
-
 export interface Tab {
   id: string
   label: string
@@ -102,7 +76,7 @@ function estimateTabsWidth(tabs: Tab[], size: keyof typeof sizeConfig): number {
 }
 
 function TabIcon({ icon, size, color }: { icon: IconName; size: 'xss' | 'xs' | 'sm' | 'md' | 'lg'; color?: string }) {
-  const Icon = iconSubset[icon]
+  const Icon = iconMap[icon]
   if (!Icon) return null
   const s = sizeConfig[size]
   const c = getColors(color)

package/components/ui/toggle.tsx

@@ -7,22 +7,9 @@
  * - List items - inline toggle controls
  */
 
-export type ToggleColor =
-  | 'blue'
-  | 'green'
-  | 'red'
-  | 'orange'
-  | 'cyan'
-  | 'yellow'
-  | 'purple'
-  | 'indigo'
-  | 'emerald'
-  | 'amber'
-  | 'violet'
-  | 'neutral'
-  | 'sky'
-  | 'pink'
-  | 'teal'
+import { type AccentColor } from '../lib/form-colors.ts'
+
+export type ToggleColor = AccentColor
 
 // Border colors per accent
 const BORDER_COLORS: Record<ToggleColor, { idle: string; active: string }> = {
@@ -90,8 +77,6 @@ const TOGGLE_SIZES: Record<ToggleSize, { track: string; knob: string; translate:
   lg: { track: 'w-14 h-7', knob: 'w-6 h-6', translate: 'translate-x-7' },
 }
 
-export type ToggleVariant = 'outline' | 'filled'
-
 export interface ToggleProps {
   checked: boolean
   onChange: (checked: boolean) => void
@@ -99,7 +84,6 @@ export interface ToggleProps {
   size?: ToggleSize
   className?: string
   color?: ToggleColor
-  variant?: ToggleVariant
   /** Test ID for E2E testing */
   testId?: string
 }

package/components/ui/tooltip.tsx

@@ -1,6 +1,7 @@
-import { useState, useRef, useLayoutEffect, useEffect } from 'react'
+import { useState, useRef, useLayoutEffect, useEffect, useCallback } from 'react'
 import type { ReactNode } from 'react'
 import { createPortal } from 'react-dom'
+import { useClickOutside } from '../hooks/use-click-outside.ts'
 
 export interface TooltipContent {
   title?: string
@@ -201,19 +202,8 @@ export function Tooltip({
   }
 
   // Click-outside dismissal for click trigger mode
-  useEffect(() => {
-    if (trigger !== 'click' || !isVisible) return
-    const handleClickOutside = (e: MouseEvent) => {
-      if (
-        triggerRef.current && !triggerRef.current.contains(e.target as Node) &&
-        tooltipRef.current && !tooltipRef.current.contains(e.target as Node)
-      ) {
-        setIsVisible(false)
-      }
-    }
-    document.addEventListener('mousedown', handleClickOutside)
-    return () => document.removeEventListener('mousedown', handleClickOutside)
-  }, [trigger, isVisible])
+  const dismissClickTooltip = useCallback(() => setIsVisible(false), [])
+  useClickOutside([triggerRef, tooltipRef], isVisible && trigger === 'click', dismissClickTooltip)
 
   const updatePosition = () => {
     if (!triggerRef.current) return
@@ -262,9 +252,7 @@ export function Tooltip({
       style={{
         top: coords.top,
         left: coords.left,
-        opacity: isVisible ? 1 : 0,
-        visibility: isVisible ? 'visible' : 'hidden',
-        transition: 'opacity 150ms, visibility 150ms',
+        opacity: 1,
         ...(multiline ? { maxWidth: maxWidth ?? '80vw' } : {}),
         ...(maxHeight ? { maxHeight, overflowY: 'auto' as const } : {}),
       }}
@@ -290,7 +278,7 @@ export function Tooltip({
       >
         {children}
       </div>
-      {createPortal(tooltipContent, document.body)}
+      {isVisible && createPortal(tooltipContent, document.body)}
     </>
   )
 }

package/dist/index.d.ts

@@ -6,6 +6,13 @@ import { LucideIcon } from 'lucide-react';
 import { ClassValue } from 'clsx';
 
 type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type AccentColor = FormColor;
+declare const ACCENT_TEXT: Record<AccentColor, string>;
+declare const ACCENT_ICON: Record<FormColor, string>;
+declare const ACCENT_NAV: Record<AccentColor, {
+    bg: string;
+    text: string;
+}>;
 
 declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
 type ScaleKey = (typeof SCALE_KEYS)[number];
@@ -231,7 +238,7 @@ interface ActionItem {
     testId?: string;
 }
 type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error';
-type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type IconButtonColor = AccentColor;
 type IconButtonVariant = 'filled' | 'outline';
 interface IconButtonProps {
     icon: IconName | ReactNode;
@@ -265,7 +272,7 @@ interface CollapseButtonProps {
 }
 declare function CollapseButton({ collapsed, onToggle, size, color, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
 
-type LabelColor = 'neutral' | 'green' | 'red' | 'blue' | 'yellow' | 'orange' | 'purple' | 'amber' | 'emerald' | 'cyan' | 'indigo' | 'teal' | 'violet' | 'pink' | 'sky';
+type LabelColor = AccentColor;
 interface LabelProps {
     text: string;
     color: LabelColor;
@@ -287,23 +294,11 @@ interface LabelProps {
     className?: string;
     testId?: string;
 }
+/** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
+declare function smartCapitalize(value: string): string;
 declare function Label({ text, color, icon, IconComponent: CustomIcon, tooltip, size, textTransform, progress, onClick, className, testId, }: LabelProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Badge - Outline-styled pill badge for displaying counts or short labels
- *
- * Used by:
- * - TabBar, BottomPanelHeader - tab count badges
- * - NavCard - card count badges
- * - Any UI that needs a small inline indicator
- *
- * Features:
- * - Outline variant matching IconButton outline style (border + text, no fill)
- * - Accepts numbers (auto-caps at 99+) or short strings ("New")
- * - 15 color variants
- * - 5 size variants (xss, xs, sm, md, lg)
- */
-type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type BadgeColor = AccentColor;
 interface BadgeProps {
     value: number | string;
     color?: BadgeColor;
@@ -313,19 +308,7 @@ interface BadgeProps {
 }
 declare function Badge({ value, color, size, className, testId, }: BadgeProps): react_jsx_runtime.JSX.Element;
 
-/**
- * ConfirmBadge - Outline-styled check badge for indicating selection/confirmation
- *
- * Used by:
- * - SelectionGrid - selected state indicator on cards
- * - Any UI that needs a small check/confirmed indicator
- *
- * Features:
- * - Outline variant matching IconButton outline style (border + text, no fill)
- * - 15 color variants
- * - 5 size variants (xss, xs, sm, md, lg)
- */
-type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type ConfirmBadgeColor = AccentColor;
 interface ConfirmBadgeProps {
     color?: ConfirmBadgeColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -334,16 +317,8 @@ interface ConfirmBadgeProps {
 }
 declare function ConfirmBadge({ color, size, className, testId, }: ConfirmBadgeProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Checkbox - Controlled checkbox input with check icon
- *
- * Used by:
- * - Settings forms - boolean preference toggles
- * - Filter panels - multi-select filters
- * - List items - selection state
- */
 type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-type CheckboxColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type CheckboxColor = AccentColor;
 type CheckboxVariant = 'outline' | 'filled';
 interface CheckboxProps {
     checked: boolean;
@@ -358,17 +333,8 @@ interface CheckboxProps {
 }
 declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
-/**
- * Toggle - iOS-style switch toggle
- *
- * Used by:
- * - Settings pages - boolean preferences
- * - Feature flags - enable/disable features
- * - List items - inline toggle controls
- */
-type ToggleColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+type ToggleColor = AccentColor;
 type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-type ToggleVariant = 'outline' | 'filled';
 interface ToggleProps {
     checked: boolean;
     onChange: (checked: boolean) => void;
@@ -376,7 +342,6 @@ interface ToggleProps {
     size?: ToggleSize;
     className?: string;
     color?: ToggleColor;
-    variant?: ToggleVariant;
     /** Test ID for E2E testing */
     testId?: string;
 }
@@ -430,7 +395,7 @@ interface SegmentedToggleProps<T extends string> {
     options: SegmentedToggleOption<T>[];
     value: T;
     onChange: (value: T) => void;
-    accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
+    accentColor?: AccentColor;
     /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
     variant?: 'filled' | 'outline';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -620,28 +585,21 @@ interface SelectionGridProps {
 }
 declare function SelectionGrid({ items: itemsProp, presets, selectedIds, onSelect, mode, layout, columns, className, }: SelectionGridProps): react_jsx_runtime.JSX.Element;
 
-/**
- * ExecutionDetailsPanel - Shows AI execution configuration before running actions
- *
- * Displays tool, permissions, output format, CLI flags, and change handling.
- * Optional "Allow direct edits" toggle with warning message.
- * Used inside ActionDialog as the mandatory execution details section.
- */
-interface ExecutionDetailRow {
+interface DetailRow {
     label: string;
     value: string;
     mono?: boolean;
 }
-interface ExecutionDetailsPanelProps {
-    details: ExecutionDetailRow[];
-    /** Show the "Allow direct edits" toggle */
-    allowDirectEdits?: boolean;
-    onAllowDirectEditsChange?: (value: boolean) => void;
-    /** Warning message shown below the toggle */
-    warningMessage?: string;
+interface DetailSectionProps {
+    /** Section title (e.g., "Execution Details") */
+    title: string;
+    /** Icon before the title */
+    icon?: IconName;
+    /** Detail rows to display */
+    rows: DetailRow[];
     className?: string;
 }
-declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
+declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
 
 interface ActionDialogProps {
     /** Dialog title */
@@ -697,7 +655,7 @@ interface ActionDialogProps {
     /** Scenario grid column count */
     scenarioColumns?: number;
     /** Execution detail rows (Tool, Permissions, Output, CLI Flags, Changes) */
-    executionDetails: ExecutionDetailRow[];
+    executionDetails: DetailRow[];
     /** Whether direct file edits are allowed */
     allowDirectEdits?: boolean;
     /** Callback to toggle direct edits - shows the toggle when provided */
@@ -711,6 +669,17 @@ interface ActionDialogProps {
 }
 declare function ActionDialog({ title, subtitle, icon, iconColor, onSettings, onCancel, onSubmit, submitLabel, submitIcon, submitColor, submitDisabled, statusText, selectionLabel, items, presets, selectedIds, onSelect, selectionMode, selectionLayout, selectionColumns, scenarioLabel, scenarios, selectedScenarioIds, onSelectScenarios, scenarioLayout, scenarioColumns, executionDetails, allowDirectEdits, onAllowDirectEditsChange, executionWarning, children, className, }: ActionDialogProps): react.ReactPortal;
 
+interface ExecutionDetailsPanelProps {
+    details: DetailRow[];
+    /** Show the "Allow direct edits" toggle */
+    allowDirectEdits?: boolean;
+    onAllowDirectEditsChange?: (value: boolean) => void;
+    /** Warning message shown below the toggle */
+    warningMessage?: string;
+    className?: string;
+}
+declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
+
 interface FileTreeNode {
     name: string;
     type: 'file' | 'directory';
@@ -874,7 +843,6 @@ declare function DetailViewWrapper({ editorContent, actions, bottomPanel, rightS
 
 type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings';
 type ExtensionSource = 'project' | 'plugin' | 'user' | 'local';
-declare function formatCategory(category: string): string;
 interface SeedrItemStatus {
     updateAvailable: boolean;
     modified: boolean;
@@ -972,7 +940,6 @@ type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVariant | S
 declare function RegistryCard(props: RegistryCardProps): react_jsx_runtime.JSX.Element;
 
 type PreviewMode = 'format' | 'language' | 'plain';
-type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
 interface FileStructureSectionProps {
     files: FileTreeNode[] | null;
     rootName: string;
@@ -2341,51 +2308,6 @@ interface ScenarioOption {
     }>;
 }
 
-/**
- * usePromptEditor — Hook managing prompt editor state
- *
- * Part of: Sections > Prompt Editor
- *
- * Handles:
- * - Local content state (separate from saved content for dirty detection)
- * - Dirty state detection
- * - Save with Ctrl/Cmd+S keyboard shortcut
- * - Variable search/filter
- * - Active tab state
- */
-
-interface UsePromptEditorOptions {
-    /** Prompt content keyed by tool id */
-    prompts: Record<string, string>;
-    /** Called when saving (all modified prompts at once) */
-    onPromptChange: (tool: string, value: string) => void;
-    /** Available tool tabs */
-    tools: ToolTab[];
-    /** Available template variables */
-    variables?: PromptPlaceholder[];
-}
-interface UsePromptEditorReturn {
-    /** Currently active tool tab id */
-    activeTab: string;
-    setActiveTab: (tab: string) => void;
-    /** Local editor content (may differ from saved prompts) */
-    localContent: Record<string, string>;
-    /** Current prompt for the active tab */
-    currentPrompt: string;
-    /** Whether any tab has unsaved changes */
-    isDirty: boolean;
-    /** Handle editor content change */
-    handleEditorChange: (value: string | undefined) => void;
-    /** Save all modified prompts */
-    handleSave: () => void;
-    /** Variable search state */
-    variableSearch: string;
-    setVariableSearch: (search: string) => void;
-    /** Filtered variables based on search */
-    filteredVariables: PromptPlaceholder[];
-}
-declare function usePromptEditor({ prompts, onPromptChange, tools, variables, }: UsePromptEditorOptions): UsePromptEditorReturn;
-
 interface TabbedPromptEditorProps {
     /** Prompt content keyed by tool id */
     prompts: Record<string, string>;
@@ -2674,22 +2596,6 @@ interface SnapshotCardProps {
 }
 declare function SnapshotCard({ title, timestamp, status, description, stats, onSync, onView, className, }: SnapshotCardProps): react_jsx_runtime.JSX.Element;
 
-interface DetailRow {
-    label: string;
-    value: string;
-    mono?: boolean;
-}
-interface DetailSectionProps {
-    /** Section title (e.g., "Execution Details") */
-    title: string;
-    /** Icon before the title */
-    icon?: IconName;
-    /** Detail rows to display */
-    rows: DetailRow[];
-    className?: string;
-}
-declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
-
 type ConsentChoice = 'accepted' | 'declined' | 'essential';
 interface CookieConsentProps {
     /** localStorage key used to persist the choice */
@@ -2706,10 +2612,12 @@ interface CookieConsentProps {
 declare function CookieConsent({ storageKey, accentColor, heading, description, onConsent, }: CookieConsentProps): react_jsx_runtime.JSX.Element | null;
 
 /**
- * Close a menu/dropdown when clicking outside its ref element.
+ * Close a menu/dropdown when clicking outside its ref element(s).
+ * Accepts a single ref, an array of refs, or null.
+ * When given an array, closes only if the click is outside ALL refs.
  * If ref is null, closes on any mousedown event.
  */
-declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOpen: boolean, onClose: () => void): void;
+declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[] | null, isOpen: boolean, onClose: () => void): void;
 
 /**
  * Constrains a dropdown menu's height to fit within the viewport.
@@ -2717,6 +2625,11 @@ declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOp
  */
 declare function useDropdownMaxHeight<T extends HTMLElement>(isOpen: boolean, margin?: number): react.RefObject<T | null>;
 
+/**
+ * Shared modal behavior: Escape key to close + body overflow lock.
+ */
+declare function useModalBehavior(isOpen: boolean, onClose: () => void): void;
+
 /** Hook for managing back/forward navigation history with a breadcrumb segment stack. */
 
 interface UseNavigationHistoryReturn {
@@ -2731,6 +2644,18 @@ interface UseNavigationHistoryReturn {
 }
 declare function useNavigationHistory(initial?: BreadcrumbSegment[], maxEntries?: number): UseNavigationHistoryReturn;
 
+interface UseResizableSidebarOptions {
+    min: number;
+    max: number;
+    defaultWidth: number;
+    /** 'left' = drag right shrinks (sidebar on right), 'right' = drag right grows (sidebar on left) */
+    direction?: 'left' | 'right';
+}
+declare function useResizableSidebar({ min, max, defaultWidth, direction }: UseResizableSidebarOptions): {
+    width: number;
+    onPointerDown: (e: React.PointerEvent) => void;
+};
+
 interface SettingRowBase {
     label: string;
     description?: string;
@@ -2743,7 +2668,6 @@ interface SettingRowToggle extends SettingRowBase {
     onChange: (checked: boolean) => void;
     color?: ToggleColor;
     size?: ToggleSize;
-    variant?: ToggleVariant;
 }
 interface SettingRowSelect extends SettingRowBase {
     type: 'select';
@@ -2773,7 +2697,7 @@ interface SettingsCardProps {
 }
 declare function SettingsCard({ children, className, title, description, testId }: SettingsCardProps): react_jsx_runtime.JSX.Element;
 
-type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal';
+type SettingsInfoBoxColor = AccentColor;
 interface SettingsInfoBoxProps {
     children: React.ReactNode;
     color?: SettingsInfoBoxColor;
@@ -2838,7 +2762,6 @@ interface SettingsHeaderProps {
         title: string;
         description: string;
     };
-    confirmReset?: boolean;
     action?: ReactNode;
     variant?: 'default' | 'info' | 'warning' | 'danger';
 }
@@ -2846,4 +2769,4 @@ declare function SettingsHeader({ description, icon, onReset, resetTooltip, acti
 
 declare function cn(...inputs: ClassValue[]): string;
 
-export { ACCENT_DEFS, AI_TOOL_LOGOS, AI_TOOL_NAMES, type AccentColor, type AccentDef, ActionDialog, type ActionDialogProps, type ActionItem, AiActionButton, type AiActionButtonProps, type AiActionStatus, type AiCompletionResult, AiExecutionActionButtons, type AiExecutionActionButtonsProps, type AiToolConfig, AiToolIcon, type AiToolKey, AlertModal, type AlertModalProps, BASE_THEMES, Badge, type BadgeColor, type BadgeProps, BottomPanelHeader, type BottomPanelHeaderProps, Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment, type CapturedError, type CapturedIssuesApi, CapturedIssuesPanel, type CapturedIssuesPanelProps, type ChangedComponents, Checkbox, type CheckboxColor, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CodingToolId, type CodingToolPresetConfig, CollapseButton, type CollapseButtonProps, CollapsibleSection, type CollapsibleSectionProps, type ComponentVersion, ConfirmBadge, type ConfirmBadgeColor, type ConfirmBadgeProps, ConfirmModal, type ConfirmModalProps, type ConsentChoice, CookieConsent, type CookieConsentProps, type CreateSnapshotResult, DARK_THEMES, DEFAULT_DIMS, DEFAULT_OUTLINE, type DetailRow, DetailSection, type DetailSectionProps, DetailViewWrapper, type DetailViewWrapperProps, type DiffSummary, type DiffTreeNode, type DirectoryStatus, EditorPlaceholderCard, type EditorPlaceholderCardProps, EditorToolbar, type EditorToolbarProps, type ErrorLogger, type ExecutionDetailRow, ExecutionDetailsPanel, type ExecutionDetailsPanelProps, type ExecutionStatus, ExtensionListCard, type ExtensionListCardProps, type ExtensionSource, type FileDiffInfo, type FileDiffStatus, FileDiffViewer, type FileDiffViewerProps, type FileEntry, FileStructureSection, type FileStructureSectionProps, FileTree, type FileTreeNode, type FileTreeProps, type FileTypeOption, FileTypeTabbedPromptEditor, type FileTypeTabbedPromptEditorProps, FilesPanel, type FilesPanelProps, FilterDropdown, type FilterDropdownProps, FormActions, type FormActionsProps, type FormColor, FrontmatterFormHeader, type FrontmatterFormHeaderProps, type GoldenLiveDiff, type GoldenMeta, type GoldenSnapshotsApi, type GoldenStatus, GoldenSyncPanel, type GoldenSyncPanelProps, ISSUE_TYPES, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonStatus, type IconButtonVariant, type IconName, Input, type InputProps, type IssueReport, type IssueReportResult, type IssueType, LIGHT_THEMES, Label, type LabelColor, type LabelProps, type LayoutTab, LayoutTabBar, type LayoutTabBarProps, type ModalKind, type ModalSize, NavCard, type NavCardProps, NavigationBar, type NavigationBarProps, NumberInput, type NumberInputProps, type PanelTab, type PreviewMode, type PromptEditorApi, type PromptPlaceholder, type PromptSnapshot, RegistryBrowser, type RegistryBrowserProps, RegistryCard, type RegistryCardProps, RegistryDetail, type RegistryDetailProps, type RegistryItemType, ReportBugForm, type ReportBugFormProps, type ResetResult, ResizableTextarea, type ResizableTextareaProps, SCALE_KEYS, SNIPPET_NAME_REGEX, SURFACE_KEYS, type ScaleKey, type ScenarioOption, ScopeBadge, type ScopeType, type Screenshot, type ScreenshotAttachment, ScreenshotUploader, type ScreenshotUploaderProps, type SeedInfo, type SeedrItemStatus, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectOption, type SelectProps, type SelectionCardItem, SelectionGrid, type SelectionGridProps, SettingRow, type SettingRowProps, SettingsCard, type SettingsCardProps, SettingsHeader, type SettingsHeaderProps, SettingsInfoBox, type SettingsInfoBoxColor, type SettingsInfoBoxProps, SettingsPanel, type SettingsPanelProps, SettingsSectionTitle, type SettingsSectionTitleProps, SettingsTreeNav, type SettingsTreeNavProps, type SettingsTreeNode, SimulatorPromptEditor, type SimulatorPromptEditorProps, type SnapshotBrowserApi, SnapshotBrowserPanel, type SnapshotBrowserPanelProps, SnapshotCard, type SnapshotCardProps, type SnapshotCategory, type SnapshotEntry, type SnapshotInfo, type SnapshotItem, SnapshotManager, type SnapshotManagerProps, type SnapshotScope, SnapshotTree, type SnapshotTreeProps, type SnapshotsManifest, type Snippet, type SnippetData, SnippetsEditor, type SnippetsEditorApi, type SnippetsEditorProps, SnippetsPanel, type SnippetsPanelProps, SortDropdown, type SortDropdownProps, type SortField, type StatusBanner, StatusCard, type StatusCardProps, type StatusItem, StatusOverview, type StatusOverviewProps, type SubmittedError, type SurfaceKey, type SystemInfo, TOOLR_APPS, type Tab, TabBar, type TabBarProps, TabbedPromptEditor, type TabbedPromptEditorProps, type ThemeId, Toggle, type ToggleColor, type ToggleProps, type ToggleSize, type ToggleVariant, type ToolDetectionResult, type ToolTab, type ToolrAppId, ToolrAppLogo, type ToolsPathsApi, ToolsPathsPanel, type ToolsPathsPanelProps, Tooltip, type TooltipAlign, TooltipButton, type TooltipContent, type TooltipPosition, type TrackedError, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn, type UseGoldenSyncOptions, type UseGoldenSyncReturn, type UseNavigationHistoryReturn, type UsePromptEditorOptions, type UsePromptEditorReturn, type UseReportBugOptions, type UseReportBugReturn, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn, type UseSnippetsEditorOptions, type UseSnippetsEditorReturn, type UseToolsPathsOptions, type UseToolsPathsReturn, VersionManager, type VersionManagerProps, applyTheme, cn, collectDirPaths, collectExpandablePaths, createErrorLogger, filterTree, findNodeByPath, formatBytes, formatCategory, formatDate, generateScale, getAllLeafPaths, getBreadcrumbFromPath, getLanguage, getLanguageFromPath, getParentPaths, hslToHex, iconMap, isLeafNode, isLightTheme, satCurve, submitIssueReport, useCapturedIssues, useClickOutside, useDropdownMaxHeight, useGoldenSync, useNavigationHistory, usePromptEditor, useReportBug, useSnapshotBrowser, useSnippetsEditor, useToolsPaths };
+export { ACCENT_DEFS, ACCENT_ICON, ACCENT_NAV, ACCENT_TEXT, AI_TOOL_LOGOS, AI_TOOL_NAMES, type AccentColor, type AccentDef, ActionDialog, type ActionDialogProps, type ActionItem, AiActionButton, type AiActionButtonProps, type AiActionStatus, type AiCompletionResult, AiExecutionActionButtons, type AiExecutionActionButtonsProps, type AiToolConfig, AiToolIcon, type AiToolKey, AlertModal, type AlertModalProps, BASE_THEMES, Badge, type BadgeColor, type BadgeProps, BottomPanelHeader, type BottomPanelHeaderProps, Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment, type CapturedError, type CapturedIssuesApi, CapturedIssuesPanel, type CapturedIssuesPanelProps, type ChangedComponents, Checkbox, type CheckboxColor, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CodingToolId, type CodingToolPresetConfig, CollapseButton, type CollapseButtonProps, CollapsibleSection, type CollapsibleSectionProps, type ComponentVersion, ConfirmBadge, type ConfirmBadgeColor, type ConfirmBadgeProps, ConfirmModal, type ConfirmModalProps, type ConsentChoice, CookieConsent, type CookieConsentProps, type CreateSnapshotResult, DARK_THEMES, DEFAULT_DIMS, DEFAULT_OUTLINE, type DetailRow, DetailSection, type DetailSectionProps, DetailViewWrapper, type DetailViewWrapperProps, type DiffSummary, type DiffTreeNode, type DirectoryStatus, EditorPlaceholderCard, type EditorPlaceholderCardProps, EditorToolbar, type EditorToolbarProps, type ErrorLogger, ExecutionDetailsPanel, type ExecutionDetailsPanelProps, type ExecutionStatus, ExtensionListCard, type ExtensionListCardProps, type ExtensionSource, type FileDiffInfo, type FileDiffStatus, FileDiffViewer, type FileDiffViewerProps, type FileEntry, FileStructureSection, type FileStructureSectionProps, FileTree, type FileTreeNode, type FileTreeProps, type FileTypeOption, FileTypeTabbedPromptEditor, type FileTypeTabbedPromptEditorProps, FilesPanel, type FilesPanelProps, FilterDropdown, type FilterDropdownProps, FormActions, type FormActionsProps, type FormColor, FrontmatterFormHeader, type FrontmatterFormHeaderProps, type GoldenLiveDiff, type GoldenMeta, type GoldenSnapshotsApi, type GoldenStatus, GoldenSyncPanel, type GoldenSyncPanelProps, ISSUE_TYPES, IconButton, type IconButtonColor, type IconButtonProps, type IconButtonStatus, type IconButtonVariant, type IconName, Input, type InputProps, type IssueReport, type IssueReportResult, type IssueType, LIGHT_THEMES, Label, type LabelColor, type LabelProps, type LayoutTab, LayoutTabBar, type LayoutTabBarProps, type ModalKind, type ModalSize, NavCard, type NavCardProps, NavigationBar, type NavigationBarProps, NumberInput, type NumberInputProps, type PanelTab, type PreviewMode, type PromptEditorApi, type PromptPlaceholder, type PromptSnapshot, RegistryBrowser, type RegistryBrowserProps, RegistryCard, type RegistryCardProps, RegistryDetail, type RegistryDetailProps, type RegistryItemType, ReportBugForm, type ReportBugFormProps, type ResetResult, ResizableTextarea, type ResizableTextareaProps, SCALE_KEYS, SNIPPET_NAME_REGEX, SURFACE_KEYS, type ScaleKey, type ScenarioOption, ScopeBadge, type ScopeType, type Screenshot, type ScreenshotAttachment, ScreenshotUploader, type ScreenshotUploaderProps, type SeedInfo, type SeedrItemStatus, SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps, Select, type SelectOption, type SelectProps, type SelectionCardItem, SelectionGrid, type SelectionGridProps, SettingRow, type SettingRowProps, SettingsCard, type SettingsCardProps, SettingsHeader, type SettingsHeaderProps, SettingsInfoBox, type SettingsInfoBoxColor, type SettingsInfoBoxProps, SettingsPanel, type SettingsPanelProps, SettingsSectionTitle, type SettingsSectionTitleProps, SettingsTreeNav, type SettingsTreeNavProps, type SettingsTreeNode, SimulatorPromptEditor, type SimulatorPromptEditorProps, type SnapshotBrowserApi, SnapshotBrowserPanel, type SnapshotBrowserPanelProps, SnapshotCard, type SnapshotCardProps, type SnapshotCategory, type SnapshotEntry, type SnapshotInfo, type SnapshotItem, SnapshotManager, type SnapshotManagerProps, type SnapshotScope, SnapshotTree, type SnapshotTreeProps, type SnapshotsManifest, type Snippet, type SnippetData, SnippetsEditor, type SnippetsEditorApi, type SnippetsEditorProps, SnippetsPanel, type SnippetsPanelProps, SortDropdown, type SortDropdownProps, type SortField, type StatusBanner, StatusCard, type StatusCardProps, type StatusItem, StatusOverview, type StatusOverviewProps, type SubmittedError, type SurfaceKey, type SystemInfo, TOOLR_APPS, type Tab, TabBar, type TabBarProps, TabbedPromptEditor, type TabbedPromptEditorProps, type ThemeId, Toggle, type ToggleColor, type ToggleProps, type ToggleSize, type ToolDetectionResult, type ToolTab, type ToolrAppId, ToolrAppLogo, type ToolsPathsApi, ToolsPathsPanel, type ToolsPathsPanelProps, Tooltip, type TooltipAlign, TooltipButton, type TooltipContent, type TooltipPosition, type TrackedError, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn, type UseGoldenSyncOptions, type UseGoldenSyncReturn, type UseNavigationHistoryReturn, type UseReportBugOptions, type UseReportBugReturn, type UseResizableSidebarOptions, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn, type UseSnippetsEditorOptions, type UseSnippetsEditorReturn, type UseToolsPathsOptions, type UseToolsPathsReturn, VersionManager, type VersionManagerProps, applyTheme, cn, collectDirPaths, collectExpandablePaths, createErrorLogger, filterTree, findNodeByPath, formatBytes, formatDate, generateScale, getAllLeafPaths, getBreadcrumbFromPath, getLanguage, getLanguageFromPath, getParentPaths, hslToHex, iconMap, isLeafNode, isLightTheme, satCurve, smartCapitalize, submitIssueReport, useCapturedIssues, useClickOutside, useDropdownMaxHeight, useGoldenSync, useModalBehavior, useNavigationHistory, useReportBug, useResizableSidebar, useSnapshotBrowser, useSnippetsEditor, useToolsPaths };