@squeletteapp/widget 3.0.1 → 3.1.0

package/dist/changelog-entry.d.ts

@@ -1,13 +1,14 @@
-import { Widget, Position } from '@squeletteapp/widget-builder';
-type ContentTheme = 'light' | 'dark';
+import { Widget, Position } from "@squeletteapp/widget-builder";
+type ContentTheme = "light" | "dark";
 export type ThemedWidget = Widget & {
     setTheme(theme: ContentTheme): void;
 };
-type ChangelogBannerOptions = {
+export type ChangelogBannerOptions = {
     base?: string;
     contentTheme?: ContentTheme;
     slug: string;
     debug?: boolean;
+    position?: Position;
 };
 type WidgetStore = {
     getState: () => Record<string, ThemedWidget>;

package/dist/changelog-entry.js

@@ -1,10 +1,10 @@
-import { createWidget } from '@squeletteapp/widget-builder';
+import { createWidget } from "@squeletteapp/widget-builder";
 // ============================================================================
 // Constants
 // ============================================================================
 const CACHE_DURATION_MS = 5 * 60 * 1000; // 5 minutes
-const STORAGE_KEY = 'squelette_banner_last_ticket';
-const DEFAULT_BASE = 'https://www.squelette.app';
+const STORAGE_KEY = "squelette_banner_last_ticket";
+const DEFAULT_BASE = "https://www.squelette.app";
 // ============================================================================
 // Cache Utilities
 // ============================================================================
@@ -13,8 +13,8 @@ function getEnableCache(debug) {
     if (debug === true)
         return false;
     try {
-        const userPreference = localStorage.getItem('squelette-enable-cache');
-        if (userPreference === 'false')
+        const userPreference = localStorage.getItem("squelette-enable-cache");
+        if (userPreference === "false")
             return false;
         return true;
     }
@@ -54,7 +54,7 @@ async function fetchLastChangelogTicket(base, slug, debug) {
         return ticket;
     }
     catch (e) {
-        console.error('[SqueletteBanner] Error fetching changelog ticket:', e);
+        console.error("[SqueletteBanner] Error fetching changelog ticket:", e);
         return null;
     }
 }
@@ -77,7 +77,7 @@ function withTheme(widget) {
         ...widget,
         setTheme(theme) {
             const message = {
-                type: 'THEME_UPDATE',
+                type: "THEME_UPDATE",
                 payload: { theme },
             };
             widget.sendMessage(message);
@@ -119,11 +119,11 @@ export function createChangelogStore() {
 // Widget Creators
 // ============================================================================
 export function createChangelogEntryWidget(ticketId, options = {}) {
-    const { base = DEFAULT_BASE, contentTheme = 'light', slug = 'squelette' } = options;
+    const { base = DEFAULT_BASE, contentTheme = "light", slug = "squelette" } = options;
     const widget = createWidget({
-        elementName: 'sq-changelog-entry-widget',
+        elementName: "sq-changelog-entry-widget",
         source: `${base}/widget/${contentTheme}/${slug}/changelog/${ticketId}`,
-        position: 'center',
+        position: "center",
         overlay: true,
     });
     return withTheme(widget);
@@ -136,7 +136,7 @@ export function createChangelogEntryWidget(ticketId, options = {}) {
  * - Returns null if nothing to show
  */
 export async function createChangelogBannerWidget(store, options) {
-    const { base = DEFAULT_BASE, contentTheme = 'light', slug, debug = false } = options;
+    const { base = DEFAULT_BASE, contentTheme = "light", slug, debug = false, position = "s", } = options;
     // Fetch the latest ticket
     const ticket = await fetchLastChangelogTicket(base, slug, debug);
     if (!ticket) {
@@ -151,9 +151,9 @@ export async function createChangelogBannerWidget(store, options) {
     // Preload the entry widget for when user clicks the banner
     store.mount(ticketId, createChangelogEntryWidget(ticketId, { base, contentTheme, slug }));
     const widget = createWidget({
-        elementName: 'sq-changelog-banner-widget',
+        elementName: "sq-changelog-banner-widget",
         source: `${base}/widget/${contentTheme}/${slug}/changelog/${ticketId}/banner`,
-        position: 's',
+        position,
         overlay: false,
         fitToContent: true,
         style: {
@@ -162,11 +162,11 @@ export async function createChangelogBannerWidget(store, options) {
         },
         onMessage: (type, message, actions) => {
             // Iframe signals it's ready to be shown
-            if (type === 'OPEN_WIDGET') {
+            if (type === "OPEN_WIDGET") {
                 widget.open();
             }
             // User clicked on the banner content
-            if (type === 'OPEN_CHANGELOG_ENTRY') {
+            if (type === "OPEN_CHANGELOG_ENTRY") {
                 const id = message.payload.ticketId;
                 actions.close();
                 store.open(id);
@@ -184,21 +184,21 @@ export async function createChangelogBannerWidget(store, options) {
     return withTheme(widget);
 }
 export function createChangelogEntriesListDropdownWidget(anchor, store, options = {}) {
-    const { base = DEFAULT_BASE, contentTheme = 'light', slug = 'squelette', position = 'nw' } = options;
+    const { base = DEFAULT_BASE, contentTheme = "light", slug = "squelette", position = "nw", } = options;
     const widget = createWidget({
-        elementName: 'sq-changelog-entries-list-dropdown-widget',
+        elementName: "sq-changelog-entries-list-dropdown-widget",
         source: `${base}/widget/${contentTheme}/${slug}/changelog/list`,
         position,
         anchor,
         fitToContent: true,
         onMessage: (type, message, actions) => {
-            if (type === 'PRELOAD_CHANGELOG_ENTRIES') {
+            if (type === "PRELOAD_CHANGELOG_ENTRIES") {
                 const ids = message.payload.ids;
                 for (const id of ids) {
                     store.mount(id, createChangelogEntryWidget(id, { base, contentTheme, slug }));
                 }
             }
-            if (type === 'OPEN_CHANGELOG_ENTRY') {
+            if (type === "OPEN_CHANGELOG_ENTRY") {
                 const ticketId = message.payload.ticketId;
                 actions.close();
                 store.open(ticketId);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squeletteapp/widget",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "description": "Embeddable Squelette widget",
   "type": "module",
   "main": "dist/index.js",