version-pill-react 1.1.1 → 1.2.1

package/dist/index.js

@@ -70,39 +70,17 @@ var SIZE_CONFIG = {
   md: { height: 26, padding: "0 10px", gap: 5, font: 11, dotSize: 6 },
   lg: { height: 30, padding: "0 12px", gap: 6, font: 12, dotSize: 7 }
 };
-var styles = {
-  pill: `
-    inline-flex items-center gap-1.5 px-2.5 py-1
-    text-xs font-medium rounded-full cursor-pointer
-    transition-all duration-200 select-none
-    border shadow-sm hover:shadow-md
-  `,
-  pillLight: `bg-white text-gray-700 border-gray-200 hover:border-gray-300`,
-  pillDark: `bg-gray-900 text-gray-100 border-gray-700 hover:border-gray-600`,
-  modal: `fixed inset-0 z-[99999] flex items-center justify-center p-4`,
-  backdrop: `absolute inset-0 bg-black/50 backdrop-blur-sm`,
-  panel: `relative w-full max-w-md max-h-[80vh] overflow-hidden rounded-xl shadow-2xl`,
-  panelLight: `bg-white`,
-  panelDark: `bg-gray-900`,
-  header: `p-4 border-b flex items-center justify-between`,
-  headerLight: `border-gray-100`,
-  headerDark: `border-gray-800`,
-  content: `p-4 overflow-y-auto max-h-[60vh]`,
-  version: `mb-4 last:mb-0`,
-  versionHeader: `flex items-center gap-2 mb-2`,
-  versionTitle: `font-semibold`,
-  versionBadge: `px-1.5 py-0.5 text-[10px] font-medium rounded`,
-  versionFeatures: `space-y-1 mt-2`,
-  versionFeature: `flex items-start gap-2 text-sm`,
-  footer: `p-3 border-t flex items-center justify-between`,
-  footerLight: `border-gray-100 bg-gray-50`,
-  footerDark: `border-gray-800 bg-gray-950`,
-  button: `px-3 py-1.5 text-xs font-medium rounded-lg transition-colors`,
-  buttonPrimary: `bg-blue-600 text-white hover:bg-blue-700`,
-  buttonSecondary: `text-gray-500 hover:text-gray-700`,
-  branding: `text-[10px] opacity-40 flex items-center gap-1`,
-  newDot: `w-2 h-2 rounded-full bg-green-500 animate-pulse`,
-  iframe: `w-full border-0`
+var TYPE_COLORS = {
+  feature: "#a855f7",
+  bug: "#ef4444",
+  improvement: "#3b82f6",
+  chore: "#71717a"
+};
+var COLUMN_LABELS = {
+  backlog: "Backlog",
+  todo: "Planned",
+  "in-progress": "In Progress",
+  done: "Shipped"
 };
 function useTheme(theme) {
   const [resolved, setResolved] = (0, import_react.useState)("light");
@@ -126,7 +104,7 @@ function VersionPill({
   position = "inline",
   className,
   theme = "auto",
-  style = "dot",
+  style = "gradient",
   size = "md",
   showBranding = true,
   accent = "green",
@@ -135,13 +113,14 @@ function VersionPill({
 }) {
   const [project, setProject] = (0, import_react.useState)(null);
   const [versions, setVersions] = (0, import_react.useState)([]);
+  const [roadmapTasks, setRoadmapTasks] = (0, import_react.useState)([]);
+  const [ideas, setIdeas] = (0, import_react.useState)([]);
   const [loading, setLoading] = (0, import_react.useState)(true);
-  const [error, setError] = (0, import_react.useState)(null);
   const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [activeTab, setActiveTab] = (0, import_react.useState)("changelog");
   const [hasNewVersion, setHasNewVersion] = (0, import_react.useState)(false);
   const resolvedTheme = useTheme(theme);
   const isLight = resolvedTheme === "light";
-  const colors = ACCENT_COLORS[accent][isLight ? "light" : "dark"];
   const sizeConfig = SIZE_CONFIG[size];
   const fetchVersion = (0, import_react.useCallback)(async () => {
     try {
@@ -156,7 +135,7 @@ function VersionPill({
         }
       }
     } catch (err) {
-      setError(err.message);
+      console.error("Failed to fetch version:", err);
     } finally {
       setLoading(false);
     }
@@ -164,7 +143,7 @@ function VersionPill({
   const fetchChangelog = (0, import_react.useCallback)(async () => {
     try {
       const response = await fetch(`${baseUrl}/api/changelog/${projectId}?limit=10`);
-      if (!response.ok) throw new Error("Failed to fetch changelog");
+      if (!response.ok) return;
       const data = await response.json();
       setVersions(data.changelog);
       setProject(data.project);
@@ -179,6 +158,26 @@ function VersionPill({
       console.error("Failed to fetch changelog:", err);
     }
   }, [projectId, baseUrl, onNewVersion]);
+  const fetchRoadmap = (0, import_react.useCallback)(async () => {
+    try {
+      const response = await fetch(`${baseUrl}/api/roadmap/${projectId}`);
+      if (!response.ok) return;
+      const data = await response.json();
+      setRoadmapTasks(data.tasks || []);
+    } catch (err) {
+      console.error("Failed to fetch roadmap:", err);
+    }
+  }, [projectId, baseUrl]);
+  const fetchIdeas = (0, import_react.useCallback)(async () => {
+    try {
+      const response = await fetch(`${baseUrl}/api/ideas/${projectId}`);
+      if (!response.ok) return;
+      const data = await response.json();
+      setIdeas(data.ideas || []);
+    } catch (err) {
+      console.error("Failed to fetch ideas:", err);
+    }
+  }, [projectId, baseUrl]);
   (0, import_react.useEffect)(() => {
     fetchVersion();
   }, [fetchVersion]);
@@ -189,6 +188,8 @@ function VersionPill({
     }
     setIsOpen(true);
     fetchChangelog();
+    fetchRoadmap();
+    fetchIdeas();
     if (project?.currentVersion) {
       localStorage.setItem(`vp_${projectId}_seen`, project.currentVersion);
       setHasNewVersion(false);
@@ -216,9 +217,8 @@ function VersionPill({
           fontFamily: "ui-monospace, monospace",
           fontWeight: 500,
           borderRadius: 999,
-          background: colors.bg,
-          border: `1px solid ${colors.border}`,
-          color: colors.text,
+          background: "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
+          color: "#fff",
           opacity: 0.6
         },
         children: [
@@ -229,286 +229,371 @@ function VersionPill({
                 width: sizeConfig.dotSize,
                 height: sizeConfig.dotSize,
                 borderRadius: "50%",
-                background: colors.dot,
-                opacity: 0.4
+                background: "#fff",
+                opacity: 0.6
               }
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 32, height: sizeConfig.font, background: colors.border, borderRadius: 2 } })
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 32, height: sizeConfig.font, background: "rgba(255,255,255,0.3)", borderRadius: 2 } })
         ]
       }
     ) });
   }
-  if (error || !currentVersion) return null;
+  if (!currentVersion) return null;
   const renderBadge = () => {
-    const baseButtonStyle = {
-      display: "inline-flex",
-      alignItems: "center",
-      gap: sizeConfig.gap,
-      height: sizeConfig.height,
-      padding: sizeConfig.padding,
-      fontSize: sizeConfig.font,
-      fontFamily: "ui-monospace, monospace",
-      fontWeight: 600,
-      borderRadius: 999,
-      cursor: "pointer",
-      border: "none",
-      transition: "all 150ms ease",
-      outline: "none"
-    };
-    switch (style) {
-      case "glass":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            onClick: handleOpen,
-            style: {
-              ...baseButtonStyle,
-              background: isLight ? "rgba(255,255,255,0.7)" : "rgba(255,255,255,0.1)",
-              backdropFilter: "blur(12px)",
-              WebkitBackdropFilter: "blur(12px)",
-              border: `1px solid ${isLight ? "rgba(255,255,255,0.8)" : "rgba(255,255,255,0.15)"}`,
-              boxShadow: "0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)",
-              color: isLight ? "#374151" : "#f3f4f6"
-            },
-            children: [
-              hasNewVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PulseDot, { color: colors.dot, size: sizeConfig.dotSize }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                "v",
-                currentVersion
-              ] })
-            ]
-          }
-        );
-      case "gradient":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            onClick: handleOpen,
-            style: {
-              ...baseButtonStyle,
-              background: "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
-              color: "#fff",
-              boxShadow: "0 4px 12px rgba(34,197,94,0.3)"
-            },
-            children: [
-              hasNewVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PulseDot, { color: "#fff", size: sizeConfig.dotSize }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                "v",
-                currentVersion
-              ] })
-            ]
-          }
-        );
-      case "pill":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            onClick: handleOpen,
-            style: {
-              ...baseButtonStyle,
-              background: colors.bg,
-              border: `1px solid ${colors.border}`,
-              color: colors.text,
-              boxShadow: `0 0 0 0 ${colors.dot}`
-            },
-            onMouseEnter: (e) => {
-              e.currentTarget.style.boxShadow = `0 0 12px 2px ${colors.dot}40`;
-            },
-            onMouseLeave: (e) => {
-              e.currentTarget.style.boxShadow = `0 0 0 0 ${colors.dot}`;
-            },
-            children: [
-              hasNewVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PulseDot, { color: colors.dot, size: sizeConfig.dotSize }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                "v",
-                currentVersion
-              ] })
-            ]
-          }
-        );
-      case "minimal":
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            onClick: handleOpen,
-            style: {
-              ...baseButtonStyle,
-              background: "transparent",
-              padding: 0,
-              height: "auto",
-              color: colors.text
-            },
-            children: [
-              hasNewVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PulseDot, { color: colors.dot, size: sizeConfig.dotSize }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                "v",
-                currentVersion
-              ] })
-            ]
-          }
-        );
-      case "dot":
-      default:
-        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-          "button",
-          {
-            onClick: handleOpen,
-            style: {
-              ...baseButtonStyle,
-              background: colors.bg,
-              border: `1px solid ${colors.border}`,
-              color: colors.text
-            },
-            children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-                "span",
-                {
-                  style: {
-                    width: sizeConfig.dotSize,
-                    height: sizeConfig.dotSize,
-                    borderRadius: "50%",
-                    background: colors.dot,
-                    flexShrink: 0
-                  }
-                }
-              ),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
-                "v",
-                currentVersion
-              ] })
-            ]
-          }
-        );
-    }
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(positionStyles[position], className), style: { display: "inline-flex" }, children: renderBadge() }),
-    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.modal, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.backdrop, onClick: () => setIsOpen(false) }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(styles.panel, isLight ? styles.panelLight : styles.panelDark), children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(styles.header, isLight ? styles.headerLight : styles.headerDark), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
-            project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 20 }, children: project.icon }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: (0, import_clsx.default)("font-semibold", isLight ? "text-gray-900" : "text-white"), children: project?.name || "What's New" }),
-              /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_clsx.default)("text-xs", isLight ? "text-gray-500" : "text-gray-400"), children: "Latest updates" })
-            ] })
-          ] }),
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        onClick: handleOpen,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          gap: sizeConfig.gap,
+          height: sizeConfig.height,
+          padding: sizeConfig.padding,
+          fontSize: sizeConfig.font,
+          fontFamily: "ui-monospace, monospace",
+          fontWeight: 600,
+          borderRadius: 999,
+          cursor: "pointer",
+          border: "none",
+          transition: "all 150ms ease",
+          outline: "none",
+          background: "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
+          color: "#fff",
+          boxShadow: "0 2px 8px rgba(34,197,94,0.3)"
+        },
+        onMouseEnter: (e) => {
+          e.currentTarget.style.boxShadow = "0 4px 12px rgba(34,197,94,0.4)";
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.boxShadow = "0 2px 8px rgba(34,197,94,0.3)";
+        },
+        children: [
           /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "button",
+            "span",
             {
-              onClick: () => setIsOpen(false),
-              className: (0, import_clsx.default)("p-1 rounded hover:bg-gray-100", !isLight && "hover:bg-gray-800"),
-              style: { background: "transparent", border: "none", cursor: "pointer", color: isLight ? "#374151" : "#9ca3af" },
-              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" }) })
-            }
-          )
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: styles.content, children: versions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { textAlign: "center", padding: 40, color: isLight ? "#6b7280" : "#9ca3af" }, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F680}" }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No releases yet" })
-        ] }) : versions.slice(0, 5).map((version, idx) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.version, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: styles.versionHeader, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 16 }, children: version.emoji || "\u{1F4E6}" }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: (0, import_clsx.default)(styles.versionTitle, isLight ? "text-gray-900" : "text-white"), children: version.title }),
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "span",
-              {
-                className: (0, import_clsx.default)(
-                  styles.versionBadge,
-                  version.type === "major" ? "bg-purple-100 text-purple-700" : version.type === "minor" ? "bg-blue-100 text-blue-700" : "bg-gray-100 text-gray-700"
-                ),
-                children: version.type
+              style: {
+                width: sizeConfig.dotSize,
+                height: sizeConfig.dotSize,
+                borderRadius: "50%",
+                background: "#fff",
+                boxShadow: "0 0 6px rgba(255,255,255,0.8)",
+                flexShrink: 0
               }
-            )
-          ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("text-xs mb-2", isLight ? "text-gray-500" : "text-gray-400"), children: [
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
             "v",
-            version.version,
-            " \xB7 ",
-            new Date(version.date).toLocaleDateString()
+            currentVersion
           ] }),
-          version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: (0, import_clsx.default)("text-sm mb-2", isLight ? "text-gray-600" : "text-gray-300"), children: version.description }),
-          version.features && version.features.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { className: styles.versionFeatures, children: version.features.map((feature, i) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { className: (0, import_clsx.default)(styles.versionFeature, isLight ? "text-gray-600" : "text-gray-300"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", marginTop: 2 }, children: "\u2713" }),
-            feature
-          ] }, i)) })
-        ] }, idx)) }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)(styles.footer, isLight ? styles.footerLight : styles.footerDark), children: [
-          showBranding && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "a",
+          hasNewVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "span",
             {
-              href: "https://versionpill.com",
-              target: "_blank",
-              rel: "noopener noreferrer",
-              className: (0, import_clsx.default)(styles.branding, isLight ? "text-gray-400" : "text-gray-500"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "Powered by Version Pill" })
+              style: {
+                width: 6,
+                height: 6,
+                borderRadius: "50%",
+                background: "#fbbf24",
+                marginLeft: 2
+              }
             }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "a",
+          )
+        ]
+      }
+    );
+  };
+  const groupedTasks = roadmapTasks.reduce((acc, task) => {
+    const col = task.column || "backlog";
+    if (!acc[col]) acc[col] = [];
+    acc[col].push(task);
+    return acc;
+  }, {});
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(positionStyles[position], className), style: { display: "inline-flex" }, children: renderBadge() }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: {
+      position: "fixed",
+      inset: 0,
+      zIndex: 99999,
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: 16
+    }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "div",
+        {
+          onClick: () => setIsOpen(false),
+          style: {
+            position: "absolute",
+            inset: 0,
+            background: "rgba(0,0,0,0.5)",
+            backdropFilter: "blur(4px)"
+          }
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          style: {
+            position: "relative",
+            width: "100%",
+            maxWidth: 480,
+            maxHeight: "80vh",
+            overflow: "hidden",
+            borderRadius: 16,
+            boxShadow: "0 25px 50px -12px rgba(0,0,0,0.25)",
+            background: isLight ? "#fff" : "#18181b"
+          },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
               {
-                href: `${baseUrl}/${projectId}/roadmap`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: (0, import_clsx.default)(styles.button, styles.buttonSecondary),
-                children: "\u{1F4A1} Roadmap"
+                style: {
+                  padding: 16,
+                  borderBottom: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`,
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 10 }, children: [
+                    project?.icon && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 20 }, children: project.icon }),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff", margin: 0 }, children: project?.name || "What's New" }),
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", margin: 0 }, children: [
+                        "v",
+                        currentVersion
+                      ] })
+                    ] })
+                  ] }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "button",
+                    {
+                      onClick: () => setIsOpen(false),
+                      style: {
+                        padding: 4,
+                        borderRadius: 6,
+                        background: "transparent",
+                        border: "none",
+                        cursor: "pointer",
+                        color: isLight ? "#71717a" : "#a1a1aa"
+                      },
+                      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" }) })
+                    }
+                  )
+                ]
               }
             ),
             /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-              "a",
+              "div",
+              {
+                style: {
+                  display: "flex",
+                  gap: 4,
+                  padding: "8px 16px",
+                  borderBottom: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`
+                },
+                children: ["changelog", "roadmap", "ideas"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                  "button",
+                  {
+                    onClick: () => setActiveTab(tab),
+                    style: {
+                      padding: "6px 12px",
+                      borderRadius: 6,
+                      border: "none",
+                      cursor: "pointer",
+                      fontSize: 13,
+                      fontWeight: 500,
+                      background: activeTab === tab ? isLight ? "#f4f4f5" : "#27272a" : "transparent",
+                      color: activeTab === tab ? isLight ? "#18181b" : "#fff" : isLight ? "#71717a" : "#a1a1aa"
+                    },
+                    children: [
+                      tab === "changelog" && "\u{1F680} Changelog",
+                      tab === "roadmap" && "\u{1F5FA}\uFE0F Roadmap",
+                      tab === "ideas" && "\u{1F4A1} Ideas"
+                    ]
+                  },
+                  tab
+                ))
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, overflowY: "auto", maxHeight: "50vh" }, children: [
+              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: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F680}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No releases yet" })
+              ] }) : 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: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 16 }, children: version.emoji || "\u{1F4E6}" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: version.title }),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "span",
+                    {
+                      style: {
+                        padding: "2px 6px",
+                        fontSize: 10,
+                        fontWeight: 500,
+                        borderRadius: 4,
+                        background: version.type === "major" ? "#f3e8ff" : version.type === "minor" ? "#dbeafe" : "#f4f4f5",
+                        color: version.type === "major" ? "#7c3aed" : version.type === "minor" ? "#2563eb" : "#52525b"
+                      },
+                      children: version.type
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 12, color: isLight ? "#71717a" : "#a1a1aa", marginBottom: 8 }, children: [
+                  "v",
+                  version.version,
+                  " \xB7 ",
+                  new Date(version.date).toLocaleDateString()
+                ] }),
+                version.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { fontSize: 14, color: isLight ? "#52525b" : "#d4d4d8", marginBottom: 8 }, children: version.description }),
+                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: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { color: "#22c55e", marginTop: 2 }, children: "\u2713" }),
+                  feature
+                ] }, i)) })
+              ] }, idx)) }),
+              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: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F5FA}\uFE0F" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No public roadmap items" })
+              ] }) : ["in-progress", "todo", "backlog", "done"].map((col) => {
+                const tasks = groupedTasks[col];
+                if (!tasks || tasks.length === 0) return null;
+                return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { marginBottom: 16 }, children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("h3", { style: { fontSize: 12, fontWeight: 600, color: isLight ? "#71717a" : "#a1a1aa", marginBottom: 8, textTransform: "uppercase" }, children: [
+                    COLUMN_LABELS[col] || col,
+                    " (",
+                    tasks.length,
+                    ")"
+                  ] }),
+                  tasks.map((task) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "div",
+                    {
+                      style: {
+                        padding: 12,
+                        marginBottom: 8,
+                        borderRadius: 8,
+                        background: isLight ? "#f4f4f5" : "#27272a"
+                      },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                          "span",
+                          {
+                            style: {
+                              width: 8,
+                              height: 8,
+                              borderRadius: "50%",
+                              background: TYPE_COLORS[task.type] || "#71717a"
+                            }
+                          }
+                        ),
+                        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, color: isLight ? "#18181b" : "#fff" }, children: task.title })
+                      ] })
+                    },
+                    task.id
+                  ))
+                ] }, col);
+              }) }),
+              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: [
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 32, marginBottom: 8 }, children: "\u{1F4A1}" }),
+                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { children: "No feature requests yet" })
+              ] }) : ideas.map((idea) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                "div",
+                {
+                  style: {
+                    padding: 12,
+                    marginBottom: 8,
+                    borderRadius: 8,
+                    background: isLight ? "#f4f4f5" : "#27272a",
+                    display: "flex",
+                    alignItems: "flex-start",
+                    gap: 12
+                  },
+                  children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        style: {
+                          display: "flex",
+                          flexDirection: "column",
+                          alignItems: "center",
+                          padding: "4px 8px",
+                          borderRadius: 6,
+                          background: isLight ? "#fff" : "#18181b",
+                          minWidth: 40
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 14, fontWeight: 600, color: isLight ? "#18181b" : "#fff" }, children: idea.votes }),
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: 10, color: isLight ? "#71717a" : "#a1a1aa" }, children: "votes" })
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, fontWeight: 500, color: isLight ? "#18181b" : "#fff", marginBottom: 4 }, children: idea.title }),
+                      idea.description && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { fontSize: 13, color: isLight ? "#71717a" : "#a1a1aa" }, children: [
+                        idea.description.slice(0, 100),
+                        "..."
+                      ] })
+                    ] })
+                  ]
+                },
+                idea.id
+              )) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+              "div",
               {
-                href: `${baseUrl}/${projectId}/changelog`,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: (0, import_clsx.default)(styles.button, styles.buttonPrimary),
-                children: "View All"
+                style: {
+                  padding: 12,
+                  borderTop: `1px solid ${isLight ? "#f4f4f5" : "#27272a"}`,
+                  background: isLight ? "#fafafa" : "#0a0a0a",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between"
+                },
+                children: [
+                  showBranding && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "a",
+                    {
+                      href: "https://versionpill.com",
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      style: { fontSize: 10, color: isLight ? "#a1a1aa" : "#52525b", textDecoration: "none" },
+                      children: "Powered by Version Pill"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+                    "a",
+                    {
+                      href: `${baseUrl}/${projectId}/${activeTab === "ideas" ? "feature-requests" : activeTab}`,
+                      target: "_blank",
+                      rel: "noopener noreferrer",
+                      style: {
+                        padding: "6px 12px",
+                        fontSize: 12,
+                        fontWeight: 500,
+                        borderRadius: 6,
+                        background: "#22c55e",
+                        color: "#fff",
+                        textDecoration: "none"
+                      },
+                      children: "View All \u2192"
+                    }
+                  )
+                ]
               }
             )
-          ] })
-        ] })
-      ] })
-    ] })
-  ] });
-}
-function PulseDot({ color, size }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: { position: "relative", display: "inline-flex", width: size, height: size }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        style: {
-          position: "absolute",
-          inset: 0,
-          borderRadius: "50%",
-          background: color,
-          opacity: 0.75,
-          animation: "vp-ping 1s cubic-bezier(0, 0, 0.2, 1) infinite"
-        }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        style: {
-          position: "relative",
-          display: "inline-flex",
-          width: size,
-          height: size,
-          borderRadius: "50%",
-          background: color
+          ]
         }
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { children: `@keyframes vp-ping { 75%, 100% { transform: scale(2); opacity: 0; } }` })
+      )
+    ] })
   ] });
 }
 function VersionBadge({
   projectId,
   baseUrl = DEFAULT_BASE_URL,
   theme = "auto",
-  style = "dot",
+  style = "glass",
   size = "md",
   accent = "green",
   className,
@@ -523,165 +608,109 @@ function VersionBadge({
   (0, import_react.useEffect)(() => {
     fetch(`${baseUrl}/api/badge/${projectId}`).then((res) => res.json()).then((data) => setVersion(data.version)).catch(() => setVersion(null)).finally(() => setLoading(false));
   }, [projectId, baseUrl]);
-  if (loading) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-      "span",
-      {
-        className,
-        style: {
-          display: "inline-flex",
-          alignItems: "center",
-          gap: sizeConfig.gap,
-          height: sizeConfig.height,
-          padding: sizeConfig.padding,
-          fontSize: sizeConfig.font,
-          fontFamily: "ui-monospace, monospace",
-          fontWeight: 500,
-          borderRadius: 999,
-          background: colors.bg,
-          border: `1px solid ${colors.border}`,
-          color: colors.text,
-          opacity: 0.6
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-            "span",
-            {
-              style: {
-                width: sizeConfig.dotSize,
-                height: sizeConfig.dotSize,
-                borderRadius: "50%",
-                background: colors.dot,
-                opacity: 0.4
-              }
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: 32, height: sizeConfig.font, background: colors.border, borderRadius: 2 } })
-        ]
-      }
-    );
-  }
-  if (!version) return null;
-  const getStyleVariant = () => {
+  const getStyleConfig = () => {
     const base = {
       display: "inline-flex",
       alignItems: "center",
       gap: sizeConfig.gap,
+      height: sizeConfig.height,
+      padding: sizeConfig.padding,
       fontSize: sizeConfig.font,
       fontFamily: "ui-monospace, monospace",
       fontWeight: 600,
       borderRadius: 999,
       textDecoration: "none",
-      transition: "opacity 150ms ease"
+      transition: "all 150ms ease",
+      cursor: "pointer"
     };
-    if (style === "minimal") {
-      return { ...base, background: "transparent", border: "none", padding: 0, color: colors.text };
-    }
-    if (style === "glass") {
-      return {
-        ...base,
-        height: sizeConfig.height,
-        padding: sizeConfig.padding,
-        background: isLight ? "rgba(255,255,255,0.7)" : "rgba(255,255,255,0.1)",
-        backdropFilter: "blur(12px)",
-        WebkitBackdropFilter: "blur(12px)",
-        border: `1px solid ${isLight ? "rgba(255,255,255,0.8)" : "rgba(255,255,255,0.15)"}`,
-        boxShadow: "0 4px 12px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.2)",
-        color: isLight ? "#374151" : "#f3f4f6"
-      };
-    }
-    if (style === "gradient") {
-      return {
-        ...base,
-        height: sizeConfig.height,
-        padding: sizeConfig.padding,
-        background: "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
-        border: "none",
-        color: "#fff",
-        boxShadow: "0 4px 12px rgba(34,197,94,0.3)"
-      };
+    switch (style) {
+      case "glass":
+        return {
+          ...base,
+          background: isLight ? "rgba(34, 197, 94, 0.12)" : "rgba(34, 197, 94, 0.18)",
+          backdropFilter: "blur(8px)",
+          WebkitBackdropFilter: "blur(8px)",
+          border: isLight ? "1px solid rgba(34, 197, 94, 0.25)" : "1px solid rgba(34, 197, 94, 0.35)",
+          color: isLight ? "#16a34a" : "#4ade80",
+          boxShadow: isLight ? "0 2px 8px rgba(34, 197, 94, 0.15), inset 0 1px 0 rgba(255,255,255,0.5)" : "0 2px 12px rgba(34, 197, 94, 0.25), inset 0 1px 0 rgba(255,255,255,0.1)"
+        };
+      case "gradient":
+        return {
+          ...base,
+          background: "linear-gradient(135deg, #22c55e 0%, #16a34a 100%)",
+          color: "#fff",
+          boxShadow: "0 2px 8px rgba(34,197,94,0.3)"
+        };
+      case "pill":
+        return {
+          ...base,
+          background: colors.bg,
+          border: `1px solid ${colors.border}`,
+          color: colors.text
+        };
+      case "minimal":
+        return {
+          ...base,
+          background: "transparent",
+          color: colors.text,
+          padding: "0 4px"
+        };
+      case "dot":
+        return {
+          ...base,
+          background: colors.bg,
+          border: `1px solid ${colors.border}`,
+          color: colors.text
+        };
+      default:
+        return {
+          ...base,
+          background: isLight ? "rgba(34, 197, 94, 0.12)" : "rgba(34, 197, 94, 0.18)",
+          backdropFilter: "blur(8px)",
+          border: isLight ? "1px solid rgba(34, 197, 94, 0.25)" : "1px solid rgba(34, 197, 94, 0.35)",
+          color: isLight ? "#16a34a" : "#4ade80",
+          boxShadow: "0 2px 8px rgba(34, 197, 94, 0.15)"
+        };
     }
+  };
+  const getDotStyle = () => {
+    const isGlassOrPill = style === "glass" || style === "pill" || style === "dot";
     return {
-      ...base,
-      height: sizeConfig.height,
-      padding: sizeConfig.padding,
-      background: colors.bg,
-      border: `1px solid ${colors.border}`,
-      color: colors.text
+      width: sizeConfig.dotSize,
+      height: sizeConfig.dotSize,
+      borderRadius: "50%",
+      background: style === "gradient" ? "#fff" : "#22c55e",
+      boxShadow: style === "gradient" ? "0 0 6px rgba(255,255,255,0.8)" : "0 0 6px rgba(34,197,94,0.6)",
+      flexShrink: 0
     };
   };
-  const badgeStyle = getStyleVariant();
+  if (loading) {
+    const loadingStyle = getStyleConfig();
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { className, style: { ...loadingStyle, opacity: 0.6 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { ...getDotStyle(), opacity: 0.6 } }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: {
+        width: 32,
+        height: sizeConfig.font,
+        background: style === "gradient" ? "rgba(255,255,255,0.3)" : "rgba(34,197,94,0.3)",
+        borderRadius: 2
+      } })
+    ] });
+  }
+  if (!version) return null;
+  const badgeStyle = getStyleConfig();
+  const dotStyle = getDotStyle();
   const content = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
-    style === "dot" && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "span",
-      {
-        style: {
-          width: sizeConfig.dotSize,
-          height: sizeConfig.dotSize,
-          borderRadius: "50%",
-          background: colors.dot,
-          flexShrink: 0
-        }
-      }
-    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: dotStyle }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
       "v",
       version
     ] })
   ] });
   if (href) {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-      "a",
-      {
-        href,
-        target: "_blank",
-        rel: "noopener noreferrer",
-        className,
-        style: badgeStyle,
-        onMouseEnter: (e) => e.currentTarget.style.opacity = "0.8",
-        onMouseLeave: (e) => e.currentTarget.style.opacity = "1",
-        children: content
-      }
-    );
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { href, target: "_blank", rel: "noopener noreferrer", className, style: badgeStyle, children: content });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className, style: badgeStyle, children: content });
 }
-function Changelog({
-  projectId,
-  baseUrl = DEFAULT_BASE_URL,
-  maxHeight = 600,
-  theme = "auto",
-  className
-}) {
-  const resolvedTheme = useTheme(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "iframe",
-    {
-      src: `${baseUrl}/embed/${projectId}/changelog?theme=${resolvedTheme}`,
-      className: (0, import_clsx.default)(styles.iframe, className),
-      style: { height: maxHeight },
-      title: "Changelog"
-    }
-  );
-}
-function Roadmap({
-  projectId,
-  baseUrl = DEFAULT_BASE_URL,
-  maxHeight = 800,
-  theme = "auto",
-  className
-}) {
-  const resolvedTheme = useTheme(theme);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    "iframe",
-    {
-      src: `${baseUrl}/embed/${projectId}/roadmap?theme=${resolvedTheme}`,
-      className: (0, import_clsx.default)(styles.iframe, className),
-      style: { height: maxHeight },
-      title: "Roadmap"
-    }
-  );
-}
 var versionCache = {};
 function useVersion({
   projectId,
@@ -725,6 +754,42 @@ function useVersion({
   }, [refetchInterval, fetchVersion]);
   return { version, name, slug, loading, error, refetch: fetchVersion };
 }
+function Changelog({
+  projectId,
+  baseUrl = DEFAULT_BASE_URL,
+  maxHeight = 600,
+  theme = "auto",
+  className
+}) {
+  const resolvedTheme = useTheme(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      src: `${baseUrl}/embed/${projectId}/changelog?theme=${resolvedTheme}`,
+      className,
+      style: { width: "100%", height: maxHeight, border: "none" },
+      title: "Changelog"
+    }
+  );
+}
+function Roadmap({
+  projectId,
+  baseUrl = DEFAULT_BASE_URL,
+  maxHeight = 800,
+  theme = "auto",
+  className
+}) {
+  const resolvedTheme = useTheme(theme);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "iframe",
+    {
+      src: `${baseUrl}/embed/${projectId}/roadmap?theme=${resolvedTheme}`,
+      className,
+      style: { width: "100%", height: maxHeight, border: "none" },
+      title: "Roadmap"
+    }
+  );
+}
 var index_default = VersionPill;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {