@toolr/ui-design 0.1.8 → 0.1.9

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 (100) hide show
  1. package/ai-manifest.json +35 -20
  2. package/components/composites/dashboard-list-item.tsx +172 -0
  3. package/components/composites/dashboard-panel.tsx +218 -0
  4. package/components/content/info-panel-primitives.tsx +9 -8
  5. package/components/diagrams/diagram-utils.tsx +2 -1
  6. package/components/hooks/use-dropdown-portal.ts +39 -0
  7. package/components/lib/accent-context.ts +10 -0
  8. package/components/lib/{ai-tools.tsx → coding-agents.tsx} +23 -8
  9. package/components/lib/custom-icons.tsx +37 -0
  10. package/components/lib/git-providers.tsx +39 -0
  11. package/components/lib/theme-engine.ts +59 -10
  12. package/components/lib/toolr-brand.tsx +23 -9
  13. package/components/sections/captured-issues/captured-issues-panel.tsx +17 -8
  14. package/components/sections/{ai-tools-paths/tools-paths-panel.tsx → coding-agent-paths/agent-paths-panel.tsx} +70 -62
  15. package/components/sections/coding-agent-paths/index.ts +37 -0
  16. package/components/sections/{ai-tools-paths → coding-agent-paths}/types.ts +28 -28
  17. package/components/sections/coding-agent-paths/use-agent-paths.ts +159 -0
  18. package/components/sections/golden-snapshots/file-diff-viewer.tsx +10 -9
  19. package/components/sections/golden-snapshots/golden-sync-panel.tsx +12 -3
  20. package/components/sections/golden-snapshots/snapshot-manager.tsx +9 -7
  21. package/components/sections/golden-snapshots/status-overview.tsx +8 -8
  22. package/components/sections/golden-snapshots/version-manager.tsx +6 -6
  23. package/components/sections/prompt-editor/file-type-tabbed-prompt-editor.tsx +3 -3
  24. package/components/sections/prompt-editor/index.ts +1 -1
  25. package/components/sections/prompt-editor/simulator-prompt-editor.tsx +13 -5
  26. package/components/sections/prompt-editor/tabbed-prompt-editor.tsx +18 -10
  27. package/components/sections/prompt-editor/types.ts +2 -2
  28. package/components/sections/report-bug/report-bug-form.tsx +12 -4
  29. package/components/sections/report-bug/screenshot-uploader.tsx +11 -3
  30. package/components/sections/snapshot-browser/snapshot-browser-panel.tsx +12 -4
  31. package/components/sections/snapshot-browser/snapshot-tree.tsx +5 -4
  32. package/components/sections/snapshot-browser/types.ts +1 -1
  33. package/components/sections/snippets-editor/snippets-editor.tsx +16 -9
  34. package/components/settings/SettingsHeader.tsx +2 -2
  35. package/components/settings/SettingsPanel.tsx +11 -3
  36. package/components/settings/SettingsTreeNav.tsx +15 -9
  37. package/components/ui/action-dialog.tsx +24 -30
  38. package/components/ui/ai-action-button.tsx +10 -7
  39. package/components/ui/ai-execution-action-buttons.tsx +13 -5
  40. package/components/ui/badge.tsx +7 -4
  41. package/components/ui/bottom-panel-header.tsx +9 -5
  42. package/components/ui/breadcrumb.tsx +9 -1
  43. package/components/ui/{extension-list-card.tsx → capability-list-card.tsx} +13 -5
  44. package/components/ui/checkbox.tsx +6 -3
  45. package/components/ui/collapsible-section.tsx +38 -29
  46. package/components/ui/confirm-badge.tsx +7 -4
  47. package/components/ui/cookie-consent.tsx +13 -7
  48. package/components/ui/detail-section.tsx +24 -16
  49. package/components/ui/detail-view-wrapper.tsx +30 -22
  50. package/components/ui/editor-placeholder-card.tsx +28 -24
  51. package/components/ui/editor-toolbar.tsx +7 -4
  52. package/components/ui/execution-details-panel.tsx +10 -5
  53. package/components/ui/file-structure-section.tsx +3 -3
  54. package/components/ui/file-tree.tsx +3 -1
  55. package/components/ui/files-panel.tsx +147 -27
  56. package/components/ui/filter-dropdown.tsx +84 -74
  57. package/components/ui/form-actions.tsx +14 -6
  58. package/components/ui/frontmatter-form-header.tsx +10 -2
  59. package/components/ui/icon-button.tsx +22 -9
  60. package/components/ui/input.tsx +7 -4
  61. package/components/ui/label.tsx +5 -5
  62. package/components/ui/layout-tab-bar.tsx +7 -5
  63. package/components/ui/modal.tsx +18 -4
  64. package/components/ui/nav-card.tsx +6 -3
  65. package/components/ui/navigation-bar.tsx +37 -9
  66. package/components/ui/number-input.tsx +8 -4
  67. package/components/ui/project-explorer.tsx +666 -0
  68. package/components/ui/registry-browser.tsx +12 -1
  69. package/components/ui/registry-card.tsx +49 -42
  70. package/components/ui/registry-detail.tsx +34 -11
  71. package/components/ui/resizable-textarea.tsx +18 -11
  72. package/components/ui/scope-badge.tsx +18 -11
  73. package/components/ui/segmented-toggle.tsx +5 -2
  74. package/components/ui/select.tsx +12 -9
  75. package/components/ui/selection-grid.tsx +36 -37
  76. package/components/ui/setting-row.tsx +2 -2
  77. package/components/ui/settings-card.tsx +10 -3
  78. package/components/ui/settings-info-box.tsx +9 -5
  79. package/components/ui/settings-section-title.tsx +14 -2
  80. package/components/ui/snapshot-card.tsx +10 -2
  81. package/components/ui/snippets-panel.tsx +4 -2
  82. package/components/ui/sort-dropdown.tsx +39 -29
  83. package/components/ui/status-card.tsx +9 -1
  84. package/components/ui/tab-bar.tsx +12 -9
  85. package/components/ui/toggle.tsx +13 -7
  86. package/components/ui/tooltip.tsx +9 -1
  87. package/dist/content.js +8 -8
  88. package/dist/diagrams.d.ts +0 -1
  89. package/dist/index.d.ts +421 -182
  90. package/dist/index.js +2984 -1691
  91. package/dist/tokens/primitives.css +28 -6
  92. package/dist/tokens/semantic.css +15 -15
  93. package/dist/tokens/theme.css +23 -0
  94. package/index.ts +25 -11
  95. package/package.json +1 -1
  96. package/tokens/primitives.css +28 -6
  97. package/tokens/semantic.css +15 -15
  98. package/tokens/theme.css +23 -0
  99. package/components/sections/ai-tools-paths/index.ts +0 -37
  100. package/components/sections/ai-tools-paths/use-tools-paths.ts +0 -159
@@ -7,19 +7,41 @@
7
7
 
8
8
  @theme {
9
9
  /* Neutral scale */
10
- --color-neutral-950: #0d0d0d;
11
- --color-neutral-900: #1a1a1a;
12
- --color-neutral-850: #1f1f1f;
13
- --color-neutral-800: #262626;
14
- --color-neutral-750: #2e2e2e;
10
+ --color-neutral-990: #050505;
11
+ --color-neutral-980: #0a0a0a;
12
+ --color-neutral-970: #0f0f0f;
13
+ --color-neutral-960: #141414;
14
+ --color-neutral-950: #1a1a1a;
15
+ --color-neutral-940: #1b1b1b;
16
+ --color-neutral-930: #1c1c1c;
17
+ --color-neutral-920: #1d1d1d;
18
+ --color-neutral-910: #1f1f1f;
19
+ --color-neutral-900: #212121;
20
+ --color-neutral-850: #262626;
21
+ --color-neutral-800: #2e2e2e;
22
+ --color-neutral-750: #333333;
15
23
  --color-neutral-700: #383838;
24
+ --color-neutral-650: #424242;
16
25
  --color-neutral-600: #4d4d4d;
26
+ --color-neutral-550: #616161;
17
27
  --color-neutral-500: #666666;
28
+ --color-neutral-450: #8c8c8c;
18
29
  --color-neutral-400: #999999;
30
+ --color-neutral-350: #bdbdbd;
19
31
  --color-neutral-300: #cccccc;
32
+ --color-neutral-250: #dedede;
20
33
  --color-neutral-200: #e0e0e0;
34
+ --color-neutral-150: #ededed;
21
35
  --color-neutral-100: #f0f0f0;
22
- --color-neutral-50: #fafafa;
36
+ --color-neutral-090: #f2f2f2;
37
+ --color-neutral-080: #f5f5f5;
38
+ --color-neutral-070: #f7f7f7;
39
+ --color-neutral-060: #f9f9f9;
40
+ --color-neutral-050: #fafafa;
41
+ --color-neutral-040: #fbfbfb;
42
+ --color-neutral-030: #fcfcfc;
43
+ --color-neutral-020: #fdfdfd;
44
+ --color-neutral-010: #fefefe;
23
45
 
24
46
  /* Type scale */
25
47
  --text-xss: 10px;
@@ -11,43 +11,43 @@
11
11
  :root {
12
12
  /* Page-level backgrounds */
13
13
  --background: var(--color-black);
14
- --foreground: var(--color-neutral-300);
14
+ --foreground: rgba(255, 255, 255, 0.83);
15
15
 
16
16
  /* Surface: cards, panels, popups */
17
- --surface: var(--color-neutral-800);
18
- --surface-foreground: var(--color-neutral-300);
19
- --surface-secondary: var(--color-neutral-900);
17
+ --surface: var(--color-neutral-960);
18
+ --surface-foreground: rgba(255, 255, 255, 0.83);
19
+ --surface-secondary: var(--color-neutral-980);
20
20
  --surface-overlay: var(--color-neutral-700);
21
- --surface-hover: var(--color-neutral-750);
21
+ --surface-hover: var(--color-neutral-950);
22
22
 
23
23
  /* Dialog backdrop: modal/dialog overlays */
24
24
  --dialog-backdrop: rgba(0, 0, 0, 0.95);
25
25
 
26
26
  /* Popover: floating panels, dropdown menus */
27
27
  --popover: rgba(0, 0, 0, 0.8);
28
- --popover-foreground: var(--color-neutral-300);
28
+ --popover-foreground: rgba(255, 255, 255, 0.83);
29
29
 
30
30
  /* Muted: subdued elements, disabled states */
31
- --muted: var(--color-neutral-800);
32
- --muted-foreground: var(--color-neutral-500);
31
+ --muted: var(--color-neutral-960);
32
+ --muted-foreground: rgba(255, 255, 255, 0.46);
33
33
 
34
34
  /* Text hierarchy */
35
- --text-primary: var(--color-neutral-300);
36
- --text-secondary: var(--color-neutral-500);
37
- --text-tertiary: var(--color-neutral-400);
38
- --text-emphasis: var(--color-white);
35
+ --text-primary: rgba(255, 255, 255, 0.83);
36
+ --text-secondary: rgba(255, 255, 255, 0.46);
37
+ --text-tertiary: rgba(255, 255, 255, 0.64);
38
+ --text-emphasis: #ffffff;
39
39
 
40
40
  /* Borders */
41
41
  --border: var(--color-neutral-700);
42
- --border-subtle: var(--color-neutral-800);
42
+ --border-subtle: var(--color-neutral-960);
43
43
 
44
44
  /* Interactive: primary action color */
45
45
  --primary: var(--color-blue-500);
46
- --primary-foreground: var(--color-white);
46
+ --primary-foreground: #ffffff;
47
47
 
48
48
  /* Destructive actions */
49
49
  --destructive: var(--color-red-500);
50
- --destructive-foreground: var(--color-white);
50
+ --destructive-foreground: #ffffff;
51
51
 
52
52
  /* Focus ring */
53
53
  --ring: var(--color-blue-400);
@@ -9,3 +9,26 @@
9
9
  from { stroke-dashoffset: 0; }
10
10
  to { stroke-dashoffset: -100; }
11
11
  }
12
+
13
+ /* Background patterns — subtle texture for content areas */
14
+ .bg-pattern-dots {
15
+ background-image: radial-gradient(circle, var(--color-neutral-700) 1px, transparent 1px);
16
+ background-size: 24px 24px;
17
+ }
18
+
19
+ .bg-pattern-grid {
20
+ background-image:
21
+ linear-gradient(var(--color-neutral-960) 1px, transparent 1px),
22
+ linear-gradient(90deg, var(--color-neutral-960) 1px, transparent 1px);
23
+ background-size: 32px 32px;
24
+ }
25
+
26
+ .bg-pattern-diagonal {
27
+ background-image: repeating-linear-gradient(
28
+ -45deg,
29
+ transparent,
30
+ transparent 14px,
31
+ var(--color-neutral-960) 14px,
32
+ var(--color-neutral-960) 15px
33
+ );
34
+ }
package/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  // Shared types
2
- export { type FormColor, type AccentColor, ACCENT_TEXT, ACCENT_ICON, ACCENT_NAV } from './components/lib/form-colors.ts'
2
+ export { type FormColor, type AccentColor, ACCENT_TEXT, ACCENT_ICON, ACCENT_NAV, FORM_COLORS } from './components/lib/form-colors.ts'
3
+ export { AccentColorProvider, useAccentColor } from './components/lib/accent-context.ts'
3
4
  export {
4
5
  SCALE_KEYS, type ScaleKey, type ThemeId,
5
6
  SURFACE_KEYS, type SurfaceKey,
@@ -9,8 +10,10 @@ export {
9
10
  satCurve, hslToHex, generateScale,
10
11
  isLightTheme, applyTheme,
11
12
  } from './components/lib/theme-engine.ts'
12
- export { ToolrAppLogo, TOOLR_APPS, type ToolrAppId } from './components/lib/toolr-brand.tsx'
13
- export { AI_TOOL_LOGOS, AiToolIcon, AI_TOOL_NAMES, type AiToolKey } from './components/lib/ai-tools.tsx'
13
+ export { ToolrAppLogo, TOOLR_APPS, resolveAccentHex, type ToolrAppId } from './components/lib/toolr-brand.tsx'
14
+ export { CODING_AGENT_LOGOS, CodingAgentIcon, CODING_AGENT_NAMES, type CodingAgentKey } from './components/lib/coding-agents.tsx'
15
+ export { GitProviderIcon, GIT_PROVIDER_NAMES, type GitProviderKey } from './components/lib/git-providers.tsx'
16
+ export { CustomIcon, CUSTOM_ICON_NAMES, type CustomIconKey } from './components/lib/custom-icons.tsx'
14
17
 
15
18
  // UI Components
16
19
  export { IconButton, CollapseButton, iconMap, type IconButtonProps, type CollapseButtonProps, type IconButtonColor, type IconButtonVariant, type IconButtonStatus, type IconName, type ActionItem } from './components/ui/icon-button.tsx'
@@ -38,7 +41,7 @@ export { BottomPanelHeader, type BottomPanelHeaderProps, type PanelTab, type Sta
38
41
  export { FrontmatterFormHeader, type FrontmatterFormHeaderProps } from './components/ui/frontmatter-form-header.tsx'
39
42
  export { EditorPlaceholderCard, type EditorPlaceholderCardProps } from './components/ui/editor-placeholder-card.tsx'
40
43
  export { DetailViewWrapper, type DetailViewWrapperProps } from './components/ui/detail-view-wrapper.tsx'
41
- export { RegistryCard, type RegistryCardProps, type RegistryItemType, type ExtensionSource, type SeedrItemStatus } from './components/ui/registry-card.tsx'
44
+ export { RegistryCard, type RegistryCardProps, type RegistryItemType, type CapabilitySource, type SeedrItemStatus } from './components/ui/registry-card.tsx'
42
45
  export { RegistryDetail, type RegistryDetailProps } from './components/ui/registry-detail.tsx'
43
46
  export { FileStructureSection, getLanguageFromPath, type FileStructureSectionProps, type PreviewMode } from './components/ui/file-structure-section.tsx'
44
47
  export { RegistryBrowser, type RegistryBrowserProps } from './components/ui/registry-browser.tsx'
@@ -67,12 +70,12 @@ export {
67
70
  type SnapshotInfo, type SnapshotsManifest, type CreateSnapshotResult, type ResetResult,
68
71
  type GoldenSnapshotsApi,
69
72
  } from './components/sections/golden-snapshots/index.ts'
70
- // Sections > AI Tools Paths
73
+ // Sections > Coding Agent Paths
71
74
  export {
72
- ToolsPathsPanel, type ToolsPathsPanelProps,
73
- useToolsPaths, type UseToolsPathsOptions, type UseToolsPathsReturn,
74
- type AiToolConfig, type ToolDetectionResult, type ToolsPathsApi,
75
- } from './components/sections/ai-tools-paths/index.ts'
75
+ AgentPathsPanel, type AgentPathsPanelProps,
76
+ useAgentPaths, type UseAgentPathsOptions, type UseAgentPathsReturn,
77
+ type CodingAgentConfig, type AgentDetectionResult, type AgentPathsApi,
78
+ } from './components/sections/coding-agent-paths/index.ts'
76
79
  // Sections > Captured Issues
77
80
  export {
78
81
  CapturedIssuesPanel, type CapturedIssuesPanelProps,
@@ -101,23 +104,30 @@ export {
101
104
  type FileTypeOption, type ScenarioOption,
102
105
  } from './components/sections/prompt-editor/index.ts'
103
106
  export { CollapsibleSection, type CollapsibleSectionProps } from './components/ui/collapsible-section.tsx'
104
- export { FilesPanel, type FilesPanelProps, type FileEntry } from './components/ui/files-panel.tsx'
107
+ export { FilesPanel, collectAllFolderPaths, countFiles, countFolders, type FilesPanelProps, type FileEntry } from './components/ui/files-panel.tsx'
105
108
  export { SnippetsPanel, type SnippetsPanelProps, type Snippet } from './components/ui/snippets-panel.tsx'
106
109
  export { Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment } from './components/ui/breadcrumb.tsx'
107
110
  export { NavigationBar, type NavigationBarProps } from './components/ui/navigation-bar.tsx'
108
111
  export { TabBar, type TabBarProps, type Tab } from './components/ui/tab-bar.tsx'
109
112
  export { LayoutTabBar, type LayoutTabBarProps, type LayoutTab } from './components/ui/layout-tab-bar.tsx'
110
113
  export { NavCard, type NavCardProps } from './components/ui/nav-card.tsx'
111
- export { ExtensionListCard, type ExtensionListCardProps } from './components/ui/extension-list-card.tsx'
114
+ export { CapabilityListCard, type CapabilityListCardProps } from './components/ui/capability-list-card.tsx'
112
115
  export { StatusCard, type StatusCardProps, type StatusItem } from './components/ui/status-card.tsx'
113
116
  export { SnapshotCard, type SnapshotCardProps } from './components/ui/snapshot-card.tsx'
114
117
  export { DetailSection, type DetailSectionProps, type DetailRow } from './components/ui/detail-section.tsx'
115
118
  export { SelectionGrid, type SelectionGridProps, type SelectionCardItem, type CodingToolId, type CodingToolPresetConfig } from './components/ui/selection-grid.tsx'
116
119
  export { CookieConsent, type CookieConsentProps, type ConsentChoice } from './components/ui/cookie-consent.tsx'
120
+ export {
121
+ ProjectExplorer, buildExplorerTree, filterExplorerTree,
122
+ collectExplorerExpandablePaths,
123
+ findPathToNode,
124
+ type ProjectExplorerProps, type ExplorerNode, type ExplorerTopItem, type ExplorerContextMenuInfo,
125
+ } from './components/ui/project-explorer.tsx'
117
126
 
118
127
  // Hooks
119
128
  export { useClickOutside } from './components/hooks/use-click-outside.ts'
120
129
  export { useDropdownMaxHeight } from './components/hooks/use-dropdown-max-height.ts'
130
+ export { useDropdownPortal } from './components/hooks/use-dropdown-portal.ts'
121
131
  export { useModalBehavior } from './components/hooks/use-modal-behavior.ts'
122
132
  export { useNavigationHistory, type UseNavigationHistoryReturn } from './components/hooks/use-navigation-history.ts'
123
133
  export { useResizableSidebar, type UseResizableSidebarOptions } from './components/hooks/use-resizable-sidebar.ts'
@@ -136,5 +146,9 @@ export {
136
146
  getAllLeafPaths, collectExpandablePaths, getParentPaths, filterTree,
137
147
  } from './components/settings/index.ts'
138
148
 
149
+ // Composites
150
+ export { DashboardListItem, type DashboardListItemProps, type DashboardItemStatus } from './components/composites/dashboard-list-item.tsx'
151
+ export { DashboardPanel, DashboardFilterBar, DashboardList, type DashboardPanelProps, type DashboardTab, type DashboardFilterBarProps, type DashboardListProps } from './components/composites/dashboard-panel.tsx'
152
+
139
153
  // Utilities
140
154
  export { cn } from './components/lib/cn.ts'
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@toolr/ui-design",
3
- "version": "0.1.8",
3
+ "version": "0.1.9",
4
4
  "private": false,
5
5
  "type": "module",
6
6
  "main": "./dist/index.js",
@@ -7,19 +7,41 @@
7
7
 
8
8
  @theme {
9
9
  /* Neutral scale */
10
- --color-neutral-950: #0d0d0d;
11
- --color-neutral-900: #1a1a1a;
12
- --color-neutral-850: #1f1f1f;
13
- --color-neutral-800: #262626;
14
- --color-neutral-750: #2e2e2e;
10
+ --color-neutral-990: #050505;
11
+ --color-neutral-980: #0a0a0a;
12
+ --color-neutral-970: #0f0f0f;
13
+ --color-neutral-960: #141414;
14
+ --color-neutral-950: #1a1a1a;
15
+ --color-neutral-940: #1b1b1b;
16
+ --color-neutral-930: #1c1c1c;
17
+ --color-neutral-920: #1d1d1d;
18
+ --color-neutral-910: #1f1f1f;
19
+ --color-neutral-900: #212121;
20
+ --color-neutral-850: #262626;
21
+ --color-neutral-800: #2e2e2e;
22
+ --color-neutral-750: #333333;
15
23
  --color-neutral-700: #383838;
24
+ --color-neutral-650: #424242;
16
25
  --color-neutral-600: #4d4d4d;
26
+ --color-neutral-550: #616161;
17
27
  --color-neutral-500: #666666;
28
+ --color-neutral-450: #8c8c8c;
18
29
  --color-neutral-400: #999999;
30
+ --color-neutral-350: #bdbdbd;
19
31
  --color-neutral-300: #cccccc;
32
+ --color-neutral-250: #dedede;
20
33
  --color-neutral-200: #e0e0e0;
34
+ --color-neutral-150: #ededed;
21
35
  --color-neutral-100: #f0f0f0;
22
- --color-neutral-50: #fafafa;
36
+ --color-neutral-090: #f2f2f2;
37
+ --color-neutral-080: #f5f5f5;
38
+ --color-neutral-070: #f7f7f7;
39
+ --color-neutral-060: #f9f9f9;
40
+ --color-neutral-050: #fafafa;
41
+ --color-neutral-040: #fbfbfb;
42
+ --color-neutral-030: #fcfcfc;
43
+ --color-neutral-020: #fdfdfd;
44
+ --color-neutral-010: #fefefe;
23
45
 
24
46
  /* Type scale */
25
47
  --text-xss: 10px;
@@ -11,43 +11,43 @@
11
11
  :root {
12
12
  /* Page-level backgrounds */
13
13
  --background: var(--color-black);
14
- --foreground: var(--color-neutral-300);
14
+ --foreground: rgba(255, 255, 255, 0.83);
15
15
 
16
16
  /* Surface: cards, panels, popups */
17
- --surface: var(--color-neutral-800);
18
- --surface-foreground: var(--color-neutral-300);
19
- --surface-secondary: var(--color-neutral-900);
17
+ --surface: var(--color-neutral-960);
18
+ --surface-foreground: rgba(255, 255, 255, 0.83);
19
+ --surface-secondary: var(--color-neutral-980);
20
20
  --surface-overlay: var(--color-neutral-700);
21
- --surface-hover: var(--color-neutral-750);
21
+ --surface-hover: var(--color-neutral-950);
22
22
 
23
23
  /* Dialog backdrop: modal/dialog overlays */
24
24
  --dialog-backdrop: rgba(0, 0, 0, 0.95);
25
25
 
26
26
  /* Popover: floating panels, dropdown menus */
27
27
  --popover: rgba(0, 0, 0, 0.8);
28
- --popover-foreground: var(--color-neutral-300);
28
+ --popover-foreground: rgba(255, 255, 255, 0.83);
29
29
 
30
30
  /* Muted: subdued elements, disabled states */
31
- --muted: var(--color-neutral-800);
32
- --muted-foreground: var(--color-neutral-500);
31
+ --muted: var(--color-neutral-960);
32
+ --muted-foreground: rgba(255, 255, 255, 0.46);
33
33
 
34
34
  /* Text hierarchy */
35
- --text-primary: var(--color-neutral-300);
36
- --text-secondary: var(--color-neutral-500);
37
- --text-tertiary: var(--color-neutral-400);
38
- --text-emphasis: var(--color-white);
35
+ --text-primary: rgba(255, 255, 255, 0.83);
36
+ --text-secondary: rgba(255, 255, 255, 0.46);
37
+ --text-tertiary: rgba(255, 255, 255, 0.64);
38
+ --text-emphasis: #ffffff;
39
39
 
40
40
  /* Borders */
41
41
  --border: var(--color-neutral-700);
42
- --border-subtle: var(--color-neutral-800);
42
+ --border-subtle: var(--color-neutral-960);
43
43
 
44
44
  /* Interactive: primary action color */
45
45
  --primary: var(--color-blue-500);
46
- --primary-foreground: var(--color-white);
46
+ --primary-foreground: #ffffff;
47
47
 
48
48
  /* Destructive actions */
49
49
  --destructive: var(--color-red-500);
50
- --destructive-foreground: var(--color-white);
50
+ --destructive-foreground: #ffffff;
51
51
 
52
52
  /* Focus ring */
53
53
  --ring: var(--color-blue-400);
package/tokens/theme.css CHANGED
@@ -9,3 +9,26 @@
9
9
  from { stroke-dashoffset: 0; }
10
10
  to { stroke-dashoffset: -100; }
11
11
  }
12
+
13
+ /* Background patterns — subtle texture for content areas */
14
+ .bg-pattern-dots {
15
+ background-image: radial-gradient(circle, var(--color-neutral-700) 1px, transparent 1px);
16
+ background-size: 24px 24px;
17
+ }
18
+
19
+ .bg-pattern-grid {
20
+ background-image:
21
+ linear-gradient(var(--color-neutral-960) 1px, transparent 1px),
22
+ linear-gradient(90deg, var(--color-neutral-960) 1px, transparent 1px);
23
+ background-size: 32px 32px;
24
+ }
25
+
26
+ .bg-pattern-diagonal {
27
+ background-image: repeating-linear-gradient(
28
+ -45deg,
29
+ transparent,
30
+ transparent 14px,
31
+ var(--color-neutral-960) 14px,
32
+ var(--color-neutral-960) 15px
33
+ );
34
+ }
@@ -1,37 +0,0 @@
1
- /**
2
- * AI Tools Paths — Section barrel export
3
- *
4
- * This section provides a complete, reusable AI tool binary path configuration
5
- * panel. It handles tool detection, path validation, enable/disable toggles,
6
- * and per-tool refresh — all via an API adapter interface.
7
- *
8
- * File structure:
9
- * - tools-paths-panel.tsx — Main panel component (drop-in usage)
10
- * - use-tools-paths.ts — Detection state & actions hook (used by panel, also standalone)
11
- * - types.ts — Shared types and API adapter interface
12
- *
13
- * Quick start for consuming apps:
14
- * import { ToolsPathsPanel, type ToolsPathsApi, type AiToolConfig } from '@toolr/ui-design'
15
- *
16
- * const api: ToolsPathsApi = {
17
- * detectAll: () => invoke('detect_all_tools'),
18
- * detectTool: (id) => invoke('detect_tool', { toolId: id }),
19
- * validatePath: (path) => invoke('validate_binary_path', { path }),
20
- * }
21
- *
22
- * <ToolsPathsPanel
23
- * api={api}
24
- * tools={toolConfigs}
25
- * onToolConfigChange={(id, partial) => updateTool(id, partial)}
26
- * renderToolIcon={(id) => <AiToolIcon tool={id} size={20} />}
27
- * />
28
- */
29
-
30
- // Main panel component
31
- export { ToolsPathsPanel, type ToolsPathsPanelProps } from './tools-paths-panel.tsx'
32
-
33
- // Hook for custom UIs
34
- export { useToolsPaths, type UseToolsPathsOptions, type UseToolsPathsReturn } from './use-tools-paths.ts'
35
-
36
- // Types and API interface
37
- export type { AiToolConfig, ToolDetectionResult, ToolsPathsApi } from './types.ts'
@@ -1,159 +0,0 @@
1
- /**
2
- * useToolsPaths — Tool detection and configuration state hook
3
- *
4
- * Part of: Sections > AI Tools Paths
5
- *
6
- * Manages tool detection state, per-tool refresh tracking, and path validation.
7
- * Used internally by ToolsPathsPanel but can also be used standalone for
8
- * custom UIs.
9
- *
10
- * AI agent notes:
11
- * - This hook does NOT store tool configs — the consumer owns that state.
12
- * It only manages detection/scanning ephemeral state.
13
- * - The hook tracks which tools have been scanned, which are currently
14
- * refreshing, and whether a full scan has completed.
15
- * - Path validation is debounced by the consumer (typically on blur or
16
- * after typing stops).
17
- */
18
-
19
- import { useState, useCallback, useRef, useEffect } from 'react'
20
- import type { AiToolConfig, ToolsPathsApi, ToolDetectionResult } from './types.ts'
21
-
22
- export interface UseToolsPathsOptions {
23
- api: ToolsPathsApi
24
- tools: AiToolConfig[]
25
- onToolConfigChange: (toolId: string, config: Partial<AiToolConfig>) => void
26
- }
27
-
28
- export interface UseToolsPathsReturn {
29
- /** Whether a full scan is in progress */
30
- isDetecting: boolean
31
- /** Whether a full scan has completed at least once */
32
- hasScanned: boolean
33
- /** Set of tool IDs currently being individually refreshed */
34
- refreshingTools: Set<string>
35
- /** Set of tool IDs that were found during the last scan */
36
- scannedTools: Set<string>
37
- /** Run detection for all tools */
38
- detectAll: () => Promise<void>
39
- /** Run detection for a single tool */
40
- detectTool: (toolId: string) => Promise<void>
41
- /** Validate and update a tool's binary path */
42
- validateAndUpdatePath: (toolId: string, path: string) => Promise<void>
43
- /** Toggle a tool's enabled state */
44
- toggleEnabled: (toolId: string) => void
45
- }
46
-
47
- export function useToolsPaths({ api, tools, onToolConfigChange }: UseToolsPathsOptions): UseToolsPathsReturn {
48
- const [isDetecting, setIsDetecting] = useState(false)
49
- const [hasScanned, setHasScanned] = useState(false)
50
- const [refreshingTools, setRefreshingTools] = useState<Set<string>>(new Set())
51
- const [scannedTools, setScannedTools] = useState<Set<string>>(new Set())
52
- const wasDetectingRef = useRef(false)
53
-
54
- // Track when full detection completes
55
- useEffect(() => {
56
- if (wasDetectingRef.current && !isDetecting) {
57
- setHasScanned(true)
58
- }
59
- wasDetectingRef.current = isDetecting
60
- }, [isDetecting])
61
-
62
- const detectAll = useCallback(async () => {
63
- setIsDetecting(true)
64
- try {
65
- const results = await api.detectAll()
66
- const detected = new Set<string>()
67
-
68
- for (const tool of tools) {
69
- const result = results[tool.id]
70
- if (result) {
71
- onToolConfigChange(tool.id, {
72
- detected: result.detected,
73
- detectedPath: result.path,
74
- binaryPath: result.path || tool.binaryPath,
75
- })
76
- if (result.detected) {
77
- detected.add(tool.id)
78
- }
79
- }
80
- }
81
-
82
- setScannedTools(detected)
83
- } finally {
84
- setIsDetecting(false)
85
- }
86
- }, [api, tools, onToolConfigChange])
87
-
88
- const detectTool = useCallback(async (toolId: string) => {
89
- setRefreshingTools((prev) => new Set(prev).add(toolId))
90
- try {
91
- const result: ToolDetectionResult = await api.detectTool(toolId)
92
- onToolConfigChange(toolId, {
93
- detected: result.detected,
94
- detectedPath: result.path,
95
- binaryPath: result.path || '',
96
- })
97
- setScannedTools((prev) => {
98
- const next = new Set(prev)
99
- if (result.detected) {
100
- next.add(toolId)
101
- } else {
102
- next.delete(toolId)
103
- }
104
- return next
105
- })
106
- } finally {
107
- setRefreshingTools((prev) => {
108
- const next = new Set(prev)
109
- next.delete(toolId)
110
- return next
111
- })
112
- }
113
- }, [api, onToolConfigChange])
114
-
115
- const validateAndUpdatePath = useCallback(async (toolId: string, path: string) => {
116
- onToolConfigChange(toolId, { binaryPath: path })
117
- setScannedTools((prev) => {
118
- const next = new Set(prev)
119
- next.delete(toolId)
120
- return next
121
- })
122
- setHasScanned(false)
123
-
124
- if (path.trim()) {
125
- try {
126
- const isValid = await api.validatePath(path.trim())
127
- onToolConfigChange(toolId, {
128
- binaryPath: path.trim(),
129
- detected: isValid,
130
- detectedPath: isValid ? path.trim() : undefined,
131
- })
132
- } catch {
133
- onToolConfigChange(toolId, {
134
- binaryPath: path.trim(),
135
- detected: false,
136
- detectedPath: undefined,
137
- })
138
- }
139
- }
140
- }, [api, onToolConfigChange])
141
-
142
- const toggleEnabled = useCallback((toolId: string) => {
143
- const tool = tools.find((t) => t.id === toolId)
144
- if (tool) {
145
- onToolConfigChange(toolId, { enabled: !tool.enabled })
146
- }
147
- }, [tools, onToolConfigChange])
148
-
149
- return {
150
- isDetecting,
151
- hasScanned,
152
- refreshingTools,
153
- scannedTools,
154
- detectAll,
155
- detectTool,
156
- validateAndUpdatePath,
157
- toggleEnabled,
158
- }
159
- }