sitepaige-mcp-server 1.2.5 → 1.2.6

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 (3) hide show
  1. package/components/slideshow.tsx +40 -34
  2. package/dist/components/slideshow.tsx +40 -34
  3. package/package.json +2 -1
package/components/slideshow.tsx CHANGED
@@ -79,7 +79,8 @@ export default function Slideshow({
79
79
  if (!images || images.length === 0) {
80
80
  return (
81
81
  <div
82
- className="relative w-full flex items-center justify-center bg-black rounded-lg"
82
+ className="relative h-full w-full flex items-center justify-center bg-black rounded-lg"
83
+ style={{ minHeight: height || 400 }}
83
84
  >
84
85
  <p className="text-gray-400">No images in slideshow</p>
85
86
  </div>
@@ -97,18 +98,21 @@ export default function Slideshow({
97
98
 
98
99
  return (
99
100
  <div
100
- className="relative w-full overflow-hidden rounded-lg bg-black"
101
- onMouseEnter={() => setIsHovered(true)}
102
- onMouseLeave={() => setIsHovered(false)}
101
+ className="relative h-full w-full overflow-hidden rounded-lg bg-black"
102
+ style={{ minHeight: height || 400 }}
103
103
  >
104
104
  {/* Main image display */}
105
- <div className="flex items-center justify-center">
105
+ <div
106
+ className="relative w-full h-full flex items-center justify-center"
107
+ onMouseEnter={() => setIsHovered(true)}
108
+ onMouseLeave={() => setIsHovered(false)}
109
+ >
106
110
  {animationType === 'fade' ? (
107
111
  // Fade animation - render all images with opacity transitions
108
112
  images.map((imageId, index) => (
109
113
  <div
110
114
  key={imageId}
111
- className={`absolute inset-0 flex items-center justify-center transition-opacity duration-1000 ${
115
+ className={`absolute inset-0 flex items-center justify-center transition-opacity duration-1000 pointer-events-none ${
112
116
  index === currentIndex ? 'opacity-100' : 'opacity-0'
113
117
  }`}
114
118
  >
@@ -120,7 +124,7 @@ export default function Slideshow({
120
124
  <img
121
125
  src={getImageSrc(imageId)}
122
126
  alt={`Slide ${index + 1}`}
123
- className="w-full h-full object-cover"
127
+ className="w-full h-full object-cover pointer-events-none"
124
128
  onError={() => {
125
129
  setImageLoadErrors(prev => ({ ...prev, [imageId]: true }));
126
130
  }}
@@ -138,39 +142,43 @@ export default function Slideshow({
138
142
  <img
139
143
  src={getImageSrc(currentImageId)}
140
144
  alt={`Slide ${currentIndex + 1}`}
141
- className="w-full h-full object-cover"
145
+ className="w-full h-full object-cover pointer-events-none"
142
146
  onError={() => {
143
147
  setImageLoadErrors(prev => ({ ...prev, [currentImageId]: true }));
144
148
  }}
145
149
  />
146
150
  )
147
151
  )}
152
+
153
+ {/* Gradient overlay for better text visibility */}
154
+ <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent pointer-events-none" />
155
+
156
+ {/* Navigation arrows - only show if more than one image */}
157
+ {images.length > 1 && isHovered && (
158
+ <>
159
+ <button
160
+ onClick={handlePrevious}
161
+ className={`absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 backdrop-blur-sm border-2 border-white text-white transition-all duration-200 transform hover:scale-110 ${
162
+ isHovered ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
163
+ }`}
164
+ aria-label="Previous slide"
165
+ >
166
+ <ChevronLeft className="w-6 h-6" />
167
+ </button>
168
+
169
+ <button
170
+ onClick={handleNext}
171
+ className={`absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 backdrop-blur-sm border-2 border-white text-white transition-all duration-200 transform hover:scale-110 ${
172
+ isHovered ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
173
+ }`}
174
+ aria-label="Next slide"
175
+ >
176
+ <ChevronRight className="w-6 h-6" />
177
+ </button>
178
+ </>
179
+ )}
148
180
  </div>
149
181
 
150
- {/* Gradient overlay for better text visibility */}
151
- <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent pointer-events-none" />
152
-
153
- {/* Navigation arrows - only show if more than one image and on hover */}
154
- {images.length > 1 && isHovered && (
155
- <>
156
- <button
157
- onClick={handlePrevious}
158
- className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full !bg-transparent border-2 border-white text-white transition-all duration-200 transform hover:scale-110"
159
- aria-label="Previous slide"
160
- >
161
- <ChevronLeft className="w-6 h-6" />
162
- </button>
163
-
164
- <button
165
- onClick={handleNext}
166
- className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full !bg-transparent border-2 border-white text-white transition-all duration-200 transform hover:scale-110"
167
- aria-label="Next slide"
168
- >
169
- <ChevronRight className="w-6 h-6" />
170
- </button>
171
- </>
172
- )}
173
-
174
182
  {/* Slide indicators */}
175
183
  {images.length > 1 && (
176
184
  <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
@@ -188,8 +196,6 @@ export default function Slideshow({
188
196
  ))}
189
197
  </div>
190
198
  )}
191
-
192
-
193
199
  </div>
194
200
  );
195
201
  }
package/dist/components/slideshow.tsx CHANGED
@@ -79,7 +79,8 @@ export default function Slideshow({
79
79
  if (!images || images.length === 0) {
80
80
  return (
81
81
  <div
82
- className="relative w-full flex items-center justify-center bg-black rounded-lg"
82
+ className="relative h-full w-full flex items-center justify-center bg-black rounded-lg"
83
+ style={{ minHeight: height || 400 }}
83
84
  >
84
85
  <p className="text-gray-400">No images in slideshow</p>
85
86
  </div>
@@ -97,18 +98,21 @@ export default function Slideshow({
97
98
 
98
99
  return (
99
100
  <div
100
- className="relative w-full overflow-hidden rounded-lg bg-black"
101
- onMouseEnter={() => setIsHovered(true)}
102
- onMouseLeave={() => setIsHovered(false)}
101
+ className="relative h-full w-full overflow-hidden rounded-lg bg-black"
102
+ style={{ minHeight: height || 400 }}
103
103
  >
104
104
  {/* Main image display */}
105
- <div className="flex items-center justify-center">
105
+ <div
106
+ className="relative w-full h-full flex items-center justify-center"
107
+ onMouseEnter={() => setIsHovered(true)}
108
+ onMouseLeave={() => setIsHovered(false)}
109
+ >
106
110
  {animationType === 'fade' ? (
107
111
  // Fade animation - render all images with opacity transitions
108
112
  images.map((imageId, index) => (
109
113
  <div
110
114
  key={imageId}
111
- className={`absolute inset-0 flex items-center justify-center transition-opacity duration-1000 ${
115
+ className={`absolute inset-0 flex items-center justify-center transition-opacity duration-1000 pointer-events-none ${
112
116
  index === currentIndex ? 'opacity-100' : 'opacity-0'
113
117
  }`}
114
118
  >
@@ -120,7 +124,7 @@ export default function Slideshow({
120
124
  <img
121
125
  src={getImageSrc(imageId)}
122
126
  alt={`Slide ${index + 1}`}
123
- className="w-full h-full object-cover"
127
+ className="w-full h-full object-cover pointer-events-none"
124
128
  onError={() => {
125
129
  setImageLoadErrors(prev => ({ ...prev, [imageId]: true }));
126
130
  }}
@@ -138,39 +142,43 @@ export default function Slideshow({
138
142
  <img
139
143
  src={getImageSrc(currentImageId)}
140
144
  alt={`Slide ${currentIndex + 1}`}
141
- className="w-full h-full object-cover"
145
+ className="w-full h-full object-cover pointer-events-none"
142
146
  onError={() => {
143
147
  setImageLoadErrors(prev => ({ ...prev, [currentImageId]: true }));
144
148
  }}
145
149
  />
146
150
  )
147
151
  )}
152
+
153
+ {/* Gradient overlay for better text visibility */}
154
+ <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent pointer-events-none" />
155
+
156
+ {/* Navigation arrows - only show if more than one image */}
157
+ {images.length > 1 && isHovered && (
158
+ <>
159
+ <button
160
+ onClick={handlePrevious}
161
+ className={`absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 backdrop-blur-sm border-2 border-white text-white transition-all duration-200 transform hover:scale-110 ${
162
+ isHovered ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
163
+ }`}
164
+ aria-label="Previous slide"
165
+ >
166
+ <ChevronLeft className="w-6 h-6" />
167
+ </button>
168
+
169
+ <button
170
+ onClick={handleNext}
171
+ className={`absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full bg-black/50 backdrop-blur-sm border-2 border-white text-white transition-all duration-200 transform hover:scale-110 ${
172
+ isHovered ? 'opacity-100 pointer-events-auto' : 'opacity-0 pointer-events-none'
173
+ }`}
174
+ aria-label="Next slide"
175
+ >
176
+ <ChevronRight className="w-6 h-6" />
177
+ </button>
178
+ </>
179
+ )}
148
180
  </div>
149
181
 
150
- {/* Gradient overlay for better text visibility */}
151
- <div className="absolute inset-0 bg-gradient-to-t from-black/30 to-transparent pointer-events-none" />
152
-
153
- {/* Navigation arrows - only show if more than one image and on hover */}
154
- {images.length > 1 && isHovered && (
155
- <>
156
- <button
157
- onClick={handlePrevious}
158
- className="absolute left-4 top-1/2 -translate-y-1/2 p-2 rounded-full !bg-transparent border-2 border-white text-white transition-all duration-200 transform hover:scale-110"
159
- aria-label="Previous slide"
160
- >
161
- <ChevronLeft className="w-6 h-6" />
162
- </button>
163
-
164
- <button
165
- onClick={handleNext}
166
- className="absolute right-4 top-1/2 -translate-y-1/2 p-2 rounded-full !bg-transparent border-2 border-white text-white transition-all duration-200 transform hover:scale-110"
167
- aria-label="Next slide"
168
- >
169
- <ChevronRight className="w-6 h-6" />
170
- </button>
171
- </>
172
- )}
173
-
174
182
  {/* Slide indicators */}
175
183
  {images.length > 1 && (
176
184
  <div className="absolute bottom-4 left-1/2 -translate-x-1/2 flex gap-2">
@@ -188,8 +196,6 @@ export default function Slideshow({
188
196
  ))}
189
197
  </div>
190
198
  )}
191
-
192
-
193
199
  </div>
194
200
  );
195
201
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sitepaige-mcp-server",
3
- "version": "1.2.5",
3
+ "version": "1.2.6",
4
4
  "type": "module",
5
5
  "description": "MCP server for generating web applications using SitePaige AI. Generate frontend (FREE/12 credits) then optionally add backend (50 credits)",
6
6
  "keywords": [
@@ -56,6 +56,7 @@
56
56
  "@babel/types": "^7.28.4",
57
57
  "@bragdoc/cli": "^1.3.1",
58
58
  "@modelcontextprotocol/sdk": "^1.17.5",
59
+ "lucide-react": "^0.554.0",
59
60
  "undici": "^6.19.8",
60
61
  "zod": "^3.23.8"
61
62
  },