@supashiphq/javascript-sdk 0.7.7

package/dist/index.js

@@ -0,0 +1,1072 @@
+"use strict";
+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.ts
+var index_exports = {};
+__export(index_exports, {
+  SupaClient: () => SupaClient,
+  ToolbarPlugin: () => SupaToolbarPlugin
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils.ts
+function sleep(ms) {
+  return new Promise((resolve) => setTimeout(resolve, ms));
+}
+async function retry(fn, maxAttempts = 3, backoff = 1e3, onRetry) {
+  let lastError;
+  for (let attempt = 1; attempt <= maxAttempts; attempt++) {
+    try {
+      return await fn();
+    } catch (error) {
+      lastError = error;
+      const willRetry = attempt < maxAttempts;
+      if (onRetry) {
+        onRetry(attempt, lastError, willRetry);
+      }
+      if (!willRetry) break;
+      await sleep(backoff * Math.pow(2, attempt - 1));
+    }
+  }
+  throw lastError;
+}
+
+// src/plugins/toolbar-plugin.ts
+var DEFAULT_STORAGE_KEY = "supaship-feature-overrides";
+var NO_FEATURES_MESSAGE = `No feature flags configured in the client.`;
+var SupaToolbarPlugin = class {
+  constructor(config = {}) {
+    this.name = "toolbar-plugin";
+    this.storageKey = DEFAULT_STORAGE_KEY;
+    this.config = {
+      enabled: config.enabled ?? "auto",
+      position: {
+        placement: config.position?.placement ?? "bottom-right",
+        offset: config.position?.offset ?? { x: "1rem", y: "1rem" }
+      },
+      onOverrideChange: config.onOverrideChange
+    };
+    this.state = {
+      overrides: {},
+      features: /* @__PURE__ */ new Set(),
+      featureValues: {},
+      searchQuery: "",
+      useLocalOverrides: true
+    };
+  }
+  cleanup() {
+    this.removeToolbar();
+  }
+  shouldShowToolbar() {
+    if (this.config.enabled === true) return true;
+    if (this.config.enabled === false) return false;
+    if (typeof window !== "undefined") {
+      return window.location.hostname === "localhost" || window.location.hostname === "127.0.0.1" || window.location.hostname === "" || window.location.hostname.endsWith(".local") || window.location.hostname.endsWith(".localhost");
+    }
+    return false;
+  }
+  onInit(params) {
+    const { availableFeatures, context, clientId } = params;
+    this.clientId = clientId;
+    this.storageKey = DEFAULT_STORAGE_KEY;
+    this.state.overrides = this.loadOverrides();
+    this.state.features = new Set(Object.keys(availableFeatures));
+    this.state.featureValues = { ...availableFeatures };
+    this.state.context = context;
+    if (this.shouldShowToolbar()) {
+      this.injectToolbar();
+    }
+    this.updateToolbarUI();
+  }
+  async beforeGetFeatures(_featureNames, context) {
+    this.state.context = context;
+    this.state.overrides = this.loadOverrides();
+    this.updateToolbarUI();
+  }
+  async afterGetFeatures(results, context) {
+    Object.keys(results).forEach((name) => {
+      this.state.featureValues[name] = results[name];
+    });
+    if (this.state.useLocalOverrides) {
+      Object.keys(this.state.overrides).forEach((featureName) => {
+        if (featureName in results) {
+          results[featureName] = this.state.overrides[featureName];
+        }
+      });
+    }
+    Object.keys(results).forEach((name) => this.state.features.add(name));
+    this.state.context = context;
+    this.updateToolbarUI();
+  }
+  loadOverrides() {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return {};
+    }
+    try {
+      const stored = window.localStorage.getItem(this.storageKey);
+      return stored ? JSON.parse(stored) : {};
+    } catch {
+      return {};
+    }
+  }
+  saveOverrides(feature, value, allOverrides) {
+    if (typeof window === "undefined" || !window.localStorage) {
+      return;
+    }
+    try {
+      window.localStorage.setItem(this.storageKey, JSON.stringify(allOverrides));
+      this.config.onOverrideChange?.(
+        { feature: feature ?? "", value: value ?? null },
+        allOverrides ?? {}
+      );
+    } catch (error) {
+      console.error("Supaship: Failed to save feature overrides:", error);
+    }
+  }
+  setOverride(featureName, value) {
+    this.state.overrides[featureName] = value;
+    this.saveOverrides(featureName, value, this.state.overrides);
+    this.updateToolbarUI();
+  }
+  removeOverride(featureName) {
+    delete this.state.overrides[featureName];
+    this.saveOverrides(featureName, null, this.state.overrides);
+    this.updateToolbarUI();
+  }
+  clearAllOverrides() {
+    this.state.overrides = {};
+    this.saveOverrides("", null, this.state.overrides);
+    this.updateToolbarUI();
+  }
+  getOverrides() {
+    return { ...this.state.overrides };
+  }
+  injectToolbar() {
+    if (typeof window === "undefined" || typeof document === "undefined") {
+      return;
+    }
+    const toolbarId = `supaship-toolbar-${this.clientId}`;
+    if (document.getElementById(toolbarId)) {
+      return;
+    }
+    const toolbar = document.createElement("div");
+    toolbar.id = toolbarId;
+    toolbar.setAttribute("data-supaship-client", this.clientId || "");
+    toolbar.innerHTML = this.getToolbarHTML();
+    this.injectStyles();
+    document.body.appendChild(toolbar);
+    this.attachEventListeners();
+  }
+  removeToolbar() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const toolbar = document.getElementById(`supaship-toolbar-${this.clientId}`);
+    if (toolbar) {
+      toolbar.remove();
+    }
+    const styles = document.getElementById("supaship-toolbar-styles");
+    if (styles) {
+      styles.remove();
+    }
+  }
+  getToolbarHTML() {
+    const { placement, offset } = this.config.position;
+    const positionClass = `supaship-toolbar-${placement}`;
+    const offsetX = offset?.x ?? "1rem";
+    const offsetY = offset?.y ?? "1rem";
+    const toggleId = `supaship-toolbar-toggle-${this.clientId}`;
+    const panelId = `supaship-toolbar-panel-${this.clientId}`;
+    const searchId = `supaship-search-input-${this.clientId}`;
+    const clearId = `supaship-clear-all-${this.clientId}`;
+    const contentId = `supaship-toolbar-content-${this.clientId}`;
+    return `
+      <div class="supaship-toolbar-container ${positionClass}" style="--offset-x: ${offsetX}; --offset-y: ${offsetY};">
+        <button class="supaship-toolbar-toggle" id="${toggleId}" aria-label="Toggle feature flags">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 256 256"
+            width="24"
+            style="vertical-align: middle;">
+            <rect width="256" height="256" rx="16" fill="none"></rect>
+            <line
+              x1="40"
+              y1="128"
+              x2="128"
+              y2="40"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="16"></line>
+            <line
+              x1="216"
+              y1="40"
+              x2="40"
+              y2="216"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="16"></line>
+            <line
+              x1="216"
+              y1="128"
+              x2="128"
+              y2="216"
+              fill="none"
+              stroke="currentColor"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              stroke-width="16"></line>
+          </svg>
+        </button>
+        <div class="supaship-toolbar-panel" id="${panelId}">
+          <div class="supaship-toolbar-header">
+            <input
+              type="text"
+              class="supaship-search-input"
+              id="${searchId}"
+              placeholder="Search features"
+            />
+            <button
+              class="supaship-header-btn"
+              id="${clearId}"
+              aria-label="Reset all overrides"
+              title="Reset all overrides to default"
+            >
+              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="18" height="18">
+                <path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z" fill="currentColor"/>
+              </svg>
+            </button>
+          </div>
+          <div class="supaship-toolbar-content" id="${contentId}">
+            <div class="supaship-toolbar-empty">${NO_FEATURES_MESSAGE}</div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+  injectStyles() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    if (document.getElementById("supaship-toolbar-styles")) {
+      return;
+    }
+    const styles = document.createElement("style");
+    styles.id = "supaship-toolbar-styles";
+    styles.textContent = `
+      .supaship-toolbar-container {
+        position: fixed;
+        z-index: 999999;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+        font-size: 14px;
+      }
+
+      .supaship-toolbar-bottom-right {
+        bottom: var(--offset-y);
+        right: var(--offset-x);
+      }
+
+      .supaship-toolbar-bottom-left {
+        bottom: var(--offset-y);
+        left: var(--offset-x);
+      }
+
+      .supaship-toolbar-top-right {
+        top: var(--offset-y);
+        right: var(--offset-x);
+      }
+
+      .supaship-toolbar-top-left {
+        top: var(--offset-y);
+        left: var(--offset-x);
+      }
+
+      .supaship-toolbar-toggle {
+        position: relative;
+        width: 36px;
+        height: 36px;
+        border-radius: 100%;
+        background: #000;
+        border: none;
+        color: white;
+        cursor: pointer;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+        transition: transform 0.2s, box-shadow 0.2s;
+      }
+
+      .supaship-toolbar-toggle:hover {
+        transform: scale(1.05);
+        box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
+      }
+
+      .supaship-toolbar-panel {
+        position: absolute;
+        bottom: 48px;
+        right: 0;
+        width: 300px;
+        max-height: 600px;
+        background: #1a1a1a;
+        border-radius: 12px;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
+        display: none;
+        flex-direction: column;
+        overflow: hidden;
+        border: 1px solid #333;
+      }
+
+      .supaship-toolbar-bottom-left .supaship-toolbar-panel,
+      .supaship-toolbar-top-left .supaship-toolbar-panel {
+        right: auto;
+        left: 0;
+      }
+
+      .supaship-toolbar-top-right .supaship-toolbar-panel,
+      .supaship-toolbar-top-left .supaship-toolbar-panel {
+        bottom: auto;
+        top: 60px;
+      }
+
+      .supaship-toolbar-panel.open {
+        display: flex;
+      }
+
+      .supaship-toolbar-header {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        padding: 12px;
+        border-bottom: 1px solid #333;
+        background: #0f0f0f;
+      }
+
+      .supaship-search-input {
+        flex: 1;
+        background: transparent;
+        border: none;
+        color: #e5e5e5;
+        padding: 0;
+        font-size: 13px;
+        outline: none;
+      }
+
+      .supaship-search-input::placeholder {
+        color: #888;
+      }
+
+      .supaship-header-btn {
+        background: transparent;
+        border: none;
+        color: #e5e5e5;
+        width: 24px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        cursor: pointer;
+        transition: all 0.2s;
+        padding: 0;
+      }
+
+      .supaship-header-btn:hover {
+        color: #ef4444;
+      }
+
+      .supaship-toolbar-content {
+        flex: 1;
+        overflow-y: auto;
+        padding: 8px;
+        min-height: 200px;
+      }
+
+      .supaship-toolbar-empty {
+        padding: 32px 16px;
+        text-align: center;
+        color: #888;
+      }
+
+      .supaship-feature-item {
+        padding: 0 6px;
+      }
+
+      .supaship-feature-item.disabled {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .supaship-feature-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 12px;
+        min-height: 32px;
+      }
+
+      .supaship-feature-name {
+        font-weight: 500;
+        color: #e5e5e5;
+        font-size: 13px;
+        flex: 1;
+        min-width: 0;
+      }
+
+      .supaship-feature-actions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        flex-shrink: 0;
+        min-height: 20px;
+      }
+
+      .supaship-feature-content {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .supaship-feature-input {
+        flex: 1;
+        padding: 6px 8px;
+        background: #1a1a1a;
+        border: 1px solid #555;
+        color: #e5e5e5;
+        border-radius: 4px;
+        font-size: 13px;
+        font-family: 'Monaco', 'Courier New', monospace;
+        outline: none;
+        resize: vertical;
+        min-height: 60px;
+        margin-bottom: 8px;
+      }
+
+      .supaship-feature-input:focus {
+        border-color: #667eea;
+      }
+
+      .supaship-btn {
+        padding: 4px 12px;
+        border: none;
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 500;
+        cursor: pointer;
+        transition: background 0.2s;
+      }
+
+      .supaship-btn-primary {
+        background: #444;
+        color: white;
+      }
+
+      .supaship-btn-primary:hover {
+        background: #555;
+      }
+
+      .supaship-btn-secondary {
+        background: #444;
+        color: #e5e5e5;
+      }
+
+      .supaship-btn-secondary:hover {
+        background: #555;
+      }
+
+      .supaship-btn:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .supaship-btn:disabled:hover {
+        background: #444;
+      }
+
+      .supaship-header-btn:disabled {
+        opacity: 0.3;
+        cursor: not-allowed;
+      }
+
+      .supaship-header-btn:disabled:hover {
+        color: #e5e5e5;
+      }
+
+      .supaship-toggle {
+        position: relative;
+        display: inline-block;
+        width: 32px;
+        height: 18px;
+        flex-shrink: 0;
+      }
+
+      .supaship-toggle input {
+        opacity: 0;
+        width: 0;
+        height: 0;
+      }
+
+      .supaship-toggle-slider {
+        position: absolute;
+        cursor: pointer;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        background-color: #333;
+        border: 1px solid #555;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 20px;
+      }
+
+      .supaship-toggle-slider:before {
+        position: absolute;
+        content: "";
+        height: 14px;
+        width: 14px;
+        left: 2px;
+        bottom: 1px;
+        background-color: #666;
+        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+        border-radius: 50%;
+        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
+      }
+
+      .supaship-toggle input:checked + .supaship-toggle-slider {
+        background-color: #fff;
+        border-color: #fff;
+      }
+
+      .supaship-toggle input:checked + .supaship-toggle-slider:before {
+        transform: translateX(13px);
+        background-color: #000;
+      }
+
+      .supaship-toggle input:disabled + .supaship-toggle-slider {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .supaship-toggle:hover .supaship-toggle-slider:before {
+        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
+      }
+
+      .supaship-btn-icon {
+        background: transparent;
+        border: none;
+        color: #e5e5e5;
+        width: 20px;
+        height: 20px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 4px;
+        cursor: pointer;
+        padding: 0;
+        transition: all 0.2s;
+        flex-shrink: 0;
+      }
+
+      .supaship-btn-icon:hover {
+        background: #444;
+        color: #ef4444;
+      }
+    `;
+    document.head.appendChild(styles);
+  }
+  attachEventListeners() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const toggleId = `supaship-toolbar-toggle-${this.clientId}`;
+    const panelId = `supaship-toolbar-panel-${this.clientId}`;
+    const clearId = `supaship-clear-all-${this.clientId}`;
+    const searchId = `supaship-search-input-${this.clientId}`;
+    const contentId = `supaship-toolbar-content-${this.clientId}`;
+    const toggle = document.getElementById(toggleId);
+    const panel = document.getElementById(panelId);
+    const clearAll = document.getElementById(clearId);
+    const searchInput = document.getElementById(searchId);
+    const content = document.getElementById(contentId);
+    toggle?.addEventListener("click", () => {
+      panel?.classList.toggle("open");
+    });
+    clearAll?.addEventListener("click", () => {
+      this.clearAllOverrides();
+    });
+    searchInput?.addEventListener("input", (e) => {
+      this.state.searchQuery = e.target.value.toLowerCase();
+      this.updateToolbarUI();
+    });
+    if (content) {
+      content.addEventListener("click", (e) => {
+        const target = e.target;
+        const buttonElement = target.closest("button[data-action]");
+        if (!buttonElement) return;
+        e.preventDefault();
+        e.stopPropagation();
+        const featureName = buttonElement.dataset.feature;
+        const action = buttonElement.dataset.action;
+        if (action === "remove") {
+          this.removeOverride(featureName);
+        } else if (action === "set") {
+          const textarea = content.querySelector(
+            `textarea[data-feature="${featureName}"]`
+          );
+          if (textarea && textarea.value.trim()) {
+            try {
+              const value = JSON.parse(textarea.value);
+              this.setOverride(featureName, value);
+            } catch {
+              this.setOverride(featureName, { value: textarea.value });
+            }
+          }
+        }
+      });
+      content.addEventListener("change", (e) => {
+        const target = e.target;
+        if (target.type === "checkbox" && target.dataset.type === "boolean") {
+          const featureName = target.dataset.feature;
+          const newValue = target.checked;
+          this.setOverride(featureName, newValue);
+        }
+      });
+      content.addEventListener("input", (e) => {
+        const target = e.target;
+        if (target.tagName === "TEXTAREA" && target.dataset.feature) {
+          const featureName = target.dataset.feature;
+          const originalValue = target.dataset.original || "";
+          const overrideBtn = content.querySelector(
+            `button[data-action="set"][data-feature="${featureName}"]`
+          );
+          if (overrideBtn) {
+            const hasChanged = target.value !== originalValue;
+            const hasContent = target.value.trim().length > 0;
+            overrideBtn.disabled = !hasChanged || !hasContent;
+          }
+        }
+      });
+      content.addEventListener("paste", (e) => {
+        const target = e.target;
+        if (target.tagName === "TEXTAREA" && target.dataset.feature) {
+          setTimeout(() => {
+            const featureName = target.dataset.feature;
+            const originalValue = target.dataset.original || "";
+            const overrideBtn = content.querySelector(
+              `button[data-action="set"][data-feature="${featureName}"]`
+            );
+            if (overrideBtn) {
+              const hasChanged = target.value !== originalValue;
+              const hasContent = target.value.trim().length > 0;
+              overrideBtn.disabled = !hasChanged || !hasContent;
+            }
+          }, 0);
+        }
+      });
+      content.addEventListener("keydown", (e) => {
+        const target = e.target;
+        if (target.tagName === "TEXTAREA" && target.dataset.feature && (e.ctrlKey || e.metaKey) && e.key === "Enter") {
+          e.preventDefault();
+          const featureName = target.dataset.feature;
+          const overrideBtn = content.querySelector(
+            `button[data-action="set"][data-feature="${featureName}"]`
+          );
+          if (overrideBtn && !overrideBtn.disabled) {
+            overrideBtn.click();
+          }
+        }
+      });
+    }
+  }
+  updateToolbarUI() {
+    if (typeof document === "undefined") {
+      return;
+    }
+    const contentId = `supaship-toolbar-content-${this.clientId}`;
+    const clearId = `supaship-clear-all-${this.clientId}`;
+    const content = document.getElementById(contentId);
+    const clearAllBtn = document.getElementById(clearId);
+    if (!content) {
+      console.warn("[Toolbar] Content element not found:", contentId);
+      return;
+    }
+    const hasOverrides = Object.keys(this.state.overrides).length > 0;
+    if (clearAllBtn) {
+      clearAllBtn.disabled = !hasOverrides;
+    }
+    const features = Array.from(this.state.features).sort();
+    const filteredFeatures = features.filter(
+      (name) => name.toLowerCase().includes(this.state.searchQuery)
+    );
+    if (filteredFeatures.length === 0) {
+      content.innerHTML = this.state.searchQuery ? '<div class="supaship-toolbar-empty">No matching features found</div>' : `<div class="supaship-toolbar-empty">${NO_FEATURES_MESSAGE}</div>`;
+      return;
+    }
+    const htmlContent = filteredFeatures.map((featureName) => {
+      const hasOverride = featureName in this.state.overrides;
+      const currentValue = this.state.featureValues[featureName];
+      const overrideValue = hasOverride ? this.state.overrides[featureName] : currentValue;
+      const isDisabled = !this.state.useLocalOverrides;
+      const itemClass = `supaship-feature-item ${isDisabled ? "disabled" : ""}`;
+      const isBoolean = typeof currentValue === "boolean" || hasOverride && typeof overrideValue === "boolean";
+      if (isBoolean) {
+        const isChecked = hasOverride ? overrideValue === true : currentValue === true;
+        return `
+          <div class="${itemClass}">
+            <div class="supaship-feature-row">
+              <span class="supaship-feature-name">${this.escapeHtml(featureName)}</span>
+              <div class="supaship-feature-actions">
+                ${hasOverride ? `
+                  <button
+                    class="supaship-btn-icon"
+                    data-feature="${this.escapeHtml(featureName)}"
+                    data-action="remove"
+                    title="Reset to default"
+                  >
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="14" height="14">
+                      <path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z" fill="currentColor"/>
+                    </svg>
+                  </button>
+                ` : ""}
+                <label class="supaship-toggle">
+                  <input
+                    type="checkbox"
+                    ${isChecked ? "checked" : ""}
+                    data-feature="${this.escapeHtml(featureName)}"
+                    data-type="boolean"
+                  />
+                  <span class="supaship-toggle-slider"></span>
+                </label>
+              </div>
+            </div>
+          </div>
+        `;
+      } else {
+        const currentDisplayValue = hasOverride ? JSON.stringify(overrideValue) : currentValue !== void 0 ? JSON.stringify(currentValue) : "";
+        const escapedFeatureName = this.escapeHtml(featureName);
+        const escapedCurrentDisplayValue = this.escapeHtml(currentDisplayValue);
+        const escapedTextareaContent = hasOverride ? this.escapeHtml(JSON.stringify(overrideValue)) : escapedCurrentDisplayValue;
+        return `
+          <div class="${itemClass}">
+            <div class="supaship-feature-row">
+              <span class="supaship-feature-name">${escapedFeatureName}</span>
+              <div class="supaship-feature-actions">
+                ${hasOverride ? `
+                    <button
+                      class="supaship-btn-icon"
+                      data-feature="${escapedFeatureName}"
+                      data-action="remove"
+                      title="Reset to default"
+                    >
+                      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" width="14" height="14">
+                        <path d="M240,56v48a8,8,0,0,1-8,8H184a8,8,0,0,1,0-16H211.4L184.81,71.64l-.25-.24a80,80,0,1,0-1.67,114.78,8,8,0,0,1,11,11.63A95.44,95.44,0,0,1,128,224h-1.32A96,96,0,1,1,195.75,60L224,85.8V56a8,8,0,1,1,16,0Z" fill="currentColor"/>
+                      </svg>
+                    </button>
+                  ` : ""}
+                <button
+                  class="supaship-btn supaship-btn-primary"
+                  data-feature="${escapedFeatureName}"
+                  data-action="set"
+                  disabled>
+                  Override
+                </button>
+              </div>
+            </div>
+            <div class="supaship-feature-content">
+              <textarea
+                class="supaship-feature-input"
+                placeholder="Override JSON value"
+                data-feature="${escapedFeatureName}"
+                data-original="${escapedCurrentDisplayValue}"
+              >${escapedTextareaContent}</textarea>
+            </div>
+          </div>
+        `;
+      }
+    }).join("");
+    requestAnimationFrame(() => {
+      content.innerHTML = htmlContent;
+      content.querySelectorAll("textarea[data-feature]").forEach((textarea) => {
+        const textareaElement = textarea;
+        const featureName = textareaElement.dataset.feature;
+        const originalValue = textareaElement.dataset.original || "";
+        const overrideBtn = content.querySelector(
+          `button[data-action="set"][data-feature="${featureName}"]`
+        );
+        if (overrideBtn) {
+          const hasChanged = textareaElement.value !== originalValue;
+          const hasContent = textareaElement.value.trim().length > 0;
+          overrideBtn.disabled = !hasChanged || !hasContent;
+        }
+      });
+    });
+  }
+  escapeHtml(text) {
+    const div = typeof document !== "undefined" ? document.createElement("div") : null;
+    if (div) {
+      div.textContent = text;
+      return div.innerHTML;
+    }
+    return text.replace(/[&<>"']/g, (char) => {
+      const escapeMap = {
+        "&": "&amp;",
+        "<": "&lt;",
+        ">": "&gt;",
+        '"': "&quot;",
+        "'": "&#39;"
+      };
+      return escapeMap[char];
+    });
+  }
+};
+
+// src/constants.ts
+var DEFAULT_FEATURES_URL = "https://edge.supaship.com/v1/features";
+var DEFAULT_EVENTS_URL = "https://edge.supaship.com/v1/events";
+
+// src/client.ts
+var SupaClient = class {
+  constructor(config) {
+    this.apiKey = config.apiKey;
+    this.environment = config.environment;
+    this.defaultContext = config.context;
+    this.featureDefinitions = config.features;
+    this.clientId = this.generateClientId();
+    this.networkConfig = {
+      featuresAPIUrl: config.networkConfig?.featuresAPIUrl || DEFAULT_FEATURES_URL,
+      eventsAPIUrl: config.networkConfig?.eventsAPIUrl || DEFAULT_EVENTS_URL,
+      retry: {
+        enabled: config.networkConfig?.retry?.enabled ?? true,
+        maxAttempts: config.networkConfig?.retry?.maxAttempts ?? 3,
+        backoff: config.networkConfig?.retry?.backoff ?? 1e3
+      },
+      requestTimeoutMs: config.networkConfig?.requestTimeoutMs ?? 1e4
+    };
+    const globalFetch = typeof globalThis !== "undefined" ? globalThis.fetch : void 0;
+    if (config.networkConfig?.fetchFn) {
+      this.fetchImpl = config.networkConfig.fetchFn;
+    } else if (typeof globalFetch === "function") {
+      this.fetchImpl = globalFetch.bind(globalThis);
+    } else {
+      throw new Error(
+        "No fetch implementation available. Provide fetchFn in config or use a runtime with global fetch (e.g., Node 18+, browsers)."
+      );
+    }
+    this.plugins = this.initializePlugins(config);
+    Promise.all(
+      this.plugins.map(
+        (plugin) => plugin.onInit?.({
+          clientId: this.clientId,
+          availableFeatures: this.featureDefinitions,
+          context: this.defaultContext
+        })
+      )
+    ).catch(console.error);
+  }
+  /**
+   * Generate a unique client ID
+   */
+  generateClientId() {
+    return `supaship-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
+  }
+  /**
+   * Initialize plugins with automatic toolbar plugin in browser environments
+   */
+  initializePlugins(config) {
+    const plugins = config.plugins || [];
+    const isBrowser = typeof window !== "undefined" && typeof document !== "undefined";
+    if (config.toolbar === false) {
+      return plugins;
+    }
+    if (isBrowser) {
+      const hasToolbarPlugin = plugins.some((p) => p.name === "toolbar-plugin");
+      if (!hasToolbarPlugin) {
+        const toolbarConfig = config.toolbar || { enabled: "auto" };
+        const toolbarPlugin = new SupaToolbarPlugin(toolbarConfig);
+        return [toolbarPlugin, ...plugins];
+      }
+    }
+    return plugins;
+  }
+  /**
+   * Updates the default context for the client
+   * @param context - New context to merge with or replace the existing context
+   * @param mergeWithExisting - Whether to merge with existing context (default: true)
+   */
+  updateContext(context, mergeWithExisting = true) {
+    const oldContext = this.defaultContext;
+    if (mergeWithExisting && this.defaultContext) {
+      this.defaultContext = { ...this.defaultContext, ...context };
+    } else {
+      this.defaultContext = context;
+    }
+    Promise.all(
+      this.plugins.map(
+        (plugin) => plugin.onContextUpdate?.(oldContext, this.defaultContext, "updateContext")
+      )
+    ).catch(console.error);
+  }
+  /**
+   * Gets the current default context
+   */
+  getContext() {
+    return this.defaultContext;
+  }
+  /**
+   * Gets the fallback value for a feature from its definition
+   */
+  getFeatureFallback(featureName) {
+    return this.featureDefinitions[featureName];
+  }
+  getVariationValue(variation, fallback) {
+    if (variation !== void 0 && variation !== null) {
+      return variation;
+    }
+    return fallback ?? null;
+  }
+  async getFeature(featureName, options) {
+    const { context } = options ?? {};
+    const mergedContext = typeof context === "object" && context !== null ? { ...this.defaultContext ?? {}, ...context } : this.defaultContext;
+    try {
+      const response = await this.getFeatures([featureName], {
+        context: mergedContext
+      });
+      const value = response[featureName];
+      return value;
+    } catch (error) {
+      await Promise.all(this.plugins.map((plugin) => plugin.onError?.(error, mergedContext)));
+      const fallbackValue = this.featureDefinitions[featureName];
+      await Promise.all(
+        this.plugins.map(
+          (plugin) => plugin.onFallbackUsed?.(
+            featureName,
+            fallbackValue,
+            error
+          )
+        )
+      );
+      return fallbackValue;
+    }
+  }
+  async getFeatures(featureNames, options) {
+    const { context: contextOverride } = options ?? {};
+    const mergedContext = typeof contextOverride === "object" && contextOverride !== null ? { ...this.defaultContext ?? {}, ...contextOverride } : this.defaultContext;
+    if (contextOverride) {
+      await Promise.all(
+        this.plugins.map(
+          (plugin) => plugin.onContextUpdate?.(this.defaultContext, mergedContext, "request")
+        )
+      );
+    }
+    const featureNamesArray = featureNames.map((name) => name);
+    try {
+      await Promise.all(
+        this.plugins.map((plugin) => plugin.beforeGetFeatures?.(featureNamesArray, mergedContext))
+      );
+      const fetchFeatures = async () => {
+        const url = this.networkConfig.featuresAPIUrl;
+        const headers = {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${this.apiKey}`
+        };
+        const body = JSON.stringify({
+          apiKey: this.apiKey,
+          environment: this.environment,
+          features: featureNamesArray,
+          context: mergedContext
+        });
+        await Promise.all(this.plugins.map((plugin) => plugin.beforeRequest?.(url, body, headers)));
+        const startTime = Date.now();
+        const AbortCtrl = typeof globalThis !== "undefined" ? globalThis.AbortController : void 0;
+        let controller;
+        let timeoutId;
+        if (this.networkConfig.requestTimeoutMs && typeof AbortCtrl === "function") {
+          controller = new AbortCtrl();
+          timeoutId = setTimeout(() => controller?.abort(), this.networkConfig.requestTimeoutMs);
+        }
+        let response;
+        try {
+          response = await this.fetchImpl(url, {
+            method: "POST",
+            headers,
+            body,
+            signal: controller?.signal
+          });
+        } finally {
+          if (timeoutId) clearTimeout(timeoutId);
+        }
+        const duration = Date.now() - startTime;
+        await Promise.all(
+          this.plugins.map((plugin) => plugin.afterResponse?.(response, { duration }))
+        );
+        if (!response.ok) {
+          throw new Error(`Failed to fetch features: ${response.statusText}`);
+        }
+        const data = await response.json();
+        const result2 = {};
+        featureNamesArray.forEach((name) => {
+          const variation = data.features[name]?.variation;
+          result2[name] = this.getVariationValue(
+            variation,
+            this.featureDefinitions[name]
+          );
+        });
+        return result2;
+      };
+      const result = this.networkConfig.retry.enabled ? await retry(
+        fetchFeatures,
+        this.networkConfig.retry.maxAttempts,
+        this.networkConfig.retry.backoff,
+        (attempt, error, willRetry) => {
+          Promise.all(
+            this.plugins.map((plugin) => plugin.onRetryAttempt?.(attempt, error, willRetry))
+          ).catch(console.error);
+        }
+      ) : await fetchFeatures();
+      await Promise.all(
+        this.plugins.map((plugin) => plugin.afterGetFeatures?.(result, mergedContext))
+      );
+      return result;
+    } catch (error) {
+      await Promise.all(this.plugins.map((plugin) => plugin.onError?.(error, mergedContext)));
+      const fallbackResult = {};
+      featureNamesArray.forEach((featureName) => {
+        fallbackResult[featureName] = this.featureDefinitions[featureName];
+        Promise.all(
+          this.plugins.map(
+            (plugin) => plugin.onFallbackUsed?.(
+              featureName,
+              this.featureDefinitions[featureName],
+              error
+            )
+          )
+        ).catch(console.error);
+      });
+      return fallbackResult;
+    }
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SupaClient,
+  ToolbarPlugin
+});
+//# sourceMappingURL=index.js.map