@uservibesos/web-component 1.0.0 → 1.0.1

package/dist/widget.d.ts

@@ -0,0 +1,27 @@
+export interface InitConfig {
+  projectId: string;
+  jwt?: string;
+  container: string | HTMLElement;
+  theme?: string;
+  height?: string;
+  mode?: string;
+  baseUrl?: string;
+}
+
+export interface WidgetInstance {
+  element: HTMLElement;
+  setJWT: (jwt: string) => void;
+  destroy: () => void;
+}
+
+export declare function init(config: InitConfig): WidgetInstance | null;
+
+export declare class UserVibesWidget extends HTMLElement {
+  setJWT(jwt: string): void;
+}
+
+export declare const UserVibesOS: {
+  init: typeof init;
+};
+
+export default UserVibesOS;

package/dist/widget.js

@@ -1,15 +1,102 @@
-"use strict";(()=>{var i=class extends HTMLElement{constructor(){super();this.iframe=null;this.baseUrl="https://app.uservibesos.com";this.attachShadow({mode:"open"})}static get observedAttributes(){return["project","theme","height","mode","base-url","api-key","jwt-mode","proxy-url"]}connectedCallback(){this.render()}attributeChangedCallback(e,t,o){t!==o&&this.render()}render(){let e=this.getAttribute("project"),t=this.getAttribute("theme")||"light",o=this.getAttribute("height")||"600px",s=this.getAttribute("mode")||"feature",d=this.getAttribute("base-url"),n=this.getAttribute("api-key"),l=this.getAttribute("jwt-mode")==="true",a=this.getAttribute("proxy-url");if(!e){this.renderError('Missing required "project" attribute');return}d?this.baseUrl=d:typeof window<"u"&&window.location.hostname==="localhost"&&(this.baseUrl=window.location.origin);let r=`${this.baseUrl}/widget/${e}`;if(!n&&!l){let h="/api/uservibes-proxy",u=typeof window<"u"?`${window.location.origin}${h}`:h;r+=`?tier=2&proxyUrl=${encodeURIComponent(u)}&mode=${s}`,console.log("[Web Component] TIER 2 auto-detected (no api-key) - using proxy:",u)}else if(l&&a)r+=`?tier=2&proxyUrl=${encodeURIComponent(a)}&mode=${s}`,console.log("[Web Component] TIER 2 legacy mode - using custom proxy:",a);else if(n)r+=`?publicKey=${encodeURIComponent(n)}&mode=${s}`,console.log("[Web Component] TIER 1 mode - using public key");else{this.renderError('Widget requires either an "api-key" attribute for Tier 1 security, or no api-key for Tier 2 security (proxy mode). For Tier 2, ensure you have implemented the proxy at /api/uservibes-proxy.');return}let p=`
+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=`
       <style>
         :host {
           display: block;
           width: 100%;
         }
+        .widget-container {
+          position: relative;
+          min-height: ${d};
+        }
         iframe {
           width: 100%;
-          height: ${o};
+          height: ${d};
           border: none;
           border-radius: 8px;
           overflow: hidden;
+          opacity: 0;
+          transition: opacity 0.2s ease-in-out;
+        }
+        iframe.loaded {
+          opacity: 1;
+        }
+        .skeleton {
+          position: absolute;
+          top: 0;
+          left: 0;
+          right: 0;
+          padding: 1.5rem;
+          background: #f9fafb;
+          border-radius: 8px;
+          font-family: system-ui, sans-serif;
+        }
+        .skeleton.hidden {
+          display: none;
+        }
+        .skeleton-header {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          margin-bottom: 1.5rem;
+          padding-bottom: 1rem;
+          border-bottom: 1px solid #e5e7eb;
+        }
+        .skeleton-title {
+          height: 1.5rem;
+          width: 180px;
+          background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: 4px;
+        }
+        .skeleton-button {
+          height: 2.25rem;
+          width: 100px;
+          background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: 6px;
+        }
+        .skeleton-tabs {
+          display: flex;
+          gap: 0.5rem;
+          margin-bottom: 1rem;
+        }
+        .skeleton-tab {
+          height: 2rem;
+          width: 60px;
+          background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: 4px;
+        }
+        .skeleton-item {
+          padding: 1rem;
+          margin-bottom: 0.75rem;
+          background: white;
+          border: 1px solid #e5e7eb;
+          border-radius: 8px;
+        }
+        .skeleton-item-title {
+          height: 1rem;
+          width: 70%;
+          background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: 4px;
+          margin-bottom: 0.5rem;
+        }
+        .skeleton-item-desc {
+          height: 0.75rem;
+          width: 90%;
+          background: linear-gradient(90deg, #e5e7eb 25%, #f3f4f6 50%, #e5e7eb 75%);
+          background-size: 200% 100%;
+          animation: shimmer 1.5s infinite;
+          border-radius: 4px;
+        }
+        @keyframes shimmer {
+          0% { background-position: 200% 0; }
+          100% { background-position: -200% 0; }
         }
         .error {
           padding: 2rem;
@@ -18,16 +105,44 @@
           border-radius: 8px;
           background: #fef2f2;
           color: #991b1b;
+          font-family: system-ui, sans-serif;
         }
       </style>
-    `,c=`
-      <iframe
-        src="${r}"
-        title="${e} Feature Requests"
-        loading="lazy"
-        allow="clipboard-write"
-      ></iframe>
-    `;this.shadowRoot&&(this.shadowRoot.innerHTML=p+c,this.iframe=this.shadowRoot.querySelector("iframe"),this.setupMessageListener())}renderError(e){let t=`
+    `,u=`
+      <div class="widget-container">
+        
+      <div class="skeleton" id="skeleton">
+        <div class="skeleton-header">
+          <div class="skeleton-title"></div>
+          <div class="skeleton-button"></div>
+        </div>
+        <div class="skeleton-tabs">
+          <div class="skeleton-tab"></div>
+          <div class="skeleton-tab"></div>
+          <div class="skeleton-tab"></div>
+        </div>
+        <div class="skeleton-item">
+          <div class="skeleton-item-title"></div>
+          <div class="skeleton-item-desc"></div>
+        </div>
+        <div class="skeleton-item">
+          <div class="skeleton-item-title"></div>
+          <div class="skeleton-item-desc"></div>
+        </div>
+        <div class="skeleton-item">
+          <div class="skeleton-item-title"></div>
+          <div class="skeleton-item-desc"></div>
+        </div>
+      </div>
+    
+        <iframe
+          src="${n}"
+          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=`
       <style>
         .error {
           padding: 2rem;
@@ -36,9 +151,10 @@
           border-radius: 8px;
           background: #fef2f2;
           color: #991b1b;
+          font-family: system-ui, sans-serif;
         }
       </style>
       <div class="error">
-        <strong>Widget Error:</strong> ${e}
+        <strong>Widget Error:</strong> ${this.escapeHtml(e)}
       </div>
-    `;this.shadowRoot&&(this.shadowRoot.innerHTML=t)}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})))})}};typeof window<"u"&&!customElements.get("uservibes-widget")&&customElements.define("uservibes-widget",i);var b=i;})();
+    `;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};

package/package.json

@@ -1,8 +1,21 @@
 {
   "name": "@uservibesos/web-component",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Feature request widget as a Web Component",
+  "type": "module",
   "main": "dist/widget.js",
+  "module": "dist/widget.js",
+  "types": "dist/widget.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/widget.js",
+      "types": "./dist/widget.d.ts",
+      "default": "./dist/widget.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "node build.js",
     "dev": "node build.js --watch"
@@ -11,7 +24,8 @@
     "feature-request",
     "web-component",
     "custom-element",
-    "widget"
+    "widget",
+    "uservibesos"
   ],
   "author": "UserVibesOS",
   "license": "MIT",

package/build.js

@@ -1,47 +0,0 @@
-const esbuild = require('esbuild');
-const fs = require('fs');
-const path = require('path');
-
-const isWatch = process.argv.includes('--watch');
-
-const buildOptions = {
-  entryPoints: ['src/widget.ts'],
-  bundle: true,
-  minify: !isWatch,
-  sourcemap: isWatch,
-  format: 'iife',
-  target: ['es2020'],
-  outfile: 'dist/widget.js',
-  platform: 'browser',
-  logLevel: 'info',
-};
-
-async function build() {
-  try {
-    if (isWatch) {
-      const ctx = await esbuild.context(buildOptions);
-      await ctx.watch();
-      console.log('👀 Watching for changes...');
-    } else {
-      await esbuild.build(buildOptions);
-
-      // Also copy to public directory for CDN
-      const publicDir = path.join(__dirname, '../../public/widget-assets/v1.0.0');
-      if (!fs.existsSync(publicDir)) {
-        fs.mkdirSync(publicDir, { recursive: true });
-      }
-      fs.copyFileSync(
-        path.join(__dirname, 'dist/widget.js'),
-        path.join(publicDir, 'widget.js')
-      );
-
-      console.log('✅ Build complete!');
-      console.log('📦 Copied to public/widget-assets/v1.0.0/widget.js');
-    }
-  } catch (error) {
-    console.error('❌ Build failed:', error);
-    process.exit(1);
-  }
-}
-
-build();

package/src/widget.ts

@@ -1,244 +0,0 @@
-/**
- * UserVibesOS Feature Request Widget - Web Component
- *
- * A custom element that embeds authenticated feature request widgets.
- *
- * TWO-TIER SECURITY MODEL:
- *
- * TIER 1: Public Keys (PK) - Recommended for most users
- * - Origin enforcement + Rate limiting + Fingerprinting
- * - Safe to use with server-side rendering
- *
- * TIER 2: JWT Tokens - Maximum security
- * - Short-lived tokens (5min) + Backend proxy required
- * - One-time use + Request signing
- * - Auto-detected when no api-key is present
- *
- * ========================================
- * TIER 1 USAGE (Public Keys - Recommended)
- * ========================================
- *
- * Step 1: Create Public Key (PK) in UserVibesOS dashboard with allowed origins
- * Step 2: Add to .env.local
- * USERVIBES_PUBLIC_KEY=pk_live_your_public_key_here
- *
- * Step 3: Use in server component
- * <script src="https://app.uservibesos.com/widget-assets/v1.0.0/widget.js"></script>
- * <uservibes-widget
- *   project="my-project-slug"
- *   api-key={process.env.USERVIBES_PUBLIC_KEY}
- * ></uservibes-widget>
- *
- * ========================================
- * TIER 2 USAGE (Maximum Security - Auto-detected)
- * ========================================
- *
- * Step 1: Enable Tier 2 mode in project settings
- * Step 2: Implement backend proxy at /api/uservibes-proxy
- * Step 3: Use widget WITHOUT api-key (auto-detects Tier 2)
- *
- * <script src="https://app.uservibesos.com/widget-assets/v1.0.0/widget.js"></script>
- * <uservibes-widget
- *   project="my-project-slug"
- * ></uservibes-widget>
- *
- * The widget automatically detects Tier 2 mode when:
- * - No api-key attribute is present
- * - Makes requests to /api/uservibes-proxy (standard path)
- *
- * Attributes:
- * - project (required): Your project slug
- * - api-key (Tier 1 only): Public Key from environment variables
- * - mode (optional): "feature" or "roadmap" (default: "feature")
- * - theme (optional): "light" or "dark" (default: "light")
- * - height (optional): Height of the widget (default: "600px")
- * - base-url (optional): Custom base URL (for development/self-hosting)
- *
- * DEPRECATED (for backward compatibility only):
- * - jwt-mode: No longer needed, auto-detected
- * - proxy-url: Uses standard /api/uservibes-proxy path
- *
- * SECURITY:
- * - TIER 1: Store Public Key in environment variables
- * - TIER 2: No keys in client code, all handled by proxy
- * - NEVER commit .env files to version control
- */
-
-class UserVibesWidget extends HTMLElement {
-  private iframe: HTMLIFrameElement | null = null;
-  private baseUrl: string = 'https://app.uservibesos.com';
-
-  constructor() {
-    super();
-
-    // Use Shadow DOM for style isolation
-    this.attachShadow({ mode: 'open' });
-  }
-
-  static get observedAttributes() {
-    return ['project', 'theme', 'height', 'mode', 'base-url', 'api-key', 'jwt-mode', 'proxy-url'];
-  }
-
-  connectedCallback() {
-    this.render();
-  }
-
-  attributeChangedCallback(name: string, oldValue: string, newValue: string) {
-    if (oldValue !== newValue) {
-      this.render();
-    }
-  }
-
-  private render() {
-    const project = this.getAttribute('project');
-    const theme = this.getAttribute('theme') || 'light';
-    const height = this.getAttribute('height') || '600px';
-    const mode = this.getAttribute('mode') || 'feature';
-    const customBaseUrl = this.getAttribute('base-url');
-    const apiKey = this.getAttribute('api-key');
-
-    // For backward compatibility, check legacy jwt-mode and proxy-url attributes
-    const legacyJwtMode = this.getAttribute('jwt-mode') === 'true';
-    const legacyProxyUrl = this.getAttribute('proxy-url');
-
-    if (!project) {
-      this.renderError('Missing required "project" attribute');
-      return;
-    }
-
-    // Use custom base URL if provided, otherwise use local URL in development
-    if (customBaseUrl) {
-      this.baseUrl = customBaseUrl;
-    } else if (typeof window !== 'undefined' && window.location.hostname === 'localhost') {
-      this.baseUrl = window.location.origin;
-    }
-
-    // Build widget URL - ALWAYS points to UserVibesOS
-    let widgetUrl = `${this.baseUrl}/widget/${project}`;
-
-    // AUTO-DETECT SECURITY TIER
-    if (!apiKey && !legacyJwtMode) {
-      // TIER 2: Auto-detected - No api-key means proxy mode
-      // Build absolute proxy URL from current page origin
-      const standardProxyPath = '/api/uservibes-proxy';
-      const absoluteProxyUrl = typeof window !== 'undefined'
-        ? `${window.location.origin}${standardProxyPath}`
-        : standardProxyPath;
-      widgetUrl += `?tier=2&proxyUrl=${encodeURIComponent(absoluteProxyUrl)}&mode=${mode}`;
-      console.log('[Web Component] TIER 2 auto-detected (no api-key) - using proxy:', absoluteProxyUrl);
-    } else if (legacyJwtMode && legacyProxyUrl) {
-      // LEGACY: Explicit JWT mode with custom proxy URL (backward compatibility)
-      widgetUrl += `?tier=2&proxyUrl=${encodeURIComponent(legacyProxyUrl)}&mode=${mode}`;
-      console.log('[Web Component] TIER 2 legacy mode - using custom proxy:', legacyProxyUrl);
-    } else if (apiKey) {
-      // TIER 1: Public key mode - pass key directly
-      widgetUrl += `?publicKey=${encodeURIComponent(apiKey)}&mode=${mode}`;
-      console.log('[Web Component] TIER 1 mode - using public key');
-    } else {
-      // No valid configuration found
-      this.renderError('Widget requires either an "api-key" attribute for Tier 1 security, or no api-key for Tier 2 security (proxy mode). For Tier 2, ensure you have implemented the proxy at /api/uservibes-proxy.');
-      return;
-    }
-
-    const styles = `
-      <style>
-        :host {
-          display: block;
-          width: 100%;
-        }
-        iframe {
-          width: 100%;
-          height: ${height};
-          border: none;
-          border-radius: 8px;
-          overflow: hidden;
-        }
-        .error {
-          padding: 2rem;
-          text-align: center;
-          border: 1px solid #ef4444;
-          border-radius: 8px;
-          background: #fef2f2;
-          color: #991b1b;
-        }
-      </style>
-    `;
-
-    const iframe = `
-      <iframe
-        src="${widgetUrl}"
-        title="${project} Feature Requests"
-        loading="lazy"
-        allow="clipboard-write"
-      ></iframe>
-    `;
-
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = styles + iframe;
-      this.iframe = this.shadowRoot.querySelector('iframe');
-
-      // Listen for messages from iframe (for height adjustment)
-      this.setupMessageListener();
-    }
-  }
-
-  private renderError(message: string) {
-    const html = `
-      <style>
-        .error {
-          padding: 2rem;
-          text-align: center;
-          border: 1px solid #ef4444;
-          border-radius: 8px;
-          background: #fef2f2;
-          color: #991b1b;
-        }
-      </style>
-      <div class="error">
-        <strong>Widget Error:</strong> ${message}
-      </div>
-    `;
-
-    if (this.shadowRoot) {
-      this.shadowRoot.innerHTML = html;
-    }
-  }
-
-  private setupMessageListener() {
-    window.addEventListener('message', (event) => {
-      // Verify origin for security
-      if (event.origin !== this.baseUrl) {
-        return;
-      }
-
-      // Handle height updates from iframe
-      if (event.data.type === 'USERVIBES_HEIGHT_UPDATE' && this.iframe) {
-        this.iframe.style.height = `${event.data.height}px`;
-      }
-
-      // Dispatch custom events for parent page
-      if (event.data.type === 'USERVIBES_REQUEST_SUBMITTED') {
-        this.dispatchEvent(
-          new CustomEvent('request-submitted', {
-            detail: event.data.payload,
-          })
-        );
-      }
-
-      if (event.data.type === 'USERVIBES_VOTE_ADDED') {
-        this.dispatchEvent(
-          new CustomEvent('vote-added', {
-            detail: event.data.payload,
-          })
-        );
-      }
-    });
-  }
-}
-
-// Register the custom element
-if (typeof window !== 'undefined' && !customElements.get('uservibes-widget')) {
-  customElements.define('uservibes-widget', UserVibesWidget);
-}
-
-export default UserVibesWidget;