changelogdev-widget 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Changelog.dev
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,173 @@
+# @changelogdev/widget
+
+An embeddable changelog widget for any website. Show your users what's new with a single line of code.
+
+Zero dependencies. Framework-agnostic. Built as a Web Component with Shadow DOM for complete style isolation.
+
+## Quick Start
+
+### Script Tag (simplest)
+
+Drop this into any HTML page:
+
+```html
+<script src="https://unpkg.com/@changelogdev/widget"></script>
+<changelog-widget project-id="your-project-id"></changelog-widget>
+```
+
+That's it. A floating bell icon appears in the bottom-right corner. Click it to see your changelog.
+
+### npm
+
+```bash
+npm install @changelogdev/widget
+```
+
+**Option A: Declarative (HTML element)**
+
+```tsx
+import '@changelogdev/widget'
+
+// In your HTML or JSX:
+<changelog-widget project-id="your-project-id" theme="dark" />
+```
+
+**Option B: Programmatic**
+
+```ts
+import { init } from '@changelogdev/widget'
+
+init({
+  projectId: 'your-project-id',
+  position: 'bottom-right',
+  theme: 'dark',
+  accentColor: '#6366f1',
+})
+```
+
+### React / Next.js
+
+The widget works out of the box with React. Import once and use the custom element:
+
+```tsx
+import '@changelogdev/widget'
+
+export default function App() {
+  return (
+    <div>
+      <h1>My App</h1>
+      <changelog-widget
+        project-id="your-project-id"
+        theme="auto"
+        accent-color="#6366f1"
+      />
+    </div>
+  )
+}
+```
+
+For TypeScript, add this declaration to avoid JSX type errors:
+
+```ts
+// global.d.ts
+declare namespace JSX {
+  interface IntrinsicElements {
+    'changelog-widget': React.DetailedHTMLProps<
+      React.HTMLAttributes<HTMLElement> & {
+        'project-id'?: string
+        'api-url'?: string
+        position?: 'bottom-right' | 'bottom-left'
+        theme?: 'light' | 'dark' | 'auto'
+        'accent-color'?: string
+      },
+      HTMLElement
+    >
+  }
+}
+```
+
+### Vue
+
+```vue
+<template>
+  <changelog-widget project-id="your-project-id" theme="dark" />
+</template>
+
+<script setup>
+import '@changelogdev/widget'
+</script>
+```
+
+## Configuration
+
+All configuration is done through HTML attributes or the `init()` options object.
+
+| Attribute       | Option         | Default                                        | Description                        |
+| --------------- | -------------- | ---------------------------------------------- | ---------------------------------- |
+| `project-id`   | `projectId`    | (required)                                     | Your project ID from Changelog.dev |
+| `api-url`      | `apiUrl`       | `https://www.changelogdev.com/api/widget`      | API endpoint for fetching entries  |
+| `position`     | `position`     | `bottom-right`                                 | Widget position on screen          |
+| `theme`        | `theme`        | `auto`                                         | `light`, `dark`, or `auto`         |
+| `accent-color` | `accentColor`  | `#6366f1`                                      | Primary color for the trigger button |
+
+## Features
+
+- **Zero dependencies** -- no React, no Vue, no nothing. Pure Web Components.
+- **Shadow DOM isolation** -- styles never leak in or out. Works on any page.
+- **Unread badge** -- tracks which entries the user has seen via localStorage.
+- **Responsive** -- works on mobile, adapts to small screens.
+- **Theme support** -- light, dark, or auto (follows system preference).
+- **Keyboard accessible** -- Escape to close, focusable trigger button.
+- **Mock data fallback** -- works offline or without an API for demos.
+- **Tiny footprint** -- under 8KB gzipped.
+
+## API Response Format
+
+The widget expects your API to return JSON in one of these shapes:
+
+```json
+[
+  {
+    "id": "entry-1",
+    "title": "New Feature: Dark Mode",
+    "description": "You can now switch between light and dark themes.",
+    "type": "feature",
+    "date": "2026-03-01",
+    "url": "https://example.com/blog/dark-mode"
+  }
+]
+```
+
+Or wrapped:
+
+```json
+{
+  "entries": [...]
+}
+```
+
+**Entry fields:**
+
+| Field         | Type     | Required | Values                                            |
+| ------------- | -------- | -------- | ------------------------------------------------- |
+| `id`          | `string` | Yes      | Unique identifier                                 |
+| `title`       | `string` | Yes      | Entry title                                       |
+| `description` | `string` | Yes      | Entry description (plain text)                    |
+| `type`        | `string` | Yes      | `feature`, `improvement`, `fix`, `announcement`   |
+| `date`        | `string` | Yes      | ISO date string (`YYYY-MM-DD`)                    |
+| `url`         | `string` | No       | Link to full entry                                |
+
+## Development
+
+```bash
+npm install
+npm run build    # Build ESM + CJS + IIFE
+npm run dev      # Watch mode
+npm run typecheck
+```
+
+## License
+
+MIT -- see [LICENSE](./LICENSE).
+
+Built by [Changelog.dev](https://www.changelogdev.com).

package/dist/index.cjs

@@ -0,0 +1,417 @@
+"use strict";var l=Object.defineProperty;var w=Object.getOwnPropertyDescriptor;var u=Object.getOwnPropertyNames;var m=Object.prototype.hasOwnProperty;var b=(r,o)=>{for(var e in o)l(r,e,{get:o[e],enumerable:!0})},f=(r,o,e,t)=>{if(o&&typeof o=="object"||typeof o=="function")for(let i of u(o))!m.call(r,i)&&i!==e&&l(r,i,{get:()=>o[i],enumerable:!(t=w(o,i))||t.enumerable});return r};var v=r=>f(l({},"__esModule",{value:!0}),r);var L={};b(L,{ChangelogWidget:()=>a,init:()=>C});module.exports=v(L);var x=[{id:"mock-1",title:"AI-Powered Release Summaries",description:"Changelog entries are now automatically summarized using AI. Connect your GitHub repo and we generate human-readable release notes from your commits and PRs.",type:"feature",date:"2026-03-05",url:"https://www.changelogdev.com/blog/ai-summaries"},{id:"mock-2",title:"Embeddable Widget",description:"You can now embed a changelog widget directly on your site. One script tag, zero dependencies. Your users see what's new without leaving your app.",type:"feature",date:"2026-03-01",url:"https://www.changelogdev.com/blog/widget-launch"},{id:"mock-3",title:"Faster Dashboard Loading",description:"Dashboard load times reduced by 60% through query optimization and edge caching. The changelog list now renders in under 200ms.",type:"improvement",date:"2026-02-25"},{id:"mock-4",title:"Markdown Rendering Fix",description:"Fixed an issue where inline code blocks in changelog descriptions were not rendering correctly in the email digest.",type:"fix",date:"2026-02-20"},{id:"mock-5",title:"Webhook Notifications",description:"Send changelog updates to Slack, Discord, or any webhook endpoint. Configure per-project notification rules from the dashboard.",type:"feature",date:"2026-02-15",url:"https://www.changelogdev.com/blog/webhooks"},{id:"mock-6",title:"Public Changelog Pages",description:"Every project now gets a public changelog page at changelog.dev/your-project. Share it with your users or link to it from your docs.",type:"announcement",date:"2026-02-10",url:"https://www.changelogdev.com/blog/public-pages"}];async function d(r,o){try{let e=`${r}?projectId=${encodeURIComponent(o)}`,t=await fetch(e,{headers:{Accept:"application/json"},signal:AbortSignal.timeout(5e3)});if(!t.ok)throw new Error(`HTTP ${t.status}`);let i=await t.json();if(Array.isArray(i))return i;if(i?.entries&&Array.isArray(i.entries))return i.entries;throw new Error("Unexpected response shape")}catch{return x}}function g(r){return`
+    :host {
+      --clw-accent: ${r};
+      --clw-accent-hover: color-mix(in srgb, ${r} 85%, white);
+      --clw-radius: 12px;
+      --clw-radius-sm: 8px;
+      --clw-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+      --clw-transition: 0.2s ease;
+
+      position: fixed;
+      z-index: 2147483647;
+      font-family: var(--clw-font);
+      font-size: 14px;
+      line-height: 1.5;
+    }
+
+    :host([position="bottom-right"]) {
+      bottom: 20px;
+      right: 20px;
+    }
+
+    :host([position="bottom-left"]) {
+      bottom: 20px;
+      left: 20px;
+    }
+
+    /* ---- Theme variables ---- */
+    :host([data-theme="dark"]) {
+      --clw-bg: #111113;
+      --clw-bg-elevated: #1a1a1f;
+      --clw-bg-hover: #222228;
+      --clw-border: #2a2a32;
+      --clw-text: #ededef;
+      --clw-text-secondary: #9393a0;
+      --clw-text-muted: #65656d;
+      --clw-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
+      --clw-btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+    }
+
+    :host([data-theme="light"]) {
+      --clw-bg: #ffffff;
+      --clw-bg-elevated: #f8f8fa;
+      --clw-bg-hover: #f0f0f3;
+      --clw-border: #e4e4e8;
+      --clw-text: #111113;
+      --clw-text-secondary: #65656d;
+      --clw-text-muted: #9393a0;
+      --clw-shadow: 0 16px 48px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
+      --clw-btn-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
+    }
+
+    *, *::before, *::after {
+      box-sizing: border-box;
+      margin: 0;
+      padding: 0;
+    }
+
+    /* ---- Trigger button ---- */
+    .clw-trigger {
+      width: 48px;
+      height: 48px;
+      border-radius: 50%;
+      border: none;
+      background: var(--clw-accent);
+      color: #fff;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      box-shadow: var(--clw-btn-shadow);
+      transition: transform var(--clw-transition), box-shadow var(--clw-transition);
+      position: relative;
+    }
+
+    .clw-trigger:hover {
+      transform: scale(1.08);
+      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
+    }
+
+    .clw-trigger:active {
+      transform: scale(0.96);
+    }
+
+    .clw-trigger svg {
+      width: 22px;
+      height: 22px;
+      fill: currentColor;
+    }
+
+    /* ---- Badge ---- */
+    .clw-badge {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      min-width: 20px;
+      height: 20px;
+      padding: 0 6px;
+      border-radius: 10px;
+      background: #ef4444;
+      color: #fff;
+      font-size: 11px;
+      font-weight: 700;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      pointer-events: none;
+      line-height: 1;
+    }
+
+    .clw-badge:empty,
+    .clw-badge[data-count="0"] {
+      display: none;
+    }
+
+    /* ---- Panel ---- */
+    .clw-panel {
+      position: fixed;
+      bottom: 80px;
+      width: 380px;
+      max-height: min(520px, calc(100vh - 120px));
+      background: var(--clw-bg);
+      border-radius: var(--clw-radius);
+      box-shadow: var(--clw-shadow);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      opacity: 0;
+      transform: translateY(12px) scale(0.96);
+      pointer-events: none;
+      transition: opacity var(--clw-transition), transform var(--clw-transition);
+    }
+
+    :host([position="bottom-right"]) .clw-panel {
+      right: 0;
+    }
+
+    :host([position="bottom-left"]) .clw-panel {
+      left: 0;
+    }
+
+    .clw-panel.open {
+      opacity: 1;
+      transform: translateY(0) scale(1);
+      pointer-events: auto;
+    }
+
+    /* ---- Panel header ---- */
+    .clw-header {
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--clw-border);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      flex-shrink: 0;
+    }
+
+    .clw-header-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--clw-text);
+      letter-spacing: -0.01em;
+    }
+
+    .clw-close {
+      width: 28px;
+      height: 28px;
+      border-radius: 6px;
+      border: none;
+      background: transparent;
+      color: var(--clw-text-muted);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background var(--clw-transition), color var(--clw-transition);
+    }
+
+    .clw-close:hover {
+      background: var(--clw-bg-hover);
+      color: var(--clw-text);
+    }
+
+    .clw-close svg {
+      width: 16px;
+      height: 16px;
+      stroke: currentColor;
+      fill: none;
+      stroke-width: 2;
+    }
+
+    /* ---- Entries list ---- */
+    .clw-entries {
+      overflow-y: auto;
+      flex: 1;
+      padding: 8px 0;
+      overscroll-behavior: contain;
+    }
+
+    .clw-entries::-webkit-scrollbar {
+      width: 6px;
+    }
+
+    .clw-entries::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .clw-entries::-webkit-scrollbar-thumb {
+      background: var(--clw-border);
+      border-radius: 3px;
+    }
+
+    /* ---- Single entry ---- */
+    .clw-entry {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--clw-border);
+      transition: background var(--clw-transition);
+    }
+
+    .clw-entry:last-child {
+      border-bottom: none;
+    }
+
+    .clw-entry:hover {
+      background: var(--clw-bg-hover);
+    }
+
+    .clw-entry-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 6px;
+    }
+
+    .clw-type-badge {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 2px 8px;
+      border-radius: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.04em;
+      line-height: 1.4;
+    }
+
+    .clw-type-feature {
+      background: rgba(59, 130, 246, 0.15);
+      color: #60a5fa;
+    }
+
+    .clw-type-improvement {
+      background: rgba(168, 85, 247, 0.15);
+      color: #c084fc;
+    }
+
+    .clw-type-fix {
+      background: rgba(34, 197, 94, 0.15);
+      color: #4ade80;
+    }
+
+    .clw-type-announcement {
+      background: rgba(251, 191, 36, 0.15);
+      color: #fbbf24;
+    }
+
+    /* Light theme badge overrides */
+    :host([data-theme="light"]) .clw-type-feature {
+      background: rgba(59, 130, 246, 0.1);
+      color: #2563eb;
+    }
+
+    :host([data-theme="light"]) .clw-type-improvement {
+      background: rgba(168, 85, 247, 0.1);
+      color: #7c3aed;
+    }
+
+    :host([data-theme="light"]) .clw-type-fix {
+      background: rgba(34, 197, 94, 0.1);
+      color: #16a34a;
+    }
+
+    :host([data-theme="light"]) .clw-type-announcement {
+      background: rgba(251, 191, 36, 0.1);
+      color: #d97706;
+    }
+
+    .clw-entry-date {
+      font-size: 12px;
+      color: var(--clw-text-muted);
+    }
+
+    .clw-entry-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--clw-text);
+      margin-bottom: 4px;
+      line-height: 1.4;
+    }
+
+    .clw-entry-title a {
+      color: inherit;
+      text-decoration: none;
+      transition: color var(--clw-transition);
+    }
+
+    .clw-entry-title a:hover {
+      color: var(--clw-accent);
+    }
+
+    .clw-entry-desc {
+      font-size: 13px;
+      color: var(--clw-text-secondary);
+      line-height: 1.55;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+
+    /* ---- Footer ---- */
+    .clw-footer {
+      padding: 10px 20px;
+      border-top: 1px solid var(--clw-border);
+      text-align: center;
+      flex-shrink: 0;
+    }
+
+    .clw-footer a {
+      font-size: 11px;
+      color: var(--clw-text-muted);
+      text-decoration: none;
+      transition: color var(--clw-transition);
+    }
+
+    .clw-footer a:hover {
+      color: var(--clw-text-secondary);
+    }
+
+    /* ---- Loading / Empty ---- */
+    .clw-loading,
+    .clw-empty {
+      padding: 40px 20px;
+      text-align: center;
+      color: var(--clw-text-muted);
+      font-size: 13px;
+    }
+
+    .clw-spinner {
+      width: 24px;
+      height: 24px;
+      border: 2px solid var(--clw-border);
+      border-top-color: var(--clw-accent);
+      border-radius: 50%;
+      animation: clw-spin 0.7s linear infinite;
+      margin: 0 auto 12px;
+    }
+
+    @keyframes clw-spin {
+      to { transform: rotate(360deg); }
+    }
+
+    /* ---- Mobile ---- */
+    @media (max-width: 440px) {
+      .clw-panel {
+        width: calc(100vw - 24px);
+        bottom: 76px;
+        max-height: calc(100vh - 100px);
+      }
+
+      :host([position="bottom-right"]) .clw-panel {
+        right: -8px;
+      }
+
+      :host([position="bottom-left"]) .clw-panel {
+        left: -8px;
+      }
+    }
+  `}var p={feature:"New",improvement:"Improved",fix:"Fixed",announcement:"Announcement"};var y="clw_last_seen_",k='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C10.343 2 9 3.343 9 5v.26C6.667 6.34 5 8.66 5 11.4V16l-2 2v1h18v-1l-2-2v-4.6c0-2.74-1.667-5.06-4-6.14V5c0-1.657-1.343-3-3-3zm0 20c1.105 0 2-.895 2-2h-4c0 1.105.895 2 2 2z"/></svg>',E='<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',a=class extends HTMLElement{constructor(){super();this.entries=[];this.isOpen=!1;this.isLoading=!1;this.shadow=this.attachShadow({mode:"open"})}static get observedAttributes(){return["project-id","api-url","position","theme","accent-color"]}get projectId(){return this.getAttribute("project-id")||""}get apiUrl(){return this.getAttribute("api-url")||"https://www.changelogdev.com/api/widget"}get position(){return this.getAttribute("position")==="bottom-left"?"bottom-left":"bottom-right"}get theme(){let e=this.getAttribute("theme");return e==="light"||e==="dark"?e:"auto"}get accentColor(){return this.getAttribute("accent-color")||"#6366f1"}connectedCallback(){this.hasAttribute("position")||this.setAttribute("position","bottom-right"),this.resolveTheme(),this.render(),this.loadEntries(),this.theme==="auto"&&window.matchMedia("(prefers-color-scheme: dark)").addEventListener("change",()=>this.resolveTheme())}attributeChangedCallback(e,t,i){t!==i&&(e==="theme"&&this.resolveTheme(),e==="accent-color"&&this.render(),(e==="project-id"||e==="api-url")&&this.loadEntries())}resolveTheme(){let e="dark";this.theme==="auto"?e=window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light":e=this.theme,this.setAttribute("data-theme",e)}async loadEntries(){this.projectId&&(this.isLoading=!0,this.updatePanel(),this.entries=await d(this.apiUrl,this.projectId),this.isLoading=!1,this.updatePanel(),this.updateBadge())}get storageKey(){return`${y}${this.projectId}`}getLastSeenDate(){try{return localStorage.getItem(this.storageKey)}catch{return null}}markAsSeen(){if(this.entries.length!==0)try{localStorage.setItem(this.storageKey,this.entries[0].date)}catch{}}getUnreadCount(){let e=this.getLastSeenDate();return e?this.entries.filter(t=>t.date>e).length:this.entries.length}render(){let e=document.createElement("style");e.textContent=g(this.accentColor);let t=document.createElement("div");t.innerHTML=`
+      <button class="clw-trigger" aria-label="View changelog">
+        ${k}
+        <span class="clw-badge" data-count="0"></span>
+      </button>
+      <div class="clw-panel" role="dialog" aria-label="Changelog">
+        <div class="clw-header">
+          <span class="clw-header-title">What's New</span>
+          <button class="clw-close" aria-label="Close changelog">
+            ${E}
+          </button>
+        </div>
+        <div class="clw-entries">
+          <div class="clw-loading">
+            <div class="clw-spinner"></div>
+            Loading...
+          </div>
+        </div>
+        <div class="clw-footer">
+          <a href="https://www.changelogdev.com?ref=widget" target="_blank" rel="noopener noreferrer">
+            Powered by Changelog.dev
+          </a>
+        </div>
+      </div>
+    `,this.shadow.innerHTML="",this.shadow.appendChild(e),this.shadow.appendChild(t),this.shadow.querySelector(".clw-trigger").addEventListener("click",()=>this.toggle()),this.shadow.querySelector(".clw-close").addEventListener("click",()=>this.close()),document.addEventListener("click",n=>{this.isOpen&&!this.contains(n.target)&&this.close()}),document.addEventListener("keydown",n=>{n.key==="Escape"&&this.isOpen&&this.close()})}toggle(){this.isOpen?this.close():this.open()}open(){this.isOpen=!0,this.shadow.querySelector(".clw-panel")?.classList.add("open"),this.markAsSeen(),this.updateBadge()}close(){this.isOpen=!1,this.shadow.querySelector(".clw-panel")?.classList.remove("open")}updateBadge(){let e=this.shadow.querySelector(".clw-badge");if(!e)return;let t=this.getUnreadCount();e.textContent=t>0?t>9?"9+":String(t):"",e.setAttribute("data-count",String(t))}updatePanel(){let e=this.shadow.querySelector(".clw-entries");if(e){if(this.isLoading){e.innerHTML=`
+        <div class="clw-loading">
+          <div class="clw-spinner"></div>
+          Loading...
+        </div>
+      `;return}if(this.entries.length===0){e.innerHTML=`
+        <div class="clw-empty">No changelog entries yet.</div>
+      `;return}e.innerHTML=this.entries.map(t=>this.renderEntry(t)).join("")}}renderEntry(e){let t=p[e.type]||e.type,i=this.formatDate(e.date),s=e.url?`<a href="${this.escapeHtml(e.url)}" target="_blank" rel="noopener noreferrer">${this.escapeHtml(e.title)}</a>`:this.escapeHtml(e.title);return`
+      <div class="clw-entry">
+        <div class="clw-entry-meta">
+          <span class="clw-type-badge clw-type-${e.type}">${t}</span>
+          <span class="clw-entry-date">${i}</span>
+        </div>
+        <div class="clw-entry-title">${s}</div>
+        <div class="clw-entry-desc">${this.escapeHtml(e.description)}</div>
+      </div>
+    `}formatDate(e){try{let t=new Date(e+"T00:00:00"),i=new Date,s=i.getTime()-t.getTime(),n=Math.floor(s/(1e3*60*60*24));if(n===0)return"Today";if(n===1)return"Yesterday";if(n<7)return`${n} days ago`;if(n<30){let c=Math.floor(n/7);return`${c} ${c===1?"week":"weeks"} ago`}return t.toLocaleDateString("en-US",{month:"short",day:"numeric",year:t.getFullYear()!==i.getFullYear()?"numeric":void 0})}catch{return e}}escapeHtml(e){let t=document.createElement("div");return t.textContent=e,t.innerHTML}};function h(){typeof window<"u"&&!customElements.get("changelog-widget")&&customElements.define("changelog-widget",a)}function C(r){h();let o=document.createElement("changelog-widget");return o.setAttribute("project-id",r.projectId),r.apiUrl&&o.setAttribute("api-url",r.apiUrl),r.position&&o.setAttribute("position",r.position),r.theme&&o.setAttribute("theme",r.theme),r.accentColor&&o.setAttribute("accent-color",r.accentColor),document.body.appendChild(o),o}h();0&&(module.exports={ChangelogWidget,init});
+//# sourceMappingURL=index.cjs.map