@firstflow/react 0.0.1 → 0.0.101

package/dist/index.mjs

@@ -1,1072 +1,618 @@
-// src/analytics/events.ts
-var ISSUE_SUBMITTED = "issue_submitted";
-var FEEDBACK_SUBMITTED = "feedback_submitted";
-var SURVEY_COMPLETED = "survey_completed";
-var EXPERIENCE_SHOWN = "experience_shown";
-var EXPERIENCE_CLICKED = "experience_clicked";
-var CHAT_MESSAGE_SENT = "chat_message_sent";
+import {
+  CHAT_MESSAGE_SENT,
+  EXPERIENCE_ANALYTICS_TYPE,
+  EXPERIENCE_CLICKED,
+  EXPERIENCE_SETTINGS_DEFAULT,
+  EXPERIENCE_SHOWN,
+  FIRSTFLOW_PUBLIC_API_BASE_URL,
+  FirstflowProvider,
+  SURVEY_COMPLETED,
+  clearFrequencyRecords,
+  createFirstflow,
+  createStorageAdapter,
+  fetchSdkAgentConfig,
+  getRuntimeSnapshot,
+  markExperienceShown,
+  runEligibilityFilter,
+  styleInject,
+  subscribeInternalRuntime,
+  useFirstflow
+} from "./chunk-WTTDFCFD.mjs";
 
-// src/analytics/identity.ts
-var ANON_KEY = "ff_anon";
-var SESSION_KEY = "ff_sess";
-function uuid() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    return (c === "x" ? r : r & 3 | 8).toString(16);
-  });
+// src/platform/hooks/useFirstflowSelector.ts
+import { useSyncExternalStore } from "react";
+function useFirstflowSelector(selector) {
+  const firstflow = useFirstflow();
+  return useSyncExternalStore(
+    (listener) => subscribeInternalRuntime(firstflow, listener),
+    () => selector(getRuntimeSnapshot(firstflow)),
+    () => selector(getRuntimeSnapshot(firstflow))
+  );
 }
-function getStorage(key, storage) {
-  if (typeof window === "undefined" || !storage) return uuid();
-  try {
-    let value = storage.getItem(key);
-    if (!value) {
-      value = uuid();
-      storage.setItem(key, value);
-    }
-    return value;
-  } catch {
-    return uuid();
+
+// src/survey/hooks/useFirstflowSurvey.ts
+import { useCallback, useMemo, useState } from "react";
+function hasValidAnswer(question, value) {
+  if (question.type === "text_block" || question.type === "thank_you") return true;
+  if (value == null) return false;
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value === "string") return value.trim().length > 0;
+  return false;
+}
+function requiredQuestionsAreAnswered(questions, answers) {
+  for (const q of questions) {
+    if (!q.required) continue;
+    if (!hasValidAnswer(q, answers[q.id] ?? null)) return false;
   }
+  return true;
 }
-function getAnonymousId() {
-  return getStorage(ANON_KEY, typeof window !== "undefined" ? window.localStorage : null);
+function isScopedMode(options) {
+  return !!options && typeof options.experienceId === "string" && options.experienceId.trim().length > 0;
 }
-function getSessionId() {
-  return getStorage(SESSION_KEY, typeof window !== "undefined" ? window.sessionStorage : null);
+function useFirstflowSurvey(options) {
+  const firstflow = useFirstflow();
+  const scoped = isScopedMode(options);
+  const [answers, setAnswers] = useState({});
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const [submitting, setSubmitting] = useState(false);
+  const [submitted, setSubmitted] = useState(false);
+  const [error, setError] = useState(null);
+  if (!scoped) return firstflow.survey;
+  const survey = firstflow.survey.getSurvey(options.experienceId);
+  const questions = survey?.questions ?? [];
+  const currentQuestion = questions[currentIndex] ?? null;
+  const canSubmit = requiredQuestionsAreAnswered(questions, answers);
+  const setAnswer = useCallback((questionId, value) => {
+    setAnswers((prev2) => ({ ...prev2, [questionId]: value }));
+    setError(null);
+    setSubmitted(false);
+  }, []);
+  const next = useCallback(() => {
+    setCurrentIndex((i) => Math.min(i + 1, Math.max(0, questions.length - 1)));
+  }, [questions.length]);
+  const prev = useCallback(() => {
+    setCurrentIndex((i) => Math.max(0, i - 1));
+  }, []);
+  const goTo = useCallback(
+    (index) => {
+      setCurrentIndex(Math.max(0, Math.min(index, Math.max(0, questions.length - 1))));
+    },
+    [questions.length]
+  );
+  const submit = useCallback(async () => {
+    if (!canSubmit) {
+      setError("Please answer all required questions");
+      return;
+    }
+    setSubmitting(true);
+    setError(null);
+    try {
+      const basePayload = {
+        experienceId: options.experienceId,
+        conversationId: options.conversationId,
+        answers,
+        metadata: options.metadata
+      };
+      const payload = options.mapSubmit ? options.mapSubmit(basePayload) : basePayload;
+      const expId = String(payload.experienceId ?? "").trim();
+      if (!expId) throw new Error("experienceId is required");
+      const completedAt = (/* @__PURE__ */ new Date()).toISOString();
+      firstflow.analytics.track(SURVEY_COMPLETED, {
+        agent_id: firstflow.agentId,
+        experience_id: expId,
+        survey_id: expId,
+        conversation_id: payload.conversationId?.trim() || void 0,
+        submitted_at: completedAt,
+        payload: JSON.stringify({
+          experience_id: expId,
+          survey_id: expId,
+          conversation_id: payload.conversationId?.trim() || void 0,
+          completed_at: completedAt,
+          answers: payload.answers ?? {}
+        }),
+        metadata: JSON.stringify(payload.metadata ?? {})
+      });
+      setSubmitted(true);
+    } catch (e) {
+      setError(e instanceof Error ? e.message : "Failed to submit survey");
+    } finally {
+      setSubmitting(false);
+    }
+  }, [answers, canSubmit, firstflow, options]);
+  const result = useMemo(
+    () => ({
+      surveyId: options.experienceId,
+      questions,
+      currentIndex,
+      currentQuestion,
+      answers,
+      setAnswer,
+      next,
+      prev,
+      goTo,
+      canSubmit,
+      isEnabled: firstflow.survey.isEnabled(options.experienceId),
+      submitting,
+      submitted,
+      error,
+      submit,
+      clearError: () => setError(null)
+    }),
+    [
+      options.experienceId,
+      questions,
+      currentIndex,
+      currentQuestion,
+      answers,
+      setAnswer,
+      next,
+      prev,
+      goTo,
+      canSubmit,
+      firstflow,
+      submitting,
+      submitted,
+      error,
+      submit
+    ]
+  );
+  return result;
 }
 
-// src/analytics/device.ts
-function getDeviceType() {
-  if (typeof window === "undefined") return "desktop";
-  const w = window.innerWidth;
-  if (w <= 768) return "mobile";
-  if (w <= 1024) return "tablet";
-  return "desktop";
-}
+// src/experience/hooks/useExperienceEligibility.ts
+import { useMemo as useMemo2 } from "react";
 
-// src/analytics/jitsu.ts
-var DEFAULT_JITSU_HOST = "https://cmmiyu46c00003b6unusxjf0j.analytics.firstflow.dev";
-var DEFAULT_JITSU_KEY = "P5qcd1d4Bd98EdxS4EfnucLohE2Ch37K:U4OECTXofJVzR5jhjaCpaYj478871PFU";
-function uuid2() {
-  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
-    const r = Math.random() * 16 | 0;
-    return (c === "x" ? r : r & 3 | 8).toString(16);
-  });
-}
-function sendTrack(config, event, properties = {}) {
-  const host = config.jitsuHost || DEFAULT_JITSU_HOST;
-  const key = config.jitsuWriteKey || DEFAULT_JITSU_KEY;
-  const payload = {
-    messageId: uuid2(),
-    type: "track",
-    event,
-    anonymousId: getAnonymousId(),
-    timestamp: (/* @__PURE__ */ new Date()).toISOString(),
-    properties: {
-      agent_id: config.agentId,
-      session_id: getSessionId(),
-      device_type: getDeviceType(),
-      ...properties
-    }
-  };
-  const auth = "Basic " + btoa(key);
-  fetch(`${host.replace(/\/$/, "")}/api/s/track`, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      Authorization: auth
-    },
-    body: JSON.stringify(payload),
-    keepalive: true
-  }).catch(() => {
-  });
+// src/platform/hooks/useFirstflowRuntimeSnapshot.ts
+import { useSyncExternalStore as useSyncExternalStore2 } from "react";
+function useFirstflowRuntimeSnapshot(firstflow) {
+  return useSyncExternalStore2(
+    (listener) => subscribeInternalRuntime(firstflow, listener),
+    () => getRuntimeSnapshot(firstflow),
+    () => getRuntimeSnapshot(firstflow)
+  );
 }
 
-// src/analytics/analytics.ts
-var DEFAULT_JITSU_HOST2 = "https://cmmiyu46c00003b6unusxjf0j.analytics.firstflow.dev";
-var DEFAULT_JITSU_KEY2 = "P5qcd1d4Bd98EdxS4EfnucLohE2Ch37K:U4OECTXofJVzR5jhjaCpaYj478871PFU";
-function createAnalytics(config) {
-  const agentId = config.agentId;
-  const jitsuHost = config.jitsuHost ?? DEFAULT_JITSU_HOST2;
-  const jitsuWriteKey = config.jitsuWriteKey ?? DEFAULT_JITSU_KEY2;
-  const transportConfig = { jitsuHost, jitsuWriteKey, agentId };
-  return {
-    track(eventName, properties = {}) {
-      sendTrack(transportConfig, eventName, properties);
-    },
-    identify(userId, traits = {}) {
-      if (userId) {
-        sendTrack(transportConfig, "user_identified", { user_id: userId, ...traits });
-      }
-    },
-    page(name, properties = {}) {
-      sendTrack(transportConfig, "page_view", { page_name: name ?? void 0, ...properties });
-    }
-  };
+// src/experience/hooks/useExperienceEligibility.ts
+var storage = createStorageAdapter();
+function useExperienceEligibility(experienceId) {
+  const firstflow = useFirstflow();
+  const runtime = useFirstflowRuntimeSnapshot(firstflow);
+  return useMemo2(() => {
+    const eligible = runEligibilityFilter(runtime.experienceRows, storage, {
+      user: runtime.user,
+      overrides: runtime.overrides,
+      membershipMap: runtime.audienceMembership
+    });
+    return eligible.some((exp) => exp.experienceId === experienceId);
+  }, [runtime.experienceRows, experienceId, runtime.version]);
 }
 
-// src/config/defaults.ts
-var DEFAULT_PROMPT_TEXT = "Something wrong? Report an issue and we'll look into it.";
-var DEFAULT_FIELDS = [
-  { id: "name", label: "Name", type: "text", required: true },
-  { id: "email", label: "Email", type: "text", required: true },
-  { id: "subject", label: "Subject", type: "text", required: true },
-  { id: "description", label: "Description", type: "textarea", required: true },
-  { id: "session_id", label: "Session ID", type: "text", required: false }
-];
+// src/experience/hooks/useFirstflowResolveExperience.ts
+import { useMemo as useMemo4 } from "react";
 
-// src/config/normalizer.ts
-function normalizeField(raw) {
-  const id = raw.id?.trim();
-  if (!id) return null;
-  if (raw.allowed === false) return null;
-  const type = raw.type === "textarea" || raw.type === "select" ? raw.type : "text";
-  return {
-    id,
-    type,
-    label: raw.label?.trim() ?? id,
-    required: raw.required === true,
-    options: type === "select" && Array.isArray(raw.options) ? raw.options : void 0
-  };
+// src/experience/hooks/useFirstflowSlotCandidates.ts
+import { useMemo as useMemo3 } from "react";
+
+// src/experience/flowMessageNode.ts
+function normalizeFlowMessageStyle(style) {
+  if (style === "inline") return "message";
+  return style;
+}
+function normalizeFlowQuickReplyItem(entry) {
+  if (typeof entry === "string") return { label: entry };
+  if (entry && typeof entry === "object" && "label" in entry && typeof entry.label === "string") {
+    const o = entry;
+    return { label: o.label, prompt: o.prompt };
+  }
+  return { label: "" };
+}
+function normalizeFlowQuickReplyList(raw) {
+  if (!Array.isArray(raw)) return [];
+  return raw.map((x) => normalizeFlowQuickReplyItem(x));
 }
-function normalizeConfig(agentId, apiUrl, raw) {
-  const enabled = raw?.enabled === true;
-  const promptText = typeof raw?.promptText === "string" && raw.promptText.trim() ? raw.promptText.trim() : DEFAULT_PROMPT_TEXT;
-  let fields = DEFAULT_FIELDS;
-  if (Array.isArray(raw?.fields) && raw.fields.length > 0) {
-    const normalized = raw.fields.map(normalizeField).filter((f) => f !== null);
-    if (normalized.length > 0) fields = normalized;
+var EXPERIENCE_MESSAGE_ANALYTICS_ACTION = {
+  cta_primary: "cta_primary",
+  cta_dismiss: "cta_dismiss",
+  quick_reply: "quick_reply",
+  carousel_cta: "carousel_cta"
+};
+var EXPERIENCE_MESSAGE_BLOCKS_VERSION = 4;
+function buildExperienceMessageBlocks(config) {
+  const blocks = [];
+  const content = config.messageContent?.trim();
+  if (content) {
+    blocks.push({ type: "text", body: content });
+  }
+  const style = config.messageStyle;
+  if (style === "carousel" && config.carouselCards && config.carouselCards.length > 0) {
+    blocks.push({ type: "carousel", cards: config.carouselCards });
+  }
+  if (style === "quick_replies") {
+    const qr = normalizeFlowQuickReplyList(config.quickReplies).filter((q) => q.label.trim());
+    if (qr.length > 0) {
+      blocks.push({ type: "quick_replies", options: qr });
+    }
+  }
+  const ctaType = config.ctaType ?? "none";
+  const ctaText = config.ctaText?.trim();
+  const skipCtaBlocks = style === "quick_replies";
+  if (!skipCtaBlocks && (ctaType === "button" || ctaType === "link" || ctaType === "button_dismiss") && ctaText) {
+    const promptTrim = config.ctaPrompt?.trim();
+    blocks.push({
+      type: "cta_primary",
+      label: ctaText,
+      ctaType,
+      url: config.ctaUrl?.trim() || void 0,
+      promptText: ctaType === "button" || ctaType === "button_dismiss" ? promptTrim || void 0 : void 0
+    });
+  }
+  const dismissText = config.dismissText?.trim();
+  if (!skipCtaBlocks && (ctaType === "dismiss" || ctaType === "button_dismiss") && dismissText) {
+    blocks.push({ type: "cta_dismiss", label: dismissText });
   }
+  return blocks;
+}
+function buildExperienceMessageUi(blocks, messageStyle) {
   return {
-    agentId,
-    apiUrl: apiUrl.replace(/\/$/, ""),
-    enabled,
-    promptText,
-    fields
+    hasText: blocks.some((b) => b.type === "text"),
+    hasCarousel: blocks.some((b) => b.type === "carousel"),
+    hasQuickReplies: blocks.some((b) => b.type === "quick_replies"),
+    hasPrimaryCta: blocks.some((b) => b.type === "cta_primary"),
+    hasDismissCta: blocks.some((b) => b.type === "cta_dismiss"),
+    messageStyle: normalizeFlowMessageStyle(messageStyle)
   };
 }
-
-// src/validation/validate.ts
-var CONTEXT_KEYS = /* @__PURE__ */ new Set([
-  "conversationId",
-  "messageId",
-  "sessionId",
-  "agentId",
-  "model"
+var FLOW_MESSAGE_STYLES = /* @__PURE__ */ new Set([
+  "message",
+  "inline",
+  "card",
+  "carousel",
+  "quick_replies",
+  "rich_card"
 ]);
-function isContextKey(key) {
-  return CONTEXT_KEYS.has(key);
-}
-function validatePayload(data, fields) {
-  const errors = {};
-  const fieldIds = new Set(fields.map((f) => f.id));
-  for (const field of fields) {
-    const value = data[field.id];
-    const str = typeof value === "string" ? value.trim() : "";
-    if (field.required && !str) {
-      errors[field.id] = `${field.label ?? field.id} is required`;
-      continue;
-    }
-    if (!field.required && !str) continue;
-    if (field.type === "select" && field.options?.length) {
-      if (!field.options.includes(str)) {
-        errors[field.id] = `Please choose a valid option`;
-      }
-    }
+var FLOW_MESSAGE_CTA_TYPES = /* @__PURE__ */ new Set([
+  "none",
+  "button",
+  "link",
+  "dismiss",
+  "button_dismiss"
+]);
+var FLOW_CAROUSEL_BUTTON_ACTIONS = /* @__PURE__ */ new Set([
+  "prompt",
+  "link"
+]);
+function asTrimmedString(v) {
+  if (typeof v !== "string") return void 0;
+  const t = v.trim();
+  return t || void 0;
+}
+function parseFlowCarouselCardEntry(entry, index) {
+  if (!entry || typeof entry !== "object" || Array.isArray(entry)) {
+    return { id: `carousel-${index}`, title: "", description: "" };
   }
+  const o = entry;
+  const buttonAction = typeof o.buttonAction === "string" && FLOW_CAROUSEL_BUTTON_ACTIONS.has(o.buttonAction) ? o.buttonAction : void 0;
+  const secondaryButtonAction = typeof o.secondaryButtonAction === "string" && FLOW_CAROUSEL_BUTTON_ACTIONS.has(o.secondaryButtonAction) ? o.secondaryButtonAction : void 0;
   return {
-    valid: Object.keys(errors).length === 0,
-    errors: Object.keys(errors).length > 0 ? errors : void 0
+    id: typeof o.id === "string" ? o.id : `carousel-${index}`,
+    title: typeof o.title === "string" ? o.title : "",
+    description: typeof o.description === "string" ? o.description : "",
+    buttonText: asTrimmedString(o.buttonText),
+    buttonAction,
+    buttonUrl: asTrimmedString(o.buttonUrl),
+    buttonPrompt: asTrimmedString(o.buttonPrompt),
+    showCardCta: typeof o.showCardCta === "boolean" ? o.showCardCta : void 0,
+    secondaryButtonText: asTrimmedString(o.secondaryButtonText),
+    secondaryButtonAction,
+    secondaryButtonUrl: asTrimmedString(o.secondaryButtonUrl),
+    secondaryButtonPrompt: asTrimmedString(o.secondaryButtonPrompt),
+    emoji: asTrimmedString(o.emoji),
+    mediaType: o.mediaType === "emoji" || o.mediaType === "image" || o.mediaType === "video" ? o.mediaType : void 0,
+    imageUrl: asTrimmedString(o.imageUrl),
+    videoUrl: asTrimmedString(o.videoUrl)
   };
 }
-function getFormFieldsOnly(data, fields) {
-  const fieldIds = new Set(fields.map((f) => f.id));
-  const out = {};
-  for (const key of Object.keys(data)) {
-    if (isContextKey(key)) continue;
-    if (fieldIds.has(key)) out[key] = data[key];
+function parseRichCardTags(raw) {
+  if (!Array.isArray(raw)) return void 0;
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const o = item;
+    const label = typeof o.label === "string" ? o.label.trim() : "";
+    if (!label) continue;
+    out.push({
+      label,
+      bg: typeof o.bg === "string" ? o.bg : void 0,
+      color: typeof o.color === "string" ? o.color : void 0
+    });
+  }
+  return out.length ? out : void 0;
+}
+function parseRichCardMeta(raw) {
+  if (!Array.isArray(raw)) return void 0;
+  const out = [];
+  for (const item of raw) {
+    if (!item || typeof item !== "object") continue;
+    const o = item;
+    const label = typeof o.label === "string" ? o.label.trim() : "";
+    if (!label) continue;
+    out.push({
+      label,
+      icon: typeof o.icon === "string" ? o.icon : void 0
+    });
   }
-  return out;
+  return out.length ? out : void 0;
 }
-
-// src/api/IssueReporter.ts
-function extractContextMetadata(data, formFieldIds) {
-  const ctx = {};
-  for (const key of Object.keys(data)) {
-    if (formFieldIds.has(key)) continue;
-    const v = data[key];
-    if (v !== void 0) ctx[key] = v;
+function tryParseHttpImageUrl(raw) {
+  if (!raw || typeof raw !== "string") return void 0;
+  const t = raw.trim();
+  if (!/^https?:\/\//i.test(t)) return void 0;
+  try {
+    const u = new URL(t);
+    if (u.protocol !== "http:" && u.protocol !== "https:") return void 0;
+    return u.href;
+  } catch {
+    return void 0;
   }
-  return ctx;
-}
-function buildPayload(formValues, contextMetadata) {
-  return { ...formValues, ...contextMetadata };
-}
-function createIssueReporter(options) {
-  const { agentId, apiUrl, config: rawConfig, analytics: analyticsOpt } = options;
-  const analytics = analyticsOpt ?? createAnalytics({ agentId });
-  let config = normalizeConfig(agentId, apiUrl, rawConfig);
-  let openHandler;
-  const instance = {
-    getConfig() {
-      return config;
-    },
-    setConfig(next) {
-      config = next;
-    },
-    async reportIssue(data) {
-      const formValues = getFormFieldsOnly(
-        data,
-        config.fields
-      );
-      const result = validatePayload(formValues, config.fields);
-      if (!result.valid) {
-        throw new Error(
-          result.errors ? Object.entries(result.errors).map(([k, v]) => `${k}: ${v}`).join(", ") : "Validation failed"
-        );
-      }
-      const formFieldIds = new Set(config.fields.map((f) => f.id));
-      const contextMetadata = extractContextMetadata(data, formFieldIds);
-      const payload = buildPayload(formValues, contextMetadata);
-      analytics.track(ISSUE_SUBMITTED, {
-        payload: JSON.stringify(payload),
-        metadata: JSON.stringify({})
-      });
-    },
-    open(options2) {
-      openHandler?.(options2);
-    },
-    setOpenHandler(handler) {
-      openHandler = handler;
-    },
-    destroy() {
-      openHandler = void 0;
-    }
-  };
-  return instance;
 }
-
-// src/config/feedbackNormalizer.ts
-var DEFAULT_TAGS = ["Insightful", "Actionable", "Clear"];
-var DEFAULT_HEADING = "Tell us more";
-var DEFAULT_PLACEHOLDER = "Anything else you'd like to add? (optional)";
-function normalizeSide(raw) {
-  const tags = Array.isArray(raw?.tags) && raw.tags.length > 0 ? [...new Set(raw.tags.map((t) => String(t).trim()).filter(Boolean))] : [...DEFAULT_TAGS];
+function parseFlowMessageNodeConfig(raw) {
+  const messageStyle = typeof raw.messageStyle === "string" && FLOW_MESSAGE_STYLES.has(raw.messageStyle) ? raw.messageStyle : void 0;
+  const ctaType = typeof raw.ctaType === "string" && FLOW_MESSAGE_CTA_TYPES.has(raw.ctaType) ? raw.ctaType : void 0;
+  const carouselRaw = raw.carouselCards;
+  const carouselCards = Array.isArray(carouselRaw) ? carouselRaw.map((c, i) => parseFlowCarouselCardEntry(c, i)) : void 0;
+  const quickReplies = Array.isArray(raw.quickReplies) ? raw.quickReplies : void 0;
+  const richCardMediaType = raw.richCardMediaType === "emoji" || raw.richCardMediaType === "image" ? raw.richCardMediaType : void 0;
   return {
-    tags,
-    heading: typeof raw?.heading === "string" && raw.heading.trim() ? raw.heading.trim() : DEFAULT_HEADING,
-    placeholder: typeof raw?.placeholder === "string" && raw.placeholder.trim() ? raw.placeholder.trim() : DEFAULT_PLACEHOLDER,
-    showTags: raw?.showTags === true,
-    showComment: raw?.showComment === true
+    messageContent: typeof raw.messageContent === "string" ? raw.messageContent : void 0,
+    messageStyle,
+    ctaType,
+    ctaText: typeof raw.ctaText === "string" ? raw.ctaText : void 0,
+    ctaUrl: typeof raw.ctaUrl === "string" ? raw.ctaUrl : void 0,
+    ctaPrompt: typeof raw.ctaPrompt === "string" ? raw.ctaPrompt : void 0,
+    dismissText: typeof raw.dismissText === "string" ? raw.dismissText : void 0,
+    quickReplies,
+    carouselCards,
+    richCardImageUrl: typeof raw.richCardImageUrl === "string" ? raw.richCardImageUrl : void 0,
+    richCardTitle: typeof raw.richCardTitle === "string" ? raw.richCardTitle : void 0,
+    richCardEmoji: typeof raw.richCardEmoji === "string" ? raw.richCardEmoji : void 0,
+    richCardMediaType,
+    richCardTags: parseRichCardTags(raw.richCardTags),
+    richCardMeta: parseRichCardMeta(raw.richCardMeta)
   };
 }
-function normalizeFeedbackConfig(raw) {
-  const enabled = raw?.enabled === true;
+function buildExperienceCarouselCtaAction(config, cardId, actionId) {
+  const id = actionId === "secondary" ? "secondary" : "primary";
+  const card = config.carouselCards?.find((c) => c.id === cardId);
+  if (!card) {
+    return { kind: "carousel_cta", cardId, actionId: id };
+  }
+  const isSecondary = id === "secondary";
+  const label = isSecondary ? card.secondaryButtonText?.trim() : card.buttonText?.trim();
+  const buttonAction = isSecondary ? card.secondaryButtonAction ?? "prompt" : card.buttonAction ?? "prompt";
+  const linkUrl = isSecondary ? card.secondaryButtonUrl?.trim() || void 0 : card.buttonUrl?.trim() || void 0;
+  const promptText = isSecondary ? card.secondaryButtonPrompt?.trim() || void 0 : card.buttonPrompt?.trim() || void 0;
   return {
-    enabled,
-    like: normalizeSide(raw?.like),
-    dislike: normalizeSide(raw?.dislike)
+    kind: "carousel_cta",
+    cardId,
+    actionId: id,
+    buttonAction,
+    label,
+    linkUrl,
+    promptText
   };
 }
-function defaultFeedbackConfig() {
-  return normalizeFeedbackConfig({ enabled: false });
-}
 
-// src/api/MessageFeedback.ts
-var METADATA_MAX_BYTES = 32768;
-function normalizeMetadata(meta) {
-  if (!meta || typeof meta !== "object" || Array.isArray(meta)) return void 0;
-  if (Object.keys(meta).length === 0) return void 0;
-  try {
-    const s = JSON.stringify(meta);
-    if (s.length > METADATA_MAX_BYTES) {
-      console.warn(
-        `[Firstflow] feedback metadata omitted (serialized length ${s.length} > ${METADATA_MAX_BYTES})`
-      );
-      return void 0;
+// src/experience/hooks/useFirstflowSlotCandidates.ts
+function asRecord(value) {
+  if (!value || typeof value !== "object" || Array.isArray(value)) return null;
+  return value;
+}
+function isMessageNode(node) {
+  const data = asRecord(node.data);
+  const config = asRecord(data?.config);
+  const icon = typeof data?.icon === "string" ? data.icon.toLowerCase() : "";
+  const title = typeof data?.title === "string" ? data.title.toLowerCase() : "";
+  return icon === "message" || title === "message" || typeof config?.messageStyle === "string" || typeof config?.messageContent === "string" || Array.isArray(config?.quickReplies);
+}
+function isAnnouncementNode(node) {
+  const data = asRecord(node.data);
+  const config = asRecord(data?.config);
+  const icon = typeof data?.icon === "string" ? data.icon.toLowerCase() : "";
+  const title = typeof data?.title === "string" ? data.title.toLowerCase() : "";
+  return icon === "announcement" || title === "announcement" || typeof config?.announcementStyle === "string" || typeof config?.announcementTitle === "string" || typeof config?.announcementBody === "string";
+}
+function toNodeConfig(node) {
+  const cfg = node.data?.config;
+  return cfg && typeof cfg === "object" ? cfg : {};
+}
+function messageNodeTier(config) {
+  const rawStyle = typeof config.messageStyle === "string" ? config.messageStyle : void 0;
+  const normalized = normalizeFlowMessageStyle(rawStyle) ?? rawStyle;
+  const carouselCards = config.carouselCards;
+  const hasCarousel = normalized === "carousel" && Array.isArray(carouselCards) && carouselCards.length > 0;
+  if (hasCarousel) return 4;
+  if (normalized === "rich_card") return 3;
+  if (normalized === "card") return 2;
+  if (normalized === "quick_replies") return 1;
+  return 0;
+}
+function pickMessageNodeForSlot(typedNodes) {
+  const candidates = typedNodes.filter(
+    (n) => isMessageNode(n) && typeof n.id === "string"
+  );
+  if (candidates.length === 0) return null;
+  let best = candidates[0];
+  let bestTier = messageNodeTier(toNodeConfig(best));
+  for (let i = 1; i < candidates.length; i++) {
+    const c = candidates[i];
+    const t = messageNodeTier(toNodeConfig(c));
+    if (t > bestTier) {
+      bestTier = t;
+      best = c;
     }
-    return JSON.parse(s);
-  } catch {
-    console.warn("[Firstflow] feedback metadata must be JSON-serializable; omitted");
-    return void 0;
-  }
-}
-function buildJitsuPayload(payload) {
-  const payloadObj = {
-    conversation_id: payload.conversationId.trim(),
-    message_id: payload.messageId.trim(),
-    rating: payload.rating,
-    submitted_at: (/* @__PURE__ */ new Date()).toISOString()
-  };
-  if (payload.comment != null && String(payload.comment).trim()) {
-    payloadObj.comment = String(payload.comment).trim();
   }
-  if (payload.messagePreview != null && String(payload.messagePreview).trim()) {
-    payloadObj.message_preview = String(payload.messagePreview).trim().slice(0, 2e3);
+  return best;
+}
+function buildTourMessageSteps(flow) {
+  const nodes = Array.isArray(flow?.nodes) ? flow.nodes : [];
+  const edges = Array.isArray(flow?.edges) ? flow.edges : [];
+  const typedNodes = nodes.filter((n) => !!n && typeof n === "object");
+  const nodeById = /* @__PURE__ */ new Map();
+  for (const n of typedNodes) {
+    if (typeof n.id === "string") nodeById.set(n.id, n);
   }
-  if (payload.tags != null && payload.tags.length > 0) {
-    payloadObj.tags = payload.tags;
+  const outgoing = /* @__PURE__ */ new Map();
+  for (const e of edges) {
+    const s = typeof e.source === "string" ? e.source : null;
+    const t = typeof e.target === "string" ? e.target : null;
+    if (!s || !t) continue;
+    if (!outgoing.has(s)) outgoing.set(s, []);
+    outgoing.get(s).push(t);
   }
-  if (typeof payload.showTags === "boolean") {
-    payloadObj.showTags = payload.showTags;
+  let startId = null;
+  if (nodeById.has("1")) {
+    startId = "1";
+  } else {
+    const incoming = /* @__PURE__ */ new Set();
+    for (const e of edges) {
+      if (typeof e.target === "string") incoming.add(e.target);
+    }
+    for (const id of nodeById.keys()) {
+      if (!incoming.has(id)) {
+        startId = id;
+        break;
+      }
+    }
   }
-  if (typeof payload.showComment === "boolean") {
-    payloadObj.showComment = payload.showComment;
+  if (!startId && nodeById.size > 0) {
+    startId = [...nodeById.keys()][0];
   }
-  const metadata = normalizeMetadata(payload.metadata) ?? {};
-  return {
-    payload: JSON.stringify(payloadObj),
-    metadata: JSON.stringify(metadata),
-    rating: payload.rating
-    // top-level for ClickHouse summary queries
-  };
-}
-function createMessageFeedback(options) {
-  const { agentId, analytics: analyticsOpt, config: rawConfig } = options;
-  const analytics = analyticsOpt ?? createAnalytics({ agentId });
-  let config = normalizeFeedbackConfig(rawConfig ?? void 0);
-  return {
-    getConfig() {
-      return config;
-    },
-    setConfig(next) {
-      config = next;
-    },
-    isEnabled() {
-      return config.enabled === true;
-    },
-    async submit(payload) {
-      const cid = payload.conversationId?.trim();
-      const mid = payload.messageId?.trim();
-      if (!cid) throw new Error("conversationId is required");
-      if (!mid) throw new Error("messageId is required");
-      if (payload.rating !== "like" && payload.rating !== "dislike") {
-        throw new Error('rating must be "like" or "dislike"');
+  if (!startId) return null;
+  const orderedIds = [];
+  const visited = /* @__PURE__ */ new Set();
+  function visit(id) {
+    if (visited.has(id)) return;
+    visited.add(id);
+    const node = nodeById.get(id);
+    if (node && isMessageNode(node)) {
+      orderedIds.push(id);
+    }
+    const next = outgoing.get(id);
+    if (next) {
+      for (const tid of next) {
+        visit(tid);
       }
-      analytics.track(
-        FEEDBACK_SUBMITTED,
-        buildJitsuPayload({ ...payload, conversationId: cid, messageId: mid })
-      );
-    },
-    destroy() {
-      config = defaultFeedbackConfig();
     }
-  };
-}
-
-// src/api/Firstflow.ts
-var internalIssueMap = /* @__PURE__ */ new WeakMap();
-var internalFeedbackMap = /* @__PURE__ */ new WeakMap();
-function createIssueFacade(inner) {
-  return {
-    open(options) {
-      inner.open(options);
-    },
-    async submit(data) {
-      await inner.reportIssue(data);
-    },
-    getConfig() {
-      return inner.getConfig();
-    },
-    destroy() {
-      inner.destroy();
+  }
+  visit(startId);
+  for (const n of typedNodes) {
+    if (typeof n.id !== "string" || !isMessageNode(n)) continue;
+    if (!visited.has(n.id)) {
+      visit(n.id);
     }
-  };
+  }
+  if (orderedIds.length === 0) return null;
+  return orderedIds.map((id) => {
+    const node = nodeById.get(id);
+    return { nodeId: id, config: toNodeConfig(node) };
+  });
 }
-function createFeedbackFacade(inner) {
-  return {
-    submit(payload) {
-      return inner.submit(payload);
-    },
-    getConfig() {
-      return inner.getConfig();
-    },
-    isEnabled() {
-      return inner.isEnabled();
-    }
-  };
+function deriveCandidate(row) {
+  const { experienceId, type, settings, flow } = row;
+  if (type === "survey") {
+    return { type: "survey", experienceId, settings: settings ?? null };
+  }
+  const nodes = Array.isArray(flow?.nodes) ? flow.nodes : [];
+  const typedNodes = nodes.filter((n) => !!n && typeof n === "object");
+  const messageNode = pickMessageNodeForSlot(typedNodes);
+  const announcementNode = typedNodes.find(isAnnouncementNode) ?? null;
+  if (type === "tour") {
+    const steps = buildTourMessageSteps(flow);
+    if (!steps?.length) return null;
+    return {
+      type: "message",
+      experienceId,
+      nodeId: steps[0].nodeId,
+      config: steps[0].config,
+      settings: settings ?? null,
+      tourSteps: steps
+    };
+  }
+  if (type === "message") {
+    if (!messageNode || typeof messageNode.id !== "string") return null;
+    return {
+      type: "message",
+      experienceId,
+      nodeId: messageNode.id,
+      config: toNodeConfig(messageNode),
+      settings: settings ?? null
+    };
+  }
+  if (type === "announcement") {
+    if (!announcementNode || typeof announcementNode.id !== "string") return null;
+    return {
+      type: "announcement",
+      experienceId,
+      nodeId: announcementNode.id,
+      config: toNodeConfig(announcementNode),
+      settings: settings ?? null
+    };
+  }
+  if (messageNode && typeof messageNode.id === "string") {
+    return {
+      type: "message",
+      experienceId,
+      nodeId: messageNode.id,
+      config: toNodeConfig(messageNode),
+      settings: settings ?? null
+    };
+  }
+  if (announcementNode && typeof announcementNode.id === "string") {
+    return {
+      type: "announcement",
+      experienceId,
+      nodeId: announcementNode.id,
+      config: toNodeConfig(announcementNode),
+      settings: settings ?? null
+    };
+  }
+  return null;
 }
-function getInternalIssueReporter(firstflow) {
-  const inner = internalIssueMap.get(firstflow);
-  if (!inner) throw new Error("Invalid Firstflow instance");
-  return inner;
-}
-function getInternalMessageFeedback(firstflow) {
-  const inner = internalFeedbackMap.get(firstflow);
-  if (!inner) throw new Error("Invalid Firstflow instance");
-  return inner;
-}
-function createFirstflow(options) {
-  const { agentId, apiUrl, jitsuHost, jitsuWriteKey, feedbackConfig } = options;
-  const analytics = createAnalytics({ agentId, jitsuHost, jitsuWriteKey });
-  const inner = createIssueReporter({ agentId, apiUrl, analytics });
-  const feedbackInner = createMessageFeedback({
-    agentId,
-    analytics,
-    config: feedbackConfig ?? void 0
-  });
-  const firstflow = {
-    get agentId() {
-      return agentId;
-    },
-    get apiUrl() {
-      return apiUrl;
-    },
-    analytics,
-    issue: createIssueFacade(inner),
-    feedback: createFeedbackFacade(feedbackInner)
-  };
-  internalIssueMap.set(firstflow, inner);
-  internalFeedbackMap.set(firstflow, feedbackInner);
-  return firstflow;
+function useFirstflowSlotCandidates(typeFilter) {
+  const firstflow = useFirstflow();
+  const runtime = useFirstflowRuntimeSnapshot(firstflow);
+  const storage2 = useMemo3(() => createStorageAdapter(), []);
+  return useMemo3(() => {
+    const eligible = runEligibilityFilter(runtime.experienceRows, storage2, {
+      user: runtime.user,
+      overrides: runtime.overrides,
+      membershipMap: runtime.audienceMembership
+    });
+    return eligible.map((row) => deriveCandidate(row)).filter((candidate) => candidate != null).filter(
+      (candidate) => !typeFilter || typeFilter.includes(candidate.type)
+    );
+  }, [runtime.experienceRows, storage2, typeFilter, runtime.version]);
 }
 
-// src/context/FirstflowContext.tsx
-import { createContext as createContext2, useContext as useContext2 } from "react";
-
-// src/context/IssueReporterContext.tsx
-import {
-  createContext,
-  useCallback as useCallback3,
-  useContext,
-  useEffect as useEffect3,
-  useRef,
-  useState as useState2
-} from "react";
-
-// src/components/IssueModal.tsx
-import { useEffect as useEffect2 } from "react";
-import { createPortal } from "react-dom";
-
-// src/components/FormEngine.tsx
-import { useCallback as useCallback2 } from "react";
+// src/experience/hooks/useFirstflowResolveExperience.ts
+function useFirstflowResolveExperience(experienceId) {
+  const candidates = useFirstflowSlotCandidates();
+  return useMemo4(
+    () => candidates.find((candidate) => candidate.experienceId === experienceId) ?? null,
+    [candidates, experienceId]
+  );
+}
 
-// src/hooks/useIssueForm.ts
-import { useCallback, useEffect, useState } from "react";
-function emptyValues(fields) {
-  const init = {};
-  fields.forEach((f) => {
-    init[f.id] = "";
-  });
-  return init;
-}
-function useIssueForm() {
-  const { reporter, openOptionsRef } = useIssueReporterContext();
-  const config = reporter.getConfig();
-  const fields = config.fields;
-  const [values, setValuesState] = useState(() => emptyValues(fields));
-  const [errors, setErrors] = useState({});
-  const [submitting, setSubmitting] = useState(false);
-  const [submitted, setSubmitted] = useState(false);
-  const [submitError, setSubmitError] = useState(null);
-  const fieldsKey = fields.map((f) => f.id).join("\0");
-  useEffect(() => {
-    setValuesState(emptyValues(fields));
-    setErrors({});
-    setSubmitted(false);
-    setSubmitError(null);
-  }, [fieldsKey, reporter]);
-  const setValue = useCallback((fieldId, value) => {
-    setValuesState((prev) => ({ ...prev, [fieldId]: value }));
-    setErrors((prev) => prev[fieldId] ? { ...prev, [fieldId]: "" } : prev);
-  }, []);
-  const setValues = useCallback((next) => {
-    setValuesState(next);
-  }, []);
-  const validate = useCallback(() => {
-    const result = validatePayload(
-      values,
-      fields
-    );
-    if (!result.valid) {
-      setErrors(result.errors ?? {});
-      return false;
-    }
-    setErrors({});
-    return true;
-  }, [values, fields]);
-  const submit = useCallback(async () => {
-    if (!validate()) return;
-    setSubmitting(true);
-    setSubmitError(null);
-    const context = openOptionsRef.current ?? {};
-    try {
-      await reporter.reportIssue({ ...values, ...context });
-      setSubmitted(true);
-    } catch (e) {
-      const msg = e instanceof Error ? e.message : String(e);
-      setSubmitError(msg);
-      throw e;
-    } finally {
-      setSubmitting(false);
-    }
-  }, [validate, values, reporter, openOptionsRef]);
-  const reset = useCallback(() => {
-    setValuesState(emptyValues(fields));
-    setErrors({});
-    setSubmitted(false);
-    setSubmitError(null);
-  }, [fields]);
-  const clearSubmitError = useCallback(() => setSubmitError(null), []);
-  return {
-    values,
-    setValue,
-    setValues,
-    errors,
-    submitting,
-    submitted,
-    submitError,
-    validate,
-    submit,
-    reset,
-    clearSubmitError,
-    isEnabled: config.enabled,
-    config,
-    fields,
-    promptText: config.promptText
-  };
-}
-
-// src/components/FormEngine.module.css
-var FormEngine_default = {};
-
-// src/components/FormEngine.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-function FormEngine({
-  onSubmitSuccess,
-  onCancel,
-  submitLabel = "Submit",
-  cancelLabel = "Cancel"
-}) {
-  const {
-    values,
-    setValue,
-    errors,
-    submitting,
-    submit,
-    submitError,
-    isEnabled,
-    fields,
-    promptText
-  } = useIssueForm();
-  const handleSubmit = useCallback2(
-    async (e) => {
-      e.preventDefault();
-      try {
-        await submit();
-        onSubmitSuccess?.();
-      } catch {
-      }
-    },
-    [submit, onSubmitSuccess]
-  );
-  if (!isEnabled) return null;
-  return /* @__PURE__ */ jsxs("form", { onSubmit: handleSubmit, className: FormEngine_default.form, children: [
-    promptText ? /* @__PURE__ */ jsx("p", { className: FormEngine_default.prompt, children: promptText }) : null,
-    fields.map((field) => /* @__PURE__ */ jsxs("div", { className: FormEngine_default.field, children: [
-      /* @__PURE__ */ jsxs("label", { htmlFor: field.id, className: FormEngine_default.label, children: [
-        field.label,
-        field.required ? " *" : ""
-      ] }),
-      field.type === "textarea" ? /* @__PURE__ */ jsx(
-        "textarea",
-        {
-          id: field.id,
-          className: errors[field.id] ? `${FormEngine_default.textarea} ${FormEngine_default.textareaError}` : FormEngine_default.textarea,
-          value: values[field.id] ?? "",
-          onChange: (e) => setValue(field.id, e.target.value),
-          required: field.required
-        }
-      ) : field.type === "select" ? /* @__PURE__ */ jsxs(
-        "select",
-        {
-          id: field.id,
-          className: errors[field.id] ? `${FormEngine_default.select} ${FormEngine_default.selectError}` : FormEngine_default.select,
-          value: values[field.id] ?? "",
-          onChange: (e) => setValue(field.id, e.target.value),
-          required: field.required,
-          children: [
-            /* @__PURE__ */ jsx("option", { value: "", children: "Select\u2026" }),
-            (field.options ?? []).map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
-          ]
-        }
-      ) : /* @__PURE__ */ jsx(
-        "input",
-        {
-          id: field.id,
-          type: "text",
-          className: errors[field.id] ? `${FormEngine_default.input} ${FormEngine_default.inputError}` : FormEngine_default.input,
-          value: values[field.id] ?? "",
-          onChange: (e) => setValue(field.id, e.target.value),
-          required: field.required
-        }
-      ),
-      errors[field.id] ? /* @__PURE__ */ jsx("span", { className: FormEngine_default.errorText, children: errors[field.id] }) : null
-    ] }, field.id)),
-    submitError ? /* @__PURE__ */ jsx("p", { className: FormEngine_default.submitError, children: submitError }) : null,
-    /* @__PURE__ */ jsxs("div", { className: FormEngine_default.actions, children: [
-      onCancel ? /* @__PURE__ */ jsx("button", { type: "button", onClick: onCancel, disabled: submitting, children: cancelLabel }) : null,
-      /* @__PURE__ */ jsx("button", { type: "submit", disabled: submitting, children: submitting ? "Sending\u2026" : submitLabel })
-    ] })
-  ] });
-}
-
-// src/components/IssueModal.module.css
-var IssueModal_default = {};
-
-// src/components/IssueModal.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-function IssueModal() {
-  const { isModalOpen, closeModal } = useIssueReporterContext();
-  useEffect2(() => {
-    if (!isModalOpen) return;
-    const onKeyDown = (e) => {
-      if (e.key === "Escape") closeModal();
-    };
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [isModalOpen, closeModal]);
-  if (!isModalOpen) return null;
-  const content = /* @__PURE__ */ jsx2(
-    "div",
-    {
-      className: IssueModal_default.overlay,
-      role: "dialog",
-      "aria-modal": "true",
-      "aria-labelledby": "ff-issue-modal-title",
-      onClick: (e) => e.target === e.currentTarget && closeModal(),
-      children: /* @__PURE__ */ jsxs2("div", { className: IssueModal_default.panel, onClick: (e) => e.stopPropagation(), children: [
-        /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            className: IssueModal_default.close,
-            onClick: closeModal,
-            "aria-label": "Close",
-            children: "\xD7"
-          }
-        ),
-        /* @__PURE__ */ jsx2("h2", { id: "ff-issue-modal-title", className: IssueModal_default.title, children: "Report an issue" }),
-        /* @__PURE__ */ jsx2(
-          FormEngine,
-          {
-            onSubmitSuccess: closeModal,
-            onCancel: closeModal,
-            submitLabel: "Submit",
-            cancelLabel: "Cancel"
-          }
-        )
-      ] })
-    }
-  );
-  return createPortal(content, document.body);
-}
-
-// src/context/IssueReporterContext.tsx
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var IssueReporterContext = createContext(
-  null
-);
-function IssueReporterProvider({
-  reporter,
-  children
-}) {
-  const [isModalOpen, setIsModalOpen] = useState2(false);
-  const openOptionsRef = useRef(void 0);
-  const openModal = useCallback3((options) => {
-    openOptionsRef.current = options;
-    setIsModalOpen(true);
-  }, []);
-  const closeModal = useCallback3(() => {
-    setIsModalOpen(false);
-    openOptionsRef.current = void 0;
-  }, []);
-  useEffect3(() => {
-    reporter.setOpenHandler(openModal);
-    return () => {
-      reporter.setOpenHandler(void 0);
-    };
-  }, [reporter, openModal]);
-  const value = {
-    reporter,
-    isModalOpen,
-    openModal,
-    closeModal,
-    openOptionsRef
-  };
-  return /* @__PURE__ */ jsxs3(IssueReporterContext.Provider, { value, children: [
-    children,
-    /* @__PURE__ */ jsx3(IssueModal, {})
-  ] });
-}
-function useIssueReporterContext() {
-  const ctx = useContext(IssueReporterContext);
-  if (ctx == null) {
-    throw new Error(
-      "useIssueReporterContext must be used within IssueReporterProvider"
-    );
-  }
-  return ctx;
-}
-
-// src/context/FirstflowContext.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var FirstflowContext = createContext2(null);
-var FirstflowConfigContext = createContext2(null);
-function FirstflowProvider({ firstflow, children, config = null }) {
-  const internalIssue = getInternalIssueReporter(firstflow);
-  return /* @__PURE__ */ jsx4(FirstflowConfigContext.Provider, { value: config ?? null, children: /* @__PURE__ */ jsx4(FirstflowContext.Provider, { value: firstflow, children: /* @__PURE__ */ jsx4(IssueReporterProvider, { reporter: internalIssue, children }) }) });
-}
-function useFirstflow() {
-  const ctx = useContext2(FirstflowContext);
-  if (ctx == null) {
-    throw new Error("useFirstflow must be used within FirstflowProvider");
-  }
-  return ctx;
-}
-function useFirstflowConfig() {
-  return useContext2(FirstflowConfigContext);
-}
-
-// src/hooks/useCreateFirstflow.ts
-import { useEffect as useEffect4, useState as useState3 } from "react";
-
-// src/config/fetcher.ts
-function extractAgentRecord(json) {
-  if (!json || typeof json !== "object") return null;
-  const o = json;
-  const data = o.data;
-  if (data?.agent && typeof data.agent === "object") {
-    return data.agent;
-  }
-  if (o.agent && typeof o.agent === "object") {
-    return o.agent;
-  }
-  if ("issues_config" in o || "feedback_config" in o) {
-    return o;
-  }
-  return null;
-}
-function extractExperiencesFromResponse(json) {
-  if (!json || typeof json !== "object") return [];
-  const data = json.data;
-  const raw = data?.experiences;
-  if (!Array.isArray(raw)) return [];
-  return raw.filter((x) => x != null && typeof x === "object");
-}
-async function fetchSdkAgentConfig(apiUrl, agentId) {
-  const url = `${apiUrl.replace(/\/$/, "")}/agents/${agentId}/config`;
-  const res = await fetch(url);
-  if (!res.ok) throw new Error(`Failed to load config: ${res.status}`);
-  const json = await res.json();
-  const experiences = extractExperiencesFromResponse(json);
-  const agent = extractAgentRecord(json);
-  if (!agent) {
-    return experiences.length ? { experiences } : {};
-  }
-  return {
-    issues_config: agent.issues_config,
-    feedback_config: agent.feedback_config,
-    experiences
-  };
-}
-
-// src/hooks/useCreateFirstflow.ts
-function useCreateFirstflow(agentId, apiUrl, options = {}) {
-  const { fetchConfig = false } = options;
-  const [firstflow, setFirstflow] = useState3(null);
-  const [loading, setLoading] = useState3(true);
-  const [error, setError] = useState3(null);
-  const [config, setConfig] = useState3(null);
-  useEffect4(() => {
-    if (!agentId || !apiUrl) {
-      setFirstflow(createFirstflow({ agentId: agentId || "", apiUrl: apiUrl || "" }));
-      setConfig(null);
-      setLoading(false);
-      return;
-    }
-    if (!fetchConfig) {
-      setFirstflow(createFirstflow({ agentId, apiUrl }));
-      setConfig(null);
-      setLoading(false);
-      return;
-    }
-    let cancelled = false;
-    setLoading(true);
-    setError(null);
-    setConfig(null);
-    (async () => {
-      try {
-        const sdk = await fetchSdkAgentConfig(apiUrl, agentId);
-        if (cancelled) return;
-        const inst = createFirstflow({ agentId, apiUrl });
-        getInternalIssueReporter(inst).setConfig(normalizeConfig(agentId, apiUrl, sdk.issues_config));
-        getInternalMessageFeedback(inst).setConfig(normalizeFeedbackConfig(sdk.feedback_config));
-        setFirstflow(inst);
-        setConfig(sdk);
-      } catch (e) {
-        if (!cancelled) {
-          setError(e instanceof Error ? e : new Error(String(e)));
-          setConfig(null);
-        }
-      } finally {
-        if (!cancelled) setLoading(false);
-      }
-    })();
-    return () => {
-      cancelled = true;
-    };
-  }, [agentId, apiUrl, fetchConfig]);
-  return { firstflow, loading, error, config };
-}
-
-// src/hooks/useFeedback.ts
-import { useCallback as useCallback4, useEffect as useEffect5, useMemo, useRef as useRef2, useState as useState4 } from "react";
-function storageKey(agentId, messageId) {
-  return `ff_feedback_${agentId}_${messageId}`;
-}
-function isMessageScope(o) {
-  return o != null && typeof o.conversationId === "string" && typeof o.messageId === "string" && typeof o.messagePreview === "string";
-}
-function useFeedback(options) {
-  const firstflow = useFirstflow();
-  const scoped = isMessageScope(options);
-  const [rating, setRatingState] = useState4(null);
-  const [selectedTags, setSelectedTags] = useState4([]);
-  const [comment, setCommentState] = useState4("");
-  const [submitting, setSubmitting] = useState4(false);
-  const [error, setError] = useState4(null);
-  const [submitted, setSubmitted] = useState4(false);
-  const isEnabled = firstflow.feedback.isEnabled();
-  const config = isEnabled ? firstflow.feedback.getConfig() : null;
-  const sideConfig = useMemo(() => {
-    if (!scoped || !config || !rating) return null;
-    return rating === "like" ? config.like : config.dislike;
-  }, [scoped, config, rating]);
-  const ratingRef = useRef2(rating);
-  ratingRef.current = rating;
-  const conversationId = scoped ? options.conversationId : "";
-  const messageId = scoped ? options.messageId : "";
-  const messagePreview = scoped ? options.messagePreview : "";
-  const metadata = scoped ? options.metadata : void 0;
-  useEffect5(() => {
-    if (!scoped) return;
-    setRatingState(null);
-    setSelectedTags([]);
-    setCommentState("");
-    setError(null);
-    setSubmitted(false);
-    if (!isEnabled) return;
-    try {
-      const raw = localStorage.getItem(storageKey(firstflow.agentId, messageId));
-      if (!raw) return;
-      const parsed = JSON.parse(raw);
-      if (parsed.rating === "like" || parsed.rating === "dislike") {
-        setRatingState(parsed.rating);
-        setSelectedTags(Array.isArray(parsed.tags) ? parsed.tags : []);
-        setCommentState(typeof parsed.comment === "string" ? parsed.comment : "");
-      }
-    } catch {
-    }
-  }, [scoped, firstflow.agentId, isEnabled, messageId]);
-  const setRating = useCallback4(
-    (r) => {
-      if (!scoped) return;
-      if (r !== ratingRef.current) {
-        setSelectedTags([]);
-        setCommentState("");
-      }
-      setRatingState(r);
-      setError(null);
-      setSubmitted(false);
-    },
-    [scoped]
-  );
-  const toggleTag = useCallback4(
-    (tag) => {
-      if (!scoped) return;
-      setSelectedTags((prev) => prev.includes(tag) ? prev.filter((t) => t !== tag) : [...prev, tag]);
-      setError(null);
-    },
-    [scoped]
-  );
-  const setComment = useCallback4(
-    (c) => {
-      if (!scoped) return;
-      setCommentState(c);
-    },
-    [scoped]
-  );
-  const clearError = useCallback4(() => setError(null), []);
-  const submit = useCallback4(async () => {
-    if (!scoped || !isEnabled || !rating) return;
-    setSubmitting(true);
-    setError(null);
-    const cfg = firstflow.feedback.getConfig();
-    const sideCfg = rating === "like" ? cfg.like : cfg.dislike;
-    const showTags = sideCfg.showTags === true;
-    const showComment = sideCfg.showComment === true;
-    const payload = {
-      conversationId,
-      messageId,
-      rating,
-      showTags,
-      showComment,
-      tags: showTags && selectedTags.length ? [...new Set(selectedTags)] : void 0,
-      comment: showComment && comment.trim() ? comment.trim() : void 0,
-      messagePreview: messagePreview.slice(0, 2e3),
-      metadata
-    };
-    try {
-      await firstflow.feedback.submit(payload);
-      try {
-        localStorage.setItem(
-          storageKey(firstflow.agentId, messageId),
-          JSON.stringify({ rating, tags: selectedTags, comment })
-        );
-      } catch {
-      }
-      setSubmitted(true);
-    } catch (e) {
-      setError(e instanceof Error ? e.message : "Failed to send feedback");
-    } finally {
-      setSubmitting(false);
-    }
-  }, [
-    scoped,
-    isEnabled,
-    rating,
-    conversationId,
-    messageId,
-    messagePreview,
-    metadata,
-    selectedTags,
-    comment,
-    firstflow,
-    isEnabled
-  ]);
-  if (!scoped) {
-    return firstflow.feedback;
-  }
-  return {
-    rating,
-    selectedTags,
-    comment,
-    submitting,
-    submitted,
-    error,
-    setRating,
-    toggleTag,
-    setComment,
-    submit,
-    clearError,
-    isEnabled,
-    config,
-    sideConfig
-  };
-}
-
-// src/hooks/useExperienceMessageNode.ts
-import { useCallback as useCallback5, useEffect as useEffect6, useMemo as useMemo2, useRef as useRef3 } from "react";
-
-// src/experience/flowMessageNode.ts
-function normalizeFlowMessageStyle(style) {
-  if (style === "inline") return "message";
-  return style;
-}
-function normalizeFlowQuickReplyItem(entry) {
-  if (typeof entry === "string") return { label: entry };
-  if (entry && typeof entry === "object" && "label" in entry && typeof entry.label === "string") {
-    const o = entry;
-    return { label: o.label, prompt: o.prompt };
-  }
-  return { label: "" };
-}
-function normalizeFlowQuickReplyList(raw) {
-  if (!Array.isArray(raw)) return [];
-  return raw.map((x) => normalizeFlowQuickReplyItem(x));
-}
-var EXPERIENCE_MESSAGE_ANALYTICS_ACTION = {
-  cta_primary: "cta_primary",
-  cta_dismiss: "cta_dismiss",
-  quick_reply: "quick_reply",
-  carousel_cta: "carousel_cta"
-};
-var EXPERIENCE_MESSAGE_BLOCKS_VERSION = 4;
-function buildExperienceMessageBlocks(config) {
-  const blocks = [];
-  const content = config.messageContent?.trim();
-  if (content) {
-    blocks.push({ type: "text", body: content });
-  }
-  const style = config.messageStyle;
-  if (style === "carousel" && config.carouselCards && config.carouselCards.length > 0) {
-    blocks.push({ type: "carousel", cards: config.carouselCards });
-  }
-  if (style === "quick_replies") {
-    const qr = normalizeFlowQuickReplyList(config.quickReplies).filter((q) => q.label.trim());
-    if (qr.length > 0) {
-      blocks.push({ type: "quick_replies", options: qr });
-    }
-  }
-  const ctaType = config.ctaType ?? "none";
-  const ctaText = config.ctaText?.trim();
-  const skipCtaBlocks = style === "quick_replies";
-  if (!skipCtaBlocks && (ctaType === "button" || ctaType === "link" || ctaType === "button_dismiss") && ctaText) {
-    const promptTrim = config.ctaPrompt?.trim();
-    blocks.push({
-      type: "cta_primary",
-      label: ctaText,
-      ctaType,
-      url: config.ctaUrl?.trim() || void 0,
-      promptText: ctaType === "button" || ctaType === "button_dismiss" ? promptTrim || void 0 : void 0
-    });
-  }
-  const dismissText = config.dismissText?.trim();
-  if (!skipCtaBlocks && (ctaType === "dismiss" || ctaType === "button_dismiss") && dismissText) {
-    blocks.push({ type: "cta_dismiss", label: dismissText });
-  }
-  return blocks;
-}
-function buildExperienceMessageUi(blocks, messageStyle) {
-  return {
-    hasText: blocks.some((b) => b.type === "text"),
-    hasCarousel: blocks.some((b) => b.type === "carousel"),
-    hasQuickReplies: blocks.some((b) => b.type === "quick_replies"),
-    hasPrimaryCta: blocks.some((b) => b.type === "cta_primary"),
-    hasDismissCta: blocks.some((b) => b.type === "cta_dismiss"),
-    messageStyle: normalizeFlowMessageStyle(messageStyle)
-  };
-}
-function buildExperienceCarouselCtaAction(config, cardId, actionId) {
-  const id = actionId === "secondary" ? "secondary" : "primary";
-  const card = config.carouselCards?.find((c) => c.id === cardId);
-  if (!card) {
-    return { kind: "carousel_cta", cardId, actionId: id };
-  }
-  const isSecondary = id === "secondary";
-  const label = isSecondary ? card.secondaryButtonText?.trim() : card.buttonText?.trim();
-  const buttonAction = isSecondary ? card.secondaryButtonAction ?? "prompt" : card.buttonAction ?? "prompt";
-  const linkUrl = isSecondary ? card.secondaryButtonUrl?.trim() || void 0 : card.buttonUrl?.trim() || void 0;
-  const promptText = isSecondary ? card.secondaryButtonPrompt?.trim() || void 0 : card.buttonPrompt?.trim() || void 0;
-  return {
-    kind: "carousel_cta",
-    cardId,
-    actionId: id,
-    buttonAction,
-    label,
-    linkUrl,
-    promptText
-  };
-}
-
-// src/hooks/useExperienceMessageNode.ts
+// src/experience/hooks/useExperienceMessageNode.ts
+import { useCallback as useCallback2, useEffect, useMemo as useMemo5, useRef } from "react";
 var shownImpressionKeys = /* @__PURE__ */ new Set();
 function buildClickAnalyticsBase(firstflowAgentId, experienceId, nodeId, conversationId, messageStyle, metadata, action) {
   const base = {
     ...metadata ?? {},
     agent_id: firstflowAgentId,
     experience_id: experienceId,
+    experience_type: EXPERIENCE_ANALYTICS_TYPE.FLOW_MESSAGE,
     node_id: nodeId,
     message_style: normalizeFlowMessageStyle(messageStyle) ?? null,
     action: EXPERIENCE_MESSAGE_ANALYTICS_ACTION[action.kind]
@@ -1098,6 +644,7 @@ function buildShownAnalyticsBase(firstflowAgentId, experienceId, nodeId, convers
     ...metadata ?? {},
     agent_id: firstflowAgentId,
     experience_id: experienceId,
+    experience_type: EXPERIENCE_ANALYTICS_TYPE.FLOW_MESSAGE,
     node_id: nodeId,
     message_style: normalizeFlowMessageStyle(messageStyle) ?? null,
     ...conversationId ? { conversation_id: conversationId } : {}
@@ -1117,13 +664,13 @@ function useExperienceMessageNode(options) {
     onAction,
     mapAnalytics
   } = options;
-  const blocks = useMemo2(() => buildExperienceMessageBlocks(config), [config]);
-  const ui = useMemo2(
+  const blocks = useMemo5(() => buildExperienceMessageBlocks(config), [config]);
+  const ui = useMemo5(
     () => buildExperienceMessageUi(blocks, config.messageStyle),
     [blocks, config.messageStyle]
   );
   const impressionKey = impressionKeyOpt ?? `${firstflow.agentId}\0${experienceId}\0${nodeId}\0${conversationId ?? ""}`;
-  const reportShown = useCallback5(() => {
+  const reportShown = useCallback2(() => {
     if (dedupeShown && shownImpressionKeys.has(impressionKey)) {
       return;
     }
@@ -1161,13 +708,13 @@ function useExperienceMessageNode(options) {
     metadata,
     mapAnalytics
   ]);
-  const reportShownRef = useRef3(reportShown);
+  const reportShownRef = useRef(reportShown);
   reportShownRef.current = reportShown;
-  useEffect6(() => {
+  useEffect(() => {
     if (!trackShownOnMount) return;
     reportShownRef.current();
   }, [trackShownOnMount, impressionKey]);
-  const emitClick = useCallback5(
+  const emitClick = useCallback2(
     (action) => {
       try {
         onAction?.(action);
@@ -1207,7 +754,7 @@ function useExperienceMessageNode(options) {
       mapAnalytics
     ]
   );
-  const handlers = useMemo2(() => {
+  const handlers = useMemo5(() => {
     return {
       onPrimaryCta: () => {
         const b = blocks.find((x) => x.type === "cta_primary");
@@ -1250,8 +797,8 @@ function useExperienceMessageNode(options) {
   };
 }
 
-// src/hooks/useExperienceAnnouncementNode.ts
-import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo3, useRef as useRef4 } from "react";
+// src/experience/hooks/useExperienceAnnouncementNode.ts
+import { useCallback as useCallback3, useEffect as useEffect2, useMemo as useMemo6, useRef as useRef2 } from "react";
 
 // src/experience/flowAnnouncementNode.ts
 var EXPERIENCE_ANNOUNCEMENT_ANALYTICS_ACTION = {
@@ -1307,6 +854,9 @@ function normalizeFlowAnnouncementNodeConfig(raw) {
     announcementTitle: r.announcementTitle != null ? String(r.announcementTitle) : void 0,
     announcementBody: r.announcementBody != null ? String(r.announcementBody) : void 0,
     announcementEmoji: r.announcementEmoji != null ? String(r.announcementEmoji) : void 0,
+    announcementImageUrl: r.announcementImageUrl != null ? String(r.announcementImageUrl) : void 0,
+    announcementBadge: r.announcementBadge != null ? String(r.announcementBadge) : void 0,
+    announcementBadgeIcon: r.announcementBadgeIcon != null ? String(r.announcementBadgeIcon) : void 0,
     ctaText: r.ctaText != null ? String(r.ctaText) : void 0,
     ctaUrl: r.ctaUrl != null ? String(r.ctaUrl) : void 0,
     announcementDismissible: toBool(r.announcementDismissible),
@@ -1339,7 +889,8 @@ function buildExperienceAnnouncementUi(config, content) {
     hasBody: Boolean(content.body),
     hasEmoji: Boolean(content.emoji),
     hasCta: Boolean(content.ctaLabel),
-    isDismissible: Boolean(config.announcementDismissible),
+    /** `undefined` / missing → dismissible (matches dashboard defaults). */
+    isDismissible: config.announcementDismissible !== false,
     autoHide,
     autoHideDelay: autoHide ? delay : 0,
     position: config.announcementPosition,
@@ -1348,13 +899,14 @@ function buildExperienceAnnouncementUi(config, content) {
   };
 }
 
-// src/hooks/useExperienceAnnouncementNode.ts
+// src/experience/hooks/useExperienceAnnouncementNode.ts
 var shownImpressionKeys2 = /* @__PURE__ */ new Set();
 function buildClickAnalyticsBase2(firstflowAgentId, experienceId, nodeId, conversationId, config, metadata, action) {
   const base = {
     ...metadata ?? {},
     agent_id: firstflowAgentId,
     experience_id: experienceId,
+    experience_type: EXPERIENCE_ANALYTICS_TYPE.FLOW_ANNOUNCEMENT,
     node_id: nodeId,
     announcement_style: config.announcementStyle ?? null,
     announcement_theme: config.announcementTheme ?? null,
@@ -1372,6 +924,7 @@ function buildShownAnalyticsBase2(firstflowAgentId, experienceId, nodeId, conver
     ...metadata ?? {},
     agent_id: firstflowAgentId,
     experience_id: experienceId,
+    experience_type: EXPERIENCE_ANALYTICS_TYPE.FLOW_ANNOUNCEMENT,
     node_id: nodeId,
     announcement_style: config.announcementStyle ?? null,
     announcement_theme: config.announcementTheme ?? null,
@@ -1392,21 +945,21 @@ function useExperienceAnnouncementNode(options) {
     onAction,
     mapAnalytics
   } = options;
-  const config = useMemo3(
+  const config = useMemo6(
     () => normalizeFlowAnnouncementNodeConfig(configInput),
     [configInput]
   );
-  const content = useMemo3(() => buildExperienceAnnouncementContent(config), [config]);
-  const ui = useMemo3(() => buildExperienceAnnouncementUi(config, content), [config, content]);
+  const content = useMemo6(() => buildExperienceAnnouncementContent(config), [config]);
+  const ui = useMemo6(() => buildExperienceAnnouncementUi(config, content), [config, content]);
   const impressionKey = impressionKeyOpt ?? `${firstflow.agentId}\0${experienceId}\0${nodeId}\0${conversationId ?? ""}`;
-  const timerRef = useRef4(null);
-  const clearAutoHideTimer = useCallback6(() => {
+  const timerRef = useRef2(null);
+  const clearAutoHideTimer = useCallback3(() => {
     if (timerRef.current != null) {
       clearTimeout(timerRef.current);
       timerRef.current = null;
     }
   }, []);
-  const emitClick = useCallback6(
+  const emitClick = useCallback3(
     (action) => {
       try {
         onAction?.(action);
@@ -1443,9 +996,9 @@ function useExperienceAnnouncementNode(options) {
     },
     [onAction, firstflow, experienceId, nodeId, conversationId, config, metadata, mapAnalytics]
   );
-  const emitClickRef = useRef4(emitClick);
+  const emitClickRef = useRef2(emitClick);
   emitClickRef.current = emitClick;
-  useEffect7(() => {
+  useEffect2(() => {
     if (!ui.autoHide || ui.autoHideDelay <= 0) return;
     timerRef.current = setTimeout(() => {
       timerRef.current = null;
@@ -1457,298 +1010,2715 @@ function useExperienceAnnouncementNode(options) {
         timerRef.current = null;
       }
     };
-  }, [ui.autoHide, ui.autoHideDelay, impressionKey]);
-  const reportShown = useCallback6(() => {
-    if (dedupeShown && shownImpressionKeys2.has(impressionKey)) {
+  }, [ui.autoHide, ui.autoHideDelay, impressionKey]);
+  const reportShown = useCallback3(() => {
+    if (dedupeShown && shownImpressionKeys2.has(impressionKey)) {
+      return;
+    }
+    const base = buildShownAnalyticsBase2(
+      firstflow.agentId,
+      experienceId,
+      nodeId,
+      conversationId,
+      config,
+      metadata
+    );
+    let finalProps = base;
+    try {
+      finalProps = mapAnalytics?.(EXPERIENCE_SHOWN, { ...base }) ?? base;
+    } catch (e) {
+      console.warn(
+        "[Firstflow] useExperienceAnnouncementNode mapAnalytics (experience_shown)",
+        e
+      );
+      finalProps = base;
+    }
+    try {
+      firstflow.analytics.track(EXPERIENCE_SHOWN, finalProps);
+      if (dedupeShown) {
+        shownImpressionKeys2.add(impressionKey);
+      }
+    } catch (e) {
+      console.warn(
+        "[Firstflow] useExperienceAnnouncementNode analytics.track (experience_shown)",
+        e
+      );
+    }
+  }, [
+    dedupeShown,
+    impressionKey,
+    firstflow,
+    experienceId,
+    nodeId,
+    conversationId,
+    config,
+    metadata,
+    mapAnalytics
+  ]);
+  const reportShownRef = useRef2(reportShown);
+  reportShownRef.current = reportShown;
+  useEffect2(() => {
+    if (!trackShownOnMount) return;
+    reportShownRef.current();
+  }, [trackShownOnMount, impressionKey]);
+  const dismiss = useCallback3(() => {
+    clearAutoHideTimer();
+    emitClick({ kind: "dismiss" });
+  }, [clearAutoHideTimer, emitClick]);
+  const ctaClick = useCallback3(() => {
+    if (!content.ctaLabel) return;
+    clearAutoHideTimer();
+    emitClick({
+      kind: "cta_click",
+      label: content.ctaLabel,
+      url: content.ctaUrl
+    });
+  }, [content.ctaLabel, content.ctaUrl, clearAutoHideTimer, emitClick]);
+  const cancelAutoHide = useCallback3(() => {
+    clearAutoHideTimer();
+  }, [clearAutoHideTimer]);
+  const handlers = useMemo6(
+    () => ({
+      dismiss,
+      ctaClick,
+      cancelAutoHide,
+      reportShown
+    }),
+    [dismiss, ctaClick, cancelAutoHide, reportShown]
+  );
+  return {
+    config,
+    content,
+    ui,
+    blocksVersion: EXPERIENCE_ANNOUNCEMENT_BLOCKS_VERSION,
+    handlers
+  };
+}
+
+// src/platform/mount.tsx
+import { createRoot } from "react-dom/client";
+import { Fragment, jsx } from "react/jsx-runtime";
+function mount(options, target) {
+  const root = createRoot(target);
+  root.render(
+    /* @__PURE__ */ jsx(
+      FirstflowProvider,
+      {
+        agentId: options.agentId,
+        apiKey: options.apiKey,
+        initialSdkPayload: options.initialSdkPayload,
+        children: /* @__PURE__ */ jsx(Fragment, {})
+      }
+    )
+  );
+  return () => root.unmount();
+}
+
+// src/components/ExperienceSlot.tsx
+import {
+  useCallback as useCallback10,
+  useEffect as useEffect9,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo13,
+  useRef as useRef9,
+  useState as useState8
+} from "react";
+
+// src/components/classNames.ts
+function classNames(...parts) {
+  return parts.filter(Boolean).join(" ");
+}
+
+// src/components/Survey.tsx
+import React, {
+  useCallback as useCallback4,
+  useEffect as useEffect3,
+  useMemo as useMemo7,
+  useRef as useRef3,
+  useState as useState2
+} from "react";
+
+// src/components/Survey.css
+styleInject('.ffSurveyRoot[data-appearance=dark] {\n  --ff-survey-surface: #1a1a1a;\n  --ff-survey-shell-bg: #1e1e1e;\n  --ff-survey-bg-muted: #2a2a2a;\n  --ff-survey-border: #3a3a3a;\n  --ff-survey-border-subtle: #2f2f2f;\n  --ff-survey-row-divider: #333333;\n  --ff-survey-text: #f3f3f3;\n  --ff-survey-text-muted: #a8a8a8;\n  --ff-survey-row-hover: rgba(255, 255, 255, 0.06);\n  --ff-survey-row-active: rgba(255, 255, 255, 0.1);\n  --ff-survey-row-selected: rgba(255, 255, 255, 0.08);\n  --ff-survey-num-bg: #141414;\n  --ff-survey-num-text: #c8c8c8;\n  --ff-survey-num-border: #404040;\n  --ff-survey-accent: #ffffff;\n  --ff-survey-accent-contrast: #121212;\n  --ff-survey-footer-bg: #252525;\n  --ff-survey-nav-btn-bg: #1a1a1a;\n  --ff-survey-nav-btn-border: #404040;\n  --ff-survey-nav-btn-hover: #2a2a2a;\n  --ff-survey-shortcuts: #8a8a8a;\n  --ff-survey-shortcuts-dot: #555;\n  --ff-survey-placeholder: #8f8f8f;\n  --ff-survey-range-track-mute: #3a3a3a;\n  --ff-survey-bubble-bg: #f3f3f3;\n  --ff-survey-bubble-text: #1a1a1a;\n  --ff-survey-shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.ffSurveyRoot[data-appearance=light] {\n  --ff-survey-surface: #ffffff;\n  --ff-survey-shell-bg: #ffffff;\n  --ff-survey-bg-muted: #f5f5f5;\n  --ff-survey-border: #e5e5e5;\n  --ff-survey-border-subtle: #eeeeee;\n  --ff-survey-row-divider: #eeeeee;\n  --ff-survey-text: #1a1a1a;\n  --ff-survey-text-muted: #888888;\n  --ff-survey-row-hover: rgba(0, 0, 0, 0.04);\n  --ff-survey-row-active: #f0f0f0;\n  --ff-survey-row-selected: #f0f0f0;\n  --ff-survey-num-bg: #f5f5f5;\n  --ff-survey-num-text: #888888;\n  --ff-survey-num-border: #e5e5e5;\n  --ff-survey-accent: #1a1a1a;\n  --ff-survey-accent-contrast: #ffffff;\n  --ff-survey-footer-bg: #f5f5f5;\n  --ff-survey-nav-btn-bg: #ffffff;\n  --ff-survey-nav-btn-border: #e0e0e0;\n  --ff-survey-nav-btn-hover: #f0f0f0;\n  --ff-survey-shortcuts: #bbbbbb;\n  --ff-survey-shortcuts-dot: #cccccc;\n  --ff-survey-placeholder: #737373;\n  --ff-survey-range-track-mute: #e5e5e5;\n  --ff-survey-bubble-bg: #1a1a1a;\n  --ff-survey-bubble-text: #ffffff;\n  --ff-survey-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ffSurveyRoot {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 4px;\n  width: 100%;\n  box-sizing: border-box;\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  background: transparent;\n  border: none;\n  border-radius: 0;\n  color: var(--ff-survey-text);\n  outline: none;\n}\n.ffSurveyShell {\n  width: 100%;\n  border: 1px solid var(--ff-survey-border);\n  border-radius: 16px;\n  overflow: hidden;\n  background: var(--ff-survey-shell-bg);\n  color: var(--ff-survey-text);\n  box-shadow: var(--ff-survey-shell-shadow, 0 2px 12px rgba(0, 0, 0, 0.08));\n}\n.ffSurveyTopBar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 16px;\n  padding: 16px 24px 10px;\n}\n.ffSurveyQuestionTitle {\n  margin: 0;\n  flex: 1;\n  min-width: 0;\n  font-size: 16px;\n  font-weight: 500;\n  font-family: inherit;\n  line-height: 1.4;\n  color: var(--ff-survey-text);\n}\n.ffSurveyHeaderControls {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  flex-shrink: 0;\n}\n.ffSurveyHeaderIconBtn {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  width: 36px;\n  height: 36px;\n  min-width: 36px;\n  min-height: 36px;\n  padding: 0;\n  border: 1px solid var(--ff-survey-nav-btn-border);\n  border-radius: 10px;\n  background: var(--ff-survey-nav-btn-bg);\n  color: var(--ff-survey-text-muted);\n  cursor: pointer;\n  transition:\n    background 0.12s ease,\n    color 0.12s ease,\n    opacity 0.12s ease;\n}\n.ffSurveyHeaderIconBtn svg {\n  display: block;\n  flex-shrink: 0;\n}\n.ffSurveyHeaderIconBtn:hover:not(:disabled) {\n  background: var(--ff-survey-nav-btn-hover);\n  color: var(--ff-survey-text);\n}\n.ffSurveyHeaderIconBtn:disabled {\n  opacity: 0.3;\n  cursor: default;\n}\n.ffSurveyHeader {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: 10px;\n  margin-bottom: 12px;\n}\n.ffSurveyTitle {\n  margin: 0;\n  font-size: 18px;\n  font-family:\n    Georgia,\n    "Times New Roman",\n    serif;\n  line-height: 1.2;\n}\n.ffSurveyStep {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-height: 36px;\n  color: var(--ff-survey-text-muted);\n  font-size: 13px;\n  line-height: 1;\n  padding: 0 8px;\n  white-space: nowrap;\n}\n.ffSurveyQuestionPanel {\n  animation: ffSurveyPanelIn 0.24s ease-out;\n  min-height: 1px;\n}\n.ffSurveyQuestionPanelPadded {\n  padding: 0 24px 20px;\n}\n@keyframes ffSurveyPanelIn {\n  from {\n    opacity: 0;\n    transform: translateY(6px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffSurveyQuestionPanel {\n    animation: none;\n  }\n}\n.ffSurveyQuestion {\n  margin: 0 0 10px;\n  font-size: 14px;\n  line-height: 1.4;\n}\n.ffSurveyChoices {\n  display: flex;\n  flex-direction: column;\n}\n.ffSurveyChoiceRow {\n  display: flex;\n  align-items: center;\n  gap: 14px;\n  width: 100%;\n  margin: 0;\n  padding: 15px 24px;\n  border: none;\n  border-bottom: 1px solid var(--ff-survey-row-divider);\n  border-radius: 0;\n  background: transparent;\n  color: var(--ff-survey-text);\n  text-align: left;\n  font-family: inherit;\n  font-size: 15px;\n  line-height: 1.35;\n  cursor: pointer;\n  transition: background 0.12s ease;\n}\n.ffSurveyChoiceRow:last-child {\n  border-bottom: none;\n}\n.ffSurveyChoiceRow:hover {\n  background: var(--ff-survey-row-hover);\n}\n.ffSurveyChoiceNum {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  box-sizing: border-box;\n  min-width: 34px;\n  height: 34px;\n  min-height: 34px;\n  padding: 0 10px;\n  border-radius: 999px;\n  border: 1px solid var(--ff-survey-num-border);\n  background: var(--ff-survey-num-bg);\n  color: var(--ff-survey-num-text);\n  font-size: 14px;\n  font-weight: 500;\n  line-height: 0;\n  flex-shrink: 0;\n  transition:\n    background 0.12s ease,\n    color 0.12s ease,\n    border-color 0.12s ease;\n}\n.ffSurveyChoiceLabel {\n  flex: 1;\n  min-width: 0;\n}\n.ffSurveyChoiceActive:not(.ffSurveyChoiceSelected) {\n  background: var(--ff-survey-row-hover);\n}\n.ffSurveyChoiceSelected {\n  background: var(--ff-survey-row-selected);\n}\n.ffSurveyChoiceSelected .ffSurveyChoiceLabel {\n  font-weight: 500;\n}\n.ffSurveyChoiceSelected .ffSurveyChoiceNum {\n  background: var(--ff-survey-accent);\n  color: var(--ff-survey-accent-contrast);\n  border-color: var(--ff-survey-accent);\n}\n.ffSurveyScaleBody {\n  padding: 8px 24px 24px;\n}\n.ffSurveyScaleSliderWrap {\n  position: relative;\n  padding-top: 28px;\n  margin-bottom: 10px;\n}\n.ffSurveyScaleBubble {\n  position: absolute;\n  top: 0;\n  left: 0;\n  transform: translateX(-50%);\n  background: var(--ff-survey-bubble-bg);\n  color: var(--ff-survey-bubble-text);\n  font-size: 12px;\n  font-weight: 500;\n  padding: 3px 8px;\n  border-radius: 6px;\n  white-space: nowrap;\n  pointer-events: none;\n  line-height: 1.2;\n}\n.ffSurveyScaleBubble::after {\n  content: "";\n  position: absolute;\n  top: 100%;\n  left: 50%;\n  transform: translateX(-50%);\n  border: 4px solid transparent;\n  border-top-color: var(--ff-survey-bubble-bg);\n}\n.ffSurveyScaleBigNum {\n  font-size: 48px;\n  font-weight: 500;\n  color: var(--ff-survey-text);\n  text-align: center;\n  line-height: 1;\n  margin: 4px 0 6px;\n}\n.ffSurveyScaleMood {\n  text-align: center;\n  font-size: 13px;\n  color: var(--ff-survey-text-muted);\n  margin-bottom: 20px;\n  min-height: 18px;\n}\n.ffSurveyScaleEmojiRow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding: 0 2px;\n}\n.ffSurveyScaleEmoji {\n  font-size: 26px;\n  line-height: 1;\n  opacity: 0.22;\n  transition: opacity 0.15s ease, transform 0.15s ease;\n}\n.ffSurveyScaleEmojiActive {\n  opacity: 1;\n  transform: scale(1.22);\n}\n.ffSurveyScaleStarRow {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 16px;\n  padding: 0 4px;\n  gap: 4px;\n}\n.ffSurveyScaleStar {\n  font-size: 22px;\n  line-height: 1;\n  color: var(--ff-survey-text-muted);\n  opacity: 0.28;\n  transition:\n    opacity 0.15s ease,\n    transform 0.15s ease,\n    color 0.15s ease;\n}\n.ffSurveyScaleStarActive {\n  opacity: 1;\n  color: var(--ff-survey-accent);\n  transform: scale(1.08);\n}\n.ffSurveyScaleRange {\n  width: 100%;\n  height: 4px;\n  -webkit-appearance: none;\n  appearance: none;\n  border-radius: 2px;\n  outline: none;\n  cursor: pointer;\n  box-sizing: border-box;\n}\n.ffSurveyScaleRange::-webkit-slider-thumb {\n  -webkit-appearance: none;\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: var(--ff-survey-accent);\n  border: 3px solid var(--ff-survey-shell-bg);\n  box-shadow: 0 0 0 1.5px var(--ff-survey-accent);\n  cursor: grab;\n  transition: transform 0.1s ease;\n}\n.ffSurveyScaleRange:active::-webkit-slider-thumb {\n  transform: scale(1.12);\n  cursor: grabbing;\n}\n.ffSurveyScaleRange::-moz-range-thumb {\n  width: 22px;\n  height: 22px;\n  border-radius: 50%;\n  background: var(--ff-survey-accent);\n  border: 3px solid var(--ff-survey-shell-bg);\n  box-shadow: 0 0 0 1.5px var(--ff-survey-accent);\n  cursor: grab;\n}\n.ffSurveyScaleRange::-moz-range-track {\n  height: 4px;\n  border-radius: 2px;\n  background: transparent;\n}\n.ffSurveyScaleRangeLabels {\n  display: flex;\n  justify-content: space-between;\n  font-size: 12px;\n  color: var(--ff-survey-text-muted);\n  margin-top: 8px;\n  gap: 12px;\n}\n.ffSurveyScaleRangeLabels span {\n  min-width: 0;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffSurveyScaleEmoji,\n  .ffSurveyScaleStar,\n  .ffSurveyScaleRange::-webkit-slider-thumb {\n    transition: none;\n  }\n}\n.ffSurveyInput {\n  width: 100%;\n  box-sizing: border-box;\n  border: 1px solid var(--ff-survey-border);\n  border-radius: 10px;\n  background: var(--ff-survey-bg-muted);\n  color: var(--ff-survey-text);\n  padding: 12px 14px;\n  font-size: 14px;\n  font-family: inherit;\n}\n.ffSurveyInput::placeholder {\n  color: var(--ff-survey-placeholder);\n}\n.ffSurveyRow {\n  display: flex;\n  gap: 8px;\n  flex-wrap: wrap;\n  margin-top: 12px;\n}\n.ffSurveyFooterBar {\n  display: flex;\n  align-items: center;\n  gap: 12px;\n  flex-wrap: wrap;\n  padding: 11px 16px 11px 20px;\n  background: var(--ff-survey-footer-bg);\n  border-top: 1px solid var(--ff-survey-row-divider);\n}\n.ffSurveyFooterBarStart {\n  flex: 1;\n  min-width: 0;\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: 10px;\n  min-height: 36px;\n}\n.ffSurveyFooterBarEnd {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 10px;\n  flex-shrink: 0;\n}\n.ffSurveySkipButton {\n  background: var(--ff-survey-nav-btn-bg);\n  border: 1px solid var(--ff-survey-nav-btn-border);\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 400;\n  font-family: inherit;\n  color: var(--ff-survey-text);\n  cursor: pointer;\n  white-space: nowrap;\n  flex-shrink: 0;\n  transition: background 0.12s ease;\n}\n.ffSurveySkipButton:hover {\n  background: var(--ff-survey-nav-btn-hover);\n}\n.ffSurveyButton {\n  border: 1px solid var(--ff-survey-border);\n  border-radius: 10px;\n  background: transparent;\n  color: var(--ff-survey-text);\n  padding: 8px 16px;\n  cursor: pointer;\n  font-size: 14px;\n  font-family: inherit;\n}\n.ffSurveyButtonPrimary {\n  background: var(--ff-survey-accent);\n  color: var(--ff-survey-accent-contrast);\n  border-color: var(--ff-survey-accent);\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n}\n.ffSurveyButtonPrimary:disabled {\n  opacity: 0.45;\n  cursor: not-allowed;\n}\n.ffSurveyButtonMuted {\n  color: var(--ff-survey-text-muted);\n  border-color: var(--ff-survey-border);\n  background: transparent;\n}\n.ffSurveyShortcuts {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n  gap: 6px;\n  margin: 0;\n  padding: 0;\n  font-size: 12px;\n  line-height: 1.4;\n  color: var(--ff-survey-shortcuts);\n}\n.ffSurveyShortcutsDot {\n  color: var(--ff-survey-shortcuts-dot);\n  user-select: none;\n}\n.ffSurveyMessage {\n  font-size: 13px;\n  margin-top: 10px;\n  max-width: 660px;\n  width: 100%;\n  text-align: center;\n}\n.ffSurveyError {\n  color: #c44;\n}\n.ffSurveyRoot[data-appearance=dark] .ffSurveyError {\n  color: #f49a9a;\n}\n.ffSurveySuccess {\n  color: #2a7a2a;\n}\n.ffSurveyRoot[data-appearance=dark] .ffSurveySuccess {\n  color: #a3e3a3;\n}\n.ffSurveyTopBarSpacer {\n  flex: 1;\n  min-width: 0;\n}\n.ffSurveyQuestionPanelThankYou {\n  padding: 0;\n}\n.ffSurveyTyRoot {\n  position: relative;\n  overflow: hidden;\n  min-height: 220px;\n  animation: ffSurveyTyEnter 0.35s ease both;\n}\n@keyframes ffSurveyTyEnter {\n  from {\n    opacity: 0;\n    transform: translateY(10px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ffSurveyTyCanvas {\n  position: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n}\n.ffSurveyTyBody {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  padding: 40px 24px 32px;\n  text-align: center;\n  position: relative;\n  z-index: 1;\n}\n.ffSurveyTyIconCircle {\n  width: 68px;\n  height: 68px;\n  border-radius: 50%;\n  background: var(--ff-survey-num-bg);\n  border: 1px solid var(--ff-survey-num-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-bottom: 22px;\n  font-size: 30px;\n  line-height: 1;\n  animation: ffSurveyTyPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both;\n}\n@keyframes ffSurveyTyPop {\n  from {\n    transform: scale(0);\n    opacity: 0;\n  }\n  to {\n    transform: scale(1);\n    opacity: 1;\n  }\n}\n@keyframes ffSurveyTyFadeUp {\n  from {\n    opacity: 0;\n    transform: translateY(8px);\n  }\n  to {\n    opacity: 1;\n    transform: translateY(0);\n  }\n}\n.ffSurveyTyTitle {\n  font-size: 20px;\n  font-weight: 500;\n  color: var(--ff-survey-text);\n  margin: 0 0 10px;\n  line-height: 1.3;\n  max-width: 420px;\n  animation: ffSurveyTyFadeUp 0.3s ease 0.2s both;\n}\n.ffSurveyTySubtitle {\n  font-size: 14px;\n  color: var(--ff-survey-text-muted);\n  line-height: 1.6;\n  max-width: 320px;\n  margin: 0;\n  animation: ffSurveyTyFadeUp 0.3s ease 0.25s both;\n}\n.ffSurveyTyFooter {\n  border-top: 1px solid var(--ff-survey-row-divider);\n  padding: 12px 20px;\n  background: var(--ff-survey-footer-bg);\n  display: flex;\n  justify-content: center;\n  position: relative;\n  z-index: 1;\n}\n.ffSurveyTyDoneBtn {\n  background: var(--ff-survey-accent);\n  color: var(--ff-survey-accent-contrast);\n  border: none;\n  border-radius: 8px;\n  padding: 9px 32px;\n  font-size: 14px;\n  font-weight: 400;\n  font-family: inherit;\n  cursor: pointer;\n  white-space: nowrap;\n  transition: opacity 0.12s ease;\n  animation: ffSurveyTyFadeUp 0.3s ease 0.3s both;\n}\n.ffSurveyTyDoneBtn:hover:not(:disabled) {\n  opacity: 0.88;\n}\n.ffSurveyTyDoneBtn:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffSurveyTyRoot {\n    animation: none;\n  }\n  .ffSurveyTyIconCircle,\n  .ffSurveyTyTitle,\n  .ffSurveyTySubtitle,\n  .ffSurveyTyDoneBtn {\n    animation: none;\n  }\n}\n');
+
+// src/components/Survey.tsx
+import { Fragment as Fragment2, jsx as jsx2, jsxs } from "react/jsx-runtime";
+var shownImpressionKeys3 = /* @__PURE__ */ new Set();
+var styles = {
+  root: "ffSurveyRoot",
+  shell: "ffSurveyShell",
+  header: "ffSurveyHeader",
+  title: "ffSurveyTitle",
+  step: "ffSurveyStep",
+  topBar: "ffSurveyTopBar",
+  questionTitle: "ffSurveyQuestionTitle",
+  headerControls: "ffSurveyHeaderControls",
+  headerIconBtn: "ffSurveyHeaderIconBtn",
+  questionPanel: "ffSurveyQuestionPanel",
+  questionPanelPadded: "ffSurveyQuestionPanelPadded",
+  question: "ffSurveyQuestion",
+  choices: "ffSurveyChoices",
+  choiceRow: "ffSurveyChoiceRow",
+  choiceNum: "ffSurveyChoiceNum",
+  choiceLabel: "ffSurveyChoiceLabel",
+  choiceActive: "ffSurveyChoiceActive",
+  choiceSelected: "ffSurveyChoiceSelected",
+  scaleBody: "ffSurveyScaleBody",
+  scaleSliderWrap: "ffSurveyScaleSliderWrap",
+  scaleBubble: "ffSurveyScaleBubble",
+  scaleBigNum: "ffSurveyScaleBigNum",
+  scaleMood: "ffSurveyScaleMood",
+  scaleEmojiRow: "ffSurveyScaleEmojiRow",
+  scaleEmoji: "ffSurveyScaleEmoji",
+  scaleEmojiActive: "ffSurveyScaleEmojiActive",
+  scaleStarRow: "ffSurveyScaleStarRow",
+  scaleStar: "ffSurveyScaleStar",
+  scaleStarActive: "ffSurveyScaleStarActive",
+  scaleRange: "ffSurveyScaleRange",
+  scaleRangeLabels: "ffSurveyScaleRangeLabels",
+  input: "ffSurveyInput",
+  row: "ffSurveyRow",
+  footerBar: "ffSurveyFooterBar",
+  footerBarStart: "ffSurveyFooterBarStart",
+  footerBarEnd: "ffSurveyFooterBarEnd",
+  button: "ffSurveyButton",
+  buttonPrimary: "ffSurveyButtonPrimary",
+  buttonMuted: "ffSurveyButtonMuted",
+  skipButton: "ffSurveySkipButton",
+  shortcuts: "ffSurveyShortcuts",
+  shortcutsDot: "ffSurveyShortcutsDot",
+  message: "ffSurveyMessage",
+  error: "ffSurveyError",
+  success: "ffSurveySuccess",
+  topBarSpacer: "ffSurveyTopBarSpacer",
+  questionPanelThankYou: "ffSurveyQuestionPanelThankYou",
+  tyRoot: "ffSurveyTyRoot",
+  tyCanvas: "ffSurveyTyCanvas",
+  tyBody: "ffSurveyTyBody",
+  tyIconCircle: "ffSurveyTyIconCircle",
+  tyTitle: "ffSurveyTyTitle",
+  tySubtitle: "ffSurveyTySubtitle",
+  tyFooter: "ffSurveyTyFooter",
+  tyDoneBtn: "ffSurveyTyDoneBtn"
+};
+var THANK_YOU_DEFAULT_SUBTITLE = "Your feedback means a lot. We'll use it to make things better.";
+var THANK_YOU_CONFETTI_COLORS = [
+  "#1a1a1a",
+  "#888888",
+  "#c4c4c4",
+  "#5dcaa5",
+  "#7f77dd",
+  "#ef9f27",
+  "#d4537e"
+];
+function launchThankYouConfetti(canvas, colors) {
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return () => {
+  };
+  const c = ctx;
+  const W = canvas.offsetWidth;
+  const H = canvas.offsetHeight;
+  if (W < 16 || H < 16) return () => {
+  };
+  canvas.width = W;
+  canvas.height = H;
+  const pieces = Array.from({ length: 80 }, () => ({
+    x: W / 2 + (Math.random() - 0.5) * 60,
+    y: H / 2,
+    vx: (Math.random() - 0.5) * 9,
+    vy: -Math.random() * 11 - 4,
+    size: Math.random() * 7 + 3,
+    color: colors[Math.floor(Math.random() * colors.length)] ?? colors[0],
+    rot: Math.random() * 360,
+    vrot: (Math.random() - 0.5) * 14,
+    gravity: 0.3,
+    alpha: 1,
+    shape: Math.random() > 0.5 ? "rect" : "circle"
+  }));
+  let rafId = 0;
+  function draw() {
+    c.clearRect(0, 0, W, H);
+    let anyAlive = false;
+    for (const p of pieces) {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.vy += p.gravity;
+      p.rot += p.vrot;
+      p.alpha -= 0.011;
+      if (p.alpha > 0) anyAlive = true;
+      c.save();
+      c.globalAlpha = Math.max(0, p.alpha);
+      c.translate(p.x, p.y);
+      c.rotate(p.rot * Math.PI / 180);
+      c.fillStyle = p.color;
+      if (p.shape === "rect") {
+        c.fillRect(-p.size / 2, -p.size / 4, p.size, p.size / 2);
+      } else {
+        c.beginPath();
+        c.arc(0, 0, p.size / 2, 0, Math.PI * 2);
+        c.fill();
+      }
+      c.restore();
+    }
+    if (anyAlive) {
+      rafId = requestAnimationFrame(draw);
+    } else {
+      c.clearRect(0, 0, W, H);
+    }
+  }
+  rafId = requestAnimationFrame(draw);
+  return () => cancelAnimationFrame(rafId);
+}
+function ThankYouStep({
+  question,
+  showDone,
+  onDone,
+  disabled
+}) {
+  const canvasRef = useRef3(null);
+  const cleanupRef = useRef3(null);
+  const title = question.questionText?.trim() || "Thank you!";
+  const subtitle = question.placeholder?.trim() || THANK_YOU_DEFAULT_SUBTITLE;
+  const confettiOn = question.showConfetti !== false;
+  const fireConfetti = useCallback4(() => {
+    if (!confettiOn || !canvasRef.current) return;
+    cleanupRef.current?.();
+    cleanupRef.current = launchThankYouConfetti(
+      canvasRef.current,
+      THANK_YOU_CONFETTI_COLORS
+    );
+  }, [confettiOn]);
+  useEffect3(() => {
+    if (!confettiOn) return;
+    if (typeof window !== "undefined" && window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      return;
+    }
+    const t = window.setTimeout(fireConfetti, 300);
+    return () => {
+      window.clearTimeout(t);
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+    };
+  }, [confettiOn, fireConfetti, question.id]);
+  const handleDone = () => {
+    fireConfetti();
+    onDone();
+  };
+  return /* @__PURE__ */ jsxs("div", { className: styles.tyRoot, children: [
+    /* @__PURE__ */ jsx2("canvas", { ref: canvasRef, className: styles.tyCanvas, "aria-hidden": true }),
+    /* @__PURE__ */ jsxs("div", { className: styles.tyBody, children: [
+      /* @__PURE__ */ jsx2("div", { className: styles.tyIconCircle, "aria-hidden": true, children: "\u{1F389}" }),
+      /* @__PURE__ */ jsx2("p", { className: styles.tyTitle, children: title }),
+      /* @__PURE__ */ jsx2("p", { className: styles.tySubtitle, children: subtitle })
+    ] }),
+    showDone ? /* @__PURE__ */ jsx2("div", { className: styles.tyFooter, children: /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: styles.tyDoneBtn,
+        onClick: handleDone,
+        disabled,
+        children: "Done"
+      }
+    ) }) : null
+  ] });
+}
+function isChoiceStep(question) {
+  if (!question) return false;
+  return question.type === "multiple_choice" || question.type === "concept_test";
+}
+function isScaleQuestionType(q) {
+  if (!q) return false;
+  return q.type === "nps" || q.type === "opinion_scale" || q.type === "slider";
+}
+var SCALE_MOODS = [
+  "Terrible",
+  "Very bad",
+  "Bad",
+  "Poor",
+  "Below average",
+  "Okay",
+  "Decent",
+  "Good",
+  "Great",
+  "Excellent",
+  "Outstanding"
+];
+var SCALE_EMOJIS = ["\u{1F61E}", "\u{1F615}", "\u{1F610}", "\u{1F642}", "\u{1F604}"];
+var SCALE_STAR_COUNT = 5;
+function readScaleStep(question) {
+  const s = question.step;
+  if (typeof s === "number" && Number.isFinite(s) && s > 0) return s;
+  return 1;
+}
+function snapScaleValue(raw, min, max, step) {
+  const steps = Math.round((raw - min) / step);
+  let v = min + steps * step;
+  if (!Number.isFinite(v)) v = min;
+  const p = 10 ** Math.min(6, decimalsForStep(step));
+  v = Math.round(v * p) / p;
+  return Math.min(max, Math.max(min, v));
+}
+function decimalsForStep(step) {
+  const t = String(step);
+  if (!t.includes(".")) return 0;
+  return t.split(".")[1]?.length ?? 0;
+}
+function formatScaleDisplay(value, step) {
+  if (step >= 1 && Number.isInteger(step)) return String(Math.round(value));
+  const d = Math.min(4, decimalsForStep(step) || 2);
+  return value.toFixed(d);
+}
+function scaleUiVariant(question) {
+  if (question.scaleType === "emojis") return "emoji";
+  if (question.scaleType === "stars") return "stars";
+  if (question.type === "slider") return "bubble";
+  return "bignumber";
+}
+function moodForScale(value, min, max) {
+  if (max === min) return SCALE_MOODS[5];
+  const t = (value - min) / (max - min);
+  const i = Math.round(t * (SCALE_MOODS.length - 1));
+  return SCALE_MOODS[Math.min(SCALE_MOODS.length - 1, Math.max(0, i))] ?? SCALE_MOODS[5];
+}
+function emojiSlotIndex(value, min, max, len) {
+  if (len <= 0) return 0;
+  if (max === min) return 0;
+  const t = (value - min) / (max - min);
+  return Math.min(len - 1, Math.floor(t * len));
+}
+function starFillUpto(value, min, max) {
+  if (max === min) return 0;
+  const t = (value - min) / (max - min);
+  return Math.min(
+    SCALE_STAR_COUNT - 1,
+    Math.round(t * (SCALE_STAR_COUNT - 1))
+  );
+}
+function IconArrowLeft() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 12,
+      height: 12,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "m12 19-7-7 7-7" }),
+        /* @__PURE__ */ jsx2("path", { d: "M19 12H5" })
+      ]
+    }
+  );
+}
+function IconArrowRight() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 12,
+      height: 12,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx2("path", { d: "M5 12h14" }),
+        /* @__PURE__ */ jsx2("path", { d: "m12 5 7 7-7 7" })
+      ]
+    }
+  );
+}
+function hasValidAnswer2(question, value) {
+  if (question.type === "text_block" || question.type === "thank_you")
+    return true;
+  if (value == null) return false;
+  if (Array.isArray(value)) return value.length > 0;
+  if (typeof value === "number") return Number.isFinite(value);
+  if (typeof value === "string") return value.trim().length > 0;
+  return false;
+}
+function asText(value) {
+  if (typeof value === "string") return value;
+  if (typeof value === "number") return String(value);
+  return "";
+}
+function readScale(question) {
+  const min = Number.isFinite(question.minValue) ? Number(question.minValue) : 0;
+  const max = Number.isFinite(question.maxValue) ? Number(question.maxValue) : 10;
+  return { min, max };
+}
+function isTextEntryElement(target) {
+  if (!(target instanceof HTMLElement)) return false;
+  const tag = target.tagName;
+  if (tag === "TEXTAREA") return true;
+  if (tag === "INPUT") {
+    const type = target.type?.toLowerCase() ?? "";
+    if (type === "checkbox" || type === "radio" || type === "button" || type === "submit")
+      return false;
+    return true;
+  }
+  return target.isContentEditable;
+}
+function renderScaleInput(question, answer, setAnswer) {
+  const { min, max } = readScale(question);
+  const step = readScaleStep(question);
+  const value = typeof answer === "number" && Number.isFinite(answer) ? snapScaleValue(answer, min, max, step) : min;
+  const pct = max === min ? 100 : (value - min) / (max - min) * 100;
+  const trackBackground = `linear-gradient(to right, var(--ff-survey-accent) 0%, var(--ff-survey-accent) ${pct}%, var(--ff-survey-range-track-mute) ${pct}%, var(--ff-survey-range-track-mute) 100%)`;
+  const variant = scaleUiVariant(question);
+  const minCap = (question.minLabel?.trim() || "").length > 0 ? question.minLabel : String(min);
+  const maxCap = (question.maxLabel?.trim() || "").length > 0 ? question.maxLabel : String(max);
+  const rangeInput = /* @__PURE__ */ jsx2(
+    "input",
+    {
+      className: styles.scaleRange,
+      type: "range",
+      min,
+      max,
+      step,
+      value,
+      "aria-valuemin": min,
+      "aria-valuemax": max,
+      "aria-valuenow": value,
+      style: { background: trackBackground },
+      onChange: (e) => {
+        const v = snapScaleValue(Number(e.target.value), min, max, step);
+        setAnswer(question.id, v);
+      }
+    }
+  );
+  let body;
+  if (variant === "bubble") {
+    body = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsxs("div", { className: styles.scaleSliderWrap, children: [
+        /* @__PURE__ */ jsx2("div", { className: styles.scaleBubble, style: { left: `${pct}%` }, children: formatScaleDisplay(value, step) }),
+        rangeInput
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: styles.scaleRangeLabels, children: [
+        /* @__PURE__ */ jsx2("span", { children: minCap }),
+        /* @__PURE__ */ jsx2("span", { children: maxCap })
+      ] })
+    ] });
+  } else if (variant === "bignumber") {
+    body = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx2("div", { className: styles.scaleBigNum, children: formatScaleDisplay(value, step) }),
+      /* @__PURE__ */ jsx2("div", { className: styles.scaleMood, children: moodForScale(value, min, max) }),
+      rangeInput,
+      /* @__PURE__ */ jsxs("div", { className: styles.scaleRangeLabels, children: [
+        /* @__PURE__ */ jsx2("span", { children: minCap }),
+        /* @__PURE__ */ jsx2("span", { children: maxCap })
+      ] })
+    ] });
+  } else if (variant === "emoji") {
+    const ei = emojiSlotIndex(value, min, max, SCALE_EMOJIS.length);
+    body = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx2("div", { className: styles.scaleEmojiRow, children: SCALE_EMOJIS.map((em, i) => /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: classNames(
+            styles.scaleEmoji,
+            i === ei ? styles.scaleEmojiActive : void 0
+          ),
+          "aria-hidden": true,
+          children: em
+        },
+        em
+      )) }),
+      rangeInput,
+      /* @__PURE__ */ jsxs("div", { className: styles.scaleRangeLabels, children: [
+        /* @__PURE__ */ jsx2("span", { children: minCap }),
+        /* @__PURE__ */ jsx2("span", { children: maxCap })
+      ] })
+    ] });
+  } else {
+    const upto = starFillUpto(value, min, max);
+    body = /* @__PURE__ */ jsxs(Fragment2, { children: [
+      /* @__PURE__ */ jsx2("div", { className: styles.scaleStarRow, children: Array.from({ length: SCALE_STAR_COUNT }, (_, i) => /* @__PURE__ */ jsx2(
+        "span",
+        {
+          className: classNames(
+            styles.scaleStar,
+            i <= upto ? styles.scaleStarActive : void 0
+          ),
+          "aria-hidden": true,
+          children: "\u2605"
+        },
+        i
+      )) }),
+      rangeInput,
+      /* @__PURE__ */ jsxs("div", { className: styles.scaleRangeLabels, children: [
+        /* @__PURE__ */ jsx2("span", { children: minCap }),
+        /* @__PURE__ */ jsx2("span", { children: maxCap })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx2("div", { className: styles.scaleBody, children: body });
+}
+function renderQuestionInput(question, answer, focusedIndex, onFocusedIndexChange, setAnswer, onAfterChoiceSelect) {
+  if (question.type === "text_block" || question.type === "thank_you") {
+    return null;
+  }
+  if (question.type === "multiple_choice" || question.type === "concept_test") {
+    const options = question.options ?? [];
+    return /* @__PURE__ */ jsx2("div", { className: styles.choices, role: "listbox", "aria-label": "Choices", children: options.map((opt, index) => {
+      const selected = answer === opt;
+      const active = focusedIndex === index;
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          "aria-selected": selected,
+          className: classNames(
+            styles.choiceRow,
+            active ? styles.choiceActive : void 0,
+            selected ? styles.choiceSelected : void 0
+          ),
+          onMouseEnter: () => onFocusedIndexChange(index),
+          onClick: () => {
+            if (answer === opt) return;
+            setAnswer(question.id, opt);
+            onAfterChoiceSelect?.();
+          },
+          children: [
+            /* @__PURE__ */ jsx2("span", { className: styles.choiceNum, "aria-hidden": true, children: index + 1 }),
+            /* @__PURE__ */ jsx2("span", { className: styles.choiceLabel, children: opt })
+          ]
+        },
+        `${question.id}:${opt}`
+      );
+    }) });
+  }
+  if (question.type === "nps" || question.type === "opinion_scale" || question.type === "slider") {
+    return renderScaleInput(question, answer, setAnswer);
+  }
+  const multiline = question.multiline === true || question.type === "open_question";
+  if (multiline) {
+    return /* @__PURE__ */ jsx2(
+      "textarea",
+      {
+        className: styles.input,
+        rows: 4,
+        value: asText(answer),
+        placeholder: question.placeholder ?? "Type your answer",
+        onChange: (e) => setAnswer(question.id, e.target.value)
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx2(
+    "input",
+    {
+      className: styles.input,
+      value: asText(answer),
+      placeholder: question.placeholder ?? "Type your answer",
+      onChange: (e) => setAnswer(question.id, e.target.value)
+    }
+  );
+}
+function Survey({
+  experienceId,
+  layout = "paginated",
+  appearance = "auto",
+  conversationId,
+  metadata,
+  onSubmit,
+  onSubmitted,
+  onError,
+  onDismissed,
+  className,
+  classNames: classNameMap
+}) {
+  const firstflow = useFirstflow();
+  const survey = useFirstflowSurvey({
+    experienceId,
+    conversationId,
+    metadata
+  });
+  const {
+    questions,
+    currentIndex,
+    currentQuestion,
+    answers,
+    setAnswer,
+    next,
+    prev,
+    canSubmit,
+    submit,
+    submitted,
+    submitting,
+    error,
+    clearError
+  } = survey;
+  const [focusedChoiceIndex, setFocusedChoiceIndex] = useState2(0);
+  const [resolvedAppearance, setResolvedAppearance] = useState2("dark");
+  const hadSubmittedRef = useRef3(false);
+  const rootRef = useRef3(null);
+  useEffect3(() => {
+    setFocusedChoiceIndex(0);
+  }, [currentQuestion?.id]);
+  useEffect3(() => {
+    if (appearance !== "auto") {
+      setResolvedAppearance(appearance);
+      return;
+    }
+    if (typeof window === "undefined") return;
+    const mq = window.matchMedia("(prefers-color-scheme: light)");
+    const apply = () => setResolvedAppearance(mq.matches ? "light" : "dark");
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appearance]);
+  const agentId = firstflow.agentId;
+  const metadataJson = JSON.stringify(metadata ?? {});
+  useEffect3(() => {
+    const impressionKey = `${agentId}\0${experienceId}\0${conversationId ?? ""}`;
+    if (shownImpressionKeys3.has(impressionKey)) return;
+    shownImpressionKeys3.add(impressionKey);
+    const shownAt = (/* @__PURE__ */ new Date()).toISOString();
+    firstflow.analytics.track(EXPERIENCE_SHOWN, {
+      agent_id: agentId,
+      experience_id: experienceId,
+      experience_type: EXPERIENCE_ANALYTICS_TYPE.SURVEY,
+      survey_id: experienceId,
+      conversation_id: conversationId?.trim() || void 0,
+      shown_at: shownAt,
+      payload: JSON.stringify({
+        experience_id: experienceId,
+        experience_type: EXPERIENCE_ANALYTICS_TYPE.SURVEY,
+        survey_id: experienceId,
+        conversation_id: conversationId?.trim() || void 0,
+        shown_at: shownAt
+      }),
+      metadata: metadataJson
+    });
+  }, [firstflow.analytics, agentId, experienceId, conversationId, metadataJson]);
+  useEffect3(() => {
+    if (error) onError?.(error);
+  }, [error, onError]);
+  useEffect3(() => {
+    if (!submitted || hadSubmittedRef.current) return;
+    hadSubmittedRef.current = true;
+    onSubmit?.(answers);
+    onSubmitted?.();
+  }, [submitted, answers, onSubmit, onSubmitted]);
+  useEffect3(() => {
+    if (!submitted) hadSubmittedRef.current = false;
+  }, [submitted]);
+  const hasQuestions = questions.length > 0;
+  const isLastQuestion = currentIndex >= questions.length - 1;
+  const activeQuestion = currentQuestion;
+  const choiceCount = useMemo7(() => {
+    if (!activeQuestion) return 0;
+    if (activeQuestion.type === "multiple_choice" || activeQuestion.type === "concept_test") {
+      return activeQuestion.options?.length ?? 0;
+    }
+    return 0;
+  }, [activeQuestion]);
+  const canLeaveCurrentStep = activeQuestion != null && (!activeQuestion.required || hasValidAnswer2(activeQuestion, answers[activeQuestion.id] ?? null));
+  const showSkip = layout === "paginated" && !isLastQuestion && !submitted && activeQuestion?.type !== "thank_you" && activeQuestion != null && !activeQuestion.required;
+  const showNextArrow = layout === "paginated" && !isLastQuestion && canLeaveCurrentStep && !submitted;
+  const handleSubmit = useCallback4(async () => {
+    clearError();
+    await submit();
+  }, [clearError, submit]);
+  const skipCurrentQuestion = useCallback4(() => {
+    if (submitted || isLastQuestion || !canLeaveCurrentStep) return;
+    next();
+  }, [submitted, isLastQuestion, canLeaveCurrentStep, next]);
+  const advanceAfterChoiceSelect = useCallback4(() => {
+    if (layout !== "paginated" || isLastQuestion || submitting || submitted) return;
+    next();
+  }, [layout, isLastQuestion, submitting, submitted, next]);
+  const thankYouDone = useCallback4(() => {
+    if (submitted || submitting) return;
+    if (isLastQuestion) void handleSubmit();
+    else next();
+  }, [submitted, submitting, isLastQuestion, handleSubmit, next]);
+  const handleGlobalKeyDown = useCallback4(
+    (event) => {
+      if (submitted) return;
+      if (event.key === "Escape") {
+        if (!showSkip) return;
+        event.preventDefault();
+        event.stopPropagation();
+        skipCurrentQuestion();
+        return;
+      }
+      if (layout !== "paginated" || !activeQuestion) return;
+      const inTextEntry = isTextEntryElement(event.target);
+      if (isScaleQuestionType(activeQuestion) && !inTextEntry) {
+        if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+          const { min, max } = readScale(activeQuestion);
+          const step = readScaleStep(activeQuestion);
+          const curRaw = answers[activeQuestion.id];
+          const cur = typeof curRaw === "number" && Number.isFinite(curRaw) ? snapScaleValue(curRaw, min, max, step) : min;
+          const delta = event.key === "ArrowLeft" ? -step : step;
+          const nv = snapScaleValue(cur + delta, min, max, step);
+          event.preventDefault();
+          event.stopPropagation();
+          if (nv !== cur || curRaw == null) {
+            setAnswer(activeQuestion.id, nv);
+          }
+          return;
+        }
+      }
+      if (event.key === "ArrowLeft" && !inTextEntry) {
+        if (currentIndex <= 0) return;
+        event.preventDefault();
+        event.stopPropagation();
+        prev();
+        return;
+      }
+      if (event.key === "ArrowRight" && !inTextEntry) {
+        if (!showNextArrow) return;
+        event.preventDefault();
+        event.stopPropagation();
+        next();
+        return;
+      }
+      if (inTextEntry && event.key !== "Enter") return;
+      if (event.key === "ArrowDown" && choiceCount > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        setFocusedChoiceIndex((prevIndex) => (prevIndex + 1) % choiceCount);
+        return;
+      }
+      if (event.key === "ArrowUp" && choiceCount > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        setFocusedChoiceIndex(
+          (prevIndex) => (prevIndex - 1 + choiceCount) % choiceCount
+        );
+        return;
+      }
+      if (event.key !== "Enter") return;
+      if (inTextEntry) return;
+      if ((activeQuestion.type === "multiple_choice" || activeQuestion.type === "concept_test") && (activeQuestion.options?.length ?? 0) > 0) {
+        event.preventDefault();
+        event.stopPropagation();
+        setAnswer(
+          activeQuestion.id,
+          activeQuestion.options?.[focusedChoiceIndex] ?? null
+        );
+        advanceAfterChoiceSelect();
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      if (isLastQuestion) void handleSubmit();
+      else next();
+    },
+    [
+      submitted,
+      layout,
+      activeQuestion,
+      showSkip,
+      skipCurrentQuestion,
+      currentIndex,
+      prev,
+      showNextArrow,
+      next,
+      choiceCount,
+      focusedChoiceIndex,
+      setAnswer,
+      answers,
+      isLastQuestion,
+      handleSubmit,
+      advanceAfterChoiceSelect
+    ]
+  );
+  useEffect3(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    el.addEventListener("keydown", handleGlobalKeyDown, true);
+    return () => el.removeEventListener("keydown", handleGlobalKeyDown, true);
+  }, [handleGlobalKeyDown]);
+  if (!hasQuestions) {
+    return /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: rootRef,
+        className: classNames(styles.root, className, classNameMap?.root),
+        "data-appearance": resolvedAppearance,
+        children: /* @__PURE__ */ jsx2("p", { className: styles.question, children: "No survey questions are available for this experience yet." })
+      }
+    );
+  }
+  const showContinue = layout === "paginated" && !isLastQuestion && !submitted && activeQuestion?.type !== "thank_you";
+  const renderPaginationFooter = () => /* @__PURE__ */ jsxs("div", { className: classNames(styles.footerBar, classNameMap?.nav), children: [
+    /* @__PURE__ */ jsx2("div", { className: styles.footerBarStart, children: showSkip ? /* @__PURE__ */ jsx2(
+      "button",
+      {
+        type: "button",
+        className: styles.skipButton,
+        onClick: skipCurrentQuestion,
+        children: "Skip"
+      }
+    ) : null }),
+    /* @__PURE__ */ jsxs("div", { className: styles.footerBarEnd, children: [
+      showContinue ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: classNames(styles.button, styles.buttonPrimary),
+          onClick: next,
+          disabled: !canLeaveCurrentStep || submitting,
+          children: "Continue"
+        }
+      ) : null,
+      isLastQuestion ? /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: classNames(styles.button, styles.buttonPrimary),
+          onClick: () => void handleSubmit(),
+          disabled: !canSubmit || submitting,
+          children: submitting ? "Submitting..." : "Submit"
+        }
+      ) : null
+    ] })
+  ] });
+  const renderShortcuts = () => {
+    if (layout !== "paginated" || submitted) return null;
+    const onThankYou = activeQuestion != null && activeQuestion.type === "thank_you";
+    const onScale = activeQuestion != null && isScaleQuestionType(activeQuestion);
+    const segments = onThankYou ? ["Enter to continue"] : onScale ? ["\u2190 \u2192 to adjust", "Enter to continue"] : ["\u2191\u2193 to navigate", "Enter to select"];
+    if (showSkip) segments.push("Esc to skip");
+    return /* @__PURE__ */ jsx2("div", { className: styles.shortcuts, "aria-hidden": true, children: segments.map((text, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      i > 0 ? /* @__PURE__ */ jsx2("span", { className: styles.shortcutsDot, children: "\xB7" }) : null,
+      /* @__PURE__ */ jsx2("span", { children: text })
+    ] }, text)) });
+  };
+  const renderQuestion = (question, index) => /* @__PURE__ */ jsxs("section", { children: [
+    /* @__PURE__ */ jsxs("div", { className: styles.header, children: [
+      /* @__PURE__ */ jsx2("h3", { className: styles.title, children: "Survey" }),
+      /* @__PURE__ */ jsxs("span", { className: styles.step, children: [
+        index + 1,
+        " of ",
+        questions.length
+      ] })
+    ] }),
+    question.type !== "thank_you" ? /* @__PURE__ */ jsx2("p", { className: classNames(styles.question, classNameMap?.question), children: question.questionText || "Untitled question" }) : null,
+    question.type === "thank_you" ? /* @__PURE__ */ jsx2(
+      ThankYouStep,
+      {
+        question,
+        showDone: false,
+        onDone: () => {
+        }
+      }
+    ) : renderQuestionInput(
+      question,
+      answers[question.id] ?? null,
+      focusedChoiceIndex,
+      setFocusedChoiceIndex,
+      setAnswer
+    )
+  ] }, question.id);
+  const paginatedHeader = activeQuestion ? /* @__PURE__ */ jsxs("div", { className: styles.topBar, children: [
+    activeQuestion.type === "thank_you" ? /* @__PURE__ */ jsx2("div", { className: styles.topBarSpacer, "aria-hidden": true }) : /* @__PURE__ */ jsx2("h3", { className: styles.questionTitle, children: activeQuestion.questionText || "Untitled question" }),
+    /* @__PURE__ */ jsxs("div", { className: styles.headerControls, children: [
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: styles.headerIconBtn,
+          onClick: prev,
+          disabled: currentIndex === 0 || submitting,
+          "aria-label": "Previous question",
+          children: /* @__PURE__ */ jsx2(IconArrowLeft, {})
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: styles.step, children: [
+        currentIndex + 1,
+        " of ",
+        questions.length
+      ] }),
+      /* @__PURE__ */ jsx2(
+        "button",
+        {
+          type: "button",
+          className: styles.headerIconBtn,
+          onClick: next,
+          disabled: isLastQuestion || !showNextArrow || submitting,
+          "aria-label": "Next question",
+          children: /* @__PURE__ */ jsx2(IconArrowRight, {})
+        }
+      )
+    ] })
+  ] }) : null;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: classNames(styles.root, className, classNameMap?.root),
+      "data-appearance": resolvedAppearance,
+      tabIndex: -1,
+      "aria-label": "Firstflow survey",
+      children: [
+        layout === "all" ? questions.map((question, index) => renderQuestion(question, index)) : activeQuestion ? /* @__PURE__ */ jsxs(Fragment2, { children: [
+          /* @__PURE__ */ jsxs("div", { className: styles.shell, children: [
+            paginatedHeader,
+            /* @__PURE__ */ jsx2(
+              "div",
+              {
+                className: classNames(
+                  styles.questionPanel,
+                  activeQuestion.type === "thank_you" ? styles.questionPanelThankYou : isChoiceStep(activeQuestion) ? void 0 : styles.questionPanelPadded
+                ),
+                children: activeQuestion.type === "thank_you" ? /* @__PURE__ */ jsx2(
+                  ThankYouStep,
+                  {
+                    question: activeQuestion,
+                    showDone: true,
+                    onDone: thankYouDone,
+                    disabled: submitting
+                  }
+                ) : renderQuestionInput(
+                  activeQuestion,
+                  answers[activeQuestion.id] ?? null,
+                  focusedChoiceIndex,
+                  setFocusedChoiceIndex,
+                  setAnswer,
+                  advanceAfterChoiceSelect
+                )
+              },
+              activeQuestion.id
+            ),
+            activeQuestion.type === "thank_you" ? null : renderPaginationFooter()
+          ] }),
+          renderShortcuts()
+        ] }) : null,
+        layout === "all" ? /* @__PURE__ */ jsxs("div", { className: classNames(styles.row, classNameMap?.nav), children: [
+          onDismissed ? /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: classNames(styles.button, styles.buttonMuted),
+              onClick: onDismissed,
+              children: "Skip"
+            }
+          ) : null,
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              className: classNames(styles.button, styles.buttonPrimary),
+              onClick: () => void handleSubmit(),
+              disabled: !canSubmit || submitting,
+              children: submitting ? "Submitting..." : "Submit"
+            }
+          )
+        ] }) : null,
+        error ? /* @__PURE__ */ jsx2(
+          "p",
+          {
+            className: classNames(
+              styles.message,
+              styles.error,
+              classNameMap?.error
+            ),
+            children: error
+          }
+        ) : null,
+        submitted ? /* @__PURE__ */ jsx2(
+          "p",
+          {
+            className: classNames(
+              styles.message,
+              styles.success,
+              classNameMap?.success
+            ),
+            children: "Thanks for your feedback."
+          }
+        ) : null
+      ]
+    }
+  );
+}
+
+// src/components/ExperienceMessageCard.tsx
+import { useCallback as useCallback5, useEffect as useEffect4, useMemo as useMemo8, useRef as useRef4, useState as useState3 } from "react";
+
+// src/components/ExperienceMessageCard.css
+styleInject('.ffMessageCardRoot[data-appearance=dark] {\n  --ff-msg-shell-bg: #1e1e1e;\n  --ff-msg-border: #3a3a3a;\n  --ff-msg-border-subtle: #2f2f2f;\n  --ff-msg-text: #f3f3f3;\n  --ff-msg-text-muted: #a8a8a8;\n  --ff-msg-footer-bg: #252525;\n  --ff-msg-accent: #ffffff;\n  --ff-msg-accent-contrast: #121212;\n  --ff-msg-icon-border: #404040;\n  --ff-msg-dismiss-hover: #2a2a2a;\n  --ff-msg-ghost-hover: #2a2a2a;\n  --ff-msg-icon-bg: color-mix(in srgb, var(--ff-msg-accent) 16%, #1e1e1e);\n  --ff-msg-shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.ffMessageCardRoot[data-appearance=light] {\n  --ff-msg-shell-bg: #ffffff;\n  --ff-msg-border: #e5e5e5;\n  --ff-msg-border-subtle: #eeeeee;\n  --ff-msg-text: #1a1a1a;\n  --ff-msg-text-muted: #888888;\n  --ff-msg-footer-bg: #f5f5f5;\n  --ff-msg-accent: #1a1a1a;\n  --ff-msg-accent-contrast: #ffffff;\n  --ff-msg-icon-border: #e5e5e5;\n  --ff-msg-dismiss-hover: #f0f0f0;\n  --ff-msg-ghost-hover: #f0f0f0;\n  --ff-msg-icon-bg: color-mix(in srgb, var(--ff-msg-accent) 10%, #ffffff);\n  --ff-msg-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ffMessageCardRoot {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--ff-msg-text);\n}\n.ffMessageCardShell {\n  background: var(--ff-msg-shell-bg);\n  border: 1px solid var(--ff-msg-border);\n  border-radius: 14px;\n  overflow: hidden;\n  box-shadow: var(--ff-msg-shell-shadow);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n.ffMessageCardShell.ffMessageCardDismissed {\n  opacity: 0;\n  transform: scale(0.97);\n  pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffMessageCardShell {\n    transition: none;\n  }\n  .ffMessageCardShell.ffMessageCardDismissed {\n    transform: none;\n  }\n}\n.ffMessageCardHead {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: 16px 16px 0;\n  gap: 12px;\n}\n.ffMessageCardHeadLeft {\n  display: flex;\n  align-items: center;\n  gap: 10px;\n  min-width: 0;\n}\n.ffMessageCardIcon {\n  width: 40px;\n  height: 40px;\n  border-radius: 10px;\n  border: 1px solid var(--ff-msg-icon-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 18px;\n  line-height: 1;\n  flex-shrink: 0;\n  background: var(--ff-msg-icon-bg);\n}\n.ffMessageCardHeadText {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n  min-width: 0;\n}\n.ffMessageCardTitle {\n  font-size: 14px;\n  font-weight: 500;\n  color: var(--ff-msg-text);\n  margin: 0;\n  line-height: 1.3;\n}\n.ffMessageCardEyebrow {\n  font-size: 12px;\n  color: var(--ff-msg-text-muted);\n  margin: 0;\n}\n.ffMessageCardDismiss {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--ff-msg-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  flex-shrink: 0;\n  transition: background 0.12s ease, color 0.12s ease;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n  margin: -4px -4px 0 0;\n}\n.ffMessageCardDismiss:hover {\n  background: var(--ff-msg-dismiss-hover);\n  color: var(--ff-msg-text);\n}\n.ffMessageCardBody {\n  padding: 10px 16px 0;\n}\n.ffMessageCardDescription {\n  font-size: 13px;\n  color: var(--ff-msg-text-muted);\n  line-height: 1.6;\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ffMessageCardFooter {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 10px 16px 12px;\n  margin-top: 12px;\n  border-top: 1px solid var(--ff-msg-border-subtle);\n  background: var(--ff-msg-footer-bg);\n}\n.ffMessageCardFooter.ffMessageCardFooter--singleCta {\n  justify-content: center;\n}\n.ffMessageCardBtnPrimary {\n  background: var(--ff-msg-accent);\n  color: var(--ff-msg-accent-contrast);\n  border: none;\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: opacity 0.12s ease;\n  white-space: nowrap;\n}\n.ffMessageCardBtnPrimary:hover {\n  opacity: 0.88;\n}\n.ffMessageCardBtnPrimary:disabled {\n  opacity: 0.5;\n  cursor: not-allowed;\n}\n.ffMessageCardBtnGhost {\n  background: transparent;\n  border: 1px solid var(--ff-msg-border);\n  border-radius: 8px;\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  cursor: pointer;\n  font-family: inherit;\n  color: var(--ff-msg-text);\n  transition: background 0.12s ease;\n  white-space: nowrap;\n}\n.ffMessageCardBtnGhost:hover {\n  background: var(--ff-msg-ghost-hover);\n}\n');
+
+// src/components/ExperienceMessageCard.tsx
+import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+var DISMISS_MS = 260;
+var styles2 = {
+  root: "ffMessageCardRoot",
+  shell: "ffMessageCardShell",
+  shellDismissed: "ffMessageCardDismissed",
+  head: "ffMessageCardHead",
+  headLeft: "ffMessageCardHeadLeft",
+  icon: "ffMessageCardIcon",
+  headText: "ffMessageCardHeadText",
+  title: "ffMessageCardTitle",
+  eyebrow: "ffMessageCardEyebrow",
+  dismissBtn: "ffMessageCardDismiss",
+  body: "ffMessageCardBody",
+  description: "ffMessageCardDescription",
+  footer: "ffMessageCardFooter",
+  footerSingleCta: "ffMessageCardFooter--singleCta",
+  btnPrimary: "ffMessageCardBtnPrimary",
+  btnGhost: "ffMessageCardBtnGhost"
+};
+function splitCardContent(messageContent) {
+  const raw = messageContent?.trim() ?? "";
+  if (!raw) {
+    return { title: "Message", eyebrow: "", description: "" };
+  }
+  const lines = raw.split("\n");
+  const first = lines[0]?.trim() || "Message";
+  if (lines.length === 1) {
+    return { title: first, eyebrow: "", description: "" };
+  }
+  const title = first.length > 72 ? `${first.slice(0, 69)}\u2026` : first;
+  const rest = lines.slice(1);
+  const eyebrow = rest[0]?.trim() ?? "";
+  const description = rest.slice(1).join("\n").trim();
+  return { title, eyebrow, description };
+}
+function findPrimaryBlock(blocks) {
+  return blocks.find((b) => b.type === "cta_primary");
+}
+function findDismissBlock(blocks) {
+  return blocks.find((b) => b.type === "cta_dismiss");
+}
+function ExperienceMessageCard({
+  experienceId,
+  nodeId,
+  config,
+  conversationId,
+  metadata,
+  onComplete,
+  appearance = "auto",
+  className,
+  onMessageAction
+}) {
+  const [resolvedAppearance, setResolvedAppearance] = useState3("light");
+  const [dismissed, setDismissed] = useState3(false);
+  const finishingRef = useRef4(false);
+  useEffect4(() => {
+    if (appearance !== "auto") {
+      setResolvedAppearance(appearance);
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setResolvedAppearance(mq.matches ? "dark" : "light");
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appearance]);
+  const { blocks, ui, handlers } = useExperienceMessageNode({
+    config,
+    nodeId,
+    experienceId,
+    conversationId,
+    metadata,
+    onAction: onMessageAction
+  });
+  const { title, eyebrow, description } = useMemo8(
+    () => splitCardContent(config.messageContent),
+    [config.messageContent]
+  );
+  const primaryBlock = useMemo8(() => findPrimaryBlock(blocks), [blocks]);
+  const dismissBlock = useMemo8(() => findDismissBlock(blocks), [blocks]);
+  const primaryAsDismissOnly = !ui.hasPrimaryCta && ui.hasDismissCta;
+  const primaryLabel = primaryAsDismissOnly ? dismissBlock?.label ?? "Dismiss" : primaryBlock?.label ?? "Continue";
+  const ghostLabel = dismissBlock?.label ?? "Dismiss";
+  const finish = useCallback5(() => {
+    if (finishingRef.current) return;
+    finishingRef.current = true;
+    setDismissed(true);
+    window.setTimeout(() => {
+      onComplete();
+    }, DISMISS_MS);
+  }, [onComplete]);
+  const handleHeaderDismiss = useCallback5(() => {
+    if (ui.hasDismissCta) {
+      handlers.onDismissCta();
+    }
+    finish();
+  }, [ui.hasDismissCta, handlers, finish]);
+  const handlePrimary = useCallback5(() => {
+    if (primaryAsDismissOnly) {
+      handlers.onDismissCta();
+      finish();
+      return;
+    }
+    if (!primaryBlock) {
+      finish();
+      return;
+    }
+    handlers.onPrimaryCta();
+    if (primaryBlock.ctaType === "link" && primaryBlock.url) {
+      try {
+        window.open(primaryBlock.url, "_blank", "noopener,noreferrer");
+      } catch {
+      }
+    }
+    finish();
+  }, [primaryAsDismissOnly, primaryBlock, handlers, finish]);
+  const handleGhost = useCallback5(() => {
+    if (ui.hasDismissCta) {
+      handlers.onDismissCta();
+    }
+    finish();
+  }, [ui.hasDismissCta, handlers, finish]);
+  const showFooter = ui.hasPrimaryCta || ui.hasDismissCta;
+  const showGhost = ui.hasPrimaryCta && ui.hasDismissCta;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: classNames(styles2.root, className),
+      "data-appearance": resolvedAppearance,
+      children: /* @__PURE__ */ jsxs2(
+        "div",
+        {
+          className: classNames(
+            styles2.shell,
+            dismissed && styles2.shellDismissed
+          ),
+          children: [
+            /* @__PURE__ */ jsxs2("div", { className: styles2.head, children: [
+              /* @__PURE__ */ jsxs2("div", { className: styles2.headLeft, children: [
+                /* @__PURE__ */ jsx3("div", { className: styles2.icon, "aria-hidden": true, children: "\u{1F4AC}" }),
+                /* @__PURE__ */ jsxs2("div", { className: styles2.headText, children: [
+                  /* @__PURE__ */ jsx3("p", { className: styles2.title, children: title }),
+                  eyebrow ? /* @__PURE__ */ jsx3("p", { className: styles2.eyebrow, children: eyebrow }) : null
+                ] })
+              ] }),
+              /* @__PURE__ */ jsx3(
+                "button",
+                {
+                  type: "button",
+                  className: styles2.dismissBtn,
+                  onClick: handleHeaderDismiss,
+                  "aria-label": "Dismiss",
+                  children: "\u2715"
+                }
+              )
+            ] }),
+            description ? /* @__PURE__ */ jsx3("div", { className: styles2.body, children: /* @__PURE__ */ jsx3("p", { className: styles2.description, children: description }) }) : null,
+            showFooter ? /* @__PURE__ */ jsxs2(
+              "div",
+              {
+                className: classNames(
+                  styles2.footer,
+                  !showGhost && styles2.footerSingleCta
+                ),
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles2.btnPrimary,
+                      onClick: handlePrimary,
+                      children: primaryLabel
+                    }
+                  ),
+                  showGhost ? /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles2.btnGhost,
+                      onClick: handleGhost,
+                      children: ghostLabel
+                    }
+                  ) : null
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ExperienceMessageRichCard.tsx
+import React3, { useCallback as useCallback6, useEffect as useEffect5, useMemo as useMemo9, useRef as useRef5, useState as useState4 } from "react";
+
+// src/components/ExperienceMessageRichCard.css
+styleInject('.ffRichCardRoot[data-appearance=dark] {\n  --ff-rc-shell-bg: #1e1e1e;\n  --ff-rc-border: #3a3a3a;\n  --ff-rc-border-hover: #555555;\n  --ff-rc-border-subtle: #2f2f2f;\n  --ff-rc-text: #f3f3f3;\n  --ff-rc-text-muted: #a8a8a8;\n  --ff-rc-meta-muted: #888888;\n  --ff-rc-footer-bg: #252525;\n  --ff-rc-footer-border: #2e2e2e;\n  --ff-rc-accent: #ffffff;\n  --ff-rc-accent-contrast: #121212;\n  --ff-rc-placeholder-bg: #2a2a2a;\n  --ff-rc-image-border: #333333;\n  --ff-rc-pill-bg: #333333;\n  --ff-rc-pill-text: #e8e8e8;\n  --ff-rc-meta-dot: #444444;\n  --ff-rc-ghost-hover: #2a2a2a;\n  --ff-rc-icon-btn-border: #444444;\n  --ff-rc-icon-btn-color: #888888;\n  --ff-rc-icon-btn-hover-bg: #2a2a2a;\n  --ff-rc-shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.ffRichCardRoot[data-appearance=light] {\n  --ff-rc-shell-bg: #ffffff;\n  --ff-rc-border: #e5e5e5;\n  --ff-rc-border-hover: #c8c8c8;\n  --ff-rc-border-subtle: #eeeeee;\n  --ff-rc-text: #1a1a1a;\n  --ff-rc-text-muted: #888888;\n  --ff-rc-meta-muted: #888888;\n  --ff-rc-footer-bg: #f5f5f5;\n  --ff-rc-footer-border: #eeeeee;\n  --ff-rc-accent: #1a1a1a;\n  --ff-rc-accent-contrast: #ffffff;\n  --ff-rc-placeholder-bg: #f0f0f0;\n  --ff-rc-image-border: #eeeeee;\n  --ff-rc-pill-bg: #f0f0f0;\n  --ff-rc-pill-text: #444444;\n  --ff-rc-meta-dot: #d0d0d0;\n  --ff-rc-ghost-hover: #f0f0f0;\n  --ff-rc-icon-btn-border: #e0e0e0;\n  --ff-rc-icon-btn-color: #888888;\n  --ff-rc-icon-btn-hover-bg: #f0f0f0;\n  --ff-rc-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ffRichCardRoot {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--ff-rc-text);\n}\n.ffRichCardShell {\n  background: var(--ff-rc-shell-bg);\n  border: 1px solid var(--ff-rc-border);\n  border-radius: 14px;\n  overflow: hidden;\n  box-shadow: var(--ff-rc-shell-shadow);\n  transition:\n    border-color 0.15s ease,\n    opacity 0.25s ease,\n    transform 0.25s ease;\n}\n.ffRichCardShell:hover {\n  border-color: var(--ff-rc-border-hover);\n}\n.ffRichCardShell.ffRichCardDismissed {\n  opacity: 0;\n  transform: scale(0.97);\n  pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffRichCardShell {\n    transition: border-color 0.15s ease, opacity 0.15s ease;\n  }\n  .ffRichCardShell.ffRichCardDismissed {\n    transform: none;\n  }\n}\n.ffRichCardImage {\n  width: 100%;\n  height: 140px;\n  object-fit: cover;\n  display: block;\n  border: none;\n  border-bottom: 1px solid var(--ff-rc-image-border);\n}\n.ffRichCardImagePlaceholder {\n  width: 100%;\n  height: 140px;\n  background: var(--ff-rc-placeholder-bg);\n  border-bottom: 1px solid var(--ff-rc-image-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 44px;\n  line-height: 1;\n}\n.ffRichCardBody {\n  padding: 14px 14px 0;\n}\n.ffRichCardTags {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n  margin-bottom: 8px;\n}\n.ffRichCardPill {\n  display: inline-flex;\n  align-items: center;\n  font-size: 11px;\n  font-weight: 500;\n  padding: 3px 8px;\n  border-radius: 999px;\n  white-space: nowrap;\n  line-height: 1.4;\n  background: var(--ff-rc-pill-bg);\n  color: var(--ff-rc-pill-text);\n}\n.ffRichCardTitle {\n  font-size: 15px;\n  font-weight: 500;\n  color: var(--ff-rc-text);\n  margin: 0 0 6px;\n  line-height: 1.35;\n}\n.ffRichCardDescription {\n  font-size: 13px;\n  color: var(--ff-rc-text-muted);\n  line-height: 1.6;\n  margin: 0 0 10px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ffRichCardMeta {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  flex-wrap: wrap;\n}\n.ffRichCardMetaItem {\n  display: inline-flex;\n  align-items: center;\n  gap: 4px;\n  font-size: 12px;\n  color: var(--ff-rc-meta-muted);\n}\n.ffRichCardMetaDot {\n  width: 3px;\n  height: 3px;\n  border-radius: 50%;\n  background: var(--ff-rc-meta-dot);\n  flex-shrink: 0;\n}\n.ffRichCardFooter {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 10px 14px 12px;\n  margin-top: 12px;\n  border-top: 1px solid var(--ff-rc-footer-border);\n  background: var(--ff-rc-footer-bg);\n}\n.ffRichCardFooter.ffRichCardFooter--singleCta {\n  justify-content: center;\n  position: relative;\n}\n.ffRichCardFooter.ffRichCardFooter--singleCta .ffRichCardBtnIconDismiss {\n  position: absolute;\n  right: 14px;\n  top: 50%;\n  transform: translateY(-50%);\n  margin-left: 0;\n}\n.ffRichCardBtnPrimary {\n  background: var(--ff-rc-accent);\n  color: var(--ff-rc-accent-contrast);\n  border: none;\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: opacity 0.12s ease;\n  white-space: nowrap;\n}\n.ffRichCardBtnPrimary:hover {\n  opacity: 0.88;\n}\n.ffRichCardBtnGhost {\n  background: transparent;\n  border: 1px solid var(--ff-rc-border);\n  border-radius: 8px;\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  cursor: pointer;\n  font-family: inherit;\n  color: var(--ff-rc-text);\n  transition: background 0.12s ease;\n  white-space: nowrap;\n}\n.ffRichCardBtnGhost:hover {\n  background: var(--ff-rc-ghost-hover);\n}\n.ffRichCardBtnIconDismiss {\n  background: transparent;\n  border: 1px solid var(--ff-rc-icon-btn-border);\n  border-radius: 8px;\n  width: 32px;\n  height: 32px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: background 0.12s ease, color 0.12s ease;\n  flex-shrink: 0;\n  font-size: 13px;\n  line-height: 1;\n  color: var(--ff-rc-icon-btn-color);\n  margin-left: auto;\n  padding: 0;\n}\n.ffRichCardBtnIconDismiss:hover {\n  background: var(--ff-rc-icon-btn-hover-bg);\n  color: var(--ff-rc-text);\n}\n');
+
+// src/components/ExperienceMessageRichCard.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var DISMISS_MS2 = 260;
+var DEFAULT_HERO_EMOJI = "\u{1F5BC}\uFE0F";
+var styles3 = {
+  root: "ffRichCardRoot",
+  shell: "ffRichCardShell",
+  shellDismissed: "ffRichCardDismissed",
+  image: "ffRichCardImage",
+  imagePlaceholder: "ffRichCardImagePlaceholder",
+  body: "ffRichCardBody",
+  tags: "ffRichCardTags",
+  pill: "ffRichCardPill",
+  title: "ffRichCardTitle",
+  description: "ffRichCardDescription",
+  meta: "ffRichCardMeta",
+  metaItem: "ffRichCardMetaItem",
+  metaDot: "ffRichCardMetaDot",
+  footer: "ffRichCardFooter",
+  footerSingleCta: "ffRichCardFooter--singleCta",
+  btnPrimary: "ffRichCardBtnPrimary",
+  btnGhost: "ffRichCardBtnGhost",
+  btnIconDismiss: "ffRichCardBtnIconDismiss"
+};
+function richCardTitleAndDescription(config) {
+  const raw = config.messageContent?.trim() ?? "";
+  const explicit = config.richCardTitle?.trim();
+  if (explicit) {
+    return { title: explicit, description: raw };
+  }
+  if (!raw) {
+    return { title: "Message", description: "" };
+  }
+  const lines = raw.split("\n");
+  const first = lines[0]?.trim() || "Message";
+  return {
+    title: first,
+    description: lines.slice(1).join("\n").trim()
+  };
+}
+function findPrimaryBlock2(blocks) {
+  return blocks.find((b) => b.type === "cta_primary");
+}
+function findDismissBlock2(blocks) {
+  return blocks.find((b) => b.type === "cta_dismiss");
+}
+function ExperienceMessageRichCard({
+  experienceId,
+  nodeId,
+  config,
+  conversationId,
+  metadata,
+  onComplete,
+  appearance = "auto",
+  className,
+  onMessageAction
+}) {
+  const [resolvedAppearance, setResolvedAppearance] = useState4("light");
+  const [dismissed, setDismissed] = useState4(false);
+  const finishingRef = useRef5(false);
+  useEffect5(() => {
+    if (appearance !== "auto") {
+      setResolvedAppearance(appearance);
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setResolvedAppearance(mq.matches ? "dark" : "light");
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appearance]);
+  const { blocks, ui, handlers } = useExperienceMessageNode({
+    config,
+    nodeId,
+    experienceId,
+    conversationId,
+    metadata,
+    onAction: onMessageAction
+  });
+  const { title, description } = useMemo9(
+    () => richCardTitleAndDescription(config),
+    [config]
+  );
+  const hero = useMemo9(() => {
+    const mediaType = config.richCardMediaType ?? "image";
+    const href = tryParseHttpImageUrl(config.richCardImageUrl);
+    const useImage = mediaType !== "emoji" && !!href;
+    const emoji = config.richCardEmoji?.trim() || DEFAULT_HERO_EMOJI;
+    return { useImage, imageSrc: href, emoji };
+  }, [config.richCardImageUrl, config.richCardMediaType, config.richCardEmoji]);
+  const tags = config.richCardTags ?? [];
+  const meta = config.richCardMeta ?? [];
+  const primaryBlock = useMemo9(() => findPrimaryBlock2(blocks), [blocks]);
+  const dismissBlock = useMemo9(() => findDismissBlock2(blocks), [blocks]);
+  const primaryAsDismissOnly = !ui.hasPrimaryCta && ui.hasDismissCta;
+  const primaryLabel = primaryAsDismissOnly ? dismissBlock?.label ?? "Dismiss" : primaryBlock?.label ?? "Continue";
+  const ghostLabel = dismissBlock?.label ?? "Dismiss";
+  const finish = useCallback6(() => {
+    if (finishingRef.current) return;
+    finishingRef.current = true;
+    setDismissed(true);
+    window.setTimeout(() => {
+      onComplete();
+    }, DISMISS_MS2);
+  }, [onComplete]);
+  const emitDismissIfConfigured = useCallback6(() => {
+    if (ui.hasDismissCta) {
+      handlers.onDismissCta();
+    }
+  }, [ui.hasDismissCta, handlers]);
+  const handleFooterDismiss = useCallback6(() => {
+    emitDismissIfConfigured();
+    finish();
+  }, [emitDismissIfConfigured, finish]);
+  const handlePrimary = useCallback6(() => {
+    if (primaryAsDismissOnly) {
+      handlers.onDismissCta();
+      finish();
+      return;
+    }
+    if (!primaryBlock) {
+      finish();
+      return;
+    }
+    handlers.onPrimaryCta();
+    if (primaryBlock.ctaType === "link" && primaryBlock.url) {
+      try {
+        window.open(primaryBlock.url, "_blank", "noopener,noreferrer");
+      } catch {
+      }
+    }
+    finish();
+  }, [primaryAsDismissOnly, primaryBlock, handlers, finish]);
+  const handleGhost = useCallback6(() => {
+    emitDismissIfConfigured();
+    finish();
+  }, [emitDismissIfConfigured, finish]);
+  const showPrimary = ui.hasPrimaryCta || primaryAsDismissOnly;
+  const showGhost = ui.hasPrimaryCta && ui.hasDismissCta;
+  return /* @__PURE__ */ jsx4(
+    "div",
+    {
+      className: classNames(styles3.root, className),
+      "data-appearance": resolvedAppearance,
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          className: classNames(
+            styles3.shell,
+            dismissed && styles3.shellDismissed
+          ),
+          children: [
+            hero.useImage && hero.imageSrc ? /* @__PURE__ */ jsx4(
+              "img",
+              {
+                className: styles3.image,
+                src: hero.imageSrc,
+                alt: title ? title : "Card",
+                decoding: "async"
+              }
+            ) : /* @__PURE__ */ jsx4("div", { className: styles3.imagePlaceholder, "aria-hidden": true, children: hero.emoji }),
+            /* @__PURE__ */ jsxs3("div", { className: styles3.body, children: [
+              tags.length > 0 ? /* @__PURE__ */ jsx4("div", { className: styles3.tags, children: tags.map((tag, i) => /* @__PURE__ */ jsx4(
+                "span",
+                {
+                  className: styles3.pill,
+                  style: tag.bg || tag.color ? { background: tag.bg, color: tag.color } : void 0,
+                  children: tag.label
+                },
+                `${tag.label}-${i}`
+              )) }) : null,
+              title ? /* @__PURE__ */ jsx4("p", { className: styles3.title, children: title }) : null,
+              description ? /* @__PURE__ */ jsx4("p", { className: styles3.description, children: description }) : null,
+              meta.length > 0 ? /* @__PURE__ */ jsx4("div", { className: styles3.meta, children: meta.map((item, i) => /* @__PURE__ */ jsxs3(React3.Fragment, { children: [
+                i > 0 ? /* @__PURE__ */ jsx4("span", { className: styles3.metaDot, "aria-hidden": true }) : null,
+                /* @__PURE__ */ jsxs3("span", { className: styles3.metaItem, children: [
+                  item.icon ? /* @__PURE__ */ jsx4("span", { style: { fontSize: 12 }, "aria-hidden": true, children: item.icon }) : null,
+                  item.label
+                ] })
+              ] }, `${item.label}-${i}`)) }) : null
+            ] }),
+            /* @__PURE__ */ jsxs3(
+              "div",
+              {
+                className: classNames(
+                  styles3.footer,
+                  showPrimary && !showGhost && styles3.footerSingleCta
+                ),
+                children: [
+                  showPrimary ? /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles3.btnPrimary,
+                      onClick: handlePrimary,
+                      children: primaryLabel
+                    }
+                  ) : null,
+                  showGhost ? /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles3.btnGhost,
+                      onClick: handleGhost,
+                      children: ghostLabel
+                    }
+                  ) : null,
+                  /* @__PURE__ */ jsx4(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles3.btnIconDismiss,
+                      onClick: handleFooterDismiss,
+                      "aria-label": "Dismiss",
+                      children: "\u2715"
+                    }
+                  )
+                ]
+              }
+            )
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ExperienceMessageCarousel.tsx
+import {
+  useCallback as useCallback7,
+  useEffect as useEffect6,
+  useLayoutEffect,
+  useMemo as useMemo10,
+  useRef as useRef6,
+  useState as useState5
+} from "react";
+
+// src/components/ExperienceMessageCarousel.css
+styleInject('.ffMsgCarouselRoot[data-appearance=dark] {\n  --ff-cc-shell-bg: #1e1e1e;\n  --ff-cc-border: #3a3a3a;\n  --ff-cc-border-hover: #555555;\n  --ff-cc-text: #f3f3f3;\n  --ff-cc-text-muted: #a8a8a8;\n  --ff-cc-footer-bg: #252525;\n  --ff-cc-footer-border: #2e2e2e;\n  --ff-cc-accent: #ffffff;\n  --ff-cc-accent-contrast: #121212;\n  --ff-cc-placeholder-bg: #2a2a2a;\n  --ff-cc-image-border: #333333;\n  --ff-cc-nav-bg: #2a2a2a;\n  --ff-cc-nav-border: #404040;\n  --ff-cc-nav-hover: #333333;\n  --ff-cc-dot: #555555;\n  --ff-cc-dot-active: #f0f0f0;\n  --ff-cc-ghost-hover: #2a2a2a;\n  --ff-cc-icon-dismiss-border: #444444;\n  --ff-cc-icon-dismiss-color: #888888;\n  --ff-cc-icon-dismiss-hover-bg: #2a2a2a;\n  --ff-cc-shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.ffMsgCarouselRoot[data-appearance=light] {\n  --ff-cc-shell-bg: #ffffff;\n  --ff-cc-border: #e5e5e5;\n  --ff-cc-border-hover: #c8c8c8;\n  --ff-cc-text: #1a1a1a;\n  --ff-cc-text-muted: #888888;\n  --ff-cc-footer-bg: #f5f5f5;\n  --ff-cc-footer-border: #eeeeee;\n  --ff-cc-accent: #1a1a1a;\n  --ff-cc-accent-contrast: #ffffff;\n  --ff-cc-placeholder-bg: #f0f0f0;\n  --ff-cc-image-border: #eeeeee;\n  --ff-cc-nav-bg: #ffffff;\n  --ff-cc-nav-border: #e0e0e0;\n  --ff-cc-nav-hover: #f0f0f0;\n  --ff-cc-dot: #cccccc;\n  --ff-cc-dot-active: #1a1a1a;\n  --ff-cc-ghost-hover: #f0f0f0;\n  --ff-cc-icon-dismiss-border: #e0e0e0;\n  --ff-cc-icon-dismiss-color: #888888;\n  --ff-cc-icon-dismiss-hover-bg: #f0f0f0;\n  --ff-cc-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ffMsgCarouselRoot {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--ff-cc-text);\n}\n.ffMsgCarouselIntro {\n  font-size: 13px;\n  line-height: 1.55;\n  color: var(--ff-cc-text-muted);\n  margin: 0 0 10px;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ffMsgCarouselShell {\n  background: var(--ff-cc-shell-bg);\n  border: 1px solid var(--ff-cc-border);\n  border-radius: 14px;\n  overflow: hidden;\n  box-shadow: var(--ff-cc-shell-shadow);\n  transition:\n    border-color 0.15s ease,\n    opacity 0.25s ease,\n    transform 0.25s ease;\n}\n.ffMsgCarouselShell:hover {\n  border-color: var(--ff-cc-border-hover);\n}\n.ffMsgCarouselShell.ffMsgCarouselDismissed {\n  opacity: 0;\n  transform: scale(0.97);\n  pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffMsgCarouselShell {\n    transition: border-color 0.15s ease, opacity 0.15s ease;\n  }\n  .ffMsgCarouselShell.ffMsgCarouselDismissed {\n    transform: none;\n  }\n  .ffMsgCarouselTrack {\n    transition: none !important;\n  }\n}\n.ffMsgCarouselTopBar {\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  padding: 14px 16px 8px;\n  gap: 8px;\n}\n.ffMsgCarouselDismissTop {\n  width: 32px;\n  height: 32px;\n  border: 1px solid var(--ff-cc-icon-dismiss-border);\n  border-radius: 8px;\n  background: transparent;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  font-size: 13px;\n  line-height: 1;\n  color: var(--ff-cc-icon-dismiss-color);\n  padding: 0;\n  transition: background 0.12s ease, color 0.12s ease;\n}\n.ffMsgCarouselDismissTop:hover {\n  background: var(--ff-cc-icon-dismiss-hover-bg);\n  color: var(--ff-cc-text);\n}\n.ffMsgCarouselRow {\n  display: flex;\n  align-items: center;\n  gap: 6px;\n  padding: 0 8px 8px;\n}\n.ffMsgCarouselNav {\n  flex-shrink: 0;\n  width: 32px;\n  height: 32px;\n  min-width: 32px;\n  min-height: 32px;\n  align-self: center;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border: 1px solid var(--ff-cc-nav-border);\n  border-radius: 999px;\n  background: var(--ff-cc-nav-bg);\n  color: var(--ff-cc-text-muted);\n  font-size: 17px;\n  font-weight: 500;\n  line-height: 1;\n  cursor: pointer;\n  padding: 0;\n  transition:\n    background 0.12s ease,\n    color 0.12s ease,\n    border-color 0.12s ease;\n}\n.ffMsgCarouselNav:hover:not(:disabled) {\n  background: var(--ff-cc-nav-hover);\n  color: var(--ff-cc-text);\n  border-color: var(--ff-cc-border-hover);\n}\n.ffMsgCarouselNav:disabled {\n  opacity: 0.35;\n  cursor: not-allowed;\n}\n.ffMsgCarouselViewport {\n  flex: 1;\n  min-width: 0;\n  overflow: hidden;\n  border-radius: 10px;\n  touch-action: pan-x;\n}\n.ffMsgCarouselTrack {\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  align-items: stretch;\n  transition: transform 0.32s cubic-bezier(0.25, 0.8, 0.25, 1);\n  will-change: transform;\n}\n.ffMsgCarouselSlide {\n  flex: 0 0 auto;\n  align-self: stretch;\n  min-width: 0;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  border: 1px solid var(--ff-cc-border);\n  border-radius: 10px;\n  overflow: hidden;\n  background: var(--ff-cc-shell-bg);\n  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);\n}\n.ffMsgCarouselImage {\n  width: 100%;\n  height: 140px;\n  object-fit: cover;\n  display: block;\n  border-bottom: 1px solid var(--ff-cc-image-border);\n}\n.ffMsgCarouselImagePlaceholder {\n  width: 100%;\n  height: 140px;\n  background: var(--ff-cc-placeholder-bg);\n  border-bottom: 1px solid var(--ff-cc-image-border);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 44px;\n  line-height: 1;\n}\n.ffMsgCarouselBody {\n  flex: 1 1 auto;\n  display: flex;\n  flex-direction: column;\n  min-height: 0;\n  padding: 12px 12px 0;\n}\n.ffMsgCarouselTitle {\n  font-size: 15px;\n  font-weight: 500;\n  color: var(--ff-cc-text);\n  margin: 0 0 6px;\n  line-height: 1.35;\n}\n.ffMsgCarouselDescription {\n  font-size: 13px;\n  color: var(--ff-cc-text-muted);\n  line-height: 1.6;\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ffMsgCarouselDots {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 6px;\n  padding: 4px 12px 8px;\n}\n.ffMsgCarouselDot {\n  width: 7px;\n  height: 7px;\n  border-radius: 50%;\n  border: none;\n  padding: 0;\n  cursor: pointer;\n  background: var(--ff-cc-dot);\n  transition: transform 0.15s ease, background 0.15s ease;\n}\n.ffMsgCarouselDot:hover {\n  transform: scale(1.15);\n}\n.ffMsgCarouselDot.ffMsgCarouselDotActive {\n  background: var(--ff-cc-dot-active);\n  transform: scale(1.2);\n}\n.ffMsgCarouselSlideFooter {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 10px 12px 12px;\n  margin-top: auto;\n  flex-shrink: 0;\n  border-top: 1px solid var(--ff-cc-footer-border);\n  background: var(--ff-cc-footer-bg);\n}\n.ffMsgCarouselSlideFooter.ffMsgCarouselSlideFooter--singleCta {\n  justify-content: center;\n}\n.ffMsgCarouselBtnPrimary {\n  background: var(--ff-cc-accent);\n  color: var(--ff-cc-accent-contrast);\n  border: none;\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: opacity 0.12s ease;\n  white-space: nowrap;\n}\n.ffMsgCarouselBtnPrimary:hover {\n  opacity: 0.88;\n}\n.ffMsgCarouselBtnGhost {\n  background: transparent;\n  border: 1px solid var(--ff-cc-border);\n  border-radius: 8px;\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  cursor: pointer;\n  font-family: inherit;\n  color: var(--ff-cc-text);\n  transition: background 0.12s ease;\n  white-space: nowrap;\n}\n.ffMsgCarouselBtnGhost:hover {\n  background: var(--ff-cc-ghost-hover);\n}\n.ffMsgCarouselGlobalFooter {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  margin-top: 10px;\n  padding-bottom: 10px;\n  padding-top: 10px;\n  background: var(--ff-cc-footer-bg);\n  border-top: 1px solid var(--ff-cc-footer-border);\n}\n.ffMsgCarouselGlobalFooter.ffMsgCarouselGlobalFooter--singleCta {\n  justify-content: center;\n}\n');
+
+// src/components/ExperienceMessageCarousel.tsx
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var DISMISS_MS3 = 260;
+var SWIPE_PX = 48;
+var CAROUSEL_CARD_GAP = 8;
+var DEFAULT_HERO_EMOJI2 = "\u{1F5BC}\uFE0F";
+var styles4 = {
+  root: "ffMsgCarouselRoot",
+  intro: "ffMsgCarouselIntro",
+  shell: "ffMsgCarouselShell",
+  shellDismissed: "ffMsgCarouselDismissed",
+  topBar: "ffMsgCarouselTopBar",
+  dismissTop: "ffMsgCarouselDismissTop",
+  row: "ffMsgCarouselRow",
+  nav: "ffMsgCarouselNav",
+  viewport: "ffMsgCarouselViewport",
+  track: "ffMsgCarouselTrack",
+  slide: "ffMsgCarouselSlide",
+  image: "ffMsgCarouselImage",
+  imagePlaceholder: "ffMsgCarouselImagePlaceholder",
+  body: "ffMsgCarouselBody",
+  title: "ffMsgCarouselTitle",
+  description: "ffMsgCarouselDescription",
+  dots: "ffMsgCarouselDots",
+  dot: "ffMsgCarouselDot",
+  dotActive: "ffMsgCarouselDotActive",
+  slideFooter: "ffMsgCarouselSlideFooter",
+  btnPrimary: "ffMsgCarouselBtnPrimary",
+  btnGhost: "ffMsgCarouselBtnGhost",
+  globalFooter: "ffMsgCarouselGlobalFooter",
+  globalFooterSingleCta: "ffMsgCarouselGlobalFooter--singleCta",
+  slideFooterSingleCta: "ffMsgCarouselSlideFooter--singleCta"
+};
+function carouselCardHero(card) {
+  const mt = card.mediaType ?? "image";
+  const href = tryParseHttpImageUrl(card.imageUrl);
+  if (mt === "video") {
+    return {
+      kind: "placeholder",
+      emoji: card.emoji?.trim() || "\u{1F3AC}"
+    };
+  }
+  if (mt !== "emoji" && href) {
+    return { kind: "image", src: href };
+  }
+  return {
+    kind: "placeholder",
+    emoji: card.emoji?.trim() || DEFAULT_HERO_EMOJI2
+  };
+}
+function openCarouselButtonLink(card, which) {
+  const isSecondary = which === "secondary";
+  const action = isSecondary ? card.secondaryButtonAction ?? "prompt" : card.buttonAction ?? "prompt";
+  if (action !== "link") return;
+  const raw = isSecondary ? card.secondaryButtonUrl : card.buttonUrl;
+  const url = typeof raw === "string" ? raw.trim() : "";
+  const safe = tryParseHttpImageUrl(url);
+  if (!safe) return;
+  try {
+    window.open(safe, "_blank", "noopener,noreferrer");
+  } catch {
+  }
+}
+function findTextBlock(blocks) {
+  return blocks.find(
+    (b) => b.type === "text"
+  );
+}
+function findPrimaryBlock3(blocks) {
+  return blocks.find(
+    (b) => b.type === "cta_primary"
+  );
+}
+function findDismissBlock3(blocks) {
+  return blocks.find(
+    (b) => b.type === "cta_dismiss"
+  );
+}
+function cardPrimaryVisible(card) {
+  return card.showCardCta !== false && !!card.buttonText?.trim();
+}
+function cardSecondaryVisible(card) {
+  return card.showCardCta !== false && !!card.secondaryButtonText?.trim();
+}
+function ExperienceMessageCarousel({
+  experienceId,
+  nodeId,
+  config,
+  conversationId,
+  metadata,
+  onComplete,
+  appearance = "auto",
+  className,
+  onMessageAction
+}) {
+  const cards = config.carouselCards ?? [];
+  const n = cards.length;
+  const [resolvedAppearance, setResolvedAppearance] = useState5("light");
+  const [index, setIndex] = useState5(0);
+  const [dismissed, setDismissed] = useState5(false);
+  const finishingRef = useRef6(false);
+  const dragRef = useRef6(null);
+  const rootRef = useRef6(null);
+  const viewportRef = useRef6(null);
+  const [slideW, setSlideW] = useState5(0);
+  const visibleCount = n >= 2 ? 2 : 1;
+  const maxIndex = Math.max(0, n - visibleCount);
+  useLayoutEffect(() => {
+    const el = viewportRef.current;
+    if (!el || n === 0) return;
+    const measure = () => {
+      const w = el.clientWidth;
+      if (w <= 0) return;
+      const vc = n >= 2 ? 2 : 1;
+      setSlideW((w - CAROUSEL_CARD_GAP * (vc - 1)) / vc);
+    };
+    measure();
+    const ro = new ResizeObserver(() => measure());
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [n]);
+  useEffect6(() => {
+    if (appearance !== "auto") {
+      setResolvedAppearance(appearance);
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setResolvedAppearance(mq.matches ? "dark" : "light");
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appearance]);
+  useEffect6(() => {
+    const vis = n >= 2 ? 2 : 1;
+    const maxI = Math.max(0, n - vis);
+    setIndex((i) => Math.min(i, maxI));
+  }, [n]);
+  const { blocks, ui, handlers } = useExperienceMessageNode({
+    config,
+    nodeId,
+    experienceId,
+    conversationId,
+    metadata,
+    onAction: onMessageAction
+  });
+  const intro = useMemo10(() => {
+    const b = findTextBlock(blocks);
+    return b?.body.trim() ?? "";
+  }, [blocks]);
+  const primaryBlock = useMemo10(() => findPrimaryBlock3(blocks), [blocks]);
+  const dismissBlock = useMemo10(() => findDismissBlock3(blocks), [blocks]);
+  const primaryAsDismissOnly = !ui.hasPrimaryCta && ui.hasDismissCta;
+  const globalPrimaryLabel = primaryAsDismissOnly ? dismissBlock?.label ?? "Dismiss" : primaryBlock?.label ?? "Continue";
+  const globalGhostLabel = dismissBlock?.label ?? "Dismiss";
+  const showGlobalPrimary = ui.hasPrimaryCta || primaryAsDismissOnly;
+  const showGlobalGhost = ui.hasPrimaryCta && ui.hasDismissCta;
+  const showGlobalFooter = showGlobalPrimary || showGlobalGhost;
+  const finish = useCallback7(() => {
+    if (finishingRef.current) return;
+    finishingRef.current = true;
+    setDismissed(true);
+    window.setTimeout(() => {
+      onComplete();
+    }, DISMISS_MS3);
+  }, [onComplete]);
+  const emitDismissIfConfigured = useCallback7(() => {
+    if (ui.hasDismissCta) {
+      handlers.onDismissCta();
+    }
+  }, [ui.hasDismissCta, handlers]);
+  const handleShellDismiss = useCallback7(() => {
+    emitDismissIfConfigured();
+    finish();
+  }, [emitDismissIfConfigured, finish]);
+  const handleGlobalPrimary = useCallback7(() => {
+    if (primaryAsDismissOnly) {
+      handlers.onDismissCta();
+      finish();
+      return;
+    }
+    if (!primaryBlock) {
+      finish();
+      return;
+    }
+    handlers.onPrimaryCta();
+    if (primaryBlock.ctaType === "link" && primaryBlock.url) {
+      const safe = tryParseHttpImageUrl(primaryBlock.url);
+      if (safe) {
+        try {
+          window.open(safe, "_blank", "noopener,noreferrer");
+        } catch {
+        }
+      }
+    }
+    finish();
+  }, [primaryAsDismissOnly, primaryBlock, handlers, finish]);
+  const handleGlobalGhost = useCallback7(() => {
+    emitDismissIfConfigured();
+    finish();
+  }, [emitDismissIfConfigured, finish]);
+  const goPrev = useCallback7(() => {
+    setIndex((i) => Math.max(0, i - 1));
+  }, []);
+  const goNext = useCallback7(() => {
+    setIndex((i) => Math.min(maxIndex, i + 1));
+  }, [maxIndex]);
+  const handleCardPrimary = useCallback7(
+    (card) => {
+      handlers.onCarouselCta(card.id, "primary");
+      openCarouselButtonLink(card, "primary");
+      finish();
+    },
+    [handlers, finish]
+  );
+  const handleCardSecondary = useCallback7(
+    (card) => {
+      handlers.onCarouselCta(card.id, "secondary");
+      openCarouselButtonLink(card, "secondary");
+      finish();
+    },
+    [handlers, finish]
+  );
+  useEffect6(() => {
+    const el = rootRef.current;
+    if (!el) return;
+    const onKey = (e) => {
+      if (e.key === "ArrowLeft") {
+        e.preventDefault();
+        goPrev();
+      } else if (e.key === "ArrowRight") {
+        e.preventDefault();
+        goNext();
+      }
+    };
+    el.addEventListener("keydown", onKey);
+    return () => el.removeEventListener("keydown", onKey);
+  }, [goPrev, goNext]);
+  const onPointerDown = useCallback7((e) => {
+    dragRef.current = { x: e.clientX, pid: e.pointerId };
+  }, []);
+  const endDrag = useCallback7(
+    (e) => {
+      const d = dragRef.current;
+      dragRef.current = null;
+      if (!d || e.pointerId !== d.pid) return;
+      const dx = e.clientX - d.x;
+      if (dx < -SWIPE_PX) goNext();
+      else if (dx > SWIPE_PX) goPrev();
+    },
+    [goNext, goPrev]
+  );
+  const trackWidthPx = slideW > 0 ? n * slideW + Math.max(0, n - 1) * CAROUSEL_CARD_GAP : void 0;
+  const translateXPx = slideW > 0 ? index * (slideW + CAROUSEL_CARD_GAP) : 0;
+  if (n === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs4(
+    "div",
+    {
+      ref: rootRef,
+      className: classNames(styles4.root, className),
+      "data-appearance": resolvedAppearance,
+      tabIndex: 0,
+      role: "region",
+      "aria-roledescription": "carousel",
+      "aria-label": "Promotional carousel",
+      children: [
+        intro ? /* @__PURE__ */ jsx5("p", { className: styles4.intro, children: intro }) : null,
+        /* @__PURE__ */ jsxs4(
+          "div",
+          {
+            className: classNames(styles4.shell, dismissed && styles4.shellDismissed),
+            children: [
+              /* @__PURE__ */ jsx5("div", { className: styles4.topBar, children: /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  className: styles4.dismissTop,
+                  onClick: handleShellDismiss,
+                  "aria-label": "Dismiss",
+                  children: "\u2715"
+                }
+              ) }),
+              /* @__PURE__ */ jsxs4("div", { className: styles4.row, children: [
+                maxIndex > 0 ? /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles4.nav,
+                    onClick: goPrev,
+                    disabled: index <= 0,
+                    "aria-label": "Previous slide",
+                    children: "\u2039"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx5(
+                  "div",
+                  {
+                    ref: viewportRef,
+                    className: styles4.viewport,
+                    onPointerDown,
+                    onPointerUp: endDrag,
+                    onPointerCancel: endDrag,
+                    onPointerLeave: (e) => {
+                      if (dragRef.current?.pid === e.pointerId) {
+                        dragRef.current = null;
+                      }
+                    },
+                    children: /* @__PURE__ */ jsx5(
+                      "div",
+                      {
+                        className: styles4.track,
+                        style: {
+                          gap: CAROUSEL_CARD_GAP,
+                          ...trackWidthPx != null ? {
+                            width: trackWidthPx,
+                            transform: `translateX(-${translateXPx}px)`
+                          } : { width: "100%" }
+                        },
+                        children: cards.map((card, i) => {
+                          const hero = carouselCardHero(card);
+                          const title = card.title?.trim() || "Card";
+                          const desc = card.description?.trim() ?? "";
+                          const inView = i >= index && i < index + visibleCount;
+                          return /* @__PURE__ */ jsxs4(
+                            "div",
+                            {
+                              className: styles4.slide,
+                              style: slideW > 0 ? { width: slideW, flex: "0 0 auto" } : { flex: "1 1 0", minWidth: 0 },
+                              "aria-hidden": !inView,
+                              children: [
+                                hero.kind === "image" ? /* @__PURE__ */ jsx5(
+                                  "img",
+                                  {
+                                    className: styles4.image,
+                                    src: hero.src,
+                                    alt: title,
+                                    decoding: "async"
+                                  }
+                                ) : /* @__PURE__ */ jsx5("div", { className: styles4.imagePlaceholder, "aria-hidden": true, children: hero.emoji }),
+                                /* @__PURE__ */ jsxs4("div", { className: styles4.body, children: [
+                                  /* @__PURE__ */ jsx5("p", { className: styles4.title, children: title }),
+                                  desc ? /* @__PURE__ */ jsx5("p", { className: styles4.description, children: desc }) : null
+                                ] }),
+                                cardPrimaryVisible(card) || cardSecondaryVisible(card) ? /* @__PURE__ */ jsxs4(
+                                  "div",
+                                  {
+                                    className: classNames(
+                                      styles4.slideFooter,
+                                      cardPrimaryVisible(card) !== cardSecondaryVisible(card) && styles4.slideFooterSingleCta
+                                    ),
+                                    children: [
+                                      cardPrimaryVisible(card) ? /* @__PURE__ */ jsx5(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          className: styles4.btnPrimary,
+                                          onClick: () => handleCardPrimary(card),
+                                          children: card.buttonText.trim()
+                                        }
+                                      ) : null,
+                                      cardSecondaryVisible(card) ? /* @__PURE__ */ jsx5(
+                                        "button",
+                                        {
+                                          type: "button",
+                                          className: styles4.btnGhost,
+                                          onClick: () => handleCardSecondary(card),
+                                          children: card.secondaryButtonText.trim()
+                                        }
+                                      ) : null
+                                    ]
+                                  }
+                                ) : null
+                              ]
+                            },
+                            card.id
+                          );
+                        })
+                      }
+                    )
+                  }
+                ),
+                maxIndex > 0 ? /* @__PURE__ */ jsx5(
+                  "button",
+                  {
+                    type: "button",
+                    className: styles4.nav,
+                    onClick: goNext,
+                    disabled: index >= maxIndex,
+                    "aria-label": "Next slide",
+                    children: "\u203A"
+                  }
+                ) : null
+              ] }),
+              maxIndex > 0 ? /* @__PURE__ */ jsx5("div", { className: styles4.dots, role: "tablist", "aria-label": "Slides", children: Array.from({ length: maxIndex + 1 }, (_, page) => /* @__PURE__ */ jsx5(
+                "button",
+                {
+                  type: "button",
+                  role: "tab",
+                  "aria-selected": page === index,
+                  "aria-label": `Go to slide group ${page + 1}`,
+                  className: classNames(
+                    styles4.dot,
+                    page === index && styles4.dotActive
+                  ),
+                  onClick: () => setIndex(page)
+                },
+                page
+              )) }) : null,
+              showGlobalFooter ? /* @__PURE__ */ jsxs4(
+                "div",
+                {
+                  className: classNames(
+                    styles4.globalFooter,
+                    showGlobalPrimary && !showGlobalGhost && styles4.globalFooterSingleCta
+                  ),
+                  children: [
+                    showGlobalPrimary ? /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        className: styles4.btnPrimary,
+                        onClick: handleGlobalPrimary,
+                        children: globalPrimaryLabel
+                      }
+                    ) : null,
+                    showGlobalGhost ? /* @__PURE__ */ jsx5(
+                      "button",
+                      {
+                        type: "button",
+                        className: styles4.btnGhost,
+                        onClick: handleGlobalGhost,
+                        children: globalGhostLabel
+                      }
+                    ) : null
+                  ]
+                }
+              ) : null
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ExperienceAnnouncementCard.tsx
+import {
+  useCallback as useCallback8,
+  useEffect as useEffect7,
+  useMemo as useMemo11,
+  useRef as useRef7,
+  useState as useState6
+} from "react";
+
+// src/components/ExperienceAnnouncementCard.css
+styleInject('.ffAnnRoot[data-appearance=light] {\n  --ff-ann-shell-bg: #ffffff;\n  --ff-ann-border: #e5e5e5;\n  --ff-ann-text: #1a1a1a;\n  --ff-ann-text-muted: #888888;\n  --ff-ann-footer-bg: #f5f5f5;\n  --ff-ann-footer-border: #eeeeee;\n  --ff-ann-dismiss-hover: #f0f0f0;\n  --ff-ann-ghost-hover: #f0f0f0;\n  --ff-ann-image-border: #eeeeee;\n  --ff-ann-btn-fg: #ffffff;\n  --ff-ann-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ffAnnRoot[data-appearance=dark] {\n  --ff-ann-shell-bg: #1e1e1e;\n  --ff-ann-border: #3a3a3a;\n  --ff-ann-text: #f3f3f3;\n  --ff-ann-text-muted: #a8a8a8;\n  --ff-ann-footer-bg: #252525;\n  --ff-ann-footer-border: #2e2e2e;\n  --ff-ann-dismiss-hover: #2a2a2a;\n  --ff-ann-ghost-hover: #2a2a2a;\n  --ff-ann-image-border: #333333;\n  --ff-ann-btn-fg: #121212;\n  --ff-ann-shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.ffAnnRoot[data-announcement-theme=info] {\n  --ff-ann-theme-primary: #2563eb;\n}\n.ffAnnRoot[data-announcement-theme=success] {\n  --ff-ann-theme-primary: #059669;\n}\n.ffAnnRoot[data-announcement-theme=warning] {\n  --ff-ann-theme-primary: #d97706;\n}\n.ffAnnRoot[data-announcement-theme=promo] {\n  --ff-ann-theme-primary: #db2777;\n}\n.ffAnnRoot[data-announcement-theme=neutral] {\n  --ff-ann-theme-primary: #1a1a1a;\n}\n.ffAnnRoot[data-appearance=dark][data-announcement-theme=info] {\n  --ff-ann-theme-primary: #3b82f6;\n}\n.ffAnnRoot[data-appearance=dark][data-announcement-theme=success] {\n  --ff-ann-theme-primary: #34d399;\n}\n.ffAnnRoot[data-appearance=dark][data-announcement-theme=warning] {\n  --ff-ann-theme-primary: #fbbf24;\n}\n.ffAnnRoot[data-appearance=dark][data-announcement-theme=promo] {\n  --ff-ann-theme-primary: #f472b6;\n}\n.ffAnnRoot[data-appearance=dark][data-announcement-theme=neutral] {\n  --ff-ann-theme-primary: #f3f3f3;\n}\n.ffAnnRoot {\n  --ff-ann-accent: var(--ff-agent-primary, var(--ff-ann-theme-primary));\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--ff-ann-text);\n}\n.ffAnnShell {\n  background: var(--ff-ann-shell-bg);\n  border: 1px solid var(--ff-ann-border);\n  border-radius: 14px;\n  overflow: hidden;\n  box-shadow: var(--ff-ann-shell-shadow);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n.ffAnnShell.ffAnnDismissed {\n  opacity: 0;\n  transform: scale(0.98);\n  pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffAnnShell {\n    transition: opacity 0.15s ease;\n  }\n  .ffAnnShell.ffAnnDismissed {\n    transform: none;\n  }\n}\n.ffAnnImage {\n  width: 100%;\n  height: 100px;\n  object-fit: cover;\n  display: block;\n  border-bottom: 1px solid var(--ff-ann-image-border);\n}\n.ffAnnImagePlaceholder {\n  width: 100%;\n  height: 100px;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  font-size: 36px;\n  line-height: 1;\n  border-bottom: 1px solid var(--ff-ann-image-border);\n  background: color-mix(in srgb, var(--ff-ann-accent) 12%, var(--ff-ann-shell-bg));\n}\n.ffAnnTop {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 12px;\n  padding: 14px 16px 0;\n}\n.ffAnnBadge {\n  display: inline-flex;\n  align-items: center;\n  gap: 5px;\n  font-size: 11px;\n  font-weight: 500;\n  padding: 3px 9px;\n  border-radius: 999px;\n  white-space: nowrap;\n  line-height: 1.4;\n  background: color-mix(in srgb, var(--ff-ann-accent) 16%, var(--ff-ann-shell-bg));\n  color: var(--ff-ann-accent);\n}\n.ffAnnDismiss {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--ff-ann-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  flex-shrink: 0;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n  transition: background 0.12s ease, color 0.12s ease;\n  margin: -4px -4px 0 0;\n}\n.ffAnnDismiss:hover {\n  background: var(--ff-ann-dismiss-hover);\n  color: var(--ff-ann-text);\n}\n.ffAnnDismiss.ffAnnDismissSolo {\n  margin-left: auto;\n}\n.ffAnnBody {\n  padding: 10px 16px 0;\n}\n.ffAnnTitle {\n  font-size: 16px;\n  font-weight: 500;\n  color: var(--ff-ann-text);\n  margin: 0 0 6px;\n  line-height: 1.35;\n}\n.ffAnnDescription {\n  font-size: 13px;\n  color: var(--ff-ann-text-muted);\n  line-height: 1.65;\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n}\n.ffAnnFooter {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 10px 16px 14px;\n  margin-top: 14px;\n  border-top: 1px solid var(--ff-ann-footer-border);\n  background: var(--ff-ann-footer-bg);\n}\n.ffAnnBtnPrimary {\n  background: var(--ff-ann-accent);\n  color: var(--ff-ann-btn-fg);\n  border: none;\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: opacity 0.12s ease;\n  white-space: nowrap;\n}\n.ffAnnBtnPrimary:hover {\n  opacity: 0.88;\n}\n.ffAnnBtnGhost {\n  background: transparent;\n  border: 1px solid var(--ff-ann-border);\n  border-radius: 8px;\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  cursor: pointer;\n  font-family: inherit;\n  color: var(--ff-ann-text);\n  transition: background 0.12s ease;\n  white-space: nowrap;\n}\n.ffAnnBtnGhost:hover {\n  background: var(--ff-ann-ghost-hover);\n}\n');
+
+// src/components/ExperienceAnnouncementCard.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var DISMISS_MS4 = 260;
+var GHOST_LABEL = "Maybe later";
+var DEFAULT_EMOJI = "\u{1F389}";
+var DEFAULT_BADGE_ICON = "\u2605";
+var THEME_BADGE_LABEL = {
+  info: "What's new",
+  success: "Success",
+  warning: "Important",
+  promo: "Featured",
+  neutral: "Update"
+};
+var styles5 = {
+  root: "ffAnnRoot",
+  shell: "ffAnnShell",
+  shellDismissed: "ffAnnDismissed",
+  image: "ffAnnImage",
+  imagePlaceholder: "ffAnnImagePlaceholder",
+  top: "ffAnnTop",
+  badge: "ffAnnBadge",
+  dismiss: "ffAnnDismiss",
+  dismissSolo: "ffAnnDismissSolo",
+  body: "ffAnnBody",
+  title: "ffAnnTitle",
+  description: "ffAnnDescription",
+  footer: "ffAnnFooter",
+  btnPrimary: "ffAnnBtnPrimary",
+  btnGhost: "ffAnnBtnGhost"
+};
+function ExperienceAnnouncementCard({
+  experienceId,
+  nodeId,
+  config: configInput,
+  conversationId,
+  metadata,
+  onComplete,
+  appearance = "auto",
+  className,
+  onAnnouncementAction
+}) {
+  const firstflow = useFirstflow();
+  const [resolvedAppearance, setResolvedAppearance] = useState6("light");
+  const [dismissed, setDismissed] = useState6(false);
+  const finishingRef = useRef7(false);
+  const finishAnimated = useCallback8(() => {
+    if (finishingRef.current) return;
+    finishingRef.current = true;
+    setDismissed(true);
+    window.setTimeout(() => onComplete(), DISMISS_MS4);
+  }, [onComplete]);
+  const { config, content, ui, handlers } = useExperienceAnnouncementNode({
+    config: configInput,
+    nodeId,
+    experienceId,
+    conversationId,
+    metadata,
+    onAction: (e) => {
+      onAnnouncementAction?.(e);
+      if (e.kind === "auto_hidden") {
+        finishAnimated();
+      }
+    }
+  });
+  useEffect7(() => {
+    if (appearance !== "auto") {
+      setResolvedAppearance(appearance);
       return;
     }
-    const base = buildShownAnalyticsBase2(
-      firstflow.agentId,
-      experienceId,
-      nodeId,
-      conversationId,
-      config,
-      metadata
-    );
-    let finalProps = base;
-    try {
-      finalProps = mapAnalytics?.(EXPERIENCE_SHOWN, { ...base }) ?? base;
-    } catch (e) {
-      console.warn(
-        "[Firstflow] useExperienceAnnouncementNode mapAnalytics (experience_shown)",
-        e
-      );
-      finalProps = base;
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setResolvedAppearance(mq.matches ? "dark" : "light");
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appearance]);
+  const theme = config.announcementTheme ?? "neutral";
+  const agentPrimary = firstflow.getWidgetUi()?.primaryColor?.trim();
+  const hero = useMemo11(() => {
+    const href = tryParseHttpImageUrl(config.announcementImageUrl);
+    if (href) {
+      return { kind: "image", src: href };
     }
-    try {
-      firstflow.analytics.track(EXPERIENCE_SHOWN, finalProps);
-      if (dedupeShown) {
-        shownImpressionKeys2.add(impressionKey);
+    return {
+      kind: "emoji",
+      emoji: content.emoji?.trim() || DEFAULT_EMOJI
+    };
+  }, [config.announcementImageUrl, content.emoji]);
+  const badgeLabel = useMemo11(() => {
+    const custom = config.announcementBadge?.trim();
+    if (custom) return custom;
+    return THEME_BADGE_LABEL[theme] ?? THEME_BADGE_LABEL.neutral;
+  }, [config.announcementBadge, theme]);
+  const badgeIcon = config.announcementBadgeIcon?.trim() || DEFAULT_BADGE_ICON;
+  const showBadge = Boolean(badgeLabel);
+  const title = content.title?.trim() || "What's new";
+  const description = content.body?.trim() ?? "";
+  const handleDismiss = useCallback8(() => {
+    handlers.dismiss();
+    finishAnimated();
+  }, [handlers, finishAnimated]);
+  const handlePrimary = useCallback8(() => {
+    handlers.ctaClick();
+    const url = content.ctaUrl?.trim();
+    const safe = url ? tryParseHttpImageUrl(url) : void 0;
+    if (safe) {
+      try {
+        window.open(safe, "_blank", "noopener,noreferrer");
+      } catch {
       }
-    } catch (e) {
-      console.warn(
-        "[Firstflow] useExperienceAnnouncementNode analytics.track (experience_shown)",
-        e
-      );
     }
-  }, [
-    dedupeShown,
-    impressionKey,
-    firstflow,
-    experienceId,
+    finishAnimated();
+  }, [handlers, content.ctaUrl, finishAnimated]);
+  const handleGhost = useCallback8(() => {
+    handlers.dismiss();
+    finishAnimated();
+  }, [handlers, finishAnimated]);
+  const showFooter = ui.hasCta || ui.isDismissible;
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className: classNames(styles5.root, className),
+      "data-appearance": resolvedAppearance,
+      "data-announcement-theme": theme,
+      style: agentPrimary ? {
+        ["--ff-agent-primary"]: agentPrimary
+      } : void 0,
+      children: /* @__PURE__ */ jsxs5(
+        "div",
+        {
+          className: classNames(styles5.shell, dismissed && styles5.shellDismissed),
+          children: [
+            hero.kind === "image" ? /* @__PURE__ */ jsx6(
+              "img",
+              {
+                className: styles5.image,
+                src: hero.src,
+                alt: title,
+                decoding: "async"
+              }
+            ) : /* @__PURE__ */ jsx6("div", { className: styles5.imagePlaceholder, "aria-hidden": true, children: hero.emoji }),
+            /* @__PURE__ */ jsxs5("div", { className: styles5.top, children: [
+              showBadge ? /* @__PURE__ */ jsxs5("span", { className: styles5.badge, children: [
+                badgeIcon ? /* @__PURE__ */ jsx6("span", { style: { fontSize: 11 }, "aria-hidden": true, children: badgeIcon }) : null,
+                badgeLabel
+              ] }) : null,
+              ui.isDismissible ? /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  className: classNames(
+                    styles5.dismiss,
+                    !showBadge && styles5.dismissSolo
+                  ),
+                  onClick: handleDismiss,
+                  "aria-label": "Dismiss",
+                  children: "\u2715"
+                }
+              ) : null
+            ] }),
+            /* @__PURE__ */ jsxs5("div", { className: styles5.body, children: [
+              /* @__PURE__ */ jsx6("p", { className: styles5.title, children: title }),
+              description ? /* @__PURE__ */ jsx6("p", { className: styles5.description, children: description }) : null
+            ] }),
+            showFooter ? /* @__PURE__ */ jsxs5("div", { className: styles5.footer, children: [
+              ui.hasCta && content.ctaLabel ? /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  className: styles5.btnPrimary,
+                  onClick: handlePrimary,
+                  children: content.ctaLabel
+                }
+              ) : null,
+              ui.isDismissible ? /* @__PURE__ */ jsx6(
+                "button",
+                {
+                  type: "button",
+                  className: styles5.btnGhost,
+                  onClick: handleGhost,
+                  children: GHOST_LABEL
+                }
+              ) : null
+            ] }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+
+// src/components/ExperienceMessageInline.tsx
+import { useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo12, useRef as useRef8, useState as useState7 } from "react";
+
+// src/components/ExperienceMessageInline.css
+styleInject('.ffMsgInlineRoot[data-appearance=dark] {\n  --ff-inl-shell-bg: #1e1e1e;\n  --ff-inl-border: #3a3a3a;\n  --ff-inl-text: #f3f3f3;\n  --ff-inl-text-muted: #a8a8a8;\n  --ff-inl-footer-bg: #252525;\n  --ff-inl-footer-border: #2e2e2e;\n  --ff-inl-accent: #ffffff;\n  --ff-inl-accent-contrast: #121212;\n  --ff-inl-dismiss-hover: #2a2a2a;\n  --ff-inl-ghost-hover: #2a2a2a;\n  --ff-inl-chip-bg: #2a2a2a;\n  --ff-inl-chip-border: #404040;\n  --ff-inl-chip-hover: #333333;\n  --ff-inl-shell-shadow: 0 4px 18px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.28);\n}\n.ffMsgInlineRoot[data-appearance=light] {\n  --ff-inl-shell-bg: #ffffff;\n  --ff-inl-border: #e5e5e5;\n  --ff-inl-text: #1a1a1a;\n  --ff-inl-text-muted: #888888;\n  --ff-inl-footer-bg: #f5f5f5;\n  --ff-inl-footer-border: #eeeeee;\n  --ff-inl-accent: #1a1a1a;\n  --ff-inl-accent-contrast: #ffffff;\n  --ff-inl-dismiss-hover: #f0f0f0;\n  --ff-inl-ghost-hover: #f0f0f0;\n  --ff-inl-chip-bg: #f5f5f5;\n  --ff-inl-chip-border: #e0e0e0;\n  --ff-inl-chip-hover: #eeeeee;\n  --ff-inl-shell-shadow: 0 2px 10px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04);\n}\n.ffMsgInlineRoot {\n  font-family:\n    -apple-system,\n    BlinkMacSystemFont,\n    "Segoe UI",\n    Roboto,\n    Helvetica,\n    Arial,\n    sans-serif;\n  width: 100%;\n  box-sizing: border-box;\n  color: var(--ff-inl-text);\n}\n.ffMsgInlineShell {\n  background: var(--ff-inl-shell-bg);\n  border: 1px solid var(--ff-inl-border);\n  border-radius: 16px;\n  overflow: hidden;\n  box-shadow: var(--ff-inl-shell-shadow);\n  transition: opacity 0.25s ease, transform 0.25s ease;\n}\n.ffMsgInlineShell.ffMsgInlineDismissed {\n  opacity: 0;\n  transform: scale(0.97);\n  pointer-events: none;\n}\n@media (prefers-reduced-motion: reduce) {\n  .ffMsgInlineShell {\n    transition: opacity 0.15s ease;\n  }\n  .ffMsgInlineShell.ffMsgInlineDismissed {\n    transform: none;\n  }\n}\n.ffMsgInlineHead {\n  display: flex;\n  align-items: flex-start;\n  justify-content: flex-end;\n  padding: 10px 12px 0;\n}\n.ffMsgInlineDismiss {\n  width: 26px;\n  height: 26px;\n  border: none;\n  background: none;\n  cursor: pointer;\n  color: var(--ff-inl-text-muted);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: 6px;\n  flex-shrink: 0;\n  padding: 0;\n  font-size: 14px;\n  line-height: 1;\n  transition: background 0.12s ease, color 0.12s ease;\n  margin: -4px -4px 0 0;\n}\n.ffMsgInlineDismiss:hover {\n  background: var(--ff-inl-dismiss-hover);\n  color: var(--ff-inl-text);\n}\n.ffMsgInlineBody {\n  padding: 4px 16px 12px;\n}\n.ffMsgInlineText {\n  font-size: 14px;\n  line-height: 1.55;\n  margin: 0;\n  white-space: pre-wrap;\n  word-break: break-word;\n  color: var(--ff-inl-text);\n}\n.ffMsgInlineChips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 4px 16px 12px;\n}\n.ffMsgInlineChip {\n  display: inline-flex;\n  align-items: center;\n  border: 1px solid var(--ff-inl-chip-border);\n  background: var(--ff-inl-chip-bg);\n  color: var(--ff-inl-text);\n  border-radius: 999px;\n  padding: 6px 14px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: background 0.12s ease;\n  max-width: 100%;\n}\n.ffMsgInlineChip:hover {\n  background: var(--ff-inl-chip-hover);\n}\n.ffMsgInlineFooter {\n  display: flex;\n  align-items: center;\n  flex-wrap: wrap;\n  gap: 8px;\n  padding: 10px 16px 12px;\n  border-top: 1px solid var(--ff-inl-footer-border);\n  background: var(--ff-inl-footer-bg);\n}\n.ffMsgInlineFooter.ffMsgInlineFooter--singleCta {\n  justify-content: center;\n}\n.ffMsgInlineBtnPrimary {\n  background: var(--ff-inl-accent);\n  color: var(--ff-inl-accent-contrast);\n  border: none;\n  border-radius: 8px;\n  padding: 7px 16px;\n  font-size: 13px;\n  font-weight: 500;\n  cursor: pointer;\n  font-family: inherit;\n  transition: opacity 0.12s ease;\n  white-space: nowrap;\n}\n.ffMsgInlineBtnPrimary:hover {\n  opacity: 0.88;\n}\n.ffMsgInlineBtnGhost {\n  background: transparent;\n  border: 1px solid var(--ff-inl-border);\n  border-radius: 8px;\n  padding: 7px 14px;\n  font-size: 13px;\n  font-weight: 400;\n  cursor: pointer;\n  font-family: inherit;\n  color: var(--ff-inl-text);\n  transition: background 0.12s ease;\n  white-space: nowrap;\n}\n.ffMsgInlineBtnGhost:hover {\n  background: var(--ff-inl-ghost-hover);\n}\n');
+
+// src/components/ExperienceMessageInline.tsx
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DISMISS_MS5 = 260;
+var styles6 = {
+  root: "ffMsgInlineRoot",
+  shell: "ffMsgInlineShell",
+  shellDismissed: "ffMsgInlineDismissed",
+  head: "ffMsgInlineHead",
+  dismissBtn: "ffMsgInlineDismiss",
+  body: "ffMsgInlineBody",
+  text: "ffMsgInlineText",
+  chips: "ffMsgInlineChips",
+  chip: "ffMsgInlineChip",
+  footer: "ffMsgInlineFooter",
+  footerSingleCta: "ffMsgInlineFooter--singleCta",
+  btnPrimary: "ffMsgInlineBtnPrimary",
+  btnGhost: "ffMsgInlineBtnGhost"
+};
+function findPrimaryBlock4(blocks) {
+  return blocks.find((b) => b.type === "cta_primary");
+}
+function findDismissBlock4(blocks) {
+  return blocks.find((b) => b.type === "cta_dismiss");
+}
+function findQuickRepliesBlock(blocks) {
+  return blocks.find(
+    (b) => b.type === "quick_replies"
+  );
+}
+function ExperienceMessageInline({
+  experienceId,
+  nodeId,
+  config,
+  conversationId,
+  metadata,
+  onComplete,
+  appearance = "auto",
+  className,
+  onMessageAction
+}) {
+  const [resolvedAppearance, setResolvedAppearance] = useState7("light");
+  const [dismissed, setDismissed] = useState7(false);
+  const finishingRef = useRef8(false);
+  useEffect8(() => {
+    if (appearance !== "auto") {
+      setResolvedAppearance(appearance);
+      return;
+    }
+    const mq = window.matchMedia("(prefers-color-scheme: dark)");
+    const apply = () => setResolvedAppearance(mq.matches ? "dark" : "light");
+    apply();
+    mq.addEventListener("change", apply);
+    return () => mq.removeEventListener("change", apply);
+  }, [appearance]);
+  const { blocks, ui, handlers } = useExperienceMessageNode({
+    config,
     nodeId,
+    experienceId,
     conversationId,
-    config,
     metadata,
-    mapAnalytics
-  ]);
-  const reportShownRef = useRef4(reportShown);
-  reportShownRef.current = reportShown;
-  useEffect7(() => {
-    if (!trackShownOnMount) return;
-    reportShownRef.current();
-  }, [trackShownOnMount, impressionKey]);
-  const dismiss = useCallback6(() => {
-    clearAutoHideTimer();
-    emitClick({ kind: "dismiss" });
-  }, [clearAutoHideTimer, emitClick]);
-  const ctaClick = useCallback6(() => {
-    if (!content.ctaLabel) return;
-    clearAutoHideTimer();
-    emitClick({
-      kind: "cta_click",
-      label: content.ctaLabel,
-      url: content.ctaUrl
-    });
-  }, [content.ctaLabel, content.ctaUrl, clearAutoHideTimer, emitClick]);
-  const cancelAutoHide = useCallback6(() => {
-    clearAutoHideTimer();
-  }, [clearAutoHideTimer]);
-  const handlers = useMemo3(
-    () => ({
-      dismiss,
-      ctaClick,
-      cancelAutoHide,
-      reportShown
-    }),
-    [dismiss, ctaClick, cancelAutoHide, reportShown]
+    onAction: onMessageAction
+  });
+  const quickBlock = useMemo12(() => findQuickRepliesBlock(blocks), [blocks]);
+  const primaryBlock = useMemo12(() => findPrimaryBlock4(blocks), [blocks]);
+  const dismissBlock = useMemo12(() => findDismissBlock4(blocks), [blocks]);
+  const finish = useCallback9(() => {
+    if (finishingRef.current) return;
+    finishingRef.current = true;
+    setDismissed(true);
+    window.setTimeout(() => {
+      onComplete();
+    }, DISMISS_MS5);
+  }, [onComplete]);
+  const primaryAsDismissOnly = !ui.hasPrimaryCta && ui.hasDismissCta;
+  const primaryLabel = primaryAsDismissOnly ? dismissBlock?.label ?? "Dismiss" : primaryBlock?.label ?? "Continue";
+  const ghostLabel = dismissBlock?.label ?? "Dismiss";
+  const handleHeaderDismiss = useCallback9(() => {
+    if (ui.hasDismissCta) {
+      handlers.onDismissCta();
+    }
+    finish();
+  }, [ui.hasDismissCta, handlers, finish]);
+  const handlePrimary = useCallback9(() => {
+    if (primaryAsDismissOnly) {
+      handlers.onDismissCta();
+      finish();
+      return;
+    }
+    if (!primaryBlock) {
+      finish();
+      return;
+    }
+    handlers.onPrimaryCta();
+    if (primaryBlock.ctaType === "link" && primaryBlock.url) {
+      const safe = tryParseHttpImageUrl(primaryBlock.url);
+      if (safe) {
+        try {
+          window.open(safe, "_blank", "noopener,noreferrer");
+        } catch {
+        }
+      }
+    }
+    finish();
+  }, [primaryAsDismissOnly, primaryBlock, handlers, finish]);
+  const handleGhost = useCallback9(() => {
+    if (ui.hasDismissCta) {
+      handlers.onDismissCta();
+    }
+    finish();
+  }, [ui.hasDismissCta, handlers, finish]);
+  const handleQuickReply = useCallback9(
+    (label, index) => {
+      handlers.onQuickReply(label, index);
+      finish();
+    },
+    [handlers, finish]
+  );
+  const showFooter = ui.hasPrimaryCta || ui.hasDismissCta;
+  const showGhost = ui.hasPrimaryCta && ui.hasDismissCta;
+  const showQuick = ui.hasQuickReplies && quickBlock?.type === "quick_replies";
+  const bodyText = config.messageContent?.trim() ?? "";
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      className: classNames(styles6.root, className),
+      "data-appearance": resolvedAppearance,
+      children: /* @__PURE__ */ jsxs6(
+        "div",
+        {
+          className: classNames(
+            styles6.shell,
+            dismissed && styles6.shellDismissed
+          ),
+          children: [
+            /* @__PURE__ */ jsx7("div", { className: styles6.head, children: /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: styles6.dismissBtn,
+                onClick: handleHeaderDismiss,
+                "aria-label": "Dismiss",
+                children: "\u2715"
+              }
+            ) }),
+            bodyText ? /* @__PURE__ */ jsx7("div", { className: classNames(styles6.body), children: /* @__PURE__ */ jsx7("p", { className: styles6.text, children: bodyText }) }) : null,
+            showQuick && quickBlock ? /* @__PURE__ */ jsx7("div", { className: styles6.chips, role: "group", "aria-label": "Quick replies", children: quickBlock.options.map((opt, index) => /* @__PURE__ */ jsx7(
+              "button",
+              {
+                type: "button",
+                className: styles6.chip,
+                onClick: () => handleQuickReply(opt.label, index),
+                children: opt.label
+              },
+              `${opt.label}-${index}`
+            )) }) : null,
+            showFooter ? /* @__PURE__ */ jsxs6(
+              "div",
+              {
+                className: classNames(
+                  styles6.footer,
+                  !showGhost && styles6.footerSingleCta
+                ),
+                children: [
+                  /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles6.btnPrimary,
+                      onClick: handlePrimary,
+                      children: primaryLabel
+                    }
+                  ),
+                  showGhost ? /* @__PURE__ */ jsx7(
+                    "button",
+                    {
+                      type: "button",
+                      className: styles6.btnGhost,
+                      onClick: handleGhost,
+                      children: ghostLabel
+                    }
+                  ) : null
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    }
   );
-  return {
-    config,
-    content,
-    ui,
-    blocksVersion: EXPERIENCE_ANNOUNCEMENT_BLOCKS_VERSION,
-    handlers
-  };
 }
 
-// src/components/MessageFeedback.module.css
-var MessageFeedback_default = {};
+// src/components/ExperienceSlot.css
+styleInject(".ffExperienceSlotRoot {\n  width: 100%;\n}\n.ffExperienceSlotHidden {\n  display: none;\n}\n");
 
-// src/components/MessageFeedback.tsx
-import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
-function ThumbsIcon({ up, active }) {
-  if (up) {
-    return /* @__PURE__ */ jsx5("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx5("path", { d: "M14 9V5a3 3 0 0 0-3-3l-4 9v11h11.28a2 2 0 0 0 2-1.7l1.38-9a2 2 0 0 0-2-2.3zM7 22H4a2 2 0 0 1-2-2v-7a2 2 0 0 1 2-2h3" }) });
+// src/components/ExperienceSlot.tsx
+import { jsx as jsx8 } from "react/jsx-runtime";
+var styles7 = {
+  root: "ffExperienceSlotRoot",
+  hidden: "ffExperienceSlotHidden"
+};
+function createSessionSet(previous, experienceId) {
+  const next = new Set(previous);
+  next.add(experienceId);
+  return next;
+}
+function isInlineMessageUnrenderable(flowConfig) {
+  const messageStyle = normalizeFlowMessageStyle(flowConfig.messageStyle);
+  const blocks = buildExperienceMessageBlocks(flowConfig);
+  const ui = buildExperienceMessageUi(blocks, flowConfig.messageStyle);
+  if (messageStyle === "carousel" && (flowConfig.carouselCards?.length ?? 0) === 0) {
+    return true;
+  }
+  if (messageStyle === "quick_replies" && !ui.hasQuickReplies) {
+    return true;
   }
-  return /* @__PURE__ */ jsx5("svg", { width: "22", height: "22", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", "aria-hidden": true, children: /* @__PURE__ */ jsx5("path", { d: "M10 15v4a3 3 0 0 0 3 3l4-9V2H5.72a2 2 0 0 0-2 1.7l-1.38 9a2 2 0 0 0 2 2.3zm7.13-14h2.67A2.31 2.31 0 0 1 22 4v7a2.31 2.31 0 0 1-2.34 2H17" }) });
+  const hasText = Boolean(flowConfig.messageContent?.trim());
+  const hasFooter = ui.hasPrimaryCta || ui.hasDismissCta;
+  return !hasText && !ui.hasQuickReplies && !hasFooter;
 }
-function MessageFeedback({
+function ExperienceSlot({
+  mode = "single",
+  typeFilter,
   conversationId,
-  messageId,
-  messagePreview,
-  className,
   metadata,
-  variant = "default",
-  inlineFormSurface = "light"
+  onShow,
+  onQueueEmpty,
+  renderCandidate,
+  className,
+  appearance = "auto",
+  onExperienceMessageAction,
+  onExperienceAnnouncementAction
 }) {
-  const inline = variant === "inline";
-  const {
-    rating,
-    selectedTags,
-    comment,
-    submitting,
-    submitted,
-    error,
-    setRating,
-    toggleTag,
-    setComment,
-    submit,
-    isEnabled,
-    sideConfig
-  } = useFeedback({
-    conversationId,
-    messageId,
-    messagePreview,
-    metadata
-  });
-  if (!isEnabled) return null;
-  const thumbs = /* @__PURE__ */ jsxs4("div", { className: MessageFeedback_default.thumbs, children: [
-    /* @__PURE__ */ jsx5(
-      "button",
-      {
-        type: "button",
-        className: `${MessageFeedback_default.thumbBtn} ${MessageFeedback_default.thumbBtnLike} ${rating === "like" ? MessageFeedback_default.thumbBtnActiveLike : ""}`,
-        onClick: () => setRating("like"),
-        "aria-pressed": rating === "like",
-        "aria-label": "Thumbs up",
-        children: /* @__PURE__ */ jsx5(ThumbsIcon, { up: true, active: rating === "like" })
+  const storage2 = useMemo13(() => createStorageAdapter(), []);
+  const [sessionConsumed, setSessionConsumed] = useState8(() => /* @__PURE__ */ new Set());
+  const [tourStepIndex, setTourStepIndex] = useState8(0);
+  const shownIdRef = useRef9(null);
+  const queueEmptyRef = useRef9(false);
+  const candidates = useFirstflowSlotCandidates(typeFilter);
+  const remaining = useMemo13(
+    () => candidates.filter((candidate) => !sessionConsumed.has(candidate.experienceId)),
+    [candidates, sessionConsumed]
+  );
+  const current = remaining[0] ?? null;
+  const tourExperienceIdRef = useRef9(null);
+  useEffect9(() => {
+    if (!current || current.type !== "message") {
+      tourExperienceIdRef.current = null;
+      return;
+    }
+    const msg = current;
+    if (!msg.tourSteps?.length) return;
+    if (tourExperienceIdRef.current !== current.experienceId) {
+      tourExperienceIdRef.current = current.experienceId;
+      setTourStepIndex(0);
+    }
+  }, [current]);
+  const resolvedMessageStep = useMemo13(() => {
+    if (!current || current.type !== "message") return null;
+    const msg = current;
+    if (msg.tourSteps?.length) {
+      const i = Math.min(tourStepIndex, msg.tourSteps.length - 1);
+      return msg.tourSteps[i];
+    }
+    return { nodeId: msg.nodeId, config: msg.config };
+  }, [current, tourStepIndex]);
+  const advanceCandidate = useCallback10(
+    (candidate) => {
+      setSessionConsumed((prev) => createSessionSet(prev, candidate.experienceId));
+      markExperienceShown(
+        candidate.experienceId,
+        candidate.settings?.frequency ?? EXPERIENCE_SETTINGS_DEFAULT.frequency,
+        storage2
+      );
+    },
+    [storage2]
+  );
+  useEffect9(() => {
+    if (!current) {
+      shownIdRef.current = null;
+      return;
+    }
+    const shownKey = `${current.type}:${current.experienceId}`;
+    if (shownIdRef.current === shownKey) return;
+    shownIdRef.current = shownKey;
+    onShow?.(current.experienceId, current.type);
+  }, [current, onShow]);
+  useEffect9(() => {
+    if (remaining.length > 0) {
+      queueEmptyRef.current = false;
+      return;
+    }
+    if (queueEmptyRef.current) return;
+    queueEmptyRef.current = true;
+    onQueueEmpty?.();
+  }, [remaining.length, onQueueEmpty]);
+  const messageSafetyAdvancedRef = useRef9(/* @__PURE__ */ new Set());
+  useLayoutEffect2(() => {
+    if (!current || current.type !== "message" || !resolvedMessageStep) return;
+    const flowConfig = parseFlowMessageNodeConfig(resolvedMessageStep.config);
+    const messageStyle = normalizeFlowMessageStyle(flowConfig.messageStyle);
+    if (messageStyle === "card" || messageStyle === "rich_card" || messageStyle === "carousel" && (flowConfig.carouselCards?.length ?? 0) > 0) {
+      return;
+    }
+    if (!isInlineMessageUnrenderable(flowConfig)) return;
+    const key = `${current.experienceId}:${resolvedMessageStep.nodeId}`;
+    if (messageSafetyAdvancedRef.current.has(key)) return;
+    messageSafetyAdvancedRef.current.add(key);
+    const msg = current;
+    if (msg.tourSteps?.length) {
+      const i = Math.min(tourStepIndex, msg.tourSteps.length - 1);
+      if (i < msg.tourSteps.length - 1) {
+        setTourStepIndex(i + 1);
+      } else {
+        advanceCandidate(current);
       }
-    ),
-    /* @__PURE__ */ jsx5(
-      "button",
+    } else {
+      advanceCandidate(current);
+    }
+  }, [current, resolvedMessageStep, tourStepIndex, advanceCandidate]);
+  const advance = useCallback10(() => {
+    if (!current) return;
+    const msg = current.type === "message" ? current : null;
+    if (msg?.tourSteps?.length) {
+      const steps = msg.tourSteps;
+      setTourStepIndex((i) => {
+        if (i < steps.length - 1) {
+          return i + 1;
+        }
+        queueMicrotask(() => advanceCandidate(current));
+        return i;
+      });
+      return;
+    }
+    advanceCandidate(current);
+  }, [current, advanceCandidate]);
+  if (!current) return null;
+  if (renderCandidate) {
+    return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: renderCandidate(current, advance) });
+  }
+  if (current.type === "survey") {
+    return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: /* @__PURE__ */ jsx8(
+      Survey,
       {
-        type: "button",
-        className: `${MessageFeedback_default.thumbBtn} ${rating === "dislike" ? MessageFeedback_default.thumbBtnActiveDislike : ""}`,
-        onClick: () => setRating("dislike"),
-        "aria-pressed": rating === "dislike",
-        "aria-label": "Thumbs down",
-        children: /* @__PURE__ */ jsx5(ThumbsIcon, { up: false, active: rating === "dislike" })
+        experienceId: current.experienceId,
+        conversationId,
+        metadata,
+        layout: "paginated",
+        appearance,
+        onSubmitted: advance
       }
-    )
-  ] });
-  const formBlock = rating && sideConfig ? /* @__PURE__ */ jsxs4(Fragment, { children: [
-    /* @__PURE__ */ jsx5("p", { className: MessageFeedback_default.sectionHeading, children: sideConfig.heading.toUpperCase() }),
-    sideConfig.showTags ? /* @__PURE__ */ jsx5("div", { className: MessageFeedback_default.tags, children: sideConfig.tags.map((tag) => /* @__PURE__ */ jsx5(
-      "button",
+    ) });
+  }
+  if (current.type === "message") {
+    if (!resolvedMessageStep) return mode === "queue" ? /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, styles7.hidden) }) : null;
+    const flowConfig = parseFlowMessageNodeConfig(resolvedMessageStep.config);
+    const messageStyle = normalizeFlowMessageStyle(flowConfig.messageStyle);
+    const messageNodeId = resolvedMessageStep.nodeId;
+    if (messageStyle === "card") {
+      return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: /* @__PURE__ */ jsx8(
+        ExperienceMessageCard,
+        {
+          experienceId: current.experienceId,
+          nodeId: messageNodeId,
+          config: flowConfig,
+          conversationId,
+          metadata,
+          appearance,
+          onMessageAction: onExperienceMessageAction,
+          onComplete: advance
+        }
+      ) });
+    }
+    if (messageStyle === "rich_card") {
+      return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: /* @__PURE__ */ jsx8(
+        ExperienceMessageRichCard,
+        {
+          experienceId: current.experienceId,
+          nodeId: messageNodeId,
+          config: flowConfig,
+          conversationId,
+          metadata,
+          appearance,
+          onMessageAction: onExperienceMessageAction,
+          onComplete: advance
+        }
+      ) });
+    }
+    if (messageStyle === "carousel" && (flowConfig.carouselCards?.length ?? 0) > 0) {
+      return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: /* @__PURE__ */ jsx8(
+        ExperienceMessageCarousel,
+        {
+          experienceId: current.experienceId,
+          nodeId: messageNodeId,
+          config: flowConfig,
+          conversationId,
+          metadata,
+          appearance,
+          onMessageAction: onExperienceMessageAction,
+          onComplete: advance
+        }
+      ) });
+    }
+    if (isInlineMessageUnrenderable(flowConfig)) {
+      return mode === "queue" ? /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, styles7.hidden) }) : null;
+    }
+    return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: /* @__PURE__ */ jsx8(
+      ExperienceMessageInline,
       {
-        type: "button",
-        className: `${MessageFeedback_default.tag} ${selectedTags.includes(tag) ? MessageFeedback_default.tagSelected : ""}`,
-        onClick: () => toggleTag(tag),
-        children: tag
-      },
-      tag
-    )) }) : null,
-    sideConfig.showComment ? /* @__PURE__ */ jsx5(
-      "textarea",
+        experienceId: current.experienceId,
+        nodeId: messageNodeId,
+        config: flowConfig,
+        conversationId,
+        metadata,
+        appearance,
+        onMessageAction: onExperienceMessageAction,
+        onComplete: advance
+      }
+    ) });
+  }
+  if (current.type === "announcement") {
+    const annConfig = normalizeFlowAnnouncementNodeConfig(current.config);
+    return /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, className), children: /* @__PURE__ */ jsx8(
+      ExperienceAnnouncementCard,
       {
-        className: MessageFeedback_default.textarea,
-        placeholder: sideConfig.placeholder,
-        value: comment,
-        onChange: (e) => setComment(e.target.value),
-        "aria-label": "Optional comment"
+        experienceId: current.experienceId,
+        nodeId: current.nodeId,
+        config: annConfig,
+        conversationId,
+        metadata,
+        appearance,
+        onAnnouncementAction: onExperienceAnnouncementAction,
+        onComplete: advance
       }
-    ) : null,
-    /* @__PURE__ */ jsx5("button", { type: "button", className: MessageFeedback_default.submitBtn, disabled: submitting, onClick: () => void submit(), children: submitting ? "Sending\u2026" : "Send feedback" }),
-    submitted && !error && /* @__PURE__ */ jsx5("p", { className: MessageFeedback_default.hint, children: "Thanks \u2014 you can change your choice above and send again anytime." }),
-    error && /* @__PURE__ */ jsx5("p", { className: MessageFeedback_default.error, children: error })
-  ] }) : null;
-  if (inline) {
-    const thumbCardClass = [MessageFeedback_default.card, MessageFeedback_default.cardInline, className].filter(Boolean).join(" ");
-    const formClass = [
-      MessageFeedback_default.inlineFormBelow,
-      inlineFormSurface === "dark" ? MessageFeedback_default.inlineFormBelowDark : ""
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsxs4(Fragment, { children: [
-      /* @__PURE__ */ jsx5("div", { className: thumbCardClass, "data-ff-feedback-variant": "inline", "data-ff-inline-thumbs": "", children: thumbs }),
-      formBlock && /* @__PURE__ */ jsx5("div", { className: formClass, "data-ff-inline-form": "", children: formBlock })
-    ] });
+    ) });
   }
-  const cardClass = [MessageFeedback_default.card, className].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs4("div", { className: cardClass, "data-ff-feedback-variant": "default", children: [
-    /* @__PURE__ */ jsx5("p", { className: MessageFeedback_default.previewLabel, children: "PREVIEW" }),
-    /* @__PURE__ */ jsx5("div", { className: MessageFeedback_default.previewBox, children: messagePreview || "\u2014" }),
-    thumbs,
-    formBlock
-  ] });
+  return mode === "queue" ? /* @__PURE__ */ jsx8("div", { className: classNames(styles7.root, styles7.hidden) }) : null;
 }
 
-// src/mount.tsx
-import { createRoot } from "react-dom/client";
-
-// src/components/InlineIssueForm.module.css
-var InlineIssueForm_default = {};
-
-// src/components/InlineIssueForm.tsx
-import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
-function InlineIssueForm() {
-  const { reporter } = useIssueReporterContext();
-  const config = reporter.getConfig();
-  if (!config.enabled) return null;
-  return /* @__PURE__ */ jsxs5("div", { className: InlineIssueForm_default.wrapper, children: [
-    /* @__PURE__ */ jsx6("h3", { className: InlineIssueForm_default.title, children: "Report an issue" }),
-    /* @__PURE__ */ jsx6(FormEngine, {})
-  ] });
-}
+// src/components/FirstflowWidget.tsx
+import { useCallback as useCallback11, useState as useState9 } from "react";
 
-// src/mount.tsx
-import { jsx as jsx7 } from "react/jsx-runtime";
-function mount(firstflow, target) {
-  const root = createRoot(target);
-  root.render(
-    /* @__PURE__ */ jsx7(FirstflowProvider, { firstflow, children: /* @__PURE__ */ jsx7(InlineIssueForm, {}) })
-  );
-  return () => root.unmount();
-}
+// src/components/FirstflowWidget.css
+styleInject(".ffWidgetRoot {\n  position: relative;\n  width: 100%;\n}\n.ffWidgetChat {\n  position: relative;\n  z-index: 1;\n}\n.ffWidgetSlotStackWrap {\n  position: absolute;\n  left: -1%;\n  right: 0;\n  bottom: -1%;\n  z-index: 2;\n  pointer-events: none;\n  width: 102%;\n}\n.ffWidgetSlotStackWrap.ffWidgetSlotStackWrap--survey {\n  bottom: -20px;\n}\n.ffWidgetSlotStackWrap > * {\n  pointer-events: auto;\n}\n.ffWidgetSlotStack {\n  margin-bottom: 0;\n}\n.ffWidgetOverlayLayer {\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  padding: 12px;\n  pointer-events: none;\n  z-index: 2;\n}\n.ffWidgetOverlayCard {\n  width: 100%;\n  max-width: 740px;\n  pointer-events: auto;\n}\n");
 
-// src/hooks/useIssueReporter.ts
-import { useCallback as useCallback7 } from "react";
-function useIssueReporter() {
-  const { reporter, isModalOpen, openModal, closeModal } = useIssueReporterContext();
-  const open = useCallback7(
-    (options) => {
-      openModal(options);
+// src/components/FirstflowWidget.tsx
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var styles8 = {
+  root: "ffWidgetRoot",
+  chat: "ffWidgetChat",
+  slotStackWrap: "ffWidgetSlotStackWrap",
+  slotStackWrapSurvey: "ffWidgetSlotStackWrap--survey",
+  slotStack: "ffWidgetSlotStack",
+  overlayLayer: "ffWidgetOverlayLayer",
+  overlayCard: "ffWidgetOverlayCard"
+};
+function FirstflowWidget({
+  children,
+  conversationId,
+  metadata,
+  experiencePlacement = "stack",
+  className,
+  classNames: classNameMap,
+  experienceSlotProps
+}) {
+  const [stackSurveyLift, setStackSurveyLift] = useState9(false);
+  const mergedOnShow = useCallback11(
+    (experienceId, type) => {
+      setStackSurveyLift(type === "survey");
+      experienceSlotProps?.onShow?.(experienceId, type);
     },
-    [openModal]
+    [experienceSlotProps?.onShow]
   );
-  const reportIssue = useCallback7(
-    async (data) => {
-      await reporter.reportIssue(data);
-    },
-    [reporter]
+  const mergedOnQueueEmpty = useCallback11(() => {
+    setStackSurveyLift(false);
+    experienceSlotProps?.onQueueEmpty?.();
+  }, [experienceSlotProps?.onQueueEmpty]);
+  const slotClassName = classNames(
+    experienceSlotProps?.className,
+    experiencePlacement === "stack" ? styles8.slotStack : styles8.overlayCard,
+    experiencePlacement === "overlay" ? classNameMap?.overlayCard : void 0
   );
-  const submit = reportIssue;
-  return {
-    reporter,
-    open,
-    reportIssue,
-    submit,
-    config: reporter.getConfig(),
-    isModalOpen,
-    closeModal
-  };
+  const slot = /* @__PURE__ */ jsx9(
+    ExperienceSlot,
+    {
+      ...experienceSlotProps,
+      conversationId,
+      metadata,
+      className: slotClassName,
+      onShow: mergedOnShow,
+      onQueueEmpty: mergedOnQueueEmpty
+    }
+  );
+  if (experiencePlacement === "overlay") {
+    return /* @__PURE__ */ jsxs7("section", { className: classNames(styles8.root, className, classNameMap?.root), children: [
+      /* @__PURE__ */ jsx9("div", { className: classNames(styles8.chat, classNameMap?.chat), children }),
+      /* @__PURE__ */ jsx9(
+        "div",
+        {
+          className: classNames(
+            styles8.overlayLayer,
+            classNameMap?.overlayLayer
+          ),
+          children: slot
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs7("section", { className: classNames(styles8.root, className, classNameMap?.root), children: [
+    /* @__PURE__ */ jsx9("div", { className: classNames(styles8.chat, classNameMap?.chat), children }),
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: classNames(
+          styles8.slotStackWrap,
+          stackSurveyLift && styles8.slotStackWrapSurvey
+        ),
+        "aria-live": "polite",
+        children: slot
+      }
+    )
+  ] });
 }
 
-// src/issue.ts
-var issue_exports = {};
+// src/index.ts
+function createFirstflow2(options) {
+  return createFirstflow(options);
+}
+function useFirstflow2() {
+  return useFirstflow();
+}
 export {
   CHAT_MESSAGE_SENT,
+  EXPERIENCE_ANALYTICS_TYPE,
   EXPERIENCE_ANNOUNCEMENT_ANALYTICS_ACTION,
   EXPERIENCE_ANNOUNCEMENT_BLOCKS_VERSION,
   EXPERIENCE_CLICKED,
   EXPERIENCE_MESSAGE_ANALYTICS_ACTION,
   EXPERIENCE_MESSAGE_BLOCKS_VERSION,
   EXPERIENCE_SHOWN,
-  FEEDBACK_SUBMITTED,
+  ExperienceAnnouncementCard,
+  ExperienceMessageCard,
+  ExperienceMessageCarousel,
+  ExperienceMessageInline,
+  ExperienceMessageRichCard,
+  ExperienceSlot,
+  FIRSTFLOW_PUBLIC_API_BASE_URL,
   FirstflowProvider,
-  FormEngine,
-  ISSUE_SUBMITTED,
-  InlineIssueForm,
-  issue_exports as Issue,
-  IssueModal,
-  IssueReporterProvider,
-  MessageFeedback,
+  FirstflowWidget,
   SURVEY_COMPLETED,
+  Survey,
   buildExperienceAnnouncementContent,
   buildExperienceAnnouncementUi,
   buildExperienceCarouselCtaAction,
   buildExperienceMessageBlocks,
   buildExperienceMessageUi,
-  createFirstflow,
-  createIssueReporter,
+  clearFrequencyRecords,
+  createFirstflow2 as createFirstflow,
+  createStorageAdapter,
   fetchSdkAgentConfig,
+  markExperienceShown,
   mount,
   normalizeFlowAnnouncementNodeConfig,
   normalizeFlowMessageStyle,
   normalizeFlowQuickReplyItem,
   normalizeFlowQuickReplyList,
-  useCreateFirstflow,
+  parseFlowMessageNodeConfig,
+  tryParseHttpImageUrl,
   useExperienceAnnouncementNode,
+  useExperienceEligibility,
   useExperienceMessageNode,
-  useFeedback,
-  useFirstflow,
-  useFirstflowConfig,
-  useIssueForm,
-  useIssueReporter,
-  useIssueReporterContext
+  useFirstflow2 as useFirstflow,
+  useFirstflowResolveExperience,
+  useFirstflowSelector,
+  useFirstflowSurvey
 };