@syntrologie/adapt-overlays 2.16.0 → 2.18.0

package/dist/runtime.js

@@ -1,135 +1,2413 @@
-/**
- * Adaptive Overlays - Runtime Module
- *
- * Visual overlay actions: highlight, pulse, badge, tooltip, celebrations.
- */
-import { executeCelebrate } from './celebrations';
-import { executeTour } from './executors/tour';
-import { showHighlight } from './highlight';
-import { executeModal } from './modal';
-import { sanitizeHtml } from './sanitizer';
-import { showTooltip } from './tooltip';
-import { WorkflowMountableWidget } from './WorkflowWidget';
-import { WorkflowWidgetLitMountable } from './WorkflowWidgetLit';
-// Re-export executeModal and executeTour for use by other packages
-export { executeModal, executeTour };
-// ============================================================================
-// Executors
-// ============================================================================
-/**
- * Execute a highlight action
- */
-export const executeHighlight = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    // Skip re-application if the user previously dismissed this highlight.
-    // The dismissed attribute is set by onDismiss (user click-outside / Esc)
-    // and survives config-driven revert+reapply cycles.
-    if (anchorEl.getAttribute('data-syntro-highlight-dismissed')) {
-        return { cleanup: () => { } };
-    }
-    // Self-guard: destroy any existing highlight on this anchor to prevent duplicates
-    // (batch re-apply on navigation can call this executor multiple times for the same anchor)
-    const existing = anchorEl.getAttribute('data-syntro-highlight');
-    if (existing) {
-        const prev = context.overlayRoot.querySelectorAll('.syntro-spotlight-scrim, .syntro-spotlight-ring');
-        prev.forEach((el) => el.remove());
-    }
-    anchorEl.setAttribute('data-syntro-highlight', 'true');
-    // Resolve ring color: action override → theme primary → host page var → fallback
-    let ringColor = action.style?.color;
-    if (!ringColor) {
-        try {
-            const primary = getComputedStyle(context.overlayRoot)
-                .getPropertyValue('--sc-color-primary')
-                ?.trim();
-            if (primary)
-                ringColor = primary;
+import {
+  __privateAdd,
+  __privateGet,
+  __privateSet
+} from "./chunk-VHAA22YE.js";
+
+// src/celebrations/effects/confetti.ts
+var INTENSITY_COUNTS = { light: 50, medium: 100, heavy: 200 };
+var DEFAULT_COLORS = [
+  "#ff0000",
+  "#00ff00",
+  "#0000ff",
+  "#ffff00",
+  "#ff00ff",
+  "#00ffff",
+  "#ff8800",
+  "#8800ff"
+];
+var confettiEffect = {
+  init(width, height, config) {
+    const count = INTENSITY_COUNTS[config.intensity];
+    const colors = config.colors.length > 0 ? config.colors : DEFAULT_COLORS;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+      particles.push({
+        x: Math.random() * width,
+        y: Math.random() * -height * 0.3,
+        vx: (Math.random() - 0.5) * 4,
+        vy: Math.random() * 2 + 1,
+        rotation: Math.random() * Math.PI * 2,
+        rotationSpeed: (Math.random() - 0.5) * 0.2,
+        size: Math.random() * 6 + 4,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        opacity: 1,
+        shape: Math.random() > 0.5 ? "rect" : "circle"
+      });
+    }
+    return particles;
+  },
+  update(particles, _dt, _elapsed) {
+    let anyVisible = false;
+    for (const p of particles) {
+      p.vy += 0.15;
+      p.vx *= 0.99;
+      p.x += p.vx;
+      p.y += p.vy;
+      p.rotation += p.rotationSpeed;
+      if (p.y > 0 && p.opacity > 0) {
+        if (p.y > 500) {
+          p.opacity -= 0.02;
+          if (p.opacity < 0) p.opacity = 0;
+        }
+      }
+      if (p.opacity > 0.01) {
+        anyVisible = true;
+      }
+    }
+    return anyVisible;
+  },
+  render(ctx, particles) {
+    for (const p of particles) {
+      if (p.opacity < 0.01) continue;
+      ctx.save();
+      ctx.globalAlpha = p.opacity;
+      ctx.fillStyle = p.color;
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rotation);
+      if (p.shape === "circle") {
+        ctx.beginPath();
+        ctx.arc(0, 0, p.size / 2, 0, Math.PI * 2);
+        ctx.fill();
+      } else {
+        ctx.fillRect(-p.size / 2, -p.size / 2, p.size, p.size * 0.6);
+      }
+      ctx.restore();
+    }
+  }
+};
+
+// src/celebrations/effects/emoji-rain.ts
+var INTENSITY_COUNTS2 = { light: 20, medium: 40, heavy: 80 };
+var DEFAULT_EMOJI = "\u{1F389}";
+var emojiRainEffect = {
+  init(width, _height, config) {
+    const count = INTENSITY_COUNTS2[config.intensity];
+    const emoji = typeof config.props?.emoji === "string" ? config.props.emoji : DEFAULT_EMOJI;
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+      particles.push({
+        x: Math.random() * width,
+        y: Math.random() * -200,
+        vx: 0,
+        vy: Math.random() * 1.5 + 1,
+        rotation: 0,
+        rotationSpeed: 0,
+        size: Math.random() * 12 + 16,
+        color: "#000000",
+        opacity: 1,
+        shape: "emoji",
+        emoji,
+        data: {
+          /** Phase offset for horizontal wobble */
+          wobblePhase: Math.random() * Math.PI * 2,
+          /** Amplitude of horizontal wobble */
+          wobbleAmp: Math.random() * 1.5 + 0.5,
+          /** Original x for wobble base */
+          originX: 0
         }
-        catch {
-            /* fallback to showHighlight default */
+      });
+    }
+    for (const p of particles) {
+      if (p.data) p.data.originX = p.x;
+    }
+    return particles;
+  },
+  update(particles, _dt, elapsed) {
+    let anyVisible = false;
+    for (const p of particles) {
+      p.y += p.vy;
+      const phase = p.data?.wobblePhase ?? 0;
+      const amp = p.data?.wobbleAmp ?? 1;
+      const originX = p.data?.originX ?? p.x;
+      p.x = originX + Math.sin(elapsed * 3e-3 + phase) * amp * 20;
+      if (p.y > 600) {
+        p.opacity -= 0.02;
+        if (p.opacity < 0) p.opacity = 0;
+      }
+      if (p.opacity > 0.01) {
+        anyVisible = true;
+      }
+    }
+    return anyVisible;
+  },
+  render(ctx, particles) {
+    for (const p of particles) {
+      if (p.opacity < 0.01 || !p.emoji) continue;
+      ctx.save();
+      ctx.globalAlpha = p.opacity;
+      ctx.font = `${p.size}px serif`;
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(p.emoji, p.x, p.y);
+      ctx.restore();
+    }
+  }
+};
+
+// src/celebrations/effects/fireworks.ts
+var PARTICLES_PER_BURST = { light: 20, medium: 40, heavy: 80 };
+var BURST_COUNTS = { light: 3, medium: 4, heavy: 5 };
+var fireworksEffect = {
+  init(width, height, config) {
+    const perBurst = PARTICLES_PER_BURST[config.intensity];
+    const burstCount = BURST_COUNTS[config.intensity];
+    const colors = config.colors.length > 0 ? config.colors : ["#ff4444", "#44ff44", "#4444ff"];
+    const particles = [];
+    for (let b = 0; b < burstCount; b++) {
+      const cx = Math.random() * width * 0.8 + width * 0.1;
+      const cy = Math.random() * height * 0.6;
+      const burstColor = colors[Math.floor(Math.random() * colors.length)];
+      for (let i = 0; i < perBurst; i++) {
+        const angle = Math.PI * 2 * i / perBurst + (Math.random() - 0.5) * 0.3;
+        const speed = Math.random() * 3 + 2;
+        particles.push({
+          x: cx,
+          y: cy,
+          vx: Math.cos(angle) * speed,
+          vy: Math.sin(angle) * speed,
+          rotation: 0,
+          rotationSpeed: 0,
+          size: Math.random() * 3 + 2,
+          color: burstColor,
+          opacity: 1,
+          shape: "circle",
+          data: { centerX: cx, centerY: cy }
+        });
+      }
+    }
+    return particles;
+  },
+  update(particles, _dt, _elapsed) {
+    let anyVisible = false;
+    for (const p of particles) {
+      p.vx *= 0.97;
+      p.vy *= 0.97;
+      p.vy += 0.03;
+      p.x += p.vx;
+      p.y += p.vy;
+      p.opacity -= 8e-3;
+      if (p.opacity < 0) p.opacity = 0;
+      if (p.opacity > 0.01) {
+        anyVisible = true;
+      }
+    }
+    return anyVisible;
+  },
+  render(ctx, particles) {
+    for (const p of particles) {
+      if (p.opacity < 0.01) continue;
+      ctx.save();
+      ctx.globalAlpha = p.opacity;
+      ctx.fillStyle = p.color;
+      ctx.shadowBlur = 12;
+      ctx.shadowColor = p.color;
+      ctx.beginPath();
+      ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2);
+      ctx.fill();
+      ctx.restore();
+    }
+  }
+};
+
+// src/celebrations/effects/sparkles.ts
+var INTENSITY_COUNTS3 = { light: 30, medium: 60, heavy: 120 };
+var sparklesEffect = {
+  init(width, height, config) {
+    const count = INTENSITY_COUNTS3[config.intensity];
+    const colors = config.colors.length > 0 ? config.colors : ["#ffd700", "#ffffff", "#fffacd"];
+    const particles = [];
+    for (let i = 0; i < count; i++) {
+      particles.push({
+        x: Math.random() * width,
+        y: Math.random() * height,
+        vx: (Math.random() - 0.5) * 0.3,
+        vy: -(Math.random() * 0.5 + 0.2),
+        rotation: Math.random() * Math.PI * 2,
+        rotationSpeed: (Math.random() - 0.5) * 0.1,
+        size: Math.random() * 4 + 2,
+        color: colors[Math.floor(Math.random() * colors.length)],
+        opacity: Math.random() * 0.5 + 0.5,
+        shape: "circle",
+        data: {
+          /** Phase offset for sine-wave twinkle */
+          phase: Math.random() * Math.PI * 2,
+          /** Base opacity before twinkle modulation */
+          baseOpacity: Math.random() * 0.5 + 0.5
         }
+      });
+    }
+    return particles;
+  },
+  update(particles, _dt, elapsed) {
+    let anyVisible = false;
+    for (const p of particles) {
+      p.x += p.vx;
+      p.y += p.vy;
+      p.rotation += p.rotationSpeed;
+      if (p.data) {
+        p.data.baseOpacity = (p.data.baseOpacity ?? 1) - 1e-3;
+        if (p.data.baseOpacity < 0) p.data.baseOpacity = 0;
+      }
+      const phase = p.data?.phase ?? 0;
+      const baseOpacity = p.data?.baseOpacity ?? 1;
+      if (baseOpacity <= 0.01) {
+        p.opacity = 0;
+      } else {
+        const twinkle = Math.sin(elapsed * 5e-3 + phase) * 0.4 + 0.6;
+        p.opacity = baseOpacity * twinkle;
+      }
+      if (p.opacity > 0.01) {
+        anyVisible = true;
+      }
+    }
+    return anyVisible;
+  },
+  render(ctx, particles) {
+    for (const p of particles) {
+      if (p.opacity < 0.01) continue;
+      ctx.save();
+      ctx.globalAlpha = p.opacity;
+      ctx.fillStyle = p.color;
+      ctx.translate(p.x, p.y);
+      ctx.rotate(p.rotation);
+      const s = p.size;
+      ctx.beginPath();
+      ctx.moveTo(0, -s);
+      ctx.lineTo(s * 0.3, -s * 0.3);
+      ctx.lineTo(s, 0);
+      ctx.lineTo(s * 0.3, s * 0.3);
+      ctx.lineTo(0, s);
+      ctx.lineTo(-s * 0.3, s * 0.3);
+      ctx.lineTo(-s, 0);
+      ctx.lineTo(-s * 0.3, -s * 0.3);
+      ctx.closePath();
+      ctx.fill();
+      ctx.restore();
     }
-    const handle = showHighlight(anchorEl, context.overlayRoot, {
-        paddingPx: action.style?.paddingPx ?? 12,
-        radiusPx: action.style?.radiusPx ?? 12,
-        scrimOpacity: action.style?.scrimOpacity ?? 0.55,
-        ringColor,
-        blocking: action.blocking ?? false,
-        onClickOutside: action.onClickOutside ?? true,
-        onEsc: action.onEsc ?? true,
-        onDismiss: () => {
-            anchorEl.setAttribute('data-syntro-highlight-dismissed', 'true');
-        },
+  }
+};
+
+// src/celebrations/engine.ts
+var CelebrationEngine = class {
+  constructor() {
+    this.canvas = null;
+    this.ctx = null;
+    this.rafId = null;
+    this.particles = [];
+    this.startTime = 0;
+    this.lastFrame = 0;
+    this.duration = 0;
+    this.effect = null;
+    this.container = null;
+  }
+  start(container, effect, config) {
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+    if (prefersReducedMotion) {
+      return;
+    }
+    this.container = container;
+    this.effect = effect;
+    this.duration = config.duration;
+    const canvas = document.createElement("canvas");
+    canvas.setAttribute("data-syntro-celebrate", "");
+    Object.assign(canvas.style, {
+      position: "fixed",
+      inset: "0",
+      pointerEvents: "none",
+      zIndex: "2147483646"
     });
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:highlight',
-        anchorId: action.anchorId,
+    const dpr = window.devicePixelRatio || 1;
+    const width = window.innerWidth;
+    const height = window.innerHeight;
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+    canvas.style.width = `${width}px`;
+    canvas.style.height = `${height}px`;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      return;
+    }
+    ctx.scale(dpr, dpr);
+    this.canvas = canvas;
+    this.ctx = ctx;
+    container.appendChild(canvas);
+    this.particles = effect.init(width, height, config);
+    this.startTime = performance.now();
+    this.lastFrame = this.startTime;
+    this.tick = this.tick.bind(this);
+    this.rafId = requestAnimationFrame(this.tick);
+  }
+  stop() {
+    if (this.rafId !== null) {
+      cancelAnimationFrame(this.rafId);
+      this.rafId = null;
+    }
+    if (this.canvas && this.container) {
+      this.canvas.remove();
+      this.canvas = null;
+    }
+    this.ctx = null;
+    this.effect = null;
+    this.container = null;
+    this.particles = [];
+  }
+  tick(now) {
+    if (!this.ctx || !this.canvas || !this.effect) return;
+    const elapsed = now - this.startTime;
+    const dt = now - this.lastFrame;
+    this.lastFrame = now;
+    if (elapsed >= this.duration) {
+      this.stop();
+      return;
+    }
+    const width = this.canvas.width / (window.devicePixelRatio || 1);
+    const height = this.canvas.height / (window.devicePixelRatio || 1);
+    this.ctx.clearRect(0, 0, width, height);
+    const alive = this.effect.update(this.particles, dt, elapsed);
+    if (!alive) {
+      this.stop();
+      return;
+    }
+    this.effect.render(this.ctx, this.particles);
+    this.rafId = requestAnimationFrame(this.tick);
+  }
+};
+
+// src/celebrations/index.ts
+var FALLBACK_COLORS = [
+  "#ff0000",
+  "#00ff00",
+  "#0000ff",
+  "#ffff00",
+  "#ff00ff",
+  "#00ffff",
+  "#ff8800",
+  "#8800ff"
+];
+function buildThemePalette(primary, hover) {
+  return [primary, hover, `${primary}cc`, `${hover}cc`, "#ffffff", `${primary}80`];
+}
+function readThemeColors(overlayRoot) {
+  try {
+    const styles = getComputedStyle(overlayRoot);
+    const primary = styles.getPropertyValue("--sc-color-primary")?.trim();
+    const hover = styles.getPropertyValue("--sc-color-primary-hover")?.trim();
+    if (primary?.startsWith("#") && primary.length >= 7) {
+      return buildThemePalette(primary, hover || primary);
+    }
+  } catch {
+  }
+  return null;
+}
+var effectRegistry = /* @__PURE__ */ new Map([
+  ["confetti", confettiEffect],
+  ["fireworks", fireworksEffect],
+  ["sparkles", sparklesEffect],
+  ["emoji-rain", emojiRainEffect]
+]);
+var executeCelebrate = async (action, context) => {
+  const effect = effectRegistry.get(action.effect);
+  if (!effect) {
+    console.warn(
+      `[adaptive-overlays] Unknown celebration effect: "${action.effect}". Available: ${[...effectRegistry.keys()].join(", ")}`
+    );
+    return { cleanup: () => {
+    } };
+  }
+  const colors = action.colors ?? readThemeColors(context.overlayRoot) ?? FALLBACK_COLORS;
+  const config = {
+    duration: action.duration ?? 3e3,
+    intensity: action.intensity ?? "medium",
+    colors,
+    props: action.props
+  };
+  const engine = new CelebrationEngine();
+  engine.start(context.overlayRoot, effect, config);
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "overlays:celebrate",
+    effect: action.effect
+  });
+  return {
+    cleanup: () => {
+      engine.stop();
+    }
+  };
+};
+
+// src/executors/tour.ts
+var ACTIVE_TOUR_KEY = "syntro_active_tour";
+var activeTours = /* @__PURE__ */ new Map();
+function getTourState(tourId) {
+  try {
+    const data = localStorage.getItem(ACTIVE_TOUR_KEY);
+    if (!data) return null;
+    const state = JSON.parse(data);
+    if (state.tourId !== tourId) return null;
+    return state;
+  } catch {
+    return null;
+  }
+}
+function saveTourState(state) {
+  try {
+    localStorage.setItem(ACTIVE_TOUR_KEY, JSON.stringify(state));
+  } catch {
+  }
+}
+function clearTourState() {
+  try {
+    localStorage.removeItem(ACTIVE_TOUR_KEY);
+  } catch {
+  }
+}
+function getCurrentRoute() {
+  return window.location.pathname;
+}
+function stepMatchesRoute(step) {
+  if (!step.route) return true;
+  const currentRoute = getCurrentRoute();
+  if (step.route.includes("*")) {
+    const pattern = new RegExp(`^${step.route.replace(/\*/g, ".*")}$`);
+    return pattern.test(currentRoute);
+  }
+  return currentRoute === step.route;
+}
+var executeTour = async (action, context) => {
+  const { tourId, steps, startStep, autoStart = true } = action;
+  if (steps.length === 0) {
+    throw new Error(`Tour "${tourId}" has no steps`);
+  }
+  if (activeTours.has(tourId)) {
+    return {
+      cleanup: async () => {
+        const existing = activeTours.get(tourId);
+        if (existing) {
+          await existing.cleanup();
+        }
+      }
+    };
+  }
+  if (!context.applyAction) {
+    throw new Error("Tour executor requires applyAction in context");
+  }
+  let state = getTourState(tourId);
+  const isResumingTour = !!state;
+  if (!isResumingTour && !autoStart) {
+    return {
+      cleanup: () => {
+      }
+    };
+  }
+  if (!state) {
+    state = {
+      tourId,
+      currentStepId: startStep || steps[0].id,
+      startedAt: Date.now()
+    };
+    saveTourState(state);
+  }
+  let currentStepIndex = steps.findIndex((s) => s.id === state.currentStepId);
+  if (currentStepIndex === -1) {
+    const initialStepId = startStep || steps[0].id;
+    currentStepIndex = steps.findIndex((s) => s.id === initialStepId);
+    if (currentStepIndex === -1) currentStepIndex = 0;
+    state.currentStepId = steps[currentStepIndex].id;
+    saveTourState(state);
+  }
+  const currentStep = steps[currentStepIndex];
+  if (!stepMatchesRoute(currentStep)) {
+    context.publishEvent("tour.waiting_for_route", {
+      tourId,
+      stepId: currentStep.id,
+      expectedRoute: currentStep.route,
+      currentRoute: getCurrentRoute()
     });
     return {
-        cleanup: () => {
-            handle.destroy();
-            anchorEl.removeAttribute('data-syntro-highlight');
-            anchorEl.removeAttribute('data-syntro-highlight-dismissed');
-        },
+      cleanup: () => {
+      }
+    };
+  }
+  let isDestroyed = false;
+  let currentActionHandle = null;
+  let eventUnsubscribe = null;
+  let routeWatcher = null;
+  const cleanupCurrentStep = async () => {
+    if (eventUnsubscribe) {
+      eventUnsubscribe();
+      eventUnsubscribe = null;
+    }
+    if (currentActionHandle?.isApplied()) {
+      await currentActionHandle.revert();
+      currentActionHandle = null;
+    }
+  };
+  const advanceToStep = async (nextStepId) => {
+    if (isDestroyed) return;
+    await cleanupCurrentStep();
+    if (nextStepId === "end") {
+      clearTourState();
+      context.publishEvent("tour.completed", {
+        tourId,
+        totalSteps: steps.length
+      });
+      isDestroyed = true;
+      return;
+    }
+    const nextStep = steps.find((s) => s.id === nextStepId);
+    if (!nextStep) {
+      console.error(`[Tour] Step "${nextStepId}" not found`);
+      return;
+    }
+    state.currentStepId = nextStepId;
+    saveTourState(state);
+    context.publishEvent("tour.step_changed", {
+      tourId,
+      previousStepId: currentStep.id,
+      nextStepId
+    });
+    if (nextStep.route && nextStep.route !== getCurrentRoute()) {
+      context.publishEvent("tour.awaiting_navigation", {
+        tourId,
+        stepId: nextStepId,
+        targetRoute: nextStep.route
+      });
+      return;
+    }
+    await executeStep(nextStep);
+  };
+  const executeStep = async (step) => {
+    if (isDestroyed) return;
+    context.publishEvent("tour.step_started", {
+      tourId,
+      stepId: step.id,
+      stepIndex: steps.findIndex((s) => s.id === step.id),
+      totalSteps: steps.length
+    });
+    try {
+      currentActionHandle = await context.applyAction(step.action);
+    } catch (error) {
+      console.error(`[Tour] Failed to execute step "${step.id}":`, error);
+      context.publishEvent("tour.step_failed", {
+        tourId,
+        stepId: step.id,
+        error: String(error)
+      });
+      return;
+    }
+    if (step.onAction && context.subscribeEvent) {
+      eventUnsubscribe = context.subscribeEvent("action.modal_cta_clicked", (props) => {
+        const actionId = props?.actionId;
+        if (actionId && step.onAction) {
+          const nextStepId = step.onAction[actionId];
+          if (nextStepId) {
+            advanceToStep(nextStepId);
+          }
+        }
+      });
+      const tooltipUnsubscribe = context.subscribeEvent("action.tooltip_cta_clicked", (props) => {
+        const actionId = props?.actionId;
+        if (actionId && step.onAction) {
+          const nextStepId = step.onAction[actionId];
+          if (nextStepId) {
+            advanceToStep(nextStepId);
+          }
+        }
+      });
+      const originalUnsubscribe = eventUnsubscribe;
+      eventUnsubscribe = () => {
+        originalUnsubscribe();
+        tooltipUnsubscribe();
+      };
+    }
+  };
+  const setupRouteWatcher = () => {
+    let lastPath = getCurrentRoute();
+    const checkRoute = () => {
+      const currentPath = getCurrentRoute();
+      if (currentPath !== lastPath) {
+        lastPath = currentPath;
+        context.publishEvent("tour.route_changed", {
+          tourId,
+          newRoute: currentPath
+        });
+      }
     };
+    if (context.subscribeNavigation) {
+      return context.subscribeNavigation(() => checkRoute());
+    }
+    window.addEventListener("popstate", checkRoute);
+    const origPushState = history.pushState.bind(history);
+    const origReplaceState = history.replaceState.bind(history);
+    history.pushState = (...args) => {
+      origPushState(...args);
+      queueMicrotask(checkRoute);
+    };
+    history.replaceState = (...args) => {
+      origReplaceState(...args);
+      queueMicrotask(checkRoute);
+    };
+    return () => {
+      window.removeEventListener("popstate", checkRoute);
+      history.pushState = origPushState;
+      history.replaceState = origReplaceState;
+    };
+  };
+  routeWatcher = setupRouteWatcher();
+  if (!isResumingTour) {
+    context.publishEvent("tour.started", {
+      tourId,
+      totalSteps: steps.length,
+      startStepId: state.currentStepId
+    });
+  } else {
+    context.publishEvent("tour.resumed", {
+      tourId,
+      stepId: state.currentStepId
+    });
+  }
+  await executeStep(currentStep);
+  const cleanup = async () => {
+    isDestroyed = true;
+    activeTours.delete(tourId);
+    await cleanupCurrentStep();
+    if (routeWatcher) {
+      routeWatcher();
+    }
+    context.publishEvent("tour.paused", {
+      tourId,
+      stepId: state.currentStepId
+    });
+  };
+  activeTours.set(tourId, { cleanup });
+  return { cleanup };
+};
+
+// ../../design-system/dist/tokens/colors.js
+var base = {
+  white: "#ffffff",
+  black: "#000000"
+};
+var brand = {
+  0: "#2c0b0a",
+  1: "#5b1715",
+  2: "#89221f",
+  3: "#b72e2a",
+  4: "#d44844",
+  5: "#dd6d69",
+  6: "#e5918f",
+  7: "#eeb6b4",
+  8: "#f6dada",
+  9: "#faebea"
+};
+var slateGrey = {
+  0: "#07080a",
+  1: "#0f1318",
+  2: "#0e1114",
+  3: "#1c222a",
+  4: "#2b333f",
+  5: "#394454",
+  6: "#475569",
+  7: "#677384",
+  8: "#87919f",
+  9: "#a8afba",
+  10: "#cbd0d7",
+  11: "#e8eaee",
+  12: "#f6f7f9"
+};
+var green = {
+  0: "#07230a",
+  1: "#0e4514",
+  2: "#16681e",
+  3: "#1d8a28",
+  4: "#24ad32",
+  5: "#4fbd5a",
+  6: "#7acd82",
+  7: "#a5deab",
+  8: "#d0eed3",
+  9: "#e5f6e7"
+};
+var yellow = {
+  0: "#301f09",
+  1: "#5f3e12",
+  2: "#8f5e1b",
+  3: "#be7d24",
+  4: "#ee9c2d",
+  5: "#f1b057",
+  6: "#f5c481",
+  7: "#f8d7ab",
+  8: "#fcebd5",
+  9: "#fdf5ea"
+};
+var red = {
+  0: "#330707",
+  1: "#660f0e",
+  2: "#991616",
+  3: "#cc1e1d",
+  4: "#ff2524",
+  5: "#ff5150",
+  6: "#ff7c7c",
+  7: "#ffa8a7",
+  8: "#ffd3d3",
+  9: "#ffe9e9"
+};
+var blue = {
+  0: "#051533",
+  1: "#0a2a66",
+  2: "#0f3f98",
+  3: "#1454cb",
+  4: "#1969fe",
+  5: "#4787fe",
+  6: "#75a5fe",
+  7: "#a3c3ff",
+  8: "#d1e1ff",
+  9: "#e8f0ff"
+};
+var orange = {
+  0: "#662500",
+  1: "#993d00",
+  2: "#cc5800",
+  3: "#ff7700",
+  4: "#fea85d",
+  5: "#fec58f",
+  6: "#ffd6ae",
+  7: "#fee6cd",
+  8: "#fff1e1",
+  9: "#fff8f0"
+};
+var purple = {
+  0: "#151229",
+  1: "#2a2452",
+  2: "#40357c",
+  3: "#5547a5",
+  4: "#6a59ce",
+  5: "#887ad8",
+  6: "#a69be2",
+  7: "#c3bdeb",
+  8: "#e1def5",
+  9: "#f0eefa"
+};
+var pink = {
+  0: "#37091f",
+  1: "#69123c",
+  2: "#9b1c58",
+  3: "#cd2575",
+  4: "#ff2e92",
+  5: "#ff58a8",
+  6: "#ff82be",
+  7: "#ffabd3",
+  8: "#ffd5e9",
+  9: "#ffeaf4"
+};
+var text = {
+  primary: slateGrey[10],
+  secondary: slateGrey[9],
+  tertiary: slateGrey[8]
+};
+var background = {
+  primary: slateGrey[2],
+  secondary: slateGrey[0]
+};
+var border = {
+  primary: slateGrey[4],
+  secondary: slateGrey[3]
+};
+var button = {
+  primary: {
+    text: base.white,
+    icon: base.white,
+    border: brand[3],
+    backgroundDefault: brand[3],
+    backgroundHover: brand[2]
+  },
+  neutral: {
+    text: slateGrey[10],
+    textHover: base.white,
+    icon: slateGrey[10],
+    iconHover: base.white,
+    border: slateGrey[4],
+    background: slateGrey[2]
+  },
+  link: {
+    text: base.white,
+    icon: base.white,
+    hover: brand[5]
+  },
+  error: {
+    text: red[5],
+    hover: red[6]
+  },
+  success: {
+    text: green[5],
+    hover: green[6]
+  }
+};
+var badge = {
+  slateGrey: {
+    content: slateGrey[10],
+    pillOutline: slateGrey[10],
+    borderPrimary: slateGrey[5],
+    borderSecondary: slateGrey[5],
+    background: slateGrey[3]
+  },
+  brand: {
+    content: brand[9],
+    pillOutline: brand[9],
+    borderPrimary: brand[6],
+    borderSecondary: brand[6],
+    background: brand[0]
+  },
+  red: {
+    content: red[8],
+    pillOutline: red[4],
+    borderPrimary: red[2],
+    borderSecondary: red[2],
+    background: red[0]
+  },
+  yellow: {
+    content: yellow[8],
+    pillOutline: yellow[4],
+    borderPrimary: yellow[2],
+    borderSecondary: yellow[2],
+    background: yellow[0]
+  },
+  green: {
+    content: green[8],
+    pillOutline: green[4],
+    borderPrimary: green[2],
+    borderSecondary: green[2],
+    background: green[0]
+  },
+  purple: {
+    content: purple[8],
+    pillOutline: purple[4],
+    borderPrimary: purple[2],
+    borderSecondary: purple[2],
+    background: purple[0]
+  },
+  blue: {
+    content: blue[8],
+    pillOutline: blue[4],
+    borderPrimary: blue[2],
+    borderSecondary: blue[2],
+    background: blue[0]
+  },
+  orange: {
+    content: orange[8],
+    pillOutline: orange[4],
+    borderPrimary: orange[2],
+    borderSecondary: orange[2],
+    background: orange[0]
+  },
+  pink: {
+    content: pink[8],
+    pillOutline: pink[4],
+    borderPrimary: pink[2],
+    borderSecondary: pink[2],
+    background: pink[0]
+  }
+};
+var badgeBanner = {
+  green: {
+    content: green[8],
+    border: green[2],
+    background: green[0]
+  },
+  yellow: {
+    content: yellow[8],
+    border: yellow[2],
+    background: yellow[0]
+  },
+  red: {
+    content: red[8],
+    border: red[2],
+    background: red[0]
+  }
+};
+var alert = {
+  green: {
+    content: green[1],
+    background: green[9]
+  },
+  yellow: {
+    content: yellow[1],
+    background: yellow[9]
+  },
+  red: {
+    content: red[1],
+    background: red[9]
+  }
+};
+var tag = {
+  content: slateGrey[10],
+  border: slateGrey[4],
+  background: slateGrey[3]
+};
+var menu = {
+  backgroundDefault: slateGrey[2],
+  backgroundHover: slateGrey[1],
+  selected: slateGrey[3]
+};
+var inputDropdown = {
+  background: slateGrey[2],
+  icon: slateGrey[10],
+  borderDefault: slateGrey[4],
+  borderSelected: brand[3],
+  textLabel: slateGrey[9],
+  textPlaceholder: slateGrey[8],
+  textHint: slateGrey[8]
+};
+var inputField = {
+  backgroundDefault: slateGrey[2],
+  backgroundDisabled: slateGrey[0],
+  textLabel: slateGrey[9],
+  textPlaceholder: slateGrey[8],
+  textHint: slateGrey[8],
+  textError: red[5],
+  iconDefault: slateGrey[9],
+  iconPlaceholder: slateGrey[10],
+  iconError: red[5],
+  borderDefault: slateGrey[4],
+  borderSelected: brand[3],
+  borderError: red[5]
+};
+var toggle = {
+  handleDefault: base.white,
+  handleDisabled: slateGrey[10],
+  off: {
+    backgroundDefault: slateGrey[4],
+    backgroundHover: slateGrey[5],
+    backgroundDisabled: slateGrey[4]
+  },
+  on: {
+    backgroundDefault: green[3],
+    backgroundHover: green[2],
+    backgroundDisabled: slateGrey[4]
+  }
+};
+var checkbox = {
+  off: {
+    backgroundDefault: "#00000000",
+    backgroundHover: slateGrey[5],
+    backgroundDisabled: slateGrey[2],
+    border: slateGrey[6]
+  },
+  on: {
+    backgroundDefault: green[0],
+    backgroundHover: green[1],
+    backgroundDisabled: slateGrey[2],
+    border: green[3]
+  }
+};
+var avatar = {
+  content: slateGrey[10],
+  background: slateGrey[4]
 };
-/**
- * Execute a pulse action
- */
-export const executePulse = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    const duration = action.duration ?? 4000;
-    // Wait one frame so ThemeProvider's useEffect has injected CSS vars
-    await new Promise((resolve) => requestAnimationFrame(resolve));
-    // Read primary + secondary colors from theme (shadow DOM overlay root has --sc-* vars)
-    const parseHex = (hex) => ({
-        r: parseInt(hex.slice(1, 3), 16),
-        g: parseInt(hex.slice(3, 5), 16),
-        b: parseInt(hex.slice(5, 7), 16),
+var progressBarSlider = {
+  background: slateGrey[4],
+  active: green[3]
+};
+var card = {
+  background: slateGrey[1],
+  content: slateGrey[9],
+  border: slateGrey[4]
+};
+var sidebar = {
+  backgroundDefault: slateGrey[1],
+  backgroundHover: slateGrey[3],
+  backgroundActive: slateGrey[4],
+  border: slateGrey[4],
+  contentPrimary: slateGrey[10],
+  contentSecondary: slateGrey[9],
+  contentTertiary: slateGrey[8]
+};
+var modal = {
+  background: slateGrey[1],
+  content: slateGrey[9],
+  border: slateGrey[4]
+};
+var tab = {
+  activeBackground: slateGrey[3],
+  activeContent: brand[5],
+  inactiveContent: slateGrey[9],
+  border: slateGrey[4]
+};
+var table = {
+  header: {
+    textDefault: slateGrey[9],
+    textHover: slateGrey[8],
+    backgroundDefault: slateGrey[1]
+  },
+  border: slateGrey[4],
+  cell: {
+    textPrimary: slateGrey[10],
+    textSecondary: slateGrey[9],
+    backgroundDefault: slateGrey[2],
+    backgroundHover: slateGrey[1]
+  }
+};
+var breadcrumbs = {
+  textPrimaryDefault: slateGrey[10],
+  textPrimaryHover: slateGrey[10],
+  textSecondaryDefault: slateGrey[8],
+  textSecondaryHover: slateGrey[9],
+  iconPrimary: slateGrey[10],
+  iconSecondary: slateGrey[8]
+};
+var loadingIndicator = {
+  background: green[1],
+  active: green[5]
+};
+var datePicker = {
+  textDefault: slateGrey[10],
+  textSelected: base.white,
+  textDisabled: slateGrey[7],
+  backgroundDefault: slateGrey[2],
+  backgroundMiddle: slateGrey[3],
+  backgroundSelected: brand[3],
+  border: slateGrey[4]
+};
+var scroll = slateGrey[9];
+
+// ../../design-system/dist/tokens/panel-shell.js
+var fab = {
+  /** Diameter in pixels. */
+  size: 56,
+  /** Inset from the panel's top-left corner in pixels. */
+  inset: 12,
+  /** Background color (always the brand black). */
+  background: base.black,
+  /** Icon / logo color. */
+  color: base.white,
+  /** Border — 2px brand red ring. */
+  border: `2px solid ${brand[3]}`,
+  /** Shadow when the panel is open (inner ring for "active" state). */
+  shadowOpen: "0 4px 24px rgba(0,0,0,0.6), 0 0 0 2px rgba(255,255,255,0.08)",
+  /** Shadow when the panel is closed. */
+  shadowClosed: "0 4px 24px rgba(0,0,0,0.6)"
+};
+
+// src/highlight.ts
+var supportsPathClip = typeof CSS !== "undefined" && CSS.supports?.("clip-path", "path('M0 0 H1 V1 Z')");
+function showHighlight(anchorEl, overlayRoot, opts) {
+  const padding = opts?.paddingPx ?? 12;
+  const radius = opts?.radiusPx ?? 12;
+  const opacity = Math.min(Math.max(opts?.scrimOpacity ?? 0.55, 0), 1);
+  const ringColor = opts?.ringColor ?? `var(--syntro-ring, ${blue[5]})`;
+  const blocking = opts?.blocking ?? false;
+  const onClickOutside = opts?.onClickOutside ?? true;
+  const onEsc = opts?.onEsc ?? true;
+  const rootStyles = getComputedStyle(document.documentElement);
+  const tokenScrim = rootStyles.getPropertyValue("--syntro-spotlight-backdrop").trim();
+  const tokenRing = rootStyles.getPropertyValue("--syntro-ring").trim();
+  const scrim = document.createElement("div");
+  scrim.className = "syntro-spotlight-scrim";
+  const needsPointerEvents = blocking || onClickOutside;
+  Object.assign(scrim.style, {
+    position: "fixed",
+    inset: "0",
+    zIndex: "2147483646",
+    pointerEvents: needsPointerEvents ? "auto" : "none",
+    background: tokenScrim || `rgba(2, 6, 23, ${opacity})`,
+    transition: "opacity 220ms ease",
+    opacity: "0"
+  });
+  overlayRoot.appendChild(scrim);
+  requestAnimationFrame(() => scrim.style.opacity = "1");
+  const ring = document.createElement("div");
+  ring.className = "syntro-spotlight-ring";
+  Object.assign(ring.style, {
+    position: "fixed",
+    pointerEvents: "none",
+    borderRadius: `${radius}px`,
+    border: `2px solid ${ringColor || tokenRing || blue[5]}`,
+    boxShadow: `0 0 0 4px rgba(255,255,255,0.35)`,
+    zIndex: "2147483647",
+    transition: "all 220ms cubic-bezier(0.16,1,0.3,1)"
+  });
+  overlayRoot.appendChild(ring);
+  const fallbackSlices = [];
+  if (!supportsPathClip) {
+    for (let i = 0; i < 4; i++) {
+      const slice = document.createElement("div");
+      slice.style.position = "fixed";
+      slice.style.background = "inherit";
+      fallbackSlices.push(slice);
+      scrim.appendChild(slice);
+    }
+  }
+  const setClipPath = (path) => {
+    scrim.style.clipPath = path;
+    scrim.style.webkitClipPath = path;
+  };
+  const update = () => {
+    if (!anchorEl.isConnected) {
+      handle.destroy();
+      return;
+    }
+    const rect = anchorEl.getBoundingClientRect();
+    const x = rect.left - padding;
+    const y = rect.top - padding;
+    const w = rect.width + padding * 2;
+    const h = rect.height + padding * 2;
+    Object.assign(ring.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      width: `${w}px`,
+      height: `${h}px`
     });
-    const fallback = { r: 79, g: 70, b: 229 }; // indigo-600
-    let primary = fallback;
-    let secondary = null;
+    if (supportsPathClip) {
+      const vw = window.innerWidth;
+      const vh = window.innerHeight;
+      const r = Math.min(radius, w / 2, h / 2);
+      const outer = `M 0 0 L ${vw} 0 L ${vw} ${vh} L 0 ${vh} Z`;
+      const inner = `M ${x + r} ${y} A ${r} ${r} 0 0 0 ${x} ${y + r} L ${x} ${y + h - r} A ${r} ${r} 0 0 0 ${x + r} ${y + h} L ${x + w - r} ${y + h} A ${r} ${r} 0 0 0 ${x + w} ${y + h - r} L ${x + w} ${y + r} A ${r} ${r} 0 0 0 ${x + w - r} ${y} L ${x + r} ${y} Z`;
+      setClipPath(`path('${outer} ${inner}')`);
+    } else {
+      const [top, right, bottom, left] = fallbackSlices;
+      Object.assign(top.style, {
+        left: "0px",
+        top: "0px",
+        width: "100vw",
+        height: `${y}px`
+      });
+      Object.assign(bottom.style, {
+        left: "0px",
+        top: `${y + h}px`,
+        width: "100vw",
+        height: `${Math.max(0, window.innerHeight - (y + h))}px`
+      });
+      Object.assign(left.style, {
+        left: "0px",
+        top: `${y}px`,
+        width: `${x}px`,
+        height: `${h}px`
+      });
+      Object.assign(right.style, {
+        left: `${x + w}px`,
+        top: `${y}px`,
+        width: `${Math.max(0, window.innerWidth - (x + w))}px`,
+        height: `${h}px`
+      });
+    }
+  };
+  const ro = new ResizeObserver(() => requestAnimationFrame(update));
+  ro.observe(anchorEl);
+  const onScroll = () => requestAnimationFrame(update);
+  const onResize = () => requestAnimationFrame(update);
+  window.addEventListener("scroll", onScroll, true);
+  window.addEventListener("resize", onResize);
+  const onKey = (e) => {
+    if (e.key === "Escape" && onEsc) {
+      opts?.onDismiss?.();
+      handle.destroy();
+    }
+  };
+  if (onEsc) {
+    window.addEventListener("keydown", onKey);
+  }
+  const onClick = (event) => {
+    if (blocking) {
+      event.preventDefault();
+      event.stopPropagation();
+    } else if (onClickOutside) {
+      opts?.onDismiss?.();
+      handle.destroy();
+    }
+  };
+  scrim.addEventListener("click", onClick);
+  const handle = {
+    destroy() {
+      ro.disconnect();
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+      if (onEsc) {
+        window.removeEventListener("keydown", onKey);
+      }
+      scrim.removeEventListener("click", onClick);
+      scrim.style.pointerEvents = "none";
+      scrim.style.opacity = "0";
+      setTimeout(() => {
+        try {
+          scrim.remove();
+        } catch {
+        }
+        try {
+          ring.remove();
+        } catch {
+        }
+      }, 220);
+    }
+  };
+  update();
+  return handle;
+}
+
+// src/sanitizer.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set([
+  "b",
+  "strong",
+  "i",
+  "em",
+  "u",
+  "span",
+  "div",
+  "p",
+  "br",
+  "ul",
+  "ol",
+  "li",
+  "code",
+  "pre",
+  "small",
+  "sup",
+  "sub",
+  "a",
+  "button",
+  // SVG elements (for inline Lucide icons in config HTML)
+  "svg",
+  "path",
+  "circle",
+  "line",
+  "polyline",
+  "polygon",
+  "rect",
+  "g"
+]);
+function sanitizeHtml(html2) {
+  const hasNative = typeof window.Sanitizer === "function";
+  if (hasNative) {
     try {
-        const styles = getComputedStyle(context.overlayRoot);
-        const pHex = styles.getPropertyValue('--sc-color-primary')?.trim();
-        const sHex = styles.getPropertyValue('--sc-color-primary-hover')?.trim();
-        if (pHex?.startsWith('#') && pHex.length >= 7) {
-            primary = parseHex(pHex);
+      const s = new window.Sanitizer({});
+      const frag = s.sanitizeToFragment(html2);
+      const div = document.createElement("div");
+      div.append(frag);
+      return div.innerHTML;
+    } catch {
+    }
+  }
+  const tpl = document.createElement("template");
+  tpl.innerHTML = html2;
+  const root = tpl.content;
+  const walker = document.createTreeWalker(root, NodeFilter.SHOW_ELEMENT, null);
+  const toRemove = [];
+  while (walker.nextNode()) {
+    const el = walker.currentNode;
+    const tag2 = el.tagName.toLowerCase();
+    if (!ALLOWED_TAGS.has(tag2)) {
+      toRemove.push(el);
+      continue;
+    }
+    for (const attr of Array.from(el.attributes)) {
+      const name = attr.name.toLowerCase();
+      const value = attr.value.trim().toLowerCase();
+      const isEvent = name.startsWith("on");
+      const isJsUrl = (name === "href" || name === "src") && value.startsWith("javascript:");
+      if (isEvent || isJsUrl) {
+        el.removeAttribute(attr.name);
+      }
+    }
+  }
+  for (const el of toRemove) {
+    while (el.firstChild) {
+      el.parentNode?.insertBefore(el.firstChild, el);
+    }
+    el.remove();
+  }
+  return tpl.innerHTML;
+}
+
+// src/modal.ts
+var V = {
+  bg: "var(--sc-overlay-background, #ffffff)",
+  title: "var(--sc-overlay-title-color, var(--sc-overlay-text-color, #111827))",
+  text: "var(--sc-overlay-text-color, #4b5563)",
+  accent: "var(--sc-color-primary, #4f46e5)",
+  radius: "var(--sc-border-radius, 12px)"
+};
+var executeModal = async (action, context) => {
+  const { content, size = "md", blocking = false, scrim, dismiss, ctaButtons } = action;
+  const scrimEl = document.createElement("div");
+  scrimEl.className = "syntro-modal-scrim";
+  scrimEl.style.cssText = `
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, ${scrim?.opacity ?? 0.6});
+    z-index: 2147483645;
+    opacity: 0;
+    transition: opacity 200ms ease-out;
+  `;
+  context.overlayRoot.appendChild(scrimEl);
+  const modal2 = document.createElement("div");
+  modal2.className = `syntro-modal syntro-modal-${size}`;
+  modal2.setAttribute("role", "dialog");
+  modal2.setAttribute("aria-modal", "true");
+  const sizeMap = { sm: "360px", md: "480px", lg: "640px" };
+  modal2.style.cssText = `
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) scale(0.95);
+    max-width: ${sizeMap[size]};
+    width: 90%;
+    background: ${V.bg};
+    border-radius: ${V.radius};
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    z-index: 2147483646;
+    opacity: 0;
+    transition: opacity 200ms ease-out, transform 200ms ease-out;
+    padding: 24px;
+  `;
+  let html2 = "";
+  if (content.title) {
+    html2 += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml(content.title)}</h2>`;
+  }
+  html2 += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml(content.body)}</div>`;
+  if (dismiss?.closeButton !== false) {
+    html2 += `
+      <button class="syntro-modal-close" data-syntro-action="dismiss" style="
+        position: absolute;
+        top: 16px;
+        right: 16px;
+        background: none;
+        border: none;
+        cursor: pointer;
+        padding: 4px;
+        color: ${V.text};
+        opacity: 0.6;
+      " aria-label="Close">
+        <svg width="20" height="20" viewBox="0 0 20 20" fill="currentColor">
+          <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"/>
+        </svg>
+      </button>
+    `;
+  }
+  if (ctaButtons && ctaButtons.length > 0) {
+    html2 += `<div class="syntro-modal-actions" style="display: flex; gap: 12px; margin-top: 24px; justify-content: flex-end;">`;
+    for (const btn of ctaButtons) {
+      const isPrimary = btn.primary ?? false;
+      html2 += `
+        <button
+          class="syntro-modal-btn ${isPrimary ? "syntro-modal-btn-primary" : ""}"
+          data-syntro-action="${sanitizeHtml(btn.actionId)}"
+          style="
+            padding: 10px 20px;
+            border-radius: 8px;
+            font-size: 14px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: background 150ms ease;
+            ${isPrimary ? `background: ${V.accent}; color: white; border: none;` : `background: transparent; color: ${V.accent}; border: 1px solid currentColor; opacity: 0.7;`}
+          "
+        >
+          ${sanitizeHtml(btn.label)}
+        </button>
+      `;
+    }
+    html2 += `</div>`;
+  }
+  modal2.innerHTML = html2;
+  context.overlayRoot.appendChild(modal2);
+  let actionClicked = null;
+  const actionBtns = modal2.querySelectorAll("[data-syntro-action]");
+  const actionHandler = (e) => {
+    const btn = e.currentTarget;
+    const actionId = btn.getAttribute("data-syntro-action");
+    if (actionId) {
+      actionClicked = actionId;
+      context.publishEvent("action.modal_cta_clicked", {
+        actionId
+      });
+      handle.destroy();
+    }
+  };
+  actionBtns.forEach((btn) => btn.addEventListener("click", actionHandler));
+  const onKey = (e) => {
+    if (e.key === "Escape" && dismiss?.onEsc !== false) {
+      handle.destroy();
+    }
+  };
+  window.addEventListener("keydown", onKey);
+  const onScrimClick = () => {
+    if (!blocking) {
+      handle.destroy();
+    }
+  };
+  scrimEl.addEventListener("click", onScrimClick);
+  const originalInert = [];
+  if (blocking) {
+    Array.from(document.body.children).forEach((el) => {
+      if (el !== context.overlayRoot && el.getAttribute("inert") === null && !el.querySelector("[data-syntro-editor-panel]") && !el.hasAttribute("data-syntro-editor-panel")) {
+        el.setAttribute("inert", "");
+        originalInert.push(el);
+      }
+    });
+  }
+  let timeoutId;
+  if (dismiss?.timeoutMs) {
+    timeoutId = setTimeout(() => {
+      handle.destroy();
+    }, dismiss.timeoutMs);
+  }
+  const focusableEls = modal2.querySelectorAll(
+    'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+  );
+  if (focusableEls.length > 0) {
+    requestAnimationFrame(() => focusableEls[0].focus());
+  }
+  requestAnimationFrame(() => {
+    scrimEl.style.opacity = "1";
+    modal2.style.opacity = "1";
+    modal2.style.transform = "translate(-50%, -50%) scale(1)";
+  });
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "overlays:modal",
+    size,
+    blocking
+  });
+  const handle = {
+    destroy() {
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+      }
+      window.removeEventListener("keydown", onKey);
+      scrimEl.removeEventListener("click", onScrimClick);
+      actionBtns.forEach((btn) => btn.removeEventListener("click", actionHandler));
+      originalInert.forEach((el) => el.removeAttribute("inert"));
+      modal2.style.pointerEvents = "none";
+      scrimEl.style.pointerEvents = "none";
+      modal2.style.opacity = "0";
+      modal2.style.transform = "translate(-50%, -50%) scale(0.95)";
+      scrimEl.style.opacity = "0";
+      setTimeout(() => {
+        try {
+          modal2.remove();
+        } catch {
+        }
+        try {
+          scrimEl.remove();
+        } catch {
+        }
+      }, 200);
+      context.publishEvent("action.modal_dismissed", {
+        actionClicked
+      });
+    }
+  };
+  return {
+    cleanup: () => {
+      handle.destroy();
+    }
+  };
+};
+
+// src/tooltip.ts
+import {
+  arrow as arrowMiddleware,
+  autoUpdate,
+  computePosition,
+  flip,
+  hide,
+  offset,
+  shift
+} from "@floating-ui/dom";
+function getAnchorReference(anchorEl) {
+  const rect = anchorEl.getBoundingClientRect();
+  const viewportWidth = window.innerWidth;
+  const viewportHeight = window.innerHeight;
+  const isLargeElement = rect.width > viewportWidth * 0.8 || rect.height > viewportHeight * 0.8;
+  if (!isLargeElement) {
+    return anchorEl;
+  }
+  const visibleLeft = Math.max(rect.left, 0);
+  const visibleTop = Math.max(rect.top, 0);
+  const visibleRight = Math.min(rect.right, viewportWidth);
+  const visibleBottom = Math.min(rect.bottom, viewportHeight);
+  const centerX = (visibleLeft + visibleRight) / 2;
+  const centerY = (visibleTop + visibleBottom) / 2;
+  return {
+    getBoundingClientRect() {
+      return {
+        width: 0,
+        height: 0,
+        x: centerX,
+        y: centerY,
+        top: centerY,
+        left: centerX,
+        right: centerX,
+        bottom: centerY
+      };
+    }
+  };
+}
+function showTooltip(anchorEl, overlayRoot, opts) {
+  if (!opts.trigger || opts.trigger === "immediate") {
+    const rect = anchorEl.getBoundingClientRect();
+    const isLargeElement = rect.width > window.innerWidth * 0.8 || rect.height > window.innerHeight * 0.8;
+    if (!isLargeElement) {
+      anchorEl.scrollIntoView({ behavior: "smooth", block: "center", inline: "center" });
+    }
+  }
+  const div = document.createElement("div");
+  div.className = "syntro-tooltip";
+  div.setAttribute("role", "tooltip");
+  div.innerHTML = sanitizeHtml(opts.html);
+  if (!opts.trigger || opts.trigger === "immediate") {
+    const closeBtn = document.createElement("button");
+    closeBtn.className = "syntro-tooltip-close";
+    closeBtn.setAttribute("aria-label", "Close");
+    closeBtn.textContent = "\xD7";
+    Object.assign(closeBtn.style, {
+      position: "absolute",
+      top: "4px",
+      right: "4px",
+      background: "none",
+      border: "none",
+      color: "inherit",
+      fontSize: "16px",
+      lineHeight: "1",
+      cursor: "pointer",
+      opacity: "0.6",
+      padding: "2px 4px"
+    });
+    closeBtn.addEventListener("mouseenter", () => {
+      closeBtn.style.opacity = "1";
+    });
+    closeBtn.addEventListener("mouseleave", () => {
+      closeBtn.style.opacity = "0.6";
+    });
+    closeBtn.addEventListener("click", () => handle.destroy());
+    div.style.position = "relative";
+    div.appendChild(closeBtn);
+  }
+  const actionBtns = div.querySelectorAll("[data-syntro-action]");
+  const actionHandler = (e) => {
+    const btn = e.currentTarget;
+    const actionId = btn.getAttribute("data-syntro-action");
+    if (actionId && opts.onAction) {
+      opts.onAction(actionId);
+    }
+  };
+  actionBtns.forEach((btn) => btn.addEventListener("click", actionHandler));
+  const arrowEl = document.createElement("div");
+  arrowEl.className = "syntro-tooltip-arrow";
+  div.appendChild(arrowEl);
+  overlayRoot.appendChild(div);
+  const middleware = [
+    offset(opts.offsetPx ?? 8),
+    flip(),
+    shift({ padding: 8 }),
+    hide(),
+    arrowMiddleware({ element: arrowEl })
+  ];
+  const placement = opts.placement && opts.placement !== "auto" ? opts.placement : "top";
+  const cleanup = autoUpdate(anchorEl, div, async () => {
+    if (!anchorEl.isConnected) {
+      handle.destroy();
+      return;
+    }
+    const currentAnchorRef = getAnchorReference(anchorEl);
+    const result = await computePosition(currentAnchorRef, div, {
+      placement,
+      strategy: "fixed",
+      middleware
+    });
+    const { x, y, strategy, middlewareData, placement: finalPlacement } = result;
+    Object.assign(div.style, {
+      left: `${x}px`,
+      top: `${y}px`,
+      position: strategy
+    });
+    if (middlewareData.arrow) {
+      const { x: arrowX, y: arrowY } = middlewareData.arrow;
+      const side = finalPlacement.split("-")[0];
+      const staticSide = {
+        top: "bottom",
+        right: "left",
+        bottom: "top",
+        left: "right"
+      };
+      Object.assign(arrowEl.style, {
+        left: arrowX != null ? `${arrowX}px` : "",
+        top: arrowY != null ? `${arrowY}px` : "",
+        right: "",
+        bottom: "",
+        [staticSide[side]]: "-4px"
+      });
+      const rotation = {
+        top: "0deg",
+        right: "90deg",
+        bottom: "180deg",
+        left: "270deg"
+      };
+      arrowEl.style.transform = `rotate(${rotation[side] || "0deg"})`;
+    }
+  });
+  const onKey = (e) => {
+    if (e.key === "Escape") handle.destroy();
+  };
+  window.addEventListener("keydown", onKey);
+  const originalInert = [];
+  if (opts.blocking) {
+    Array.from(document.body.children).forEach((el) => {
+      if (el !== overlayRoot && el.getAttribute("inert") === null) {
+        el.setAttribute("inert", "");
+        originalInert.push(el.id || el.tagName);
+      }
+    });
+    const focusableEls = Array.from(
+      div.querySelectorAll(
+        'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
+      )
+    );
+    if (focusableEls.length > 0) {
+      const firstFocusable = focusableEls[0];
+      const lastFocusable = focusableEls[focusableEls.length - 1];
+      const trapFocus = (e) => {
+        if (e.key !== "Tab") return;
+        if (e.shiftKey) {
+          if (document.activeElement === firstFocusable) {
+            lastFocusable.focus();
+            e.preventDefault();
+          }
+        } else if (document.activeElement === lastFocusable) {
+          firstFocusable.focus();
+          e.preventDefault();
         }
-        if (sHex?.startsWith('#') && sHex.length >= 7) {
-            secondary = parseHex(sHex);
+      };
+      div.addEventListener("keydown", trapFocus);
+      requestAnimationFrame(() => firstFocusable.focus());
+    }
+  }
+  const attachTrigger = () => {
+    if (opts.trigger === "hover") {
+      let hideTimeout = null;
+      const show = () => {
+        if (hideTimeout) {
+          clearTimeout(hideTimeout);
+          hideTimeout = null;
         }
+        div.style.visibility = "visible";
+        div.style.opacity = "1";
+      };
+      const scheduleHide = () => {
+        hideTimeout = setTimeout(() => {
+          div.style.visibility = "hidden";
+          div.style.opacity = "0";
+          hideTimeout = null;
+        }, 100);
+      };
+      div.style.visibility = "hidden";
+      div.style.opacity = "0";
+      div.style.transition = "opacity 200ms ease, visibility 200ms";
+      anchorEl.addEventListener("mouseenter", show);
+      anchorEl.addEventListener("mouseleave", scheduleHide);
+      div.addEventListener("mouseenter", show);
+      div.addEventListener("mouseleave", scheduleHide);
+      anchorEl.addEventListener("focus", show);
+      anchorEl.addEventListener("blur", scheduleHide);
+      return () => {
+        if (hideTimeout) clearTimeout(hideTimeout);
+        anchorEl.removeEventListener("mouseenter", show);
+        anchorEl.removeEventListener("mouseleave", scheduleHide);
+        div.removeEventListener("mouseenter", show);
+        div.removeEventListener("mouseleave", scheduleHide);
+        anchorEl.removeEventListener("focus", show);
+        anchorEl.removeEventListener("blur", scheduleHide);
+      };
     }
-    catch {
-        /* fallback to default */
-    }
-    // Inject/update pulse animation with theme colors
-    // Two-tone pulse when both primary and secondary are available
-    const existing = document.querySelector('[data-syntro-pulse-styles]');
-    if (existing)
-        existing.remove();
-    const style = document.createElement('style');
-    style.setAttribute('data-syntro-pulse-styles', '');
-    const { r: pr, g: pg, b: pb } = primary;
-    if (secondary) {
-        const { r: sr, g: sg, b: sb } = secondary;
-        style.textContent = `
+    if (opts.trigger === "click") {
+      const toggle2 = () => {
+        const isVisible = div.style.visibility === "visible";
+        if (isVisible) {
+          handle.destroy();
+        } else {
+          div.style.visibility = "visible";
+          div.style.opacity = "1";
+        }
+      };
+      div.style.visibility = "hidden";
+      div.style.opacity = "0";
+      div.style.transition = "opacity 200ms ease, visibility 200ms";
+      anchorEl.addEventListener("click", toggle2);
+      return () => anchorEl.removeEventListener("click", toggle2);
+    }
+    div.style.opacity = "0";
+    div.style.transition = "opacity 200ms ease";
+    requestAnimationFrame(() => {
+      div.style.opacity = "1";
+    });
+    return () => {
+    };
+  };
+  const removeTrigger = attachTrigger();
+  const handle = {
+    el: div,
+    destroy() {
+      cleanup();
+      removeTrigger();
+      window.removeEventListener("keydown", onKey);
+      actionBtns.forEach((btn) => btn.removeEventListener("click", actionHandler));
+      if (opts.blocking) {
+        Array.from(document.body.children).forEach((el) => {
+          if (el !== overlayRoot) {
+            el.removeAttribute("inert");
+          }
+        });
+      }
+      div.style.pointerEvents = "none";
+      div.style.opacity = "0";
+      setTimeout(() => {
+        try {
+          div.remove();
+        } catch {
+        }
+      }, 200);
+    }
+  };
+  return handle;
+}
+
+// src/WorkflowWidgetLit.ts
+import { html, LitElement, nothing } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+var TOKEN_BLUE_4 = "#1969fe";
+var TOKEN_GREEN_4 = "#24ad32";
+var TOKEN_SLATE_2 = "#0e1114";
+var TOKEN_SLATE_7 = "#677384";
+var TOKEN_SLATE_9 = "#a8afba";
+var TOKEN_SLATE_12 = "#f6f7f9";
+var TOKEN_WHITE = "#ffffff";
+function showWorkflowToast(notification) {
+  const toast = document.createElement("div");
+  toast.setAttribute("data-testid", "workflow-toast");
+  Object.assign(toast.style, {
+    position: "fixed",
+    bottom: "16px",
+    right: "16px",
+    zIndex: "2147483646",
+    padding: "12px 16px",
+    borderRadius: "8px",
+    backgroundColor: `var(--se-color-bg-surface, ${TOKEN_WHITE})`,
+    color: `var(--se-color-text-primary, ${TOKEN_SLATE_2})`,
+    boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+    maxWidth: "320px",
+    fontFamily: "var(--se-font-family, system-ui, sans-serif)",
+    fontSize: "14px",
+    lineHeight: "1.4",
+    transition: "opacity 0.3s ease"
+  });
+  const titleEl = document.createElement("div");
+  titleEl.style.fontWeight = "600";
+  titleEl.textContent = notification.title;
+  toast.appendChild(titleEl);
+  if (notification.body) {
+    const bodyEl = document.createElement("div");
+    bodyEl.style.marginTop = "4px";
+    bodyEl.style.fontSize = "13px";
+    bodyEl.style.color = "var(--se-color-text-secondary, #666)";
+    bodyEl.textContent = notification.body;
+    toast.appendChild(bodyEl);
+  }
+  document.body.appendChild(toast);
+  let removeTimer;
+  const fadeTimer = setTimeout(() => {
+    toast.style.opacity = "0";
+    removeTimer = setTimeout(() => {
+      toast.remove();
+    }, 300);
+  }, 4e3);
+  return () => {
+    clearTimeout(fadeTimer);
+    clearTimeout(removeTimer);
+    toast.remove();
+  };
+}
+function extractWorkflowsFromActive(activeActions) {
+  const workflows = /* @__PURE__ */ new Map();
+  for (const entry of activeActions) {
+    const action = entry.action;
+    if (action.kind === "overlays:tour" && action.workflow && action.tourId) {
+      const meta = action.workflow;
+      const rawSteps = action.steps || [];
+      const steps = rawSteps.map((s) => ({
+        id: s.id,
+        title: meta.stepTitles?.[s.id] || s.id
+      }));
+      workflows.set(action.tourId, { meta, steps });
+    }
+  }
+  return workflows;
+}
+var TAG_NAME = "syntro-workflow-tracker";
+var _unsubTourStarted, _unsubTourEvents, _toastCleanups, _notified, _completedMap, _persistInitialized, _tourWorkflows;
+var WorkflowTrackerLit = class extends LitElement {
+  constructor() {
+    super(...arguments);
+    // ── Public properties ─────────────────────────────────────────────────────
+    this.runtimeRef = null;
+    // ── Internal reactive state ───────────────────────────────────────────────
+    /** @internal */
+    this._workflowEntries = [];
+    /**
+     * @internal
+     * Bumped on tour.started / tour.resumed to trigger re-scan of active actions.
+     */
+    /** @internal */
+    this._actionVersion = 0;
+    // ── Private (non-reactive) fields ─────────────────────────────────────────
+    // Subscription cleanup functions
+    __privateAdd(this, _unsubTourStarted, null);
+    __privateAdd(this, _unsubTourEvents, null);
+    // Toast cleanup tracking
+    __privateAdd(this, _toastCleanups, []);
+    // Notifications already shown (mirrors notifiedRef)
+    __privateAdd(this, _notified, /* @__PURE__ */ new Set());
+    // Completed timestamps (mirrors completedMapRef)
+    __privateAdd(this, _completedMap, {});
+    // Whether persisted state has been loaded
+    __privateAdd(this, _persistInitialized, false);
+    // Cache of the last scanned tourWorkflows map (used by event handler)
+    __privateAdd(this, _tourWorkflows, /* @__PURE__ */ new Map());
+  }
+  // ── Light DOM ─────────────────────────────────────────────────────────────
+  /**
+   * Render into the element itself (light DOM) so host-page CSS variables
+   * flow through without a nested shadow boundary.
+   */
+  createRenderRoot() {
+    return this;
+  }
+  // ── Helpers ───────────────────────────────────────────────────────────────
+  get _stateNs() {
+    return this.runtimeRef?.state?.user?.ns?.("workflows") ?? null;
+  }
+  /**
+   * Re-scan active actions and update _tourWorkflows + entries.
+   * Called initially and whenever _actionVersion bumps.
+   */
+  _rescanWorkflows() {
+    const active = this.runtimeRef?.actions?.getActive?.() ?? [];
+    const workflows = extractWorkflowsFromActive(active);
+    __privateSet(this, _tourWorkflows, workflows);
+    if (workflows.size === 0) return;
+    const stateNs = this._stateNs;
+    const dismissed = stateNs?.get("dismissed") ?? [];
+    const completed = stateNs?.get("completed") ?? {};
+    this._workflowEntries = (() => {
+      const existingIds = new Set(this._workflowEntries.map((e) => e.tourId));
+      const newEntries = [];
+      for (const [tourId, { meta, steps }] of workflows) {
+        if (existingIds.has(tourId)) continue;
+        let status = "active";
+        if (dismissed.includes(tourId)) {
+          status = "dismissed";
+        } else if (completed[tourId]) {
+          status = "completed";
+        }
+        newEntries.push({
+          tourId,
+          meta,
+          steps,
+          currentStepId: null,
+          completedSteps: [],
+          status,
+          completedAt: completed[tourId] || void 0
+        });
+      }
+      return newEntries.length > 0 ? [...this._workflowEntries, ...newEntries] : this._workflowEntries;
+    })();
+    for (const [tourId, { meta }] of workflows) {
+      const dismissed2 = stateNs?.get("dismissed") ?? [];
+      const completed2 = stateNs?.get("completed") ?? {};
+      if (!__privateGet(this, _notified).has(tourId) && meta.notification && !dismissed2.includes(tourId) && !completed2[tourId]) {
+        __privateGet(this, _notified).add(tourId);
+        stateNs?.set("notified", [...__privateGet(this, _notified)]);
+        const cleanup = showWorkflowToast(meta.notification);
+        __privateGet(this, _toastCleanups).push(cleanup);
+      }
+    }
+  }
+  // ── Lifecycle ─────────────────────────────────────────────────────────────
+  connectedCallback() {
+    super.connectedCallback();
+    this._initSubscriptions();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._teardownSubscriptions();
+    for (const cleanup of __privateGet(this, _toastCleanups)) {
+      cleanup();
+    }
+    __privateSet(this, _toastCleanups, []);
+  }
+  updated(changed) {
+    if (changed.has("runtimeRef")) {
+      this._teardownSubscriptions();
+      this._initSubscriptions();
+    }
+    if (changed.has("_actionVersion")) {
+      this._rescanWorkflows();
+    }
+  }
+  // ── Subscription management ───────────────────────────────────────────────
+  _initSubscriptions() {
+    if (!this.runtimeRef?.events?.subscribe) return;
+    if (!__privateGet(this, _persistInitialized) && this._stateNs) {
+      const notified = this._stateNs.get("notified") ?? [];
+      for (const id of notified) {
+        __privateGet(this, _notified).add(id);
+      }
+      const completed = this._stateNs.get("completed") ?? {};
+      __privateSet(this, _completedMap, { ...completed });
+      __privateSet(this, _persistInitialized, true);
+    }
+    __privateSet(this, _unsubTourStarted, this.runtimeRef.events.subscribe(
+      { names: ["tour.started", "tour.resumed"] },
+      () => {
+        this._actionVersion += 1;
+      }
+    ));
+    __privateSet(this, _unsubTourEvents, this.runtimeRef.events.subscribe(
+      { patterns: ["^tour\\."] },
+      (event) => {
+        this._handleTourEvent(event);
+      }
+    ));
+    this._rescanWorkflows();
+  }
+  _teardownSubscriptions() {
+    var _a, _b;
+    (_a = __privateGet(this, _unsubTourStarted)) == null ? void 0 : _a.call(this);
+    __privateSet(this, _unsubTourStarted, null);
+    (_b = __privateGet(this, _unsubTourEvents)) == null ? void 0 : _b.call(this);
+    __privateSet(this, _unsubTourEvents, null);
+  }
+  // ── Event handler ─────────────────────────────────────────────────────────
+  _handleTourEvent(event) {
+    const tourId = event.props?.tourId;
+    if (!tourId) return;
+    if (!__privateGet(this, _tourWorkflows).has(tourId) && event.name === "tour.started") {
+      this._actionVersion += 1;
+      return;
+    }
+    if (!__privateGet(this, _tourWorkflows).has(tourId)) return;
+    const stateNs = this._stateNs;
+    this._workflowEntries = this._workflowEntries.map((entry) => {
+      if (entry.tourId !== tourId) return entry;
+      switch (event.name) {
+        case "tour.started": {
+          const startStepId = event.props?.startStepId || entry.steps[0]?.id || null;
+          if (!__privateGet(this, _notified).has(tourId)) {
+            __privateGet(this, _notified).add(tourId);
+            stateNs?.set("notified", [...__privateGet(this, _notified)]);
+            const workflow = __privateGet(this, _tourWorkflows).get(tourId);
+            if (workflow?.meta.notification) {
+              const cleanup = showWorkflowToast(workflow.meta.notification);
+              __privateGet(this, _toastCleanups).push(cleanup);
+            }
+          }
+          const activeIds = this._workflowEntries.filter((e) => e.status === "active" || e.tourId === tourId).map((e) => e.tourId);
+          if (!activeIds.includes(tourId)) {
+            activeIds.push(tourId);
+          }
+          stateNs?.set("active", [...new Set(activeIds)]);
+          return {
+            ...entry,
+            status: "active",
+            currentStepId: startStepId,
+            completedSteps: entry.status === "active" ? entry.completedSteps : []
+          };
+        }
+        case "tour.step_started": {
+          const stepId = event.props?.stepId;
+          return {
+            ...entry,
+            currentStepId: stepId || entry.currentStepId
+          };
+        }
+        case "tour.step_changed": {
+          const previousStepId = event.props?.previousStepId;
+          const nextStepId = event.props?.nextStepId;
+          const completedSteps = previousStepId && !entry.completedSteps.includes(previousStepId) ? [...entry.completedSteps, previousStepId] : entry.completedSteps;
+          return {
+            ...entry,
+            currentStepId: nextStepId || entry.currentStepId,
+            completedSteps
+          };
+        }
+        case "tour.completed": {
+          const completedAt = Date.now();
+          __privateGet(this, _completedMap)[tourId] = completedAt;
+          stateNs?.set("completed", { ...__privateGet(this, _completedMap) });
+          return {
+            ...entry,
+            status: "completed",
+            currentStepId: null,
+            completedSteps: entry.steps.map((s) => s.id),
+            completedAt
+          };
+        }
+        case "tour.paused":
+          return entry;
+        default:
+          return entry;
+      }
+    });
+  }
+  // ── User action handlers ──────────────────────────────────────────────────
+  _handleStepClick(tourId, stepId) {
+    this.runtimeRef?.events?.publish("workflow:jump_to_step", { tourId, stepId });
+    this.dispatchEvent(
+      new CustomEvent("workflow-step-click", {
+        bubbles: true,
+        detail: { tourId, stepId }
+      })
+    );
+  }
+  _handleDismiss(tourId) {
+    this._workflowEntries = this._workflowEntries.map(
+      (entry) => entry.tourId === tourId ? { ...entry, status: "dismissed" } : entry
+    );
+    const dismissedIds = this._workflowEntries.filter((e) => e.status === "dismissed").map((e) => e.tourId);
+    this._stateNs?.set("dismissed", dismissedIds);
+    this.dispatchEvent(
+      new CustomEvent("workflow-dismissed", {
+        bubbles: true,
+        detail: { tourId }
+      })
+    );
+  }
+  // ── Render helpers ────────────────────────────────────────────────────────
+  _renderProgressBar(completed, total) {
+    const percent = total > 0 ? Math.round(completed / total * 100) : 0;
+    const trackStyles = {
+      width: "100%",
+      height: "6px",
+      borderRadius: "9999px",
+      background: "rgba(255,255,255,0.08)",
+      overflow: "hidden"
+    };
+    const fillStyles = {
+      height: "100%",
+      borderRadius: "9999px",
+      background: `var(--se-color-primary, ${TOKEN_BLUE_4})`,
+      transition: "width 0.3s ease",
+      width: `${percent}%`
+    };
+    return html`
+      <div style=${styleMap(trackStyles)}>
+        <div
+          role="progressbar"
+          aria-valuenow=${percent}
+          aria-valuemin="0"
+          aria-valuemax="100"
+          style=${styleMap(fillStyles)}
+        ></div>
+      </div>
+    `;
+  }
+  _renderStepItem(step, isCompleted, isCurrent, tourId) {
+    const btnStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      width: "100%",
+      padding: "6px 8px",
+      borderRadius: "4px",
+      border: "none",
+      background: "transparent",
+      cursor: "pointer",
+      textAlign: "left",
+      fontSize: "12px",
+      lineHeight: "1.4",
+      color: isCurrent ? `var(--se-color-text-primary, ${TOKEN_SLATE_12})` : `var(--se-color-text-secondary, ${TOKEN_SLATE_9})`,
+      fontWeight: isCurrent ? "600" : "400"
+    };
+    const indicatorWrapStyles = {
+      flexShrink: "0",
+      width: "16px",
+      textAlign: "center"
+    };
+    const dotStyles = {
+      display: "inline-block",
+      width: "6px",
+      height: "6px",
+      borderRadius: "50%",
+      background: isCurrent ? `var(--se-color-primary, ${TOKEN_BLUE_4})` : "rgba(255,255,255,0.12)"
+    };
+    const checkStyles = {
+      color: `var(--se-color-success, ${TOKEN_GREEN_4})`
+    };
+    const labelStyles = {
+      flex: "1",
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    };
+    const indicator = isCompleted ? html`<span role="img" aria-label="completed" style=${styleMap(checkStyles)}>&#10003;</span>` : isCurrent ? html`<span style=${styleMap(dotStyles)}></span>` : html`<span style=${styleMap(dotStyles)}></span>`;
+    return html`
+      <button
+        type="button"
+        data-testid=${`step-${step.id}`}
+        data-current=${isCurrent ? "true" : nothing}
+        data-completed=${isCompleted ? "true" : nothing}
+        aria-current=${isCurrent ? "step" : nothing}
+        style=${styleMap(btnStyles)}
+        @click=${() => this._handleStepClick(tourId, step.id)}
+      >
+        <span style=${styleMap(indicatorWrapStyles)}>${indicator}</span>
+        <span style=${styleMap(labelStyles)}>${step.title}</span>
+      </button>
+    `;
+  }
+  _renderWorkflowCard(workflow) {
+    const completedCount = workflow.completedSteps.length;
+    const totalSteps = workflow.steps.length;
+    const cardStyles = {
+      padding: "12px",
+      borderRadius: "8px",
+      border: "1px solid rgba(255,255,255,0.08)",
+      background: "rgba(255,255,255,0.02)"
+    };
+    const headerStyles = {
+      display: "flex",
+      alignItems: "center",
+      gap: "8px",
+      marginBottom: "8px"
+    };
+    const titleStyles = {
+      flex: "1",
+      fontSize: "13px",
+      fontWeight: "600",
+      color: `var(--se-color-text-primary, ${TOKEN_SLATE_12})`,
+      overflow: "hidden",
+      textOverflow: "ellipsis",
+      whiteSpace: "nowrap"
+    };
+    const dismissBtnStyles = {
+      flexShrink: "0",
+      padding: "2px 6px",
+      border: "none",
+      borderRadius: "4px",
+      background: "transparent",
+      color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+      fontSize: "12px",
+      cursor: "pointer",
+      lineHeight: "1"
+    };
+    const progressWrapStyles = {
+      marginBottom: "8px"
+    };
+    const progressLabelStyles = {
+      fontSize: "10px",
+      color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`,
+      marginTop: "4px"
+    };
+    const stepsColStyles = {
+      display: "flex",
+      flexDirection: "column"
+    };
+    return html`
+      <div style=${styleMap(cardStyles)}>
+        <!-- Header: icon + title + dismiss -->
+        <div style=${styleMap(headerStyles)}>
+          ${workflow.meta.icon ? html`<span data-testid="workflow-icon" style="flex-shrink:0;font-size:14px">${workflow.meta.icon}</span>` : nothing}
+          <span style=${styleMap(titleStyles)}>${workflow.meta.title}</span>
+          <button
+            type="button"
+            data-testid=${`dismiss-${workflow.tourId}`}
+            style=${styleMap(dismissBtnStyles)}
+            aria-label=${`Dismiss ${workflow.meta.title}`}
+            @click=${() => this._handleDismiss(workflow.tourId)}
+          >&#10005;</button>
+        </div>
+
+        <!-- Progress bar + label -->
+        <div style=${styleMap(progressWrapStyles)}>
+          ${this._renderProgressBar(completedCount, totalSteps)}
+          <div style=${styleMap(progressLabelStyles)}>
+            ${completedCount} of ${totalSteps} steps
+          </div>
+        </div>
+
+        <!-- Step list -->
+        <div style=${styleMap(stepsColStyles)}>
+          ${workflow.steps.map(
+      (step) => this._renderStepItem(
+        step,
+        workflow.completedSteps.includes(step.id),
+        workflow.currentStepId === step.id,
+        workflow.tourId
+      )
+    )}
+        </div>
+      </div>
+    `;
+  }
+  // ── Render ────────────────────────────────────────────────────────────────
+  render() {
+    const activeWorkflows = this._workflowEntries.filter((w) => w.status === "active");
+    if (activeWorkflows.length === 0) {
+      const emptyStyles = {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "24px 0",
+        fontSize: "12px",
+        color: `var(--se-color-text-tertiary, ${TOKEN_SLATE_7})`
+      };
+      return html`<div style=${styleMap(emptyStyles)}>No active workflows</div>`;
+    }
+    const containerStyles = {
+      display: "flex",
+      flexDirection: "column",
+      gap: "8px"
+    };
+    return html`
+      <div style=${styleMap(containerStyles)}>
+        ${activeWorkflows.map((workflow) => this._renderWorkflowCard(workflow))}
+      </div>
+    `;
+  }
+};
+_unsubTourStarted = new WeakMap();
+_unsubTourEvents = new WeakMap();
+_toastCleanups = new WeakMap();
+_notified = new WeakMap();
+_completedMap = new WeakMap();
+_persistInitialized = new WeakMap();
+_tourWorkflows = new WeakMap();
+// ── Static properties (no decorators) ────────────────────────────────────
+WorkflowTrackerLit.properties = {
+  // Public input: runtime ref injected by MountableWidget
+  runtimeRef: { attribute: false },
+  // Internal reactive state
+  _workflowEntries: { state: true },
+  _actionVersion: { state: true }
+};
+if (typeof window !== "undefined" && !customElements.get(TAG_NAME)) {
+  customElements.define(TAG_NAME, WorkflowTrackerLit);
+}
+var WorkflowWidgetLitMountable = {
+  mount(container, config) {
+    const runtime2 = config?.runtime ?? null;
+    if (typeof window !== "undefined" && !customElements.get(TAG_NAME)) {
+      customElements.define(TAG_NAME, WorkflowTrackerLit);
+    }
+    const el = document.createElement(TAG_NAME);
+    el.runtimeRef = runtime2;
+    container.appendChild(el);
+    return () => {
+      el.remove();
+    };
+  },
+  update(container, config) {
+    const el = container.querySelector(TAG_NAME);
+    if (!el) return;
+    const runtime2 = config?.runtime ?? null;
+    el.runtimeRef = runtime2;
+  }
+};
+
+// src/runtime.ts
+var executeHighlight = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  if (anchorEl.getAttribute("data-syntro-highlight-dismissed")) {
+    return { cleanup: () => {
+    } };
+  }
+  const existing = anchorEl.getAttribute("data-syntro-highlight");
+  if (existing) {
+    const prev = context.overlayRoot.querySelectorAll(
+      ".syntro-spotlight-scrim, .syntro-spotlight-ring"
+    );
+    prev.forEach((el) => el.remove());
+  }
+  anchorEl.setAttribute("data-syntro-highlight", "true");
+  let ringColor = action.style?.color;
+  if (!ringColor) {
+    try {
+      const primary = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")?.trim();
+      if (primary) ringColor = primary;
+    } catch {
+    }
+  }
+  const handle = showHighlight(anchorEl, context.overlayRoot, {
+    paddingPx: action.style?.paddingPx ?? 12,
+    radiusPx: action.style?.radiusPx ?? 12,
+    scrimOpacity: action.style?.scrimOpacity ?? 0.55,
+    ringColor,
+    blocking: action.blocking ?? false,
+    onClickOutside: action.onClickOutside ?? true,
+    onEsc: action.onEsc ?? true,
+    onDismiss: () => {
+      anchorEl.setAttribute("data-syntro-highlight-dismissed", "true");
+    }
+  });
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "overlays:highlight",
+    anchorId: action.anchorId
+  });
+  return {
+    cleanup: () => {
+      handle.destroy();
+      anchorEl.removeAttribute("data-syntro-highlight");
+      anchorEl.removeAttribute("data-syntro-highlight-dismissed");
+    }
+  };
+};
+var executePulse = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const duration = action.duration ?? 4e3;
+  await new Promise((resolve) => requestAnimationFrame(resolve));
+  const parseHex = (hex) => ({
+    r: parseInt(hex.slice(1, 3), 16),
+    g: parseInt(hex.slice(3, 5), 16),
+    b: parseInt(hex.slice(5, 7), 16)
+  });
+  const fallback = { r: 79, g: 70, b: 229 };
+  let primary = fallback;
+  let secondary = null;
+  try {
+    const styles = getComputedStyle(context.overlayRoot);
+    const pHex = styles.getPropertyValue("--sc-color-primary")?.trim();
+    const sHex = styles.getPropertyValue("--sc-color-primary-hover")?.trim();
+    if (pHex?.startsWith("#") && pHex.length >= 7) {
+      primary = parseHex(pHex);
+    }
+    if (sHex?.startsWith("#") && sHex.length >= 7) {
+      secondary = parseHex(sHex);
+    }
+  } catch {
+  }
+  const existing = document.querySelector("[data-syntro-pulse-styles]");
+  if (existing) existing.remove();
+  const style = document.createElement("style");
+  style.setAttribute("data-syntro-pulse-styles", "");
+  const { r: pr, g: pg, b: pb } = primary;
+  if (secondary) {
+    const { r: sr, g: sg, b: sb } = secondary;
+    style.textContent = `
       @keyframes syntro-pulse-anim {
         0%, 100% {
           box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
@@ -145,9 +2423,8 @@ export const executePulse = async (action, context) => {
         }
       }
     `;
-    }
-    else {
-        style.textContent = `
+  } else {
+    style.textContent = `
       @keyframes syntro-pulse-anim {
         0%, 100% {
           box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
@@ -157,255 +2434,220 @@ export const executePulse = async (action, context) => {
         }
       }
     `;
+  }
+  document.head.appendChild(style);
+  const originalAnimation = anchorEl.style.animation;
+  anchorEl.style.animation = "syntro-pulse-anim 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite";
+  anchorEl.setAttribute("data-syntro-pulse", "true");
+  const timeoutId = setTimeout(() => {
+    anchorEl.style.animation = originalAnimation;
+    anchorEl.removeAttribute("data-syntro-pulse");
+  }, duration);
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "overlays:pulse",
+    anchorId: action.anchorId,
+    duration
+  });
+  return {
+    cleanup: () => {
+      clearTimeout(timeoutId);
+      if (!anchorEl.isConnected) return;
+      anchorEl.style.animation = originalAnimation;
+      anchorEl.removeAttribute("data-syntro-pulse");
     }
-    document.head.appendChild(style);
-    // Apply pulse animation via inline style (scoped to this element)
-    const originalAnimation = anchorEl.style.animation;
-    anchorEl.style.animation = 'syntro-pulse-anim 2.5s cubic-bezier(0.4, 0, 0.6, 1) infinite';
-    anchorEl.setAttribute('data-syntro-pulse', 'true');
-    // Set up auto-remove timeout
-    const timeoutId = setTimeout(() => {
-        anchorEl.style.animation = originalAnimation;
-        anchorEl.removeAttribute('data-syntro-pulse');
-    }, duration);
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:pulse',
-        anchorId: action.anchorId,
-        duration,
-    });
-    return {
-        cleanup: () => {
-            clearTimeout(timeoutId);
-            if (!anchorEl.isConnected)
-                return;
-            anchorEl.style.animation = originalAnimation;
-            anchorEl.removeAttribute('data-syntro-pulse');
-        },
-    };
+  };
 };
-/**
- * Execute a badge action
- */
-export const executeBadge = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
+var executeBadge = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  let badgeColor = "#4f46e5";
+  try {
+    const primary = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")?.trim();
+    if (primary?.startsWith("#") && primary.length >= 7) {
+      badgeColor = primary;
     }
-    if (!anchorEl) {
-        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    // Read primary color from theme (overlay root has --sc-* vars from shadow DOM)
-    let badgeColor = '#4f46e5';
-    try {
-        const primary = getComputedStyle(context.overlayRoot)
-            .getPropertyValue('--sc-color-primary')
-            ?.trim();
-        if (primary?.startsWith('#') && primary.length >= 7) {
-            badgeColor = primary;
-        }
+  } catch {
+  }
+  const badge2 = document.createElement("div");
+  badge2.textContent = action.content;
+  badge2.setAttribute("data-syntro-badge", action.anchorId.selector);
+  Object.assign(badge2.style, {
+    position: "absolute",
+    padding: "2px 6px",
+    fontSize: "12px",
+    fontWeight: "600",
+    lineHeight: "1",
+    color: "white",
+    background: badgeColor,
+    borderRadius: "9999px",
+    pointerEvents: "none",
+    zIndex: "2147483646",
+    whiteSpace: "nowrap"
+  });
+  const position = action.position ?? "top-right";
+  const originalPosition = anchorEl.style.position;
+  if (getComputedStyle(anchorEl).position === "static") {
+    anchorEl.style.position = "relative";
+  }
+  anchorEl.appendChild(badge2);
+  switch (position) {
+    case "top-left":
+      Object.assign(badge2.style, { top: "-8px", left: "-8px" });
+      break;
+    case "top-right":
+      Object.assign(badge2.style, { top: "-8px", right: "-8px" });
+      break;
+    case "bottom-left":
+      Object.assign(badge2.style, { bottom: "-8px", left: "-8px" });
+      break;
+    case "bottom-right":
+      Object.assign(badge2.style, { bottom: "-8px", right: "-8px" });
+      break;
+  }
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "overlays:badge",
+    anchorId: action.anchorId,
+    content: action.content,
+    position
+  });
+  return {
+    cleanup: () => {
+      try {
+        badge2.remove();
+      } catch {
+      }
+      if (!anchorEl.isConnected) return;
+      if (originalPosition !== void 0) {
+        anchorEl.style.position = originalPosition;
+      }
+    },
+    updateFn: (changes) => {
+      if ("content" in changes && typeof changes.content === "string") {
+        badge2.textContent = changes.content;
+      }
     }
-    catch {
-        /* fallback to default */
-    }
-    // Create badge element with inline styles (no global style injection)
-    const badge = document.createElement('div');
-    badge.textContent = action.content;
-    badge.setAttribute('data-syntro-badge', action.anchorId.selector);
-    // Apply styles directly to element
-    Object.assign(badge.style, {
-        position: 'absolute',
-        padding: '2px 6px',
-        fontSize: '12px',
-        fontWeight: '600',
-        lineHeight: '1',
-        color: 'white',
-        background: badgeColor,
-        borderRadius: '9999px',
-        pointerEvents: 'none',
-        zIndex: '2147483646',
-        whiteSpace: 'nowrap',
-    });
-    // Position badge relative to anchor
-    const position = action.position ?? 'top-right';
-    // Ensure anchor has relative positioning for badge
-    const originalPosition = anchorEl.style.position;
-    if (getComputedStyle(anchorEl).position === 'static') {
-        anchorEl.style.position = 'relative';
-    }
-    // Append to anchor for relative positioning
-    anchorEl.appendChild(badge);
-    // Position based on config
-    switch (position) {
-        case 'top-left':
-            Object.assign(badge.style, { top: '-8px', left: '-8px' });
-            break;
-        case 'top-right':
-            Object.assign(badge.style, { top: '-8px', right: '-8px' });
-            break;
-        case 'bottom-left':
-            Object.assign(badge.style, { bottom: '-8px', left: '-8px' });
-            break;
-        case 'bottom-right':
-            Object.assign(badge.style, { bottom: '-8px', right: '-8px' });
-            break;
-    }
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:badge',
-        anchorId: action.anchorId,
-        content: action.content,
-        position,
-    });
-    return {
-        cleanup: () => {
-            try {
-                badge.remove();
-            }
-            catch {
-                /* already detached */
-            }
-            if (!anchorEl.isConnected)
-                return;
-            if (originalPosition !== undefined) {
-                anchorEl.style.position = originalPosition;
-            }
-        },
-        updateFn: (changes) => {
-            if ('content' in changes && typeof changes.content === 'string') {
-                badge.textContent = changes.content;
-            }
-        },
-    };
+  };
 };
-/**
- * Execute a tooltip action
- */
-export const executeTooltip = async (action, context) => {
-    let anchorEl = context.resolveAnchor(action.anchorId);
-    if (!anchorEl && context.waitForAnchor) {
-        anchorEl = await context.waitForAnchor(action.anchorId, 3000);
-    }
-    if (!anchorEl) {
-        console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
-        return { cleanup: () => { } };
-    }
-    // Build tooltip HTML
-    const { content } = action;
-    let html = '';
-    if (content.title) {
-        html += `<div class="syntro-tt-title">${sanitizeHtml(content.title)}</div>`;
-    }
-    html += `<div class="syntro-tt-body">${sanitizeHtml(content.body)}</div>`;
-    // Add CTA buttons if provided (new multi-button support)
-    if (content.ctaButtons && content.ctaButtons.length > 0) {
-        html += `<div class="syntro-tt-actions">`;
-        for (const btn of content.ctaButtons) {
-            const isPrimary = btn.primary ?? false;
-            html += `
+var executeTooltip = async (action, context) => {
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
+  if (!anchorEl) {
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const { content } = action;
+  let html2 = "";
+  if (content.title) {
+    html2 += `<div class="syntro-tt-title">${sanitizeHtml(content.title)}</div>`;
+  }
+  html2 += `<div class="syntro-tt-body">${sanitizeHtml(content.body)}</div>`;
+  if (content.ctaButtons && content.ctaButtons.length > 0) {
+    html2 += `<div class="syntro-tt-actions">`;
+    for (const btn of content.ctaButtons) {
+      const isPrimary = btn.primary ?? false;
+      html2 += `
         <button
-          class="syntro-tt-btn ${isPrimary ? 'syntro-tt-btn-primary' : ''}"
+          class="syntro-tt-btn ${isPrimary ? "syntro-tt-btn-primary" : ""}"
           data-syntro-action="${sanitizeHtml(btn.actionId)}"
         >
           ${sanitizeHtml(btn.label)}
         </button>
       `;
-        }
-        html += `</div>`;
     }
-    else if (content.cta) {
-        // Legacy single CTA support
-        html += `<div class="syntro-tt-actions">
+    html2 += `</div>`;
+  } else if (content.cta) {
+    html2 += `<div class="syntro-tt-actions">
       <button class="syntro-tt-btn syntro-tt-btn-primary" data-syntro-action="cta">
         ${sanitizeHtml(content.cta.label)}
       </button>
     </div>`;
+  }
+  const handle = showTooltip(anchorEl, context.overlayRoot, {
+    html: html2,
+    placement: action.placement ?? "top",
+    trigger: action.trigger ?? "immediate",
+    onAction: (actionId) => {
+      if (actionId === "dismiss") {
+        handle.destroy();
+        return;
+      }
+      if (actionId === "cta" && content.cta) {
+        context.publishEvent("action.cta_clicked", {
+          anchorId: action.anchorId,
+          ctaLabel: content.cta.label
+        });
+      } else if (content.ctaButtons) {
+        const clickedBtn = content.ctaButtons.find((b) => b.actionId === actionId);
+        if (clickedBtn) {
+          context.publishEvent("action.tooltip_cta_clicked", {
+            anchorId: action.anchorId,
+            actionId,
+            label: clickedBtn.label
+          });
+        }
+      }
+      handle.destroy();
     }
-    const handle = showTooltip(anchorEl, context.overlayRoot, {
-        html,
-        placement: action.placement ?? 'top',
-        trigger: action.trigger ?? 'immediate',
-        onAction: (actionId) => {
-            // Handle dismiss CTA — destroy the tooltip
-            if (actionId === 'dismiss') {
-                handle.destroy();
-                return;
-            }
-            if (actionId === 'cta' && content.cta) {
-                context.publishEvent('action.cta_clicked', {
-                    anchorId: action.anchorId,
-                    ctaLabel: content.cta.label,
-                });
-            }
-            else if (content.ctaButtons) {
-                const clickedBtn = content.ctaButtons.find((b) => b.actionId === actionId);
-                if (clickedBtn) {
-                    context.publishEvent('action.tooltip_cta_clicked', {
-                        anchorId: action.anchorId,
-                        actionId,
-                        label: clickedBtn.label,
-                    });
-                }
-            }
-            handle.destroy();
-        },
-    });
-    context.publishEvent('action.applied', {
-        id: context.generateId(),
-        kind: 'overlays:tooltip',
-        anchorId: action.anchorId,
-        trigger: action.trigger ?? 'immediate',
-    });
-    return {
-        cleanup: () => {
-            handle.destroy();
-        },
-    };
+  });
+  context.publishEvent("action.applied", {
+    id: context.generateId(),
+    kind: "overlays:tooltip",
+    anchorId: action.anchorId,
+    trigger: action.trigger ?? "immediate"
+  });
+  return {
+    cleanup: () => {
+      handle.destroy();
+    }
+  };
 };
-// ============================================================================
-// Executor Definitions for Registration
-// ============================================================================
-/**
- * All executors provided by this app.
- * These are registered with the runtime's ExecutorRegistry.
- */
-export const executors = [
-    { kind: 'overlays:highlight', executor: executeHighlight },
-    { kind: 'overlays:pulse', executor: executePulse },
-    { kind: 'overlays:badge', executor: executeBadge },
-    { kind: 'overlays:tooltip', executor: executeTooltip },
-    { kind: 'overlays:modal', executor: executeModal },
-    { kind: 'overlays:tour', executor: executeTour },
-    { kind: 'overlays:celebrate', executor: executeCelebrate },
+var executors = [
+  { kind: "overlays:highlight", executor: executeHighlight },
+  { kind: "overlays:pulse", executor: executePulse },
+  { kind: "overlays:badge", executor: executeBadge },
+  { kind: "overlays:tooltip", executor: executeTooltip },
+  { kind: "overlays:modal", executor: executeModal },
+  { kind: "overlays:tour", executor: executeTour },
+  { kind: "overlays:celebrate", executor: executeCelebrate }
 ];
-/**
- * App runtime manifest.
- */
-export const runtime = {
-    id: 'adaptive-overlays',
-    version: '1.0.0',
-    name: 'Overlays',
-    description: 'Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking',
-    executors,
-    widgets: [
-        {
-            id: 'adaptive-overlays:workflow-tracker',
-            component: WorkflowMountableWidget,
-            metadata: {
-                name: 'Workflow Tracker',
-                icon: '📋',
-                description: 'Tracks multi-step workflow progress across tours',
-            },
-        },
-        {
-            id: 'adaptive-overlays:workflow-tracker-lit',
-            component: WorkflowWidgetLitMountable,
-            metadata: {
-                name: 'Workflow Tracker (Lit)',
-                icon: '📋',
-                description: 'Lit web component equivalent of the Workflow Tracker — decorator-free, light DOM',
-            },
-        },
-    ],
+var runtime = {
+  id: "adaptive-overlays",
+  version: "1.0.0",
+  name: "Overlays",
+  description: "Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking",
+  executors,
+  widgets: [
+    {
+      id: "adaptive-overlays:workflow-tracker",
+      component: WorkflowWidgetLitMountable,
+      metadata: {
+        name: "Workflow Tracker",
+        icon: "\u{1F4CB}",
+        description: "Tracks multi-step workflow progress across tours"
+      }
+    }
+  ]
+};
+export {
+  executeBadge,
+  executeHighlight,
+  executeModal,
+  executePulse,
+  executeTooltip,
+  executeTour,
+  executors,
+  runtime
 };
+//# sourceMappingURL=runtime.js.map