featuredrop 1.0.1 → 1.2.0

package/dist/vue.js

@@ -0,0 +1,1072 @@
+import { defineComponent, ref, watch, computed, provide, h, inject, onBeforeUnmount } from 'vue';
+import { createRequire } from 'module';
+
+// src/vue/provider.ts
+
+// src/semver.ts
+var SEMVER_REGEX = /^(\d+)\.(\d+)\.(\d+)(?:-([0-9A-Za-z.-]+))?/;
+function parseSemver(input) {
+  const match = input.trim().match(SEMVER_REGEX);
+  if (!match) return null;
+  return {
+    major: Number(match[1]),
+    minor: Number(match[2]),
+    patch: Number(match[3]),
+    prerelease: match[4] ? match[4].split(".") : []
+  };
+}
+function compareSemver(a, b) {
+  const pa = parseSemver(a);
+  const pb = parseSemver(b);
+  if (!pa || !pb) return 0;
+  for (const key of ["major", "minor", "patch"]) {
+    if (pa[key] !== pb[key]) return pa[key] - pb[key];
+  }
+  const aPre = pa.prerelease;
+  const bPre = pb.prerelease;
+  if (aPre.length === 0 && bPre.length === 0) return 0;
+  if (aPre.length === 0) return 1;
+  if (bPre.length === 0) return -1;
+  const len = Math.max(aPre.length, bPre.length);
+  for (let i = 0; i < len; i++) {
+    const ai = aPre[i];
+    const bi = bPre[i];
+    if (ai === void 0) return -1;
+    if (bi === void 0) return 1;
+    const aNum = Number(ai);
+    const bNum = Number(bi);
+    const aIsNum = Number.isInteger(aNum);
+    const bIsNum = Number.isInteger(bNum);
+    if (aIsNum && bIsNum && aNum !== bNum) return aNum - bNum;
+    if (aIsNum !== bIsNum) return aIsNum ? -1 : 1;
+    if (ai !== bi) return ai < bi ? -1 : 1;
+  }
+  return 0;
+}
+function parseComparator(comp) {
+  const match = comp.trim().match(/^(>=|<=|>|<|=)?\\s*(.+)$/);
+  if (!match) return null;
+  const op = match[1] || ">=";
+  const version = match[2];
+  if (!parseSemver(version)) return null;
+  return { op, version };
+}
+function satisfiesComparator(version, comp) {
+  const diff = compareSemver(version, comp.version);
+  switch (comp.op) {
+    case ">":
+      return diff > 0;
+    case ">=":
+      return diff >= 0;
+    case "<":
+      return diff < 0;
+    case "<=":
+      return diff <= 0;
+    case "=":
+      return diff === 0;
+    default:
+      return false;
+  }
+}
+function satisfiesRange(version, range) {
+  const parts = range.split(/\s+/).filter(Boolean);
+  if (parts.length === 0) return true;
+  for (const part of parts) {
+    const comp = parseComparator(part);
+    if (!comp) return false;
+    if (!satisfiesComparator(version, comp)) return false;
+  }
+  return true;
+}
+function isTriggerMatch(trigger, context) {
+  if (!trigger) return true;
+  return false;
+}
+
+// src/core.ts
+function matchesAudience(audience, userContext) {
+  if (audience.plan && audience.plan.length > 0) {
+    if (!userContext.plan || !audience.plan.includes(userContext.plan)) {
+      return false;
+    }
+  }
+  if (audience.role && audience.role.length > 0) {
+    if (!userContext.role || !audience.role.includes(userContext.role)) {
+      return false;
+    }
+  }
+  if (audience.region && audience.region.length > 0) {
+    if (!userContext.region || !audience.region.includes(userContext.region)) {
+      return false;
+    }
+  }
+  return true;
+}
+function isAudienceMatch(feature, userContext, matchFn) {
+  if (!feature.audience) return true;
+  const { plan, role, region, custom } = feature.audience;
+  const hasRules = plan && plan.length > 0 || role && role.length > 0 || region && region.length > 0 || custom && Object.keys(custom).length > 0;
+  if (!hasRules) return true;
+  if (!userContext) return false;
+  if (matchFn) return matchFn(feature.audience, userContext);
+  return matchesAudience(feature.audience, userContext);
+}
+function isVersionMatch(feature, appVersion) {
+  const v = feature.version;
+  if (!v || typeof v === "string") return true;
+  if (!appVersion) return false;
+  if (!v.introduced && !v.showNewUntil && !v.deprecatedAt && !v.showIn) return true;
+  if (v.showIn && !satisfiesRange(appVersion, v.showIn)) return false;
+  if (v.introduced && compareSemver(appVersion, v.introduced) < 0) return false;
+  if (v.deprecatedAt && compareSemver(appVersion, v.deprecatedAt) >= 0) return false;
+  if (v.showNewUntil && compareSemver(appVersion, v.showNewUntil) >= 0) return false;
+  return true;
+}
+function isDependencyMatch(feature, dismissedIds, dependencyState) {
+  const dependsOn = feature.dependsOn;
+  if (!dependsOn) return true;
+  const dismissedDependencyIds = dismissedIds;
+  if (dependsOn.seen && dependsOn.seen.length > 0) {
+    for (const id of dependsOn.seen) {
+      if (!dismissedDependencyIds.has(id)) return false;
+    }
+  }
+  if (dependsOn.clicked && dependsOn.clicked.length > 0) {
+    for (const id of dependsOn.clicked) {
+      return false;
+    }
+  }
+  if (dependsOn.dismissed && dependsOn.dismissed.length > 0) {
+    for (const id of dependsOn.dismissed) {
+      if (!dismissedDependencyIds.has(id)) return false;
+    }
+  }
+  return true;
+}
+function isNew(feature, watermark, dismissedIds, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext) {
+  if (dismissedIds.has(feature.id)) return false;
+  if (!isAudienceMatch(feature, userContext, matchAudience)) return false;
+  if (!isDependencyMatch(feature, dismissedIds)) return false;
+  if (!isVersionMatch(feature, appVersion)) return false;
+  if (!isTriggerMatch(feature.trigger)) return false;
+  const nowMs = now.getTime();
+  if (feature.publishAt) {
+    const publishMs = new Date(feature.publishAt).getTime();
+    if (nowMs < publishMs) return false;
+  }
+  const showUntilMs = new Date(feature.showNewUntil).getTime();
+  if (nowMs >= showUntilMs) return false;
+  if (watermark) {
+    const watermarkMs = new Date(watermark).getTime();
+    const releasedMs = new Date(feature.releasedAt).getTime();
+    if (releasedMs <= watermarkMs) return false;
+  }
+  return true;
+}
+function getNewFeatures(manifest, storage, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext) {
+  const watermark = storage.getWatermark();
+  const dismissedIds = storage.getDismissedIds();
+  return manifest.filter(
+    (f) => isNew(
+      f,
+      watermark,
+      dismissedIds,
+      now,
+      userContext,
+      matchAudience,
+      appVersion)
+  );
+}
+function hasNewFeature(manifest, sidebarKey, storage, now = /* @__PURE__ */ new Date(), userContext, matchAudience, appVersion, dependencyState, triggerContext) {
+  const watermark = storage.getWatermark();
+  const dismissedIds = storage.getDismissedIds();
+  return manifest.some(
+    (f) => f.sidebarKey === sidebarKey && isNew(
+      f,
+      watermark,
+      dismissedIds,
+      now,
+      userContext,
+      matchAudience,
+      appVersion)
+  );
+}
+
+// src/vue/context.ts
+var FeatureDropVueContextKey = /* @__PURE__ */ Symbol("FeatureDropVueContext");
+
+// src/vue/provider.ts
+var FeatureDropProvider = defineComponent({
+  name: "FeatureDropProvider",
+  props: {
+    manifest: {
+      type: Array,
+      required: true
+    },
+    storage: {
+      type: Object,
+      required: true
+    },
+    analytics: {
+      type: Object,
+      required: false
+    },
+    userContext: {
+      type: Object,
+      required: false
+    },
+    matchAudience: {
+      type: Function,
+      required: false
+    },
+    appVersion: {
+      type: String,
+      required: false
+    }
+  },
+  setup(props, { slots }) {
+    const newFeatures = ref(
+      getNewFeatures(
+        props.manifest,
+        props.storage,
+        /* @__PURE__ */ new Date(),
+        props.userContext,
+        props.matchAudience,
+        props.appVersion
+      )
+    );
+    const recompute = () => {
+      newFeatures.value = getNewFeatures(
+        props.manifest,
+        props.storage,
+        /* @__PURE__ */ new Date(),
+        props.userContext,
+        props.matchAudience,
+        props.appVersion
+      );
+    };
+    watch(
+      () => [props.manifest, props.storage, props.userContext, props.matchAudience, props.appVersion],
+      recompute,
+      { deep: false }
+    );
+    const dismiss = (id) => {
+      const feature = newFeatures.value.find((f) => f.id === id);
+      props.storage.dismiss(id);
+      if (feature) {
+        props.analytics?.onFeatureDismissed?.(feature);
+      }
+      recompute();
+    };
+    const dismissAll = async () => {
+      await props.storage.dismissAll(/* @__PURE__ */ new Date());
+      newFeatures.value = [];
+      props.analytics?.onAllDismissed?.();
+    };
+    const newCount = computed(() => newFeatures.value.length);
+    const newFeaturesSorted = computed(() => {
+      const priorityOrder = { critical: 0, normal: 1, low: 2 };
+      return [...newFeatures.value].sort((a, b) => {
+        const pa = priorityOrder[a.priority ?? "normal"];
+        const pb = priorityOrder[b.priority ?? "normal"];
+        if (pa !== pb) return pa - pb;
+        return new Date(b.releasedAt).getTime() - new Date(a.releasedAt).getTime();
+      });
+    });
+    const getFeature = (sidebarKey) => newFeatures.value.find((f) => f.sidebarKey === sidebarKey);
+    const isNewFn = (sidebarKey) => hasNewFeature(
+      props.manifest,
+      sidebarKey,
+      props.storage,
+      /* @__PURE__ */ new Date(),
+      props.userContext,
+      props.matchAudience,
+      props.appVersion
+    );
+    provide(FeatureDropVueContextKey, {
+      manifest: props.manifest,
+      newFeatures,
+      newCount,
+      newFeaturesSorted,
+      isNew: isNewFn,
+      dismiss,
+      dismissAll,
+      getFeature
+    });
+    return () => slots.default?.();
+  }
+});
+function useFeatureDrop() {
+  const context = inject(FeatureDropVueContextKey, null);
+  if (!context) {
+    throw new Error("useFeatureDrop must be used within a <FeatureDropProvider>");
+  }
+  return context;
+}
+function useNewFeature(sidebarKey) {
+  const { isNew: isNew2, getFeature, dismiss } = useFeatureDrop();
+  const feature = computed(() => getFeature(sidebarKey));
+  const isNewValue = computed(() => isNew2(sidebarKey));
+  const dismissFeature = () => {
+    const value = feature.value;
+    if (value) {
+      dismiss(value.id);
+    }
+  };
+  return {
+    feature,
+    isNew: isNewValue,
+    dismiss: dismissFeature
+  };
+}
+function useNewCount() {
+  const { newCount } = useFeatureDrop();
+  return computed(() => newCount.value);
+}
+function useTabNotification(options = {}) {
+  const {
+    enabled = true,
+    template = "({count}) {title}",
+    flash = false,
+    flashInterval = 1500
+  } = options;
+  const { newCount } = useFeatureDrop();
+  if (typeof document === "undefined") return;
+  const originalTitle = document.title;
+  let interval = null;
+  const stop = watch(
+    () => newCount.value,
+    (count) => {
+      if (!enabled || count === 0) {
+        document.title = originalTitle;
+        if (interval) {
+          clearInterval(interval);
+          interval = null;
+        }
+        return;
+      }
+      const nextTitle = template.replace("{count}", String(count)).replace("{title}", originalTitle);
+      if (!flash) {
+        document.title = nextTitle;
+        return;
+      }
+      let showNotification = true;
+      document.title = nextTitle;
+      if (interval) clearInterval(interval);
+      interval = setInterval(() => {
+        showNotification = !showNotification;
+        document.title = showNotification ? nextTitle : originalTitle;
+      }, flashInterval);
+    },
+    { immediate: true }
+  );
+  onBeforeUnmount(() => {
+    stop();
+    document.title = originalTitle;
+    if (interval) {
+      clearInterval(interval);
+      interval = null;
+    }
+  });
+}
+var NewBadge = defineComponent({
+  name: "NewBadge",
+  props: {
+    variant: {
+      type: String,
+      default: "pill"
+    },
+    show: {
+      type: Boolean,
+      default: true
+    },
+    count: {
+      type: Number,
+      required: false
+    },
+    label: {
+      type: String,
+      default: "New"
+    }
+  },
+  setup(props, { slots }) {
+    return () => {
+      if (slots.default) {
+        return slots.default({ isNew: props.show });
+      }
+      if (!props.show) return null;
+      const baseStyle = {
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontFamily: "inherit"
+      };
+      let style = baseStyle;
+      let content = props.label;
+      if (props.variant === "dot") {
+        style = {
+          ...baseStyle,
+          width: "8px",
+          height: "8px",
+          borderRadius: "9999px",
+          backgroundColor: "var(--featuredrop-color, #f59e0b)"
+        };
+        content = null;
+      } else if (props.variant === "count") {
+        style = {
+          ...baseStyle,
+          minWidth: "18px",
+          height: "18px",
+          padding: "0 4px",
+          borderRadius: "9999px",
+          fontSize: "11px",
+          fontWeight: 700,
+          color: "var(--featuredrop-count-color, #fff)",
+          backgroundColor: "var(--featuredrop-count-bg, #f59e0b)"
+        };
+        content = props.count ?? 0;
+      } else {
+        style = {
+          ...baseStyle,
+          padding: "2px 6px",
+          borderRadius: "9999px",
+          fontSize: "10px",
+          fontWeight: 700,
+          color: "var(--featuredrop-color, #b45309)",
+          backgroundColor: "var(--featuredrop-bg, rgba(245,158,11,0.15))",
+          textTransform: "uppercase",
+          letterSpacing: "0.05em"
+        };
+      }
+      return h(
+        "span",
+        {
+          "data-featuredrop": props.variant,
+          style
+        },
+        content ?? void 0
+      );
+    };
+  }
+});
+var dynamicRequire = createRequire(import.meta.url);
+var cachedMarked = null;
+var cachedShiki = null;
+function optionalRequire(name) {
+  try {
+    return dynamicRequire(name);
+  } catch (error) {
+    if (error && typeof error === "object" && "code" in error && error.code === "MODULE_NOT_FOUND") {
+      return null;
+    }
+    return null;
+  }
+}
+function getMarked() {
+  if (cachedMarked !== null) return cachedMarked || null;
+  cachedMarked = optionalRequire("marked") ?? false;
+  return cachedMarked || null;
+}
+function getShiki() {
+  if (cachedShiki !== null) return cachedShiki || null;
+  cachedShiki = optionalRequire("shiki") ?? false;
+  return cachedShiki || null;
+}
+function escapeHtml(value) {
+  return value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#39;");
+}
+function sanitizeUrl(url) {
+  if (!url) return null;
+  const trimmed = url.trim();
+  if (!trimmed) return null;
+  const lower = trimmed.toLowerCase();
+  if (lower.startsWith("javascript:")) return null;
+  if (lower.startsWith("data:")) return null;
+  if (lower.startsWith("vbscript:")) return null;
+  if (/['"<>\s]/.test(trimmed)) return null;
+  return trimmed;
+}
+function sanitizeHtml(html) {
+  return html.replace(/<script[\s\S]*?>[\s\S]*?<\/script>/gi, "").replace(/<style[\s\S]*?>[\s\S]*?<\/style>/gi, "").replace(/\s+on[a-z]+\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/gi, "").replace(/\s+(?:href|src|xlink:href)\s*=\s*("|')(?:javascript:|data:)[^"']*\1/gi, "");
+}
+function decodeAllowedEntities(html) {
+  const allowTags = [
+    "p",
+    "strong",
+    "em",
+    "a",
+    "code",
+    "pre",
+    "img",
+    "ul",
+    "ol",
+    "li",
+    "blockquote",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "br"
+  ];
+  return html.replace(/&lt;(\/?)([a-z0-9]+)([^>]*)&gt;/gi, (match, slash, tag, rest) => {
+    if (!allowTags.includes(tag.toLowerCase())) return match;
+    const decodedRest = rest.replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&amp;/g, "&").replace(/&lt;/g, "<").replace(/&gt;/g, ">");
+    return `<${slash}${tag}${decodedRest}>`;
+  });
+}
+function renderCodeBlock(code, language) {
+  const shiki = getShiki();
+  if (shiki?.codeToHtml) {
+    try {
+      const rendered = shiki.codeToHtml(code, { lang: language || "text", theme: "github-dark" });
+      if (typeof rendered === "string") return rendered;
+    } catch {
+    }
+  }
+  const langAttr = language ? ` class="language-${escapeHtml(language)}"` : "";
+  return `<pre><code${langAttr}>${escapeHtml(code)}</code></pre>`;
+}
+function inlineMarkdown(text) {
+  let result = escapeHtml(text);
+  const codeSpans = [];
+  result = result.replace(/`([^`]+)`/g, (_match, code) => {
+    const idx = codeSpans.length;
+    codeSpans.push(`<code>${escapeHtml(code)}</code>`);
+    return `\xA7\xA7CODE${idx}\xA7\xA7`;
+  });
+  result = result.replace(/!\[([^\]]*)\]\(([^)]+)\)/g, (_match, alt, url) => {
+    const safeUrl = sanitizeUrl(url);
+    const safeAlt = escapeHtml(alt ?? "");
+    if (!safeUrl) return safeAlt;
+    return `<img src="${escapeHtml(safeUrl)}" alt="${safeAlt}" />`;
+  });
+  result = result.replace(/\[([^\]]+)\]\(([^)]+)\)/g, (_match, label, url) => {
+    const safeUrl = sanitizeUrl(url);
+    const safeLabel = escapeHtml(label ?? "");
+    if (!safeUrl) return safeLabel;
+    return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer">${safeLabel}</a>`;
+  });
+  result = result.replace(/\*\*([^*]+)\*\*/g, "<strong>$1</strong>");
+  result = result.replace(/\*([^*]+)\*/g, "<em>$1</em>");
+  result = result.replace(/§§CODE(\d+)§§/g, (_m, idx) => codeSpans[Number(idx)] ?? "");
+  return result;
+}
+function fallbackParse(markdown) {
+  const lines = markdown.split(/\r?\n/);
+  const blocks = [];
+  let listBuffer = null;
+  let quoteBuffer = null;
+  let inCodeBlock = false;
+  let codeLang;
+  let codeLines = [];
+  const flushList = () => {
+    if (!listBuffer) return;
+    blocks.push(`<ul>${listBuffer.map((item) => `<li>${item}</li>`).join("")}</ul>`);
+    listBuffer = null;
+  };
+  const flushQuote = () => {
+    if (!quoteBuffer) return;
+    const content = quoteBuffer.map((line) => inlineMarkdown(line.trim())).join("<br>");
+    blocks.push(`<blockquote>${content}</blockquote>`);
+    quoteBuffer = null;
+  };
+  const flushCode = () => {
+    if (!inCodeBlock) return;
+    blocks.push(renderCodeBlock(codeLines.join("\n"), codeLang));
+    codeLines = [];
+    codeLang = void 0;
+    inCodeBlock = false;
+  };
+  for (const rawLine of lines) {
+    const line = rawLine.replace(/\s+$/, "");
+    const codeFence = line.match(/^```(.*)$/);
+    if (codeFence) {
+      if (inCodeBlock) {
+        flushCode();
+      } else {
+        flushList();
+        flushQuote();
+        inCodeBlock = true;
+        codeLang = codeFence[1]?.trim() || void 0;
+        codeLines = [];
+      }
+      continue;
+    }
+    if (inCodeBlock) {
+      codeLines.push(rawLine);
+      continue;
+    }
+    const listMatch = line.match(/^\s*[-*+]\s+(.*)$/);
+    if (listMatch) {
+      flushQuote();
+      listBuffer = listBuffer ?? [];
+      listBuffer.push(inlineMarkdown(listMatch[1].trim()));
+      continue;
+    }
+    if (listBuffer) flushList();
+    const headingMatch = line.match(/^(#{1,6})\s+(.*)$/);
+    if (headingMatch) {
+      flushQuote();
+      const level = headingMatch[1].length;
+      const content = inlineMarkdown(headingMatch[2].trim());
+      blocks.push(`<h${level}>${content}</h${level}>`);
+      continue;
+    }
+    const quoteMatch = line.match(/^>\s?(.*)$/);
+    if (quoteMatch) {
+      quoteBuffer = quoteBuffer ?? [];
+      quoteBuffer.push(quoteMatch[1]);
+      continue;
+    }
+    if (quoteBuffer) flushQuote();
+    if (!line.trim()) {
+      continue;
+    }
+    blocks.push(`<p>${inlineMarkdown(line.trim())}</p>`);
+  }
+  flushList();
+  flushQuote();
+  flushCode();
+  return blocks.join("\n");
+}
+function renderWithMarked(markdown, marked) {
+  if (!marked.parse) return null;
+  const renderer = marked.Renderer ? new marked.Renderer() : void 0;
+  if (renderer) {
+    renderer.link = (href, _title, text) => {
+      const safeUrl = sanitizeUrl(href);
+      if (!safeUrl) return escapeHtml(text);
+      return `<a href="${escapeHtml(safeUrl)}" target="_blank" rel="noopener noreferrer">${text}</a>`;
+    };
+    renderer.image = (href, _title, text) => {
+      const safeUrl = sanitizeUrl(href);
+      const safeAlt = escapeHtml(text ?? "");
+      if (!safeUrl) return safeAlt;
+      return `<img src="${escapeHtml(safeUrl)}" alt="${safeAlt}" />`;
+    };
+  }
+  const output = marked.parse(markdown, renderer ? { renderer } : void 0);
+  if (typeof output === "string") return output;
+  return output ? String(output) : null;
+}
+function parseDescription(markdown) {
+  if (!markdown) return "";
+  const marked = getMarked();
+  if (marked) {
+    try {
+      const rendered = renderWithMarked(markdown, marked);
+      if (rendered) {
+        const sanitized2 = sanitizeHtml(rendered);
+        const decoded2 = decodeAllowedEntities(sanitized2);
+        return sanitizeHtml(decoded2);
+      }
+    } catch {
+    }
+  }
+  if (/<[^>]+>/.test(markdown)) {
+    const sanitized2 = sanitizeHtml(markdown);
+    const decoded2 = decodeAllowedEntities(sanitized2);
+    return sanitizeHtml(decoded2);
+  }
+  const fallback = fallbackParse(markdown);
+  const sanitized = sanitizeHtml(fallback);
+  const decoded = decodeAllowedEntities(sanitized);
+  return sanitizeHtml(decoded);
+}
+
+// src/vue/components/changelog-widget.ts
+var ChangelogWidget = defineComponent({
+  name: "ChangelogWidget",
+  props: {
+    title: {
+      type: String,
+      default: "What's New"
+    },
+    triggerLabel: {
+      type: String,
+      default: "What's New"
+    },
+    showCount: {
+      type: Boolean,
+      default: true
+    },
+    analytics: {
+      type: Object,
+      required: false
+    }
+  },
+  setup(props, { slots }) {
+    const { newFeaturesSorted, newCount, dismiss, dismissAll } = useFeatureDrop();
+    const isOpen = ref(false);
+    const close = () => {
+      isOpen.value = false;
+      props.analytics?.onWidgetClosed?.();
+    };
+    const open = () => {
+      isOpen.value = true;
+      props.analytics?.onWidgetOpened?.();
+    };
+    const toggle = () => {
+      if (isOpen.value) close();
+      else open();
+    };
+    const renderEntry = (feature) => {
+      if (slots.entry) {
+        return slots.entry({ feature, dismiss: () => dismiss(feature.id) });
+      }
+      return h("div", { style: { padding: "10px 0", borderBottom: "1px solid #e5e7eb" } }, [
+        h("p", { style: { margin: "0 0 4px", fontWeight: 600 } }, feature.label),
+        feature.description ? h("div", {
+          style: { margin: "0 0 6px", color: "#6b7280", fontSize: "13px", lineHeight: 1.5 },
+          innerHTML: parseDescription(feature.description)
+        }) : null,
+        h(
+          "button",
+          {
+            onClick: () => dismiss(feature.id),
+            style: {
+              border: "1px solid #e5e7eb",
+              background: "#fff",
+              borderRadius: "6px",
+              padding: "4px 8px",
+              cursor: "pointer",
+              fontSize: "12px"
+            }
+          },
+          "Dismiss"
+        )
+      ]);
+    };
+    return () => {
+      if (slots.default) {
+        return slots.default({
+          isOpen: isOpen.value,
+          toggle,
+          open,
+          close,
+          features: newFeaturesSorted.value,
+          count: newCount.value,
+          dismiss,
+          dismissAll
+        });
+      }
+      return h("div", { "data-featuredrop-widget": true }, [
+        h(
+          "button",
+          {
+            onClick: toggle,
+            style: {
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "8px",
+              border: "1px solid #d1d5db",
+              background: "#fff",
+              borderRadius: "10px",
+              padding: "8px 12px",
+              cursor: "pointer"
+            }
+          },
+          [
+            props.triggerLabel,
+            props.showCount && newCount.value > 0 ? h(
+              "span",
+              {
+                style: {
+                  display: "inline-flex",
+                  minWidth: "18px",
+                  height: "18px",
+                  borderRadius: "999px",
+                  background: "#f59e0b",
+                  color: "#fff",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "11px",
+                  fontWeight: 700,
+                  padding: "0 4px"
+                }
+              },
+              String(newCount.value)
+            ) : null
+          ]
+        ),
+        isOpen.value ? h(
+          "div",
+          {
+            role: "dialog",
+            style: {
+              marginTop: "8px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "10px",
+              background: "#fff",
+              padding: "12px",
+              minWidth: "300px"
+            }
+          },
+          [
+            h("div", { style: { display: "flex", justifyContent: "space-between", marginBottom: "8px" } }, [
+              h("strong", props.title),
+              h("button", { onClick: close, style: { border: "none", background: "transparent", cursor: "pointer" } }, "x")
+            ]),
+            newFeaturesSorted.value.length === 0 ? h("p", { style: { margin: 0, color: "#6b7280" } }, "You're all caught up!") : newFeaturesSorted.value.map((feature) => renderEntry(feature)),
+            newFeaturesSorted.value.length > 0 ? h(
+              "button",
+              {
+                onClick: () => void dismissAll(),
+                style: {
+                  marginTop: "10px",
+                  border: "none",
+                  background: "transparent",
+                  color: "#2563eb",
+                  cursor: "pointer",
+                  padding: 0
+                }
+              },
+              "Mark all as read"
+            ) : null
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var Spotlight = defineComponent({
+  name: "Spotlight",
+  props: {
+    featureId: {
+      type: String,
+      required: true
+    },
+    label: {
+      type: String,
+      default: "New feature"
+    }
+  },
+  setup(props, { slots }) {
+    const { newFeatures, dismiss } = useFeatureDrop();
+    const open = ref(false);
+    const feature = computed(() => newFeatures.value.find((f) => f.id === props.featureId));
+    return () => {
+      if (slots.default) {
+        return slots.default({
+          feature: feature.value,
+          isActive: !!feature.value,
+          isTooltipOpen: open.value,
+          openTooltip: () => {
+            open.value = true;
+          },
+          closeTooltip: () => {
+            open.value = false;
+          },
+          dismiss: () => dismiss(props.featureId)
+        });
+      }
+      if (!feature.value) return null;
+      return h("div", { "data-featuredrop-spotlight": true, style: { display: "inline-block", position: "relative" } }, [
+        h(
+          "button",
+          {
+            onClick: () => {
+              open.value = !open.value;
+            },
+            style: {
+              width: "20px",
+              height: "20px",
+              borderRadius: "9999px",
+              border: "2px solid #f59e0b",
+              background: "#fff",
+              cursor: "pointer"
+            },
+            "aria-label": props.label
+          },
+          ""
+        ),
+        open.value ? h(
+          "div",
+          {
+            style: {
+              position: "absolute",
+              top: "24px",
+              left: 0,
+              border: "1px solid #e5e7eb",
+              borderRadius: "10px",
+              background: "#fff",
+              padding: "10px",
+              width: "240px",
+              zIndex: 30
+            }
+          },
+          [
+            h("p", { style: { margin: "0 0 4px", fontWeight: 600 } }, feature.value.label),
+            feature.value.description ? h("div", {
+              style: { marginBottom: "8px", color: "#6b7280", fontSize: "13px" },
+              innerHTML: parseDescription(feature.value.description)
+            }) : null,
+            h(
+              "button",
+              {
+                onClick: () => {
+                  dismiss(props.featureId);
+                  open.value = false;
+                },
+                style: {
+                  border: "1px solid #e5e7eb",
+                  background: "#fff",
+                  borderRadius: "6px",
+                  padding: "4px 8px",
+                  cursor: "pointer"
+                }
+              },
+              "Got it"
+            )
+          ]
+        ) : null
+      ]);
+    };
+  }
+});
+var Banner = defineComponent({
+  name: "Banner",
+  props: {
+    featureId: {
+      type: String,
+      required: true
+    },
+    dismissible: {
+      type: Boolean,
+      default: true
+    },
+    analytics: {
+      type: Object,
+      required: false
+    }
+  },
+  setup(props, { slots }) {
+    const { newFeatures, dismiss } = useFeatureDrop();
+    const feature = computed(() => newFeatures.value.find((f) => f.id === props.featureId));
+    return () => {
+      if (slots.default) {
+        return slots.default({
+          feature: feature.value,
+          isActive: !!feature.value,
+          dismiss: () => dismiss(props.featureId)
+        });
+      }
+      if (!feature.value) return null;
+      return h(
+        "div",
+        {
+          "data-featuredrop-banner": true,
+          style: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "8px",
+            border: "1px solid #fbbf24",
+            background: "#fffbeb",
+            color: "#92400e",
+            borderRadius: "10px",
+            padding: "10px 12px"
+          }
+        },
+        [
+          h("div", [
+            h("strong", feature.value.label),
+            feature.value.description ? h("span", {
+              style: { marginLeft: "6px" },
+              innerHTML: parseDescription(feature.value.description)
+            }) : null
+          ]),
+          props.dismissible ? h(
+            "button",
+            {
+              onClick: () => {
+                dismiss(props.featureId);
+                props.analytics?.onFeatureDismissed?.(feature.value);
+              },
+              style: {
+                border: "none",
+                background: "transparent",
+                cursor: "pointer",
+                fontSize: "16px",
+                lineHeight: 1
+              }
+            },
+            "x"
+          ) : null
+        ]
+      );
+    };
+  }
+});
+var Toast = defineComponent({
+  name: "Toast",
+  props: {
+    maxVisible: {
+      type: Number,
+      default: 3
+    }
+  },
+  setup(props, { slots }) {
+    const { newFeaturesSorted, dismiss } = useFeatureDrop();
+    const visible = computed(() => newFeaturesSorted.value.slice(0, props.maxVisible));
+    return () => {
+      if (slots.default) {
+        return slots.default({
+          toasts: visible.value,
+          dismiss
+        });
+      }
+      if (visible.value.length === 0) return null;
+      return h(
+        "div",
+        {
+          "data-featuredrop-toast-container": true,
+          style: {
+            position: "fixed",
+            right: "16px",
+            bottom: "16px",
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px",
+            zIndex: 40
+          }
+        },
+        visible.value.map(
+          (feature) => h("div", {
+            key: feature.id,
+            style: {
+              width: "320px",
+              border: "1px solid #e5e7eb",
+              borderRadius: "10px",
+              background: "#fff",
+              padding: "10px 12px",
+              boxShadow: "0 4px 20px rgba(0,0,0,0.08)"
+            }
+          }, [
+            h("div", { style: { display: "flex", justifyContent: "space-between", gap: "8px" } }, [
+              h("strong", feature.label),
+              h(
+                "button",
+                {
+                  onClick: () => dismiss(feature.id),
+                  style: { border: "none", background: "transparent", cursor: "pointer" }
+                },
+                "x"
+              )
+            ]),
+            feature.description ? h("div", {
+              style: { marginTop: "4px", color: "#6b7280", fontSize: "13px" },
+              innerHTML: parseDescription(feature.description)
+            }) : null
+          ])
+        )
+      );
+    };
+  }
+});
+
+export { Banner, ChangelogWidget, FeatureDropProvider, NewBadge, Spotlight, Toast, useFeatureDrop, useNewCount, useNewFeature, useTabNotification };
+//# sourceMappingURL=vue.js.map
+//# sourceMappingURL=vue.js.map