@syntrologie/adapt-overlays 2.28.0 → 2.29.1

package/dist/runtime.js

@@ -1,2679 +1,14 @@
 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
-        }
-      });
-    }
-    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();
-    }
-  }
-};
-
-// 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"
-    });
-    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/cta-navigation.ts
-var ALLOWED_PROTOCOLS = /* @__PURE__ */ new Set(["http:", "https:", "mailto:", "tel:"]);
-function isSafeNavigationHref(href) {
-  if (typeof href !== "string" || href.trim().length === 0) return false;
-  let parsed;
-  try {
-    parsed = new URL(href, "https://syntro.local/");
-  } catch {
-    return false;
-  }
-  return ALLOWED_PROTOCOLS.has(parsed.protocol);
-}
-function navigateForCta(input) {
-  if (input.actionId === "dismiss") return false;
-  if (!input.href || !isSafeNavigationHref(input.href)) return false;
-  const href = input.href;
-  if (input.target === "_blank") {
-    window.open(href, "_blank", "noopener,noreferrer");
-  } else {
-    window.location.assign(href);
-  }
-  return true;
-}
-
-// 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: () => {
-      }
-    };
-  }
-  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]
-};
-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`
-    });
-    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 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;
-      const matchingBtn = ctaButtons?.find((b) => b.actionId === actionId);
-      const href = matchingBtn?.href;
-      context.publishEvent("action.modal_cta_clicked", {
-        actionId,
-        ...href ? { href } : {}
-      });
-      handle.destroy();
-      if (matchingBtn) {
-        navigateForCta(matchingBtn);
-      }
-    }
-  };
-  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();
-        }
-      };
-      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);
-      };
-    }
-    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);
-        }
-        25% {
-          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
-        }
-        50% {
-          box-shadow: 0 0 0 0 rgba(${sr}, ${sg}, ${sb}, 0.35);
-        }
-        75% {
-          box-shadow: 0 0 0 12px rgba(${sr}, ${sg}, ${sb}, 0);
-        }
-      }
-    `;
-  } else {
-    style.textContent = `
-      @keyframes syntro-pulse-anim {
-        0%, 100% {
-          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
-        }
-        50% {
-          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
-        }
-      }
-    `;
-  }
-  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");
-    }
-  };
-};
-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;
-    }
-  } 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;
-      }
-    }
-  };
-};
-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" : ""}"
-          data-syntro-action="${sanitizeHtml(btn.actionId)}"
-        >
-          ${sanitizeHtml(btn.label)}
-        </button>
-      `;
-    }
-    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,
-            ...clickedBtn.href ? { href: clickedBtn.href } : {}
-          });
-          handle.destroy();
-          navigateForCta(clickedBtn);
-          return;
-        }
-      }
-      handle.destroy();
-    }
-  });
-  context.publishEvent("action.applied", {
-    id: context.generateId(),
-    kind: "overlays:tooltip",
-    anchorId: action.anchorId,
-    trigger: action.trigger ?? "immediate"
-  });
-  return {
-    cleanup: () => {
-      handle.destroy();
-    }
-  };
-};
-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 }
-];
-var runtime = {
-  id: "adaptive-overlays",
-  version: "1.0.0",
-  name: "Overlays",
-  description: "Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking",
+  executeBadge,
+  executeHighlight,
+  executeModal,
+  executePulse,
+  executeTooltip,
+  executeTour,
   executors,
-  widgets: [
-    {
-      id: "adaptive-overlays:workflow-tracker",
-      component: WorkflowWidgetLitMountable,
-      metadata: {
-        name: "Workflow Tracker",
-        icon: "\u{1F4CB}",
-        description: "Tracks multi-step workflow progress across tours"
-      }
-    }
-  ]
-};
+  runtime
+} from "./chunk-4ANURPES.js";
+import "./chunk-VHAA22YE.js";
 export {
   executeBadge,
   executeHighlight,