@rlse/widget 0.1.0

package/README.md

@@ -0,0 +1,36 @@
+# @rlse/widget
+
+React component for embedding rlse.dev release notes in your application.
+
+## Installation
+
+```bash
+npm install @rlse/widget
+```
+
+## Usage
+
+```tsx
+import { RlseWidget } from '@rlse/widget';
+
+function App() {
+  return (
+    <RlseWidget
+      orgSlug="your-org-slug"
+      trigger="both"
+      position="bottom-right"
+    />
+  );
+}
+```
+
+## Configuration
+
+See full documentation at [docs/WIDGET_SETUP.md](../../docs/WIDGET_SETUP.md).
+
+## Development
+
+```bash
+bun install
+bun run build
+```

package/dist/ChangesModal.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { WidgetConfig, Change } from './types';
+interface ChangesModalProps {
+    config: Required<WidgetConfig>;
+    changes: Change[];
+    isLoading: boolean;
+    isOpen: boolean;
+    onClose: () => void;
+    onMarkAsRead: () => void;
+}
+export declare function ChangesModal({ config, changes, isLoading, isOpen, onClose, onMarkAsRead, }: ChangesModalProps): React.ReactElement | null;
+export {};

package/dist/ChangesModal.js

@@ -0,0 +1,177 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect } from 'react';
+import { markAllChangesAsSeen, getUnreadCount } from './storage';
+/**
+ * Render a change description for display in the widget.
+ * - HTML content (new format, stored after the rich-content migration): passed
+ *   through directly after stripping event-handler attributes and javascript: URLs.
+ *   Content is sanitised at the write path before storage.
+ * - Markdown content (legacy records): converted via simpleMarkdownToHtml so
+ *   older records continue to render correctly without a DB migration.
+ */
+function renderDescription(content) {
+    if (!content)
+        return '';
+    if (content.trimStart().startsWith('<')) {
+        return content
+            .replace(/\s+on\w+\s*=\s*(?:"[^"]*"|'[^']*'|[^\s>]*)/gi, '')
+            .replace(/href\s*=\s*"javascript:[^"]*"/gi, '')
+            .replace(/href\s*=\s*'javascript:[^']*'/gi, '');
+    }
+    return simpleMarkdownToHtml(content);
+}
+function simpleMarkdownToHtml(markdown) {
+    // Helper to sanitize URLs - only allow safe protocols
+    const isSafeUrl = (url) => {
+        try {
+            const parsed = new URL(url, 'http://example.com');
+            const protocol = parsed.protocol.replace(':', '');
+            return ['http', 'https', 'mailto', 'tel'].includes(protocol);
+        }
+        catch {
+            // Relative URLs are OK
+            return (url.startsWith('/') ||
+                url.startsWith('./') ||
+                url.startsWith('../') ||
+                !url.includes(':'));
+        }
+    };
+    return markdown
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/__(.+?)__/g, '<strong>$1</strong>')
+        .replace(/\*(.+?)\*/g, '<em>$1</em>')
+        .replace(/_(.+?)_/g, '<em>$1</em>')
+        .replace(/`(.+?)`/g, '<code>$1</code>')
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+        if (isSafeUrl(url)) {
+            // Escape quotes in URL to prevent injection
+            const safeUrl = url.replace(/"/g, '%22').replace(/'/g, '%27');
+            return `<a href="${safeUrl}" target="_blank" rel="noopener">${text}</a>`;
+        }
+        return text; // Return plain text for unsafe URLs
+    })
+        .split('\n\n')
+        .map((para) => `<p>${para}</p>`)
+        .join('');
+}
+function ChangeCard({ change, showStatus, showDates, }) {
+    const date = new Date(change._creationTime).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
+    const descriptionHtml = renderDescription(change.changeDescription);
+    return (_jsxs("article", { style: { padding: '20px 0', borderBottom: '1px solid var(--border)' }, children: [_jsxs("div", { style: {
+                    display: 'flex',
+                    alignItems: 'flex-start',
+                    justifyContent: 'space-between',
+                    gap: 12,
+                    marginBottom: 8,
+                }, children: [_jsx("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: change.changeName }), showStatus && (_jsx("span", { style: {
+                            fontSize: 12,
+                            fontWeight: 500,
+                            padding: '4px 10px',
+                            borderRadius: 20,
+                            background: 'rgba(59, 130, 246, 0.1)',
+                            color: '#3b82f6',
+                            border: '1px solid #3b82f6',
+                            whiteSpace: 'nowrap',
+                        }, children: change.currentStatus }))] }), _jsx("p", { style: {
+                    margin: '8px 0',
+                    fontSize: 14,
+                    color: '#64748b',
+                    lineHeight: 1.5,
+                }, children: change.changeSummary }), _jsx("div", { style: { margin: '12px 0 0', fontSize: 14, lineHeight: 1.6 }, dangerouslySetInnerHTML: { __html: descriptionHtml } }), showDates && (_jsx("div", { style: { marginTop: 12, fontSize: 12, color: '#64748b' }, children: date }))] }));
+}
+export function ChangesModal({ config, changes, isLoading, isOpen, onClose, onMarkAsRead, }) {
+    const handleMarkAsRead = useCallback(() => {
+        const changeIds = changes.map((c) => c._id);
+        markAllChangesAsSeen(config.orgSlug, changeIds);
+        onMarkAsRead();
+    }, [changes, config.orgSlug, onMarkAsRead]);
+    // Close on escape key
+    useEffect(() => {
+        if (!isOpen)
+            return;
+        const handleEscape = (e) => {
+            if (e.key === 'Escape') {
+                onClose();
+            }
+        };
+        document.addEventListener('keydown', handleEscape);
+        document.body.style.overflow = 'hidden';
+        return () => {
+            document.removeEventListener('keydown', handleEscape);
+            document.body.style.overflow = '';
+        };
+    }, [isOpen, onClose]);
+    if (!isOpen)
+        return null;
+    const releaseNotesUrl = config.appSlug
+        ? `${config.baseUrl}/${config.orgSlug}/${config.appSlug}`
+        : `${config.baseUrl}/${config.orgSlug}`;
+    const unreadCount = getUnreadCount(config.orgSlug, changes);
+    return (_jsx("div", { role: "dialog", "aria-modal": "true", "aria-labelledby": "rlse-widget-title", onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        }, style: {
+            position: 'fixed',
+            inset: 0,
+            background: 'rgba(0, 0, 0, 0.5)',
+            zIndex: 9999,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 20,
+        }, children: _jsxs("div", { style: {
+                background: 'var(--background, white)',
+                borderRadius: 12,
+                width: '100%',
+                maxWidth: 600,
+                maxHeight: '80vh',
+                display: 'flex',
+                flexDirection: 'column',
+                boxShadow: '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
+            }, children: [_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '20px 24px',
+                        borderBottom: '1px solid var(--border, #e2e8f0)',
+                    }, children: [_jsx("h2", { id: "rlse-widget-title", style: { margin: 0, fontSize: 18, fontWeight: 600 }, children: config.modalTitle }), _jsx("button", { onClick: onClose, "aria-label": "Close", style: {
+                                background: 'none',
+                                border: 'none',
+                                cursor: 'pointer',
+                                padding: 8,
+                                borderRadius: 8,
+                                display: 'flex',
+                                alignItems: 'center',
+                                justifyContent: 'center',
+                            }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "M18 6 6 18" }), _jsx("path", { d: "m6 6 12 12" })] }) })] }), _jsx("div", { style: { overflowY: 'auto', padding: '0 24px 24px', flex: 1 }, children: isLoading ? (_jsx("div", { style: { padding: 40, textAlign: 'center' }, children: _jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", style: { animation: 'spin 1s linear infinite' }, children: [_jsx("style", { children: `@keyframes spin{to{transform:rotate(360deg)}}` }), _jsx("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })] }) })) : changes.length === 0 ? (_jsx("div", { style: { padding: 40, textAlign: 'center', color: '#64748b' }, children: _jsx("p", { children: "No release notes yet. Check back soon!" }) })) : (changes.map((change) => (_jsx(ChangeCard, { change: change, showStatus: config.showStatus, showDates: config.showDates }, change._id)))) }), !isLoading && changes.length > 0 && (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        padding: '16px 24px',
+                        borderTop: '1px solid var(--border, #e2e8f0)',
+                        gap: 12,
+                    }, children: [_jsx("button", { onClick: handleMarkAsRead, disabled: unreadCount === 0, style: {
+                                fontSize: 14,
+                                padding: '8px 16px',
+                                borderRadius: 8,
+                                border: 'none',
+                                background: config.primaryColor || '#3b82f6',
+                                color: 'white',
+                                cursor: unreadCount === 0 ? 'default' : 'pointer',
+                                fontWeight: 500,
+                                opacity: unreadCount === 0 ? 0.5 : 1,
+                            }, children: unreadCount === 0 ? 'All caught up' : 'Mark all as read' }), _jsx("a", { href: releaseNotesUrl, target: "_blank", rel: "noopener", style: {
+                                fontSize: 14,
+                                color: config.primaryColor || '#3b82f6',
+                                textDecoration: 'none',
+                                fontWeight: 500,
+                            }, children: "View all \u2192" })] }))] }) }));
+}

package/dist/RlseWidget.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { WidgetConfig } from './types';
+export interface RlseWidgetProps extends WidgetConfig {
+}
+export declare function RlseWidget(props: RlseWidgetProps): React.ReactElement | null;

package/dist/RlseWidget.js

@@ -0,0 +1,76 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback, useRef } from 'react';
+import { DEFAULT_CONFIG } from './types';
+import { useWidgetData } from './useWidgetData';
+import { TriggerButton } from './TriggerButton';
+import { ChangesModal } from './ChangesModal';
+import { setLastVisit, getUnreadCount, shouldAutoShow } from './storage';
+export function RlseWidget(props) {
+    const config = { ...DEFAULT_CONFIG, ...props };
+    // Hooks must be called before any early return
+    const { changes, isLoading, refetch } = useWidgetData(config.orgSlug, config.appSlug, config.limit, config.baseUrl);
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const [hasAutoShown, setHasAutoShown] = useState(false);
+    const prevIsModalOpenRef = useRef(isModalOpen);
+    const handleOpen = useCallback(() => {
+        setIsModalOpen(true);
+    }, []);
+    const handleClose = useCallback(() => {
+        setIsModalOpen(false);
+    }, []);
+    const handleMarkAsRead = useCallback(() => {
+        // Force re-render to update badge
+        refetch();
+    }, [refetch]);
+    // Validate after hooks
+    if (!config.orgSlug) {
+        console.error('RlseWidget: orgSlug is required');
+        return null;
+    }
+    // Auto-show logic
+    useEffect(() => {
+        if (!config.orgSlug)
+            return; // Guard: noop when orgSlug is falsy
+        if (hasAutoShown)
+            return;
+        if (config.trigger === 'manual')
+            return;
+        if (isLoading || changes.length === 0)
+            return;
+        const unreadCount = getUnreadCount(config.orgSlug, changes);
+        if (unreadCount === 0)
+            return;
+        const shouldShow = shouldAutoShow(config.orgSlug, config.autoShowAfter);
+        if (shouldShow) {
+            const timer = setTimeout(() => {
+                setIsModalOpen(true);
+                setHasAutoShown(true);
+            }, 1000);
+            return () => clearTimeout(timer);
+        }
+        // Update last visit
+        setLastVisit(config.orgSlug);
+        return undefined;
+    }, [
+        hasAutoShown,
+        config.trigger,
+        config.orgSlug,
+        config.autoShowAfter,
+        isLoading,
+        changes,
+    ]);
+    // Update last visit only when modal transitions from open to closed
+    useEffect(() => {
+        if (!config.orgSlug)
+            return; // Guard: noop when orgSlug is falsy
+        if (prevIsModalOpenRef.current && !isModalOpen) {
+            setLastVisit(config.orgSlug);
+        }
+        prevIsModalOpenRef.current = isModalOpen;
+    }, [isModalOpen, config.orgSlug]);
+    // Don't render trigger if trigger is 'auto' only
+    if (config.trigger === 'auto') {
+        return (_jsx(ChangesModal, { config: config, changes: changes, isLoading: isLoading, isOpen: isModalOpen, onClose: handleClose, onMarkAsRead: handleMarkAsRead }));
+    }
+    return (_jsxs(_Fragment, { children: [_jsx(TriggerButton, { config: config, changes: changes, onClick: handleOpen }), _jsx(ChangesModal, { config: config, changes: changes, isLoading: isLoading, isOpen: isModalOpen, onClose: handleClose, onMarkAsRead: handleMarkAsRead })] }));
+}

package/dist/TriggerButton.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { WidgetConfig } from './types';
+import type { Change } from './types';
+interface TriggerButtonProps {
+    config: Required<WidgetConfig>;
+    changes: Change[];
+    onClick: () => void;
+}
+export declare function TriggerButton({ config, changes, onClick, }: TriggerButtonProps): React.ReactElement;
+export {};

package/dist/TriggerButton.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getUnreadCount } from './storage';
+const positionStyles = {
+    'bottom-right': { position: 'fixed', bottom: 20, right: 20 },
+    'bottom-left': { position: 'fixed', bottom: 20, left: 20 },
+    'top-right': { position: 'fixed', top: 20, right: 20 },
+    'top-left': { position: 'fixed', top: 20, left: 20 },
+};
+export function TriggerButton({ config, changes, onClick, }) {
+    const unreadCount = getUnreadCount(config.orgSlug, changes);
+    return (_jsxs("button", { onClick: onClick, "aria-label": config.triggerLabel, style: {
+            ...positionStyles[config.position],
+            zIndex: 9998,
+            width: 56,
+            height: 56,
+            borderRadius: '50%',
+            border: 'none',
+            cursor: 'pointer',
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            background: config.primaryColor || '#3b82f6',
+            color: 'white',
+            boxShadow: '0 4px 14px 0 rgba(59, 130, 246, 0.39)',
+            transition: 'transform 0.2s ease, box-shadow 0.2s ease',
+        }, onMouseEnter: (e) => {
+            e.currentTarget.style.transform = 'scale(1.05)';
+            e.currentTarget.style.boxShadow =
+                '0 6px 20px 0 rgba(59, 130, 246, 0.23)';
+        }, onMouseLeave: (e) => {
+            e.currentTarget.style.transform = 'scale(1)';
+            e.currentTarget.style.boxShadow =
+                '0 4px 14px 0 rgba(59, 130, 246, 0.39)';
+        }, children: [_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [_jsx("path", { d: "m12 3-1.912 5.813a2 2 0 0 1-1.275 1.275L3 12l5.813 1.912a2 2 0 0 1 1.275 1.275L12 21l1.912-5.813a2 2 0 0 1 1.275-1.275L21 12l-5.813-1.912a2 2 0 0 1-1.275-1.275L12 3Z" }), _jsx("path", { d: "M5 3v4" }), _jsx("path", { d: "M19 17v4" }), _jsx("path", { d: "M3 5h4" }), _jsx("path", { d: "M17 19h4" })] }), unreadCount > 0 && (_jsx("span", { style: {
+                    position: 'absolute',
+                    top: -2,
+                    right: -2,
+                    minWidth: 20,
+                    height: 20,
+                    padding: '0 6px',
+                    borderRadius: 10,
+                    background: '#ef4444',
+                    color: 'white',
+                    fontSize: 12,
+                    fontWeight: 600,
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    border: '2px solid white',
+                }, children: unreadCount > 99 ? '99+' : unreadCount }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { RlseWidget } from './RlseWidget';
+export type { RlseWidgetProps } from './RlseWidget';
+export type { WidgetConfig, Change, WidgetChangesResponse } from './types';

package/dist/index.js

@@ -0,0 +1 @@
+export { RlseWidget } from './RlseWidget';

package/dist/storage.d.ts

@@ -0,0 +1,11 @@
+export declare function getStorageKey(orgSlug: string): string;
+export declare function getLastVisitKey(orgSlug: string): string;
+export declare function getSeenChangesKey(orgSlug: string): string;
+export declare function getLastVisit(orgSlug: string): number | null;
+export declare function setLastVisit(orgSlug: string): void;
+export declare function getSeenChanges(orgSlug: string): string[];
+export declare function markAllChangesAsSeen(orgSlug: string, changeIds: string[]): void;
+export declare function getUnreadCount(orgSlug: string, changes: {
+    _id: string;
+}[]): number;
+export declare function shouldAutoShow(orgSlug: string, autoShowAfter: number): boolean;

package/dist/storage.js

@@ -0,0 +1,80 @@
+const STORAGE_KEY_PREFIX = 'rlse_widget_';
+const LAST_VISIT_KEY_SUFFIX = '_last_visit';
+const SEEN_CHANGES_KEY_SUFFIX = '_seen';
+export function getStorageKey(orgSlug) {
+    return `${STORAGE_KEY_PREFIX}${orgSlug}`;
+}
+export function getLastVisitKey(orgSlug) {
+    return `${getStorageKey(orgSlug)}${LAST_VISIT_KEY_SUFFIX}`;
+}
+export function getSeenChangesKey(orgSlug) {
+    return `${getStorageKey(orgSlug)}${SEEN_CHANGES_KEY_SUFFIX}`;
+}
+export function getLastVisit(orgSlug) {
+    if (typeof window === 'undefined')
+        return null;
+    try {
+        const value = localStorage.getItem(getLastVisitKey(orgSlug));
+        if (!value)
+            return null;
+        const parsed = parseInt(value, 10);
+        return Number.isNaN(parsed) ? null : parsed;
+    }
+    catch {
+        return null;
+    }
+}
+export function setLastVisit(orgSlug) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(getLastVisitKey(orgSlug), Date.now().toString());
+    }
+    catch {
+        // Ignore storage errors
+    }
+}
+export function getSeenChanges(orgSlug) {
+    if (typeof window === 'undefined')
+        return [];
+    try {
+        const value = localStorage.getItem(getSeenChangesKey(orgSlug));
+        if (!value)
+            return [];
+        const parsed = JSON.parse(value);
+        // Validate that parsed is an array of strings
+        if (!Array.isArray(parsed) ||
+            !parsed.every((item) => typeof item === 'string')) {
+            return [];
+        }
+        return parsed;
+    }
+    catch {
+        return [];
+    }
+}
+export function markAllChangesAsSeen(orgSlug, changeIds) {
+    if (typeof window === 'undefined')
+        return;
+    try {
+        localStorage.setItem(getSeenChangesKey(orgSlug), JSON.stringify(changeIds));
+    }
+    catch {
+        // Ignore storage errors
+    }
+}
+export function getUnreadCount(orgSlug, changes) {
+    if (typeof window === 'undefined')
+        return 0;
+    const seen = getSeenChanges(orgSlug);
+    return changes.filter((c) => !seen.includes(c._id)).length;
+}
+export function shouldAutoShow(orgSlug, autoShowAfter) {
+    if (typeof window === 'undefined')
+        return false;
+    const lastVisit = getLastVisit(orgSlug);
+    if (!lastVisit)
+        return true; // First visit
+    const daysSinceVisit = (Date.now() - lastVisit) / (1000 * 60 * 60 * 24);
+    return daysSinceVisit >= autoShowAfter;
+}

package/dist/types.d.ts

@@ -0,0 +1,54 @@
+export interface WidgetConfig {
+    /** Organization slug (required) */
+    orgSlug: string;
+    /** Optional app slug to filter changes */
+    appSlug?: string;
+    /** Trigger behavior: 'auto', 'manual', or 'both' */
+    trigger?: 'auto' | 'manual' | 'both';
+    /** Days since last visit to auto-show (for 'auto' or 'both') */
+    autoShowAfter?: number;
+    /** Maximum changes to display */
+    limit?: number;
+    /** Show status badges */
+    showStatus?: boolean;
+    /** Show creation dates */
+    showDates?: boolean;
+    /** Button position for manual trigger */
+    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
+    /** Theme: 'light', 'dark', or 'auto' */
+    theme?: 'light' | 'dark' | 'auto';
+    /** Primary accent color (hex) */
+    primaryColor?: string;
+    /** Button text */
+    triggerLabel?: string;
+    /** Modal title */
+    modalTitle?: string;
+    /** Base URL for API (optional, defaults to https://rlse.dev) */
+    baseUrl?: string;
+}
+export interface Change {
+    _id: string;
+    _creationTime: number;
+    changeName: string;
+    changeSummary: string;
+    changeDescription: string;
+    currentStatus: string;
+    appName?: string;
+    appSlug?: string;
+}
+export interface WidgetChangesResponse {
+    org: {
+        orgName: string;
+        orgSlug: string;
+    };
+    app?: {
+        appName: string;
+        appSlug: string;
+    };
+    changes: Change[];
+    meta: {
+        total: number;
+        limit: number;
+    };
+}
+export declare const DEFAULT_CONFIG: Partial<WidgetConfig>;

package/dist/types.js

@@ -0,0 +1,12 @@
+export const DEFAULT_CONFIG = {
+    trigger: 'manual',
+    limit: 10,
+    showStatus: true,
+    showDates: true,
+    position: 'bottom-right',
+    theme: 'auto',
+    triggerLabel: "What's New",
+    modalTitle: 'Release Notes',
+    baseUrl: 'https://rlse.dev',
+    autoShowAfter: 7,
+};

package/dist/useWidgetData.d.ts

@@ -0,0 +1,9 @@
+import type { Change } from './types';
+interface UseWidgetDataResult {
+    changes: Change[];
+    isLoading: boolean;
+    error: Error | null;
+    refetch: () => Promise<void>;
+}
+export declare function useWidgetData(orgSlug: string, appSlug: string | undefined, limit: number, baseUrl: string): UseWidgetDataResult;
+export {};

package/dist/useWidgetData.js

@@ -0,0 +1,63 @@
+import { useState, useEffect, useCallback, useRef } from 'react';
+export function useWidgetData(orgSlug, appSlug, limit, baseUrl) {
+    const [changes, setChanges] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const [error, setError] = useState(null);
+    const abortControllerRef = useRef(null);
+    const fetchChanges = useCallback(async () => {
+        // Cancel any in-flight request
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+        }
+        abortControllerRef.current = new AbortController();
+        setIsLoading(true);
+        setError(null);
+        try {
+            // Validate baseUrl
+            if (!baseUrl || typeof baseUrl !== 'string') {
+                throw new Error(`Invalid baseUrl: ${baseUrl}`);
+            }
+            let url;
+            try {
+                url = new URL(`${baseUrl}/api/widget/changes`);
+            }
+            catch {
+                throw new Error(`Invalid baseUrl for widget API: ${baseUrl}`);
+            }
+            url.searchParams.set('orgSlug', orgSlug);
+            if (appSlug) {
+                url.searchParams.set('appSlug', appSlug);
+            }
+            url.searchParams.set('limit', limit.toString());
+            const response = await fetch(url.toString(), {
+                signal: abortControllerRef.current.signal,
+            });
+            if (!response.ok) {
+                throw new Error(`Failed to fetch changes: ${response.status}`);
+            }
+            const data = await response.json();
+            setChanges(data.changes);
+        }
+        catch (err) {
+            // Don't update state if request was aborted
+            if (err instanceof Error && err.name === 'AbortError') {
+                return;
+            }
+            setError(err instanceof Error ? err : new Error('Unknown error'));
+            setChanges([]);
+        }
+        finally {
+            setIsLoading(false);
+        }
+    }, [orgSlug, appSlug, limit, baseUrl]);
+    useEffect(() => {
+        fetchChanges();
+        return () => {
+            // Cleanup: abort in-flight request on unmount
+            if (abortControllerRef.current) {
+                abortControllerRef.current.abort();
+            }
+        };
+    }, [fetchChanges]);
+    return { changes, isLoading, error, refetch: fetchChanges };
+}

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@rlse/widget",
+  "version": "0.1.0",
+  "description": "React release notes widget for rlse.dev",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "test": "bun test src",
+    "prepublishOnly": "bun run build"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "bun-types": "latest",
+    "typescript": "^5.0.0"
+  },
+  "keywords": [
+    "release-notes",
+    "changelog",
+    "widget",
+    "react",
+    "embed"
+  ],
+  "license": "MIT"
+}