@squeletteapp/widget 0.1.0 → 0.3.0

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

@@ -0,0 +1,41 @@
+/**
+ * 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

@@ -0,0 +1,8 @@
+/**
+ * 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

@@ -0,0 +1,79 @@
+/**
+ * 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

@@ -0,0 +1,12 @@
+/**
+ * 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

@@ -0,0 +1,14 @@
+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-B0eQqkb_.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
+};