@squeletteapp/widget 0.4.0 → 1.0.0

package/dist/types/widget/core/positioning.d.ts

@@ -1,63 +0,0 @@
-/**
- * Widget Positioning System
- *
- * Handles advanced positioning logic for the widget.
- * This module supports two positioning modes:
- *
- * 1. **Button-anchored positioning**: Widget appears relative to a trigger button
- *    - Dynamically calculates optimal placement (top/bottom/left/right)
- *    - Automatically repositions on scroll/resize
- *    - Ensures widget stays within viewport bounds
- *    - Supports collision detection and smart fallback positioning
- *
- * 2. **Fixed positioning**: Widget appears at a fixed viewport location
- *    - Supports 9 preset positions (fixed-top-left, fixed-center-center, etc.)
- *    - Maintains position regardless of page scroll
- *    - Respects viewport margins and responsive layouts
- *
- * This module also handles:
- * - Click-outside detection to close the widget
- * - Overlay blur effects
- * - Custom button selector binding
- * - Lifecycle cleanup for event listeners
- *
- * @example
- * ```ts
- * const cleanup = applyPositioning(element, {
- *   buttonSelector: '#feedback-button',
- *   position: 'bottom',
- *   overlayBlur: true
- * });
- *
- * // Later: cleanup all event listeners
- * cleanup();
- * ```
- */
-import type { SqueletteWidgetElement } from "./custom-element";
-import type { WidgetPosition } from "../types";
-/**
- * Widget positioning and binding options.
- */
-export interface PositioningOptions {
-    /** CSS selector for the button that triggers the widget */
-    buttonSelector?: string;
-    /** Preferred position relative to button or fixed viewport position */
-    position?: WidgetPosition;
-    /** Whether to apply blur effect to the overlay backdrop */
-    overlayBlur?: boolean;
-    /** Callback when widget open state changes */
-    onOpenChange?: (open: boolean) => void;
-    /** Callback when widget iframe finishes loading */
-    onLoad?: () => void;
-}
-/**
- * Applies positioning and event bindings to a widget element.
- *
- * This function sets up all the positioning logic, event listeners, and
- * custom behaviors needed for the widget.
- *
- * @param element - The widget element to enhance
- * @param options - Positioning and behavior options
- * @returns Array of cleanup functions to remove all applied behaviors
- */
-export declare function applyPositioning(element: SqueletteWidgetElement, options: PositioningOptions): Array<() => void>;

package/dist/types/widget/core/scroll-lock.d.ts

@@ -1,28 +0,0 @@
-/**
- * Body Scroll Lock Utility
- *
- * Manages the locking and unlocking of body scroll when the widget panel is open.
- * This prevents the underlying page from scrolling while the user interacts with
- * the widget overlay.
- *
- * Key behaviors:
- * - Locks body scroll by setting `overflow: hidden`
- * - Calculates and compensates for scrollbar width to prevent layout shift
- * - Returns a cleanup function to restore original scroll state
- * - Preserves original overflow and padding-right values
- *
- * @example
- * ```ts
- * const restoreScroll = toggleBodyScroll(true);
- * // ... widget is open, body cannot scroll
- * restoreScroll(); // restore original scroll behavior
- * ```
- */
-/**
- * Toggles body scroll lock and compensates for scrollbar width
- * to prevent layout shift.
- *
- * @param lock - Whether to lock (true) or unlock (false) body scroll
- * @returns A cleanup function that restores the original scroll state
- */
-export declare function toggleBodyScroll(lock: boolean): () => void;

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

@@ -1,90 +0,0 @@
-/**
- * Widget Element Module
- *
- * This is the main entry point for the widget's custom element implementation.
- * It has been refactored into smaller, focused modules for better maintainability:
- *
- * **Module Structure:**
- *
- * - `core/custom-element.ts` - The `<squelette-widget>` custom element class
- *   - Handles Shadow DOM, lifecycle methods, attribute observation
- *   - Manages widget state (open/closed, loading, theme)
- *   - Coordinates iframe loading and communication
- *
- * - `core/identity.ts` - User identity management
- *   - Global identity store for all widget instances
- *   - `identify()` and `clearIdentity()` functions
- *   - Event-based identity synchronization
- *
- * - `core/scroll-lock.ts` - Body scroll management
- *   - Locks page scroll when widget is open
- *   - Compensates for scrollbar width to prevent layout shift
- *
- * - `core/panel-dimensions.ts` - Widget panel dimensions
- *   - Default dimensions for each view type (feedback, roadmap, changelog)
- *   - CSS custom property application
- *
- * - `core/positioning.ts` - Advanced positioning system
- *   - Button-anchored positioning with collision detection
- *   - Fixed viewport positioning (9 preset positions)
- *   - Click-outside-to-close behavior
- *   - Responsive viewport tracking
- *
- * - `core/global-api.ts` - Global `window.SqueletteWidget` API
- *   - Factory functions for creating widgets
- *   - Convenient JavaScript API layer
- *   - Version and CDN information
- *
- * **Usage:**
- *
- * Declarative (HTML):
- * ```html
- * <squelette-widget
- *   project="my-project"
- *   board="feedback"
- *   theme="auto"
- *   locale="en"
- * ></squelette-widget>
- * ```
- *
- * Programmatic (JavaScript):
- * ```js
- * const widget = SqueletteWidget.create({
- *   project: 'my-project',
- *   board: 'feedback',
- *   view: 'feedback'
- * });
- *
- * await widget.open();
- * widget.on('submit', (e) => console.log(e.payload));
- * ```
- *
- * Alternative API:
- * ```js
- * const widget = SqueletteWidget.createFeedbackWidget('my-project', 'feedback', {
- *   buttonSelector: '#feedback-button',
- *   position: 'bottom',
- *   overlayBlur: true
- * });
- * ```
- *
- * Identity Management:
- * ```js
- * SqueletteWidget.identify({
- *   userId: '123',
- *   email: 'user@example.com',
- *   signature: 'hmac-signature',
- *   name: 'John Doe' // optional
- * });
- *
- * SqueletteWidget.clearIdentity(); // on logout
- * ```
- */
-export { SqueletteWidgetElement, registerSqueletteWidget, } from "./core/custom-element";
-export { identify, clearIdentity } from "./core/identity";
-export { ensureGlobalHelper, type GlobalSqueletteWidget, } from "./core/global-api";
-declare global {
-    interface HTMLElementTagNameMap {
-        "squelette-widget": import("./core/custom-element").SqueletteWidgetElement;
-    }
-}

package/dist/types/widget/events.d.ts

@@ -1,13 +0,0 @@
-/**
- * Lightweight event emitter dedicated to the widget element. It keeps
- * allocation pressure low while offering an ergonomic `.on()` API for clients
- * embedding the widget and for internal coordination between the shell and the
- * custom element lifecycle.
- */
-import type { WidgetEventListener, WidgetEventName, WidgetEventDetailMap } from './types';
-export declare class WidgetEventEmitter {
-    private listeners;
-    on<K extends WidgetEventName>(event: K, handler: WidgetEventListener<K>): () => void;
-    off<K extends WidgetEventName>(event: K, handler: WidgetEventListener<K>): void;
-    emit<K extends WidgetEventName>(event: K, payload: WidgetEventDetailMap[K]): void;
-}

package/dist/types/widget/factories.d.ts

@@ -1,41 +0,0 @@
-/**
- * Widget Factory Functions
- *
- * Provides convenient factory functions for creating widget instances programmatically.
- * These functions are thin wrappers around the global API methods, allowing tree-shakeable
- * imports for modern bundlers.
- *
- * These exports are primarily for the widget-react package and other programmatic
- * integrations that prefer direct imports over the global `window.SqueletteWidget` API.
- *
- * @example
- * ```ts
- * import { createFeedbackWidget } from '@squeletteapp/widget';
- *
- * const widget = createFeedbackWidget('my-project', 'feedback', {
- *   buttonSelector: '#feedback-btn',
- *   position: 'bottom'
- * });
- * ```
- */
-import { type GlobalSqueletteWidget } from "./core/global-api";
-/**
- * Creates a feedback widget.
- * Alias for window.SqueletteWidget.createFeedbackWidget
- */
-export declare function createFeedbackWidget(...args: Parameters<GlobalSqueletteWidget["createFeedbackWidget"]>): import("./element").SqueletteWidgetElement;
-/**
- * Creates a roadmap widget.
- * Alias for window.SqueletteWidget.createRoadmapWidget
- */
-export declare function createRoadmapWidget(...args: Parameters<GlobalSqueletteWidget["createRoadmapWidget"]>): import("./element").SqueletteWidgetElement;
-/**
- * Creates a changelog widget.
- * Alias for window.SqueletteWidget.createChangelogWidget
- */
-export declare function createChangelogWidget(...args: Parameters<GlobalSqueletteWidget["createChangelogWidget"]>): import("./element").SqueletteWidgetElement;
-/**
- * Creates a widget with the modern API.
- * Alias for window.SqueletteWidget.create
- */
-export declare function createWidget(...args: Parameters<GlobalSqueletteWidget["create"]>): import("./element").SqueletteWidgetElement;

package/dist/types/widget/styles.d.ts

@@ -1,8 +0,0 @@
-/**
- * Style helpers shared by the widget element. Constructable stylesheets are
- * used when available for optimal performance; otherwise, we fall back to a
- * simple `<style>` tag appended to the shadow root.
- */
-export declare const baseStyles = "\n:host {\n  position: relative;\n  z-index: 2147483000;\n  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;\n  color: var(--sq-fg, #0f172a);\n  --sq-offset-top: auto;\n  --sq-offset-right: 24px;\n  --sq-offset-bottom: 24px;\n  --sq-offset-left: auto;\n  --sq-panel-width: min(420px, 92vw);\n  --sq-panel-height: min(420px, 80vh);\n}\n\n.sq-root {\n  position: fixed;\n  top: var(--sq-offset-top);\n  right: var(--sq-offset-right);\n  bottom: var(--sq-offset-bottom);\n  left: var(--sq-offset-left);\n  display: flex;\n  align-items: flex-end;\n  gap: 12px;\n}\n\n.sq-trigger {\n  pointer-events: auto;\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  border: none;\n  border-radius: 999px;\n  padding: 10px 16px;\n  font-size: 14px;\n  font-weight: 600;\n  background: var(--sq-accent, #6366f1);\n  color: #fff;\n  cursor: pointer;\n  box-shadow: var(--sq-shadow, 0 30px 60px rgba(15, 23, 42, 0.25));\n  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease;\n}\n\n:host([data-launcher-hidden='true']) .sq-trigger {\n  display: none;\n}\n\n.sq-trigger:hover {\n  transform: translateY(-1px);\n  box-shadow: 0 20px 40px rgba(15, 23, 42, 0.28);\n}\n\n.sq-trigger-icon {\n  display: inline-flex;\n  width: 18px;\n  height: 18px;\n  align-items: center;\n  justify-content: center;\n  border-radius: 50%;\n  background: rgba(255, 255, 255, 0.16);\n  font-size: 12px;\n  line-height: 1;\n}\n\n.sq-overlay {\n  position: fixed;\n  inset: 0;\n  background: rgba(0, 0, 0, 0.2);\n  opacity: 0;\n  pointer-events: none;\n  transition: opacity 0.22s ease;\n  z-index: 0;\n}\n\n.sq-overlay[data-state='open'] {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n:host([data-overlay-blur='off']) .sq-overlay {\n  backdrop-filter: none;\n}\n\n.sq-panel {\n  position: relative;\n  display: flex;\n  pointer-events: auto;\n  width: var(--sq-panel-width, min(420px, 92vw));\n  height: var(--sq-panel-height, min(520px, 80vh));\n  max-height: min(80vh, 680px);\n  border-radius: var(--sq-radius, 16px);\n  overflow: hidden;\n  box-shadow: var(--sq-shadow, 0 30px 60px rgba(15, 23, 42, 0.25));\n  border: 1px solid var(--sq-border, rgba(15, 23, 42, 0.08));\n  background: var(--sq-bg, #ffffff);\n  transform: none;\n  opacity: 1;\n  transition: none;\n  z-index: 1;\n}\n\n.sq-panel[data-state='closed'] {\n  pointer-events: none;\n  display: none;\n}\n\n:host([data-anchor-origin='top']) .sq-panel {\n  transform-origin: top center;\n}\n\n:host([data-anchor-origin='bottom']) .sq-panel {\n  transform-origin: bottom center;\n}\n\n:host([data-anchor-origin='left']) .sq-panel {\n  transform-origin: center left;\n}\n\n:host([data-anchor-origin='right']) .sq-panel {\n  transform-origin: center right;\n}\n\n.sq-panel[data-state='open'] {\n  opacity: 1;\n  transform: translateY(0) scale(1);\n}\n\n@media (max-width: 640px) {\n  .sq-root {\n    bottom: 16px;\n    right: 16px;\n  }\n\n  .sq-panel {\n    width: min(100vw - 24px, 380px);\n    max-height: min(85vh, 720px);\n  }\n}\n";
-export declare function adoptStyles(root: ShadowRoot, cssText: string): void;
-export declare function adoptBaseStyles(root: ShadowRoot): void;

package/dist/types/widget/types.d.ts

@@ -1,79 +0,0 @@
-/**
- * Shared type definitions for the widget entry-point. These types are used by
- * both the custom element class and the shell component so keeping them in a
- * dedicated module prevents import cycles while improving discoverability.
- */
-import type { ComponentType } from "preact";
-import type { WidgetFrameProps } from "../app/app";
-export type WidgetTheme = "light" | "dark" | "auto";
-export type WidgetEventName = "open" | "close" | "submit";
-export type WidgetFloatingPosition = "top" | "bottom" | "left" | "right";
-export type WidgetFixedPosition = `fixed-${"top" | "center" | "bottom"}-${"left" | "center" | "right"}`;
-export type WidgetPosition = WidgetFloatingPosition | WidgetFixedPosition;
-export type WidgetView = "feedback" | "roadmap" | "changelog";
-export interface WidgetSubmitPayload {
-    projectId: string;
-    board?: string | null;
-    locale: string;
-    data?: Record<string, unknown>;
-}
-export interface WidgetIdentityPayload {
-    userId: string;
-    email: string;
-    signature: string;
-    name?: string;
-    avatar?: string;
-    [key: string]: unknown;
-}
-export interface WidgetEventDetailMap {
-    open: {
-        source: "api" | "attribute";
-    };
-    close: {
-        source: "api" | "attribute";
-    };
-    submit: {
-        source: "app";
-        payload: WidgetSubmitPayload;
-    };
-}
-export type WidgetEventListener<K extends WidgetEventName> = (detail: WidgetEventDetailMap[K]) => void;
-export interface CreateWidgetOptions {
-    project: string;
-    board?: string;
-    theme?: WidgetTheme;
-    locale?: string;
-    token?: string;
-    signature?: string;
-    appendTo?: HTMLElement;
-    attributes?: Record<string, string>;
-    label?: string;
-    view?: WidgetView;
-    apiBase?: string;
-}
-export interface InternalWidgetConfig {
-    project: string | null;
-    board: string | null;
-    theme: WidgetTheme;
-    locale: string;
-    token?: string;
-    signature?: string;
-    apiBase: string;
-    label: string;
-    view: WidgetView;
-}
-export interface LazyModule {
-    WidgetFrame?: ComponentType<WidgetFrameProps>;
-    default?: ComponentType<WidgetFrameProps>;
-    stylesText?: string;
-}
-export interface WidgetShellProps {
-    open: boolean;
-    label: string;
-    iframeSrc: string | null;
-    FrameComponent: ComponentType<WidgetFrameProps> | null;
-    ensureFrame: () => void | Promise<void>;
-    onOpen: () => void;
-    onClose: () => void;
-    onFrameLoaded: () => void;
-}

package/dist/types/widget/utils.d.ts

@@ -1,12 +0,0 @@
-/**
- * Utility helpers for attribute reflection, locale/theme resolution, and
- * building the iframe URL. These functions are intentionally pure to simplify
- * unit testing and future extraction into shared packages.
- */
-import type { WidgetTheme, InternalWidgetConfig, WidgetView } from './types';
-export declare function reflectBooleanAttribute(el: HTMLElement, name: string, value: boolean): void;
-export declare function resolveLocale(locale?: string | null): string;
-export declare function resolveTheme(theme?: string | null): WidgetTheme;
-export declare function resolveView(view?: string | null): WidgetView;
-export declare function buildIframeSrc(config: InternalWidgetConfig): string | null;
-export declare function configureTheme(host: HTMLElement, theme: WidgetTheme): () => void;

package/dist/widget.es.js

@@ -1,16 +0,0 @@
-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,
-  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
-};