chatbox-nps-chat-widget 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# Chat Widget (npm)
+
+Plain HTML/CSS/JS embed for the AI chat UI. This package injects a floating button
+and popup iframe that loads your chat app.
+
+## Install
+```bash
+npm install chatbox-nps-chat-widget
+```
+
+## Plain HTML usage
+```html
+<link
+  rel="stylesheet"
+  href="/node_modules/chatbox-nps-chat-widget/dist/chat-widget.css"
+/>
+<script src="/node_modules/chatbox-nps-chat-widget/dist/chat-widget.iife.js"></script>
+<script>
+  NpssChatWidget.initChatWidget({
+    iframeUrl: "https://app.yourdomain.com/embed?ai=1"
+  });
+</script>
+```
+
+## ESM usage
+```js
+import { initChatWidget } from "chatbox-nps-chat-widget";
+import "chatbox-nps-chat-widget/dist/chat-widget.css";
+
+initChatWidget({
+  iframeUrl: "https://app.yourdomain.com/embed?ai=1",
+});
+```
+
+## Options
+- `iframeUrl` (required)
+- `position` ("bottom-right" | "bottom-left" | "top-right" | "top-left")
+- `primaryColor`
+- `buttonText`
+- `buttonLabel`
+- `buttonSize`
+- `popupWidth`
+- `popupHeight`
+- `offset`
+- `popupOffset`
+- `zIndex`
+- `title`
+- `preload`
+- `injectStyles` (default true; set false if you always load CSS manually)
+
+## Build
+```bash
+npm run build
+```

package/dist/chat-widget.cjs.js

@@ -0,0 +1,356 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.js
+var src_exports = {};
+__export(src_exports, {
+  getStyles: () => getStyles,
+  initChatWidget: () => initChatWidget
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/styles.js
+var DEFAULT_STYLES = `
+#npss-chat-widget {
+  position: fixed;
+  inset: 0;
+  z-index: var(--npss-z-index, 9999);
+  pointer-events: none;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+#npss-chat-widget * {
+  box-sizing: border-box;
+}
+
+#npss-chat-widget .npss-chat-widget__fab {
+  position: absolute;
+  width: var(--npss-button-size, 56px);
+  height: var(--npss-button-size, 56px);
+  border-radius: 50%;
+  border: none;
+  background: var(--npss-primary, #2d6cdf);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
+}
+
+#npss-chat-widget .npss-chat-widget__popup {
+  position: absolute;
+  width: min(var(--npss-popup-width, 420px), 92vw);
+  height: min(var(--npss-popup-height, 640px), 80vh);
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+#npss-chat-widget .npss-chat-widget__popup--open {
+  display: flex;
+}
+
+#npss-chat-widget .npss-chat-widget__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+#npss-chat-widget .npss-chat-widget__close {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #475569;
+}
+
+#npss-chat-widget .npss-chat-widget__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+@media (max-width: 640px) {
+  #npss-chat-widget {
+    --npss-offset: 16px;
+  }
+
+  #npss-chat-widget .npss-chat-widget__popup {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    height: min(70vh, 520px);
+  }
+}
+`;
+var getStyles = () => DEFAULT_STYLES.trim();
+
+// src/index.js
+var WIDGET_VERSION = "0.1.0";
+var ROOT_ID = "npss-chat-widget";
+var STYLE_ID = "npss-chat-widget-styles";
+var DEFAULTS = {
+  position: "bottom-right",
+  primaryColor: "#2d6cdf",
+  buttonText: "AI",
+  buttonLabel: "Open AI chat",
+  buttonSize: 56,
+  popupWidth: 420,
+  popupHeight: 640,
+  offset: 24,
+  popupOffset: 16,
+  zIndex: 9999,
+  title: "AI Chat",
+  preload: false,
+  injectStyles: true
+};
+var toPx = function(value) {
+  if (typeof value === "number") return value + "px";
+  if (typeof value === "string" && value.trim()) return value.trim();
+  return null;
+};
+var mergeSettings = function(options) {
+  var result = {};
+  var key;
+  for (key in DEFAULTS) {
+    result[key] = DEFAULTS[key];
+  }
+  if (options) {
+    for (key in options) {
+      if (Object.prototype.hasOwnProperty.call(options, key)) {
+        result[key] = options[key];
+      }
+    }
+  }
+  return result;
+};
+var applyVariables = function(root, settings) {
+  root.style.setProperty("--npss-primary", settings.primaryColor);
+  root.style.setProperty("--npss-button-size", toPx(settings.buttonSize));
+  root.style.setProperty("--npss-popup-width", toPx(settings.popupWidth));
+  root.style.setProperty("--npss-popup-height", toPx(settings.popupHeight));
+  root.style.setProperty("--npss-offset", toPx(settings.offset));
+  root.style.setProperty("--npss-popup-offset", toPx(settings.popupOffset));
+  root.style.setProperty("--npss-z-index", String(settings.zIndex));
+};
+var injectStyles = function() {
+  if (document.getElementById(STYLE_ID)) return;
+  var style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = getStyles();
+  document.head.appendChild(style);
+};
+var buildDom = function(settings) {
+  var root = document.createElement("div");
+  root.id = ROOT_ID;
+  root.setAttribute("data-version", WIDGET_VERSION);
+  root.setAttribute("data-position", settings.position || DEFAULTS.position);
+  applyVariables(root, settings);
+  var popup = document.createElement("div");
+  popup.className = "npss-chat-widget__popup";
+  popup.setAttribute("role", "dialog");
+  popup.setAttribute("aria-modal", "false");
+  popup.setAttribute("aria-hidden", "true");
+  var header = document.createElement("div");
+  header.className = "npss-chat-widget__header";
+  var title = document.createElement("span");
+  title.className = "npss-chat-widget__title";
+  title.textContent = settings.title || DEFAULTS.title;
+  var closeButton = document.createElement("button");
+  closeButton.type = "button";
+  closeButton.className = "npss-chat-widget__close";
+  closeButton.setAttribute("aria-label", "Close AI chat");
+  closeButton.textContent = "\xD7";
+  header.appendChild(title);
+  header.appendChild(closeButton);
+  var iframe = document.createElement("iframe");
+  iframe.className = "npss-chat-widget__frame";
+  iframe.title = settings.title || DEFAULTS.title;
+  iframe.allow = "clipboard-read; clipboard-write";
+  popup.appendChild(header);
+  popup.appendChild(iframe);
+  var button = document.createElement("button");
+  button.type = "button";
+  button.className = "npss-chat-widget__fab";
+  button.setAttribute("aria-label", settings.buttonLabel || DEFAULTS.buttonLabel);
+  button.setAttribute("aria-expanded", "false");
+  button.textContent = settings.buttonText || DEFAULTS.buttonText;
+  root.appendChild(popup);
+  root.appendChild(button);
+  return {
+    root,
+    popup,
+    button,
+    closeButton,
+    iframe
+  };
+};
+var mountWidget = function(settings) {
+  var iframeUrl = settings.iframeUrl;
+  if (!iframeUrl) {
+    throw new Error("initChatWidget requires iframeUrl");
+  }
+  var existing = window.__NPSS_CHAT_WIDGET__;
+  if (existing && existing.root) return existing;
+  if (settings.injectStyles) {
+    injectStyles();
+  }
+  var dom = buildDom(settings);
+  var root = dom.root;
+  var popup = dom.popup;
+  var button = dom.button;
+  var closeButton = dom.closeButton;
+  var iframe = dom.iframe;
+  var container = document.body || document.documentElement;
+  container.appendChild(root);
+  var isOpen = false;
+  var isLoaded = false;
+  var ensureFrame = function() {
+    if (isLoaded) return;
+    iframe.src = iframeUrl;
+    isLoaded = true;
+  };
+  var open = function() {
+    ensureFrame();
+    isOpen = true;
+    popup.classList.add("npss-chat-widget__popup--open");
+    popup.setAttribute("aria-hidden", "false");
+    button.setAttribute("aria-expanded", "true");
+  };
+  var close = function() {
+    isOpen = false;
+    popup.classList.remove("npss-chat-widget__popup--open");
+    popup.setAttribute("aria-hidden", "true");
+    button.setAttribute("aria-expanded", "false");
+  };
+  var toggle = function() {
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
+  };
+  var onKeyDown = function(event) {
+    if (event.key === "Escape" && isOpen) {
+      close();
+    }
+  };
+  button.addEventListener("click", toggle);
+  closeButton.addEventListener("click", close);
+  document.addEventListener("keydown", onKeyDown);
+  if (settings.preload) {
+    ensureFrame();
+  }
+  var instance = {
+    root,
+    open,
+    close,
+    toggle,
+    destroy: function() {
+      document.removeEventListener("keydown", onKeyDown);
+      if (root.parentNode) {
+        root.parentNode.removeChild(root);
+      }
+      delete window.__NPSS_CHAT_WIDGET__;
+    }
+  };
+  window.__NPSS_CHAT_WIDGET__ = instance;
+  return instance;
+};
+var initChatWidget = function(options) {
+  var settings = mergeSettings(options);
+  if (document.body) {
+    return mountWidget(settings);
+  }
+  return new Promise(function(resolve) {
+    document.addEventListener(
+      "DOMContentLoaded",
+      function() {
+        resolve(mountWidget(settings));
+      },
+      { once: true }
+    );
+  });
+};

package/dist/chat-widget.css

@@ -0,0 +1,138 @@
+#npss-chat-widget {
+  position: fixed;
+  inset: 0;
+  z-index: var(--npss-z-index, 9999);
+  pointer-events: none;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+#npss-chat-widget * {
+  box-sizing: border-box;
+}
+
+#npss-chat-widget .npss-chat-widget__fab {
+  position: absolute;
+  width: var(--npss-button-size, 56px);
+  height: var(--npss-button-size, 56px);
+  border-radius: 50%;
+  border: none;
+  background: var(--npss-primary, #2d6cdf);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
+}
+
+#npss-chat-widget .npss-chat-widget__popup {
+  position: absolute;
+  width: min(var(--npss-popup-width, 420px), 92vw);
+  height: min(var(--npss-popup-height, 640px), 80vh);
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+#npss-chat-widget .npss-chat-widget__popup--open {
+  display: flex;
+}
+
+#npss-chat-widget .npss-chat-widget__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+#npss-chat-widget .npss-chat-widget__close {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #475569;
+}
+
+#npss-chat-widget .npss-chat-widget__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+@media (max-width: 640px) {
+  #npss-chat-widget {
+    --npss-offset: 16px;
+  }
+
+  #npss-chat-widget .npss-chat-widget__popup {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    height: min(70vh, 520px);
+  }
+}

package/dist/chat-widget.esm.js

@@ -0,0 +1,334 @@
+// src/styles.js
+var DEFAULT_STYLES = `
+#npss-chat-widget {
+  position: fixed;
+  inset: 0;
+  z-index: var(--npss-z-index, 9999);
+  pointer-events: none;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+#npss-chat-widget * {
+  box-sizing: border-box;
+}
+
+#npss-chat-widget .npss-chat-widget__fab {
+  position: absolute;
+  width: var(--npss-button-size, 56px);
+  height: var(--npss-button-size, 56px);
+  border-radius: 50%;
+  border: none;
+  background: var(--npss-primary, #2d6cdf);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
+}
+
+#npss-chat-widget .npss-chat-widget__popup {
+  position: absolute;
+  width: min(var(--npss-popup-width, 420px), 92vw);
+  height: min(var(--npss-popup-height, 640px), 80vh);
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+#npss-chat-widget .npss-chat-widget__popup--open {
+  display: flex;
+}
+
+#npss-chat-widget .npss-chat-widget__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+#npss-chat-widget .npss-chat-widget__close {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #475569;
+}
+
+#npss-chat-widget .npss-chat-widget__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+@media (max-width: 640px) {
+  #npss-chat-widget {
+    --npss-offset: 16px;
+  }
+
+  #npss-chat-widget .npss-chat-widget__popup {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    height: min(70vh, 520px);
+  }
+}
+`;
+var getStyles = () => DEFAULT_STYLES.trim();
+
+// src/index.js
+var WIDGET_VERSION = "0.1.0";
+var ROOT_ID = "npss-chat-widget";
+var STYLE_ID = "npss-chat-widget-styles";
+var DEFAULTS = {
+  position: "bottom-right",
+  primaryColor: "#2d6cdf",
+  buttonText: "AI",
+  buttonLabel: "Open AI chat",
+  buttonSize: 56,
+  popupWidth: 420,
+  popupHeight: 640,
+  offset: 24,
+  popupOffset: 16,
+  zIndex: 9999,
+  title: "AI Chat",
+  preload: false,
+  injectStyles: true
+};
+var toPx = function(value) {
+  if (typeof value === "number") return value + "px";
+  if (typeof value === "string" && value.trim()) return value.trim();
+  return null;
+};
+var mergeSettings = function(options) {
+  var result = {};
+  var key;
+  for (key in DEFAULTS) {
+    result[key] = DEFAULTS[key];
+  }
+  if (options) {
+    for (key in options) {
+      if (Object.prototype.hasOwnProperty.call(options, key)) {
+        result[key] = options[key];
+      }
+    }
+  }
+  return result;
+};
+var applyVariables = function(root, settings) {
+  root.style.setProperty("--npss-primary", settings.primaryColor);
+  root.style.setProperty("--npss-button-size", toPx(settings.buttonSize));
+  root.style.setProperty("--npss-popup-width", toPx(settings.popupWidth));
+  root.style.setProperty("--npss-popup-height", toPx(settings.popupHeight));
+  root.style.setProperty("--npss-offset", toPx(settings.offset));
+  root.style.setProperty("--npss-popup-offset", toPx(settings.popupOffset));
+  root.style.setProperty("--npss-z-index", String(settings.zIndex));
+};
+var injectStyles = function() {
+  if (document.getElementById(STYLE_ID)) return;
+  var style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = getStyles();
+  document.head.appendChild(style);
+};
+var buildDom = function(settings) {
+  var root = document.createElement("div");
+  root.id = ROOT_ID;
+  root.setAttribute("data-version", WIDGET_VERSION);
+  root.setAttribute("data-position", settings.position || DEFAULTS.position);
+  applyVariables(root, settings);
+  var popup = document.createElement("div");
+  popup.className = "npss-chat-widget__popup";
+  popup.setAttribute("role", "dialog");
+  popup.setAttribute("aria-modal", "false");
+  popup.setAttribute("aria-hidden", "true");
+  var header = document.createElement("div");
+  header.className = "npss-chat-widget__header";
+  var title = document.createElement("span");
+  title.className = "npss-chat-widget__title";
+  title.textContent = settings.title || DEFAULTS.title;
+  var closeButton = document.createElement("button");
+  closeButton.type = "button";
+  closeButton.className = "npss-chat-widget__close";
+  closeButton.setAttribute("aria-label", "Close AI chat");
+  closeButton.textContent = "\xD7";
+  header.appendChild(title);
+  header.appendChild(closeButton);
+  var iframe = document.createElement("iframe");
+  iframe.className = "npss-chat-widget__frame";
+  iframe.title = settings.title || DEFAULTS.title;
+  iframe.allow = "clipboard-read; clipboard-write";
+  popup.appendChild(header);
+  popup.appendChild(iframe);
+  var button = document.createElement("button");
+  button.type = "button";
+  button.className = "npss-chat-widget__fab";
+  button.setAttribute("aria-label", settings.buttonLabel || DEFAULTS.buttonLabel);
+  button.setAttribute("aria-expanded", "false");
+  button.textContent = settings.buttonText || DEFAULTS.buttonText;
+  root.appendChild(popup);
+  root.appendChild(button);
+  return {
+    root,
+    popup,
+    button,
+    closeButton,
+    iframe
+  };
+};
+var mountWidget = function(settings) {
+  var iframeUrl = settings.iframeUrl;
+  if (!iframeUrl) {
+    throw new Error("initChatWidget requires iframeUrl");
+  }
+  var existing = window.__NPSS_CHAT_WIDGET__;
+  if (existing && existing.root) return existing;
+  if (settings.injectStyles) {
+    injectStyles();
+  }
+  var dom = buildDom(settings);
+  var root = dom.root;
+  var popup = dom.popup;
+  var button = dom.button;
+  var closeButton = dom.closeButton;
+  var iframe = dom.iframe;
+  var container = document.body || document.documentElement;
+  container.appendChild(root);
+  var isOpen = false;
+  var isLoaded = false;
+  var ensureFrame = function() {
+    if (isLoaded) return;
+    iframe.src = iframeUrl;
+    isLoaded = true;
+  };
+  var open = function() {
+    ensureFrame();
+    isOpen = true;
+    popup.classList.add("npss-chat-widget__popup--open");
+    popup.setAttribute("aria-hidden", "false");
+    button.setAttribute("aria-expanded", "true");
+  };
+  var close = function() {
+    isOpen = false;
+    popup.classList.remove("npss-chat-widget__popup--open");
+    popup.setAttribute("aria-hidden", "true");
+    button.setAttribute("aria-expanded", "false");
+  };
+  var toggle = function() {
+    if (isOpen) {
+      close();
+    } else {
+      open();
+    }
+  };
+  var onKeyDown = function(event) {
+    if (event.key === "Escape" && isOpen) {
+      close();
+    }
+  };
+  button.addEventListener("click", toggle);
+  closeButton.addEventListener("click", close);
+  document.addEventListener("keydown", onKeyDown);
+  if (settings.preload) {
+    ensureFrame();
+  }
+  var instance = {
+    root,
+    open,
+    close,
+    toggle,
+    destroy: function() {
+      document.removeEventListener("keydown", onKeyDown);
+      if (root.parentNode) {
+        root.parentNode.removeChild(root);
+      }
+      delete window.__NPSS_CHAT_WIDGET__;
+    }
+  };
+  window.__NPSS_CHAT_WIDGET__ = instance;
+  return instance;
+};
+var initChatWidget = function(options) {
+  var settings = mergeSettings(options);
+  if (document.body) {
+    return mountWidget(settings);
+  }
+  return new Promise(function(resolve) {
+    document.addEventListener(
+      "DOMContentLoaded",
+      function() {
+        resolve(mountWidget(settings));
+      },
+      { once: true }
+    );
+  });
+};
+export {
+  getStyles,
+  initChatWidget
+};

package/dist/chat-widget.iife.js

@@ -0,0 +1,140 @@
+var NpssChatWidget=(()=>{var u=Object.defineProperty;var A=Object.getOwnPropertyDescriptor;var S=Object.getOwnPropertyNames;var z=Object.prototype.hasOwnProperty;var L=(t,e)=>{for(var s in e)u(t,s,{get:e[s],enumerable:!0})},I=(t,e,s,n)=>{if(e&&typeof e=="object"||typeof e=="function")for(let p of S(e))!z.call(t,p)&&p!==s&&u(t,p,{get:()=>e[p],enumerable:!(n=A(e,p))||n.enumerable});return t};var T=t=>I(u({},"__esModule",{value:!0}),t);var B={};L(B,{getStyles:()=>l,initChatWidget:()=>j});var P=`
+#npss-chat-widget {
+  position: fixed;
+  inset: 0;
+  z-index: var(--npss-z-index, 9999);
+  pointer-events: none;
+  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
+}
+
+#npss-chat-widget * {
+  box-sizing: border-box;
+}
+
+#npss-chat-widget .npss-chat-widget__fab {
+  position: absolute;
+  width: var(--npss-button-size, 56px);
+  height: var(--npss-button-size, 56px);
+  border-radius: 50%;
+  border: none;
+  background: var(--npss-primary, #2d6cdf);
+  color: #ffffff;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  pointer-events: auto;
+  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.28);
+}
+
+#npss-chat-widget .npss-chat-widget__popup {
+  position: absolute;
+  width: min(var(--npss-popup-width, 420px), 92vw);
+  height: min(var(--npss-popup-height, 640px), 80vh);
+  background: #ffffff;
+  border-radius: 16px;
+  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
+  display: none;
+  flex-direction: column;
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+#npss-chat-widget .npss-chat-widget__popup--open {
+  display: flex;
+}
+
+#npss-chat-widget .npss-chat-widget__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  border-bottom: 1px solid #e2e8f0;
+  background: #f8fafc;
+  font-size: 14px;
+  font-weight: 600;
+}
+
+#npss-chat-widget .npss-chat-widget__close {
+  border: none;
+  background: transparent;
+  font-size: 20px;
+  line-height: 1;
+  cursor: pointer;
+  color: #475569;
+}
+
+#npss-chat-widget .npss-chat-widget__frame {
+  width: 100%;
+  height: 100%;
+  border: 0;
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  bottom: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__fab {
+  right: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__fab {
+  left: var(--npss-offset, 24px);
+  top: var(--npss-offset, 24px);
+}
+
+#npss-chat-widget[data-position="bottom-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="bottom-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  bottom: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-right"] .npss-chat-widget__popup {
+  right: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+#npss-chat-widget[data-position="top-left"] .npss-chat-widget__popup {
+  left: var(--npss-offset, 24px);
+  top: calc(
+    var(--npss-offset, 24px) +
+    var(--npss-button-size, 56px) +
+    var(--npss-popup-offset, 16px)
+  );
+}
+
+@media (max-width: 640px) {
+  #npss-chat-widget {
+    --npss-offset: 16px;
+  }
+
+  #npss-chat-widget .npss-chat-widget__popup {
+    left: 16px;
+    right: 16px;
+    width: auto;
+    height: min(70vh, 520px);
+  }
+}
+`,l=()=>P.trim();var N="0.1.0",D="npss-chat-widget",w="npss-chat-widget-styles",i={position:"bottom-right",primaryColor:"#2d6cdf",buttonText:"AI",buttonLabel:"Open AI chat",buttonSize:56,popupWidth:420,popupHeight:640,offset:24,popupOffset:16,zIndex:9999,title:"AI Chat",preload:!1,injectStyles:!0},d=function(t){return typeof t=="number"?t+"px":typeof t=="string"&&t.trim()?t.trim():null},k=function(t){var e={},s;for(s in i)e[s]=i[s];if(t)for(s in t)Object.prototype.hasOwnProperty.call(t,s)&&(e[s]=t[s]);return e},O=function(t,e){t.style.setProperty("--npss-primary",e.primaryColor),t.style.setProperty("--npss-button-size",d(e.buttonSize)),t.style.setProperty("--npss-popup-width",d(e.popupWidth)),t.style.setProperty("--npss-popup-height",d(e.popupHeight)),t.style.setProperty("--npss-offset",d(e.offset)),t.style.setProperty("--npss-popup-offset",d(e.popupOffset)),t.style.setProperty("--npss-z-index",String(e.zIndex))},W=function(){if(!document.getElementById(w)){var t=document.createElement("style");t.id=w,t.textContent=l(),document.head.appendChild(t)}},U=function(t){var e=document.createElement("div");e.id=D,e.setAttribute("data-version",N),e.setAttribute("data-position",t.position||i.position),O(e,t);var s=document.createElement("div");s.className="npss-chat-widget__popup",s.setAttribute("role","dialog"),s.setAttribute("aria-modal","false"),s.setAttribute("aria-hidden","true");var n=document.createElement("div");n.className="npss-chat-widget__header";var p=document.createElement("span");p.className="npss-chat-widget__title",p.textContent=t.title||i.title;var o=document.createElement("button");o.type="button",o.className="npss-chat-widget__close",o.setAttribute("aria-label","Close AI chat"),o.textContent="\xD7",n.appendChild(p),n.appendChild(o);var a=document.createElement("iframe");a.className="npss-chat-widget__frame",a.title=t.title||i.title,a.allow="clipboard-read; clipboard-write",s.appendChild(n),s.appendChild(a);var r=document.createElement("button");return r.type="button",r.className="npss-chat-widget__fab",r.setAttribute("aria-label",t.buttonLabel||i.buttonLabel),r.setAttribute("aria-expanded","false"),r.textContent=t.buttonText||i.buttonText,e.appendChild(s),e.appendChild(r),{root:e,popup:s,button:r,closeButton:o,iframe:a}},_=function(t){var e=t.iframeUrl;if(!e)throw new Error("initChatWidget requires iframeUrl");var s=window.__NPSS_CHAT_WIDGET__;if(s&&s.root)return s;t.injectStyles&&W();var n=U(t),p=n.root,o=n.popup,a=n.button,r=n.closeButton,y=n.iframe,E=document.body||document.documentElement;E.appendChild(p);var f=!1,h=!1,b=function(){h||(y.src=e,h=!0)},v=function(){b(),f=!0,o.classList.add("npss-chat-widget__popup--open"),o.setAttribute("aria-hidden","false"),a.setAttribute("aria-expanded","true")},c=function(){f=!1,o.classList.remove("npss-chat-widget__popup--open"),o.setAttribute("aria-hidden","true"),a.setAttribute("aria-expanded","false")},m=function(){f?c():v()},g=function(C){C.key==="Escape"&&f&&c()};a.addEventListener("click",m),r.addEventListener("click",c),document.addEventListener("keydown",g),t.preload&&b();var x={root:p,open:v,close:c,toggle:m,destroy:function(){document.removeEventListener("keydown",g),p.parentNode&&p.parentNode.removeChild(p),delete window.__NPSS_CHAT_WIDGET__}};return window.__NPSS_CHAT_WIDGET__=x,x},j=function(t){var e=k(t);return document.body?_(e):new Promise(function(s){document.addEventListener("DOMContentLoaded",function(){s(_(e))},{once:!0})})};return T(B);})();

package/package.json

@@ -0,0 +1,27 @@
+{
+  "name": "chatbox-nps-chat-widget",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "main": "./dist/chat-widget.cjs.js",
+  "module": "./dist/chat-widget.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/chat-widget.esm.js",
+      "require": "./dist/chat-widget.cjs.js"
+    },
+    "./styles.css": "./dist/chat-widget.css"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "node scripts/build.js"
+  },
+  "devDependencies": {
+    "esbuild": "^0.21.5"
+  }
+}