version-pill-react 1.2.3 → 1.2.5

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.
package/dist/index.js CHANGED
@@ -295,7 +295,10 @@ function VersionPill({
295
295
  }
296
296
  );
297
297
  };
298
- const groupedTasks = (roadmapTasks || []).reduce((acc, task) => {
298
+ const versionsArray = Array.isArray(versions) ? versions : [];
299
+ const tasksArray = Array.isArray(roadmapTasks) ? roadmapTasks : [];
300
+ const ideasArray = Array.isArray(ideas) ? ideas : [];
301
+ const groupedTasks = tasksArray.reduce((acc, task) => {
299
302
  const col = task.column || "backlog";
300
303
  if (!acc[col]) acc[col] = [];
301
304
  acc[col].push(task);
@@ -310,7 +313,7 @@ function VersionPill({
310
313
  display: "flex",
311
314
  alignItems: "center",
312
315
  justifyContent: "center",
313
- padding: 16
316
+ padding: 20
314
317
  }, children: [
315
318
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
316
319
  "div",
@@ -319,8 +322,9 @@ function VersionPill({
319
322
  style: {
320
323
  position: "absolute",
321
324
  inset: 0,
322
- background: "rgba(0,0,0,0.5)",
323
- backdropFilter: "blur(4px)"
325
+ background: isLight ? "rgba(0,0,0,0.4)" : "rgba(0,0,0,0.6)",
326
+ backdropFilter: "blur(4px)",
327
+ WebkitBackdropFilter: "blur(4px)"
324
328
  }
325
329
  }
326
330
  ),
@@ -329,31 +333,34 @@ function VersionPill({
329
333
  {
330
334
  style: {
331
335
  position: "relative",
336
+ display: "flex",
337
+ flexDirection: "column",
332
338
  width: "100%",
333
- maxWidth: 480,
334
- maxHeight: "80vh",
335
- overflow: "hidden",
336
- borderRadius: 16,
337
- boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)",
338
- background: isLight ? "#fff" : "#18181b"
339
+ maxWidth: 420,
340
+ maxHeight: "min(500px, 80vh)",
341
+ borderRadius: 12,
342
+ boxShadow: isLight ? "0 20px 40px -10px rgba(0,0,0,0.15), 0 0 0 1px rgba(0,0,0,0.05)" : "0 20px 40px -10px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1)",
343
+ background: isLight ? "#fff" : "#1a1a1a",
344
+ overflow: "hidden"
339
345
  },
340
346
  children: [
341
347
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
342
348
  "div",
343
349
  {
344
350
  style: {
345
- padding: 16,
346
- borderBottom: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`,
351
+ flexShrink: 0,
352
+ padding: "14px 16px",
353
+ borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
347
354
  display: "flex",
348
355
  alignItems: "center",
349
356
  justifyContent: "space-between"
350
357
  },
351
358
  children: [
352
359
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
353
- project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 20 }, children: project.icon }),
360
+ project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 18 }, children: project.icon }),
354
361
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
355
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
356
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
362
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, fontSize: 15, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
363
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 11, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
357
364
  "v",
358
365
  currentVersion
359
366
  ] })
@@ -364,14 +371,21 @@ function VersionPill({
364
371
  {
365
372
  onClick: () => setIsOpen(false),
366
373
  style: {
367
- padding: 4,
374
+ width: 28,
375
+ height: 28,
376
+ display: "flex",
377
+ alignItems: "center",
378
+ justifyContent: "center",
368
379
  borderRadius: 6,
369
- background: "transparent",
380
+ background: isLight ? "#f5f5f5" : "#2a2a2a",
370
381
  border: "none",
371
382
  cursor: "pointer",
372
- color: isLight ? "#71717a" : "#a1a1aa"
383
+ color: isLight ? "#71717a" : "#a1a1aa",
384
+ transition: "background 150ms"
373
385
  },
374
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
386
+ onMouseEnter: (e) => e.currentTarget.style.background = isLight ? "#e5e5e5" : "#3a3a3a",
387
+ onMouseLeave: (e) => e.currentTarget.style.background = isLight ? "#f5f5f5" : "#2a2a2a",
388
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6L6 18M6 6l12 12" }) })
375
389
  }
376
390
  )
377
391
  ]
@@ -381,125 +395,142 @@ function VersionPill({
381
395
  "div",
382
396
  {
383
397
  style: {
398
+ flexShrink: 0,
384
399
  display: "flex",
385
- gap: 4,
386
- padding: "8px 16px",
387
- borderBottom: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`
400
+ gap: 2,
401
+ padding: "8px 12px",
402
+ borderBottom: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
403
+ background: isLight ? "#fafafa" : "#151515"
388
404
  },
389
405
  children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
390
406
  "button",
391
407
  {
392
408
  onClick: () => setActiveTab(tab),
393
409
  style: {
394
- padding: "6px 12px",
410
+ padding: "6px 10px",
395
411
  borderRadius: 6,
396
412
  border: "none",
397
413
  cursor: "pointer",
398
- fontSize: 13,
414
+ fontSize: 12,
399
415
  fontWeight: 500,
400
- background: activeTab === tab ? isLight ? "#f4f4f5" : "#27272a" : "transparent",
401
- color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#a1a1aa"
416
+ background: activeTab === tab ? isLight ? "#fff" : "#2a2a2a" : "transparent",
417
+ color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#71717a",
418
+ boxShadow: activeTab === tab ? isLight ? "0 1px 2px rgba(0,0,0,0.05)" : "0 1px 2px rgba(0,0,0,0.2)" : "none",
419
+ transition: "all 150ms"
402
420
  },
403
421
  children: [
404
- tab === "changelog" && "\u{1F680} Changelog",
405
- tab === "roadmap" && "\u{1F5FA}\uFE0F Roadmap",
406
- tab === "ideas" && "\u{1F4A1} Ideas"
422
+ tab === "changelog" && "Changelog",
423
+ tab === "roadmap" && "Roadmap",
424
+ tab === "ideas" && "Ideas"
407
425
  ]
408
426
  },
409
427
  tab
410
428
  ))
411
429
  }
412
430
  ),
413
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, overflowY: "auto", maxHeight: "50vh" }, children: [
414
- activeTab === "changelog" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: versions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
415
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F680}" }),
416
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No releases yet" })
417
- ] }) : versions.slice(0, 5).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 16, paddingBottom: 16, borderBottom: idx < 4 ? `1px solid ${isLight ? "#f4f4f5" : "#27272a"}` : "none" }, children: [
418
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
419
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 16 }, children: version.emoji || "\u{1F4E6}" }),
420
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
431
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, overflowY: "auto", padding: 12, minHeight: 0 }, children: [
432
+ activeTab === "changelog" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: versionsArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
433
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F680}" }),
434
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No releases yet" })
435
+ ] }) : versionsArray.slice(0, 5).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12, paddingBottom: 12, borderBottom: idx < versionsArray.length - 1 && idx < 4 ? `1px solid ${isLight ? "#f0f0f0" : "#252525"}` : "none" }, children: [
436
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6, marginBottom: 3 }, children: [
437
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14 }, children: version.emoji || "\u{1F4E6}" }),
438
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, fontSize: 13, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
421
439
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
422
440
  "span",
423
441
  {
424
442
  style: {
425
- padding: "2px 6px",
426
- fontSize: 10,
443
+ padding: "1px 5px",
444
+ fontSize: 9,
427
445
  fontWeight: 500,
428
- borderRadius: 4,
429
- background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : "#f4f4f5",
430
- color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : "#52525b"
446
+ borderRadius: 3,
447
+ background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : isLight ? "#f4f4f5" : "#2a2a2a",
448
+ color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : isLight ? "#52525b" : "#a1a1aa"
431
449
  },
432
450
  children: version.type
433
451
  }
434
452
  )
435
453
  ] }),
436
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", marginBottom: 8 }, children: [
454
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", marginBottom: 6 }, children: [
437
455
  "v",
438
456
  version.version,
439
457
  " \xB7 ",
440
458
  new Date(version.date).toLocaleDateString()
441
459
  ] }),
442
- version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 14, color: isLight ? "#52525b" : "#d4d4d8", marginBottom: 8 }, children: version.description }),
443
- version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: version.features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { display: "flex", alignItems: "flex-start", gap: 8, fontSize: 14, color: isLight ? "#52525b" : "#d4d4d8", marginBottom: 4 }, children: [
444
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", marginTop: 2 }, children: "\u2713" }),
445
- feature
446
- ] }, i)) })
460
+ version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", margin: "0 0 6px 0", lineHeight: 1.5 }, children: version.description }),
461
+ version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { style: { margin: 0, paddingLeft: 0, listStyle: "none" }, children: [
462
+ version.features.slice(0, 4).map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { display: "flex", alignItems: "flex-start", gap: 6, fontSize: 12, color: isLight ? "#52525b" : "#a1a1aa", marginBottom: 2, lineHeight: 1.4 }, children: [
463
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", fontSize: 11 }, children: "\u2713" }),
464
+ feature
465
+ ] }, i)),
466
+ version.features.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { style: { fontSize: 11, color: isLight ? "#a1a1aa" : "#525252", marginTop: 2 }, children: [
467
+ "+",
468
+ version.features.length - 4,
469
+ " more..."
470
+ ] })
471
+ ] })
447
472
  ] }, idx)) }),
448
- activeTab === "roadmap" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
449
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F5FA}\uFE0F" }),
450
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No public roadmap items" })
451
- ] }) : ["in-progress", "todo", "backlog", "done"].map((col) => {
473
+ activeTab === "roadmap" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: Object.keys(groupedTasks).length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
474
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F5FA}\uFE0F" }),
475
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No public roadmap items" })
476
+ ] }) : ["in-progress", "todo", "backlog"].map((col) => {
452
477
  const tasks = groupedTasks[col];
453
478
  if (!tasks || tasks.length === 0) return null;
454
- return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 16 }, children: [
455
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#71717a" : "#a1a1aa", marginBottom: 8, textTransform: "uppercase" }, children: [
479
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 12 }, children: [
480
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 10, fontWeight: 600, color: isLight ? "#a1a1aa" : "#71717a", marginBottom: 6, textTransform: "uppercase", letterSpacing: "0.5px" }, children: [
456
481
  COLUMN_LABELS[col] || col,
457
482
  " (",
458
483
  tasks.length,
459
484
  ")"
460
485
  ] }),
461
- tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
486
+ tasks.slice(0, 4).map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
462
487
  "div",
463
488
  {
464
489
  style: {
465
- padding: 12,
466
- marginBottom: 8,
467
- borderRadius: 8,
468
- background: isLight ? "#f4f4f5" : "#27272a"
490
+ padding: "8px 10px",
491
+ marginBottom: 4,
492
+ borderRadius: 5,
493
+ background: isLight ? "#f5f5f5" : "#252525"
469
494
  },
470
- children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
495
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
471
496
  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
472
497
  "span",
473
498
  {
474
499
  style: {
475
- width: 8,
476
- height: 8,
500
+ width: 6,
501
+ height: 6,
477
502
  borderRadius: "50%",
478
- background: TYPE_COLORS[task.type] || "#71717a"
503
+ background: TYPE_COLORS[task.type] || "#71717a",
504
+ flexShrink: 0
479
505
  }
480
506
  }
481
507
  ),
482
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, color: isLight ? "#18181b" : "#fff" }, children: task.title })
508
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, color: isLight ? "#18181b" : "#fff", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: task.title })
483
509
  ] })
484
510
  },
485
511
  task.id
486
- ))
512
+ )),
513
+ tasks.length > 4 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", marginTop: 4 }, children: [
514
+ "+",
515
+ tasks.length - 4,
516
+ " more..."
517
+ ] })
487
518
  ] }, col);
488
519
  }) }),
489
- activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: ideas.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
490
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F4A1}" }),
491
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No feature requests yet" })
492
- ] }) : ideas.map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
520
+ activeTab === "ideas" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: ideasArray.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 30, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
521
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 24, marginBottom: 6 }, children: "\u{1F4A1}" }),
522
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 13 }, children: "No feature requests yet" })
523
+ ] }) : ideasArray.slice(0, 5).map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
493
524
  "div",
494
525
  {
495
526
  style: {
496
- padding: 12,
497
- marginBottom: 8,
498
- borderRadius: 8,
499
- background: isLight ? "#f4f4f5" : "#27272a",
527
+ padding: 10,
528
+ marginBottom: 6,
529
+ borderRadius: 6,
530
+ background: isLight ? "#f5f5f5" : "#252525",
500
531
  display: "flex",
501
532
  alignItems: "flex-start",
502
- gap: 12
533
+ gap: 10
503
534
  },
504
535
  children: [
505
536
  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
@@ -509,23 +540,20 @@ function VersionPill({
509
540
  display: "flex",
510
541
  flexDirection: "column",
511
542
  alignItems: "center",
512
- padding: "4px 8px",
513
- borderRadius: 6,
514
- background: isLight ? "#fff" : "#18181b",
515
- minWidth: 40
543
+ padding: "3px 6px",
544
+ borderRadius: 4,
545
+ background: isLight ? "#fff" : "#1a1a1a",
546
+ minWidth: 32
516
547
  },
517
548
  children: [
518
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
519
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 10, color: isLight ? "#71717a" : "#a1a1aa" }, children: "votes" })
549
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
550
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 9, color: isLight ? "#71717a" : "#71717a" }, children: "votes" })
520
551
  ]
521
552
  }
522
553
  ),
523
- /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
524
- /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 4 }, children: idea.title }),
525
- idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 13, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
526
- idea.description.slice(0, 100),
527
- "..."
528
- ] })
554
+ /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
555
+ /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 12, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 2 }, children: idea.title }),
556
+ idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 11, color: isLight ? "#71717a" : "#71717a", overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }, children: idea.description.slice(0, 80) })
529
557
  ] })
530
558
  ]
531
559
  },
@@ -536,9 +564,10 @@ function VersionPill({
536
564
  "div",
537
565
  {
538
566
  style: {
539
- padding: 12,
540
- borderTop: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`,
541
- background: isLight ? "#fafafa" : "#0a0a0a",
567
+ flexShrink: 0,
568
+ padding: "10px 12px",
569
+ borderTop: `1px solid ${isLight ? "#e5e5e5" : "#2a2a2a"}`,
570
+ background: isLight ? "#fafafa" : "#151515",
542
571
  display: "flex",
543
572
  alignItems: "center",
544
573
  justifyContent: "space-between"
@@ -550,7 +579,7 @@ function VersionPill({
550
579
  href: "https://versionpill.com",
551
580
  target: "_blank",
552
581
  rel: "noopener noreferrer",
553
- style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#52525b", textDecoration: "none" },
582
+ style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#525252", textDecoration: "none" },
554
583
  children: "Powered by Version Pill"
555
584
  }
556
585
  ),
@@ -561,14 +590,17 @@ function VersionPill({
561
590
  target: "_blank",
562
591
  rel: "noopener noreferrer",
563
592
  style: {
564
- padding: "6px 12px",
565
- fontSize: 12,
593
+ padding: "5px 10px",
594
+ fontSize: 11,
566
595
  fontWeight: 500,
567
- borderRadius: 6,
596
+ borderRadius: 5,
568
597
  background: "#22c55e",
569
598
  color: "#fff",
570
- textDecoration: "none"
599
+ textDecoration: "none",
600
+ transition: "background 150ms"
571
601
  },
602
+ onMouseEnter: (e) => e.currentTarget.style.background = "#16a34a",
603
+ onMouseLeave: (e) => e.currentTarget.style.background = "#22c55e",
572
604
  children: "View All \u2192"
573
605
  }
574
606
  )