@squeletteapp/widget 0.1.0

package/dist/button-component.d.ts

@@ -0,0 +1,2 @@
+declare let SqueletteWidgetButton: typeof HTMLElement | null;
+export { SqueletteWidgetButton };

package/dist/button-component.js

@@ -0,0 +1,158 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SqueletteWidgetButton = void 0;
+const svgIcon = `
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-gift-icon lucide-gift"><rect x="3" y="8" width="18" height="4" rx="1"/><path d="M12 8v13"/><path d="M19 12v7a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-7"/><path d="M7.5 8a2.5 2.5 0 0 1 0-5A4.8 8 0 0 1 12 8a4.8 8 0 0 1 4.5-5 2.5 2.5 0 0 1 0 5"/></svg>
+`;
+// Define the class only in browser environment
+let SqueletteWidgetButton = null;
+exports.SqueletteWidgetButton = SqueletteWidgetButton;
+if (typeof window !== "undefined" && typeof HTMLElement !== "undefined") {
+    exports.SqueletteWidgetButton = SqueletteWidgetButton = class extends HTMLElement {
+        constructor() {
+            super();
+            this.isOpen = false;
+            this.attachShadow({ mode: "open" });
+        }
+        connectedCallback() {
+            this.render();
+            this.setupEventListeners();
+        }
+        disconnectedCallback() {
+            // Cleanup if needed
+        }
+        static get observedAttributes() {
+            return ["data-open"];
+        }
+        attributeChangedCallback(name, oldValue, newValue) {
+            if (name === "data-open") {
+                this.isOpen = newValue === "true";
+                this.updateButtonText();
+            }
+        }
+        setToggleHandler(handler) {
+            this.onToggle = handler;
+        }
+        toggle() {
+            this.isOpen = !this.isOpen;
+            this.setAttribute("data-open", this.isOpen.toString());
+            this.updateButtonText();
+            this.onToggle?.(this.isOpen);
+        }
+        render() {
+            if (!this.shadowRoot)
+                return;
+            // Create style element
+            const style = document.createElement("style");
+            style.textContent = `
+        @keyframes slideInFromBottom {
+          from {
+            transform: translateY(100px);
+            opacity: 0;
+          }
+          to {
+            transform: translateY(0);
+            opacity: 1;
+          }
+        }
+
+        :host {
+          position: fixed;
+          bottom: 20px;
+          right: 20px;
+          z-index: 9998;
+          animation: slideInFromBottom 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
+        }
+
+        .widget-button {
+          border-radius: 9999px;
+          height: 36px;
+          box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+          border: 1px solid #e5e7eb;
+          font-size: 14px;
+          display: flex;
+          align-items: center;
+          background-color: #1f2937;
+          color: white;
+          justify-content: center;
+          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+          padding-left: 12px;
+          padding-right: 12px;
+          gap: 4px;
+          font-weight: 500;
+          cursor: pointer;
+          font-family: system-ui, -apple-system, sans-serif;
+        }
+
+        .widget-button:hover {
+          background-color: #374151;
+          transform: scale(1.05);
+          box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.15);
+        }
+
+        .widget-button:active {
+          transform: scale(0.98);
+        }
+
+        .widget-button-icon {
+          display: inline-flex;
+          align-items: center;
+          width: 16px;
+          height: 16px;
+          flex-shrink: 0;
+        }
+
+        .widget-button-text {
+          display: inline-flex;
+          align-items: center;
+          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+          overflow: hidden;
+          white-space: nowrap;
+          max-width: 288px;
+        }
+      `;
+            // Create button element
+            const button = document.createElement("button");
+            button.className = "widget-button";
+            button.setAttribute("aria-label", "Toggle feedback widget");
+            const iconDiv = document.createElement("div");
+            iconDiv.className = "widget-button-icon";
+            iconDiv.innerHTML = svgIcon;
+            const span = document.createElement("span");
+            span.className = "widget-button-text";
+            span.textContent = "What's new ?";
+            button.appendChild(iconDiv);
+            button.appendChild(span);
+            this.shadowRoot.appendChild(style);
+            this.shadowRoot.appendChild(button);
+        }
+        setupEventListeners() {
+            const button = this.shadowRoot?.querySelector(".widget-button");
+            if (button) {
+                button.addEventListener("click", () => this.toggle());
+            }
+        }
+        updateButtonText() {
+            const span = this.shadowRoot?.querySelector(".widget-button-text");
+            const iconDiv = this.shadowRoot?.querySelector(".widget-button-icon");
+            if (span && iconDiv) {
+                if (this.isOpen) {
+                    span.textContent = "✕";
+                    iconDiv.style.display = "none";
+                }
+                else {
+                    span.textContent = "What's new ?";
+                    iconDiv.style.display = "inline-block";
+                }
+            }
+        }
+    };
+}
+// Register the custom element only in browser environment
+if (typeof window !== "undefined" &&
+    typeof customElements !== "undefined" &&
+    SqueletteWidgetButton) {
+    if (!customElements.get("squelette-widget-button")) {
+        customElements.define("squelette-widget-button", SqueletteWidgetButton);
+    }
+}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+interface WidgetOptions {
+    url: string;
+    buttonSelector: string;
+    position?: 'top' | 'bottom' | 'left' | 'right';
+    onLoad?: () => void;
+    onOpenChange?: (isOpen: boolean) => void;
+}
+export declare function createRoadmapWidget(workspaceSlug: string, boardSlug: string, options: Omit<WidgetOptions, 'url'> & {
+    theme?: string;
+}): {
+    destroy: () => void;
+};
+export declare function createChangelogWidget(workspaceSlug: string, options: Omit<WidgetOptions, 'url'> & {
+    theme?: string;
+}): {
+    destroy: () => void;
+};
+export declare function createFeedbackWidget(workspaceSlug: string, boardSlug: string | undefined, options: Omit<WidgetOptions, 'url'> & {
+    theme?: string;
+}): {
+    destroy: () => void;
+};
+export declare function createWidget(options: WidgetOptions): {
+    destroy: () => void;
+};
+export {};

package/dist/index.js

@@ -0,0 +1,230 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createRoadmapWidget = createRoadmapWidget;
+exports.createChangelogWidget = createChangelogWidget;
+exports.createFeedbackWidget = createFeedbackWidget;
+exports.createWidget = createWidget;
+// For now, the production one
+const baseUrl = 'https://squelette.app';
+function createRoadmapWidget(workspaceSlug, boardSlug, options) {
+    const params = new URLSearchParams({ board: boardSlug });
+    if (options.theme)
+        params.set('theme', options.theme);
+    const url = `${baseUrl}/widget/${workspaceSlug}/roadmap?${params.toString()}`;
+    const { theme: _, ...widgetOptions } = options;
+    return createWidget({ ...widgetOptions, url });
+}
+function createChangelogWidget(workspaceSlug, options) {
+    const params = new URLSearchParams();
+    if (options.theme)
+        params.set('theme', options.theme);
+    const url = `${baseUrl}/widget/${workspaceSlug}/changelog${params.toString() ? `?${params.toString()}` : ''}`;
+    const { theme: _, ...widgetOptions } = options;
+    return createWidget({ ...widgetOptions, url });
+}
+function createFeedbackWidget(workspaceSlug, boardSlug, options) {
+    const params = new URLSearchParams();
+    if (boardSlug)
+        params.set('board', boardSlug);
+    if (options.theme)
+        params.set('theme', options.theme);
+    const url = `${baseUrl}/widget/${workspaceSlug}/feedback${params.toString() ? `?${params.toString()}` : ''}`;
+    const { theme: _, ...widgetOptions } = options;
+    return createWidget({ ...widgetOptions, url });
+}
+function createWidget(options) {
+    const { url, buttonSelector, position = 'top', onLoad, onOpenChange, } = options;
+    // Store initial URL to reset to when closing
+    const initialUrl = url;
+    // Create iframe element (initially hidden but preloaded)
+    const iframe = document.createElement('iframe');
+    iframe.src = url;
+    iframe.loading = 'eager';
+    // Function to update iframe dimensions based on URL
+    const updateIframeDimensions = (currentUrl) => {
+        const urlPath = new URL(currentUrl).pathname;
+        const isFeedback = urlPath.endsWith('/feedback');
+        const isChangelog = urlPath.endsWith('/changelog');
+        const isRoadmap = urlPath.endsWith('/roadmap');
+        const width = '400px';
+        let height = '540px';
+        switch (true) {
+            case isFeedback:
+                height = '250px';
+                break;
+            case isChangelog:
+                height = '500px';
+                break;
+            case isRoadmap:
+                height = '400px';
+                break;
+            default:
+                height = '540px';
+                break;
+        }
+        iframe.style.width = width;
+        iframe.style.height = height;
+    };
+    // Initial dimensions
+    updateIframeDimensions(url);
+    // Get user-provided button element
+    const button = document.querySelector(buttonSelector);
+    if (!button) {
+        console.error(`Button element not found with selector: ${buttonSelector}`);
+        return { destroy: () => { } };
+    }
+    // Position calculation helper function
+    const calculatePosition = (buttonRect, iframeWidth, iframeHeight, preferredPosition) => {
+        const viewport = {
+            width: window.innerWidth,
+            height: window.innerHeight,
+        };
+        const margin = 12; // Gap between button and iframe
+        let left;
+        let top;
+        switch (preferredPosition) {
+            case 'right':
+                left = buttonRect.right + margin;
+                top = buttonRect.top;
+                break;
+            case 'left':
+                left = buttonRect.left - iframeWidth - margin;
+                top = buttonRect.top;
+                break;
+            case 'top':
+                left = buttonRect.left - (iframeWidth - buttonRect.width) / 2;
+                top = buttonRect.top - iframeHeight - margin;
+                break;
+            case 'bottom':
+                left = buttonRect.left - (iframeWidth - buttonRect.width) / 2;
+                top = buttonRect.bottom + margin;
+                break;
+            default:
+                left = buttonRect.left - (iframeWidth - buttonRect.width) / 2;
+                top = buttonRect.top - iframeHeight - margin;
+        }
+        // Ensure iframe stays within viewport bounds
+        left = Math.max(10, Math.min(left, viewport.width - iframeWidth - 10));
+        top = Math.max(10, Math.min(top, viewport.height - iframeHeight - 10));
+        return { left, top };
+    };
+    // Function to update iframe position based on button position
+    const updateIframePosition = () => {
+        if (!button)
+            return;
+        const buttonRect = button.getBoundingClientRect();
+        const iframeWidth = Number.parseInt(iframe.style.width || '400px', 10);
+        const iframeHeight = Number.parseInt(iframe.style.height || '540px', 10);
+        const pos = calculatePosition(buttonRect, iframeWidth, iframeHeight, position);
+        iframe.style.left = `${pos.left}px`;
+        iframe.style.top = `${pos.top}px`;
+        iframe.style.bottom = 'auto';
+        iframe.style.right = 'auto';
+    };
+    iframe.style.cssText = `
+    position: fixed;
+    width: ${iframe.style.width || '400px'};
+    height: ${iframe.style.height || '540px'};
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border-radius: 16px;
+    z-index: 9999;
+    background: transparent;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    pointer-events: none;
+    border: none;
+    box-sizing: border-box;
+  `;
+    // Update position on scroll
+    window.addEventListener('scroll', updateIframePosition);
+    window.addEventListener('resize', updateIframePosition);
+    // Initial position update
+    updateIframePosition();
+    // Listen for navigation changes and close requests inside iframe
+    window.addEventListener('message', (event) => {
+        if (event.source === iframe.contentWindow) {
+            if (event.data?.type === 'navigation') {
+                updateIframeDimensions(event.data.url);
+                updateIframePosition(); // Update position when dimensions change
+            }
+            else if (event.data?.type === 'close-iframe' && isIframeVisible) {
+                // Close the iframe when requested
+                // Reset iframe URL to initial URL before closing
+                iframe.src = initialUrl;
+                toggleIframe();
+            }
+        }
+    });
+    // Track iframe visibility state
+    let isIframeVisible = false;
+    // Toggle iframe visibility
+    const toggleIframe = () => {
+        isIframeVisible = !isIframeVisible;
+        if (isIframeVisible) {
+            iframe.style.pointerEvents = 'auto';
+            iframe.style.opacity = '1';
+            iframe.style.transform = 'translateY(0)';
+        }
+        else {
+            iframe.style.pointerEvents = 'none';
+            iframe.style.opacity = '0';
+            iframe.style.transform = 'translateY(20px)';
+            // Reset iframe URL to initial URL when closing
+            iframe.src = initialUrl;
+        }
+        if (onOpenChange) {
+            onOpenChange(isIframeVisible);
+        }
+    };
+    // Set up button click handler
+    button.addEventListener('click', toggleIframe);
+    // Close iframe on click outside
+    const handleClickOutside = (event) => {
+        const target = event.target;
+        if (isIframeVisible &&
+            !iframe.contains(target) &&
+            !button.contains(target)) {
+            toggleIframe();
+        }
+    };
+    document.addEventListener('click', handleClickOutside);
+    // Call onLoad callback when iframe is loaded
+    iframe.addEventListener('load', () => {
+        if (onLoad) {
+            onLoad();
+        }
+    });
+    // Check if iframe with same button already exists and remove it
+    const existingIframe = document.querySelector(`iframe[data-widget-button="${buttonSelector}"]`);
+    if (existingIframe) {
+        existingIframe.remove();
+    }
+    // Mark iframe with button selector for cleanup
+    iframe.setAttribute('data-widget-button', buttonSelector);
+    // Append iframe to body
+    document.body.appendChild(iframe);
+    // Return cleanup function
+    return {
+        destroy: () => {
+            // Send onOpenChange(false) if widget is currently open
+            if (isIframeVisible && onOpenChange) {
+                onOpenChange(false);
+            }
+            // Remove event listeners
+            window.removeEventListener('scroll', updateIframePosition);
+            window.removeEventListener('resize', updateIframePosition);
+            button.removeEventListener('click', toggleIframe);
+            document.removeEventListener('click', handleClickOutside);
+            iframe.removeEventListener('load', () => {
+                if (onLoad) {
+                    onLoad();
+                }
+            });
+            // Remove iframe from DOM
+            if (iframe.parentNode) {
+                iframe.parentNode.removeChild(iframe);
+            }
+        },
+    };
+}

package/dist/styles.css

@@ -0,0 +1,567 @@
+*, ::before, ::after {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}
+
+::backdrop {
+  --tw-border-spacing-x: 0;
+  --tw-border-spacing-y: 0;
+  --tw-translate-x: 0;
+  --tw-translate-y: 0;
+  --tw-rotate: 0;
+  --tw-skew-x: 0;
+  --tw-skew-y: 0;
+  --tw-scale-x: 1;
+  --tw-scale-y: 1;
+  --tw-pan-x:  ;
+  --tw-pan-y:  ;
+  --tw-pinch-zoom:  ;
+  --tw-scroll-snap-strictness: proximity;
+  --tw-gradient-from-position:  ;
+  --tw-gradient-via-position:  ;
+  --tw-gradient-to-position:  ;
+  --tw-ordinal:  ;
+  --tw-slashed-zero:  ;
+  --tw-numeric-figure:  ;
+  --tw-numeric-spacing:  ;
+  --tw-numeric-fraction:  ;
+  --tw-ring-inset:  ;
+  --tw-ring-offset-width: 0px;
+  --tw-ring-offset-color: #fff;
+  --tw-ring-color: rgb(59 130 246 / 0.5);
+  --tw-ring-offset-shadow: 0 0 #0000;
+  --tw-ring-shadow: 0 0 #0000;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  --tw-blur:  ;
+  --tw-brightness:  ;
+  --tw-contrast:  ;
+  --tw-grayscale:  ;
+  --tw-hue-rotate:  ;
+  --tw-invert:  ;
+  --tw-saturate:  ;
+  --tw-sepia:  ;
+  --tw-drop-shadow:  ;
+  --tw-backdrop-blur:  ;
+  --tw-backdrop-brightness:  ;
+  --tw-backdrop-contrast:  ;
+  --tw-backdrop-grayscale:  ;
+  --tw-backdrop-hue-rotate:  ;
+  --tw-backdrop-invert:  ;
+  --tw-backdrop-opacity:  ;
+  --tw-backdrop-saturate:  ;
+  --tw-backdrop-sepia:  ;
+  --tw-contain-size:  ;
+  --tw-contain-layout:  ;
+  --tw-contain-paint:  ;
+  --tw-contain-style:  ;
+}/*
+! tailwindcss v3.4.17 | MIT License | https://tailwindcss.com
+*//*
+1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
+2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
+*/
+
+*,
+::before,
+::after {
+  box-sizing: border-box; /* 1 */
+  border-width: 0; /* 2 */
+  border-style: solid; /* 2 */
+  border-color: #e5e7eb; /* 2 */
+}
+
+::before,
+::after {
+  --tw-content: '';
+}
+
+/*
+1. Use a consistent sensible line-height in all browsers.
+2. Prevent adjustments of font size after orientation changes in iOS.
+3. Use a more readable tab size.
+4. Use the user's configured `sans` font-family by default.
+5. Use the user's configured `sans` font-feature-settings by default.
+6. Use the user's configured `sans` font-variation-settings by default.
+7. Disable tap highlights on iOS
+*/
+
+html,
+:host {
+  line-height: 1.5; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  -moz-tab-size: 4; /* 3 */
+  -o-tab-size: 4;
+     tab-size: 4; /* 3 */
+  font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-feature-settings: normal; /* 5 */
+  font-variation-settings: normal; /* 6 */
+  -webkit-tap-highlight-color: transparent; /* 7 */
+}
+
+/*
+1. Remove the margin in all browsers.
+2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
+*/
+
+body {
+  margin: 0; /* 1 */
+  line-height: inherit; /* 2 */
+}
+
+/*
+1. Add the correct height in Firefox.
+2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
+3. Ensure horizontal rules are visible by default.
+*/
+
+hr {
+  height: 0; /* 1 */
+  color: inherit; /* 2 */
+  border-top-width: 1px; /* 3 */
+}
+
+/*
+Add the correct text decoration in Chrome, Edge, and Safari.
+*/
+
+abbr:where([title]) {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+}
+
+/*
+Remove the default font size and weight for headings.
+*/
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+
+/*
+Reset links to optimize for opt-in styling instead of opt-out.
+*/
+
+a {
+  color: inherit;
+  text-decoration: inherit;
+}
+
+/*
+Add the correct font weight in Edge and Safari.
+*/
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/*
+1. Use the user's configured `mono` font-family by default.
+2. Use the user's configured `mono` font-feature-settings by default.
+3. Use the user's configured `mono` font-variation-settings by default.
+4. Correct the odd `em` font sizing in all browsers.
+*/
+
+code,
+kbd,
+samp,
+pre {
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
+  font-feature-settings: normal; /* 2 */
+  font-variation-settings: normal; /* 3 */
+  font-size: 1em; /* 4 */
+}
+
+/*
+Add the correct font size in all browsers.
+*/
+
+small {
+  font-size: 80%;
+}
+
+/*
+Prevent `sub` and `sup` elements from affecting the line height in all browsers.
+*/
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/*
+1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
+2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
+3. Remove gaps between table borders by default.
+*/
+
+table {
+  text-indent: 0; /* 1 */
+  border-color: inherit; /* 2 */
+  border-collapse: collapse; /* 3 */
+}
+
+/*
+1. Change the font styles in all browsers.
+2. Remove the margin in Firefox and Safari.
+3. Remove default padding in all browsers.
+*/
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-feature-settings: inherit; /* 1 */
+  font-variation-settings: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  font-weight: inherit; /* 1 */
+  line-height: inherit; /* 1 */
+  letter-spacing: inherit; /* 1 */
+  color: inherit; /* 1 */
+  margin: 0; /* 2 */
+  padding: 0; /* 3 */
+}
+
+/*
+Remove the inheritance of text transform in Edge and Firefox.
+*/
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Remove default button styles.
+*/
+
+button,
+input:where([type='button']),
+input:where([type='reset']),
+input:where([type='submit']) {
+  -webkit-appearance: button; /* 1 */
+  background-color: transparent; /* 2 */
+  background-image: none; /* 2 */
+}
+
+/*
+Use the modern Firefox focus style for all focusable elements.
+*/
+
+:-moz-focusring {
+  outline: auto;
+}
+
+/*
+Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
+*/
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
+
+/*
+Add the correct vertical alignment in Chrome and Firefox.
+*/
+
+progress {
+  vertical-align: baseline;
+}
+
+/*
+Correct the cursor style of increment and decrement buttons in Safari.
+*/
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+1. Correct the odd appearance in Chrome and Safari.
+2. Correct the outline style in Safari.
+*/
+
+[type='search'] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+Remove the inner padding in Chrome and Safari on macOS.
+*/
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+1. Correct the inability to style clickable types in iOS and Safari.
+2. Change font properties to `inherit` in Safari.
+*/
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+Add the correct display in Chrome and Safari.
+*/
+
+summary {
+  display: list-item;
+}
+
+/*
+Removes the default spacing and border for appropriate elements.
+*/
+
+blockquote,
+dl,
+dd,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+hr,
+figure,
+p,
+pre {
+  margin: 0;
+}
+
+fieldset {
+  margin: 0;
+  padding: 0;
+}
+
+legend {
+  padding: 0;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+Reset default styling for dialogs.
+*/
+dialog {
+  padding: 0;
+}
+
+/*
+Prevent resizing textareas horizontally by default.
+*/
+
+textarea {
+  resize: vertical;
+}
+
+/*
+1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
+2. Set the default placeholder color to the user's configured gray 400 color.
+*/
+
+input::-moz-placeholder, textarea::-moz-placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+input::placeholder,
+textarea::placeholder {
+  opacity: 1; /* 1 */
+  color: #9ca3af; /* 2 */
+}
+
+/*
+Set the default cursor for buttons.
+*/
+
+button,
+[role="button"] {
+  cursor: pointer;
+}
+
+/*
+Make sure disabled buttons don't get the pointer cursor.
+*/
+:disabled {
+  cursor: default;
+}
+
+/*
+1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
+2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
+   This can trigger a poorly considered lint error in some tools but is included by design.
+*/
+
+img,
+svg,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+  display: block; /* 1 */
+  vertical-align: middle; /* 2 */
+}
+
+/*
+Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
+*/
+
+img,
+video {
+  max-width: 100%;
+  height: auto;
+}
+
+/* Make elements with the HTML hidden attribute stay hidden by default */
+[hidden]:where(:not([hidden="until-found"])) {
+  display: none;
+}
+.fixed {
+  position: fixed;
+}
+.hidden {
+  display: none;
+}
+.transform {
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+.resize {
+  resize: both;
+}
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.widget-button {
+  position: fixed;
+  bottom: 1.25rem;
+  right: 1.25rem;
+  display: flex;
+  height: 2.25rem;
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  gap: 0px;
+  border-radius: 9999px;
+  border-width: 1px;
+  --tw-border-opacity: 1;
+  border-color: rgb(229 231 235 / var(--tw-border-opacity, 1));
+  --tw-bg-opacity: 1;
+  background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity, 1));
+  --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+  --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+  z-index: 9998;
+}
+
+.widget-button:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
+}
+
+.widget-button-text {
+  display: inline-block;
+  max-width: 18rem;
+  overflow: hidden;
+  white-space: nowrap;
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}

package/dist/widget.d.ts

@@ -0,0 +1,42 @@
+interface SqueletteWidgetOptions {
+  buttonSelector: string;
+  position?: 'top' | 'bottom' | 'left' | 'right';
+  onLoad?: () => void;
+  onOpenChange?: (isOpen: boolean) => void;
+  theme?: string;
+}
+
+interface SqueletteWidgetInstance {
+  destroy: () => void;
+}
+
+declare global {
+  const SqueletteWidget: {
+    createFeedbackWidget(
+      workspaceSlug: string,
+      boardSlug: string | undefined,
+      options: SqueletteWidgetOptions
+    ): SqueletteWidgetInstance;
+    
+    createRoadmapWidget(
+      workspaceSlug: string,
+      boardSlug: string,
+      options: SqueletteWidgetOptions
+    ): SqueletteWidgetInstance;
+    
+    createChangelogWidget(
+      workspaceSlug: string,
+      options: SqueletteWidgetOptions
+    ): SqueletteWidgetInstance;
+    
+    createWidget(options: {
+      url: string;
+      buttonSelector: string;
+      position?: 'top' | 'bottom' | 'left' | 'right';
+      onLoad?: () => void;
+      onOpenChange?: (isOpen: boolean) => void;
+    }): SqueletteWidgetInstance;
+  };
+}
+
+export {};

package/dist/widget.js

@@ -0,0 +1,15 @@
+"use strict";var SqueletteWidget=(()=>{var v=Object.defineProperty;var S=Object.getOwnPropertyDescriptor;var W=Object.getOwnPropertyNames;var C=Object.prototype.hasOwnProperty;var I=(r,n)=>{for(var i in n)v(r,i,{get:n[i],enumerable:!0})},M=(r,n,i,s)=>{if(n&&typeof n=="object"||typeof n=="function")for(let o of W(n))!C.call(r,o)&&o!==i&&v(r,o,{get:()=>n[o],enumerable:!(s=S(n,o))||s.enumerable});return r};var P=r=>M(v({},"__esModule",{value:!0}),r);var T={};I(T,{createChangelogWidget:()=>z,createFeedbackWidget:()=>N,createRoadmapWidget:()=>U,createWidget:()=>x});var L="https://squelette.app";function U(r,n,i){let s=new URLSearchParams({board:n});i.theme&&s.set("theme",i.theme);let o=`${L}/widget/${r}/roadmap?${s.toString()}`,{theme:c,...h}=i;return x({...h,url:o})}function z(r,n){let i=new URLSearchParams;n.theme&&i.set("theme",n.theme);let s=`${L}/widget/${r}/changelog${i.toString()?`?${i.toString()}`:""}`,{theme:o,...c}=n;return x({...c,url:s})}function N(r,n,i){let s=new URLSearchParams;n&&s.set("board",n),i.theme&&s.set("theme",i.theme);let o=`${L}/widget/${r}/feedback${s.toString()?`?${s.toString()}`:""}`,{theme:c,...h}=i;return x({...h,url:o})}function x(r){let{url:n,buttonSelector:i,position:s="top",onLoad:o,onOpenChange:c}=r,h=n,e=document.createElement("iframe");e.src=n,e.loading="eager";let k=t=>{let a=new URL(t).pathname,g=a.endsWith("/feedback"),w=a.endsWith("/changelog"),y=a.endsWith("/roadmap"),p="400px",d="540px";switch(!0){case g:d="250px";break;case w:d="500px";break;case y:d="400px";break;default:d="540px";break}e.style.width=p,e.style.height=d};k(n);let f=document.querySelector(i);if(!f)return console.error(`Button element not found with selector: ${i}`),{destroy:()=>{}};let O=(t,a,g,w)=>{let y={width:window.innerWidth,height:window.innerHeight},p=12,d,l;switch(w){case"right":d=t.right+p,l=t.top;break;case"left":d=t.left-a-p,l=t.top;break;case"top":d=t.left-(a-t.width)/2,l=t.top-g-p;break;case"bottom":d=t.left-(a-t.width)/2,l=t.bottom+p;break;default:d=t.left-(a-t.width)/2,l=t.top-g-p}return d=Math.max(10,Math.min(d,y.width-a-10)),l=Math.max(10,Math.min(l,y.height-g-10)),{left:d,top:l}},u=()=>{if(!f)return;let t=f.getBoundingClientRect(),a=Number.parseInt(e.style.width||"400px",10),g=Number.parseInt(e.style.height||"540px",10),w=O(t,a,g,s);e.style.left=`${w.left}px`,e.style.top=`${w.top}px`,e.style.bottom="auto",e.style.right="auto"};e.style.cssText=`
+    position: fixed;
+    width: ${e.style.width||"400px"};
+    height: ${e.style.height||"540px"};
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+    border-radius: 16px;
+    z-index: 9999;
+    background: transparent;
+    opacity: 0;
+    transform: translateY(20px);
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+    pointer-events: none;
+    border: none;
+    box-sizing: border-box;
+  `,window.addEventListener("scroll",u),window.addEventListener("resize",u),u(),window.addEventListener("message",t=>{t.source===e.contentWindow&&(t.data?.type==="navigation"?(k(t.data.url),u()):t.data?.type==="close-iframe"&&m&&(e.src=h,b()))});let m=!1,b=()=>{m=!m,m?(e.style.pointerEvents="auto",e.style.opacity="1",e.style.transform="translateY(0)"):(e.style.pointerEvents="none",e.style.opacity="0",e.style.transform="translateY(20px)",e.src=h),c&&c(m)};f.addEventListener("click",b);let E=t=>{let a=t.target;m&&!e.contains(a)&&!f.contains(a)&&b()};document.addEventListener("click",E),e.addEventListener("load",()=>{o&&o()});let $=document.querySelector(`iframe[data-widget-button="${i}"]`);return $&&$.remove(),e.setAttribute("data-widget-button",i),document.body.appendChild(e),{destroy:()=>{m&&c&&c(!1),window.removeEventListener("scroll",u),window.removeEventListener("resize",u),f.removeEventListener("click",b),document.removeEventListener("click",E),e.removeEventListener("load",()=>{o&&o()}),e.parentNode&&e.parentNode.removeChild(e)}}}return P(T);})();

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@squeletteapp/widget",
+  "version": "0.1.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && npm run build:browser",
+    "build:browser": "esbuild src/index.ts --bundle --format=iife --global-name=SqueletteWidget --outfile=dist/widget.js --minify --define:process.env.NEXT_PUBLIC_DASHBOARD_URL='\"https://squelette.app\"'",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build",
+    "publish:widget": "npm publish --access public"
+  },
+  "keywords": [
+    "widget",
+    "feedback",
+    "squelette",
+    "iframe"
+  ],
+  "author": "Squelette",
+  "license": "MIT",
+  "description": "Vanilla JavaScript widget for Squelette feedback collection",
+  "devDependencies": {
+    "autoprefixer": "^10.4.16",
+    "esbuild": "^0.21.5",
+    "postcss": "^8.4.35",
+    "postcss-cli": "^11.0.0",
+    "tailwindcss": "^3.4.0",
+    "typescript": "^5.8.3"
+  }
+}