version-pill-react 1.0.0

package/dist/index.d.mts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Version {
+    id: string;
+    version: string;
+    type: "major" | "minor" | "patch";
+    title: string;
+    description?: string;
+    emoji?: string;
+    features?: string[];
+    releaseDate: number;
+    isActive: boolean;
+}
+interface VersionPillConfig {
+    /** Your project slug from Version Pill dashboard */
+    projectId: string;
+    /** Version Pill API base URL (default: https://versionpill.com) */
+    baseUrl?: string;
+}
+interface VersionPillProps extends VersionPillConfig {
+    /** Position of the pill */
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "inline";
+    /** Custom class name */
+    className?: string;
+    /** Theme */
+    theme?: "light" | "dark" | "auto";
+    /** Show "Powered by Version Pill" branding */
+    showBranding?: boolean;
+    /** Accent color (hex) */
+    accentColor?: string;
+    /** Callback when a new version is detected */
+    onNewVersion?: (version: Version) => void;
+}
+interface ChangelogProps extends VersionPillConfig {
+    /** Max height in pixels */
+    maxHeight?: number;
+    /** Theme */
+    theme?: "light" | "dark" | "auto";
+    /** Custom class name */
+    className?: string;
+}
+interface RoadmapProps extends VersionPillConfig {
+    /** Max height in pixels */
+    maxHeight?: number;
+    /** Theme */
+    theme?: "light" | "dark" | "auto";
+    /** Custom class name */
+    className?: string;
+}
+declare function VersionPill({ projectId, baseUrl, position, className, theme, showBranding, accentColor, onNewVersion, }: VersionPillProps): react_jsx_runtime.JSX.Element | null;
+declare function Changelog({ projectId, baseUrl, maxHeight, theme, className, }: ChangelogProps): react_jsx_runtime.JSX.Element;
+declare function Roadmap({ projectId, baseUrl, maxHeight, theme, className, }: RoadmapProps): react_jsx_runtime.JSX.Element;
+
+export { Changelog, type ChangelogProps, Roadmap, type RoadmapProps, type Version, VersionPill, type VersionPillConfig, type VersionPillProps, VersionPill as default };

package/dist/index.d.ts

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface Version {
+    id: string;
+    version: string;
+    type: "major" | "minor" | "patch";
+    title: string;
+    description?: string;
+    emoji?: string;
+    features?: string[];
+    releaseDate: number;
+    isActive: boolean;
+}
+interface VersionPillConfig {
+    /** Your project slug from Version Pill dashboard */
+    projectId: string;
+    /** Version Pill API base URL (default: https://versionpill.com) */
+    baseUrl?: string;
+}
+interface VersionPillProps extends VersionPillConfig {
+    /** Position of the pill */
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right" | "inline";
+    /** Custom class name */
+    className?: string;
+    /** Theme */
+    theme?: "light" | "dark" | "auto";
+    /** Show "Powered by Version Pill" branding */
+    showBranding?: boolean;
+    /** Accent color (hex) */
+    accentColor?: string;
+    /** Callback when a new version is detected */
+    onNewVersion?: (version: Version) => void;
+}
+interface ChangelogProps extends VersionPillConfig {
+    /** Max height in pixels */
+    maxHeight?: number;
+    /** Theme */
+    theme?: "light" | "dark" | "auto";
+    /** Custom class name */
+    className?: string;
+}
+interface RoadmapProps extends VersionPillConfig {
+    /** Max height in pixels */
+    maxHeight?: number;
+    /** Theme */
+    theme?: "light" | "dark" | "auto";
+    /** Custom class name */
+    className?: string;
+}
+declare function VersionPill({ projectId, baseUrl, position, className, theme, showBranding, accentColor, onNewVersion, }: VersionPillProps): react_jsx_runtime.JSX.Element | null;
+declare function Changelog({ projectId, baseUrl, maxHeight, theme, className, }: ChangelogProps): react_jsx_runtime.JSX.Element;
+declare function Roadmap({ projectId, baseUrl, maxHeight, theme, className, }: RoadmapProps): react_jsx_runtime.JSX.Element;
+
+export { Changelog, type ChangelogProps, Roadmap, type RoadmapProps, type Version, VersionPill, type VersionPillConfig, type VersionPillProps, VersionPill as default };

package/dist/index.js

@@ -0,0 +1,296 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.tsx
+var index_exports = {};
+__export(index_exports, {
+  Changelog: () => Changelog,
+  Roadmap: () => Roadmap,
+  VersionPill: () => VersionPill,
+  default: () => index_default
+});
+module.exports = __toCommonJS(index_exports);
+var import_react = require("react");
+var import_clsx = __toESM(require("clsx"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var DEFAULT_BASE_URL = "https://versionpill.com";
+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`
+};
+function useTheme(theme) {
+  const [resolved, setResolved] = (0, import_react.useState)("light");
+  (0, import_react.useEffect)(() => {
+    if (theme === "auto") {
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setResolved(isDark ? "dark" : "light");
+      const listener = (e) => setResolved(e.matches ? "dark" : "light");
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener("change", listener);
+      return () => mq.removeEventListener("change", listener);
+    } else {
+      setResolved(theme);
+    }
+  }, [theme]);
+  return resolved;
+}
+function VersionPill({
+  projectId,
+  baseUrl = DEFAULT_BASE_URL,
+  position = "inline",
+  className,
+  theme = "auto",
+  showBranding = true,
+  accentColor,
+  onNewVersion
+}) {
+  const [versions, setVersions] = (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 [hasNewVersion, setHasNewVersion] = (0, import_react.useState)(false);
+  const resolvedTheme = useTheme(theme);
+  const isLight = resolvedTheme === "light";
+  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");
+      const data = await response.json();
+      setVersions(data);
+      const storedVersion = localStorage.getItem(`vp_${projectId}_seen`);
+      if (data.length > 0 && data[0].version !== storedVersion) {
+        setHasNewVersion(true);
+        onNewVersion?.(data[0]);
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, baseUrl, onNewVersion]);
+  (0, import_react.useEffect)(() => {
+    fetchChangelog();
+  }, [fetchChangelog]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    if (versions.length > 0) {
+      localStorage.setItem(`vp_${projectId}_seen`, versions[0].version);
+      setHasNewVersion(false);
+    }
+  };
+  const currentVersion = versions[0];
+  const positionStyles = {
+    "top-left": "fixed top-4 left-4 z-[9999]",
+    "top-right": "fixed top-4 right-4 z-[9999]",
+    "bottom-left": "fixed bottom-4 left-4 z-[9999]",
+    "bottom-right": "fixed bottom-4 right-4 z-[9999]",
+    inline: ""
+  };
+  if (loading) {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(positionStyles[position], className), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: (0, import_clsx.default)(styles.pill, isLight ? styles.pillLight : styles.pillDark), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "opacity-50", children: "..." }) }) });
+  }
+  if (error || !currentVersion) return null;
+  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), children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        onClick: handleOpen,
+        className: (0, import_clsx.default)(styles.pill, isLight ? styles.pillLight : styles.pillDark),
+        style: accentColor ? { borderColor: accentColor } : void 0,
+        children: [
+          hasNewVersion && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: styles.newDot }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+            "v",
+            currentVersion.version
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 9l6 6 6-6" }) })
+        ]
+      }
+    ) }),
+    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", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "text-lg", children: currentVersion.emoji || "\u2728" }),
+            /* @__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: "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" })
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              onClick: () => setIsOpen(false),
+              className: (0, import_clsx.default)("p-1 rounded hover:bg-gray-100", !isLight && "hover:bg-gray-800"),
+              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.slice(0, 5).map((version) => /* @__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", { className: "text-lg", 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
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: (0, import_clsx.default)("text-xs mb-2", isLight ? "text-gray-500" : "text-gray-400"), children: [
+            "v",
+            version.version,
+            " \xB7 ",
+            new Date(version.releaseDate).toLocaleDateString()
+          ] }),
+          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", { className: "text-green-500 mt-0.5", children: "\u2713" }),
+            feature
+          ] }, i)) })
+        ] }, version.id)) }),
+        /* @__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",
+            {
+              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" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
+              {
+                href: `${baseUrl}/${projectId}/roadmap`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: (0, import_clsx.default)(styles.button, styles.buttonSecondary),
+                children: "\u{1F4A1} Roadmap"
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "a",
+              {
+                href: `${baseUrl}/${projectId}/changelog`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: (0, import_clsx.default)(styles.button, styles.buttonPrimary),
+                style: accentColor ? { backgroundColor: accentColor } : void 0,
+                children: "View All"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+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 index_default = VersionPill;
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Changelog,
+  Roadmap,
+  VersionPill
+});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport clsx from \"clsx\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\nexport interface Version {\n  id: string;\n  version: string;\n  type: \"major\" | \"minor\" | \"patch\";\n  title: string;\n  description?: string;\n  emoji?: string;\n  features?: string[];\n  releaseDate: number;\n  isActive: boolean;\n}\n\nexport interface VersionPillConfig {\n  /** Your project slug from Version Pill dashboard */\n  projectId: string;\n  /** Version Pill API base URL (default: https://versionpill.com) */\n  baseUrl?: string;\n}\n\nexport interface VersionPillProps extends VersionPillConfig {\n  /** Position of the pill */\n  position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | \"inline\";\n  /** Custom class name */\n  className?: string;\n  /** Theme */\n  theme?: \"light\" | \"dark\" | \"auto\";\n  /** Show \"Powered by Version Pill\" branding */\n  showBranding?: boolean;\n  /** Accent color (hex) */\n  accentColor?: string;\n  /** Callback when a new version is detected */\n  onNewVersion?: (version: Version) => void;\n}\n\nexport interface ChangelogProps extends VersionPillConfig {\n  /** Max height in pixels */\n  maxHeight?: number;\n  /** Theme */\n  theme?: \"light\" | \"dark\" | \"auto\";\n  /** Custom class name */\n  className?: string;\n}\n\nexport interface RoadmapProps extends VersionPillConfig {\n  /** Max height in pixels */\n  maxHeight?: number;\n  /** Theme */\n  theme?: \"light\" | \"dark\" | \"auto\";\n  /** Custom class name */\n  className?: string;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst DEFAULT_BASE_URL = \"https://versionpill.com\";\n\n// =============================================================================\n// STYLES\n// =============================================================================\n\nconst styles = {\n  pill: `\n    inline-flex items-center gap-1.5 px-2.5 py-1\n    text-xs font-medium rounded-full cursor-pointer\n    transition-all duration-200 select-none\n    border shadow-sm hover:shadow-md\n  `,\n  pillLight: `bg-white text-gray-700 border-gray-200 hover:border-gray-300`,\n  pillDark: `bg-gray-900 text-gray-100 border-gray-700 hover:border-gray-600`,\n\n  modal: `fixed inset-0 z-[99999] flex items-center justify-center p-4`,\n  backdrop: `absolute inset-0 bg-black/50 backdrop-blur-sm`,\n  panel: `relative w-full max-w-md max-h-[80vh] overflow-hidden rounded-xl shadow-2xl`,\n  panelLight: `bg-white`,\n  panelDark: `bg-gray-900`,\n\n  header: `p-4 border-b flex items-center justify-between`,\n  headerLight: `border-gray-100`,\n  headerDark: `border-gray-800`,\n\n  content: `p-4 overflow-y-auto max-h-[60vh]`,\n\n  version: `mb-4 last:mb-0`,\n  versionHeader: `flex items-center gap-2 mb-2`,\n  versionTitle: `font-semibold`,\n  versionBadge: `px-1.5 py-0.5 text-[10px] font-medium rounded`,\n  versionFeatures: `space-y-1 mt-2`,\n  versionFeature: `flex items-start gap-2 text-sm`,\n\n  footer: `p-3 border-t flex items-center justify-between`,\n  footerLight: `border-gray-100 bg-gray-50`,\n  footerDark: `border-gray-800 bg-gray-950`,\n\n  button: `px-3 py-1.5 text-xs font-medium rounded-lg transition-colors`,\n  buttonPrimary: `bg-blue-600 text-white hover:bg-blue-700`,\n  buttonSecondary: `text-gray-500 hover:text-gray-700`,\n\n  branding: `text-[10px] opacity-40 flex items-center gap-1`,\n  newDot: `w-2 h-2 rounded-full bg-green-500 animate-pulse`,\n\n  iframe: `w-full border-0`,\n};\n\n// =============================================================================\n// HOOKS\n// =============================================================================\n\nfunction useTheme(theme: \"light\" | \"dark\" | \"auto\"): \"light\" | \"dark\" {\n  const [resolved, setResolved] = useState<\"light\" | \"dark\">(\"light\");\n\n  useEffect(() => {\n    if (theme === \"auto\") {\n      const isDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n      setResolved(isDark ? \"dark\" : \"light\");\n\n      const listener = (e: MediaQueryListEvent) => setResolved(e.matches ? \"dark\" : \"light\");\n      const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      mq.addEventListener(\"change\", listener);\n      return () => mq.removeEventListener(\"change\", listener);\n    } else {\n      setResolved(theme);\n    }\n  }, [theme]);\n\n  return resolved;\n}\n\n// =============================================================================\n// VERSION PILL COMPONENT\n// =============================================================================\n\nexport function VersionPill({\n  projectId,\n  baseUrl = DEFAULT_BASE_URL,\n  position = \"inline\",\n  className,\n  theme = \"auto\",\n  showBranding = true,\n  accentColor,\n  onNewVersion,\n}: VersionPillProps) {\n  const [versions, setVersions] = useState<Version[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [hasNewVersion, setHasNewVersion] = useState(false);\n\n  const resolvedTheme = useTheme(theme);\n  const isLight = resolvedTheme === \"light\";\n\n  const fetchChangelog = useCallback(async () => {\n    try {\n      const response = await fetch(`${baseUrl}/api/changelog/${projectId}?limit=10`);\n      if (!response.ok) throw new Error(\"Failed to fetch changelog\");\n\n      const data = await response.json();\n      setVersions(data);\n\n      const storedVersion = localStorage.getItem(`vp_${projectId}_seen`);\n      if (data.length > 0 && data[0].version !== storedVersion) {\n        setHasNewVersion(true);\n        onNewVersion?.(data[0]);\n      }\n    } catch (err: any) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  }, [projectId, baseUrl, onNewVersion]);\n\n  useEffect(() => {\n    fetchChangelog();\n  }, [fetchChangelog]);\n\n  const handleOpen = () => {\n    setIsOpen(true);\n    if (versions.length > 0) {\n      localStorage.setItem(`vp_${projectId}_seen`, versions[0].version);\n      setHasNewVersion(false);\n    }\n  };\n\n  const currentVersion = versions[0];\n\n  const positionStyles: Record<string, string> = {\n    \"top-left\": \"fixed top-4 left-4 z-[9999]\",\n    \"top-right\": \"fixed top-4 right-4 z-[9999]\",\n    \"bottom-left\": \"fixed bottom-4 left-4 z-[9999]\",\n    \"bottom-right\": \"fixed bottom-4 right-4 z-[9999]\",\n    inline: \"\",\n  };\n\n  if (loading) {\n    return (\n      <div className={clsx(positionStyles[position], className)}>\n        <div className={clsx(styles.pill, isLight ? styles.pillLight : styles.pillDark)}>\n          <span className=\"opacity-50\">...</span>\n        </div>\n      </div>\n    );\n  }\n\n  if (error || !currentVersion) return null;\n\n  return (\n    <>\n      <div className={clsx(positionStyles[position], className)}>\n        <button\n          onClick={handleOpen}\n          className={clsx(styles.pill, isLight ? styles.pillLight : styles.pillDark)}\n          style={accentColor ? { borderColor: accentColor } : undefined}\n        >\n          {hasNewVersion && <span className={styles.newDot} />}\n          <span>v{currentVersion.version}</span>\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </button>\n      </div>\n\n      {isOpen && (\n        <div className={styles.modal}>\n          <div className={styles.backdrop} onClick={() => setIsOpen(false)} />\n          <div className={clsx(styles.panel, isLight ? styles.panelLight : styles.panelDark)}>\n            <div className={clsx(styles.header, isLight ? styles.headerLight : styles.headerDark)}>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-lg\">{currentVersion.emoji || \"✨\"}</span>\n                <div>\n                  <h2 className={clsx(\"font-semibold\", isLight ? \"text-gray-900\" : \"text-white\")}>What's New</h2>\n                  <p className={clsx(\"text-xs\", isLight ? \"text-gray-500\" : \"text-gray-400\")}>\n                    Latest updates\n                  </p>\n                </div>\n              </div>\n              <button\n                onClick={() => setIsOpen(false)}\n                className={clsx(\"p-1 rounded hover:bg-gray-100\", !isLight && \"hover:bg-gray-800\")}\n              >\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M18 6L6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            </div>\n\n            <div className={styles.content}>\n              {versions.slice(0, 5).map((version) => (\n                <div key={version.id} className={styles.version}>\n                  <div className={styles.versionHeader}>\n                    <span className=\"text-lg\">{version.emoji || \"📦\"}</span>\n                    <span className={clsx(styles.versionTitle, isLight ? \"text-gray-900\" : \"text-white\")}>\n                      {version.title}\n                    </span>\n                    <span\n                      className={clsx(\n                        styles.versionBadge,\n                        version.type === \"major\" ? \"bg-purple-100 text-purple-700\" :\n                        version.type === \"minor\" ? \"bg-blue-100 text-blue-700\" :\n                        \"bg-gray-100 text-gray-700\"\n                      )}\n                    >\n                      {version.type}\n                    </span>\n                  </div>\n                  <div className={clsx(\"text-xs mb-2\", isLight ? \"text-gray-500\" : \"text-gray-400\")}>\n                    v{version.version} · {new Date(version.releaseDate).toLocaleDateString()}\n                  </div>\n                  {version.description && (\n                    <p className={clsx(\"text-sm mb-2\", isLight ? \"text-gray-600\" : \"text-gray-300\")}>\n                      {version.description}\n                    </p>\n                  )}\n                  {version.features && version.features.length > 0 && (\n                    <ul className={styles.versionFeatures}>\n                      {version.features.map((feature, i) => (\n                        <li key={i} className={clsx(styles.versionFeature, isLight ? \"text-gray-600\" : \"text-gray-300\")}>\n                          <span className=\"text-green-500 mt-0.5\">✓</span>\n                          {feature}\n                        </li>\n                      ))}\n                    </ul>\n                  )}\n                </div>\n              ))}\n            </div>\n\n            <div className={clsx(styles.footer, isLight ? styles.footerLight : styles.footerDark)}>\n              {showBranding && (\n                <a\n                  href=\"https://versionpill.com\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={clsx(styles.branding, isLight ? \"text-gray-400\" : \"text-gray-500\")}\n                >\n                  <span>Powered by Version Pill</span>\n                </a>\n              )}\n              <div className=\"flex items-center gap-2\">\n                <a\n                  href={`${baseUrl}/${projectId}/roadmap`}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={clsx(styles.button, styles.buttonSecondary)}\n                >\n                  💡 Roadmap\n                </a>\n                <a\n                  href={`${baseUrl}/${projectId}/changelog`}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={clsx(styles.button, styles.buttonPrimary)}\n                  style={accentColor ? { backgroundColor: accentColor } : undefined}\n                >\n                  View All\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\n// =============================================================================\n// CHANGELOG EMBED COMPONENT\n// =============================================================================\n\nexport function Changelog({\n  projectId,\n  baseUrl = DEFAULT_BASE_URL,\n  maxHeight = 600,\n  theme = \"auto\",\n  className,\n}: ChangelogProps) {\n  const resolvedTheme = useTheme(theme);\n\n  return (\n    <iframe\n      src={`${baseUrl}/embed/${projectId}/changelog?theme=${resolvedTheme}`}\n      className={clsx(styles.iframe, className)}\n      style={{ height: maxHeight }}\n      title=\"Changelog\"\n    />\n  );\n}\n\n// =============================================================================\n// ROADMAP EMBED COMPONENT\n// =============================================================================\n\nexport function Roadmap({\n  projectId,\n  baseUrl = DEFAULT_BASE_URL,\n  maxHeight = 800,\n  theme = \"auto\",\n  className,\n}: RoadmapProps) {\n  const resolvedTheme = useTheme(theme);\n\n  return (\n    <iframe\n      src={`${baseUrl}/embed/${projectId}/roadmap?theme=${resolvedTheme}`}\n      className={clsx(styles.iframe, className)}\n      style={{ height: maxHeight }}\n      title=\"Roadmap\"\n    />\n  );\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n\nexport default VersionPill;\n"],"mappings":"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","names":["clsx"]}

package/dist/index.mjs

@@ -0,0 +1,260 @@
+"use client";
+
+// src/index.tsx
+import { useState, useEffect, useCallback } from "react";
+import clsx from "clsx";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_BASE_URL = "https://versionpill.com";
+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`
+};
+function useTheme(theme) {
+  const [resolved, setResolved] = useState("light");
+  useEffect(() => {
+    if (theme === "auto") {
+      const isDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+      setResolved(isDark ? "dark" : "light");
+      const listener = (e) => setResolved(e.matches ? "dark" : "light");
+      const mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener("change", listener);
+      return () => mq.removeEventListener("change", listener);
+    } else {
+      setResolved(theme);
+    }
+  }, [theme]);
+  return resolved;
+}
+function VersionPill({
+  projectId,
+  baseUrl = DEFAULT_BASE_URL,
+  position = "inline",
+  className,
+  theme = "auto",
+  showBranding = true,
+  accentColor,
+  onNewVersion
+}) {
+  const [versions, setVersions] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState(null);
+  const [isOpen, setIsOpen] = useState(false);
+  const [hasNewVersion, setHasNewVersion] = useState(false);
+  const resolvedTheme = useTheme(theme);
+  const isLight = resolvedTheme === "light";
+  const fetchChangelog = useCallback(async () => {
+    try {
+      const response = await fetch(`${baseUrl}/api/changelog/${projectId}?limit=10`);
+      if (!response.ok) throw new Error("Failed to fetch changelog");
+      const data = await response.json();
+      setVersions(data);
+      const storedVersion = localStorage.getItem(`vp_${projectId}_seen`);
+      if (data.length > 0 && data[0].version !== storedVersion) {
+        setHasNewVersion(true);
+        onNewVersion?.(data[0]);
+      }
+    } catch (err) {
+      setError(err.message);
+    } finally {
+      setLoading(false);
+    }
+  }, [projectId, baseUrl, onNewVersion]);
+  useEffect(() => {
+    fetchChangelog();
+  }, [fetchChangelog]);
+  const handleOpen = () => {
+    setIsOpen(true);
+    if (versions.length > 0) {
+      localStorage.setItem(`vp_${projectId}_seen`, versions[0].version);
+      setHasNewVersion(false);
+    }
+  };
+  const currentVersion = versions[0];
+  const positionStyles = {
+    "top-left": "fixed top-4 left-4 z-[9999]",
+    "top-right": "fixed top-4 right-4 z-[9999]",
+    "bottom-left": "fixed bottom-4 left-4 z-[9999]",
+    "bottom-right": "fixed bottom-4 right-4 z-[9999]",
+    inline: ""
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsx("div", { className: clsx(positionStyles[position], className), children: /* @__PURE__ */ jsx("div", { className: clsx(styles.pill, isLight ? styles.pillLight : styles.pillDark), children: /* @__PURE__ */ jsx("span", { className: "opacity-50", children: "..." }) }) });
+  }
+  if (error || !currentVersion) return null;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: clsx(positionStyles[position], className), children: /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: handleOpen,
+        className: clsx(styles.pill, isLight ? styles.pillLight : styles.pillDark),
+        style: accentColor ? { borderColor: accentColor } : void 0,
+        children: [
+          hasNewVersion && /* @__PURE__ */ jsx("span", { className: styles.newDot }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            "v",
+            currentVersion.version
+          ] }),
+          /* @__PURE__ */ jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 9l6 6 6-6" }) })
+        ]
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsxs("div", { className: styles.modal, children: [
+      /* @__PURE__ */ jsx("div", { className: styles.backdrop, onClick: () => setIsOpen(false) }),
+      /* @__PURE__ */ jsxs("div", { className: clsx(styles.panel, isLight ? styles.panelLight : styles.panelDark), children: [
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles.header, isLight ? styles.headerLight : styles.headerDark), children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg", children: currentVersion.emoji || "\u2728" }),
+            /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("h2", { className: clsx("font-semibold", isLight ? "text-gray-900" : "text-white"), children: "What's New" }),
+              /* @__PURE__ */ jsx("p", { className: clsx("text-xs", isLight ? "text-gray-500" : "text-gray-400"), children: "Latest updates" })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: () => setIsOpen(false),
+              className: clsx("p-1 rounded hover:bg-gray-100", !isLight && "hover:bg-gray-800"),
+              children: /* @__PURE__ */ jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M18 6L6 18M6 6l12 12" }) })
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: styles.content, children: versions.slice(0, 5).map((version) => /* @__PURE__ */ jsxs("div", { className: styles.version, children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.versionHeader, children: [
+            /* @__PURE__ */ jsx("span", { className: "text-lg", children: version.emoji || "\u{1F4E6}" }),
+            /* @__PURE__ */ jsx("span", { className: clsx(styles.versionTitle, isLight ? "text-gray-900" : "text-white"), children: version.title }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: clsx(
+                  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
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: clsx("text-xs mb-2", isLight ? "text-gray-500" : "text-gray-400"), children: [
+            "v",
+            version.version,
+            " \xB7 ",
+            new Date(version.releaseDate).toLocaleDateString()
+          ] }),
+          version.description && /* @__PURE__ */ jsx("p", { className: clsx("text-sm mb-2", isLight ? "text-gray-600" : "text-gray-300"), children: version.description }),
+          version.features && version.features.length > 0 && /* @__PURE__ */ jsx("ul", { className: styles.versionFeatures, children: version.features.map((feature, i) => /* @__PURE__ */ jsxs("li", { className: clsx(styles.versionFeature, isLight ? "text-gray-600" : "text-gray-300"), children: [
+            /* @__PURE__ */ jsx("span", { className: "text-green-500 mt-0.5", children: "\u2713" }),
+            feature
+          ] }, i)) })
+        ] }, version.id)) }),
+        /* @__PURE__ */ jsxs("div", { className: clsx(styles.footer, isLight ? styles.footerLight : styles.footerDark), children: [
+          showBranding && /* @__PURE__ */ jsx(
+            "a",
+            {
+              href: "https://versionpill.com",
+              target: "_blank",
+              rel: "noopener noreferrer",
+              className: clsx(styles.branding, isLight ? "text-gray-400" : "text-gray-500"),
+              children: /* @__PURE__ */ jsx("span", { children: "Powered by Version Pill" })
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `${baseUrl}/${projectId}/roadmap`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: clsx(styles.button, styles.buttonSecondary),
+                children: "\u{1F4A1} Roadmap"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: `${baseUrl}/${projectId}/changelog`,
+                target: "_blank",
+                rel: "noopener noreferrer",
+                className: clsx(styles.button, styles.buttonPrimary),
+                style: accentColor ? { backgroundColor: accentColor } : void 0,
+                children: "View All"
+              }
+            )
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function Changelog({
+  projectId,
+  baseUrl = DEFAULT_BASE_URL,
+  maxHeight = 600,
+  theme = "auto",
+  className
+}) {
+  const resolvedTheme = useTheme(theme);
+  return /* @__PURE__ */ jsx(
+    "iframe",
+    {
+      src: `${baseUrl}/embed/${projectId}/changelog?theme=${resolvedTheme}`,
+      className: clsx(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__ */ jsx(
+    "iframe",
+    {
+      src: `${baseUrl}/embed/${projectId}/roadmap?theme=${resolvedTheme}`,
+      className: clsx(styles.iframe, className),
+      style: { height: maxHeight },
+      title: "Roadmap"
+    }
+  );
+}
+var index_default = VersionPill;
+export {
+  Changelog,
+  Roadmap,
+  VersionPill,
+  index_default as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useState, useEffect, useCallback } from \"react\";\nimport clsx from \"clsx\";\n\n// =============================================================================\n// TYPES\n// =============================================================================\n\nexport interface Version {\n  id: string;\n  version: string;\n  type: \"major\" | \"minor\" | \"patch\";\n  title: string;\n  description?: string;\n  emoji?: string;\n  features?: string[];\n  releaseDate: number;\n  isActive: boolean;\n}\n\nexport interface VersionPillConfig {\n  /** Your project slug from Version Pill dashboard */\n  projectId: string;\n  /** Version Pill API base URL (default: https://versionpill.com) */\n  baseUrl?: string;\n}\n\nexport interface VersionPillProps extends VersionPillConfig {\n  /** Position of the pill */\n  position?: \"top-left\" | \"top-right\" | \"bottom-left\" | \"bottom-right\" | \"inline\";\n  /** Custom class name */\n  className?: string;\n  /** Theme */\n  theme?: \"light\" | \"dark\" | \"auto\";\n  /** Show \"Powered by Version Pill\" branding */\n  showBranding?: boolean;\n  /** Accent color (hex) */\n  accentColor?: string;\n  /** Callback when a new version is detected */\n  onNewVersion?: (version: Version) => void;\n}\n\nexport interface ChangelogProps extends VersionPillConfig {\n  /** Max height in pixels */\n  maxHeight?: number;\n  /** Theme */\n  theme?: \"light\" | \"dark\" | \"auto\";\n  /** Custom class name */\n  className?: string;\n}\n\nexport interface RoadmapProps extends VersionPillConfig {\n  /** Max height in pixels */\n  maxHeight?: number;\n  /** Theme */\n  theme?: \"light\" | \"dark\" | \"auto\";\n  /** Custom class name */\n  className?: string;\n}\n\n// =============================================================================\n// CONSTANTS\n// =============================================================================\n\nconst DEFAULT_BASE_URL = \"https://versionpill.com\";\n\n// =============================================================================\n// STYLES\n// =============================================================================\n\nconst styles = {\n  pill: `\n    inline-flex items-center gap-1.5 px-2.5 py-1\n    text-xs font-medium rounded-full cursor-pointer\n    transition-all duration-200 select-none\n    border shadow-sm hover:shadow-md\n  `,\n  pillLight: `bg-white text-gray-700 border-gray-200 hover:border-gray-300`,\n  pillDark: `bg-gray-900 text-gray-100 border-gray-700 hover:border-gray-600`,\n\n  modal: `fixed inset-0 z-[99999] flex items-center justify-center p-4`,\n  backdrop: `absolute inset-0 bg-black/50 backdrop-blur-sm`,\n  panel: `relative w-full max-w-md max-h-[80vh] overflow-hidden rounded-xl shadow-2xl`,\n  panelLight: `bg-white`,\n  panelDark: `bg-gray-900`,\n\n  header: `p-4 border-b flex items-center justify-between`,\n  headerLight: `border-gray-100`,\n  headerDark: `border-gray-800`,\n\n  content: `p-4 overflow-y-auto max-h-[60vh]`,\n\n  version: `mb-4 last:mb-0`,\n  versionHeader: `flex items-center gap-2 mb-2`,\n  versionTitle: `font-semibold`,\n  versionBadge: `px-1.5 py-0.5 text-[10px] font-medium rounded`,\n  versionFeatures: `space-y-1 mt-2`,\n  versionFeature: `flex items-start gap-2 text-sm`,\n\n  footer: `p-3 border-t flex items-center justify-between`,\n  footerLight: `border-gray-100 bg-gray-50`,\n  footerDark: `border-gray-800 bg-gray-950`,\n\n  button: `px-3 py-1.5 text-xs font-medium rounded-lg transition-colors`,\n  buttonPrimary: `bg-blue-600 text-white hover:bg-blue-700`,\n  buttonSecondary: `text-gray-500 hover:text-gray-700`,\n\n  branding: `text-[10px] opacity-40 flex items-center gap-1`,\n  newDot: `w-2 h-2 rounded-full bg-green-500 animate-pulse`,\n\n  iframe: `w-full border-0`,\n};\n\n// =============================================================================\n// HOOKS\n// =============================================================================\n\nfunction useTheme(theme: \"light\" | \"dark\" | \"auto\"): \"light\" | \"dark\" {\n  const [resolved, setResolved] = useState<\"light\" | \"dark\">(\"light\");\n\n  useEffect(() => {\n    if (theme === \"auto\") {\n      const isDark = window.matchMedia(\"(prefers-color-scheme: dark)\").matches;\n      setResolved(isDark ? \"dark\" : \"light\");\n\n      const listener = (e: MediaQueryListEvent) => setResolved(e.matches ? \"dark\" : \"light\");\n      const mq = window.matchMedia(\"(prefers-color-scheme: dark)\");\n      mq.addEventListener(\"change\", listener);\n      return () => mq.removeEventListener(\"change\", listener);\n    } else {\n      setResolved(theme);\n    }\n  }, [theme]);\n\n  return resolved;\n}\n\n// =============================================================================\n// VERSION PILL COMPONENT\n// =============================================================================\n\nexport function VersionPill({\n  projectId,\n  baseUrl = DEFAULT_BASE_URL,\n  position = \"inline\",\n  className,\n  theme = \"auto\",\n  showBranding = true,\n  accentColor,\n  onNewVersion,\n}: VersionPillProps) {\n  const [versions, setVersions] = useState<Version[]>([]);\n  const [loading, setLoading] = useState(true);\n  const [error, setError] = useState<string | null>(null);\n  const [isOpen, setIsOpen] = useState(false);\n  const [hasNewVersion, setHasNewVersion] = useState(false);\n\n  const resolvedTheme = useTheme(theme);\n  const isLight = resolvedTheme === \"light\";\n\n  const fetchChangelog = useCallback(async () => {\n    try {\n      const response = await fetch(`${baseUrl}/api/changelog/${projectId}?limit=10`);\n      if (!response.ok) throw new Error(\"Failed to fetch changelog\");\n\n      const data = await response.json();\n      setVersions(data);\n\n      const storedVersion = localStorage.getItem(`vp_${projectId}_seen`);\n      if (data.length > 0 && data[0].version !== storedVersion) {\n        setHasNewVersion(true);\n        onNewVersion?.(data[0]);\n      }\n    } catch (err: any) {\n      setError(err.message);\n    } finally {\n      setLoading(false);\n    }\n  }, [projectId, baseUrl, onNewVersion]);\n\n  useEffect(() => {\n    fetchChangelog();\n  }, [fetchChangelog]);\n\n  const handleOpen = () => {\n    setIsOpen(true);\n    if (versions.length > 0) {\n      localStorage.setItem(`vp_${projectId}_seen`, versions[0].version);\n      setHasNewVersion(false);\n    }\n  };\n\n  const currentVersion = versions[0];\n\n  const positionStyles: Record<string, string> = {\n    \"top-left\": \"fixed top-4 left-4 z-[9999]\",\n    \"top-right\": \"fixed top-4 right-4 z-[9999]\",\n    \"bottom-left\": \"fixed bottom-4 left-4 z-[9999]\",\n    \"bottom-right\": \"fixed bottom-4 right-4 z-[9999]\",\n    inline: \"\",\n  };\n\n  if (loading) {\n    return (\n      <div className={clsx(positionStyles[position], className)}>\n        <div className={clsx(styles.pill, isLight ? styles.pillLight : styles.pillDark)}>\n          <span className=\"opacity-50\">...</span>\n        </div>\n      </div>\n    );\n  }\n\n  if (error || !currentVersion) return null;\n\n  return (\n    <>\n      <div className={clsx(positionStyles[position], className)}>\n        <button\n          onClick={handleOpen}\n          className={clsx(styles.pill, isLight ? styles.pillLight : styles.pillDark)}\n          style={accentColor ? { borderColor: accentColor } : undefined}\n        >\n          {hasNewVersion && <span className={styles.newDot} />}\n          <span>v{currentVersion.version}</span>\n          <svg width=\"12\" height=\"12\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n            <path d=\"M6 9l6 6 6-6\" />\n          </svg>\n        </button>\n      </div>\n\n      {isOpen && (\n        <div className={styles.modal}>\n          <div className={styles.backdrop} onClick={() => setIsOpen(false)} />\n          <div className={clsx(styles.panel, isLight ? styles.panelLight : styles.panelDark)}>\n            <div className={clsx(styles.header, isLight ? styles.headerLight : styles.headerDark)}>\n              <div className=\"flex items-center gap-2\">\n                <span className=\"text-lg\">{currentVersion.emoji || \"✨\"}</span>\n                <div>\n                  <h2 className={clsx(\"font-semibold\", isLight ? \"text-gray-900\" : \"text-white\")}>What's New</h2>\n                  <p className={clsx(\"text-xs\", isLight ? \"text-gray-500\" : \"text-gray-400\")}>\n                    Latest updates\n                  </p>\n                </div>\n              </div>\n              <button\n                onClick={() => setIsOpen(false)}\n                className={clsx(\"p-1 rounded hover:bg-gray-100\", !isLight && \"hover:bg-gray-800\")}\n              >\n                <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\">\n                  <path d=\"M18 6L6 18M6 6l12 12\" />\n                </svg>\n              </button>\n            </div>\n\n            <div className={styles.content}>\n              {versions.slice(0, 5).map((version) => (\n                <div key={version.id} className={styles.version}>\n                  <div className={styles.versionHeader}>\n                    <span className=\"text-lg\">{version.emoji || \"📦\"}</span>\n                    <span className={clsx(styles.versionTitle, isLight ? \"text-gray-900\" : \"text-white\")}>\n                      {version.title}\n                    </span>\n                    <span\n                      className={clsx(\n                        styles.versionBadge,\n                        version.type === \"major\" ? \"bg-purple-100 text-purple-700\" :\n                        version.type === \"minor\" ? \"bg-blue-100 text-blue-700\" :\n                        \"bg-gray-100 text-gray-700\"\n                      )}\n                    >\n                      {version.type}\n                    </span>\n                  </div>\n                  <div className={clsx(\"text-xs mb-2\", isLight ? \"text-gray-500\" : \"text-gray-400\")}>\n                    v{version.version} · {new Date(version.releaseDate).toLocaleDateString()}\n                  </div>\n                  {version.description && (\n                    <p className={clsx(\"text-sm mb-2\", isLight ? \"text-gray-600\" : \"text-gray-300\")}>\n                      {version.description}\n                    </p>\n                  )}\n                  {version.features && version.features.length > 0 && (\n                    <ul className={styles.versionFeatures}>\n                      {version.features.map((feature, i) => (\n                        <li key={i} className={clsx(styles.versionFeature, isLight ? \"text-gray-600\" : \"text-gray-300\")}>\n                          <span className=\"text-green-500 mt-0.5\">✓</span>\n                          {feature}\n                        </li>\n                      ))}\n                    </ul>\n                  )}\n                </div>\n              ))}\n            </div>\n\n            <div className={clsx(styles.footer, isLight ? styles.footerLight : styles.footerDark)}>\n              {showBranding && (\n                <a\n                  href=\"https://versionpill.com\"\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={clsx(styles.branding, isLight ? \"text-gray-400\" : \"text-gray-500\")}\n                >\n                  <span>Powered by Version Pill</span>\n                </a>\n              )}\n              <div className=\"flex items-center gap-2\">\n                <a\n                  href={`${baseUrl}/${projectId}/roadmap`}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={clsx(styles.button, styles.buttonSecondary)}\n                >\n                  💡 Roadmap\n                </a>\n                <a\n                  href={`${baseUrl}/${projectId}/changelog`}\n                  target=\"_blank\"\n                  rel=\"noopener noreferrer\"\n                  className={clsx(styles.button, styles.buttonPrimary)}\n                  style={accentColor ? { backgroundColor: accentColor } : undefined}\n                >\n                  View All\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      )}\n    </>\n  );\n}\n\n// =============================================================================\n// CHANGELOG EMBED COMPONENT\n// =============================================================================\n\nexport function Changelog({\n  projectId,\n  baseUrl = DEFAULT_BASE_URL,\n  maxHeight = 600,\n  theme = \"auto\",\n  className,\n}: ChangelogProps) {\n  const resolvedTheme = useTheme(theme);\n\n  return (\n    <iframe\n      src={`${baseUrl}/embed/${projectId}/changelog?theme=${resolvedTheme}`}\n      className={clsx(styles.iframe, className)}\n      style={{ height: maxHeight }}\n      title=\"Changelog\"\n    />\n  );\n}\n\n// =============================================================================\n// ROADMAP EMBED COMPONENT\n// =============================================================================\n\nexport function Roadmap({\n  projectId,\n  baseUrl = DEFAULT_BASE_URL,\n  maxHeight = 800,\n  theme = \"auto\",\n  className,\n}: RoadmapProps) {\n  const resolvedTheme = useTheme(theme);\n\n  return (\n    <iframe\n      src={`${baseUrl}/embed/${projectId}/roadmap?theme=${resolvedTheme}`}\n      className={clsx(styles.iframe, className)}\n      style={{ height: maxHeight }}\n      title=\"Roadmap\"\n    />\n  );\n}\n\n// =============================================================================\n// EXPORTS\n// =============================================================================\n\nexport default VersionPill;\n"],"mappings":"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","names":[]}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "version-pill-react",
+  "version": "1.0.0",
+  "description": "React components for Version Pill - embed changelog, roadmap & feedback widgets in your app",
+  "author": "Jimmy Harika <jimmy@jimmyharika.com>",
+  "homepage": "https://versionpill.com",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/jimmyharika/convex-logbook"
+  },
+  "bugs": {
+    "url": "https://github.com/jimmyharika/convex-logbook/issues"
+  },
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.1",
+    "react-dom": "^19.2.1",
+    "tsup": "^8.0.0",
+    "typescript": "^5.9.3"
+  },
+  "keywords": [
+    "changelog",
+    "version",
+    "widget",
+    "react",
+    "roadmap",
+    "feedback",
+    "version-pill",
+    "versionpill",
+    "release-notes",
+    "whats-new",
+    "product-updates",
+    "feature-requests"
+  ],
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}