@uservibesos/web-component 1.0.1 → 1.0.4

package/README.md

@@ -1,533 +1,89 @@
-# @uservibeos/web-component
+# @uservibesos/web-component
 
-**Authenticated** Feature Request Widget as a Web Component (Custom Element).
-
-⚠️ **API KEY REQUIRED** - This widget requires authentication. Only compatible with server-rendered applications.
+Feature request and bug report widget as a Web Component for UserVibesOS.
 
 ## Installation
 
-### Via CDN (Recommended)
-
-Add the script tag to your HTML:
-
-```html
-<script src="https://app.uservibeos.com/widget-assets/v1.0.0/widget.js"></script>
-```
-
-### Via NPM
-
 ```bash
-npm install @uservibeos/web-component
+npm install @uservibesos/web-component
 ```
 
-Then import in your JavaScript:
+Or use via CDN:
 
-```javascript
-import '@uservibeos/web-component';
+```html
+<script src="https://app.uservibesos.com/widget-assets/v1.0.0/widget.js"></script>
 ```
 
 ## Usage
 
-### Prerequisites
-- Server-rendered application (Next.js, Remix, SvelteKit, etc.)
-- UserVibeOS API key stored in environment variables
-
-**NOT compatible with:**
-- Static HTML sites
-- Client-only React/Vue apps
-- WordPress (unless using custom server integration)
-
-### Required Attributes
-
-| Attribute | Type | Required | Description |
-|-----------|------|----------|-------------|
-| `project` | string | **YES** | Your project slug from UserVibeOS dashboard |
-| `api-key` | string | **YES** | Your UserVibeOS API key from environment variables |
-
-### Optional Attributes
-
-| Attribute | Type | Default | Description |
-|-----------|------|---------|-------------|
-| `theme` | `'light' \| 'dark'` | `'light'` | Color theme |
-| `height` | string | `'600px'` | Widget height (CSS value) |
-| `base-url` | string | Auto-detected | Custom base URL (for development/self-hosting) |
-
-### Security Requirements 🔒
-
-**API keys are MANDATORY:**
-- ✅ Widgets will NOT load without a valid API key
-- ✅ API key must come from environment variables
-- ✅ Only use in server-rendered applications
-- ❌ Never hardcode API keys in HTML or JavaScript
-- ❌ Not compatible with static sites or client-only apps
-
-### Events
+### Basic Usage (with JWT)
 
-The widget emits custom events you can listen to:
-
-```javascript
-const widget = document.querySelector('uservibe-widget');
-
-widget.addEventListener('request-submitted', (event) => {
-  console.log('New request submitted:', event.detail);
-});
-
-widget.addEventListener('vote-added', (event) => {
-  console.log('Vote added:', event.detail);
-});
-```
-
-## Examples
-
-### Next.js App Router (Recommended)
-
-**Step 1:** Add your API key to `.env.local`:
-```bash
-USERVIBE_API_KEY=uv_live_your_key_here
-```
-
-**Step 2:** Add to `.gitignore`:
-```
-.env.local
-```
-
-**Step 3:** Use in your server component:
-```tsx
-// app/feedback/page.tsx (Next.js App Router Server Component)
-export default function FeedbackPage() {
-  return (
-    <div>
-      <h1>Feature Requests</h1>
-      <script src="https://app.uservibeos.com/widget-assets/v1.0.0/widget.js"></script>
-      <uservibe-widget
-        project="my-app"
-        api-key={process.env.USERVIBE_API_KEY}
-        theme="light"
-      />
-    </div>
-  );
-}
+```html
+<uservibes-widget
+  project="your-project-slug"
+  jwt="your-jwt-token"
+  theme="light"
+></uservibes-widget>
 ```
 
-### With Custom Styling
+### With Custom Height
 
-```tsx
-<uservibe-widget
-  project="my-app"
-  api-key={process.env.USERVIBE_API_KEY}
-  theme="dark"
+```html
+<uservibes-widget
+  project="your-project-slug"
+  jwt="your-jwt-token"
   height="800px"
-/>
-
-### Development/Local Testing
-
-When testing locally with UserVibeOS running on a different port:
-
-```tsx
-// Test app on localhost:3002, UserVibeOS on localhost:3000
-export default function TestPage() {
-  return (
-    <div>
-      <script src="http://localhost:3000/widget-assets/v1.0.0/widget.js"></script>
-      <uservibe-widget
-        project="my-app"
-        base-url="http://localhost:3000"
-        api-key={process.env.USERVIBE_API_KEY}
-      />
-    </div>
-  );
-}
-```
-
-Don't forget to add TypeScript types:
-
-```typescript
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'uservibe-widget': {
-        project: string;
-        'api-key': string; // REQUIRED
-        theme?: 'light' | 'dark';
-        height?: string;
-        'base-url'?: string;
-      };
-    }
-  }
-}
+></uservibes-widget>
 ```
 
-## 🔐 Two-Tier Security Model
-
-UserVibeOS offers two security tiers for widget authentication. Choose based on your security requirements.
-
----
+### Attributes
 
-### TIER 1: Public Keys (PK) - Recommended for Most Users
+- `project` (required): Your project slug or ID
+- `jwt` (optional): JWT token for authenticated users
+- `theme` (optional): `light` or `dark` (default: `light`)
+- `height` (optional): Widget height (default: `90vh`)
+- `mode` (optional): `feature-request` or `roadmap` (default: `feature-request`)
+- `base-url` (optional): Custom API base URL (for development)
 
-**Best for:** Standard web applications with good security needs.
+## Features
 
-**How it works:**
-- Create a Public Key (PK) in the API Keys dashboard
-- Configure allowed origins (up to 5 domains)
-- Use server-side rendering to inject the key
-- Widget validates origin against your whitelist
+- ✅ Feature request submission with AI-powered chat extraction (max 4 questions)
+- ✅ Bug report submission with structured field extraction (max 7 questions)
+- ✅ Roadmap view
+- ✅ Changelog view
+- ✅ Voting and commenting
+- ✅ JWT authentication support
+- ✅ Dark mode support
+- ✅ Responsive design
+- ✅ Zero dependencies (vanilla web component)
 
-**Security features:**
-- ✅ Origin/referrer enforcement
-- ✅ Rate limiting (5 req/min per IP/fingerprint)
-- ✅ Advanced browser fingerprinting
-- ✅ Behavioral anomaly detection
-- ✅ Real-time security event logging
+## Development
 
-**Setup:**
 ```bash
-# .env.local
-USERVIBE_PUBLIC_KEY=pk_live_your_key_here
-```
-
-```tsx
-// app/feedback/page.tsx (Next.js Server Component)
-export default function FeedbackPage() {
-  return (
-    <div>
-      <script src="https://app.uservibeos.com/widget-assets/v1.0.0/widget.js"></script>
-      <uservibe-widget
-        project="my-app"
-        api-key={process.env.USERVIBE_PUBLIC_KEY}
-        theme="light"
-      />
-    </div>
-  );
-}
-```
-
-**Limitations:**
-- Keys visible in browser's view source
-- Relies on origin validation (can be bypassed by determined attackers)
-- Not suitable for high-security applications
-
----
-
-### TIER 2: JWT Proxy - Maximum Security
-
-**Best for:** Financial apps, healthcare, or maximum security requirements.
-
-**How it works:**
-1. Your backend securely holds your Secret Key (SK)
-2. Widget calls YOUR backend proxy endpoint (not UserVibeOS directly)
-3. Your backend exchanges SK for a short-lived JWT token (5 min expiry)
-4. Backend forwards request to UserVibeOS with JWT
-5. **Secret Key never leaves your server**
-
-**Security features:**
-- ✅ All Tier 1 features PLUS:
-- ✅ Secret Key (SK) never exposed to client
-- ✅ JWT tokens expire in 5 minutes
-- ✅ One-time use tokens (replay protection)
-- ✅ Backend request validation
-- ✅ Full cryptographic signing
-- ✅ Complete audit trail
-
----
-
-### Tier 2 Implementation Guide
-
-#### Step 1: Enable JWT in Project Settings
-
-1. Go to your UserVibeOS Dashboard → Projects → [Your Project]
-2. Navigate to "Project Settings"
-3. Enable "JWT Authentication (Tier 2)"
-4. Select or create a Secret Key (SK)
-5. Set token expiry (default: 5 minutes)
-
----
-
-#### Step 2: Create Backend Proxy
-
-Choose your framework:
-
-**Next.js App Router:**
-
-```typescript
-// app/api/uservibe-proxy/route.ts
-import { NextRequest, NextResponse } from 'next/server';
-
-// Token cache (use Redis in production for multi-instance)
-let tokenCache: { token: string; expiresAt: number } | null = null;
-
-async function getValidToken(projectId: string): Promise<string> {
-  // Check cache
-  if (tokenCache && tokenCache.expiresAt > Date.now() + 60000) {
-    return tokenCache.token;
-  }
-
-  // Exchange Secret Key for JWT token
-  const response = await fetch('https://app.uservibeos.com/api/token/exchange', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      secretKey: process.env.USERVIBE_SECRET_KEY, // SK never exposed
-      projectId,
-      origin: process.env.NEXT_PUBLIC_SITE_URL || 'https://yourapp.com',
-    }),
-  });
-
-  if (!response.ok) {
-    throw new Error('Token exchange failed');
-  }
-
-  const data = await response.json();
+# Install dependencies
+npm install
 
-  // Cache token
-  tokenCache = {
-    token: data.token,
-    expiresAt: data.expiresAt,
-  };
+# Build the widget
+npm run build
 
-  return data.token;
-}
-
-export async function POST(req: NextRequest) {
-  try {
-    const body = await req.json();
-    const { projectId, action, ...payload } = body;
-
-    // Get valid JWT token
-    const jwtToken = await getValidToken(projectId);
-
-    // Forward to Convex with JWT
-    const convexUrl = process.env.CONVEX_URL || 'https://your-deployment.convex.cloud';
-    const response = await fetch(`${convexUrl}/api/function/${action}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${jwtToken}`,
-      },
-      body: JSON.stringify(payload),
-    });
-
-    const data = await response.json();
-    return NextResponse.json(data);
-
-  } catch (error) {
-    console.error('Proxy error:', error);
-    return NextResponse.json(
-      { error: 'Proxy request failed' },
-      { status: 500 }
-    );
-  }
-}
-```
-
-**Express.js:**
-
-```javascript
-// server.js
-const express = require('express');
-const app = express();
-
-let tokenCache = null;
-
-async function getValidToken(projectId) {
-  if (tokenCache && tokenCache.expiresAt > Date.now() + 60000) {
-    return tokenCache.token;
-  }
-
-  const response = await fetch('https://app.uservibeos.com/api/token/exchange', {
-    method: 'POST',
-    headers: { 'Content-Type': 'application/json' },
-    body: JSON.stringify({
-      secretKey: process.env.USERVIBE_SECRET_KEY,
-      projectId,
-      origin: process.env.SITE_URL || 'https://yourapp.com',
-    }),
-  });
-
-  const data = await response.json();
-  tokenCache = { token: data.token, expiresAt: data.expiresAt };
-  return data.token;
-}
-
-app.post('/api/uservibe-proxy', async (req, res) => {
-  try {
-    const { projectId, action, ...payload } = req.body;
-    const token = await getValidToken(projectId);
-
-    const convexUrl = process.env.CONVEX_URL;
-    const response = await fetch(`${convexUrl}/api/function/${action}`, {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-        'Authorization': `Bearer ${token}`,
-      },
-      body: JSON.stringify(payload),
-    });
-
-    const data = await response.json();
-    res.json(data);
-  } catch (error) {
-    console.error('Proxy error:', error);
-    res.status(500).json({ error: 'Proxy request failed' });
-  }
-});
-
-app.listen(3000);
+# Watch mode for development
+npm run dev
 ```
 
----
+## Publishing
 
-#### Step 3: Configure Widget for JWT Mode
-
-```html
-<script src="https://app.uservibeos.com/widget-assets/v1.0.0/widget.js"></script>
-<uservibe-widget
-  project="my-app"
-  jwt-mode="true"
-  proxy-url="/api/uservibe-proxy"
-  theme="light"
-></uservibe-widget>
-```
-
-**Key attributes for Tier 2:**
-- `jwt-mode="true"` - Enables JWT authentication mode
-- `proxy-url="/api/uservibe-proxy"` - Your backend proxy endpoint
-
----
-
-#### Step 4: Environment Variables
+The widget is automatically published to NPM when a new release is created on GitHub. You can also publish manually:
 
 ```bash
-# .env.local (Backend only - NEVER commit)
-
-# Tier 2: Secret Key (SK) for JWT signing
-USERVIBE_SECRET_KEY=sk_live_your_secret_key_here
-
-# Your Convex deployment URL
-CONVEX_URL=https://your-deployment.convex.cloud
-
-# Your site URL (for origin validation)
-NEXT_PUBLIC_SITE_URL=https://yourapp.com
+npm run publish:npm
 ```
 
----
-
-### Production Considerations for Tier 2
-
-#### Token Caching
-
-**Single-instance deployments** (Vercel Hobby, single server):
-- Use in-memory caching (as shown above)
-
-**Multi-instance deployments** (Vercel Pro, load-balanced):
-- Use Redis or similar distributed cache
-- Share tokens across instances
-
-```typescript
-// Example with Upstash Redis
-import { Redis } from '@upstash/redis';
-
-const redis = new Redis({
-  url: process.env.UPSTASH_REDIS_URL!,
-  token: process.env.UPSTASH_REDIS_TOKEN!,
-});
-
-async function getValidToken(projectId: string): Promise<string> {
-  const cacheKey = `uservibe:jwt:${projectId}`;
-
-  // Check cache
-  const cached = await redis.get<{ token: string; expiresAt: number }>(cacheKey);
-  if (cached && cached.expiresAt > Date.now() + 60000) {
-    return cached.token;
-  }
-
-  // Exchange for new token
-  const token = await exchangeToken(projectId);
-
-  // Cache with TTL (4 min, tokens expire in 5)
-  await redis.setex(cacheKey, 240, token);
-
-  return token.token;
-}
-```
-
-#### Error Handling
-
-Always implement graceful error handling:
-
-```typescript
-try {
-  const token = await getValidToken(projectId);
-  // Use token...
-} catch (error) {
-  console.error('JWT token exchange failed:', error);
-
-  // Return user-friendly error
-  return NextResponse.json(
-    { error: 'Authentication failed. Please try again.' },
-    { status: 503 }
-  );
-}
-```
-
----
-
-### Complete Implementation Guides
-
-For detailed, framework-specific guides:
-
-- 📘 [Next.js App Router Proxy Guide](https://github.com/uservibeOS/uservibeOS/blob/main/docs/jwt-proxy-nextjs.md)
-- 📗 [React + Express Proxy Guide](https://github.com/uservibeOS/uservibeOS/blob/main/docs/jwt-proxy-react-express.md)
-- 📕 [Standalone Express Proxy Guide](https://github.com/uservibeOS/uservibeOS/blob/main/docs/jwt-proxy-express.md)
-- 📙 [Migration Guide: Upgrading to Two-Tier Security](https://github.com/uservibeOS/uservibeOS/blob/main/docs/migration-guide-two-tier-security.md)
-
----
-
-## API Key Security Best Practices 🔒
-
-### Required Security Practices (Both Tiers)
-
-✅ **MUST DO:**
-- Store API keys in `.env.local` (never in code)
-- Add `.env.local` to `.gitignore`
-- Use server-side rendering only (Next.js Server Components, Remix loaders, etc.)
-- Use different API keys for development and production
-- Rotate API keys if compromised
-
-❌ **NEVER DO:**
-- Hardcode API keys in HTML, JavaScript, or TSX files
-- Commit API keys to version control (GitHub, GitLab, etc.)
-- Use this widget in static HTML sites
-- Use this widget in client-only React/Vue apps
-- Expose API keys in client-side environment variables (NEXT_PUBLIC_, VITE_, etc.)
-- Share API keys in public repositories or screenshots
-
-### Tier 1 vs Tier 2: When to Use
-
-| Use Case | Recommended Tier | Reason |
-|----------|-----------------|---------|
-| Standard web app | Tier 1 (PK) | Good security, easier setup |
-| Financial services | Tier 2 (JWT) | Regulatory compliance |
-| Healthcare (HIPAA) | Tier 2 (JWT) | Maximum security required |
-| E-commerce | Tier 1 or 2 | Depends on sensitivity |
-| Internal tools | Tier 1 (PK) | Lower risk, simpler |
-| Public-facing SaaS | Tier 2 (JWT) | Higher attack surface |
-
-### Important Notes
-
-⚠️ **Tier 1 Limitation**: Public Keys visible in browser's view source (but origin-restricted)
-
-⚠️ **Tier 2 Requirement**: Requires backend infrastructure to run proxy
-
-⚠️ **Not for Static Sites**: Both tiers require server-side rendering
-
-## Browser Support
-
-- Chrome/Edge: ✅
-- Firefox: ✅
-- Safari: ✅
-- IE11: ❌ (Custom Elements not supported)
-
 ## License
 
 MIT
+
+## Links
+
+- [NPM Package](https://www.npmjs.com/package/@uservibesos/web-component)
+- [GitHub Repository](https://github.com/harperaa/uservibesOS)
+- [UserVibesOS Website](https://uservibesos.com)

package/dist/widget.js

@@ -1,4 +1,4 @@
-function f(o){if(typeof document>"u"||document.querySelector(`link[href="${o}"]`))return;let s=document.createElement("link");s.rel="preconnect",s.href=o,document.head.appendChild(s)}var c=class extends HTMLElement{constructor(){super();this.baseUrl="https://app.uservibesos.com";this.iframe=null;this.skeleton=null;this.loaded=!1;this.attachShadow({mode:"open"})}static get observedAttributes(){return["project","jwt","theme","height","mode","base-url"]}connectedCallback(){this.render()}attributeChangedCallback(e,t,r){t!==r&&this.render()}render(){let e=this.getAttribute("project"),t=this.getAttribute("jwt"),r=this.getAttribute("theme")||"light",d=this.getAttribute("height")||"600px",l=this.getAttribute("mode")||"feature-request",a=this.getAttribute("base-url");if(!e){this.renderError('Missing required "project" attribute (project ID)');return}a?this.baseUrl=a:typeof window<"u"&&window.location.hostname==="localhost"&&(this.baseUrl=window.location.origin),f(this.baseUrl);let n=`${this.baseUrl}/embed?projectId=${encodeURIComponent(e)}&mode=${l}`;t&&(n+=`&jwt=${encodeURIComponent(t)}`);let i=`
+function g(n){if(typeof document>"u"||document.querySelector(`link[href="${n}"]`))return;let s=document.createElement("link");s.rel="preconnect",s.href=n,document.head.appendChild(s)}var m=class extends HTMLElement{constructor(){super();this.baseUrl="https://app.uservibesos.com";this.iframe=null;this.skeleton=null;this.loaded=!1;this.isFullscreen=!1;this.originalIframeStyles="";this.attachShadow({mode:"open"})}static get observedAttributes(){return["project","jwt","theme","height","mode","base-url"]}connectedCallback(){this.render()}attributeChangedCallback(e,t,r){t!==r&&this.render()}render(){let e=this.getAttribute("project"),t=this.getAttribute("jwt"),r=this.getAttribute("theme")||"light",a=this.getAttribute("height")||"90vh",l=this.getAttribute("mode")||"feature-request",d=this.getAttribute("base-url");if(!e){this.renderError('Missing required "project" attribute (project ID)');return}d?this.baseUrl=d:typeof window<"u"&&window.location.hostname==="localhost"&&(this.baseUrl=window.location.origin),g(this.baseUrl);let o=`${this.baseUrl}/embed?projectId=${encodeURIComponent(e)}&mode=${l}`;t&&(o+=`&jwt=${encodeURIComponent(t)}`);let i=`
       <style>
         :host {
           display: block;
@@ -6,11 +6,11 @@ function f(o){if(typeof document>"u"||document.querySelector(`link[href="${o}"]`
         }
         .widget-container {
           position: relative;
-          min-height: ${d};
+          min-height: ${a};
         }
         iframe {
           width: 100%;
-          height: ${d};
+          height: ${a};
           border: none;
           border-radius: 8px;
           overflow: hidden;
@@ -20,6 +20,21 @@ function f(o){if(typeof document>"u"||document.querySelector(`link[href="${o}"]`
         iframe.loaded {
           opacity: 1;
         }
+        iframe.fullscreen {
+          position: fixed !important;
+          top: 0 !important;
+          left: 0 !important;
+          right: 0 !important;
+          bottom: 0 !important;
+          width: 100vw !important;
+          height: 100vh !important;
+          max-width: 100vw !important;
+          max-height: 100vh !important;
+          border-radius: 0 !important;
+          z-index: 999999 !important;
+          margin: 0 !important;
+          padding: 0 !important;
+        }
         .skeleton {
           position: absolute;
           top: 0;
@@ -108,7 +123,7 @@ function f(o){if(typeof document>"u"||document.querySelector(`link[href="${o}"]`
           font-family: system-ui, sans-serif;
         }
       </style>
-    `,u=`
+    `,f=`
       <div class="widget-container">
         
       <div class="skeleton" id="skeleton">
@@ -136,13 +151,13 @@ function f(o){if(typeof document>"u"||document.querySelector(`link[href="${o}"]`
       </div>
     
         <iframe
-          src="${n}"
+          src="${o}"
           title="Feature Requests"
           loading="lazy"
           allow="clipboard-write"
         ></iframe>
       </div>
-    `;this.shadowRoot&&(this.shadowRoot.innerHTML=i+u,this.iframe=this.shadowRoot.querySelector("iframe"),this.skeleton=this.shadowRoot.querySelector("#skeleton"),this.setupLoadHandler(),this.setupMessageListener())}setupLoadHandler(){this.iframe&&(this.iframe.addEventListener("load",()=>{this.loaded=!0,this.iframe.classList.add("loaded"),this.skeleton&&this.skeleton.classList.add("hidden"),this.iframe.contentWindow&&this.iframe.contentWindow.postMessage({type:"USERVIBES_INIT"},this.baseUrl)}),this.iframe.addEventListener("error",()=>{this.renderError("Failed to load widget. Please try again later.")}),setTimeout(()=>{!this.loaded&&this.iframe&&(this.iframe.classList.add("loaded"),this.skeleton&&this.skeleton.classList.add("hidden"))},1e4))}renderError(e){let r=`
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=i+f,this.iframe=this.shadowRoot.querySelector("iframe"),this.skeleton=this.shadowRoot.querySelector("#skeleton"),this.setupLoadHandler(),this.setupMessageListener())}setupLoadHandler(){this.iframe&&(this.iframe.addEventListener("load",()=>{this.loaded=!0,this.iframe.classList.add("loaded"),this.skeleton&&this.skeleton.classList.add("hidden"),console.log("[Widget] DEBUG: Iframe loaded, sending USERVIBES_INIT to:",this.baseUrl),this.iframe.contentWindow?(this.iframe.contentWindow.postMessage({type:"USERVIBES_INIT"},this.baseUrl),console.log("[Widget] DEBUG: \u2705 USERVIBES_INIT message sent")):console.error("[Widget] DEBUG: \u274C No contentWindow, cannot send USERVIBES_INIT")}),this.iframe.addEventListener("error",()=>{this.renderError("Failed to load widget. Please try again later.")}),setTimeout(()=>{!this.loaded&&this.iframe&&(this.iframe.classList.add("loaded"),this.skeleton&&this.skeleton.classList.add("hidden"))},1e4))}renderError(e){let r=`
       <style>
         .error {
           padding: 2rem;
@@ -157,4 +172,20 @@ function f(o){if(typeof document>"u"||document.querySelector(`link[href="${o}"]`
       <div class="error">
         <strong>Widget Error:</strong> ${this.escapeHtml(e)}
       </div>
-    `;this.shadowRoot&&(this.shadowRoot.innerHTML=r)}escapeHtml(e){if(!e||typeof e!="string")return"";let t=document.createElement("div");return t.textContent=e,t.innerHTML}setupMessageListener(){window.addEventListener("message",e=>{e.origin===this.baseUrl&&(e.data.type==="USERVIBES_HEIGHT_UPDATE"&&this.iframe&&(this.iframe.style.height=`${e.data.height}px`),e.data.type==="USERVIBES_REQUEST_SUBMITTED"&&this.dispatchEvent(new CustomEvent("request-submitted",{detail:e.data.payload})),e.data.type==="USERVIBES_VOTE_ADDED"&&this.dispatchEvent(new CustomEvent("vote-added",{detail:e.data.payload})))})}setJWT(e){this.setAttribute("jwt",e)}};typeof window<"u"&&typeof customElements<"u"&&!customElements.get("uservibes-widget")&&customElements.define("uservibes-widget",c);function b(o){let{projectId:s,jwt:e,container:t,theme:r,height:d,mode:l,baseUrl:a}=o;if(!s)return console.error('[UserVibesOS] Missing required "projectId" in config'),null;if(!t)return console.error('[UserVibesOS] Missing required "container" in config'),null;let n=typeof t=="string"?document.querySelector(t):t;if(!n)return console.error(`[UserVibesOS] Container "${t}" not found`),null;let i=document.createElement("uservibes-widget");return i.setAttribute("project",s),e&&i.setAttribute("jwt",e),r&&i.setAttribute("theme",r),d&&i.setAttribute("height",d),l&&i.setAttribute("mode",l),a&&i.setAttribute("base-url",a),n.innerHTML="",n.appendChild(i),{element:i,setJWT:m=>i.setJWT(m),destroy:()=>n.removeChild(i)}}var h={init:b};var g=h;typeof window<"u"&&(window.UserVibesOS=h);export{h as UserVibesOS,c as UserVibesWidget,g as default,b as init};
+    `;this.shadowRoot&&(this.shadowRoot.innerHTML=r)}escapeHtml(e){if(!e||typeof e!="string")return"";let t=document.createElement("div");return t.textContent=e,t.innerHTML}setupMessageListener(){window.addEventListener("message",e=>{console.log("[Widget] Received message:",e.data?.type,"from:",e.origin,"expected:",this.baseUrl),e.origin===this.baseUrl&&(e.data.type==="USERVIBES_READY"&&this.iframe?.contentWindow&&(console.log("[Widget] DEBUG: Received USERVIBES_READY, resending USERVIBES_INIT"),this.iframe.contentWindow.postMessage({type:"USERVIBES_INIT"},this.baseUrl)),e.data.type==="USERVIBES_HEIGHT_UPDATE"&&this.iframe&&(this.iframe.style.height=`${e.data.height}px`),e.data.type==="USERVIBES_REQUEST_SUBMITTED"&&this.dispatchEvent(new CustomEvent("request-submitted",{detail:e.data.payload})),e.data.type==="USERVIBES_VOTE_ADDED"&&this.dispatchEvent(new CustomEvent("vote-added",{detail:e.data.payload})),e.data.type==="USERVIBES_ENTER_FULLSCREEN"&&(console.log("[Widget] Received ENTER_FULLSCREEN, applying fullscreen styles to iframe"),this.isFullscreen=!0,this.iframe&&(this.originalIframeStyles=this.iframe.getAttribute("style")||""),this.iframe&&(this.iframe.style.cssText=`
+            position: fixed !important;
+            top: 0 !important;
+            left: 0 !important;
+            right: 0 !important;
+            bottom: 0 !important;
+            width: 100vw !important;
+            height: 100vh !important;
+            max-width: 100vw !important;
+            max-height: 100vh !important;
+            border: none !important;
+            border-radius: 0 !important;
+            z-index: 999999 !important;
+            margin: 0 !important;
+            padding: 0 !important;
+            opacity: 1 !important;
+          `),document.body.style.overflow="hidden",console.log("[Widget] Applied fullscreen styles to iframe")),e.data.type==="USERVIBES_EXIT_FULLSCREEN"&&(console.log("[Widget] Received EXIT_FULLSCREEN, removing fullscreen styles"),this.iframe&&(this.originalIframeStyles?this.iframe.setAttribute("style",this.originalIframeStyles):this.iframe.removeAttribute("style")),document.body.style.overflow="",this.isFullscreen=!1,console.log("[Widget] Removed fullscreen styles")))})}setJWT(e){this.setAttribute("jwt",e)}};typeof window<"u"&&typeof customElements<"u"&&!customElements.get("uservibes-widget")&&customElements.define("uservibes-widget",m);function p(n){let{projectId:s,jwt:e,container:t,theme:r,height:a,mode:l,baseUrl:d}=n;if(!s)return console.error('[UserVibesOS] Missing required "projectId" in config'),null;if(!t)return console.error('[UserVibesOS] Missing required "container" in config'),null;let o=typeof t=="string"?document.querySelector(t):t;if(!o)return console.error(`[UserVibesOS] Container "${t}" not found`),null;let i=document.createElement("uservibes-widget");return i.setAttribute("project",s),e&&i.setAttribute("jwt",e),r&&i.setAttribute("theme",r),a&&i.setAttribute("height",a),l&&i.setAttribute("mode",l),d&&i.setAttribute("base-url",d),o.innerHTML="",o.appendChild(i),{element:i,setJWT:c=>i.setJWT(c),destroy:()=>o.removeChild(i)}}var h={init:p};var u=h;typeof window<"u"&&(window.UserVibesOS=h);export{h as UserVibesOS,m as UserVibesWidget,u as default,p as init};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uservibesos/web-component",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Feature request widget as a Web Component",
   "type": "module",
   "main": "dist/widget.js",
@@ -18,7 +18,17 @@
   ],
   "scripts": {
     "build": "node build.js",
-    "dev": "node build.js --watch"
+    "dev": "node build.js --watch",
+    "prepublishOnly": "npm run build",
+    "publish:npm": "npm publish --access public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/harperaa/uservibesOS.git",
+    "directory": "packages/web-component"
+  },
+  "publishConfig": {
+    "access": "public"
   },
   "keywords": [
     "feature-request",
@@ -30,6 +40,6 @@
   "author": "UserVibesOS",
   "license": "MIT",
   "devDependencies": {
-    "esbuild": "^0.24.0"
+    "esbuild": "^0.25.0"
   }
 }