@rlse/widget 0.2.0 → 0.2.2

package/README.md

@@ -1,12 +1,14 @@
 # @rlse/widget
 
-React component for embedding [![](https://www.google.com/s2/favicons?domain=rlse.dev&sz=16) rlse.dev](https://rlse.dev) release notes directly in your application.
+Multi-framework release notes widget for [![](https://www.google.com/s2/favicons?domain=rlse.dev&sz=16) rlse.dev](https://rlse.dev). Works with React, Vue, Angular, Svelte, Astro, and vanilla JavaScript.
 
 [![npm](https://img.shields.io/npm/v/@rlse/widget)](https://www.npmjs.com/package/@rlse/widget)
 [![Socket Badge](https://badge.socket.dev/npm/package/@rlse/widget/latest)](https://socket.dev/npm/package/@rlse/widget)
 
 ## Features
 
+- **Multi-framework**: React, Vue, Angular, Svelte, Astro, Vanilla JS
+- **Three variants**: Floating button, embedded panel, dropdown menu
 - **Smart triggers**: Manual button, auto-popup on new releases, or both
 - **Unread badge**: Shows count of unseen changes
 - **App filtering**: Show changes for a specific application or all
@@ -21,6 +23,8 @@ npm install @rlse/widget
 
 ## Quick Start
 
+### React / Next.js
+
 ```tsx
 import { RlseWidget } from '@rlse/widget';
 
@@ -34,6 +38,60 @@ function App() {
 }
 ```
 
+### Vue / Nuxt
+
+```vue
+<script setup>
+import { RlseWidget } from '@rlse/widget/vue';
+</script>
+
+<template>
+  <RlseWidget org-slug="your-org-slug" />
+</template>
+```
+
+### Angular
+
+```ts
+import { RlseWidgetComponent } from '@rlse/widget/angular';
+
+@Component({
+  imports: [RlseWidgetComponent],
+  template: `<rlse-widget orgSlug="your-org-slug"></rlse-widget>`
+})
+```
+
+### Svelte / SvelteKit
+
+```svelte
+<script>
+  import { RlseWidget } from '@rlse/widget/svelte';
+</script>
+
+<RlseWidget orgSlug="your-org-slug" />
+```
+
+### Astro
+
+```astro
+---
+import { RlseWidget } from '@rlse/widget/react'; // or vue/svelte
+---
+
+<RlseWidget orgSlug="your-org-slug" client:load />
+```
+
+### Vanilla JS (CDN)
+
+```html
+<script>
+  window.rlseWidgetConfig = {
+    orgSlug: 'your-org-slug',
+  };
+</script>
+<script async src="https://rlse.dev/widget.js"></script>
+```
+
 ## Configuration
 
 ### Required
@@ -56,9 +114,15 @@ function App() {
 | `primaryColor`  | `string`                                                       | `#3b82f6`         | Accent color (hex)                    |
 | `autoShowAfter` | `number`                                                       | `7`               | Days before auto-popup triggers again |
 
-## Full Example
+## Widget Variants
+
+### RlseWidget (Floating Button)
+
+A floating trigger button that opens a modal. Best for standalone pages.
 
 ```tsx
+import { RlseWidget } from '@rlse/widget';
+
 <RlseWidget
   orgSlug="acme-corp"
   appSlug="dashboard"
@@ -66,13 +130,43 @@ function App() {
   position="bottom-right"
   theme="auto"
   limit={5}
-  triggerLabel="🎁 What's New"
-  modalTitle="Acme Release Notes"
-  primaryColor="#10b981"
-  autoShowAfter={3}
-/>
+  triggerLabel="What's New"
+  modalTitle="Release Notes"
+  primaryColor="#3b82f6"
+/>;
+```
+
+### RlseWidgetEmbed (Inline Panel)
+
+An embeddable panel for sidebars or dedicated pages. Great for dashboards.
+
+```tsx
+import { RlseWidgetEmbed } from '@rlse/widget';
+
+<RlseWidgetEmbed
+  orgSlug="acme-corp"
+  appSlug="dashboard"
+  showHeader={true}
+  showFooter={true}
+/>;
 ```
 
+### RlseWidgetMenu (Dropdown)
+
+A compact dropdown for navigation bars. Perfect for user menus.
+
+```tsx
+import { RlseWidgetMenu } from '@rlse/widget';
+
+<RlseWidgetMenu
+  orgSlug="acme-corp"
+  appSlug="dashboard"
+  triggerLabel="What's New"
+/>;
+```
+
+````
+
 ## Trigger Modes
 
 - **`manual`** — Floating button always visible; click to open. Unread badge shows unseen count.
@@ -93,7 +187,7 @@ Use `primaryColor` to match your brand:
 
 ```tsx
 <RlseWidget orgSlug="acme-corp" primaryColor="#ff6b6b" />
-```
+````
 
 ## Troubleshooting
 
@@ -119,3 +213,4 @@ Use `primaryColor` to match your brand:
 
 - Email: support@rlse.dev
 - Dashboard: Settings → Widget Embed
+- Full documentation: https://rlse.dev/docs/widget

package/dist/RlseWidgetEmbed.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useCallback } from 'react';
-import { renderDescription, formatChangeDate, getReleaseNotesUrl } from '@rlse/widget-core';
+import { renderDescription, formatChangeDate, getReleaseNotesUrl, } from '@rlse/widget-core';
 import { DEFAULT_CONFIG } from './types';
 import { useWidgetData } from './useWidgetData';
 import { markAllChangesAsSeen, getUnreadCount } from './storage';
@@ -57,7 +57,10 @@ export function RlseWidgetEmbed(props) {
                             borderRadius: 10,
                             background: config.primaryColor || '#3b82f6',
                             color: 'white',
-                        }, children: unreadCount }))] })), _jsx("div", { style: contentStyle, 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) => (_jsxs("article", { style: { padding: '16px 0', borderBottom: '1px solid var(--border, #e2e8f0)' }, children: [_jsxs("div", { style: {
+                        }, children: unreadCount }))] })), _jsx("div", { style: contentStyle, 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) => (_jsxs("article", { style: {
+                        padding: '16px 0',
+                        borderBottom: '1px solid var(--border, #e2e8f0)',
+                    }, children: [_jsxs("div", { style: {
                                 display: 'flex',
                                 alignItems: 'flex-start',
                                 justifyContent: 'space-between',

package/dist/angular/index.d.ts

@@ -1,4 +1,4 @@
 export { RlseWidgetComponent } from './components/rlse-widget.component';
-export { WidgetDataService, type WidgetDataState } from './services/widget-data.service';
+export { WidgetDataService, type WidgetDataState, } from './services/widget-data.service';
 export type { WidgetConfig, Change, WidgetChangesResponse, } from '@rlse/widget-core';
 export { DEFAULT_CONFIG } from '@rlse/widget-core';

package/dist/angular/index.js

@@ -1,5 +1,5 @@
 // Angular Components
 export { RlseWidgetComponent } from './components/rlse-widget.component';
 // Angular Services
-export { WidgetDataService } from './services/widget-data.service';
+export { WidgetDataService, } from './services/widget-data.service';
 export { DEFAULT_CONFIG } from '@rlse/widget-core';

package/dist/fetcher.d.ts

@@ -0,0 +1,19 @@
+import type { WidgetChangesResponse } from './types';
+export interface FetchChangesParams {
+    orgSlug: string;
+    appSlug?: string;
+    limit: number;
+    baseUrl: string;
+    signal?: AbortSignal;
+}
+export interface FetchChangesResult {
+    changes: WidgetChangesResponse['changes'];
+    error: Error | null;
+}
+export declare function fetchChanges({ orgSlug, appSlug, limit, baseUrl, signal, }: FetchChangesParams): Promise<FetchChangesResult>;
+export declare class WidgetDataFetcher {
+    private abortController;
+    fetch(params: Omit<FetchChangesParams, 'signal'>): Promise<FetchChangesResult>;
+    abort(): void;
+    destroy(): void;
+}

package/dist/fetcher.js

@@ -0,0 +1,64 @@
+export async function fetchChanges({ orgSlug, appSlug, limit, baseUrl, signal, }) {
+    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 });
+        if (!response.ok) {
+            throw new Error(`Failed to fetch changes: ${response.status}`);
+        }
+        const data = await response.json();
+        return { changes: data.changes, error: null };
+    }
+    catch (err) {
+        // Don't return error if request was aborted
+        if (err instanceof Error && err.name === 'AbortError') {
+            return { changes: [], error: null };
+        }
+        return {
+            changes: [],
+            error: err instanceof Error ? err : new Error('Unknown error'),
+        };
+    }
+}
+export class WidgetDataFetcher {
+    constructor() {
+        this.abortController = null;
+    }
+    async fetch(params) {
+        // Cancel any in-flight request
+        this.abort();
+        this.abortController = new AbortController();
+        const result = await fetchChanges({
+            ...params,
+            signal: this.abortController.signal,
+        });
+        // Clear controller after successful completion
+        if (this.abortController?.signal.aborted === false) {
+            this.abortController = null;
+        }
+        return result;
+    }
+    abort() {
+        if (this.abortController) {
+            this.abortController.abort();
+            this.abortController = null;
+        }
+    }
+    destroy() {
+        this.abort();
+    }
+}

package/dist/renderer.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Render a change description.
+ * - HTML content (new format): passed through after stripping event handlers
+ *   and javascript: URLs as a safety net
+ * - Markdown content (legacy records): converted via simpleMarkdownToHtml
+ */
+export declare function renderDescription(content: string): string;
+export declare function escapeHtml(text: string): string;
+export declare function formatChangeDate(timestamp: number): string;
+export declare function getReleaseNotesUrl(baseUrl: string, orgSlug: string, appSlug?: string): string;

package/dist/renderer.js

@@ -0,0 +1,92 @@
+// No external imports needed
+/**
+ * Render a change description.
+ * - HTML content (new format): passed through after stripping event handlers
+ *   and javascript: URLs as a safety net
+ * - Markdown content (legacy records): converted via simpleMarkdownToHtml
+ */
+export function renderDescription(content) {
+    if (!content)
+        return '';
+    if (content.trimStart().startsWith('<')) {
+        // HTML content: strip on* attributes and javascript: URLs
+        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);
+            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
+        // Escape HTML
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        // Bold
+        .replace(/\*\*(.+?)\*\*/g, '<strong>$1</strong>')
+        .replace(/__(.+?)__/g, '<strong>$1</strong>')
+        // Italic
+        .replace(/\*(.+?)\*/g, '<em>$1</em>')
+        .replace(/_(.+?)_/g, '<em>$1</em>')
+        // Code
+        .replace(/`(.+?)`/g, '<code style="background:var(--rlse-border);padding:2px 4px;border-radius:4px;font-family:monospace;font-size:90%;">$1</code>')
+        // Links - with URL validation
+        .replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, text, url) => {
+        if (isSafeUrl(url)) {
+            // Escape both url and text to prevent attribute injection and XSS
+            const safeUrl = url
+                .replace(/&/g, '&amp;')
+                .replace(/"/g, '&quot;')
+                .replace(/</g, '&lt;')
+                .replace(/>/g, '&gt;');
+            return `<a href="${safeUrl}" target="_blank" rel="noopener" style="color:var(--rlse-accent);text-decoration:none;">${text}</a>`;
+        }
+        return text.replace(/</g, '&lt;').replace(/>/g, '&gt;'); // Return escaped plain text for unsafe URLs
+    })
+        // Lists
+        .replace(/^- (.+)$/gm, '<li>$1</li>')
+        // Paragraphs
+        .split('\n\n')
+        .map((para) => para.startsWith('<li>') ? `<ul>${para}</ul>` : `<p>${para}</p>`)
+        .join(''));
+}
+export function escapeHtml(text) {
+    const div = document.createElement('div');
+    div.textContent = text;
+    return div.innerHTML;
+}
+export function formatChangeDate(timestamp) {
+    return new Date(timestamp).toLocaleDateString('en-US', {
+        year: 'numeric',
+        month: 'short',
+        day: 'numeric',
+    });
+}
+export function getReleaseNotesUrl(baseUrl, orgSlug, appSlug) {
+    try {
+        const parsed = new URL(baseUrl);
+        const base = `${parsed.protocol}//${orgSlug}.${parsed.host}`;
+        return appSlug ? `${base}/${appSlug}` : base;
+    }
+    catch {
+        return appSlug
+            ? `${baseUrl}/${orgSlug}/${appSlug}`
+            : `${baseUrl}/${orgSlug}`;
+    }
+}

package/dist/storage.d.ts

@@ -1 +1,11 @@
-export { getStorageKey, getLastVisitKey, getSeenChangesKey, getLastVisit, setLastVisit, getSeenChanges, markAllChangesAsSeen, getUnreadCount, shouldAutoShow, } from '@rlse/widget-core';
+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

@@ -1,2 +1,80 @@
-// Re-export all storage functions from core
-export { getStorageKey, getLastVisitKey, getSeenChangesKey, getLastVisit, setLastVisit, getSeenChanges, markAllChangesAsSeen, getUnreadCount, shouldAutoShow, } from '@rlse/widget-core';
+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

@@ -1,2 +1,54 @@
-export type { WidgetConfig, Change, WidgetChangesResponse, } from '@rlse/widget-core';
-export { DEFAULT_CONFIG } from '@rlse/widget-core';
+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 (floating widget only) */
+    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 (floating widget only) */
+    triggerLabel?: string;
+    /** Modal/Panel title */
+    modalTitle?: string;
+    /** Base URL for the server (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

@@ -1 +1,12 @@
-export { DEFAULT_CONFIG } from '@rlse/widget-core';
+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/vue/composables/useWidgetData.js

@@ -1,5 +1,5 @@
 import { ref, computed, onMounted, onUnmounted } from 'vue';
-import { fetchChanges, WidgetDataFetcher } from '@rlse/widget-core';
+import { fetchChanges, WidgetDataFetcher, } from '@rlse/widget-core';
 export function useWidgetData(options) {
     const changes = ref([]);
     const isLoading = ref(true);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rlse/widget",
-  "version": "0.2.0",
+  "version": "0.2.2",
   "description": "Multi-framework release notes widget for rlse.dev - React, Vue, Angular, Svelte",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -87,7 +87,5 @@
     "embed"
   ],
   "license": "MIT",
-  "dependencies": {
-    "@rlse/widget-core": "../widget-core"
-  }
+  "dependencies": {}
 }