@toolr/ui-design 0.1.8 → 0.1.9

package/dist/index.d.ts

@@ -1,11 +1,23 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
 import { ReactNode, MouseEvent, InputHTMLAttributes, ElementType, RefObject } from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as lucide_react from 'lucide-react';
 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';
+interface FormColorConfig {
+    /** Idle border class (e.g. 'border-blue-500/30') */
+    border: string;
+    /** Hover classes (e.g. 'hover:bg-blue-500/20 hover:border-blue-500/40') */
+    hover: string;
+    /** Focus border class (e.g. 'focus:border-blue-500') */
+    focus: string;
+    /** Selected row background (e.g. 'bg-blue-600/20') */
+    selectedBg: string;
+    /** Accent text for icons/checks (e.g. 'text-blue-400') */
+    accent: string;
+}
 type AccentColor = FormColor;
 declare const ACCENT_TEXT: Record<AccentColor, string>;
 declare const ACCENT_ICON: Record<FormColor, string>;
@@ -13,8 +25,12 @@ declare const ACCENT_NAV: Record<AccentColor, {
     bg: string;
     text: string;
 }>;
+declare const FORM_COLORS: Record<FormColor, FormColorConfig>;
 
-declare const SCALE_KEYS: readonly ["black", "950", "900", "850", "800", "750", "700", "600", "500", "400", "300", "200"];
+declare const AccentColorProvider: react.Provider<FormColor | undefined>;
+declare function useAccentColor(): FormColor | undefined;
+
+declare const SCALE_KEYS: readonly ["black", "990", "980", "970", "960", "950", "940", "930", "920", "910", "900", "850", "800", "750", "700", "650", "600", "550", "500", "450", "400", "350", "300", "250", "200", "150", "100", "090", "080", "070", "060", "050", "040", "030", "020", "010"];
 type ScaleKey = (typeof SCALE_KEYS)[number];
 type ThemeId = 'dark' | 'light';
 declare const DARK_THEMES: ThemeId[];
@@ -32,7 +48,7 @@ interface AccentDef {
 declare const ACCENT_DEFS: AccentDef[];
 declare function satCurve(l: number): number;
 declare function hslToHex(h: number, s: number, l: number): string;
-declare const SURFACE_KEYS: readonly ["950", "900", "850", "800", "750"];
+declare const SURFACE_KEYS: readonly ["990", "980", "970", "960", "950", "940", "930", "920", "910", "900", "850", "800", "750"];
 type SurfaceKey = (typeof SURFACE_KEYS)[number];
 declare const DEFAULT_DIMS: Record<SurfaceKey, number>;
 declare const DEFAULT_OUTLINE = 30;
@@ -53,8 +69,10 @@ declare function applyTheme(themeId: ThemeId, accentHue: number | null, dims?: R
 type ToolrAppId = 'toolr' | 'configr' | 'reviewr' | 'vibr' | 'learnr' | 'planr' | 'seedr';
 declare const TOOLR_APPS: Record<ToolrAppId, {
     name: string;
-    color: string;
+    accent: string;
 }>;
+/** Resolve an accent ID to its hex color */
+declare function resolveAccentHex(accent: string): string;
 declare function ToolrAppLogo({ app, color: colorOverride, size, className }: {
     app?: ToolrAppId;
     color?: string;
@@ -62,23 +80,41 @@ declare function ToolrAppLogo({ app, color: colorOverride, size, className }: {
     className?: string;
 }): react_jsx_runtime.JSX.Element;
 
-declare const AI_TOOL_LOGOS: {
+declare const CODING_AGENT_LOGOS: {
     readonly claude: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAMAAABF0y+mAAAAJFBMVEVHcEzZd1fZd1fZd1fZd1fad1jZd1fZd1fZd1fZd1fZd1fZd1deZDooAAAADHRSTlMA//F3mhLfyjpWsiMDGU5mAAABH0lEQVQokXVSWXbEIAzDuw33v28FJCnpTP3BA6+yRGvbLK39a0F9RUvHZ5CIazZwkm+VpCi1nZP1GpJEnq2NdabzU594N0XpzInRhq/7jvm8wsOjFfVmcQG4guTWZKYL8HSiA1XFHDjgHMqCpKfpNPgIXiZVVvSJ9yazOJARxBiYf/ZMoIUxrYGjRHs/di2nbdzDZxIb1maPriold3QlyFJCAonMd08A7/WhkN19PWDolSeiXU7URWPm8S3ewMCuvGpB+kigVXvWZKlgIVycF0Hjl6DIoVRCGKz9pE8W0QKXkgkIEmjzUDuh11TSuVkn348DLHs1Y7/kzTi+ksX8GLn0wBRrdvCQS949C43fstj6FhfM8Unfqqwv3gf3+/kDMJgHC0kwnjEAAAAASUVORK5CYII=";
     readonly copilot: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMjgiIGhlaWdodD0iMjgiIHJ4PSI2IiBmaWxsPSIjMWYxZjFmIi8+PHBhdGggZD0iTTE0IDVjLTQuOTcgMC05IDQuMDMtOSA5IDAgMy45NyAyLjU2IDcuMzQgNi4xMiA4LjUzLjQ1LjA4LjYxLS4xOS42MS0uNDN2LTEuNjdjLTIuNDkuNTQtMy4wMS0xLjA2LTMuMDEtMS4wNi0uNDEtMS4wNC0uOTktMS4zMS0uOTktMS4zMS0uODEtLjU2LjA2LS41NC4wNi0uNTQuOS4wNiAxLjM3LjkyIDEuMzcuOTIuOCAxLjM3IDIuMDkuOTggMi42Ljc0LjA4LS41OC4zMS0uOTguNTctMS4yLTEuOTktLjIzLTQuMDgtLjk5LTQuMDgtNC40MiAwLS45OC4zNS0xLjc4LjkyLTIuNDEtLjA5LS4yMy0uNC0xLjE0LjA5LTIuMzcgMCAwIC43NS0uMjQgMi40Ni45Mi43MS0uMiAxLjQ4LS4zIDIuMjQtLjNzMS41My4xIDIuMjQuMzFjMS43MS0xLjE2IDIuNDYtLjkyIDIuNDYtLjkyLjQ5IDEuMjMuMTggMi4xNC4wOSAyLjM3LjU3LjYzLjkyIDEuNDMuOTIgMi40MSAwIDMuNDQtMi4xIDQuMTktNC4wOSA0LjQxLjMyLjI4LjYxLjgyLjYxIDEuNjZ2Mi40NmMwIC4yNC4xNi41MS42MS40M0MxOS40NCAyMS4zNCAyMiAxOC4wMyAyMiAxNGMwLTQuOTctNC4wMy05LTktOVoiIGZpbGw9IiNmZmYiLz48L3N2Zz4=";
     readonly codex: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAMAAABEpIrGAAAAP1BMVEVHcEwAgPgAgPgAgPcAgPcAgPcAgPcAgPcAgPcAgPcAd/dzsvq+2/2Kvvtfpvru+P/Z6/77/v83lvmnzfwbjPhuMd/TAAAACnRSTlMAF0adyun/9k+LLZxzywAAAXZJREFUeAFkUlmWwyAMC03qZITxAtz/rPNiaLpEvwhJCC1vpMe6PYn2bT3Sckf6e9KF55pux/SDvy9K2uiG7YNx7BQAgDdjP677r/PMXOhN2tOXPkSN2byUkis+XV75vBFA7mqugpE0BKY+M0DNuQIoXgbjlFinv1Zk0wxUAppeEin66ebe4Q2o7J6pq4zG0nLEfTPRDhUUNSlu3fKQeAwH0V5PQlPV1kHFfcZcl20GPAnuuWe1DIjx7HPZw+EkEOJ1cDcBtCBCLBGhGVVlimTQ3FxQbHgEgaoLuoVx6FiG+CQ8h4RWUFYVdHYhy8iDsEfI6IEjvTlrEJgxQq7DQ8W0kbgKgiAu85mPQYiiPZo+LdRnUcesGsZAzxVozp2MBa+q5293bx2gs2kgK2hgvb4b4mpsWgggbS9C+hgMcmtFrRT2ck37e9IAajHjjJ9hz9FO0n201+wn7rP/H76MQzjrIZQwI2deTqz5m4OZhR0oycLMhCQNACpMHlEZrAKTAAAAAElFTkSuQmCC";
     readonly gemini: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAEMklEQVR4Ab2XA5AkSRSGv5ddXb095t2tbdu2bW/wbNsXONuBs23bttY2p2e7Kt/1VNQZ3cMv4o9U46+XrxJCSIvLduTv0ezjPTGzfaGNCk5KWAEVyMVSrKFQSsJ6UUolWAp9j5i3j2hK7sG9uMl9Ke0NtQ8nuS+ZKn+IeAceSLj2qtZ3X7sHQACaXLC3434n/rQvNLWiSNk21CZR0ZQIFEUprJDalIKSgoo6QTuo1/PKiHr7A7nJoCQalnG/jPriB2ZSfSv3+zKh+ZO3fCfBk/t5n1uhaeTn54m9dw1m70Zqg/r1sjiySSvG5uXgeGUrdyTzuslhF5Sf70Ui5wR//tIZgFKbCHBxq/aMy42jas8xKmY2Cm7qyUGpbRS4fu1KrHEwyGyjmNbmwFZk30bqivXlCbZ6igptDYqD71HXJDCAcY0Aki5ssRwQoSaxxglkhPSUtxrJzvn3kGwzGsRQE6hUGIhiUJA0uScKfkkbdk+4DH/xA7jtJyHGqXYEfBPNLAKCIApqYU9hcxhzDvWXPEhp5xkYx62qgTACpI9AZNsPODtXYxQ8YLsY9uQ1oHDYyfRNGWnTfR7RaLzyBsTBiJKWyJZvyL97FrnPnU506w8kVCpMBNqXXUrzgUcxc8kD9O+1hHgsNzMDEiYhgJABanF/fIGCexeQ/8TxJDZ/zTYxbAuNHIgX0KXPCo5bfC9Tey8mN5aTJgIRbJgDlUMVd+Ub5N+3DH3kSHas/4RtSEphRNwc+vVcQq8WA9NEIBpEwAlzoEqYtR9QntL6+p2xvZYSa9qPGBAzDuVOFv+HBkkoGFGqTXLjl6x95gx+/PqJ33MjIZLRQuRQTTQaJ9F5JvHuC7DZRWxTHxdDAkmbhL4x4RRQeTSWS3nnuZR1m4+XVUBClBiWmFaUcMD6GUQgEk6BkjEaLyTZ5yj2L3yaRJ8j0HqF4fogbMewZct3fPHM6az6+vGM1gFHEDIi+xD8zkvw2s/ARuNgFBOatwjuuo+IfXgH+9e8V6l1wCETGg3CjrgCdaKIgCgYCxjFWf0O7se342z8rEq7oSMKmm4zipdgxP3jg9ZiVr+C89ntmG3fVWs3dADSToOCUVDfx6x6FueLO2HXL9XcDUMDkkkO2oPww0PI13cie9fX6IHEQSGdCf3lmUBVI815wICHONQ1ESdeYeKgEfRHiZdCTn3qitLcQ8nJLsEz7vdG4AEQpOdxgFDbiAhT+iwlmAJxHzT5yd1XirCKZmNh2GWQ04DaIj+vPvPGnEOXFsPwJbqyrLDgKgHocPreDgec7KctNFNRNLE1vJwSyIZlMMbf+gj7hd+VE15iK1QQ1kuMQ8N4YXCjzrfeSrUHxs85u8X3Qkir8zTPet7xvjGzFW3jG4kqYP9uICj/3h+OhX0xlGJseIUPhSZT7e+LsA/4ZVx9zHnFewB+BQL7BcuXk7EZAAAAAElFTkSuQmCC";
     readonly opencode: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAIKADAAQAAAABAAAAIAAAAACshmLzAAABl0lEQVRYCe1XS2rDMBAd/70xBJoubJqVF83Sm+YooVcIPUDJTUpOUHIa71Ov0ht4Y/yJ6zEYHFnyZBKKNx4IkTSjNw/pzQhrT4tFDROaPmHuNvVMYPITMCkNVFVFhYz6DcMY9SsJ1HUNmqbB1+EAYRiOgqicSZLAx24HHZYsTkmgC46iCF7X627K+vc8j4wnNVAUBQmiCrhlL3kCIjilCerORTwWgTzP4X27hd/zGcRESOxltYLv4xFs2xbzKOcsAiimn9MJUFymeb21LEvIsqwVnDKbxHGNIgkQl8ymrDC5SADj0Mc1NgGjSW5Z1oAAliz6uMbaoes6vG027V3LNOD7PmAMx1gEENhxHHBdVypC9HGNTQCF2P36yWRrfb9qzDsvFcoD6zMBtgaw48nasWqduh0WAaz1IAjAalqtIZRbdbnA83LZPuFU0r6fRQC73+d+398/GP97H+AmGDAUFsgqwLZ7r92yl7yCOI4hTdO7OOCrSZlGfRnJFE+B9v3im9H34Zg8AQpABOTOSQ1wAbnxM4HJT+APfgFr0DSNhC0AAAAASUVORK5CYII=";
 };
-type AiToolKey = 'claude' | 'gemini' | 'codex' | 'copilot' | 'opencode';
-declare const AI_TOOL_NAMES: Record<AiToolKey, string>;
-declare function AiToolIcon({ tool, size, showName, className, style }: {
-    tool: string;
+type CodingAgentKey = 'claude' | 'gemini' | 'codex' | 'copilot' | 'opencode';
+declare const CODING_AGENT_NAMES: Record<CodingAgentKey, string>;
+declare function CodingAgentIcon({ agent, size, showName, selected, accentColor, className, style }: {
+    agent: string;
     size?: number;
     showName?: boolean;
+    selected?: boolean;
+    accentColor?: FormColor;
     className?: string;
     style?: React.CSSProperties;
 }): react_jsx_runtime.JSX.Element | null;
 
+type GitProviderKey = 'github' | 'gitlab' | 'gerrit';
+declare const GIT_PROVIDER_NAMES: Record<GitProviderKey, string>;
+declare function GitProviderIcon({ provider, size, className }: {
+    provider: string;
+    size?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
+type CustomIconKey = 'gerrit';
+declare const CUSTOM_ICON_NAMES: Record<CustomIconKey, string>;
+declare function CustomIcon({ icon, size, className }: {
+    icon: string;
+    size?: number;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+
 interface TooltipContent {
     title?: string;
     /** Description can be a string or React node for rich content with icons/colors */
@@ -105,13 +141,14 @@ interface TooltipProps {
     trigger?: 'hover' | 'click';
     /** Additional classes for the wrapper element (e.g., 'h-full' for flex containers) */
     wrapperClassName?: string;
+    accentColor?: FormColor;
 }
 /**
  * Portal-based tooltip that renders at document body level.
  * This ensures tooltips always appear above all other elements,
  * regardless of parent overflow or z-index settings.
  */
-declare function Tooltip({ children, content, position, align, multiline, maxWidth, maxHeight, trigger, interactive, wrapperClassName, }: TooltipProps): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ children, content, position, align, multiline, maxWidth, maxHeight, trigger, interactive, wrapperClassName, accentColor, }: TooltipProps): react_jsx_runtime.JSX.Element;
 /**
  * Simple tooltip wrapper for icon buttons.
  * Provides consistent styling for action button tooltips.
@@ -222,12 +259,20 @@ declare const iconMap: {
     readonly home: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     readonly 'pie-chart': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
     readonly 'settings-2': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'folder-search': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'panel-left-close': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'trash-2': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'rotate-ccw': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly history: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly github: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly gitlab: react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+    readonly 'git-branch': react.ForwardRefExoticComponent<Omit<lucide_react.LucideProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
 };
 type IconName = keyof typeof iconMap;
 interface ActionItem {
     icon: IconName;
     onClick: () => void;
-    color?: IconButtonColor;
+    accentColor?: IconButtonColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     variant?: IconButtonVariant;
     tooltip?: TooltipContent;
@@ -246,11 +291,11 @@ interface IconButtonProps {
     /** When provided, renders an <a> tag instead of <button>. Opens in a new tab. */
     href?: string;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-    color?: IconButtonColor;
+    accentColor?: IconButtonColor;
     variant?: IconButtonVariant;
     active?: boolean;
     disabled?: boolean;
-    /** Async action status. Overrides icon, color, and active state when set. */
+    /** Async action status. Overrides icon, accentColor, and active state when set. */
     status?: IconButtonStatus;
     /** Tooltip shown on hover. Title and description are required. */
     tooltip?: TooltipContent;
@@ -262,20 +307,20 @@ interface IconButtonProps {
     /** Test ID for E2E testing */
     testId?: string;
 }
-declare function IconButton({ icon, onClick, href, size, color, variant, active, disabled, status, tooltip, tooltipPosition, badge, badgeColor, strikethrough, className, testId, }: IconButtonProps): react_jsx_runtime.JSX.Element;
+declare function IconButton({ icon, onClick, href, size, accentColor, variant, active, disabled, status, tooltip, tooltipPosition, badge, badgeColor, strikethrough, className, testId, }: IconButtonProps): react_jsx_runtime.JSX.Element;
 interface CollapseButtonProps {
     collapsed: boolean;
     onToggle: () => void;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
-    color?: IconButtonColor;
+    accentColor?: IconButtonColor;
     tooltipPosition?: 'bottom' | 'bottom-left' | 'left' | 'right' | 'top' | 'top-left' | 'top-right';
 }
-declare function CollapseButton({ collapsed, onToggle, size, color, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
+declare function CollapseButton({ collapsed, onToggle, size, accentColor, tooltipPosition }: CollapseButtonProps): react_jsx_runtime.JSX.Element;
 
 type LabelColor = AccentColor;
 interface LabelProps {
     text: string;
-    color: LabelColor;
+    accentColor: LabelColor;
     /** Leading icon(s). Pass a single name or an array for multiple icons before text. */
     icon?: IconName | IconName[];
     /** Custom icon component. Takes precedence over icon. */
@@ -296,12 +341,12 @@ interface LabelProps {
 }
 /** 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;
+declare function Label({ text, accentColor, icon, IconComponent: CustomIcon, tooltip, size, textTransform, progress, onClick, className, testId, }: LabelProps): react_jsx_runtime.JSX.Element;
 
 type BadgeColor = AccentColor;
 interface BadgeProps {
     value: number | string;
-    color?: BadgeColor;
+    accentColor?: BadgeColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     className?: string;
     testId?: string;
@@ -310,7 +355,7 @@ declare const Badge: react.NamedExoticComponent<BadgeProps>;
 
 type ConfirmBadgeColor = AccentColor;
 interface ConfirmBadgeProps {
-    color?: ConfirmBadgeColor;
+    accentColor?: ConfirmBadgeColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     className?: string;
     testId?: string;
@@ -325,7 +370,7 @@ interface CheckboxProps {
     onChange: (checked: boolean) => void;
     disabled?: boolean;
     size?: CheckboxSize;
-    color?: CheckboxColor;
+    accentColor?: CheckboxColor;
     variant?: CheckboxVariant;
     className?: string;
     /** Accessible label — required for screen readers */
@@ -333,7 +378,7 @@ interface CheckboxProps {
     /** Test ID for E2E testing */
     testId?: string;
 }
-declare function Checkbox({ checked, onChange, disabled, size, color, variant, className, 'aria-label': ariaLabel, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
+declare function Checkbox({ checked, onChange, disabled, size, accentColor, variant, className, 'aria-label': ariaLabel, testId, }: CheckboxProps): react_jsx_runtime.JSX.Element;
 
 type ToggleColor = AccentColor;
 type ToggleSize = 'xss' | 'xs' | 'sm' | 'md' | 'lg';
@@ -343,13 +388,13 @@ interface ToggleProps {
     disabled?: boolean;
     size?: ToggleSize;
     className?: string;
-    color?: ToggleColor;
+    accentColor?: ToggleColor;
     /** Accessible label — required for screen readers */
     'aria-label'?: string;
     /** Test ID for E2E testing */
     testId?: string;
 }
-declare function Toggle({ checked, onChange, disabled, size, className, color, 'aria-label': ariaLabel, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
+declare function Toggle({ checked, onChange, disabled, size, className, accentColor, 'aria-label': ariaLabel, testId, }: ToggleProps): react_jsx_runtime.JSX.Element;
 
 interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'size' | 'type'> {
     value: string;
@@ -358,7 +403,7 @@ interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChan
     debounceMs?: number;
     error?: boolean | string;
     variant?: 'filled' | 'outline';
-    color?: FormColor;
+    accentColor?: FormColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     mono?: boolean;
     /** Test ID for E2E testing */
@@ -375,21 +420,22 @@ interface NumberInputProps {
     max?: number;
     step?: number;
     variant?: 'filled' | 'outline';
-    color?: FormColor;
+    accentColor?: FormColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     disabled?: boolean;
     className?: string;
     /** Accessible label — required for screen readers */
     'aria-label'?: string;
 }
-declare function NumberInput({ value, onChange, min, max, step, variant, color, size, disabled, className, 'aria-label': ariaLabel, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+declare function NumberInput({ value, onChange, min, max, step, variant, accentColor, size, disabled, className, 'aria-label': ariaLabel, }: NumberInputProps): react_jsx_runtime.JSX.Element;
 
 type ScopeType = 'user' | 'project' | 'local' | 'read-only';
 interface ScopeBadgeProps {
     scope: ScopeType;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    accentColor?: FormColor;
 }
-declare function ScopeBadge({ scope, size }: ScopeBadgeProps): react_jsx_runtime.JSX.Element;
+declare function ScopeBadge({ scope, size, accentColor }: ScopeBadgeProps): react_jsx_runtime.JSX.Element;
 
 interface SegmentedToggleOption<T extends string> {
     value: T;
@@ -411,13 +457,13 @@ interface SegmentedToggleProps<T extends string> {
     /** Tooltip shown on the entire toggle when disabled */
     disabledTooltip?: TooltipContent;
 }
-declare function SegmentedToggle<T extends string>({ options, value, onChange, accentColor, variant, size, tooltipPosition, testId, disabled, disabledTooltip, }: SegmentedToggleProps<T>): react_jsx_runtime.JSX.Element;
+declare function SegmentedToggle<T extends string>({ options, value, onChange, accentColor: accentColorProp, variant, size, tooltipPosition, testId, disabled, disabledTooltip, }: SegmentedToggleProps<T>): react_jsx_runtime.JSX.Element;
 
 interface ResizableTextareaBaseProps {
     wrapperClassName?: string;
     resizable?: boolean;
     variant?: 'filled' | 'outline';
-    color?: FormColor;
+    accentColor?: FormColor;
 }
 interface ResizableTextareaFieldProps extends ResizableTextareaBaseProps, Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'color'> {
     mode?: never;
@@ -457,13 +503,13 @@ interface SelectProps<T extends string | number = string> {
     onChange: (value: T) => void;
     placeholder?: string;
     variant?: 'filled' | 'outline';
-    color?: FormColor;
+    accentColor?: FormColor;
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     align?: 'left' | 'right';
     disabled?: boolean;
     className?: string;
 }
-declare function Select<T extends string | number = string>({ value, options, onChange, placeholder, variant, color, size, align, disabled, className, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
+declare function Select<T extends string | number = string>({ value, options, onChange, placeholder, variant, accentColor, size, align, disabled, className, }: SelectProps<T>): react_jsx_runtime.JSX.Element;
 
 interface FilterDropdownProps {
     value: string;
@@ -476,9 +522,9 @@ interface FilterDropdownProps {
     labelExtra?: ReactNode;
     clearable?: boolean;
     variant?: 'filled' | 'outline';
-    color?: FormColor;
+    accentColor?: FormColor;
 }
-declare function FilterDropdown({ value, onChange, options, allLabel, labelExtra, clearable, variant, color, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
+declare function FilterDropdown({ value, onChange, options, allLabel, labelExtra, clearable, variant, accentColor, }: FilterDropdownProps): react_jsx_runtime.JSX.Element;
 
 interface SortField {
     value: string;
@@ -495,9 +541,9 @@ interface SortDropdownProps {
     onToggleDirection: () => void;
     fields: SortField[];
     variant?: 'filled' | 'outline';
-    color?: FormColor;
+    accentColor?: FormColor;
 }
-declare function SortDropdown({ field, ascending, onFieldChange, onToggleDirection, fields, variant, color, }: SortDropdownProps): react_jsx_runtime.JSX.Element;
+declare function SortDropdown({ field, ascending, onFieldChange, onToggleDirection, fields, variant, accentColor, }: SortDropdownProps): react_jsx_runtime.JSX.Element;
 
 interface FormActionsProps {
     /** Cancel handler — renders X button. Optional (e.g. AlertModal has no cancel). */
@@ -513,7 +559,7 @@ interface FormActionsProps {
     onConfirm?: () => void;
     confirmTooltip?: string;
     confirmIcon?: IconName;
-    confirmColor?: IconButtonProps['color'];
+    confirmColor?: IconButtonProps['accentColor'];
     confirmDisabled?: boolean;
     confirmStatus?: IconButtonStatus;
     /** Next handler — optional, renders right-arrow for wizard navigation */
@@ -523,8 +569,9 @@ interface FormActionsProps {
     statusText?: string;
     border?: boolean;
     padding?: 'compact' | 'normal' | 'modal';
+    accentColor?: FormColor;
 }
-declare function FormActions({ onCancel, cancelTooltip, onBack, backTooltip, onMinimize, minimizeTooltip, onConfirm, confirmTooltip, confirmIcon, confirmColor, confirmDisabled, confirmStatus, onNext, nextTooltip, statusText, border, padding, }: FormActionsProps): react_jsx_runtime.JSX.Element;
+declare function FormActions({ onCancel, cancelTooltip, onBack, backTooltip, onMinimize, minimizeTooltip, onConfirm, confirmTooltip, confirmIcon, confirmColor, confirmDisabled, confirmStatus, onNext, nextTooltip, statusText, border, padding, accentColor, }: FormActionsProps): react_jsx_runtime.JSX.Element;
 
 type ModalKind = 'info' | 'warning' | 'error' | 'orange' | 'success';
 type ModalSize = 'sm' | 'md' | 'lg' | 'xl';
@@ -540,16 +587,18 @@ interface ConfirmModalProps {
     confirmColor?: 'red' | 'blue' | 'orange' | 'yellow';
     isLoading?: boolean;
     confirmDisabled?: boolean;
+    accentColor?: FormColor;
 }
-declare function ConfirmModal({ isOpen, onClose, onConfirm, title, message, warning, warningItems, kind, confirmColor, isLoading, confirmDisabled, }: ConfirmModalProps): react_jsx_runtime.JSX.Element;
+declare function ConfirmModal({ isOpen, onClose, onConfirm, title, message, warning, warningItems, kind, confirmColor, isLoading, confirmDisabled, accentColor: accentColorProp, }: ConfirmModalProps): react_jsx_runtime.JSX.Element;
 interface AlertModalProps {
     isOpen: boolean;
     onClose: () => void;
     title: string;
     message: string;
     kind?: ModalKind;
+    accentColor?: FormColor;
 }
-declare function AlertModal({ isOpen, onClose, title, message, kind, }: AlertModalProps): react_jsx_runtime.JSX.Element;
+declare function AlertModal({ isOpen, onClose, title, message, kind, accentColor: accentColorProp, }: AlertModalProps): react_jsx_runtime.JSX.Element;
 
 type IconProps = {
     className?: string;
@@ -588,8 +637,9 @@ interface SelectionGridProps {
     /** Number of columns for grid layout (auto if not set) */
     columns?: number;
     className?: string;
+    accentColor?: FormColor;
 }
-declare function SelectionGrid({ items: itemsProp, presets, selectedIds, onSelect, mode, layout, columns, className, }: SelectionGridProps): react_jsx_runtime.JSX.Element;
+declare function SelectionGrid({ items: itemsProp, presets, selectedIds, onSelect, mode, layout, columns, className, accentColor, }: SelectionGridProps): react_jsx_runtime.JSX.Element;
 
 interface DetailRow {
     label: string;
@@ -604,8 +654,9 @@ interface DetailSectionProps {
     /** Detail rows to display */
     rows: DetailRow[];
     className?: string;
+    accentColor?: FormColor;
 }
-declare function DetailSection({ title, icon, rows, className }: DetailSectionProps): react_jsx_runtime.JSX.Element;
+declare function DetailSection({ title, icon, rows, className, accentColor }: DetailSectionProps): react_jsx_runtime.JSX.Element;
 
 interface ActionDialogProps {
     /** Dialog title */
@@ -632,11 +683,11 @@ interface ActionDialogProps {
     submitDisabled?: boolean;
     /** Status text shown in footer left */
     statusText?: string;
-    /** Label above the selection grid (e.g. "AI Tool:") */
+    /** Label above the selection grid (e.g. "Coding Agent:") */
     selectionLabel?: string;
     /** Custom selection items - renders SelectionGrid when provided */
     items?: SelectionCardItem[];
-    /** Built-in AI tool presets. Ignored when `items` is provided. */
+    /** Built-in coding agent presets. Ignored when `items` is provided. */
     presets?: CodingToolPresetConfig[];
     /** Currently selected item IDs */
     selectedIds?: string[];
@@ -672,8 +723,10 @@ interface ActionDialogProps {
     children?: React.ReactNode;
     /** Additional className */
     className?: string;
+    /** Accent color for themed sub-components */
+    accentColor?: FormColor;
 }
-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;
+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, accentColor: accentColorProp, }: ActionDialogProps): react.ReactPortal;
 
 interface ExecutionDetailsPanelProps {
     details: DetailRow[];
@@ -683,8 +736,9 @@ interface ExecutionDetailsPanelProps {
     /** Warning message shown below the toggle */
     warningMessage?: string;
     className?: string;
+    accentColor?: FormColor;
 }
-declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
+declare function ExecutionDetailsPanel({ details, allowDirectEdits, onAllowDirectEditsChange, warningMessage, className, accentColor: accentColorProp, }: ExecutionDetailsPanelProps): react_jsx_runtime.JSX.Element;
 
 interface FileTreeNode {
     name: string;
@@ -703,7 +757,7 @@ interface FileTreeProps {
 }
 /** Collect all directory paths that would be rendered in the tree */
 declare function collectDirPaths(nodes: FileTreeNode[], rootName?: string, prefix?: string): Set<string>;
-declare function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix, expandedPaths, onTogglePath, accentColor }: FileTreeProps): react_jsx_runtime.JSX.Element;
+declare function FileTree({ nodes, rootName, selectedPath, onSelectFile, prefix, expandedPaths, onTogglePath, accentColor: accentColorProp }: FileTreeProps): react_jsx_runtime.JSX.Element;
 
 interface EditorToolbarProps {
     /** Optional title displayed in the toolbar */
@@ -733,8 +787,9 @@ interface EditorToolbarProps {
     leftActions?: ActionItem[];
     /** Optional: Additional action buttons on the right side (before save) */
     rightActions?: ActionItem[];
+    accentColor?: FormColor;
 }
-declare function EditorToolbar({ title, description, isDirty, isSaving, onSave, canReset, onReset, resetTooltip, isReadOnly, hasError, leftActions, rightActions, }: EditorToolbarProps): react_jsx_runtime.JSX.Element | null;
+declare function EditorToolbar({ title, description, isDirty, isSaving, onSave, canReset, onReset, resetTooltip, isReadOnly, hasError, leftActions, rightActions, accentColor: _accentColor, }: EditorToolbarProps): react_jsx_runtime.JSX.Element | null;
 
 /** Status banner configuration for outdated/info messages */
 interface StatusBanner {
@@ -791,8 +846,9 @@ interface BottomPanelHeaderProps<T extends string = string> {
     statusBanner?: StatusBanner;
     /** Callback when collapse button is clicked */
     onCollapse?: () => void;
+    accentColor?: FormColor;
 }
-declare function BottomPanelHeader<T extends string = string>({ tabs, activeTab, onTabChange, actions, customActions, className, customLeftContent, statusBanner, onCollapse, }: BottomPanelHeaderProps<T>): react_jsx_runtime.JSX.Element;
+declare function BottomPanelHeader<T extends string = string>({ tabs, activeTab, onTabChange, actions, customActions, className, customLeftContent, statusBanner, onCollapse, accentColor: _accentColor, }: BottomPanelHeaderProps<T>): react_jsx_runtime.JSX.Element;
 
 interface FrontmatterFormHeaderProps {
     collapsed: boolean;
@@ -805,8 +861,9 @@ interface FrontmatterFormHeaderProps {
     /** Toggle frontmatter on/off */
     onFrontmatterToggle?: (enabled: boolean) => void;
     readOnly?: boolean;
+    accentColor?: FormColor;
 }
-declare function FrontmatterFormHeader({ collapsed, onToggle, renderSummary, children, frontmatterEnabled, onFrontmatterToggle, readOnly, }: FrontmatterFormHeaderProps): react_jsx_runtime.JSX.Element;
+declare function FrontmatterFormHeader({ collapsed, onToggle, renderSummary, children, frontmatterEnabled, onFrontmatterToggle, readOnly, accentColor, }: FrontmatterFormHeaderProps): react_jsx_runtime.JSX.Element;
 
 interface EditorPlaceholderCardProps {
     /** Placeholder name (without braces) */
@@ -820,7 +877,7 @@ interface EditorPlaceholderCardProps {
     /** Label for the value section (default: "Value:") */
     valueLabel?: string;
     /** Color scheme */
-    accentColor?: 'purple' | 'blue' | 'neutral' | 'sky';
+    accentColor?: FormColor;
     /** Action buttons to show on the right (e.g., edit/delete for settings) */
     actions?: ActionItem[];
     /** Show copy button that copies the {{PLACEHOLDER}} syntax */
@@ -844,11 +901,12 @@ interface DetailViewWrapperProps {
     /** Optional right sidebar */
     rightSidebar?: ReactNode;
     showRightSidebar?: boolean;
+    accentColor?: FormColor;
 }
-declare function DetailViewWrapper({ editorContent, actions, bottomPanel, rightSidebar, showRightSidebar, }: DetailViewWrapperProps): react_jsx_runtime.JSX.Element;
+declare function DetailViewWrapper({ editorContent, actions, bottomPanel, rightSidebar, showRightSidebar, accentColor, }: DetailViewWrapperProps): react_jsx_runtime.JSX.Element;
 
 type RegistryItemType = 'skill' | 'hook' | 'agent' | 'command' | 'plugin' | 'mcp' | 'settings';
-type ExtensionSource = 'project' | 'plugin' | 'user' | 'local';
+type CapabilitySource = 'project' | 'plugin' | 'user' | 'local';
 interface SeedrItemStatus {
     updateAvailable: boolean;
     modified: boolean;
@@ -864,6 +922,7 @@ interface RegistryCardBase {
     isInstalling?: boolean;
     updatedAt?: string;
     onDateClick?: () => void;
+    accentColor?: FormColor;
 }
 interface SeedrVariant extends RegistryCardBase {
     variant: 'seedr';
@@ -871,14 +930,14 @@ interface SeedrVariant extends RegistryCardBase {
     sourceType: string;
     pluginType?: string;
     wrapper?: string;
-    installedScopes?: ReadonlySet<ExtensionSource>;
+    installedScopes?: ReadonlySet<CapabilitySource>;
     viewScope?: 'user' | 'project';
     status?: SeedrItemStatus;
     compatibility: string[];
     packageCounts?: Record<string, number>;
     isDisabled?: boolean;
     onActivate?: () => void;
-    onRemove?: (scope: ExtensionSource) => void;
+    onRemove?: (scope: CapabilitySource) => void;
     onFilterSource?: () => void;
     onFilterPluginType?: (pluginType: string) => void;
     /** Render scope confirmation modal */
@@ -895,7 +954,7 @@ interface ClaudePluginsVariant extends RegistryCardBase {
     category?: string;
     stars?: number;
     downloads?: number;
-    installedScopes?: ReadonlySet<ExtensionSource>;
+    installedScopes?: ReadonlySet<CapabilitySource>;
     viewScope?: 'user' | 'project';
     onRemove?: () => void;
     onSortBy?: (field: string) => void;
@@ -913,7 +972,7 @@ interface ClaudePluginsVariant extends RegistryCardBase {
 interface AitmplVariant extends RegistryCardBase {
     variant: 'aitmpl';
     category: string;
-    installedScopes?: ReadonlySet<ExtensionSource>;
+    installedScopes?: ReadonlySet<CapabilitySource>;
     viewScope?: 'user' | 'project';
     onRemove?: () => void;
     onFilterCategory?: (category: string) => void;
@@ -929,7 +988,7 @@ interface SkillsShVariant extends RegistryCardBase {
     variant: 'skills-sh';
     author: string;
     installs?: number;
-    installedScopes?: ReadonlySet<ExtensionSource>;
+    installedScopes?: ReadonlySet<CapabilitySource>;
     viewScope?: 'user' | 'project';
     onRemove?: () => void;
     /** All tool keys to show in bottom row */
@@ -990,10 +1049,12 @@ interface RegistryDetailProps {
     fileStructureVariant?: FileStructureSectionProps['variant'];
     onFetchContent?: FileStructureSectionProps['onFetchContent'];
     aboveHeader?: ReactNode;
+    belowHeader?: ReactNode;
+    accentColor?: AccentColor;
     maxWidth?: string;
     children?: ReactNode;
 }
-declare function RegistryDetail({ icon: Icon, iconColor, title, titleExtra, subtitle, actionButton, labels, description, longDescription, integration, compatibleTools, files, rootName, fileStructureVariant, onFetchContent, aboveHeader, maxWidth, children, }: RegistryDetailProps): react_jsx_runtime.JSX.Element;
+declare function RegistryDetail({ icon: Icon, iconColor, title, titleExtra, subtitle, actionButton, labels, description, longDescription, integration, compatibleTools, files, rootName, fileStructureVariant, onFetchContent, aboveHeader, belowHeader, accentColor, maxWidth, children, }: RegistryDetailProps): react_jsx_runtime.JSX.Element;
 
 interface RegistryBrowserProps {
     isLoading: boolean;
@@ -1022,8 +1083,10 @@ interface RegistryBrowserProps {
     onScrollChange?: (scrollTop: number) => void;
     maxWidth?: string;
     items: RegistryCardProps[];
+    /** Accent color for themed sub-components */
+    accentColor?: FormColor;
 }
-declare function RegistryBrowser({ isLoading, loadingMessage, error, isEmpty, emptyMessage, onRetry, searchQuery, onSearchChange, onSearchSubmit, searchPlaceholder, debounceKey, debounceDurationMs, toolbarCenter, toolbarEnd, onRefresh, refreshTooltip, aboveGrid, hasActiveFilters, onResetFilters, initialScrollTop, onScrollChange, maxWidth, items, }: RegistryBrowserProps): react_jsx_runtime.JSX.Element;
+declare function RegistryBrowser({ isLoading, loadingMessage, error, isEmpty, emptyMessage, onRetry, searchQuery, onSearchChange, onSearchSubmit, searchPlaceholder, debounceKey, debounceDurationMs, toolbarCenter, toolbarEnd, onRefresh, refreshTooltip, aboveGrid, hasActiveFilters, onResetFilters, initialScrollTop, onScrollChange, maxWidth, items, accentColor: accentColorProp, }: RegistryBrowserProps): react_jsx_runtime.JSX.Element;
 
 type AiActionStatus = 'idle' | 'running' | 'completed';
 type AiCompletionResult = 'success' | 'partial' | 'error';
@@ -1053,14 +1116,14 @@ interface AiActionButtonProps {
     /** Custom reason when force-disabled */
     disabledReason?: string;
     /** Color in default state */
-    color?: IconButtonProps['color'];
+    accentColor?: IconButtonProps['accentColor'];
     /** Color when completed successfully (defaults to 'green') */
-    completedColor?: IconButtonProps['color'];
+    completedColor?: IconButtonProps['accentColor'];
     size?: IconButtonProps['size'];
     className?: string;
     testId?: string;
 }
-declare function AiActionButton({ status, completionResult, icon, runningIcon, completedIcon, tooltip, runningTooltipTitle, completedTooltipTitle, onClick, disabled: forceDisabled, disabledReason, color, completedColor, size, className, testId, }: AiActionButtonProps): react_jsx_runtime.JSX.Element;
+declare function AiActionButton({ status, completionResult, icon, runningIcon, completedIcon, tooltip, runningTooltipTitle, completedTooltipTitle, onClick, disabled: forceDisabled, disabledReason, accentColor, completedColor, size, className, testId, }: AiActionButtonProps): react_jsx_runtime.JSX.Element;
 
 type ExecutionStatus = 'running' | 'success' | 'partial' | 'error';
 interface AiExecutionActionButtonsProps {
@@ -1078,8 +1141,10 @@ interface AiExecutionActionButtonsProps {
     status?: ExecutionStatus;
     /** Prefix for test IDs (e.g., 'scan-modal' results in 'scan-modal-minimize-btn') */
     testIdPrefix?: string;
+    /** Accent color for themed sub-components */
+    accentColor?: FormColor;
 }
-declare function AiExecutionActionButtons({ isRunning, allDone, onMinimize, onCancel, onClose, status, testIdPrefix, }: AiExecutionActionButtonsProps): react_jsx_runtime.JSX.Element;
+declare function AiExecutionActionButtons({ isRunning, allDone, onMinimize, onCancel, onClose, status, testIdPrefix, accentColor, }: AiExecutionActionButtonsProps): react_jsx_runtime.JSX.Element;
 
 /**
  * Issue Reporter API — Types and submission client
@@ -1234,30 +1299,11 @@ interface ReportBugFormProps {
     onErrorsSubmitted?: () => void;
     /** Override default API submission (for testing/mocking) */
     submitFn?: (report: IssueReport) => Promise<IssueReportResult>;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function ReportBugForm({ workerUrl, getSystemInfo, linearTeamId, linearProjectId, errorReport, errorFingerprint, errorCount, warnCount, capturedErrors, onSuccess, onError, onCancel, onErrorsSubmitted, submitFn, className, }: ReportBugFormProps): react_jsx_runtime.JSX.Element;
+declare function ReportBugForm({ workerUrl, getSystemInfo, linearTeamId, linearProjectId, errorReport, errorFingerprint, errorCount, warnCount, capturedErrors, onSuccess, onError, onCancel, onErrorsSubmitted, submitFn, accentColor, className, }: ReportBugFormProps): react_jsx_runtime.JSX.Element;
 
-/**
- * ScreenshotUploader — Drag & drop multi-image upload
- *
- * Part of: Sections > Report a Bug
- * Also usable standalone for any image upload scenario.
- *
- * Features:
- * - Drag & drop or click to select images
- * - Base64 encoding for API submission
- * - Preview thumbnails in a 3-column grid
- * - Total size limit enforcement (default 20MB)
- * - Individual screenshot removal
- *
- * AI agent notes:
- * - Fully controlled component: parent owns the screenshots array
- * - Screenshot.data is base64 without the data URL prefix
- * - The Screenshot type (with id, size) is for UI management;
- *   ScreenshotAttachment (without id, size) is what gets sent to the API
- * - Used by ReportBugForm but exported independently
- */
 interface Screenshot {
     id: string;
     filename: string;
@@ -1270,9 +1316,10 @@ interface ScreenshotUploaderProps {
     onChange: (screenshots: Screenshot[]) => void;
     maxTotalSize?: number;
     disabled?: boolean;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function ScreenshotUploader({ screenshots, onChange, maxTotalSize, disabled, className, }: ScreenshotUploaderProps): react_jsx_runtime.JSX.Element;
+declare function ScreenshotUploader({ screenshots, onChange, maxTotalSize, disabled, accentColor, className, }: ScreenshotUploaderProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useReportBug — Form state and submission hook
@@ -1641,8 +1688,9 @@ interface GoldenSyncPanelProps {
     monacoTheme?: string;
     renderFileIcon?: (filename: string, component: string) => ReactNode;
     onTabChange?: (tab: TabId) => void;
+    accentColor?: FormColor;
 }
-declare function GoldenSyncPanel({ api, components, devtools, componentLabels, monacoTheme, renderFileIcon, onTabChange, }: GoldenSyncPanelProps): react_jsx_runtime.JSX.Element;
+declare function GoldenSyncPanel({ api, components, devtools, componentLabels, monacoTheme, renderFileIcon, onTabChange, accentColor, }: GoldenSyncPanelProps): react_jsx_runtime.JSX.Element;
 
 interface StatusOverviewProps {
     status: GoldenStatus | null;
@@ -1678,9 +1726,9 @@ interface VersionManagerProps {
 declare function VersionManager({ sync, components, componentLabels }: VersionManagerProps): react_jsx_runtime.JSX.Element;
 
 /**
- * AI Tools Paths — Shared type definitions
+ * Coding Agent Paths — Shared type definitions
  *
- * Part of: Sections > AI Tools Paths
+ * Part of: Sections > Coding Agent Paths
  *
  * These types define the CONTRACT between the UI layer (this package) and
  * the Rust/Tauri backend that each app must implement. Every type here has
@@ -1692,35 +1740,35 @@ declare function VersionManager({ sync, components, componentLabels }: VersionMa
  * to match these TypeScript interfaces.
  *
  * Generic design:
- * - Tools are keyed by string ID (not hardcoded to specific tools)
+ * - Agents are keyed by string ID (not hardcoded to specific agents)
  * - Configr uses: "claude", "gemini", "copilot", "codex", "opencode"
- * - Other apps can define their own tool sets
- * - The UI renders whatever tools the consumer provides
+ * - Other apps can define their own agent sets
+ * - The UI renders whatever agents the consumer provides
  */
-/** Per-tool configuration state */
-interface AiToolConfig {
-    /** Unique identifier for the tool (e.g. "claude", "gemini") */
+/** Per-agent configuration state */
+interface CodingAgentConfig {
+    /** Unique identifier for the agent (e.g. "claude", "gemini") */
     id: string;
     /** Display name (e.g. "Claude Code", "Gemini CLI") */
     name: string;
-    /** Whether the tool is enabled for use */
+    /** Whether the agent is enabled for use */
     enabled: boolean;
     /** User-configured or auto-detected binary path */
     binaryPath: string;
-    /** Whether the tool was found during detection */
+    /** Whether the agent was found during detection */
     detected: boolean;
     /** Path found by auto-detection (may differ from binaryPath if user overrode it) */
     detectedPath?: string;
 }
-/** Result of detecting a single tool's binary */
-interface ToolDetectionResult {
+/** Result of detecting a single agent's binary */
+interface AgentDetectionResult {
     /** Whether the binary was found */
     detected: boolean;
     /** Resolved path to the binary, if found */
     path?: string;
 }
 /**
- * ToolsPathsApi — The callback interface that each app must implement.
+ * AgentPathsApi — The callback interface that each app must implement.
  *
  * This is the bridge between the shared UI and the app-specific backend.
  * Each function maps to a Tauri command (or any other backend).
@@ -1737,12 +1785,12 @@ interface ToolDetectionResult {
  * │ REQUIRED Tauri commands for full functionality:                      │
  * │                                                                     │
  * │ DETECTION:                                                          │
- * │   detect_all_tools() → Record<string, ToolDetectionResult>          │
- * │     Scans PATH and known install locations for all tool binaries.    │
- * │     Returns a map of tool ID → detection result.                    │
+ * │   detect_all_agents() → Record<string, AgentDetectionResult>        │
+ * │     Scans PATH and known install locations for all agent binaries.   │
+ * │     Returns a map of agent ID → detection result.                   │
  * │                                                                     │
- * │   detect_tool(toolId) → ToolDetectionResult                         │
- * │     Scans for a single tool binary. Used for per-tool refresh.      │
+ * │   detect_agent(agentId) → AgentDetectionResult                      │
+ * │     Scans for a single agent binary. Used for per-agent refresh.    │
  * │                                                                     │
  * │ VALIDATION:                                                         │
  * │   validate_binary_path(path) → bool                                 │
@@ -1750,83 +1798,84 @@ interface ToolDetectionResult {
  * │     Typically: fs::metadata(path).is_ok() && is_executable(path)    │
  * │                                                                     │
  * │ DETECTION STRATEGY (Rust backend should implement):                 │
- * │ 1. Check PATH environment variable (which <tool-binary>)            │
+ * │ 1. Check PATH environment variable (which <agent-binary>)           │
  * │ 2. Check common install locations:                                  │
  * │    - /usr/local/bin/<binary>                                        │
  * │    - /opt/homebrew/bin/<binary>                                      │
  * │    - ~/.local/bin/<binary>                                           │
- * │    - ~/.cargo/bin/<binary> (for Rust-based tools)                    │
- * │    - ~/.npm/bin/<binary> (for npm-based tools)                       │
- * │ 3. Check tool-specific locations:                                   │
+ * │    - ~/.cargo/bin/<binary> (for Rust-based agents)                   │
+ * │    - ~/.npm/bin/<binary> (for npm-based agents)                      │
+ * │ 3. Check agent-specific locations:                                  │
  * │    - Claude: ~/.claude/bin/claude                                    │
  * │    - Copilot: gh extension path                                     │
  * │ 4. Return first valid path found, or detected: false                │
  * └─────────────────────────────────────────────────────────────────────┘
  */
-interface ToolsPathsApi {
-    /** Scan all tools and return detection results keyed by tool ID */
-    detectAll: () => Promise<Record<string, ToolDetectionResult>>;
-    /** Scan a single tool and return its detection result */
-    detectTool: (toolId: string) => Promise<ToolDetectionResult>;
+interface AgentPathsApi {
+    /** Scan all agents and return detection results keyed by agent ID */
+    detectAll: () => Promise<Record<string, AgentDetectionResult>>;
+    /** Scan a single agent and return its detection result */
+    detectAgent: (agentId: string) => Promise<AgentDetectionResult>;
     /** Check if a given binary path is valid (exists and is executable) */
     validatePath: (path: string) => Promise<boolean>;
 }
 
-interface ToolsPathsPanelProps {
+interface AgentPathsPanelProps {
     /** API adapter for backend operations (detection, validation) */
-    api: ToolsPathsApi;
-    /** Current tool configurations */
-    tools: AiToolConfig[];
-    /** Called when a tool's config changes. Consumer updates their state. */
-    onToolConfigChange: (toolId: string, config: Partial<AiToolConfig>) => void;
-    /** Optional render function for tool icons. Receives tool ID, returns ReactNode. */
-    renderToolIcon?: (toolId: string) => ReactNode;
+    api: AgentPathsApi;
+    /** Current agent configurations */
+    agents: CodingAgentConfig[];
+    /** Called when an agent's config changes. Consumer updates their state. */
+    onAgentConfigChange: (agentId: string, config: Partial<CodingAgentConfig>) => void;
+    /** Optional render function for agent icons. Receives agent ID, returns ReactNode. */
+    renderAgentIcon?: (agentId: string) => ReactNode;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function ToolsPathsPanel({ api, tools, onToolConfigChange, renderToolIcon, className, }: ToolsPathsPanelProps): react_jsx_runtime.JSX.Element;
+declare function AgentPathsPanel({ api, agents, onAgentConfigChange, renderAgentIcon, accentColor, className, }: AgentPathsPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
- * useToolsPaths — Tool detection and configuration state hook
+ * useAgentPaths — Agent detection and configuration state hook
  *
- * Part of: Sections > AI Tools Paths
+ * Part of: Sections > Coding Agent Paths
  *
- * Manages tool detection state, per-tool refresh tracking, and path validation.
- * Used internally by ToolsPathsPanel but can also be used standalone for
+ * Manages agent detection state, per-agent refresh tracking, and path validation.
+ * Used internally by AgentPathsPanel but can also be used standalone for
  * custom UIs.
  *
  * AI agent notes:
- * - This hook does NOT store tool configs — the consumer owns that state.
+ * - This hook does NOT store agent configs — the consumer owns that state.
  *   It only manages detection/scanning ephemeral state.
- * - The hook tracks which tools have been scanned, which are currently
+ * - The hook tracks which agents have been scanned, which are currently
  *   refreshing, and whether a full scan has completed.
  * - Path validation is debounced by the consumer (typically on blur or
  *   after typing stops).
  */
 
-interface UseToolsPathsOptions {
-    api: ToolsPathsApi;
-    tools: AiToolConfig[];
-    onToolConfigChange: (toolId: string, config: Partial<AiToolConfig>) => void;
+interface UseAgentPathsOptions {
+    api: AgentPathsApi;
+    agents: CodingAgentConfig[];
+    onAgentConfigChange: (agentId: string, config: Partial<CodingAgentConfig>) => void;
 }
-interface UseToolsPathsReturn {
+interface UseAgentPathsReturn {
     /** Whether a full scan is in progress */
     isDetecting: boolean;
     /** Whether a full scan has completed at least once */
     hasScanned: boolean;
-    /** Set of tool IDs currently being individually refreshed */
-    refreshingTools: Set<string>;
-    /** Set of tool IDs that were found during the last scan */
-    scannedTools: Set<string>;
-    /** Run detection for all tools */
+    /** Set of agent IDs currently being individually refreshed */
+    refreshingAgents: Set<string>;
+    /** Set of agent IDs that were found during the last scan */
+    scannedAgents: Set<string>;
+    /** Run detection for all agents */
     detectAll: () => Promise<void>;
-    /** Run detection for a single tool */
-    detectTool: (toolId: string) => Promise<void>;
-    /** Validate and update a tool's binary path */
-    validateAndUpdatePath: (toolId: string, path: string) => Promise<void>;
-    /** Toggle a tool's enabled state */
-    toggleEnabled: (toolId: string) => void;
+    /** Run detection for a single agent */
+    detectAgent: (agentId: string) => Promise<void>;
+    /** Validate and update an agent's binary path */
+    validateAndUpdatePath: (agentId: string, path: string) => Promise<void>;
+    /** Toggle an agent's enabled state */
+    toggleEnabled: (agentId: string) => void;
 }
-declare function useToolsPaths({ api, tools, onToolConfigChange }: UseToolsPathsOptions): UseToolsPathsReturn;
+declare function useAgentPaths({ api, agents, onAgentConfigChange }: UseAgentPathsOptions): UseAgentPathsReturn;
 
 /**
  * Captured Issues — Shared type definitions
@@ -1945,9 +1994,10 @@ interface CapturedIssuesPanelProps {
     onDismiss?: () => void;
     /** Called after successful submission */
     onSubmitSuccess?: (issueId?: string) => void;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function CapturedIssuesPanel({ api, errors, onDismiss, onSubmitSuccess, className, }: CapturedIssuesPanelProps): react_jsx_runtime.JSX.Element;
+declare function CapturedIssuesPanel({ api, errors, onDismiss, onSubmitSuccess, accentColor, className, }: CapturedIssuesPanelProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useCapturedIssues — State management hook for captured issues panel
@@ -2031,7 +2081,7 @@ interface SnapshotCategory {
     icon?: string;
     items: SnapshotItem[];
 }
-/** A top-level scope containing categories (e.g. "Settings", "Extensions") */
+/** A top-level scope containing categories (e.g. "Settings", "Capabilities") */
 interface SnapshotScope {
     id: string;
     name: string;
@@ -2087,9 +2137,10 @@ interface SnapshotBrowserPanelProps {
     snapshotLimit: number;
     onSnapshotLimitChange: (limit: number) => void;
     onClearAll?: () => void;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function SnapshotBrowserPanel({ api, scopes, snapshotLimit, onSnapshotLimitChange, onClearAll, className, }: SnapshotBrowserPanelProps): react_jsx_runtime.JSX.Element;
+declare function SnapshotBrowserPanel({ api, scopes, snapshotLimit, onSnapshotLimitChange, onClearAll, accentColor, className, }: SnapshotBrowserPanelProps): react_jsx_runtime.JSX.Element;
 
 interface SnapshotTreeProps {
     scopes: SnapshotScope[];
@@ -2193,9 +2244,9 @@ interface SnippetsEditorProps {
     /** Section description, e.g. "Define snippets to reuse in skills prompts..." */
     description?: string;
     className?: string;
-    accentColor?: string;
+    accentColor?: FormColor;
 }
-declare function SnippetsEditor({ api, snippets, title, description, className, accentColor, }: SnippetsEditorProps): react_jsx_runtime.JSX.Element;
+declare function SnippetsEditor({ api, snippets, title, description, className, accentColor: accentColorProp, }: SnippetsEditorProps): react_jsx_runtime.JSX.Element;
 
 /**
  * useSnippetsEditor — Form state and CRUD hook for the snippets editor
@@ -2333,9 +2384,10 @@ interface TabbedPromptEditorProps {
     validateChecklist?: boolean;
     /** When true, adds border and rounding for standalone usage */
     standalone?: boolean;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function TabbedPromptEditor({ prompts, onPromptChange, tools, defaultPrompts, variables, onReset, onSave, validateChecklist, standalone, className, }: TabbedPromptEditorProps): react_jsx_runtime.JSX.Element;
+declare function TabbedPromptEditor({ prompts, onPromptChange, tools, defaultPrompts, variables, onReset, onSave, validateChecklist, standalone, accentColor, className, }: TabbedPromptEditorProps): react_jsx_runtime.JSX.Element;
 
 interface FileTypeTabbedPromptEditorProps {
     /** Nested prompts: fileType -> tool -> prompt */
@@ -2383,9 +2435,10 @@ interface SimulatorPromptEditorProps {
     onSave?: (scenario: string, step: string, tool: string, content: string) => void;
     /** When true, validates "## Verification Checklist" section */
     validateChecklist?: boolean;
+    accentColor?: FormColor;
     className?: string;
 }
-declare function SimulatorPromptEditor({ prompts, onPromptChange, scenarios, tools, defaultPrompts, variables, onReset, onSave, validateChecklist, className, }: SimulatorPromptEditorProps): react_jsx_runtime.JSX.Element;
+declare function SimulatorPromptEditor({ prompts, onPromptChange, scenarios, tools, defaultPrompts, variables, onReset, onSave, validateChecklist, accentColor, className, }: SimulatorPromptEditorProps): react_jsx_runtime.JSX.Element;
 
 interface CollapsibleSectionProps {
     title: string;
@@ -2396,8 +2449,9 @@ interface CollapsibleSectionProps {
     badgeColor?: BadgeColor;
     children: React.ReactNode;
     className?: string;
+    accentColor?: FormColor;
 }
-declare function CollapsibleSection({ title, icon, iconColor, defaultOpen, badge, badgeColor, children, className, }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
+declare function CollapsibleSection({ title, icon, iconColor, defaultOpen, badge, badgeColor, children, className, accentColor, }: CollapsibleSectionProps): react_jsx_runtime.JSX.Element;
 
 interface FileEntry {
     path: string;
@@ -2416,8 +2470,31 @@ interface FilesPanelProps {
     showSearch?: boolean;
     className?: string;
     accentColor?: string;
-}
-declare function FilesPanel({ files, selectedPath, onSelect, onAction, showSearch, className, accentColor, }: FilesPanelProps): react_jsx_runtime.JSX.Element;
+    /** Right-click handler for tree nodes */
+    onContextMenu?: (e: React.MouseEvent, entry: FileEntry) => void;
+    /** Path of the selected/highlighted folder (separate from file selection) */
+    selectedFolderPath?: string;
+    /** Callback when a folder row is clicked (for folder selection). If set, chevron toggles expand while row selects. */
+    onSelectFolder?: (path: string) => void;
+    /** Custom content rendered after the file/folder name (e.g. badges, labels) */
+    renderBadges?: (entry: FileEntry) => ReactNode;
+    /** Custom hover actions rendered at the right edge of each row */
+    renderNodeActions?: (entry: FileEntry) => ReactNode;
+    /** Set of paths that should render in a muted/dimmed style */
+    hiddenPaths?: Set<string>;
+    /** Custom content above the tree (e.g. filter badges, creation inputs) */
+    header?: ReactNode;
+    /** Custom footer content. When provided, replaces the default file count footer. */
+    footer?: ReactNode;
+    /** Controlled expand state. When provided, FilesPanel uses this instead of internal state. */
+    expandedPaths?: Set<string>;
+    /** Controlled toggle callback. Required when expandedPaths is provided. */
+    onToggleExpand?: (path: string) => void;
+}
+declare function collectAllFolderPaths(entries: FileEntry[]): Set<string>;
+declare function countFiles(entries: FileEntry[]): number;
+declare function countFolders(entries: FileEntry[]): number;
+declare function FilesPanel({ files, selectedPath, onSelect, onAction, showSearch, className, accentColor: accentColorProp, onContextMenu, selectedFolderPath, onSelectFolder, renderBadges, renderNodeActions, hiddenPaths, header, footer, expandedPaths: controlledExpandedPaths, onToggleExpand: controlledOnToggleExpand, }: FilesPanelProps): react_jsx_runtime.JSX.Element;
 
 /** Searchable panel for browsing, copying, and inserting code snippets. */
 interface Snippet {
@@ -2451,8 +2528,9 @@ interface BreadcrumbProps {
     /** 'box' (default) wraps in a bordered container; 'plain' renders inline with no background */
     variant?: 'box' | 'plain';
     className?: string;
+    accentColor?: FormColor;
 }
-declare function Breadcrumb({ segments, separator, size, variant, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+declare function Breadcrumb({ segments, separator, size, variant, className, accentColor, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
 
 interface NavigationBarProps {
     segments: BreadcrumbSegment[];
@@ -2469,9 +2547,10 @@ interface NavigationBarProps {
     };
     separator?: 'chevron' | 'slash' | 'dot';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
+    accentColor?: AccentColor;
     className?: string;
 }
-declare function NavigationBar({ segments, canGoBack, canGoForward, onBack, onForward, showHistory, historyEntries, onHistorySelect, leadingAction, separator, size, className, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
+declare function NavigationBar({ segments, canGoBack, canGoForward, onBack, onForward, showHistory, historyEntries, onHistorySelect, leadingAction, separator, size, accentColor, className, }: NavigationBarProps): react_jsx_runtime.JSX.Element;
 
 interface Tab {
     id: string;
@@ -2490,8 +2569,9 @@ interface TabBarProps {
     variant?: 'underline' | 'pill' | 'card';
     size?: 'xss' | 'xs' | 'sm' | 'md' | 'lg';
     className?: string;
+    accentColor?: FormColor;
 }
-declare function TabBar({ tabs, activeId, onSelect, onClose, variant, size, className, }: TabBarProps): react_jsx_runtime.JSX.Element;
+declare function TabBar({ tabs, activeId, onSelect, onClose, variant, size, className, accentColor: _accentColor, }: TabBarProps): react_jsx_runtime.JSX.Element;
 
 interface LayoutTab {
     id: string;
@@ -2514,8 +2594,9 @@ interface LayoutTabBarProps {
     onClose?: (id: string) => void;
     onReorder?: (fromIndex: number, toIndex: number) => void;
     className?: string;
+    accentColor?: FormColor;
 }
-declare function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className }: LayoutTabBarProps): react_jsx_runtime.JSX.Element;
+declare function LayoutTabBar({ tabs, activeId, onSelect, onClose, onReorder, className, accentColor: _accentColor }: LayoutTabBarProps): react_jsx_runtime.JSX.Element;
 
 interface NavCardProps {
     title: string;
@@ -2529,6 +2610,7 @@ interface NavCardProps {
     label?: {
         text: string;
         color: LabelColor;
+        icon?: IconName;
         tooltip: {
             description: string;
         };
@@ -2537,10 +2619,11 @@ interface NavCardProps {
     onClick?: () => void;
     disabled?: boolean;
     className?: string;
+    accentColor?: FormColor;
 }
-declare function NavCard({ title, description, icon, IconComponent, iconColor, label, stats, onClick, disabled, className, }: NavCardProps): react_jsx_runtime.JSX.Element;
+declare function NavCard({ title, description, icon, IconComponent, iconColor, label, stats, onClick, disabled, className, accentColor: _accentColor, }: NavCardProps): react_jsx_runtime.JSX.Element;
 
-interface ExtensionListCardProps {
+interface CapabilityListCardProps {
     /** Lucide icon component */
     icon: ElementType;
     /** Tailwind color class for icon (e.g. 'text-teal-400') */
@@ -2563,8 +2646,9 @@ interface ExtensionListCardProps {
     isInactive?: boolean;
     /** Test ID for E2E testing */
     testId?: string;
+    accentColor?: FormColor;
 }
-declare const ExtensionListCard: react.NamedExoticComponent<ExtensionListCardProps>;
+declare const CapabilityListCard: react.NamedExoticComponent<CapabilityListCardProps>;
 
 type StatusType = 'success' | 'warning' | 'error' | 'info' | 'neutral';
 interface StatusItem {
@@ -2582,10 +2666,10 @@ interface StatusCardProps {
         onClick: () => void;
     };
     className?: string;
+    accentColor?: FormColor;
 }
-declare function StatusCard({ title, icon, iconColor, items, action, className, }: StatusCardProps): react_jsx_runtime.JSX.Element;
+declare function StatusCard({ title, icon, iconColor, items, action, className, accentColor: accentColorProp, }: StatusCardProps): react_jsx_runtime.JSX.Element;
 
-/** Snapshot card with status stripe, stats grid, and sync/view actions. */
 type SnapshotStatus = 'synced' | 'pending' | 'conflict' | 'outdated';
 interface SnapshotCardProps {
     title: string;
@@ -2599,15 +2683,16 @@ interface SnapshotCardProps {
     onSync?: () => void;
     onView?: () => void;
     className?: string;
+    accentColor?: FormColor;
 }
-declare function SnapshotCard({ title, timestamp, status, description, stats, onSync, onView, className, }: SnapshotCardProps): react_jsx_runtime.JSX.Element;
+declare function SnapshotCard({ title, timestamp, status, description, stats, onSync, onView, className, accentColor: accentColorProp, }: SnapshotCardProps): react_jsx_runtime.JSX.Element;
 
 type ConsentChoice = 'accepted' | 'declined' | 'essential';
 interface CookieConsentProps {
     /** localStorage key used to persist the choice */
     storageKey: string;
     /** Accent color for the "Accept All" button (default: 'cyan') */
-    accentColor?: string;
+    accentColor?: FormColor;
     /** Heading text (default: 'We value your privacy') */
     heading?: string;
     /** Description text */
@@ -2617,6 +2702,69 @@ interface CookieConsentProps {
 }
 declare function CookieConsent({ storageKey, accentColor, heading, description, onConsent, }: CookieConsentProps): react_jsx_runtime.JSX.Element | null;
 
+interface ExplorerNode {
+    name: string;
+    path: string;
+    children: ExplorerNode[];
+    project?: {
+        id: string;
+        name: string;
+        path: string;
+        [key: string]: unknown;
+    };
+}
+interface ExplorerTopItem {
+    id: string;
+    icon: ReactNode;
+    label: string;
+    selected: boolean;
+    selectedClass: string;
+    onClick: () => void;
+    actions?: ReactNode;
+}
+interface ExplorerContextMenuInfo {
+    x: number;
+    y: number;
+    project: ExplorerNode['project'] | null;
+    nodeName: string;
+    nodePath: string;
+}
+interface ProjectExplorerProps {
+    tree: ExplorerNode[];
+    selectedProjectId: string | null;
+    onSelectProject: (id: string) => void;
+    topItems?: ExplorerTopItem[];
+    searchQuery: string;
+    onSearchChange: (query: string) => void;
+    collapsedPaths: string[];
+    onTogglePath: (path: string) => void;
+    expandablePaths: string[];
+    onExpandAll: () => void;
+    onCollapseAll: () => void;
+    width: number;
+    onWidthChange: (width: number) => void;
+    collapsed: boolean;
+    onToggleCollapsed: () => void;
+    onAddProject: () => void;
+    isAddingProject?: boolean;
+    onScanProjects?: () => void;
+    onMiddleClick?: (project: ExplorerNode['project']) => void;
+    renderProjectActions?: (project: ExplorerNode['project']) => ReactNode;
+    renderContextMenu?: (info: ExplorerContextMenuInfo, onClose: () => void) => ReactNode;
+    isProjectHighlighted?: (project: ExplorerNode['project']) => boolean;
+    accentColor?: FormColor;
+    emptyMessage?: string;
+    noMatchMessage?: string;
+}
+declare function buildExplorerTree<P extends {
+    id: string;
+    path: string;
+}>(projects: P[], isSpecial?: (p: P) => boolean): ExplorerNode[];
+declare function filterExplorerTree(nodes: ExplorerNode[], query: string): ExplorerNode[];
+declare function collectExplorerExpandablePaths(nodes: ExplorerNode[]): string[];
+declare function findPathToNode(nodes: ExplorerNode[], projectId: string): string[] | null;
+declare function ProjectExplorer({ tree, selectedProjectId, onSelectProject, topItems, searchQuery, onSearchChange, collapsedPaths, onTogglePath, expandablePaths, onExpandAll, onCollapseAll, width, onWidthChange, collapsed, onToggleCollapsed, onAddProject, isAddingProject, onScanProjects, onMiddleClick, renderProjectActions, renderContextMenu, isProjectHighlighted, accentColor: accentColorProp, emptyMessage, noMatchMessage, }: ProjectExplorerProps): react_jsx_runtime.JSX.Element;
+
 /**
  * Close a menu/dropdown when clicking outside its ref element(s).
  * Accepts a single ref, an array of refs, or null.
@@ -2631,6 +2779,21 @@ declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<
  */
 declare function useDropdownMaxHeight<T extends HTMLElement>(isOpen: boolean, margin?: number): react.RefObject<T | null>;
 
+interface PortalPosition {
+    top: number;
+    left: number;
+    minWidth: number;
+}
+/**
+ * Positions a portal-based dropdown menu below its trigger element.
+ * Returns a ref for the trigger container and computed position for the portal.
+ */
+declare function useDropdownPortal(isOpen: boolean, margin?: number): {
+    triggerRef: react.RefObject<HTMLDivElement | null>;
+    menuRef: react.RefObject<HTMLDivElement | null>;
+    position: PortalPosition;
+};
+
 /**
  * Shared modal behavior: Escape key to close + body overflow lock + focus trap.
  */
@@ -2672,7 +2835,7 @@ interface SettingRowToggle extends SettingRowBase {
     type: 'toggle';
     checked: boolean;
     onChange: (checked: boolean) => void;
-    color?: ToggleColor;
+    accentColor?: ToggleColor;
     size?: ToggleSize;
 }
 interface SettingRowSelect extends SettingRowBase {
@@ -2700,31 +2863,27 @@ interface SettingsCardProps {
     title?: string;
     description?: string;
     testId?: string;
+    accentColor?: FormColor;
 }
-declare function SettingsCard({ children, className, title, description, testId }: SettingsCardProps): react_jsx_runtime.JSX.Element;
+declare function SettingsCard({ children, className, title, description, testId, accentColor }: SettingsCardProps): react_jsx_runtime.JSX.Element;
 
 type SettingsInfoBoxColor = AccentColor;
 interface SettingsInfoBoxProps {
     children: React.ReactNode;
     color?: SettingsInfoBoxColor;
+    accentColor?: FormColor;
     className?: string;
     testId?: string;
 }
-declare function SettingsInfoBox({ children, color, className, testId }: SettingsInfoBoxProps): react_jsx_runtime.JSX.Element;
+declare function SettingsInfoBox({ children, color, accentColor, className, testId }: SettingsInfoBoxProps): react_jsx_runtime.JSX.Element;
 
-/**
- * SettingsSectionTitle - Section header for settings pages
- *
- * Used by:
- * - Settings pages - grouping related settings under a heading
- * - Configuration panels - section dividers
- */
 interface SettingsSectionTitleProps {
     children: React.ReactNode;
     className?: string;
     testId?: string;
+    accentColor?: FormColor;
 }
-declare function SettingsSectionTitle({ children, className, testId }: SettingsSectionTitleProps): react_jsx_runtime.JSX.Element;
+declare function SettingsSectionTitle({ children, className, testId, accentColor }: SettingsSectionTitleProps): react_jsx_runtime.JSX.Element;
 
 type SettingsTreeNode = {
     id: string;
@@ -2749,16 +2908,19 @@ interface SettingsPanelProps {
     selectedPath: string;
     onSelectPath: (path: string) => void;
     children: ReactNode;
+    accentColor?: FormColor;
 }
-declare function SettingsPanel({ tree, selectedPath, onSelectPath, children }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
+declare function SettingsPanel({ tree, selectedPath, onSelectPath, children, accentColor }: SettingsPanelProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsTreeNavProps {
     tree: SettingsTreeNode[];
     selectedPath: string;
     onSelectPath: (path: string) => void;
-    accentColor?: string;
+    accentColor?: FormColor;
+    className?: string;
+    searchPlaceholder?: string;
 }
-declare function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
+declare function SettingsTreeNav({ tree, selectedPath, onSelectPath, accentColor, className, searchPlaceholder }: SettingsTreeNavProps): react_jsx_runtime.JSX.Element;
 
 interface SettingsHeaderProps {
     description: string;
@@ -2773,6 +2935,83 @@ interface SettingsHeaderProps {
 }
 declare function SettingsHeader({ description, icon, onReset, resetTooltip, action, variant, }: SettingsHeaderProps): react_jsx_runtime.JSX.Element;
 
+interface DashboardItemStatus {
+    text: string;
+    color: LabelColor;
+    icon?: IconName;
+    tooltip?: {
+        title?: string;
+        description: string;
+    };
+    onClick?: () => void;
+}
+interface DashboardListItemProps {
+    /** 'overview' shows git provider + repo row, 'project' omits it */
+    variant?: 'overview' | 'project';
+    /** Git provider (overview variant only) */
+    gitProvider?: GitProviderKey;
+    onGitProviderClick?: () => void;
+    /** Repository name (overview variant only) */
+    repository?: string;
+    /** Suffix appended to repo (e.g. " #123") */
+    repositorySuffix?: string;
+    onRepositoryClick?: () => void;
+    /** Main title */
+    title: string;
+    onTitleClick?: () => void;
+    /** Status label displayed inline with the title */
+    status?: DashboardItemStatus;
+    /** Additional content after status label (extra labels, badges) */
+    extraLabels?: ReactNode;
+    /** Metadata row content (branch, time, stats) */
+    metadata?: ReactNode;
+    /** Right-side action buttons */
+    actions?: ReactNode;
+    className?: string;
+}
+declare function DashboardListItem({ variant, gitProvider, onGitProviderClick, repository, repositorySuffix, onRepositoryClick, title, onTitleClick, status, extraLabels, metadata, actions, className, }: DashboardListItemProps): react_jsx_runtime.JSX.Element;
+
+interface DashboardTab {
+    id: string;
+    label: string;
+    subtitle: string;
+    icon: ReactNode;
+    color: AccentColor;
+    tooltip?: {
+        title: string;
+        description: string;
+    };
+}
+interface DashboardPanelProps {
+    tabs: DashboardTab[];
+    activeTab: string;
+    onTabChange: (tabId: string) => void;
+    children: ReactNode;
+    className?: string;
+    /** Content rendered to the right of the tabs, vertically centered */
+    headerRight?: ReactNode;
+}
+interface DashboardFilterBarProps {
+    /** Left-side search (typically an Input component) */
+    search: ReactNode;
+    /** Right-side filters and action buttons */
+    filters?: ReactNode;
+}
+interface DashboardListProps {
+    children?: ReactNode;
+    /** When true, renders the empty state instead of children */
+    isEmpty?: boolean;
+    /** Icon shown in the empty state */
+    emptyIcon?: ReactNode;
+    /** Primary empty state text */
+    emptyTitle?: string;
+    /** Secondary empty state text */
+    emptyDescription?: string;
+}
+declare function DashboardPanel({ tabs, activeTab, onTabChange, children, className, headerRight, }: DashboardPanelProps): react_jsx_runtime.JSX.Element;
+declare function DashboardFilterBar({ search, filters }: DashboardFilterBarProps): react_jsx_runtime.JSX.Element;
+declare function DashboardList({ children, isEmpty, emptyIcon, emptyTitle, emptyDescription, }: DashboardListProps): react_jsx_runtime.JSX.Element;
+
 declare function cn(...inputs: ClassValue[]): string;
 
-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 };
+export { ACCENT_DEFS, ACCENT_ICON, ACCENT_NAV, ACCENT_TEXT, type AccentColor, AccentColorProvider, type AccentDef, ActionDialog, type ActionDialogProps, type ActionItem, type AgentDetectionResult, type AgentPathsApi, AgentPathsPanel, type AgentPathsPanelProps, AiActionButton, type AiActionButtonProps, type AiActionStatus, type AiCompletionResult, AiExecutionActionButtons, type AiExecutionActionButtonsProps, AlertModal, type AlertModalProps, BASE_THEMES, Badge, type BadgeColor, type BadgeProps, BottomPanelHeader, type BottomPanelHeaderProps, Breadcrumb, type BreadcrumbProps, type BreadcrumbSegment, CODING_AGENT_LOGOS, CODING_AGENT_NAMES, CUSTOM_ICON_NAMES, CapabilityListCard, type CapabilityListCardProps, type CapabilitySource, type CapturedError, type CapturedIssuesApi, CapturedIssuesPanel, type CapturedIssuesPanelProps, type ChangedComponents, Checkbox, type CheckboxColor, type CheckboxProps, type CheckboxSize, type CheckboxVariant, type CodingAgentConfig, CodingAgentIcon, type CodingAgentKey, 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, CustomIcon, type CustomIconKey, DARK_THEMES, DEFAULT_DIMS, DEFAULT_OUTLINE, DashboardFilterBar, type DashboardFilterBarProps, type DashboardItemStatus, DashboardList, DashboardListItem, type DashboardListItemProps, type DashboardListProps, DashboardPanel, type DashboardPanelProps, type DashboardTab, 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, type ExplorerContextMenuInfo, type ExplorerNode, type ExplorerTopItem, FORM_COLORS, 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, GIT_PROVIDER_NAMES, GitProviderIcon, type GitProviderKey, 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, ProjectExplorer, type ProjectExplorerProps, 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 ToolTab, type ToolrAppId, ToolrAppLogo, Tooltip, type TooltipAlign, TooltipButton, type TooltipContent, type TooltipPosition, type TrackedError, type UseAgentPathsOptions, type UseAgentPathsReturn, type UseCapturedIssuesOptions, type UseCapturedIssuesReturn, type UseGoldenSyncOptions, type UseGoldenSyncReturn, type UseNavigationHistoryReturn, type UseReportBugOptions, type UseReportBugReturn, type UseResizableSidebarOptions, type UseSnapshotBrowserOptions, type UseSnapshotBrowserReturn, type UseSnippetsEditorOptions, type UseSnippetsEditorReturn, VersionManager, type VersionManagerProps, applyTheme, buildExplorerTree, cn, collectAllFolderPaths, collectDirPaths, collectExpandablePaths, collectExplorerExpandablePaths, countFiles, countFolders, createErrorLogger, filterExplorerTree, filterTree, findNodeByPath, findPathToNode, formatBytes, formatDate, generateScale, getAllLeafPaths, getBreadcrumbFromPath, getLanguage, getLanguageFromPath, getParentPaths, hslToHex, iconMap, isLeafNode, isLightTheme, resolveAccentHex, satCurve, smartCapitalize, submitIssueReport, useAccentColor, useAgentPaths, useCapturedIssues, useClickOutside, useDropdownMaxHeight, useDropdownPortal, useGoldenSync, useModalBehavior, useNavigationHistory, useReportBug, useResizableSidebar, useSnapshotBrowser, useSnippetsEditor };