@toolr/ui-design 0.1.6 → 0.1.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/components/hooks/use-click-outside.ts +10 -3
  2. package/components/hooks/use-modal-behavior.ts +53 -0
  3. package/components/hooks/use-navigation-history.ts +7 -2
  4. package/components/hooks/use-resizable-sidebar.ts +38 -0
  5. package/components/lib/form-colors.ts +40 -0
  6. package/components/sections/captured-issues/captured-issues-panel.tsx +3 -3
  7. package/components/sections/captured-issues/use-captured-issues.ts +9 -3
  8. package/components/sections/golden-snapshots/file-diff-viewer.tsx +1 -1
  9. package/components/sections/golden-snapshots/status-overview.tsx +1 -1
  10. package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx +4 -40
  11. package/components/sections/prompt-editor/index.ts +0 -7
  12. package/components/sections/prompt-editor/simulator-prompt-editor.tsx +4 -40
  13. package/components/sections/prompt-editor/tabbed-prompt-editor.tsx +4 -36
  14. package/components/sections/snippets-editor/snippets-editor.tsx +6 -39
  15. package/components/settings/SettingsHeader.tsx +0 -1
  16. package/components/settings/SettingsTreeNav.tsx +9 -12
  17. package/components/ui/action-dialog.tsx +19 -55
  18. package/components/ui/ai-action-button.tsx +2 -4
  19. package/components/ui/badge.tsx +15 -23
  20. package/components/ui/breadcrumb.tsx +11 -71
  21. package/components/ui/checkbox.tsx +19 -27
  22. package/components/ui/collapsible-section.tsx +4 -41
  23. package/components/ui/confirm-badge.tsx +14 -23
  24. package/components/ui/cookie-consent.tsx +18 -2
  25. package/components/ui/debounce-border-overlay.tsx +31 -0
  26. package/components/ui/detail-section.tsx +2 -19
  27. package/components/ui/editor-placeholder-card.tsx +10 -9
  28. package/components/ui/execution-details-panel.tsx +2 -7
  29. package/components/ui/extension-list-card.tsx +1 -1
  30. package/components/ui/file-structure-section.tsx +3 -18
  31. package/components/ui/file-tree.tsx +6 -18
  32. package/components/ui/files-panel.tsx +3 -11
  33. package/components/ui/filter-dropdown.tsx +5 -2
  34. package/components/ui/form-actions.tsx +11 -8
  35. package/components/ui/icon-button.tsx +7 -6
  36. package/components/ui/input.tsx +18 -29
  37. package/components/ui/label.tsx +7 -17
  38. package/components/ui/layout-tab-bar.tsx +5 -5
  39. package/components/ui/modal.tsx +10 -18
  40. package/components/ui/nav-card.tsx +3 -18
  41. package/components/ui/navigation-bar.tsx +12 -73
  42. package/components/ui/number-input.tsx +6 -0
  43. package/components/ui/registry-browser.tsx +6 -20
  44. package/components/ui/registry-card.tsx +3 -7
  45. package/components/ui/resizable-textarea.tsx +13 -35
  46. package/components/ui/segmented-toggle.tsx +4 -1
  47. package/components/ui/select.tsx +8 -14
  48. package/components/ui/selection-grid.tsx +6 -50
  49. package/components/ui/setting-row.tsx +5 -5
  50. package/components/ui/settings-card.tsx +2 -2
  51. package/components/ui/settings-info-box.tsx +6 -24
  52. package/components/ui/sort-dropdown.tsx +8 -5
  53. package/components/ui/status-card.tsx +2 -13
  54. package/components/ui/tab-bar.tsx +17 -33
  55. package/components/ui/toggle.tsx +22 -30
  56. package/components/ui/tooltip.tsx +11 -23
  57. package/dist/index.d.ts +71 -142
  58. package/dist/index.js +1630 -2436
  59. package/index.ts +8 -7
  60. package/package.json +9 -1
  61. package/components/sections/prompt-editor/use-prompt-editor.ts +0 -131
package/dist/index.d.ts CHANGED
@@ -6,6 +6,13 @@ import { LucideIcon } from 'lucide-react';
6
6
  import { ClassValue } from 'clsx';
7
7
 
8
8
  type FormColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
9
+ type AccentColor = FormColor;
10
+ declare const ACCENT_TEXT: Record<AccentColor, string>;
11
+ declare const ACCENT_ICON: Record<FormColor, string>;
12
+ declare const ACCENT_NAV: Record<AccentColor, {
13
+ bg: string;
14
+ text: string;
15
+ }>;
9
16
 
10
17
  declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
11
18
  type ScaleKey = (typeof SCALE_KEYS)[number];
@@ -231,7 +238,7 @@ interface ActionItem {
231
238
  testId?: string;
232
239
  }
233
240
  type IconButtonStatus = 'loading' | 'success' | 'warning' | 'error';
234
- type IconButtonColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
241
+ type IconButtonColor = AccentColor;
235
242
  type IconButtonVariant = 'filled' | 'outline';
236
243
  interface IconButtonProps {
237
244
  icon: IconName | ReactNode;
@@ -265,7 +272,7 @@ interface CollapseButtonProps {
265
272
  }
266
273
  declare function CollapseButton({ collapsed, onToggle, size, color, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
267
274
 
268
- type LabelColor = 'neutral' | 'green' | 'red' | 'blue' | 'yellow' | 'orange' | 'purple' | 'amber' | 'emerald' | 'cyan' | 'indigo' | 'teal' | 'violet' | 'pink' | 'sky';
275
+ type LabelColor = AccentColor;
269
276
  interface LabelProps {
270
277
  text: string;
271
278
  color: LabelColor;
@@ -287,23 +294,11 @@ interface LabelProps {
287
294
  className?: string;
288
295
  testId?: string;
289
296
  }
297
+ /** Smart capitalize: capitalizes first letter of each word separated by spaces or dashes */
298
+ declare function smartCapitalize(value: string): string;
290
299
  declare function Label({ text, color, icon, IconComponent: CustomIcon, tooltip, size, textTransform, progress, onClick, className, testId, }: LabelProps): react_jsx_runtime.JSX.Element;
291
300
 
292
- /**
293
- * Badge - Outline-styled pill badge for displaying counts or short labels
294
- *
295
- * Used by:
296
- * - TabBar, BottomPanelHeader - tab count badges
297
- * - NavCard - card count badges
298
- * - Any UI that needs a small inline indicator
299
- *
300
- * Features:
301
- * - Outline variant matching IconButton outline style (border + text, no fill)
302
- * - Accepts numbers (auto-caps at 99+) or short strings ("New")
303
- * - 15 color variants
304
- * - 5 size variants (xss, xs, sm, md, lg)
305
- */
306
- type BadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
301
+ type BadgeColor = AccentColor;
307
302
  interface BadgeProps {
308
303
  value: number | string;
309
304
  color?: BadgeColor;
@@ -311,39 +306,19 @@ interface BadgeProps {
311
306
  className?: string;
312
307
  testId?: string;
313
308
  }
314
- declare function Badge({ value, color, size, className, testId, }: BadgeProps): react_jsx_runtime.JSX.Element;
309
+ declare const Badge: react.NamedExoticComponent<BadgeProps>;
315
310
 
316
- /**
317
- * ConfirmBadge - Outline-styled check badge for indicating selection/confirmation
318
- *
319
- * Used by:
320
- * - SelectionGrid - selected state indicator on cards
321
- * - Any UI that needs a small check/confirmed indicator
322
- *
323
- * Features:
324
- * - Outline variant matching IconButton outline style (border + text, no fill)
325
- * - 15 color variants
326
- * - 5 size variants (xss, xs, sm, md, lg)
327
- */
328
- type ConfirmBadgeColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
311
+ type ConfirmBadgeColor = AccentColor;
329
312
  interface ConfirmBadgeProps {
330
313
  color?: ConfirmBadgeColor;
331
314
  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
332
315
  className?: string;
333
316
  testId?: string;
334
317
  }
335
- declare function ConfirmBadge({ color, size, className, testId, }: ConfirmBadgeProps): react_jsx_runtime.JSX.Element;
318
+ declare const ConfirmBadge: react.NamedExoticComponent<ConfirmBadgeProps>;
336
319
 
337
- /**
338
- * Checkbox - Controlled checkbox input with check icon
339
- *
340
- * Used by:
341
- * - Settings forms - boolean preference toggles
342
- * - Filter panels - multi-select filters
343
- * - List items - selection state
344
- */
345
320
  type CheckboxSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
346
- type CheckboxColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
321
+ type CheckboxColor = AccentColor;
347
322
  type CheckboxVariant = 'outline' | 'filled';
348
323
  interface CheckboxProps {
349
324
  checked: boolean;
@@ -353,22 +328,15 @@ interface CheckboxProps {
353
328
  color?: CheckboxColor;
354
329
  variant?: CheckboxVariant;
355
330
  className?: string;
331
+ /** Accessible label — required for screen readers */
332
+ 'aria-label'?: string;
356
333
  /** Test ID for E2E testing */
357
334
  testId?: string;
358
335
  }
359
- declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
336
+ declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, 'aria-label': ariaLabel, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
360
337
 
361
- /**
362
- * Toggle - iOS-style switch toggle
363
- *
364
- * Used by:
365
- * - Settings pages - boolean preferences
366
- * - Feature flags - enable/disable features
367
- * - List items - inline toggle controls
368
- */
369
- type ToggleColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
338
+ type ToggleColor = AccentColor;
370
339
  type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
371
- type ToggleVariant = 'outline' | 'filled';
372
340
  interface ToggleProps {
373
341
  checked: boolean;
374
342
  onChange: (checked: boolean) => void;
@@ -376,11 +344,12 @@ interface ToggleProps {
376
344
  size?: ToggleSize;
377
345
  className?: string;
378
346
  color?: ToggleColor;
379
- variant?: ToggleVariant;
347
+ /** Accessible label — required for screen readers */
348
+ 'aria-label'?: string;
380
349
  /** Test ID for E2E testing */
381
350
  testId?: string;
382
351
  }
383
- declare function Toggle({ checked, onChange, disabled, size, className, color, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
352
+ declare function Toggle({ checked, onChange, disabled, size, className, color, 'aria-label': ariaLabel, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
384
353
 
385
354
  interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
386
355
  value: string;
@@ -410,8 +379,10 @@ interface NumberInputProps {
410
379
  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
411
380
  disabled?: boolean;
412
381
  className?: string;
382
+ /** Accessible label — required for screen readers */
383
+ 'aria-label'?: string;
413
384
  }
414
- declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, }: NumberInputProps): react_jsx_runtime.JSX.Element;
385
+ declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, 'aria-label': ariaLabel, }: NumberInputProps): react_jsx_runtime.JSX.Element;
415
386
 
416
387
  type ScopeType = 'user' | 'project' | 'local' | 'read-only';
417
388
  interface ScopeBadgeProps {
@@ -430,7 +401,7 @@ interface SegmentedToggleProps<T extends string> {
430
401
  options: SegmentedToggleOption<T>[];
431
402
  value: T;
432
403
  onChange: (value: T) => void;
433
- accentColor?: 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
404
+ accentColor?: AccentColor;
434
405
  /** Visual style: 'filled' (default) has a container background, 'outline' is transparent */
435
406
  variant?: 'filled' | 'outline';
436
407
  size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -620,28 +591,21 @@ interface SelectionGridProps {
620
591
  }
621
592
  declare function SelectionGrid({ items: itemsProp, presets, selectedIds, onSelect, mode, layout, columns, className, }: SelectionGridProps): react_jsx_runtime.JSX.Element;
622
593
 
623
- /**
624
- * ExecutionDetailsPanel - Shows AI execution configuration before running actions
625
- *
626
- * Displays tool, permissions, output format, CLI flags, and change handling.
627
- * Optional "Allow direct edits" toggle with warning message.
628
- * Used inside ActionDialog as the mandatory execution details section.
629
- */
630
- interface ExecutionDetailRow {
594
+ interface DetailRow {
631
595
  label: string;
632
596
  value: string;
633
597
  mono?: boolean;
634
598
  }
635
- interface ExecutionDetailsPanelProps {
636
- details: ExecutionDetailRow[];
637
- /** Show the "Allow direct edits" toggle */
638
- allowDirectEdits?: boolean;
639
- onAllowDirectEditsChange?: (value: boolean) => void;
640
- /** Warning message shown below the toggle */
641
- warningMessage?: string;
599
+ interface DetailSectionProps {
600
+ /** Section title (e.g., "Execution Details") */
601
+ title: string;
602
+ /** Icon before the title */
603
+ icon?: IconName;
604
+ /** Detail rows to display */
605
+ rows: DetailRow[];
642
606
  className?: string;
643
607
  }
644
- declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
608
+ declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
645
609
 
646
610
  interface ActionDialogProps {
647
611
  /** Dialog title */
@@ -697,7 +661,7 @@ interface ActionDialogProps {
697
661
  /** Scenario grid column count */
698
662
  scenarioColumns?: number;
699
663
  /** Execution detail rows (Tool, Permissions, Output, CLI Flags, Changes) */
700
- executionDetails: ExecutionDetailRow[];
664
+ executionDetails: DetailRow[];
701
665
  /** Whether direct file edits are allowed */
702
666
  allowDirectEdits?: boolean;
703
667
  /** Callback to toggle direct edits - shows the toggle when provided */
@@ -711,6 +675,17 @@ interface ActionDialogProps {
711
675
  }
712
676
  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;
713
677
 
678
+ interface ExecutionDetailsPanelProps {
679
+ details: DetailRow[];
680
+ /** Show the "Allow direct edits" toggle */
681
+ allowDirectEdits?: boolean;
682
+ onAllowDirectEditsChange?: (value: boolean) => void;
683
+ /** Warning message shown below the toggle */
684
+ warningMessage?: string;
685
+ className?: string;
686
+ }
687
+ declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
688
+
714
689
  interface FileTreeNode {
715
690
  name: string;
716
691
  type: 'file' | 'directory';
@@ -874,7 +849,6 @@ declare function DetailViewWrapper({ editorContent, actions, bottomPanel, rightS
874
849
 
875
850
  type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings';
876
851
  type ExtensionSource = 'project' | 'plugin' | 'user' | 'local';
877
- declare function formatCategory(category: string): string;
878
852
  interface SeedrItemStatus {
879
853
  updateAvailable: boolean;
880
854
  modified: boolean;
@@ -972,7 +946,6 @@ type RegistryCardProps = SeedrVariant | ClaudePluginsVariant | AitmplVariant | S
972
946
  declare function RegistryCard(props: RegistryCardProps): react_jsx_runtime.JSX.Element;
973
947
 
974
948
  type PreviewMode = 'format' | 'language' | 'plain';
975
- type AccentColor = 'blue' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'amber' | 'violet' | 'neutral' | 'sky' | 'pink' | 'teal';
976
949
  interface FileStructureSectionProps {
977
950
  files: FileTreeNode[] | null;
978
951
  rootName: string;
@@ -2341,51 +2314,6 @@ interface ScenarioOption {
2341
2314
  }>;
2342
2315
  }
2343
2316
 
2344
- /**
2345
- * usePromptEditor — Hook managing prompt editor state
2346
- *
2347
- * Part of: Sections > Prompt Editor
2348
- *
2349
- * Handles:
2350
- * - Local content state (separate from saved content for dirty detection)
2351
- * - Dirty state detection
2352
- * - Save with Ctrl/Cmd+S keyboard shortcut
2353
- * - Variable search/filter
2354
- * - Active tab state
2355
- */
2356
-
2357
- interface UsePromptEditorOptions {
2358
- /** Prompt content keyed by tool id */
2359
- prompts: Record<string, string>;
2360
- /** Called when saving (all modified prompts at once) */
2361
- onPromptChange: (tool: string, value: string) => void;
2362
- /** Available tool tabs */
2363
- tools: ToolTab[];
2364
- /** Available template variables */
2365
- variables?: PromptPlaceholder[];
2366
- }
2367
- interface UsePromptEditorReturn {
2368
- /** Currently active tool tab id */
2369
- activeTab: string;
2370
- setActiveTab: (tab: string) => void;
2371
- /** Local editor content (may differ from saved prompts) */
2372
- localContent: Record<string, string>;
2373
- /** Current prompt for the active tab */
2374
- currentPrompt: string;
2375
- /** Whether any tab has unsaved changes */
2376
- isDirty: boolean;
2377
- /** Handle editor content change */
2378
- handleEditorChange: (value: string | undefined) => void;
2379
- /** Save all modified prompts */
2380
- handleSave: () => void;
2381
- /** Variable search state */
2382
- variableSearch: string;
2383
- setVariableSearch: (search: string) => void;
2384
- /** Filtered variables based on search */
2385
- filteredVariables: PromptPlaceholder[];
2386
- }
2387
- declare function usePromptEditor({ prompts, onPromptChange, tools, variables, }: UsePromptEditorOptions): UsePromptEditorReturn;
2388
-
2389
2317
  interface TabbedPromptEditorProps {
2390
2318
  /** Prompt content keyed by tool id */
2391
2319
  prompts: Record<string, string>;
@@ -2674,22 +2602,6 @@ interface SnapshotCardProps {
2674
2602
  }
2675
2603
  declare function SnapshotCard({ title, timestamp, status, description, stats, onSync, onView, className, }: SnapshotCardProps): react_jsx_runtime.JSX.Element;
2676
2604
 
2677
- interface DetailRow {
2678
- label: string;
2679
- value: string;
2680
- mono?: boolean;
2681
- }
2682
- interface DetailSectionProps {
2683
- /** Section title (e.g., "Execution Details") */
2684
- title: string;
2685
- /** Icon before the title */
2686
- icon?: IconName;
2687
- /** Detail rows to display */
2688
- rows: DetailRow[];
2689
- className?: string;
2690
- }
2691
- declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
2692
-
2693
2605
  type ConsentChoice = 'accepted' | 'declined' | 'essential';
2694
2606
  interface CookieConsentProps {
2695
2607
  /** localStorage key used to persist the choice */
@@ -2706,10 +2618,12 @@ interface CookieConsentProps {
2706
2618
  declare function CookieConsent({ storageKey, accentColor, heading, description, onConsent, }: CookieConsentProps): react_jsx_runtime.JSX.Element | null;
2707
2619
 
2708
2620
  /**
2709
- * Close a menu/dropdown when clicking outside its ref element.
2621
+ * Close a menu/dropdown when clicking outside its ref element(s).
2622
+ * Accepts a single ref, an array of refs, or null.
2623
+ * When given an array, closes only if the click is outside ALL refs.
2710
2624
  * If ref is null, closes on any mousedown event.
2711
2625
  */
2712
- declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOpen: boolean, onClose: () => void): void;
2626
+ declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[] | null, isOpen: boolean, onClose: () => void): void;
2713
2627
 
2714
2628
  /**
2715
2629
  * Constrains a dropdown menu's height to fit within the viewport.
@@ -2717,6 +2631,11 @@ declare function useClickOutside(ref: RefObject<HTMLElement | null> | null, isOp
2717
2631
  */
2718
2632
  declare function useDropdownMaxHeight<T extends HTMLElement>(isOpen: boolean, margin?: number): react.RefObject<T | null>;
2719
2633
 
2634
+ /**
2635
+ * Shared modal behavior: Escape key to close + body overflow lock + focus trap.
2636
+ */
2637
+ declare function useModalBehavior(isOpen: boolean, onClose: () => void, containerRef?: RefObject<HTMLElement | null>): void;
2638
+
2720
2639
  /** Hook for managing back/forward navigation history with a breadcrumb segment stack. */
2721
2640
 
2722
2641
  interface UseNavigationHistoryReturn {
@@ -2731,6 +2650,18 @@ interface UseNavigationHistoryReturn {
2731
2650
  }
2732
2651
  declare function useNavigationHistory(initial?: BreadcrumbSegment[], maxEntries?: number): UseNavigationHistoryReturn;
2733
2652
 
2653
+ interface UseResizableSidebarOptions {
2654
+ min: number;
2655
+ max: number;
2656
+ defaultWidth: number;
2657
+ /** 'left' = drag right shrinks (sidebar on right), 'right' = drag right grows (sidebar on left) */
2658
+ direction?: 'left' | 'right';
2659
+ }
2660
+ declare function useResizableSidebar({ min, max, defaultWidth, direction }: UseResizableSidebarOptions): {
2661
+ width: number;
2662
+ onPointerDown: (e: React.PointerEvent) => void;
2663
+ };
2664
+
2734
2665
  interface SettingRowBase {
2735
2666
  label: string;
2736
2667
  description?: string;
@@ -2743,7 +2674,6 @@ interface SettingRowToggle extends SettingRowBase {
2743
2674
  onChange: (checked: boolean) => void;
2744
2675
  color?: ToggleColor;
2745
2676
  size?: ToggleSize;
2746
- variant?: ToggleVariant;
2747
2677
  }
2748
2678
  interface SettingRowSelect extends SettingRowBase {
2749
2679
  type: 'select';
@@ -2773,7 +2703,7 @@ interface SettingsCardProps {
2773
2703
  }
2774
2704
  declare function SettingsCard({ children, className, title, description, testId }: SettingsCardProps): react_jsx_runtime.JSX.Element;
2775
2705
 
2776
- type SettingsInfoBoxColor = 'neutral' | 'blue' | 'amber' | 'green' | 'red' | 'orange' | 'cyan' | 'yellow' | 'purple' | 'indigo' | 'emerald' | 'violet' | 'sky' | 'pink' | 'teal';
2706
+ type SettingsInfoBoxColor = AccentColor;
2777
2707
  interface SettingsInfoBoxProps {
2778
2708
  children: React.ReactNode;
2779
2709
  color?: SettingsInfoBoxColor;
@@ -2838,7 +2768,6 @@ interface SettingsHeaderProps {
2838
2768
  title: string;
2839
2769
  description: string;
2840
2770
  };
2841
- confirmReset?: boolean;
2842
2771
  action?: ReactNode;
2843
2772
  variant?: 'default' | 'info' | 'warning' | 'danger';
2844
2773
  }
@@ -2846,4 +2775,4 @@ declare function SettingsHeader({ description, icon, onReset, resetTooltip, acti
2846
2775
 
2847
2776
  declare function cn(...inputs: ClassValue[]): string;
2848
2777
 
2849
- 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 };
2778
+ 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 };