@squeletteapp/widget 0.3.9 → 0.4.0

package/dist/types/banner/banner-modal.d.ts

@@ -8,9 +8,10 @@ type Ticket = {
 };
 export declare const showModal: import("@preact/signals").Signal<boolean>;
 export declare const modalTicket: import("@preact/signals").Signal<Ticket | null>;
-export declare function BannerModal({ workspaceSlug, theme, base, }: {
+export declare function BannerModal({ workspaceSlug, theme, base, ticketId, }: {
     workspaceSlug: string;
     theme: "light" | "dark";
     base: string;
+    ticketId?: number;
 }): import("preact").VNode<any> | null;
 export {};

package/dist/types/banner/banner.d.ts

@@ -2,8 +2,10 @@ type SqueletteBannerWidgetProps = {
     workspaceSlug: string;
     theme: "light" | "dark";
     base?: string;
+    debug?: boolean;
+    ticketId?: number;
 };
-export declare function Banner({ workspaceSlug, theme, base, }: SqueletteBannerWidgetProps): import("preact").JSX.Element | null;
+export declare function Banner({ workspaceSlug, theme, base, debug, ticketId, }: SqueletteBannerWidgetProps): import("preact").JSX.Element | null;
 type MarqueeSpanProps = {
     children: string;
     duration?: number;

package/dist/types/banner/index.d.ts

@@ -5,6 +5,8 @@ type BannerInitPayload = {
     contentTheme?: "light" | "dark";
     theme?: BannerTheme;
     base?: string;
+    debug?: boolean;
+    ticketId?: number;
 };
 export type BannerTheme = {
     bg?: string;
@@ -15,6 +17,8 @@ export type BannerTheme = {
     buttonHover?: string | number;
 };
 export declare const SqueletteBanner: {
-    init({ slug, theme, contentTheme, base, }: BannerInitPayload): SqueletteBannerElement | null;
+    init({ slug, theme, contentTheme, base, debug, ticketId, }: BannerInitPayload): SqueletteBannerElement | null;
     setTheme(theme: BannerTheme): void;
+    setContentTheme(contentTheme: "light" | "dark"): void;
+    destroy(): void;
 };

package/dist/types/changelog/changelog.d.ts

@@ -0,0 +1,15 @@
+import { h } from "preact";
+interface ChangelogProps {
+    workspaceSlug: string;
+    workspace: string;
+    theme: "light" | "dark";
+    contentTheme: "light" | "dark";
+    base: string;
+    debug?: boolean;
+    onClose: () => void;
+}
+/**
+ * Changelog component renders iframe pointing to workspace widget changelog page.
+ */
+export declare function Changelog({ workspaceSlug, workspace, theme, contentTheme, base, debug, onClose, }: ChangelogProps): h.JSX.Element;
+export {};

package/dist/types/changelog/element.d.ts

@@ -0,0 +1,86 @@
+declare class SqueletteChangelogElement extends HTMLElement {
+    private shadow;
+    private targetElement;
+    private resizeObserver;
+    private scrollListener;
+    private clickListener;
+    private outsideClickListener;
+    private isOpen;
+    private currentAlign;
+    private instanceId;
+    static get observedAttributes(): string[];
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+    private renderChangelog;
+    disconnectedCallback(): void;
+    /**
+     * Opens the changelog widget with animation based on position.
+     */
+    private lastToggleTs;
+    open(): void;
+    /**
+     * Toggles the changelog widget open/close state.
+     * Debounced to prevent double firing in the same tick (StrictMode / duplicate listeners).
+     */
+    toggle(): void;
+    /**
+     * Closes the changelog widget with animation.
+     */
+    close(): void;
+    /**
+     * Applies opening animation based on the current align position.
+     */
+    private applyOpenAnimation;
+    /**
+     * Applies closing animation.
+     */
+    private applyCloseAnimation;
+    /**
+     * Sets up click listener on the target element to toggle changelog.
+     * Also sets up element tracking for positioning when element-based.
+     */
+    private setupClickListener;
+    /**
+     * Cleans up click listener.
+     */
+    private cleanupClickListener;
+    /**
+     * Sets up outside click listener to close the widget.
+     */
+    private setupOutsideClickListener;
+    /**
+     * Cleans up outside click listener.
+     */
+    private cleanupOutsideClickListener;
+    /**
+     * Updates the widget position based on alignment.
+     * Screen-based positioning is relative to viewport.
+     * Element-based positioning is relative to the target element.
+     */
+    private updatePosition;
+    /**
+     * Positions the widget relative to the viewport.
+     */
+    private positionRelativeToScreen;
+    /**
+     * Positions the widget relative to a target element.
+     * If position is 'auto', finds the best position based on available viewport space.
+     */
+    private positionRelativeToElement;
+    /**
+     * Calculates the best position for the widget based on available viewport space.
+     * Returns the position with the most available space.
+     */
+    private calculateBestPosition;
+    /**
+     * Sets up ResizeObserver and scroll listener to track element position changes.
+     * Only updates position when widget is open.
+     */
+    private setupElementTracking;
+    /**
+     * Cleans up observers and listeners.
+     */
+    private cleanupTracking;
+}
+export { SqueletteChangelogElement };

package/dist/types/changelog/index.d.ts

@@ -0,0 +1,32 @@
+import { SqueletteChangelogElement } from "./element";
+export { SqueletteChangelogElement };
+type ChangelogInitPayload = {
+    workspace: string;
+    contentTheme?: "light" | "dark";
+    theme?: ChangelogTheme;
+    base?: string;
+    debug?: boolean;
+    selector?: string;
+    align?: ChangelogAlign;
+    height?: number | string;
+};
+export type ChangelogTheme = {
+    bg?: string;
+    border?: string;
+};
+/**
+ * Alignment format: <anchor>-<position>
+ * - anchor: "screen" or "element"
+ * - position: "top-left" | "top-center" | "top-right" | "left" | "center" | "right" | "bottom-left" | "bottom-center" | "bottom-right" | "auto"
+ * - "auto" is only supported for element-based positioning and will automatically choose the best position
+ */
+export type ChangelogAlign = "screen-top-left" | "screen-top-center" | "screen-top-right" | "screen-left" | "screen-center" | "screen-right" | "screen-bottom-left" | "screen-bottom-center" | "screen-bottom-right" | "element-top-left" | "element-top-center" | "element-top-right" | "element-left" | "element-center" | "element-right" | "element-bottom-left" | "element-bottom-center" | "element-bottom-right" | "element-auto";
+export declare const SqueletteChangelog: {
+    init({ workspace, theme, contentTheme, base, debug, selector, align, height, }: ChangelogInitPayload): SqueletteChangelogElement | null;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    setTheme(theme: ChangelogTheme): void;
+    setContentTheme(contentTheme: "light" | "dark"): void;
+    destroy(): void;
+};

package/dist/types/index.d.ts

@@ -8,3 +8,5 @@ export { identify, clearIdentity } from "./widget/element";
 export { createWidget, createFeedbackWidget, createRoadmapWidget, createChangelogWidget, } from "./widget/factories";
 export * from "./banner";
 export type { BannerTheme } from "./banner";
+export * from "./changelog";
+export type { ChangelogTheme, ChangelogAlign } from "./changelog";

package/dist/widget.es.js

@@ -1,14 +1,16 @@
-import { h as a, g as r, S as s, c as d, e as i, b as l, d as g, a as n, f as c, i as W, r as o } from "./index-CqZ9Uw3Y.js";
+import { h as a, g as l, k as s, j as g, S as r, c as n, e as d, b as i, d as c, a as o, f as u, i as S, r as q } from "./index-Bj_9-5Hl.js";
 export {
   a as SqueletteBanner,
-  r as SqueletteBannerElement,
-  s as SqueletteWidgetElement,
-  d as clearIdentity,
-  i as createChangelogWidget,
-  l as createFeedbackWidget,
-  g as createRoadmapWidget,
-  n as createWidget,
-  c as ensureGlobalHelper,
-  W as identify,
-  o as registerSqueletteWidget
+  l as SqueletteBannerElement,
+  s as SqueletteChangelog,
+  g as SqueletteChangelogElement,
+  r as SqueletteWidgetElement,
+  n as clearIdentity,
+  d as createChangelogWidget,
+  i as createFeedbackWidget,
+  c as createRoadmapWidget,
+  o as createWidget,
+  u as ensureGlobalHelper,
+  S as identify,
+  q as registerSqueletteWidget
 };