@syntrologie/runtime-sdk 2.4.1 → 2.6.0-canary.1

package/dist/{chunk-QGWATS3Z.js → chunk-Q4WGXNKC.js}

@@ -3,7 +3,7 @@ import {
   __privateGet,
   __privateSet,
   __publicField
-} from "./chunk-4NYS7GAW.js";
+} from "./chunk-BU4Z6PD7.js";
 
 // ../adaptives/adaptive-content/dist/reconciliation-guard.js
 function guardAgainstReconciliation(container, anchor, reinsertFn, opts) {
@@ -124,13 +124,30 @@ function sanitizeHtml(html) {
 
 // ../adaptives/adaptive-content/dist/runtime.js
 var executeInsertHtml = async (action, context) => {
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  var _a2;
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const sanitizedHtml = sanitizeHtml(action.html);
+  const dedupAttr = "data-syntro-insert-label";
+  const label = action.label;
+  if (label) {
+    const escapedLabel = CSS.escape(label);
+    const searchRoot = (_a2 = anchorEl.parentElement) != null ? _a2 : anchorEl;
+    const existing = searchRoot.querySelector(`[${dedupAttr}="${escapedLabel}"]`);
+    if (existing)
+      existing.remove();
+  }
   const container = document.createElement("div");
   container.setAttribute("data-syntro-action-id", context.generateId());
+  if (label)
+    container.setAttribute(dedupAttr, label);
   container.innerHTML = sanitizedHtml;
   let originalContent = null;
   switch (action.position) {
@@ -151,6 +168,20 @@ var executeInsertHtml = async (action, context) => {
       anchorEl.replaceWith(container);
       break;
   }
+  let deepLinkHandler = null;
+  if (action.deepLink) {
+    const { tileId, itemId } = action.deepLink;
+    deepLinkHandler = () => {
+      var _a3, _b, _c;
+      const handle = (_a3 = window.SynOS) == null ? void 0 : _a3.handle;
+      if (handle) {
+        handle.open();
+        (_c = (_b = handle.runtime) == null ? void 0 : _b.events) == null ? void 0 : _c.publish("notification.deep_link", { tileId, itemId });
+      }
+    };
+    container.style.cursor = "pointer";
+    container.addEventListener("click", deepLinkHandler);
+  }
   context.publishEvent("action.applied", {
     id: context.generateId(),
     kind: "content:insertHtml",
@@ -178,6 +209,9 @@ var executeInsertHtml = async (action, context) => {
   const guardCleanup = guardAgainstReconciliation(container, anchorEl, reinsertFn);
   return {
     cleanup: () => {
+      if (deepLinkHandler) {
+        container.removeEventListener("click", deepLinkHandler);
+      }
       guardCleanup();
       if (action.position === "replace" && originalContent !== null) {
         const restoredEl = document.createElement(anchorEl.tagName);
@@ -199,9 +233,14 @@ var executeInsertHtml = async (action, context) => {
 };
 var executeSetText = async (action, context) => {
   var _a2;
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const originalText = (_a2 = anchorEl.textContent) != null ? _a2 : "";
   anchorEl.textContent = action.text;
@@ -222,9 +261,14 @@ var executeSetText = async (action, context) => {
   };
 };
 var executeSetAttr = async (action, context) => {
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const lowerAttr = action.attr.toLowerCase();
   if (lowerAttr.startsWith("on")) {
@@ -262,9 +306,14 @@ var executeSetAttr = async (action, context) => {
   };
 };
 var executeAddClass = async (action, context) => {
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const hadClass = anchorEl.classList.contains(action.className);
   anchorEl.classList.add(action.className);
@@ -283,9 +332,14 @@ var executeAddClass = async (action, context) => {
   };
 };
 var executeRemoveClass = async (action, context) => {
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const hadClass = anchorEl.classList.contains(action.className);
   anchorEl.classList.remove(action.className);
@@ -304,9 +358,14 @@ var executeRemoveClass = async (action, context) => {
   };
 };
 var executeSetStyle = async (action, context) => {
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-content] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const originalStyles = /* @__PURE__ */ new Map();
   for (const prop of Object.keys(action.styles)) {
@@ -357,6 +416,701 @@ var runtime = {
   executors
 };
 
+// ../adaptives/adaptive-overlays/dist/celebrations/effects/confetti.js
+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();
+    }
+  }
+};
+
+// ../adaptives/adaptive-overlays/dist/celebrations/effects/emoji-rain.js
+var INTENSITY_COUNTS2 = { light: 20, medium: 40, heavy: 80 };
+var DEFAULT_EMOJI = "\u{1F389}";
+var emojiRainEffect = {
+  init(width, _height, config) {
+    var _a2;
+    const count = INTENSITY_COUNTS2[config.intensity];
+    const emoji = typeof ((_a2 = config.props) == null ? void 0 : _a2.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) {
+    var _a2, _b, _c, _d, _e, _f;
+    let anyVisible = false;
+    for (const p of particles) {
+      p.y += p.vy;
+      const phase = (_b = (_a2 = p.data) == null ? void 0 : _a2.wobblePhase) != null ? _b : 0;
+      const amp = (_d = (_c = p.data) == null ? void 0 : _c.wobbleAmp) != null ? _d : 1;
+      const originX = (_f = (_e = p.data) == null ? void 0 : _e.originX) != null ? _f : 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();
+    }
+  }
+};
+
+// ../adaptives/adaptive-overlays/dist/celebrations/effects/fireworks.js
+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();
+    }
+  }
+};
+
+// ../adaptives/adaptive-overlays/dist/celebrations/effects/sparkles.js
+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) {
+    var _a2, _b, _c, _d, _e;
+    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 = ((_a2 = p.data.baseOpacity) != null ? _a2 : 1) - 1e-3;
+        if (p.data.baseOpacity < 0)
+          p.data.baseOpacity = 0;
+      }
+      const phase = (_c = (_b = p.data) == null ? void 0 : _b.phase) != null ? _c : 0;
+      const baseOpacity = (_e = (_d = p.data) == null ? void 0 : _d.baseOpacity) != null ? _e : 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();
+    }
+  }
+};
+
+// ../adaptives/adaptive-overlays/dist/celebrations/engine.js
+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) {
+    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);
+  }
+};
+
+// ../adaptives/adaptive-overlays/dist/celebrations/index.js
+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) {
+  var _a2, _b;
+  try {
+    const styles = getComputedStyle(overlayRoot);
+    const primary = (_a2 = styles.getPropertyValue("--sc-color-primary")) == null ? void 0 : _a2.trim();
+    const hover = (_b = styles.getPropertyValue("--sc-color-primary-hover")) == null ? void 0 : _b.trim();
+    if ((primary == null ? void 0 : 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) => {
+  var _a2, _b, _c, _d;
+  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 = (_b = (_a2 = action.colors) != null ? _a2 : readThemeColors(context.overlayRoot)) != null ? _b : FALLBACK_COLORS;
+  const config = {
+    duration: (_c = action.duration) != null ? _c : 3e3,
+    intensity: (_d = action.intensity) != null ? _d : "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();
+    }
+  };
+};
+
+// ../adaptives/adaptive-overlays/dist/executors/tour.js
+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 == null ? void 0 : 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 (error2) {
+      console.error(`[Tour] Failed to execute step "${step.id}":`, error2);
+      context.publishEvent("tour.step_failed", {
+        tourId,
+        stepId: step.id,
+        error: String(error2)
+      });
+      return;
+    }
+    if (step.onAction && context.subscribeEvent) {
+      eventUnsubscribe = context.subscribeEvent("action.modal_cta_clicked", (props) => {
+        const actionId = props == null ? void 0 : 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 == null ? void 0 : 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/src/tokens/colors.ts
 var base = {
   white: "#ffffff",
@@ -959,6 +1713,13 @@ function sanitizeHtml2(html) {
 }
 
 // ../adaptives/adaptive-overlays/dist/modal.js
+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) => {
   var _a2, _b;
   const { content, size = "md", blocking = false, scrim, dismiss, ctaButtons } = action;
@@ -985,8 +1746,8 @@ var executeModal = async (action, context) => {
     transform: translate(-50%, -50%) scale(0.95);
     max-width: ${sizeMap[size]};
     width: 90%;
-    background: ${base.white};
-    border-radius: 12px;
+    background: ${V.bg};
+    border-radius: ${V.radius};
     box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
     z-index: 2147483646;
     opacity: 0;
@@ -995,9 +1756,9 @@ var executeModal = async (action, context) => {
   `;
   let html = "";
   if (content.title) {
-    html += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: #111827;">${sanitizeHtml2(content.title)}</h2>`;
+    html += `<h2 class="syntro-modal-title" style="margin: 0 0 12px 0; font-size: 18px; font-weight: 600; color: ${V.title};">${sanitizeHtml2(content.title)}</h2>`;
   }
-  html += `<div class="syntro-modal-body" style="color: #4b5563; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
+  html += `<div class="syntro-modal-body" style="color: ${V.text}; line-height: 1.5;">${sanitizeHtml2(content.body)}</div>`;
   if ((dismiss == null ? void 0 : dismiss.closeButton) !== false) {
     html += `
       <button class="syntro-modal-close" data-syntro-action="dismiss" style="
@@ -1008,7 +1769,8 @@ var executeModal = async (action, context) => {
         border: none;
         cursor: pointer;
         padding: 4px;
-        color: #6b7280;
+        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"/>
@@ -1031,7 +1793,7 @@ var executeModal = async (action, context) => {
             font-weight: 500;
             cursor: pointer;
             transition: background 150ms ease;
-            ${isPrimary ? "background: #4f46e5; color: white; border: none;" : "background: white; color: #374151; border: 1px solid #d1d5db;"}
+            ${isPrimary ? `background: ${V.accent}; color: white; border: none;` : `background: transparent; color: ${V.accent}; border: 1px solid currentColor; opacity: 0.7;`}
           "
         >
           ${sanitizeHtml2(btn.label)}
@@ -1297,26 +2059,40 @@ function showTooltip(anchorEl, overlayRoot, opts) {
   }
   const attachTrigger = () => {
     if (opts.trigger === "hover") {
-      const enter = () => {
+      let hideTimeout = null;
+      const show = () => {
+        if (hideTimeout) {
+          clearTimeout(hideTimeout);
+          hideTimeout = null;
+        }
         div.style.visibility = "visible";
         div.style.opacity = "1";
       };
-      const leave = () => {
-        div.style.visibility = "hidden";
-        div.style.opacity = "0";
+      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", enter);
-      anchorEl.addEventListener("mouseleave", leave);
-      anchorEl.addEventListener("focus", enter);
-      anchorEl.addEventListener("blur", leave);
+      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 () => {
-        anchorEl.removeEventListener("mouseenter", enter);
-        anchorEl.removeEventListener("mouseleave", leave);
-        anchorEl.removeEventListener("focus", enter);
-        anchorEl.removeEventListener("blur", leave);
+        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") {
@@ -1366,21 +2142,330 @@ function showTooltip(anchorEl, overlayRoot, opts) {
   return handle;
 }
 
+// ../adaptives/adaptive-overlays/dist/WorkflowWidget.js
+import { jsx as _jsx2 } from "react/jsx-runtime";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+// ../adaptives/adaptive-overlays/dist/WorkflowTracker.js
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+function ProgressBar({ completed, total }) {
+  const percent = total > 0 ? Math.round(completed / total * 100) : 0;
+  return _jsx("div", { className: "se-w-full se-h-1.5 se-rounded-full se-bg-white/[0.08] se-overflow-hidden", children: _jsx("div", { role: "progressbar", "aria-valuenow": percent, "aria-valuemin": 0, "aria-valuemax": 100, className: "se-h-full se-rounded-full se-bg-blue-5 se-transition-all se-duration-300", style: { width: `${percent}%` } }) });
+}
+function StepItem({ step, isCompleted, isCurrent, tourId, onStepClick }) {
+  return _jsxs("button", { type: "button", "data-testid": `step-${step.id}`, "data-current": isCurrent ? "true" : void 0, "data-completed": isCompleted ? "true" : void 0, "aria-current": isCurrent ? "step" : void 0, className: `se-flex se-items-center se-gap-2 se-w-full se-py-1.5 se-px-2 se-rounded se-border-none se-bg-transparent se-cursor-pointer se-text-left se-text-xs ${isCurrent ? "se-font-semibold se-text-slate-grey-10" : "se-text-slate-grey-8"}`, onClick: () => onStepClick(tourId, step.id), children: [_jsx("span", { className: "se-shrink-0 se-w-4 se-text-center", children: isCompleted ? _jsx("span", { role: "img", "aria-label": "completed", className: "se-text-green-5", children: "\u2713" }) : isCurrent ? _jsx("span", { className: "se-inline-block se-w-1.5 se-h-1.5 se-rounded-full se-bg-blue-5" }) : _jsx("span", { className: "se-inline-block se-w-1.5 se-h-1.5 se-rounded-full se-bg-white/[0.12]" }) }), _jsx("span", { className: "se-flex-1 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: step.title })] });
+}
+function WorkflowCard({ workflow, expanded, onStepClick, onDismiss }) {
+  const completedCount = workflow.completedSteps.length;
+  const totalSteps = workflow.steps.length;
+  return _jsxs("div", { className: "se-p-3 se-rounded-lg se-border se-border-white/[0.08] se-bg-white/[0.02]", children: [_jsxs("div", { className: "se-flex se-items-center se-gap-2 se-mb-2", children: [workflow.meta.icon && _jsx("span", { "data-testid": "workflow-icon", className: "se-shrink-0 se-text-sm", children: workflow.meta.icon }), _jsx("span", { className: "se-flex-1 se-text-[13px] se-font-semibold se-text-slate-grey-10 se-overflow-hidden se-text-ellipsis se-whitespace-nowrap", children: workflow.meta.title }), _jsx("button", { type: "button", "data-testid": `dismiss-${workflow.tourId}`, className: "se-shrink-0 se-py-0.5 se-px-1.5 se-rounded se-border-none se-bg-transparent se-text-slate-grey-7 se-text-xs se-cursor-pointer se-leading-none", onClick: () => onDismiss(workflow.tourId), "aria-label": `Dismiss ${workflow.meta.title}`, children: "\u2715" })] }), _jsxs("div", { className: "se-mb-2", children: [_jsx(ProgressBar, { completed: completedCount, total: totalSteps }), _jsxs("div", { className: "se-text-[10px] se-text-slate-grey-7 se-mt-1", children: [completedCount, " of ", totalSteps, " steps"] })] }), _jsx("div", { className: "se-flex se-flex-col", children: workflow.steps.map((step) => _jsx(StepItem, { step, isCompleted: workflow.completedSteps.includes(step.id), isCurrent: workflow.currentStepId === step.id, tourId: workflow.tourId, onStepClick }, step.id)) }), expanded && workflow.meta.description && _jsx("div", { className: "se-mt-2 se-text-[11px] se-text-slate-grey-7", children: workflow.meta.description })] });
+}
+function WorkflowTracker({ workflows, expanded, onStepClick, onDismiss }) {
+  if (workflows.length === 0) {
+    return _jsx("div", { className: "se-flex se-items-center se-justify-center se-py-6 se-text-xs se-text-slate-grey-7", children: "No active workflows" });
+  }
+  return _jsx("div", { className: "se-flex se-flex-col se-gap-2", children: workflows.map((workflow) => _jsx(WorkflowCard, { workflow, expanded, onStepClick, onDismiss }, workflow.tourId)) });
+}
+
+// ../adaptives/adaptive-overlays/dist/WorkflowWidget.js
+function showWorkflowToast(container, notification) {
+  const toast = document.createElement("div");
+  toast.setAttribute("data-testid", "workflow-toast");
+  toast.className = "se-fixed se-bottom-4 se-right-4 se-z-50";
+  Object.assign(toast.style, {
+    position: "fixed",
+    bottom: "16px",
+    right: "16px",
+    zIndex: "2147483646",
+    padding: "12px 16px",
+    borderRadius: "8px",
+    backgroundColor: "var(--se-color-bg-surface, #fff)",
+    color: "var(--se-color-text-primary, #1a1a1a)",
+    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.className = "se-font-semibold";
+  titleEl.style.fontWeight = "600";
+  titleEl.textContent = notification.title;
+  toast.appendChild(titleEl);
+  if (notification.body) {
+    const bodyEl = document.createElement("div");
+    bodyEl.className = "se-mt-1 se-text-sm";
+    bodyEl.style.marginTop = "4px";
+    bodyEl.style.fontSize = "13px";
+    bodyEl.style.color = "var(--se-color-text-secondary, #666)";
+    bodyEl.textContent = notification.body;
+    toast.appendChild(bodyEl);
+  }
+  container.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 === "core:tour" && action.workflow && action.tourId) {
+      const meta = action.workflow;
+      const rawSteps = action.steps || [];
+      const steps = rawSteps.map((s) => {
+        var _a2;
+        return {
+          id: s.id,
+          title: ((_a2 = meta.stepTitles) == null ? void 0 : _a2[s.id]) || s.id
+        };
+      });
+      workflows.set(action.tourId, { meta, steps });
+    }
+  }
+  return workflows;
+}
+function WorkflowWidgetInner({ runtime: runtime3 }) {
+  var _a2, _b;
+  const [actionVersion, setActionVersion] = useState(0);
+  const tourWorkflows = useMemo(() => {
+    var _a3, _b2;
+    const active = ((_b2 = (_a3 = runtime3 == null ? void 0 : runtime3.actions) == null ? void 0 : _a3.getActive) == null ? void 0 : _b2.call(_a3)) || [];
+    return extractWorkflowsFromActive(active);
+  }, [runtime3, actionVersion]);
+  const tourWorkflowsRef = useRef(tourWorkflows);
+  tourWorkflowsRef.current = tourWorkflows;
+  useEffect(() => {
+    var _a3;
+    if (!((_a3 = runtime3 == null ? void 0 : runtime3.events) == null ? void 0 : _a3.subscribe))
+      return;
+    return runtime3.events.subscribe({ names: ["tour.started", "tour.resumed"] }, () => setActionVersion((v) => v + 1));
+  }, [runtime3]);
+  const stateNs = useMemo(() => {
+    var _a3, _b2, _c;
+    return (_c = (_b2 = (_a3 = runtime3 == null ? void 0 : runtime3.state) == null ? void 0 : _a3.user) == null ? void 0 : _b2.ns) == null ? void 0 : _c.call(_b2, "workflows");
+  }, [runtime3]);
+  const notifiedRef = useRef(/* @__PURE__ */ new Set());
+  const toastCleanupsRef = useRef([]);
+  const containerRef = useRef(null);
+  const completedMapRef = useRef({});
+  const [workflowEntries, setWorkflowEntries] = useState([]);
+  const persistInitialized = useRef(false);
+  if (!persistInitialized.current && stateNs) {
+    const notified = ((_a2 = stateNs.get) == null ? void 0 : _a2.call(stateNs, "notified")) || [];
+    for (const id of notified) {
+      notifiedRef.current.add(id);
+    }
+    const completed = ((_b = stateNs.get) == null ? void 0 : _b.call(stateNs, "completed")) || {};
+    completedMapRef.current = { ...completed };
+    persistInitialized.current = true;
+  }
+  useEffect(() => {
+    var _a3, _b2, _c;
+    if (tourWorkflows.size === 0)
+      return;
+    const dismissed = ((_a3 = stateNs == null ? void 0 : stateNs.get) == null ? void 0 : _a3.call(stateNs, "dismissed")) || [];
+    const completed = ((_b2 = stateNs == null ? void 0 : stateNs.get) == null ? void 0 : _b2.call(stateNs, "completed")) || {};
+    setWorkflowEntries((prev) => {
+      const existingIds = new Set(prev.map((e) => e.tourId));
+      const newEntries = [];
+      for (const [tourId, { meta, steps }] of tourWorkflows) {
+        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 ? [...prev, ...newEntries] : prev;
+    });
+    for (const [tourId, { meta }] of tourWorkflows) {
+      if (!notifiedRef.current.has(tourId) && meta.notification && containerRef.current && !dismissed.includes(tourId) && !completed[tourId]) {
+        notifiedRef.current.add(tourId);
+        (_c = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _c.call(stateNs, "notified", [...notifiedRef.current]);
+        const cleanup = showWorkflowToast(containerRef.current, meta.notification);
+        toastCleanupsRef.current.push(cleanup);
+      }
+    }
+  }, [tourWorkflows, stateNs]);
+  useEffect(() => {
+    var _a3;
+    if (!((_a3 = runtime3 == null ? void 0 : runtime3.events) == null ? void 0 : _a3.subscribe))
+      return;
+    const unsubscribe = runtime3.events.subscribe({ patterns: ["^tour\\."] }, (event) => {
+      var _a4;
+      const tourId = (_a4 = event.props) == null ? void 0 : _a4.tourId;
+      if (!tourId)
+        return;
+      const currentWorkflows = tourWorkflowsRef.current;
+      if (!currentWorkflows.has(tourId) && event.name === "tour.started") {
+        setActionVersion((v) => v + 1);
+        return;
+      }
+      if (!currentWorkflows.has(tourId))
+        return;
+      setWorkflowEntries((prev) => {
+        const updated = prev.map((entry) => {
+          var _a5, _b2, _c, _d, _e, _f, _g, _h;
+          if (entry.tourId !== tourId)
+            return entry;
+          switch (event.name) {
+            case "tour.started": {
+              const startStepId = ((_a5 = event.props) == null ? void 0 : _a5.startStepId) || ((_b2 = entry.steps[0]) == null ? void 0 : _b2.id) || null;
+              if (!notifiedRef.current.has(tourId)) {
+                notifiedRef.current.add(tourId);
+                (_c = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _c.call(stateNs, "notified", [...notifiedRef.current]);
+                const workflow = currentWorkflows.get(tourId);
+                if ((workflow == null ? void 0 : workflow.meta.notification) && containerRef.current) {
+                  const cleanup = showWorkflowToast(containerRef.current, workflow.meta.notification);
+                  toastCleanupsRef.current.push(cleanup);
+                }
+              }
+              const activeIds = prev.filter((e) => e.status === "active" || e.tourId === tourId).map((e) => e.tourId);
+              if (!activeIds.includes(tourId)) {
+                activeIds.push(tourId);
+              }
+              (_d = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _d.call(stateNs, "active", [...new Set(activeIds)]);
+              return {
+                ...entry,
+                status: "active",
+                currentStepId: startStepId,
+                completedSteps: entry.status === "active" ? entry.completedSteps : []
+              };
+            }
+            case "tour.step_started": {
+              const stepId = (_e = event.props) == null ? void 0 : _e.stepId;
+              return {
+                ...entry,
+                currentStepId: stepId || entry.currentStepId
+              };
+            }
+            case "tour.step_changed": {
+              const previousStepId = (_f = event.props) == null ? void 0 : _f.previousStepId;
+              const nextStepId = (_g = event.props) == null ? void 0 : _g.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();
+              completedMapRef.current[tourId] = completedAt;
+              (_h = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _h.call(stateNs, "completed", { ...completedMapRef.current });
+              return {
+                ...entry,
+                status: "completed",
+                currentStepId: null,
+                completedSteps: entry.steps.map((s) => s.id),
+                completedAt
+              };
+            }
+            case "tour.paused": {
+              return entry;
+            }
+            default:
+              return entry;
+          }
+        });
+        return updated;
+      });
+    });
+    return () => {
+      unsubscribe();
+      for (const cleanup of toastCleanupsRef.current) {
+        cleanup();
+      }
+      toastCleanupsRef.current = [];
+    };
+  }, [runtime3, stateNs]);
+  const handleStepClick = useCallback((tourId, stepId) => {
+    var _a3, _b2;
+    (_b2 = (_a3 = runtime3 == null ? void 0 : runtime3.events) == null ? void 0 : _a3.publish) == null ? void 0 : _b2.call(_a3, "workflow:jump_to_step", { tourId, stepId });
+  }, [runtime3]);
+  const handleDismiss = useCallback((tourId) => {
+    setWorkflowEntries((prev) => {
+      var _a3;
+      const updated = prev.map((entry) => entry.tourId === tourId ? { ...entry, status: "dismissed" } : entry);
+      const dismissedIds = updated.filter((e) => e.status === "dismissed").map((e) => e.tourId);
+      (_a3 = stateNs == null ? void 0 : stateNs.set) == null ? void 0 : _a3.call(stateNs, "dismissed", dismissedIds);
+      return updated;
+    });
+  }, [stateNs]);
+  const activeWorkflows = useMemo(() => workflowEntries.filter((w) => w.status === "active"), [workflowEntries]);
+  return _jsx2("div", { ref: containerRef, children: _jsx2(WorkflowTracker, { workflows: activeWorkflows, onStepClick: handleStepClick, onDismiss: handleDismiss }) });
+}
+var WorkflowMountableWidget = {
+  mount(container, config) {
+    const runtime3 = (config == null ? void 0 : config.runtime) || null;
+    const root = createRoot(container);
+    root.render(React.createElement(WorkflowWidgetInner, {
+      runtime: runtime3
+    }));
+    return () => {
+      root.unmount();
+    };
+  }
+};
+
 // ../adaptives/adaptive-overlays/dist/runtime.js
 var executeHighlight = async (action, context) => {
-  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    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 = (_a2 = action.style) == null ? void 0 : _a2.color;
+  if (!ringColor) {
+    try {
+      const primary = (_b = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")) == null ? void 0 : _b.trim();
+      if (primary)
+        ringColor = primary;
+    } catch {
+    }
   }
   const handle = showHighlight(anchorEl, context.overlayRoot, {
-    paddingPx: (_b = (_a2 = action.style) == null ? void 0 : _a2.paddingPx) != null ? _b : 12,
-    radiusPx: (_d = (_c = action.style) == null ? void 0 : _c.radiusPx) != null ? _d : 12,
-    scrimOpacity: (_f = (_e = action.style) == null ? void 0 : _e.scrimOpacity) != null ? _f : 0.55,
-    ringColor: (_g = action.style) == null ? void 0 : _g.color,
-    blocking: (_h = action.blocking) != null ? _h : false,
-    onClickOutside: (_i = action.onClickOutside) != null ? _i : true,
-    onEsc: (_j = action.onEsc) != null ? _j : true
+    paddingPx: (_d = (_c = action.style) == null ? void 0 : _c.paddingPx) != null ? _d : 12,
+    radiusPx: (_f = (_e = action.style) == null ? void 0 : _e.radiusPx) != null ? _f : 12,
+    scrimOpacity: (_h = (_g = action.style) == null ? void 0 : _g.scrimOpacity) != null ? _h : 0.55,
+    ringColor,
+    blocking: (_i = action.blocking) != null ? _i : false,
+    onClickOutside: (_j = action.onClickOutside) != null ? _j : true,
+    onEsc: (_k = action.onEsc) != null ? _k : true
   });
   context.publishEvent("action.applied", {
     id: context.generateId(),
@@ -1390,33 +2475,82 @@ var executeHighlight = async (action, context) => {
   return {
     cleanup: () => {
       handle.destroy();
+      anchorEl.removeAttribute("data-syntro-highlight");
     }
   };
 };
 var executePulse = async (action, context) => {
-  var _a2;
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  var _a2, _b, _c;
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  const duration = (_a2 = action.duration) != null ? _a2 : 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 = (_b = styles.getPropertyValue("--sc-color-primary")) == null ? void 0 : _b.trim();
+    const sHex = (_c = styles.getPropertyValue("--sc-color-primary-hover")) == null ? void 0 : _c.trim();
+    if ((pHex == null ? void 0 : pHex.startsWith("#")) && pHex.length >= 7) {
+      primary = parseHex(pHex);
+    }
+    if ((sHex == null ? void 0 : sHex.startsWith("#")) && sHex.length >= 7) {
+      secondary = parseHex(sHex);
+    }
+  } catch {
   }
-  const duration = (_a2 = action.duration) != null ? _a2 : 2e3;
-  if (!document.querySelector("[data-syntro-pulse-styles]")) {
-    const style = document.createElement("style");
-    style.setAttribute("data-syntro-pulse-styles", "");
+  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(79, 70, 229, 0.4);
+          box-shadow: 0 0 0 0 rgba(${pr}, ${pg}, ${pb}, 0.35);
         }
         50% {
-          box-shadow: 0 0 0 8px rgba(79, 70, 229, 0);
+          box-shadow: 0 0 0 12px rgba(${pr}, ${pg}, ${pb}, 0);
         }
       }
     `;
-    document.head.appendChild(style);
   }
+  document.head.appendChild(style);
   const originalAnimation = anchorEl.style.animation;
-  anchorEl.style.animation = "syntro-pulse-anim 1s cubic-bezier(0.4, 0, 0.6, 1) infinite";
+  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;
@@ -1437,14 +2571,27 @@ var executePulse = async (action, context) => {
   };
 };
 var executeBadge = async (action, context) => {
-  var _a2;
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  var _a2, _b;
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
+  }
+  let badgeColor = "#4f46e5";
+  try {
+    const primary = (_a2 = getComputedStyle(context.overlayRoot).getPropertyValue("--sc-color-primary")) == null ? void 0 : _a2.trim();
+    if ((primary == null ? void 0 : primary.startsWith("#")) && primary.length >= 7) {
+      badgeColor = primary;
+    }
+  } catch {
   }
   const badge2 = document.createElement("div");
   badge2.textContent = action.content;
-  badge2.setAttribute("data-syntro-badge", action.anchorId);
+  badge2.setAttribute("data-syntro-badge", action.anchorId.selector);
   Object.assign(badge2.style, {
     position: "absolute",
     padding: "2px 6px",
@@ -1452,13 +2599,13 @@ var executeBadge = async (action, context) => {
     fontWeight: "600",
     lineHeight: "1",
     color: "white",
-    background: "var(--syntro-accent, #4f46e5)",
+    background: badgeColor,
     borderRadius: "9999px",
     pointerEvents: "none",
     zIndex: "2147483646",
     whiteSpace: "nowrap"
   });
-  const position = (_a2 = action.position) != null ? _a2 : "top-right";
+  const position = (_b = action.position) != null ? _b : "top-right";
   const originalPosition = anchorEl.style.position;
   if (getComputedStyle(anchorEl).position === "static") {
     anchorEl.style.position = "relative";
@@ -1501,9 +2648,14 @@ var executeBadge = async (action, context) => {
 };
 var executeTooltip = async (action, context) => {
   var _a2, _b, _c, _d;
-  const anchorEl = context.resolveAnchor(action.anchorId);
+  let anchorEl = context.resolveAnchor(action.anchorId);
+  if (!anchorEl && context.waitForAnchor) {
+    anchorEl = await context.waitForAnchor(action.anchorId, 3e3);
+  }
   if (!anchorEl) {
-    throw new Error(`Anchor not found: ${action.anchorId}`);
+    console.warn(`[adaptive-overlays] Anchor not found after waiting: ${action.anchorId.selector}`);
+    return { cleanup: () => {
+    } };
   }
   const { content } = action;
   let html = "";
@@ -1576,14 +2728,27 @@ var executors2 = [
   { kind: "overlays:pulse", executor: executePulse },
   { kind: "overlays:badge", executor: executeBadge },
   { kind: "overlays:tooltip", executor: executeTooltip },
-  { kind: "overlays:modal", executor: executeModal }
+  { kind: "overlays:modal", executor: executeModal },
+  { kind: "core:tour", executor: executeTour },
+  { kind: "overlays:celebrate", executor: executeCelebrate }
 ];
 var runtime2 = {
   id: "adaptive-overlays",
   version: "1.0.0",
   name: "Overlays",
-  description: "Tooltips, highlights, badges, modals, and visual overlays",
-  executors: executors2
+  description: "Tooltips, highlights, badges, modals, celebrations, visual overlays, and workflow tracking",
+  executors: executors2,
+  widgets: [
+    {
+      id: "adaptive-overlays:workflow-tracker",
+      component: WorkflowMountableWidget,
+      metadata: {
+        name: "Workflow Tracker",
+        icon: "\u{1F4CB}",
+        description: "Tracks multi-step workflow progress across tours"
+      }
+    }
+  ]
 };
 
 // src/apps/AppContext.ts
@@ -2193,7 +3358,7 @@ function getAntiFlickerSnippet(config = {}) {
 }
 
 // src/version.ts
-var SDK_VERSION = "2.4.1";
+var SDK_VERSION = "2.6.0-canary.1";
 
 // src/types.ts
 var SDK_SCHEMA_VERSION = "2.0";
@@ -2434,44 +3599,69 @@ var createCanvasConfigFetcher = ({
 };
 
 // src/events/registerConfigPredicates.ts
-function registerConfigPredicates(tiles, accumulator) {
-  var _a2;
+var ELEMENT_CHAIN_FIELDS = /* @__PURE__ */ new Set(["tag_name", "$el_text"]);
+function isElementChainField(key) {
+  return ELEMENT_CHAIN_FIELDS.has(key) || key.startsWith("attr__");
+}
+function checkMatchOp(op, value) {
+  if (op.equals !== void 0) {
+    return value === op.equals;
+  }
+  if (op.contains !== void 0) {
+    return typeof value === "string" && value.includes(op.contains);
+  }
+  return false;
+}
+function buildPredicate(counter) {
+  const { events: eventNames, match } = counter;
+  return (event) => {
+    var _a2, _b;
+    if (!eventNames.includes(event.name)) return false;
+    if (match) {
+      for (const [key, op] of Object.entries(match)) {
+        if (isElementChainField(key)) {
+          const elements = (_a2 = event.props) == null ? void 0 : _a2.elements;
+          if (!elements) return false;
+          const anyMatch = elements.some((el) => checkMatchOp(op, el[key]));
+          if (!anyMatch) return false;
+        } else {
+          if (!checkMatchOp(op, (_b = event.props) == null ? void 0 : _b[key])) return false;
+        }
+      }
+    }
+    return true;
+  };
+}
+function registerFromTriggerWhen(triggerWhen, accumulator) {
+  for (const rule of triggerWhen.rules) {
+    for (const cond of rule.conditions) {
+      if (cond.type === "event_count" && cond.key) {
+        const counter = cond.counter;
+        const predicate = counter ? buildPredicate(counter) : () => true;
+        accumulator.register(cond.key, predicate);
+      }
+    }
+  }
+}
+function registerConfigPredicates(tiles, accumulator, actions) {
+  var _a2, _b;
   for (const tile of tiles) {
     const props = tile.props;
     if (!props) continue;
-    const scope = props.scope;
-    if (!(scope == null ? void 0 : scope.events)) continue;
-    const actions = props.actions;
-    if (!actions) continue;
-    const keys = /* @__PURE__ */ new Set();
-    for (const action of actions) {
-      if (((_a2 = action.showWhen) == null ? void 0 : _a2.type) === "rules") {
-        for (const rule of action.showWhen.rules) {
-          for (const cond of rule.conditions) {
-            if (cond.type === "event_count" && cond.key) {
-              keys.add(cond.key);
-            }
-          }
-        }
+    const tileActions = props.actions;
+    if (!tileActions) continue;
+    for (const action of tileActions) {
+      if (((_a2 = action.triggerWhen) == null ? void 0 : _a2.type) === "rules") {
+        registerFromTriggerWhen(action.triggerWhen, accumulator);
       }
     }
-    if (keys.size === 0) continue;
-    const { events: eventNames, urlContains, props: propFilters } = scope;
-    for (const key of keys) {
-      accumulator.register(key, (event) => {
-        var _a3, _b, _c;
-        if (!eventNames.includes(event.name)) return false;
-        if (urlContains) {
-          const pathname = String((_b = (_a3 = event.props) == null ? void 0 : _a3.pathname) != null ? _b : "");
-          if (!pathname.includes(urlContains)) return false;
-        }
-        if (propFilters) {
-          for (const [k, v] of Object.entries(propFilters)) {
-            if (((_c = event.props) == null ? void 0 : _c[k]) !== v) return false;
-          }
-        }
-        return true;
-      });
+  }
+  if (actions) {
+    for (const rawAction of actions) {
+      const action = rawAction;
+      if (((_b = action.triggerWhen) == null ? void 0 : _b.type) === "rules") {
+        registerFromTriggerWhen(action.triggerWhen, accumulator);
+      }
     }
   }
 }
@@ -2482,9 +3672,15 @@ var SmartCanvasController = class {
     __publicField(this, "state");
     __publicField(this, "listeners", /* @__PURE__ */ new Set());
     var _a2;
-    this.state = {
-      open: (_a2 = initial == null ? void 0 : initial.open) != null ? _a2 : false
-    };
+    let open = (_a2 = initial == null ? void 0 : initial.open) != null ? _a2 : false;
+    if ((initial == null ? void 0 : initial.open) === void 0) {
+      try {
+        const stored = sessionStorage == null ? void 0 : sessionStorage.getItem("syntro:editor:panel-open");
+        if (stored !== null) open = JSON.parse(stored);
+      } catch {
+      }
+    }
+    this.state = { open };
   }
   getState() {
     return this.state;
@@ -2498,6 +3694,10 @@ var SmartCanvasController = class {
   setOpen(open) {
     if (this.state.open === open) return;
     this.state = { ...this.state, open };
+    try {
+      sessionStorage == null ? void 0 : sessionStorage.setItem("syntro:editor:panel-open", JSON.stringify(open));
+    } catch {
+    }
     this.emit();
   }
   toggle() {
@@ -2616,208 +3816,42 @@ function overlayCompleted(recipeId, recipeName) {
   return createCanvasEvent(StandardEvents.OVERLAY_COMPLETED, {
     recipeId,
     recipeName
-  });
-}
-function overlayDismissed(recipeId, recipeName, stepIndex) {
-  return createCanvasEvent(StandardEvents.OVERLAY_DISMISSED, {
-    recipeId,
-    recipeName,
-    stepIndex
-  });
-}
-function overlayStepViewed(recipeId, stepIndex, stepTitle) {
-  return createCanvasEvent(StandardEvents.OVERLAY_STEP_VIEWED, {
-    recipeId,
-    stepIndex,
-    stepTitle
-  });
-}
-function customCanvasEvent(name, props) {
-  const eventName = name.startsWith("canvas.") ? name : `canvas.${name}`;
-  return createCanvasEvent(eventName, props);
-}
-var CanvasEvents = {
-  canvasOpened,
-  canvasClosed,
-  tileViewed,
-  tileExpanded,
-  tileCollapsed,
-  tileAction,
-  overlayStarted,
-  overlayCompleted,
-  overlayDismissed,
-  overlayStepViewed,
-  custom: customCanvasEvent
-};
-
-// src/theme/defaultTheme.ts
-function withAlpha(hex, alpha) {
-  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
-}
-var darkTheme = {
-  // Brand colors
-  colorPrimary: brand[3],
-  colorPrimaryHover: brand[4],
-  colorPrimaryMuted: brand[0],
-  // Surface colors (with alpha for glass/vibrancy effects)
-  colorBackground: withAlpha(slateGrey[1], 0.95),
-  colorBackgroundElevated: withAlpha(slateGrey[3], 0.95),
-  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.2),
-  colorSurface: withAlpha(slateGrey[4], 0.8),
-  colorSurfaceHover: withAlpha(slateGrey[5], 0.8),
-  // Text colors
-  colorText: text.primary,
-  colorTextSecondary: text.secondary,
-  colorTextMuted: text.tertiary,
-  colorTextInverse: slateGrey[1],
-  // Border colors
-  colorBorder: border.primary,
-  colorBorderSubtle: border.secondary,
-  // Semantic colors
-  colorSuccess: green[4],
-  colorSuccessMuted: green[0],
-  colorWarning: yellow[4],
-  colorWarningMuted: yellow[0],
-  colorError: red[4],
-  colorErrorMuted: red[0],
-  colorInfo: blue[4],
-  colorInfoMuted: blue[0],
-  // Notification badge
-  colorNotification: brand[4],
-  colorNotificationMuted: withAlpha(brand[4], 0.4),
-  // Glass morphism
-  glassBackground: withAlpha(slateGrey[1], 0.6),
-  glassBackgroundHover: withAlpha(slateGrey[1], 0.7),
-  glassBorder: "rgba(255, 255, 255, 0.08)",
-  glassBlur: "blur(24px)",
-  glassSaturate: "saturate(1.2)",
-  // Typography (SF Pro stack)
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
-  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
-  fontSizeXs: "0.7rem",
-  fontSizeSm: "0.8rem",
-  fontSizeMd: "0.9rem",
-  fontSizeLg: "1rem",
-  fontSizeXl: "1.25rem",
-  fontSizeXxl: "1.5rem",
-  fontWeightNormal: "400",
-  fontWeightMedium: "500",
-  fontWeightSemibold: "600",
-  fontWeightBold: "700",
-  lineHeightTight: "1.25",
-  lineHeightNormal: "1.5",
-  lineHeightRelaxed: "1.75",
-  // Spacing
-  spacingXs: "0.25rem",
-  spacingSm: "0.5rem",
-  spacingMd: "0.75rem",
-  spacingLg: "1rem",
-  spacingXl: "1.5rem",
-  // Border radius
-  borderRadiusSm: "6px",
-  borderRadiusMd: "10px",
-  borderRadiusLg: "14px",
-  borderRadiusXl: "20px",
-  borderRadiusFull: "9999px",
-  // Shadows
-  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.2)",
-  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.3)",
-  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.4)",
-  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.5)",
-  // Backdrop effects
-  backdropBlur: "blur(20px)",
-  backdropSaturate: "saturate(180%)",
-  // Animation
-  transitionFast: "0.1s ease",
-  transitionNormal: "0.25s ease",
-  transitionSlow: "0.4s ease"
-};
-var lightTheme = {
-  // Brand colors
-  colorPrimary: brand[3],
-  colorPrimaryHover: brand[2],
-  colorPrimaryMuted: withAlpha(brand[5], 0.1),
-  // Surface colors
-  colorBackground: withAlpha(slateGrey[12], 0.95),
-  colorBackgroundElevated: withAlpha(slateGrey[11], 0.95),
-  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.02),
-  colorSurface: withAlpha(slateGrey[11], 0.6),
-  colorSurfaceHover: withAlpha(slateGrey[10], 0.6),
-  // Text colors
-  colorText: slateGrey[1],
-  colorTextSecondary: slateGrey[6],
-  colorTextMuted: slateGrey[8],
-  colorTextInverse: slateGrey[12],
-  // Border colors
-  colorBorder: withAlpha(slateGrey[0], 0.12),
-  colorBorderSubtle: withAlpha(slateGrey[0], 0.06),
-  // Semantic colors
-  colorSuccess: green[4],
-  colorSuccessMuted: withAlpha(green[4], 0.12),
-  colorWarning: yellow[4],
-  colorWarningMuted: withAlpha(yellow[4], 0.12),
-  colorError: red[4],
-  colorErrorMuted: withAlpha(red[4], 0.12),
-  colorInfo: blue[4],
-  colorInfoMuted: withAlpha(blue[4], 0.12),
-  // Notification badge
-  colorNotification: brand[3],
-  colorNotificationMuted: withAlpha(brand[3], 0.4),
-  // Glass morphism
-  glassBackground: withAlpha(slateGrey[12], 0.7),
-  glassBackgroundHover: withAlpha(slateGrey[12], 0.8),
-  glassBorder: "rgba(0, 0, 0, 0.06)",
-  glassBlur: "blur(24px)",
-  glassSaturate: "saturate(1.2)",
-  // Typography (same as dark)
-  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
-  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
-  fontSizeXs: "0.7rem",
-  fontSizeSm: "0.8rem",
-  fontSizeMd: "0.9rem",
-  fontSizeLg: "1rem",
-  fontSizeXl: "1.25rem",
-  fontSizeXxl: "1.5rem",
-  fontWeightNormal: "400",
-  fontWeightMedium: "500",
-  fontWeightSemibold: "600",
-  fontWeightBold: "700",
-  lineHeightTight: "1.25",
-  lineHeightNormal: "1.5",
-  lineHeightRelaxed: "1.75",
-  // Spacing (same as dark)
-  spacingXs: "0.25rem",
-  spacingSm: "0.5rem",
-  spacingMd: "0.75rem",
-  spacingLg: "1rem",
-  spacingXl: "1.5rem",
-  // Border radius (same as dark)
-  borderRadiusSm: "6px",
-  borderRadiusMd: "10px",
-  borderRadiusLg: "14px",
-  borderRadiusXl: "20px",
-  borderRadiusFull: "9999px",
-  // Shadows (lighter for light mode)
-  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.08)",
-  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.12)",
-  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.16)",
-  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.2)",
-  // Backdrop effects
-  backdropBlur: "blur(20px)",
-  backdropSaturate: "saturate(180%)",
-  // Animation
-  transitionFast: "0.1s ease",
-  transitionNormal: "0.25s ease",
-  transitionSlow: "0.4s ease"
+  });
+}
+function overlayDismissed(recipeId, recipeName, stepIndex) {
+  return createCanvasEvent(StandardEvents.OVERLAY_DISMISSED, {
+    recipeId,
+    recipeName,
+    stepIndex
+  });
+}
+function overlayStepViewed(recipeId, stepIndex, stepTitle) {
+  return createCanvasEvent(StandardEvents.OVERLAY_STEP_VIEWED, {
+    recipeId,
+    stepIndex,
+    stepTitle
+  });
+}
+function customCanvasEvent(name, props) {
+  const eventName = name.startsWith("canvas.") ? name : `canvas.${name}`;
+  return createCanvasEvent(eventName, props);
+}
+var CanvasEvents = {
+  canvasOpened,
+  canvasClosed,
+  tileViewed,
+  tileExpanded,
+  tileCollapsed,
+  tileAction,
+  overlayStarted,
+  overlayCompleted,
+  overlayDismissed,
+  overlayStepViewed,
+  custom: customCanvasEvent
 };
 
-// src/theme/ThemeProvider.tsx
-import { createContext as createContext2, useContext as useContext2, useEffect, useMemo, useState } from "react";
-import { jsx as jsx2 } from "react/jsx-runtime";
-var ThemeContext = createContext2(null);
-
 // src/notifications/NotificationToastStack.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 var TOAST_STYLES_ID = "syntro-toast-styles";
 var TOAST_CSS = `
   @keyframes syntro-toast-slide-in {
@@ -2854,7 +3888,7 @@ function NotificationToastStack({
   const { shadowRoot } = useShadowRoot();
   ensureToastStyles(shadowRoot);
   if (notifications.length === 0) return null;
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     "div",
     {
       "data-testid": "notification-toast-stack",
@@ -2878,11 +3912,11 @@ function NotificationToastStack({
             {
               className: "syntro-toast-enter",
               style: {
-                background: withAlpha(slateGrey[0], 0.95),
+                background: "var(--sc-notification-background)",
                 backdropFilter: "blur(12px)",
                 WebkitBackdropFilter: "blur(12px)",
-                border: `1px solid ${slateGrey[5]}`,
-                borderRadius: "12px",
+                border: "var(--sc-notification-border)",
+                borderRadius: "var(--sc-notification-border-radius)",
                 overflow: "hidden",
                 cursor: "pointer",
                 transition: "transform 0.15s ease"
@@ -2909,14 +3943,14 @@ function NotificationToastStack({
                       padding: "10px 12px"
                     },
                     children: [
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx2(
                         "div",
                         {
                           style: {
                             width: "28px",
                             height: "28px",
                             borderRadius: "8px",
-                            background: withAlpha(brand[3], 0.15),
+                            background: "var(--sc-notification-icon-background)",
                             display: "flex",
                             alignItems: "center",
                             justifyContent: "center",
@@ -2927,13 +3961,13 @@ function NotificationToastStack({
                         }
                       ),
                       /* @__PURE__ */ jsxs("div", { style: { flex: 1, minWidth: 0 }, children: [
-                        /* @__PURE__ */ jsx3(
+                        /* @__PURE__ */ jsx2(
                           "div",
                           {
                             style: {
                               fontSize: "13px",
                               fontWeight: 600,
-                              color: text.primary,
+                              color: "var(--sc-notification-text-color)",
                               lineHeight: "1.3",
                               whiteSpace: "nowrap",
                               overflow: "hidden",
@@ -2942,12 +3976,12 @@ function NotificationToastStack({
                             children: notif.title
                           }
                         ),
-                        notif.body && /* @__PURE__ */ jsx3(
+                        notif.body && /* @__PURE__ */ jsx2(
                           "div",
                           {
                             style: {
                               fontSize: "12px",
-                              color: text.secondary,
+                              color: "var(--sc-notification-text-secondary-color)",
                               lineHeight: "1.3",
                               marginTop: "2px",
                               whiteSpace: "nowrap",
@@ -2958,7 +3992,7 @@ function NotificationToastStack({
                           }
                         )
                       ] }),
-                      /* @__PURE__ */ jsx3(
+                      /* @__PURE__ */ jsx2(
                         "button",
                         {
                           type: "button",
@@ -2970,7 +4004,7 @@ function NotificationToastStack({
                           style: {
                             background: "none",
                             border: "none",
-                            color: text.tertiary,
+                            color: "var(--sc-notification-text-secondary-color)",
                             cursor: "pointer",
                             padding: "2px",
                             fontSize: "14px",
@@ -2983,13 +4017,13 @@ function NotificationToastStack({
                     ]
                   }
                 ),
-                /* @__PURE__ */ jsx3("div", { style: { height: "2px", background: withAlpha(base.white, 0.06) }, children: /* @__PURE__ */ jsx3(
+                /* @__PURE__ */ jsx2("div", { style: { height: "2px", background: "rgba(0, 0, 0, 0.08)" }, children: /* @__PURE__ */ jsx2(
                   "div",
                   {
                     className: "syntro-toast-progress",
                     style: {
                       height: "100%",
-                      background: `linear-gradient(90deg, ${brand[3]}, ${brand[4]})`,
+                      background: "var(--sc-notification-progress-gradient)",
                       animationDuration: `${notif.ttl}ms`
                     }
                   }
@@ -3054,12 +4088,12 @@ function matchEvent(event, tiles) {
 }
 
 // src/notifications/useNotifications.ts
-import { useCallback, useEffect as useEffect2, useRef, useState as useState2 } from "react";
+import { useCallback as useCallback2, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 function useNotifications(eventBus, tiles) {
   const [notifications, setNotifications] = useState2([]);
-  const cooldownMap = useRef(/* @__PURE__ */ new Map());
-  const timerIds = useRef(/* @__PURE__ */ new Map());
-  const publishDismissed = useCallback(
+  const cooldownMap = useRef2(/* @__PURE__ */ new Map());
+  const timerIds = useRef2(/* @__PURE__ */ new Map());
+  const publishDismissed = useCallback2(
     (notif) => {
       eventBus == null ? void 0 : eventBus.publish(StandardEvents.NOTIFICATION_DISMISSED, {
         notificationId: notif.id,
@@ -3069,7 +4103,7 @@ function useNotifications(eventBus, tiles) {
     },
     [eventBus]
   );
-  const scheduleDismiss = useCallback(
+  const scheduleDismiss = useCallback2(
     (notif) => {
       const timerId = setTimeout(() => {
         setNotifications((prev) => prev.filter((n) => n.id !== notif.id));
@@ -3080,7 +4114,7 @@ function useNotifications(eventBus, tiles) {
     },
     [publishDismissed]
   );
-  const dismiss = useCallback(
+  const dismiss = useCallback2(
     (id) => {
       setNotifications((prev) => {
         const notif = prev.find((n) => n.id === id);
@@ -3102,7 +4136,7 @@ function useNotifications(eventBus, tiles) {
       const match = matchEvent(event, tiles);
       if (!match) return;
       const { notification: matched, rule: matchedRule } = match;
-      const cooldownKey = `${matched.tileId}:${event.name}`;
+      const cooldownKey = matched.itemId ? `${matched.tileId}:${event.name}:${matched.itemId}` : `${matched.tileId}:${event.name}`;
       const lastFired = cooldownMap.current.get(cooldownKey);
       const now = Date.now();
       const cooldown = (_a2 = matchedRule.cooldown) != null ? _a2 : DEFAULT_COOLDOWN;
@@ -3146,7 +4180,7 @@ function useNotifications(eventBus, tiles) {
 }
 
 // src/notifications/useNotifyWatcher.ts
-import { useEffect as useEffect3, useRef as useRef2 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 function collectEntries(tiles, appRegistry2) {
   var _a2, _b;
   const entries = [];
@@ -3161,7 +4195,7 @@ function collectEntries(tiles, appRegistry2) {
   return entries;
 }
 function useNotifyWatcher(runtime3, tiles, appRegistry2) {
-  const prevStateRef = useRef2(/* @__PURE__ */ new Map());
+  const prevStateRef = useRef3(/* @__PURE__ */ new Map());
   useEffect3(() => {
     if (!(runtime3 == null ? void 0 : runtime3.events) || !appRegistry2) return;
     const entries = collectEntries(tiles, appRegistry2);
@@ -3196,9 +4230,9 @@ function useNotifyWatcher(runtime3, tiles, appRegistry2) {
 }
 
 // src/RuntimeProvider.tsx
-import { createContext as createContext3, useContext as useContext3, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var RuntimeReactContext = createContext3({
+import { createContext as createContext2, useContext as useContext2, useEffect as useEffect4, useMemo as useMemo2, useState as useState3 } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var RuntimeReactContext = createContext2({
   runtime: null,
   context: null
 });
@@ -3215,14 +4249,14 @@ function RuntimeProvider({ runtime: runtime3, children }) {
     return unsubscribe;
   }, [runtime3]);
   const value = useMemo2(() => ({ runtime: runtime3, context }), [runtime3, context]);
-  return /* @__PURE__ */ jsx4(RuntimeReactContext.Provider, { value, children });
+  return /* @__PURE__ */ jsx3(RuntimeReactContext.Provider, { value, children });
 }
 function useRuntime() {
-  const { runtime: runtime3 } = useContext3(RuntimeReactContext);
+  const { runtime: runtime3 } = useContext2(RuntimeReactContext);
   return runtime3;
 }
 function useRuntimeContext() {
-  const { context } = useContext3(RuntimeReactContext);
+  const { context } = useContext2(RuntimeReactContext);
   return context;
 }
 function usePageContext() {
@@ -3279,15 +4313,60 @@ function useDecision(strategy, defaultValue) {
 }
 
 // src/components/TileCard.tsx
-import { useCallback as useCallback2, useEffect as useEffect5, useReducer, useRef as useRef3, useState as useState4 } from "react";
+import {
+  useCallback as useCallback3,
+  useEffect as useEffect5,
+  useMemo as useMemo3,
+  useReducer,
+  useRef as useRef4,
+  useState as useState4
+} from "react";
+
+// src/components/TileIcon.tsx
+import {
+  Compass,
+  FileText,
+  Gamepad2,
+  HelpCircle,
+  Layers,
+  MessageCircle,
+  Sparkles,
+  Trophy
+} from "lucide-react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ICON_MAP = {
+  "\u2753": HelpCircle,
+  "\u{1F9ED}": Compass,
+  "\u{1F4DD}": FileText,
+  "\u{1F3AF}": Layers,
+  "\u{1F3C6}": Trophy,
+  "\u2728": Sparkles,
+  "\u{1F4AC}": MessageCircle,
+  "\u{1F3AE}": Gamepad2
+};
+function TileIcon({
+  emoji,
+  size = 18,
+  color = "currentColor"
+}) {
+  const Icon = ICON_MAP[emoji];
+  if (!Icon) {
+    return /* @__PURE__ */ jsx4("span", { children: emoji });
+  }
+  return /* @__PURE__ */ jsx4(Icon, { size, color });
+}
+
+// src/components/TileCard.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
 function WidgetMount({ widgetId, props }) {
   var _a2;
   const runtime3 = useRuntime();
-  const containerRef = useRef3(null);
-  const handleRef = useRef3(null);
+  const parentRef = useRef4(null);
+  const handleRef = useRef4(null);
   const registry = runtime3 == null ? void 0 : runtime3.widgets;
   const widgetAvailable = (_a2 = registry == null ? void 0 : registry.has(widgetId)) != null ? _a2 : false;
+  const propsRef = useRef4(props);
+  propsRef.current = props;
   const [, forceUpdate] = useReducer((x) => x + 1, 0);
   useEffect5(() => {
     if (!registry || widgetAvailable) return;
@@ -3298,14 +4377,27 @@ function WidgetMount({ widgetId, props }) {
     });
   }, [registry, widgetId, widgetAvailable]);
   useEffect5(() => {
-    if (!containerRef.current || !registry || !widgetAvailable) return;
-    const handle = registry.mount(widgetId, containerRef.current, props);
+    if (!parentRef.current || !registry || !widgetAvailable) return;
+    const container = document.createElement("div");
+    container.style.width = "100%";
+    container.style.minHeight = "40px";
+    parentRef.current.appendChild(container);
+    const handle = registry.mount(widgetId, container, propsRef.current);
     handleRef.current = handle;
     return () => {
       handle.unmount();
       handleRef.current = null;
+      container.remove();
     };
-  }, [registry, widgetId, props, widgetAvailable]);
+  }, [registry, widgetId, widgetAvailable]);
+  const propsJson = JSON.stringify(props);
+  const prevPropsJsonRef = useRef4(propsJson);
+  useEffect5(() => {
+    var _a3;
+    if (prevPropsJsonRef.current === propsJson) return;
+    prevPropsJsonRef.current = propsJson;
+    (_a3 = handleRef.current) == null ? void 0 : _a3.update(propsRef.current);
+  }, [propsJson]);
   if (!registry || !registry.has(widgetId)) {
     return /* @__PURE__ */ jsxs2(
       "div",
@@ -3313,7 +4405,7 @@ function WidgetMount({ widgetId, props }) {
         style: {
           padding: "0.75rem",
           fontSize: "0.8rem",
-          color: text.tertiary,
+          color: "var(--sc-tile-text-color)",
           fontStyle: "italic"
         },
         children: [
@@ -3323,173 +4415,585 @@ function WidgetMount({ widgetId, props }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx5("div", { ref: containerRef, style: { width: "100%", minHeight: "40px" } });
+  return /* @__PURE__ */ jsx5("div", { ref: parentRef });
+}
+function TileCard({
+  config,
+  surface: _surface,
+  telemetry: _telemetry,
+  style
+}) {
+  const { title, subtitle, widget, props, icon } = config;
+  const [, setTick] = useState4(0);
+  const runtime3 = useRuntime();
+  useEffect5(() => {
+    if (runtime3) setTick((t) => t + 1);
+  }, [runtime3]);
+  const registration = useMemo3(
+    () => {
+      var _a2, _b;
+      return (_b = (_a2 = runtime3 == null ? void 0 : runtime3.widgets) == null ? void 0 : _a2.getRegistration) == null ? void 0 : _b.call(_a2, widget);
+    },
+    [runtime3 == null ? void 0 : runtime3.widgets, widget]
+  );
+  const resolvedIcon = useMemo3(() => {
+    var _a2, _b;
+    if (icon) return icon;
+    return (_b = (_a2 = registration == null ? void 0 : registration.metadata) == null ? void 0 : _a2.icon) != null ? _b : "+";
+  }, [icon, registration]);
+  const resolvedSubtitle = useMemo3(() => {
+    var _a2;
+    if (subtitle) return subtitle;
+    return (_a2 = registration == null ? void 0 : registration.metadata) == null ? void 0 : _a2.subtitle;
+  }, [subtitle, registration]);
+  const [hovered, setHovered] = useState4(false);
+  const onMouseEnter = useCallback3(() => setHovered(true), []);
+  const onMouseLeave = useCallback3(() => setHovered(false), []);
+  const cardStyle = {
+    display: "flex",
+    flexDirection: "column",
+    borderRadius: "var(--sc-tile-border-radius)",
+    background: hovered ? "var(--sc-tile-background-hover)" : "var(--sc-tile-background)",
+    backdropFilter: "blur(16px) saturate(1.2)",
+    WebkitBackdropFilter: "blur(16px) saturate(1.2)",
+    border: "var(--sc-tile-border)",
+    boxShadow: "var(--sc-tile-shadow)",
+    color: "var(--sc-tile-title-color)",
+    fontFamily: "var(--sc-font-family)",
+    overflow: "hidden",
+    cursor: "default",
+    transition: "all 0.25s ease",
+    transform: hovered ? "scale(1.01)" : "scale(1)",
+    ...style
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    gap: "var(--sc-tile-gap, 0.25rem)",
+    padding: "var(--sc-tile-header-padding, 0.375rem 0.75rem)",
+    minHeight: "44px"
+  };
+  const iconStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  return /* @__PURE__ */ jsxs2(
+    "article",
+    {
+      "data-shadow-canvas-id": `tile-${config.id}`,
+      style: cardStyle,
+      onMouseEnter,
+      onMouseLeave,
+      children: [
+        /* @__PURE__ */ jsxs2("div", { style: headerStyle, children: [
+          /* @__PURE__ */ jsx5("div", { style: iconStyle, children: /* @__PURE__ */ jsx5(TileIcon, { emoji: resolvedIcon, size: resolvedSubtitle ? 36 : 24 }) }),
+          /* @__PURE__ */ jsxs2("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx5(
+              "h3",
+              {
+                style: {
+                  fontSize: "1.14rem",
+                  fontWeight: 600,
+                  color: "var(--sc-tile-title-color)",
+                  margin: "0.125rem 0 0",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: title != null ? title : widget
+              }
+            ),
+            resolvedSubtitle && /* @__PURE__ */ jsx5(
+              "p",
+              {
+                style: {
+                  fontSize: "0.8rem",
+                  fontWeight: 400,
+                  color: "var(--sc-tile-text-color)",
+                  margin: "0.125rem 0 0",
+                  whiteSpace: "nowrap",
+                  overflow: "hidden",
+                  textOverflow: "ellipsis"
+                },
+                children: resolvedSubtitle
+              }
+            )
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx5(
+          "div",
+          {
+            style: {
+              padding: "var(--sc-tile-body-padding, 0 0.75rem 0.5rem)",
+              borderTop: "1px solid rgba(255, 255, 255, 0.06)"
+            },
+            children: /* @__PURE__ */ jsx5("div", { style: { paddingTop: "var(--sc-tile-gap, 0.25rem)" }, children: /* @__PURE__ */ jsx5(WidgetMount, { widgetId: widget, props: { ...props, instanceId: config.id } }) })
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/components/ShadowCanvasOverlay.tsx
+import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo5, useRef as useRef5, useState as useState5 } from "react";
+import { createPortal } from "react-dom";
+
+// src/theme/defaultTheme.ts
+function withAlpha(hex, alpha) {
+  return `${hex}${Math.round(alpha * 255).toString(16).padStart(2, "0")}`;
+}
+var darkTheme = {
+  // Brand colors
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[4],
+  colorPrimaryMuted: brand[0],
+  // Surface colors (with alpha for glass/vibrancy effects)
+  colorBackground: withAlpha(slateGrey[1], 0.95),
+  colorBackgroundElevated: withAlpha(slateGrey[3], 0.95),
+  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.2),
+  colorSurface: withAlpha(slateGrey[4], 0.8),
+  colorSurfaceHover: withAlpha(slateGrey[5], 0.8),
+  // Text colors
+  colorText: text.primary,
+  colorTextSecondary: text.secondary,
+  colorTextMuted: text.tertiary,
+  colorTextInverse: slateGrey[1],
+  // Border colors
+  colorBorder: border.primary,
+  colorBorderSubtle: border.secondary,
+  // Semantic colors
+  colorSuccess: green[4],
+  colorSuccessMuted: green[0],
+  colorWarning: yellow[4],
+  colorWarningMuted: yellow[0],
+  colorError: red[4],
+  colorErrorMuted: red[0],
+  colorInfo: blue[4],
+  colorInfoMuted: blue[0],
+  // Notification badge
+  colorNotification: brand[4],
+  colorNotificationMuted: withAlpha(brand[4], 0.4),
+  // Glass morphism
+  glassBackground: withAlpha(slateGrey[1], 0.6),
+  glassBackgroundHover: withAlpha(slateGrey[1], 0.7),
+  glassBorder: "rgba(255, 255, 255, 0.08)",
+  glassBlur: "blur(24px)",
+  glassSaturate: "saturate(1.2)",
+  // Typography (SF Pro stack)
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
+  fontSizeXs: "0.7rem",
+  fontSizeSm: "0.8rem",
+  fontSizeMd: "0.9rem",
+  fontSizeLg: "1rem",
+  fontSizeXl: "1.25rem",
+  fontSizeXxl: "1.5rem",
+  fontWeightNormal: "400",
+  fontWeightMedium: "500",
+  fontWeightSemibold: "600",
+  fontWeightBold: "700",
+  lineHeightTight: "1.25",
+  lineHeightNormal: "1.5",
+  lineHeightRelaxed: "1.75",
+  // Spacing
+  spacingXs: "0.25rem",
+  spacingSm: "0.5rem",
+  spacingMd: "0.75rem",
+  spacingLg: "1rem",
+  spacingXl: "1.5rem",
+  // Border radius
+  borderRadiusSm: "6px",
+  borderRadiusMd: "10px",
+  borderRadiusLg: "14px",
+  borderRadiusXl: "20px",
+  borderRadiusFull: "9999px",
+  // Shadows
+  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.2)",
+  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.3)",
+  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.4)",
+  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.5)",
+  // Backdrop effects
+  backdropBlur: "blur(20px)",
+  backdropSaturate: "saturate(180%)",
+  // Animation
+  transitionFast: "0.1s ease",
+  transitionNormal: "0.25s ease",
+  transitionSlow: "0.4s ease"
+};
+var lightTheme = {
+  // Brand colors
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[2],
+  colorPrimaryMuted: withAlpha(brand[5], 0.1),
+  // Surface colors
+  colorBackground: withAlpha(slateGrey[12], 0.95),
+  colorBackgroundElevated: withAlpha(slateGrey[11], 0.95),
+  colorBackgroundSubtle: withAlpha(slateGrey[0], 0.02),
+  colorSurface: withAlpha(slateGrey[11], 0.6),
+  colorSurfaceHover: withAlpha(slateGrey[10], 0.6),
+  // Text colors
+  colorText: slateGrey[1],
+  colorTextSecondary: slateGrey[6],
+  colorTextMuted: slateGrey[8],
+  colorTextInverse: slateGrey[12],
+  // Border colors
+  colorBorder: withAlpha(slateGrey[0], 0.12),
+  colorBorderSubtle: withAlpha(slateGrey[0], 0.06),
+  // Semantic colors
+  colorSuccess: green[4],
+  colorSuccessMuted: withAlpha(green[4], 0.12),
+  colorWarning: yellow[4],
+  colorWarningMuted: withAlpha(yellow[4], 0.12),
+  colorError: red[4],
+  colorErrorMuted: withAlpha(red[4], 0.12),
+  colorInfo: blue[4],
+  colorInfoMuted: withAlpha(blue[4], 0.12),
+  // Notification badge
+  colorNotification: brand[3],
+  colorNotificationMuted: withAlpha(brand[3], 0.4),
+  // Glass morphism
+  glassBackground: withAlpha(slateGrey[12], 0.7),
+  glassBackgroundHover: withAlpha(slateGrey[12], 0.8),
+  glassBorder: "rgba(0, 0, 0, 0.06)",
+  glassBlur: "blur(24px)",
+  glassSaturate: "saturate(1.2)",
+  // Typography (same as dark)
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  fontFamilyMono: "'SF Mono', 'Fira Code', Consolas, monospace",
+  fontSizeXs: "0.7rem",
+  fontSizeSm: "0.8rem",
+  fontSizeMd: "0.9rem",
+  fontSizeLg: "1rem",
+  fontSizeXl: "1.25rem",
+  fontSizeXxl: "1.5rem",
+  fontWeightNormal: "400",
+  fontWeightMedium: "500",
+  fontWeightSemibold: "600",
+  fontWeightBold: "700",
+  lineHeightTight: "1.25",
+  lineHeightNormal: "1.5",
+  lineHeightRelaxed: "1.75",
+  // Spacing (same as dark)
+  spacingXs: "0.25rem",
+  spacingSm: "0.5rem",
+  spacingMd: "0.75rem",
+  spacingLg: "1rem",
+  spacingXl: "1.5rem",
+  // Border radius (same as dark)
+  borderRadiusSm: "6px",
+  borderRadiusMd: "10px",
+  borderRadiusLg: "14px",
+  borderRadiusXl: "20px",
+  borderRadiusFull: "9999px",
+  // Shadows (lighter for light mode)
+  shadowSm: "0 1px 2px rgba(0, 0, 0, 0.08)",
+  shadowMd: "0 2px 12px rgba(0, 0, 0, 0.12)",
+  shadowLg: "0 8px 24px rgba(0, 0, 0, 0.16)",
+  shadowXl: "0 16px 48px rgba(0, 0, 0, 0.2)",
+  // Backdrop effects
+  backdropBlur: "blur(20px)",
+  backdropSaturate: "saturate(180%)",
+  // Animation
+  transitionFast: "0.1s ease",
+  transitionNormal: "0.25s ease",
+  transitionSlow: "0.4s ease"
+};
+function kebabCase(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
 }
-function TileCard({
-  config,
-  surface: _surface,
-  telemetry: _telemetry,
-  style
-}) {
-  const { title, widget, props } = config;
-  const [, setTick] = useState4(0);
-  const runtime3 = useRuntime();
-  useEffect5(() => {
-    if (runtime3) setTick((t) => t + 1);
-  }, [runtime3]);
-  const [hovered, setHovered] = useState4(false);
-  const onMouseEnter = useCallback2(() => setHovered(true), []);
-  const onMouseLeave = useCallback2(() => setHovered(false), []);
-  const cardStyle = {
-    display: "flex",
-    flexDirection: "column",
-    borderRadius: "14px",
-    background: hovered ? withAlpha(slateGrey[1], 0.7) : withAlpha(slateGrey[1], 0.6),
-    backdropFilter: "blur(16px) saturate(1.2)",
-    WebkitBackdropFilter: "blur(16px) saturate(1.2)",
+var darkDefaults = {
+  mode: "dark",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[4],
+  borderRadius: "12px",
+  canvas: {
+    position: "right",
+    layout: "overlay",
+    background: withAlpha(slateGrey[1], 0.6),
+    blur: "blur(24px)",
+    border: "none",
+    width: "clamp(380px, 25vw, 520px)",
+    transitionDuration: "300ms",
+    transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    transitionFade: "6%"
+  },
+  launcher: {
+    background: button.primary.backgroundDefault,
+    backgroundHover: button.primary.backgroundHover,
+    color: button.primary.icon,
+    size: "56px",
+    shadow: `0 8px 32px ${withAlpha(slateGrey[0], 0.6)}`,
+    borderRadius: "9999px"
+  },
+  tile: {
+    background: withAlpha(slateGrey[1], 0.6),
+    backgroundHover: withAlpha(slateGrey[1], 0.7),
     border: "1px solid rgba(255, 255, 255, 0.08)",
-    boxShadow: "0 2px 12px rgba(0, 0, 0, 0.3)",
-    color: text.primary,
-    fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', sans-serif",
-    overflow: "hidden",
-    cursor: "default",
-    transition: "all 0.25s ease",
-    transform: hovered ? "scale(1.01)" : "scale(1)",
-    ...style
-  };
-  const headerStyle = {
-    display: "flex",
-    alignItems: "center",
-    gap: "0.75rem",
-    padding: "0.875rem 1rem",
-    minHeight: "72px"
+    borderRadius: "14px",
+    shadow: "0 2px 12px rgba(0, 0, 0, 0.3)",
+    titleColor: text.primary,
+    textColor: text.secondary,
+    iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
+    iconShadow: `0 2px 8px ${brand[3]}40`,
+    headerPadding: "0.375rem 0.75rem",
+    bodyPadding: "0 0.75rem 0.5rem",
+    gap: "0.25rem"
+  },
+  overlay: {
+    background: withAlpha(slateGrey[1], 0.6),
+    textColor: text.primary,
+    titleColor: text.primary,
+    arrowColor: withAlpha(slateGrey[1], 0.6),
+    arrowSize: "8px",
+    border: "none",
+    borderRadius: "0",
+    scrimOpacity: "0",
+    highlightRing: `2px solid ${brand[3]}`
+  },
+  notification: {
+    background: withAlpha(slateGrey[0], 0.95),
+    textColor: text.primary,
+    textSecondaryColor: text.secondary,
+    border: `1px solid ${slateGrey[5]}`,
+    borderRadius: "12px",
+    successColor: green[4],
+    warningColor: yellow[4],
+    errorColor: red[4],
+    iconBackground: withAlpha(brand[3], 0.15),
+    progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[4]})`
+  },
+  content: {
+    background: withAlpha(slateGrey[3], 0.8),
+    backgroundHover: withAlpha(slateGrey[5], 0.6),
+    border: `1px solid ${withAlpha(slateGrey[5], 0.5)}`,
+    borderRadius: "8px",
+    textColor: text.primary,
+    textSecondaryColor: text.secondary,
+    itemDivider: "none",
+    itemGap: "6px",
+    itemPadding: "12px 16px",
+    itemFontSize: "15px",
+    bodyPadding: "0 16px 12px 16px",
+    bodyFontSize: "14px",
+    categoryPadding: "8px 4px 4px 4px",
+    categoryGap: "4px",
+    categoryFontSize: "12px",
+    searchBackground: withAlpha(slateGrey[3], 0.8),
+    searchColor: text.primary,
+    chevronColor: "currentColor"
+  }
+};
+var lightDefaults = {
+  mode: "light",
+  fontFamily: "-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif",
+  colorPrimary: brand[3],
+  colorPrimaryHover: brand[2],
+  borderRadius: "12px",
+  canvas: {
+    position: "right",
+    layout: "overlay",
+    background: withAlpha(slateGrey[12], 0.7),
+    blur: "blur(24px)",
+    border: "none",
+    width: "clamp(380px, 25vw, 520px)",
+    transitionDuration: "300ms",
+    transitionEasing: "cubic-bezier(0.16, 1, 0.3, 1)",
+    transitionFade: "6%"
+  },
+  launcher: {
+    background: brand[3],
+    backgroundHover: brand[2],
+    color: "#ffffff",
+    size: "56px",
+    shadow: "0 8px 32px rgba(0, 0, 0, 0.15)",
+    borderRadius: "9999px"
+  },
+  tile: {
+    background: withAlpha(slateGrey[12], 0.7),
+    backgroundHover: withAlpha(slateGrey[12], 0.8),
+    border: "1px solid rgba(0, 0, 0, 0.06)",
+    borderRadius: "14px",
+    shadow: "0 2px 12px rgba(0, 0, 0, 0.12)",
+    titleColor: slateGrey[1],
+    textColor: slateGrey[6],
+    iconBackground: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
+    iconShadow: `0 2px 8px ${brand[3]}40`,
+    headerPadding: "0.375rem 0.75rem",
+    bodyPadding: "0 0.75rem 0.5rem",
+    gap: "0.25rem"
+  },
+  overlay: {
+    background: withAlpha(slateGrey[12], 0.7),
+    textColor: slateGrey[1],
+    titleColor: slateGrey[1],
+    arrowColor: withAlpha(slateGrey[12], 0.7),
+    arrowSize: "8px",
+    border: "none",
+    borderRadius: "0",
+    scrimOpacity: "0",
+    highlightRing: `2px solid ${brand[3]}`
+  },
+  notification: {
+    background: withAlpha(slateGrey[12], 0.95),
+    textColor: slateGrey[1],
+    textSecondaryColor: slateGrey[6],
+    border: `1px solid ${withAlpha(slateGrey[0], 0.12)}`,
+    borderRadius: "12px",
+    successColor: green[4],
+    warningColor: yellow[4],
+    errorColor: red[4],
+    iconBackground: withAlpha(brand[3], 0.1),
+    progressGradient: `linear-gradient(90deg, ${brand[3]}, ${brand[2]})`
+  },
+  content: {
+    background: withAlpha(slateGrey[12], 0.8),
+    backgroundHover: withAlpha(slateGrey[11], 0.6),
+    border: `1px solid ${slateGrey[11]}`,
+    borderRadius: "8px",
+    textColor: slateGrey[1],
+    textSecondaryColor: slateGrey[6],
+    itemDivider: "none",
+    itemGap: "6px",
+    itemPadding: "12px 16px",
+    itemFontSize: "15px",
+    bodyPadding: "0 16px 12px 16px",
+    bodyFontSize: "14px",
+    categoryPadding: "8px 4px 4px 4px",
+    categoryGap: "4px",
+    categoryFontSize: "12px",
+    searchBackground: slateGrey[12],
+    searchColor: slateGrey[1],
+    chevronColor: "currentColor"
+  }
+};
+function mergeThemeConfig(customer) {
+  var _a2, _b, _c, _d, _e;
+  const base2 = customer.mode === "light" ? lightDefaults : darkDefaults;
+  return {
+    mode: (_a2 = customer.mode) != null ? _a2 : base2.mode,
+    fontFamily: (_b = customer.fontFamily) != null ? _b : base2.fontFamily,
+    colorPrimary: (_c = customer.colorPrimary) != null ? _c : base2.colorPrimary,
+    colorPrimaryHover: (_d = customer.colorPrimaryHover) != null ? _d : base2.colorPrimaryHover,
+    borderRadius: (_e = customer.borderRadius) != null ? _e : base2.borderRadius,
+    canvas: { ...base2.canvas, ...customer.canvas },
+    launcher: { ...base2.launcher, ...customer.launcher },
+    tile: { ...base2.tile, ...customer.tile },
+    overlay: { ...base2.overlay, ...customer.overlay },
+    notification: { ...base2.notification, ...customer.notification },
+    content: { ...base2.content, ...customer.content }
   };
-  const iconStyle = {
-    width: "40px",
-    height: "40px",
-    borderRadius: "10px",
-    background: `linear-gradient(135deg, ${brand[3]} 0%, ${brand[3]}cc 100%)`,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    fontSize: "1.25rem",
-    flexShrink: 0,
-    boxShadow: `0 2px 8px ${brand[3]}40`
+}
+function mergeThemeWithWorkspace(workspaceTheme, configTheme) {
+  var _a2, _b, _c, _d, _e, _f, _g, _h, _i, _j;
+  const mode = (_b = (_a2 = configTheme.mode) != null ? _a2 : workspaceTheme.mode) != null ? _b : "dark";
+  const base2 = mode === "light" ? lightDefaults : darkDefaults;
+  return {
+    mode,
+    fontFamily: (_d = (_c = configTheme.fontFamily) != null ? _c : workspaceTheme.fontFamily) != null ? _d : base2.fontFamily,
+    colorPrimary: (_f = (_e = configTheme.colorPrimary) != null ? _e : workspaceTheme.colorPrimary) != null ? _f : base2.colorPrimary,
+    colorPrimaryHover: (_h = (_g = configTheme.colorPrimaryHover) != null ? _g : workspaceTheme.colorPrimaryHover) != null ? _h : base2.colorPrimaryHover,
+    borderRadius: (_j = (_i = configTheme.borderRadius) != null ? _i : workspaceTheme.borderRadius) != null ? _j : base2.borderRadius,
+    canvas: { ...base2.canvas, ...workspaceTheme.canvas, ...configTheme.canvas },
+    launcher: { ...base2.launcher, ...workspaceTheme.launcher, ...configTheme.launcher },
+    tile: { ...base2.tile, ...workspaceTheme.tile, ...configTheme.tile },
+    overlay: { ...base2.overlay, ...workspaceTheme.overlay, ...configTheme.overlay },
+    notification: {
+      ...base2.notification,
+      ...workspaceTheme.notification,
+      ...configTheme.notification
+    },
+    content: { ...base2.content, ...workspaceTheme.content, ...configTheme.content }
   };
-  return /* @__PURE__ */ jsxs2(
-    "article",
-    {
-      "data-shadow-canvas-id": `tile-${config.id}`,
-      style: cardStyle,
-      onMouseEnter,
-      onMouseLeave,
-      children: [
-        /* @__PURE__ */ jsxs2("div", { style: headerStyle, children: [
-          /* @__PURE__ */ jsx5("div", { style: iconStyle, children: "+" }),
-          /* @__PURE__ */ jsx5("div", { style: { flex: 1, minWidth: 0 }, children: /* @__PURE__ */ jsx5(
-            "h3",
-            {
-              style: {
-                fontSize: "0.95rem",
-                fontWeight: 600,
-                color: text.primary,
-                margin: "0.125rem 0 0",
-                whiteSpace: "nowrap",
-                overflow: "hidden",
-                textOverflow: "ellipsis"
-              },
-              children: title != null ? title : widget
-            }
-          ) })
-        ] }),
-        /* @__PURE__ */ jsx5(
-          "div",
-          {
-            style: {
-              padding: "0 1rem 1rem",
-              borderTop: `1px solid ${border.secondary}`
-            },
-            children: /* @__PURE__ */ jsx5("div", { style: { paddingTop: "0.875rem" }, children: /* @__PURE__ */ jsx5(WidgetMount, { widgetId: widget, props }) })
-          }
-        )
-      ]
+}
+var ELEMENT_SECTIONS = [
+  "canvas",
+  "launcher",
+  "tile",
+  "overlay",
+  "notification",
+  "content"
+];
+function flattenThemeConfig(config) {
+  const vars = {};
+  if (config.fontFamily) vars["--sc-font-family"] = config.fontFamily;
+  if (config.colorPrimary) vars["--sc-color-primary"] = config.colorPrimary;
+  if (config.colorPrimaryHover) vars["--sc-color-primary-hover"] = config.colorPrimaryHover;
+  if (config.borderRadius) vars["--sc-border-radius"] = config.borderRadius;
+  for (const section of ELEMENT_SECTIONS) {
+    const sectionConfig = config[section];
+    if (!sectionConfig) continue;
+    for (const [key, value] of Object.entries(sectionConfig)) {
+      if (value !== void 0) {
+        vars[`--sc-${section}-${kebabCase(key)}`] = value;
+      }
     }
+  }
+  return vars;
+}
+
+// src/theme/ThemeProvider.tsx
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect6, useMemo as useMemo4 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var ThemeContext = createContext3(null);
+function ThemeProvider({
+  children,
+  themeConfig,
+  workspaceTheme,
+  shadowRoot
+}) {
+  const merged = useMemo4(
+    () => workspaceTheme ? mergeThemeWithWorkspace(workspaceTheme, themeConfig != null ? themeConfig : {}) : mergeThemeConfig(themeConfig != null ? themeConfig : {}),
+    [themeConfig, workspaceTheme]
   );
+  const cssVariables = useMemo4(() => flattenThemeConfig(merged), [merged]);
+  useEffect6(() => {
+    if (!shadowRoot) return;
+    let styleEl = shadowRoot.querySelector("#sc-theme-vars");
+    if (!styleEl) {
+      styleEl = document.createElement("style");
+      styleEl.id = "sc-theme-vars";
+      shadowRoot.insertBefore(styleEl, shadowRoot.firstChild);
+    }
+    const cssRules = Object.entries(cssVariables).map(([key, value2]) => `  ${key}: ${value2};`).join("\n");
+    styleEl.textContent = `:host {
+${cssRules}
+}`;
+  }, [shadowRoot, cssVariables]);
+  const value = {
+    config: merged,
+    mode: merged.mode,
+    cssVariables
+  };
+  return /* @__PURE__ */ jsx6(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const context = useContext3(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
 }
 
 // src/components/ShadowCanvasOverlay.tsx
-import { useCallback as useCallback3, useEffect as useEffect6, useRef as useRef4, useState as useState5 } from "react";
-import { createPortal } from "react-dom";
-import { Fragment, jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var LAUNCHER_STYLES_ID = "syntro-launcher-styles";
-var LAUNCHER_CSS = `
-  @keyframes syntro-launcher-pulse {
-    0%, 100% {
-      box-shadow: 0 20px 45px ${slateGrey[0]}59, 0 0 0 0 ${brand[3]}66;
-    }
-    50% {
-      box-shadow: 0 20px 45px ${slateGrey[0]}59, 0 0 0 8px ${brand[3]}00;
-    }
-  }
-  @keyframes syntro-launcher-glow {
-    0%, 100% {
-      border-color: ${slateGrey[5]};
-    }
-    50% {
-      border-color: ${brand[4]}99;
-    }
-  }
-  .syntro-launcher-animate {
-    animation: syntro-launcher-pulse 2s ease-in-out infinite, syntro-launcher-glow 2s ease-in-out infinite;
-  }
-  .syntro-launcher-animate:hover {
-    animation: none;
-  }
-  @keyframes syntro-badge-ping {
-    0% { transform: scale(1); opacity: 1; }
-    75%, 100% { transform: scale(2.2); opacity: 0; }
-  }
-  @keyframes syntro-badge-glow {
-    0%, 100% { box-shadow: 0 0 8px 2px ${withAlpha(brand[4], 0.3)}; }
-    50% { box-shadow: 0 0 20px 6px ${withAlpha(brand[4], 0.5)}; }
-  }
-  @keyframes syntro-badge-bounce {
-    0%, 100% { transform: translateY(0); }
-    25% { transform: translateY(-6px); }
-    50% { transform: translateY(-3px); }
-  }
-  .syntro-badge-ping { animation: syntro-badge-ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }
-  .syntro-badge-glow { animation: syntro-badge-glow 2s ease-in-out infinite; }
-  .syntro-badge-bounce { animation: syntro-badge-bounce 2s ease-in-out infinite; }
-`;
-function ensureLauncherStyles(target) {
+function ensureLauncherStyles(target, css) {
   if (target.querySelector(`#${LAUNCHER_STYLES_ID}`)) return;
   const style = document.createElement("style");
   style.id = LAUNCHER_STYLES_ID;
-  style.textContent = LAUNCHER_CSS;
+  style.textContent = css;
   target.appendChild(style);
 }
-var DEFAULT_THEME = {
-  position: "right",
-  baseWidth: "clamp(320px, 16.666vw, 420px)",
-  expandedWidth: "40vw",
-  zIndex: 2147483600,
-  backdropBlur: "18px",
-  mode: "dark",
-  colorPrimary: brand[3],
-  colorBackground: slateGrey[1],
-  colorText: text.primary,
-  colorTextSecondary: text.secondary,
-  borderRadius: "12px",
-  glassBackground: withAlpha(slateGrey[1], 0.6),
-  glassBlur: "blur(24px)",
-  glassSaturate: "saturate(1.2)"
-};
 function ShadowCanvasOverlay({
   isOpen,
   onToggle,
   telemetry,
   launcherLabel: _launcherLabel = "Adaptives",
+  launcherIcon,
   launcherAnimate = false,
   launcherAnimationStyle: _launcherAnimationStyle = "pulse",
   notificationCount: _notificationCount,
@@ -3498,21 +5002,21 @@ function ShadowCanvasOverlay({
   isLoading,
   error: error2,
   canvasTitle,
-  displayMode = "standard",
-  theme: themeOverride
+  displayMode = "standard"
 }) {
-  var _a2, _b, _c, _d, _e, _f, _g;
+  var _a2, _b, _c, _d;
   const [mounted, setMounted] = useState5(false);
   const [launcherPos, setLauncherPos] = useState5(null);
-  const dragRef = useRef4(null);
+  const dragRef = useRef5(null);
   const runtime3 = useRuntime();
   const { shadowRoot, portalRoot } = useShadowRoot();
+  const { config } = useTheme();
   const { notifications, dismiss: dismissNotification } = useNotifications(
     (_a2 = runtime3 == null ? void 0 : runtime3.events) != null ? _a2 : null,
     tiles
   );
   useNotifyWatcher(runtime3, tiles, runtime3 == null ? void 0 : runtime3.apps);
-  const handleNotificationClick = useCallback3(
+  const handleNotificationClick = useCallback4(
     (notif) => {
       if (runtime3) {
         runtime3.events.publish(StandardEvents.NOTIFICATION_CLICKED, {
@@ -3534,8 +5038,44 @@ function ShadowCanvasOverlay({
     },
     [runtime3, isOpen, onToggle, dismissNotification]
   );
-  const theme = { ...DEFAULT_THEME, ...themeOverride };
-  useEffect6(() => {
+  const launcherCss = useMemo5(
+    () => `
+  @keyframes syntro-launcher-pulse {
+    0%, 100% {
+      box-shadow: 0 20px 45px rgba(0,0,0,0.35), 0 0 0 0 ${config.colorPrimary}66;
+    }
+    50% {
+      box-shadow: 0 20px 45px rgba(0,0,0,0.35), 0 0 0 8px ${config.colorPrimary}00;
+    }
+  }
+  @keyframes syntro-launcher-glow {
+    0%, 100% { border-color: rgba(255,255,255,0.1); }
+    50% { border-color: ${config.colorPrimaryHover}99; }
+  }
+  .syntro-launcher-animate {
+    animation: syntro-launcher-pulse 2s ease-in-out infinite, syntro-launcher-glow 2s ease-in-out infinite;
+  }
+  .syntro-launcher-animate:hover { animation: none; }
+  @keyframes syntro-badge-ping {
+    0% { transform: scale(1); opacity: 1; }
+    75%, 100% { transform: scale(2.2); opacity: 0; }
+  }
+  @keyframes syntro-badge-glow {
+    0%, 100% { box-shadow: 0 0 8px 2px ${config.colorPrimaryHover}4d; }
+    50% { box-shadow: 0 0 20px 6px ${config.colorPrimaryHover}80; }
+  }
+  @keyframes syntro-badge-bounce {
+    0%, 100% { transform: translateY(0); }
+    25% { transform: translateY(-6px); }
+    50% { transform: translateY(-3px); }
+  }
+  .syntro-badge-ping { animation: syntro-badge-ping 1.5s cubic-bezier(0,0,0.2,1) infinite; }
+  .syntro-badge-glow { animation: syntro-badge-glow 2s ease-in-out infinite; }
+  .syntro-badge-bounce { animation: syntro-badge-bounce 2s ease-in-out infinite; }
+`,
+    [config.colorPrimary, config.colorPrimaryHover]
+  );
+  useEffect7(() => {
     if (!isOpen) return;
     tiles.forEach((tile) => {
       telemetry == null ? void 0 : telemetry.trackRectangleViewed(tile.id, "overlay");
@@ -3545,11 +5085,11 @@ function ShadowCanvasOverlay({
       }
     });
   }, [telemetry, runtime3, isOpen, tiles]);
-  useEffect6(() => {
+  useEffect7(() => {
     setMounted(true);
-    ensureLauncherStyles(shadowRoot);
-  }, [shadowRoot]);
-  const toggle2 = useCallback3(() => {
+    ensureLauncherStyles(shadowRoot, launcherCss);
+  }, [shadowRoot, launcherCss]);
+  const toggle2 = useCallback4(() => {
     const next = !isOpen;
     if (next) {
       telemetry == null ? void 0 : telemetry.trackCanvasOpened("overlay");
@@ -3562,7 +5102,7 @@ function ShadowCanvasOverlay({
     }
     onToggle();
   }, [isOpen, telemetry, runtime3, onToggle]);
-  const onLauncherPointerDown = useCallback3((e) => {
+  const onLauncherPointerDown = useCallback4((e) => {
     const rect = e.currentTarget.getBoundingClientRect();
     dragRef.current = {
       startX: e.clientX,
@@ -3573,7 +5113,7 @@ function ShadowCanvasOverlay({
     };
     e.currentTarget.setPointerCapture(e.pointerId);
   }, []);
-  const onLauncherPointerMove = useCallback3((e) => {
+  const onLauncherPointerMove = useCallback4((e) => {
     const drag = dragRef.current;
     if (!drag) return;
     const dx = e.clientX - drag.startX;
@@ -3585,8 +5125,8 @@ function ShadowCanvasOverlay({
       setLauncherPos({ x: drag.startElX + dx, y: drag.startElY + dy });
     }
   }, []);
-  const onLauncherPointerUp = useCallback3(
-    (_e2) => {
+  const onLauncherPointerUp = useCallback4(
+    (_e) => {
       const drag = dragRef.current;
       dragRef.current = null;
       if (drag && !drag.dragged) {
@@ -3596,30 +5136,77 @@ function ShadowCanvasOverlay({
     [toggle2]
   );
   const isFocused = displayMode === "focused";
-  const isRight = theme.position === "right";
+  const isRight = config.canvas.position === "right";
+  const isPush = config.canvas.layout === "push";
+  const canvasBorder = (_b = config.canvas.border) != null ? _b : "none";
+  const containerRef = useRef5(null);
+  const zIndex = 2147483600;
+  useEffect7(() => {
+    var _a3, _b2, _c2, _d2;
+    if (!isPush) return;
+    const root = document.documentElement;
+    const prop = isRight ? "marginRight" : "marginLeft";
+    const duration = (_a3 = config.canvas.transitionDuration) != null ? _a3 : "300ms";
+    const easing = (_b2 = config.canvas.transitionEasing) != null ? _b2 : "cubic-bezier(0.16, 1, 0.3, 1)";
+    const prevTransition = root.style.transition;
+    root.style.transition = `${prop} ${duration} ${easing}`;
+    if (isOpen) {
+      const width = (_d2 = (_c2 = containerRef.current) == null ? void 0 : _c2.offsetWidth) != null ? _d2 : 380;
+      root.style[prop] = `${width}px`;
+    } else {
+      root.style[prop] = "0px";
+    }
+    return () => {
+      root.style[prop] = "";
+      root.style.transition = prevTransition;
+    };
+  }, [isPush, isOpen, isRight, config.canvas.transitionDuration, config.canvas.transitionEasing]);
+  useEffect7(() => {
+    if (!isPush || !isOpen) return;
+    const container = containerRef.current;
+    if (!container) return;
+    const prop = isRight ? "marginRight" : "marginLeft";
+    const observer = new ResizeObserver(([entry]) => {
+      document.documentElement.style[prop] = `${entry.contentRect.width}px`;
+    });
+    observer.observe(container);
+    return () => observer.disconnect();
+  }, [isPush, isOpen, isRight]);
   const containerStyle = {
     display: "flex",
     flexDirection: "column",
-    width: isFocused ? theme.expandedWidth : theme.baseWidth,
+    width: isFocused ? "40vw" : config.canvas.width,
     minWidth: "320px",
     height: "100%",
     maxHeight: "100%",
     pointerEvents: "auto",
     opacity: isOpen ? 1 : 0,
-    transition: isOpen ? "transform 340ms cubic-bezier(0.16, 1, 0.3, 1), opacity 280ms ease-out" : "transform 280ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease-in",
-    color: theme.colorText || text.primary,
-    // Standard mode: no tint, just blur with a tight fade mask at the leading edge
-    // Focused mode: full frosted glass
-    background: isFocused ? (_b = theme.glassBackground) != null ? _b : withAlpha(slateGrey[1], 0.6) : "transparent",
-    backdropFilter: isFocused ? `${(_c = theme.glassBlur) != null ? _c : "blur(24px)"} ${(_d = theme.glassSaturate) != null ? _d : "saturate(1.2)"}` : "blur(6px)",
-    WebkitBackdropFilter: isFocused ? `${(_e = theme.glassBlur) != null ? _e : "blur(24px)"} ${(_f = theme.glassSaturate) != null ? _f : "saturate(1.2)"}` : "blur(6px)",
-    // Tight fade mask so blur cuts off sharply at the leading edge
-    ...!isFocused ? {
-      maskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)",
-      WebkitMaskImage: isRight ? "linear-gradient(to right, transparent, black 6%)" : "linear-gradient(to left, transparent, black 6%)"
-    } : {},
-    border: "none",
-    borderRadius: "0",
+    transition: (() => {
+      var _a3, _b2;
+      const dur = (_a3 = config.canvas.transitionDuration) != null ? _a3 : "300ms";
+      const ease = (_b2 = config.canvas.transitionEasing) != null ? _b2 : "cubic-bezier(0.16, 1, 0.3, 1)";
+      return isOpen ? `transform ${dur} ${ease}, opacity ${dur} ease-out` : `transform ${dur} ${ease}, opacity ${dur} ease-in`;
+    })(),
+    color: "var(--sc-overlay-text-color)",
+    background: "var(--sc-canvas-background)",
+    // Standard mode: config blur only. Focused mode: config blur + saturate boost.
+    ...(() => {
+      var _a3;
+      const blur = (_a3 = config.canvas.blur) != null ? _a3 : "blur(24px)";
+      const filter = isFocused && blur !== "none" ? `${blur} saturate(1.2)` : blur;
+      return { backdropFilter: filter, WebkitBackdropFilter: filter };
+    })(),
+    // Tight fade mask so blur cuts off sharply at the leading edge.
+    // Disabled when a visible border is configured (mask would fade the border).
+    ...(() => {
+      var _a3;
+      if (isFocused || canvasBorder && canvasBorder !== "none") return {};
+      const fade = (_a3 = config.canvas.transitionFade) != null ? _a3 : "6%";
+      const mask = isRight ? `linear-gradient(to right, transparent, black ${fade})` : `linear-gradient(to left, transparent, black ${fade})`;
+      return { maskImage: mask, WebkitMaskImage: mask };
+    })(),
+    border: canvasBorder,
+    borderRadius: "var(--sc-overlay-border-radius, 0)",
     boxShadow: "none",
     // Transform logic
     transform: isOpen ? "translateX(0)" : isRight ? "translateX(120%)" : "translateX(-120%)"
@@ -3633,7 +5220,7 @@ function ShadowCanvasOverlay({
     pointerEvents: "none",
     padding: "0"
   };
-  const content = /* @__PURE__ */ jsx6(
+  const content = /* @__PURE__ */ jsx7(
     "div",
     {
       "data-shadow-canvas-id": "overlay-root",
@@ -3641,11 +5228,11 @@ function ShadowCanvasOverlay({
         position: "fixed",
         inset: 0,
         pointerEvents: isOpen ? "auto" : "none",
-        zIndex: theme.zIndex
+        zIndex
       },
       children: /* @__PURE__ */ jsxs3("div", { style: wrapperStyle, children: [
-        /* @__PURE__ */ jsxs3("div", { "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
-          isFocused && canvasTitle && /* @__PURE__ */ jsx6("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsxs3("div", { ref: containerRef, "data-shadow-canvas-id": "overlay-container", style: containerStyle, children: [
+          isFocused && canvasTitle && /* @__PURE__ */ jsx7("header", { style: { color: "white", padding: "1.5rem 1.5rem 0" }, children: /* @__PURE__ */ jsx7(
             "p",
             {
               style: {
@@ -3653,17 +5240,32 @@ function ShadowCanvasOverlay({
                 fontSize: "0.7rem",
                 textTransform: "uppercase",
                 letterSpacing: "0.5em",
-                color: text.tertiary
+                color: "var(--sc-notification-text-secondary-color)"
               },
               children: canvasTitle
             }
           ) }),
-          /* @__PURE__ */ jsx6("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx6("div", { style: { color: text.primary, padding: isFocused ? "1rem" : "0" }, children: "Loading..." }) : error2 ? /* @__PURE__ */ jsxs3("div", { style: { color: red[8], padding: isFocused ? "1rem" : "0" }, children: [
-            "Failed to load: ",
-            error2
-          ] }) : isFocused ? (
+          /* @__PURE__ */ jsx7("div", { style: { flex: 1, overflowY: "auto", padding: isFocused ? "0" : "1rem" }, children: isLoading ? /* @__PURE__ */ jsx7(
+            "div",
+            {
+              style: { color: "var(--sc-overlay-text-color)", padding: isFocused ? "1rem" : "0" },
+              children: "Loading..."
+            }
+          ) : error2 ? /* @__PURE__ */ jsxs3(
+            "div",
+            {
+              style: {
+                color: "var(--sc-notification-error-color)",
+                padding: isFocused ? "1rem" : "0"
+              },
+              children: [
+                "Failed to load: ",
+                error2
+              ]
+            }
+          ) : isFocused ? (
             /* Focused Mode: Render first tile full size */
-            tiles.length > 0 ? /* @__PURE__ */ jsx6(
+            tiles.length > 0 ? /* @__PURE__ */ jsx7(
               TileCard,
               {
                 config: tiles[0],
@@ -3674,7 +5276,7 @@ function ShadowCanvasOverlay({
             ) : null
           ) : (
             /* Standard Mode: Stacked cards — widgets always visible */
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               "div",
               {
                 style: {
@@ -3683,7 +5285,7 @@ function ShadowCanvasOverlay({
                   gap: "0.75rem",
                   width: "100%"
                 },
-                children: tiles.map((tile) => /* @__PURE__ */ jsx6(
+                children: tiles.map((tile) => /* @__PURE__ */ jsx7(
                   TileCard,
                   {
                     config: tile,
@@ -3698,7 +5300,7 @@ function ShadowCanvasOverlay({
           ) }),
           footerSlot
         ] }),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx7(
           "div",
           {
             onClick: toggle2,
@@ -3723,16 +5325,16 @@ function ShadowCanvasOverlay({
             position: "fixed",
             inset: 0,
             pointerEvents: "none",
-            zIndex: theme.zIndex + 47
+            zIndex: zIndex + 47
           },
           children: [
-            /* @__PURE__ */ jsx6(
+            /* @__PURE__ */ jsx7(
               NotificationToastStack,
               {
                 notifications,
                 onDismiss: dismissNotification,
                 onClickNotification: handleNotificationClick,
-                position: theme.position
+                position: (_c = config.canvas.position) != null ? _c : "right"
               }
             ),
             /* @__PURE__ */ jsxs3(
@@ -3752,36 +5354,36 @@ function ShadowCanvasOverlay({
                   display: "flex",
                   alignItems: "center",
                   justifyContent: "center",
-                  width: "56px",
-                  height: "56px",
-                  borderRadius: "9999px",
-                  color: button.primary.icon,
-                  boxShadow: `0 8px 32px ${withAlpha(slateGrey[0], 0.6)}`,
+                  width: "var(--sc-launcher-size, 56px)",
+                  height: "var(--sc-launcher-size, 56px)",
+                  borderRadius: "var(--sc-launcher-border-radius, 9999px)",
+                  color: "var(--sc-launcher-color)",
+                  boxShadow: "var(--sc-launcher-shadow)",
                   transition: dragRef.current ? "none" : "transform 0.2s ease, opacity 0.3s ease, background-color 0.2s ease",
                   outline: "none",
                   padding: 0,
                   border: "none",
-                  backgroundColor: button.primary.backgroundDefault,
-                  cursor: ((_g = dragRef.current) == null ? void 0 : _g.dragged) ? "grabbing" : "pointer",
+                  backgroundColor: "var(--sc-launcher-background)",
+                  cursor: ((_d = dragRef.current) == null ? void 0 : _d.dragged) ? "grabbing" : "pointer",
                   touchAction: "none"
                 },
                 onPointerDown: onLauncherPointerDown,
                 onPointerMove: onLauncherPointerMove,
                 onPointerUp: onLauncherPointerUp,
                 onMouseEnter: (e) => {
-                  var _a3;
+                  var _a3, _b2;
                   if (!((_a3 = dragRef.current) == null ? void 0 : _a3.dragged)) {
-                    e.currentTarget.style.backgroundColor = button.primary.backgroundHover;
+                    e.currentTarget.style.backgroundColor = (_b2 = config.launcher.backgroundHover) != null ? _b2 : "var(--sc-launcher-background-hover)";
                   }
                 },
                 onMouseLeave: (e) => {
-                  var _a3;
+                  var _a3, _b2;
                   if (!((_a3 = dragRef.current) == null ? void 0 : _a3.dragged)) {
-                    e.currentTarget.style.backgroundColor = button.primary.backgroundDefault;
+                    e.currentTarget.style.backgroundColor = (_b2 = config.launcher.background) != null ? _b2 : "var(--sc-launcher-background)";
                   }
                 },
                 children: [
-                  /* @__PURE__ */ jsx6(
+                  isOpen ? /* @__PURE__ */ jsxs3(
                     "svg",
                     {
                       width: "24",
@@ -3795,20 +5397,49 @@ function ShadowCanvasOverlay({
                       "aria-hidden": "true",
                       focusable: "false",
                       style: { transition: "transform 200ms ease" },
-                      children: isOpen ? /* @__PURE__ */ jsxs3(Fragment, { children: [
-                        /* @__PURE__ */ jsx6("path", { d: "M18 6L6 18" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M6 6l12 12" })
-                      ] }) : /* @__PURE__ */ jsxs3(Fragment, { children: [
-                        /* @__PURE__ */ jsx6("path", { d: "M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M5 3v4" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M3 5h4" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M19 17v4" }),
-                        /* @__PURE__ */ jsx6("path", { d: "M17 19h4" })
-                      ] })
+                      children: [
+                        /* @__PURE__ */ jsx7("path", { d: "M18 6L6 18" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M6 6l12 12" })
+                      ]
+                    }
+                  ) : launcherIcon ? /* @__PURE__ */ jsx7(
+                    "img",
+                    {
+                      src: launcherIcon,
+                      alt: "",
+                      "aria-hidden": "true",
+                      style: {
+                        width: "60%",
+                        height: "60%",
+                        objectFit: "contain",
+                        pointerEvents: "none"
+                      }
+                    }
+                  ) : /* @__PURE__ */ jsxs3(
+                    "svg",
+                    {
+                      width: "24",
+                      height: "24",
+                      viewBox: "0 0 24 24",
+                      fill: "none",
+                      stroke: "currentColor",
+                      strokeWidth: "2",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round",
+                      "aria-hidden": "true",
+                      focusable: "false",
+                      style: { transition: "transform 200ms ease" },
+                      children: [
+                        /* @__PURE__ */ jsx7("path", { d: "M12 3l1.912 5.813a2 2 0 0 0 1.275 1.275L21 12l-5.813 1.912a2 2 0 0 0-1.275 1.275L12 21l-1.912-5.813a2 2 0 0 0-1.275-1.275L3 12l5.813-1.912a2 2 0 0 0 1.275-1.275L12 3Z" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M5 3v4" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M3 5h4" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M19 17v4" }),
+                        /* @__PURE__ */ jsx7("path", { d: "M17 19h4" })
+                      ]
                     }
                   ),
                   !isOpen && notifications.length > 0 && /* @__PURE__ */ jsxs3("div", { style: { position: "absolute", top: -2, right: -2, pointerEvents: "none" }, children: [
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-ping",
@@ -3816,11 +5447,11 @@ function ShadowCanvasOverlay({
                           position: "absolute",
                           inset: 0,
                           borderRadius: "9999px",
-                          background: withAlpha(brand[4], 0.4)
+                          background: `${config.colorPrimaryHover}66`
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-glow",
@@ -3831,7 +5462,7 @@ function ShadowCanvasOverlay({
                         }
                       }
                     ),
-                    /* @__PURE__ */ jsx6(
+                    /* @__PURE__ */ jsx7(
                       "span",
                       {
                         className: "syntro-badge-bounce",
@@ -3843,8 +5474,8 @@ function ShadowCanvasOverlay({
                           width: 20,
                           height: 20,
                           borderRadius: "9999px",
-                          background: brand[4],
-                          color: base.white,
+                          background: config.colorPrimaryHover,
+                          color: "#ffffff",
                           fontSize: 11,
                           fontWeight: 700
                         },
@@ -3860,33 +5491,46 @@ function ShadowCanvasOverlay({
       ),
       portalRoot
     ),
-    isOpen ? createPortal(content, portalRoot) : null
+    createPortal(content, portalRoot)
   ] });
 }
 
 // src/hooks/useShadowCanvasConfig.ts
-import { useCallback as useCallback4, useEffect as useEffect7, useMemo as useMemo3, useState as useState6 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef6, useState as useState6 } from "react";
 var sortTiles = (tiles) => [...tiles].sort((a, b) => {
   var _a2, _b;
   return ((_a2 = b.priority) != null ? _a2 : 0) - ((_b = a.priority) != null ? _b : 0);
 });
 function useShadowCanvasConfig({
   fetcher,
-  pollIntervalMs = 3e4,
   experiments,
   runtime: runtime3,
-  pathname
+  pageUrl,
+  pollIntervalMs
 }) {
   const [state, setState] = useState6({
     tiles: [],
     actions: [],
     isLoading: true
   });
-  const load = useCallback4(async () => {
+  const prevActionsJsonRef = useRef6("[]");
+  const rawConfigRef = useRef6(null);
+  const refilter = useCallback5(async () => {
+    const raw = rawConfigRef.current;
+    if (!raw || !runtime3) return;
+    let tiles = raw.tiles || [];
+    tiles = await runtime3.filterTiles(tiles);
+    if (experiments) {
+      tiles = tiles.filter((tile) => experiments.shouldRenderRectangle(tile));
+    }
+    setState((prev) => ({ ...prev, tiles: sortTiles(tiles) }));
+  }, [runtime3, experiments]);
+  const load = useCallback5(async () => {
     try {
       setState((prev) => ({ ...prev, isLoading: true, error: void 0 }));
       const response = await fetcher();
       debug("SmartCanvas Config", "Raw config response", response);
+      rawConfigRef.current = response;
       let tiles = response.tiles || [];
       if (runtime3) {
         tiles = await runtime3.filterTiles(tiles);
@@ -3897,16 +5541,22 @@ function useShadowCanvasConfig({
         tiles = tiles.filter((tile) => experiments.shouldRenderRectangle(tile));
       }
       debug("SmartCanvas Config", `Tile count after filtering: ${tiles.length}`);
-      setState({
+      const newActions = response.actions || [];
+      const newActionsJson = JSON.stringify(newActions);
+      const actionsChanged = newActionsJson !== prevActionsJsonRef.current;
+      if (actionsChanged) {
+        prevActionsJsonRef.current = newActionsJson;
+      }
+      setState((prev) => ({
         tiles: sortTiles(tiles),
-        actions: response.actions || [],
+        actions: actionsChanged ? newActions : prev.actions,
         isLoading: false,
         fetchedAt: response.fetchedAt,
         canvasTitle: response.canvasTitle,
         configVersion: response.configVersion,
         theme: response.theme,
         launcher: response.launcher
-      });
+      }));
     } catch (err) {
       const message = err instanceof Error ? err.message : "Unknown error";
       console.error("[SmartCanvas Config] Failed to fetch/filter config:", message, err);
@@ -3917,18 +5567,37 @@ function useShadowCanvasConfig({
       }));
     }
   }, [experiments, fetcher, runtime3]);
-  useEffect7(() => {
+  useEffect8(() => {
     load();
+    if (experiments == null ? void 0 : experiments.onFeaturesChanged) {
+      return experiments.onFeaturesChanged(() => load());
+    }
+  }, [load, experiments, pageUrl]);
+  useEffect8(() => {
+    if (!(runtime3 == null ? void 0 : runtime3.accumulator)) return;
+    return runtime3.accumulator.subscribe(() => {
+      refilter();
+    });
+  }, [runtime3, refilter]);
+  useEffect8(() => {
+    if (!(runtime3 == null ? void 0 : runtime3.context)) return;
+    return runtime3.context.subscribe(() => {
+      refilter();
+    });
+  }, [runtime3, refilter]);
+  useEffect8(() => {
     if (!pollIntervalMs) return;
-    const id = setInterval(load, pollIntervalMs);
+    const id = setInterval(() => {
+      load();
+    }, pollIntervalMs);
     return () => clearInterval(id);
-  }, [load, pollIntervalMs, pathname]);
-  return useMemo3(() => state, [state]);
+  }, [load, pollIntervalMs]);
+  return useMemo6(() => state, [state]);
 }
 
 // src/SmartCanvasApp.tsx
-import { useEffect as useEffect8, useMemo as useMemo4, useRef as useRef5, useState as useState7 } from "react";
-import { jsx as jsx7 } from "react/jsx-runtime";
+import { useEffect as useEffect9, useMemo as useMemo7, useRef as useRef7, useState as useState7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
 function SmartCanvasApp({
   controller,
   fetcher,
@@ -3947,11 +5616,11 @@ function SmartCanvasApp({
   footerSlot,
   launcherLabel,
   canvasHost,
-  theme,
-  initialBatchHandle
+  initialBatchHandle,
+  workspaceTheme
 }) {
   if (runtime3) {
-    return /* @__PURE__ */ jsx7(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx7(
+    return /* @__PURE__ */ jsx8(RuntimeProvider, { runtime: runtime3, children: /* @__PURE__ */ jsx8(
       SmartCanvasAppInner,
       {
         controller,
@@ -3971,12 +5640,12 @@ function SmartCanvasApp({
         footerSlot,
         launcherLabel,
         canvasHost,
-        theme,
-        initialBatchHandle
+        initialBatchHandle,
+        workspaceTheme
       }
     ) });
   }
-  return /* @__PURE__ */ jsx7(
+  return /* @__PURE__ */ jsx8(
     SmartCanvasAppInner,
     {
       controller,
@@ -3995,8 +5664,8 @@ function SmartCanvasApp({
       footerSlot,
       launcherLabel,
       canvasHost,
-      theme,
-      initialBatchHandle
+      initialBatchHandle,
+      workspaceTheme
     }
   );
 }
@@ -4018,38 +5687,40 @@ function SmartCanvasAppInner({
   footerSlot,
   launcherLabel,
   canvasHost: _canvasHost,
-  theme,
-  initialBatchHandle
+  initialBatchHandle,
+  workspaceTheme
 }) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const [open, setOpen] = useState7(controller.getState().open);
   const pageContext = usePageContext();
-  const [localPathname, setLocalPathname] = useState7(
-    () => typeof window !== "undefined" ? window.location.pathname : "/"
+  const [localUrl, setLocalUrl] = useState7(
+    () => typeof window !== "undefined" ? window.location.href : "/"
   );
-  const pathname = (pageContext == null ? void 0 : pageContext.url) ? new URL(pageContext.url).pathname : localPathname;
-  useEffect8(() => {
+  const pageUrl = (_a2 = pageContext == null ? void 0 : pageContext.url) != null ? _a2 : localUrl;
+  useEffect9(() => {
     if (runtime3) return;
     if (typeof window === "undefined") return;
-    const updatePathname = () => setLocalPathname(window.location.pathname);
-    window.addEventListener("popstate", updatePathname);
+    const updateUrl = () => setLocalUrl(window.location.href);
+    window.addEventListener("popstate", updateUrl);
+    window.addEventListener("hashchange", updateUrl);
     const originalPushState = history.pushState;
     const originalReplaceState = history.replaceState;
     history.pushState = function(...args) {
       originalPushState.apply(this, args);
-      queueMicrotask(updatePathname);
+      queueMicrotask(updateUrl);
     };
     history.replaceState = function(...args) {
       originalReplaceState.apply(this, args);
-      queueMicrotask(updatePathname);
+      queueMicrotask(updateUrl);
     };
     return () => {
-      window.removeEventListener("popstate", updatePathname);
+      window.removeEventListener("popstate", updateUrl);
+      window.removeEventListener("hashchange", updateUrl);
       history.pushState = originalPushState;
       history.replaceState = originalReplaceState;
     };
   }, [runtime3]);
-  const derivedFetcher = useMemo4(() => {
+  const derivedFetcher = useMemo7(() => {
     if (fetcher) return fetcher;
     return createCanvasConfigFetcher({
       configUri,
@@ -4061,21 +5732,21 @@ function SmartCanvasAppInner({
   }, [fetcher, configUri, experiments, configUriFeatureKey, configFeatureKey, fetchCredentials]);
   const configState = useShadowCanvasConfig({
     fetcher: derivedFetcher,
-    pollIntervalMs,
     experiments,
     runtime: runtime3,
-    pathname
+    pageUrl
   });
   const hasContent = configState.tiles.length > 0 && !configState.error;
-  useEffect8(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
-  useEffect8(() => {
+  useEffect9(() => controller.subscribe((state) => setOpen(state.open)), [controller]);
+  useEffect9(() => {
     if (!configState.isLoading && !hasContent && controller.getState().open) {
       controller.setOpen(false);
     }
   }, [controller, hasContent, configState.isLoading]);
-  const batchHandleRef = useRef5(initialBatchHandle != null ? initialBatchHandle : null);
-  const adoptedInitialRef = useRef5(!!initialBatchHandle);
-  useEffect8(() => {
+  const batchHandleRef = useRef7(initialBatchHandle != null ? initialBatchHandle : null);
+  const adoptedInitialRef = useRef7(!!initialBatchHandle);
+  const runVersionRef = useRef7(0);
+  useEffect9(() => {
     if (!(runtime3 == null ? void 0 : runtime3.actions)) return;
     if (adoptedInitialRef.current) {
       if (configState.actions.length > 0) {
@@ -4083,10 +5754,10 @@ function SmartCanvasAppInner({
       }
       return;
     }
-    let cancelled = false;
+    const version = ++runVersionRef.current;
+    const stale = () => version !== runVersionRef.current;
     const run = async () => {
       if (batchHandleRef.current) {
-        console.log("[SmartCanvasApp] Reverting previous action batch before re-apply");
         try {
           await batchHandleRef.current.revertAll();
         } catch (err) {
@@ -4094,92 +5765,76 @@ function SmartCanvasAppInner({
         }
         batchHandleRef.current = null;
       }
-      if (cancelled) return;
+      if (stale()) return;
       if (configState.actions.length > 0) {
-        console.log(
-          `[SmartCanvasApp] Applying ${configState.actions.length} action(s):`,
-          configState.actions.map(
-            (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${a.anchorId}"` : ""}${a.label ? ` "${a.label}"` : ""}`
-          ).join(", ")
-        );
         try {
           const handle = await runtime3.actions.applyBatch(configState.actions);
-          if (cancelled) {
+          if (stale()) {
             await handle.revertAll();
           } else {
             batchHandleRef.current = handle;
-            console.log("[SmartCanvasApp] Action batch applied successfully");
           }
         } catch (err) {
-          if (!cancelled) {
-            console.error(
-              "[SmartCanvasApp] Failed to apply actions:",
-              err,
-              "\nActions that failed:",
-              JSON.stringify(configState.actions, null, 2)
-            );
+          if (!stale()) {
+            console.error("[SmartCanvasApp] Failed to apply actions:", err);
           }
         }
       }
     };
     run();
     return () => {
-      cancelled = true;
       if (batchHandleRef.current) {
-        console.log(
-          "[SmartCanvasApp] Cleanup: reverting action batch (actions changed or unmount)"
-        );
         batchHandleRef.current.revertAll().catch((err) => {
           console.error("[SmartCanvasApp] Failed to revert actions on cleanup:", err);
         });
         batchHandleRef.current = null;
       }
     };
-  }, [runtime3, configState.actions]);
-  useEffect8(() => {
+  }, [runtime3, configState.actions, pageUrl]);
+  useEffect9(() => {
     if (!runtime3) return;
     return runtime3.events.subscribe(
       { names: ["canvas.requestOpen"] },
       () => controller.setOpen(true)
     );
   }, [runtime3, controller]);
-  const mergedTheme = useMemo4(() => {
-    const configTheme = configState.theme;
-    if (!configTheme) return theme;
-    return {
-      ...configTheme,
-      // position, mode, colors, borderRadius from config
-      ...theme
-      // any direct overrides from theme prop
-    };
-  }, [configState.theme, theme]);
+  const { shadowRoot } = useShadowRoot();
+  const themeConfig = configState.theme;
   if (!configState.isLoading && !hasContent) {
     return null;
   }
-  return /* @__PURE__ */ jsx7(
-    ShadowCanvasOverlay,
+  return /* @__PURE__ */ jsx8(
+    ThemeProvider,
     {
-      tiles: configState.tiles,
-      isLoading: configState.isLoading,
-      error: configState.error,
-      canvasTitle: configState.canvasTitle,
-      telemetry,
-      launcherLabel: launcherLabel != null ? launcherLabel : (_a2 = configState.launcher) == null ? void 0 : _a2.label,
-      launcherAnimate: (_b = configState.launcher) == null ? void 0 : _b.animate,
-      launcherAnimationStyle: (_c = configState.launcher) == null ? void 0 : _c.animationStyle,
-      notificationCount: (_e = (_d = configState.launcher) == null ? void 0 : _d.notificationCount) != null ? _e : configState.tiles.length,
-      footerSlot,
-      isOpen: open,
-      onToggle: () => controller.toggle(),
-      displayMode: configState.displayMode,
-      theme: mergedTheme
+      themeConfig,
+      workspaceTheme,
+      shadowRoot,
+      children: /* @__PURE__ */ jsx8(
+        ShadowCanvasOverlay,
+        {
+          tiles: configState.tiles,
+          isLoading: configState.isLoading,
+          error: configState.error,
+          canvasTitle: configState.canvasTitle,
+          telemetry,
+          launcherLabel: launcherLabel != null ? launcherLabel : (_b = configState.launcher) == null ? void 0 : _b.label,
+          launcherIcon: (_c = configState.launcher) == null ? void 0 : _c.icon,
+          launcherAnimate: (_d = configState.launcher) == null ? void 0 : _d.animate,
+          launcherAnimationStyle: (_e = configState.launcher) == null ? void 0 : _e.animationStyle,
+          notificationCount: (_g = (_f = configState.launcher) == null ? void 0 : _f.notificationCount) != null ? _g : configState.tiles.length,
+          footerSlot,
+          isOpen: open,
+          onToggle: () => controller.toggle(),
+          displayMode: configState.displayMode
+        }
+      )
     }
   );
 }
 
 // src/SmartCanvasElement.tsx
-import { createRoot } from "react-dom/client";
-import { jsx as jsx8 } from "react/jsx-runtime";
+import { createRoot as createRoot2 } from "react-dom/client";
+import { jsx as jsx9 } from "react/jsx-runtime";
 var TAG_NAME = "smart-canvas";
 var BASE_CSS = `
 :host {
@@ -4219,7 +5874,7 @@ var SmartCanvasElement = class extends HTMLElement {
     Object.assign(__privateGet(this, _overlayContainer).style, {
       position: "fixed",
       inset: "0",
-      zIndex: "2147483647",
+      zIndex: "2147483645",
       pointerEvents: "none"
     });
     __privateGet(this, _shadow).appendChild(__privateGet(this, _overlayContainer));
@@ -4277,16 +5932,16 @@ var SmartCanvasElement = class extends HTMLElement {
   render() {
     if (!this.isConnected || !__privateGet(this, _lastAppProps)) return;
     if (!__privateGet(this, _root)) {
-      __privateSet(this, _root, createRoot(__privateGet(this, _mount)));
+      __privateSet(this, _root, createRoot2(__privateGet(this, _mount)));
     }
     __privateGet(this, _root).render(
-      /* @__PURE__ */ jsx8(
+      /* @__PURE__ */ jsx9(
         ShadowRootProvider,
         {
           shadowRoot: __privateGet(this, _shadow),
           portalRoot: __privateGet(this, _portalRoot),
           overlayContainer: __privateGet(this, _overlayContainer),
-          children: /* @__PURE__ */ jsx8(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
+          children: /* @__PURE__ */ jsx9(SmartCanvasApp, { ...__privateGet(this, _lastAppProps), controller: __privateGet(this, _controller), canvasHost: this })
         }
       )
     );
@@ -4530,7 +6185,7 @@ function ensureOverlayRoot() {
     Object.assign(overlayRootEl.style, {
       position: "fixed",
       inset: "0",
-      zIndex: "2147483647",
+      zIndex: "2147483645",
       pointerEvents: "none"
     });
     document.body.appendChild(overlayRootEl);
@@ -4542,20 +6197,23 @@ function injectBaseStyles(target) {
   if (stylesInjected) return;
   const css = `
 :host {
-  --syntro-surface: #0f1318;
-  --syntro-fg: #cbd0d7;
-  --syntro-accent: #b72e2a;
-  --syntro-accent-hover: #d44844;
-  --syntro-radius: 12px;
+  --syntro-surface: var(--sc-overlay-background, #0f1318);
+  --syntro-fg: var(--sc-overlay-text-color, #cbd0d7);
+  --syntro-accent: var(--sc-color-primary, #b72e2a);
+  --syntro-accent-hover: var(--sc-color-primary-hover, #d44844);
+  --syntro-radius: var(--sc-border-radius, 12px);
   --syntro-shadow: 0 25px 50px -12px rgba(16,24,40,0.25);
-  --syntro-ring: #d44844;
-  --syntro-border: #2b333f;
+  --syntro-ring: var(--sc-overlay-highlight-ring, #d44844);
+  --syntro-border: var(--sc-overlay-border, #2b333f);
   --syntro-tooltip-bg: var(--syntro-surface);
   --syntro-tooltip-fg: var(--syntro-fg);
+  --syntro-tooltip-title-color: var(--sc-overlay-title-color, var(--syntro-fg));
+  --syntro-tooltip-arrow-bg: var(--sc-overlay-arrow-color, var(--syntro-tooltip-bg));
+  --syntro-tooltip-arrow-size: var(--sc-overlay-arrow-size, 8px);
   --syntro-tooltip-radius: var(--syntro-radius);
   --syntro-tooltip-padding: 12px 16px;
   --syntro-tooltip-shadow: var(--syntro-shadow);
-  --syntro-spotlight-backdrop: rgba(0,0,0,0.70);
+  --syntro-spotlight-backdrop: rgba(0,0,0, var(--sc-overlay-scrim-opacity, 0.70));
 }
 
 /* Tooltip container */
@@ -4578,14 +6236,13 @@ function injectBaseStyles(target) {
               transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
-/* Tooltip arrow */
+/* Tooltip arrow \u2014 triangle via clip-path (square box so rotation is symmetric) */
 .syntro-tooltip-arrow {
   position: absolute;
-  width: 8px;
-  height: 8px;
-  background: inherit;
-  transform: rotate(45deg);
-  z-index: -1;
+  width: var(--syntro-tooltip-arrow-size);
+  height: var(--syntro-tooltip-arrow-size);
+  background: var(--syntro-tooltip-arrow-bg);
+  clip-path: polygon(0 0, 100% 0, 50% 100%);
 }
 
 /* Tooltip content */
@@ -4593,6 +6250,7 @@ function injectBaseStyles(target) {
   font-weight: 600;
   font-size: 15px;
   margin-bottom: 6px;
+  color: var(--syntro-tooltip-title-color);
 }
 
 .syntro-tt-body {
@@ -4821,7 +6479,6 @@ var createSmartCanvas = async (config = {}) => {
   let currentConfig = null;
   let currentFetcher = null;
   let currentBatchHandle = null;
-  let isEnabled = true;
   const { runtime: runtime3 } = config;
   async function applyActions(actions) {
     if (!(runtime3 == null ? void 0 : runtime3.actions) || actions.length === 0) {
@@ -4848,13 +6505,13 @@ var createSmartCanvas = async (config = {}) => {
         "[SmartCanvas] Config fetched:",
         `tiles=${(_b = (_a2 = canvasConfig.tiles) == null ? void 0 : _a2.length) != null ? _b : 0},`,
         `actions=${(_d = (_c = canvasConfig.actions) == null ? void 0 : _c.length) != null ? _d : 0},`,
-        `theme=${(_f = (_e = canvasConfig.theme) == null ? void 0 : _e.name) != null ? _f : "none"}`
+        `theme=${(_f = (_e = canvasConfig.theme) == null ? void 0 : _e.mode) != null ? _f : "default"}`
       );
       if ((_g = canvasConfig.actions) == null ? void 0 : _g.length) {
         console.log(
           "[SmartCanvas] Actions to apply:",
           canvasConfig.actions.map(
-            (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${a.anchorId}"` : ""}${a.label ? ` "${a.label}"` : ""}`
+            (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${typeof a.anchorId === "string" ? a.anchorId : a.anchorId.selector}"` : ""}${a.label ? ` "${a.label}"` : ""}`
           ).join(", ")
         );
       }
@@ -4863,7 +6520,7 @@ var createSmartCanvas = async (config = {}) => {
         console.log("[SmartCanvas] Initial actions applied successfully");
       }
       if (canvasConfig.tiles && (runtime3 == null ? void 0 : runtime3.accumulator)) {
-        registerConfigPredicates(canvasConfig.tiles, runtime3.accumulator);
+        registerConfigPredicates(canvasConfig.tiles, runtime3.accumulator, canvasConfig.actions);
       }
     } catch (error2) {
       console.error("[SmartCanvas] Error fetching/applying initial config:", error2);
@@ -4921,8 +6578,8 @@ var createSmartCanvas = async (config = {}) => {
     configUri: config.configUri,
     configUriFeatureKey: config.configUriFeatureKey,
     fetchCredentials: config.fetchCredentials,
-    theme: config.theme,
-    initialBatchHandle: currentBatchHandle
+    initialBatchHandle: currentBatchHandle,
+    workspaceTheme: config.workspaceTheme
   };
   host.mountReactApp(appProps);
   if (config.defaultOpen) {
@@ -4953,30 +6610,7 @@ var createSmartCanvas = async (config = {}) => {
       }
       return currentConfig != null ? currentConfig : { tiles: [], actions: [], fetchedAt: "" };
     },
-    updateConfig: async (newConfig) => {
-      var _a3, _b2, _c2, _d2;
-      console.log(
-        "[SmartCanvas] updateConfig:",
-        `tiles=${(_b2 = (_a3 = newConfig.tiles) == null ? void 0 : _a3.length) != null ? _b2 : 0},`,
-        `actions=${(_d2 = (_c2 = newConfig.actions) == null ? void 0 : _c2.length) != null ? _d2 : 0},`,
-        `enabled=${isEnabled}`
-      );
-      currentConfig = newConfig;
-      if (newConfig.tiles && (runtime3 == null ? void 0 : runtime3.accumulator)) {
-        registerConfigPredicates(newConfig.tiles, runtime3.accumulator);
-      }
-      if (isEnabled) {
-        try {
-          await applyActions(newConfig.actions);
-          console.log("[SmartCanvas] updateConfig actions applied successfully");
-        } catch (error2) {
-          console.error("[SmartCanvas] updateConfig failed to apply actions:", error2);
-        }
-      }
-      host.setOverrideFetcher(() => Promise.resolve(newConfig));
-    },
     setEnabled: async (enabled) => {
-      isEnabled = enabled;
       if (enabled) {
         if (currentConfig) {
           await applyActions(currentConfig.actions);
@@ -4991,7 +6625,7 @@ var createSmartCanvas = async (config = {}) => {
       if (runtime3 == null ? void 0 : runtime3.accumulator) {
         newFetcher().then((config2) => {
           if (config2 == null ? void 0 : config2.tiles) {
-            registerConfigPredicates(config2.tiles, runtime3.accumulator);
+            registerConfigPredicates(config2.tiles, runtime3.accumulator, config2.actions);
           }
         }).catch(() => {
         });
@@ -5038,6 +6672,7 @@ var DEFAULT_EXPERIMENT_API_HOST = "https://experiment.syntrologie.com";
 var GrowthBookAdapter = class {
   constructor(options = {}) {
     __publicField(this, "gb");
+    __publicField(this, "featureListeners", /* @__PURE__ */ new Set());
     var _a2, _b;
     if (options.client) {
       this.gb = options.client;
@@ -5093,6 +6728,20 @@ var GrowthBookAdapter = class {
   shouldRenderRectangle(_tile) {
     return true;
   }
+  onFeaturesChanged(callback) {
+    this.featureListeners.add(callback);
+    if (this.featureListeners.size === 1) {
+      this.gb.setRenderer(() => {
+        for (const cb of this.featureListeners) cb();
+      });
+    }
+    return () => {
+      this.featureListeners.delete(callback);
+      if (this.featureListeners.size === 0) {
+        this.gb.setRenderer(null);
+      }
+    };
+  }
 };
 function createGrowthBookClient(options = {}) {
   return new GrowthBookAdapter(options);
@@ -5510,315 +7159,67 @@ var executeSequence = async (action, context) => {
         }
       }
     }
-  };
-};
-var executeParallel = async (action, context) => {
-  const handles = [];
-  if (context.applyAction) {
-    const promises = action.actions.map((childAction) => context.applyAction(childAction));
-    if (action.waitFor === "any") {
-      const firstHandle = await Promise.race(promises);
-      handles.push(firstHandle);
-      const remaining = await Promise.allSettled(promises);
-      for (const result of remaining) {
-        if (result.status === "fulfilled" && result.value !== firstHandle) {
-          handles.push(result.value);
-        }
-      }
-    } else {
-      const allHandles = await Promise.all(promises);
-      handles.push(...allHandles);
-    }
-  }
-  return {
-    cleanup: async () => {
-      for (const handle of handles) {
-        try {
-          await handle.revert();
-        } catch {
-        }
-      }
-    }
-  };
-};
-var executeWait = async (action, context) => {
-  let unsubscribe;
-  let timeoutId;
-  let cancelled = false;
-  const result = {
-    cleanup: () => {
-      cancelled = true;
-      if (timeoutId) clearTimeout(timeoutId);
-      if (unsubscribe) unsubscribe();
-    }
-  };
-  if (action.event && context.subscribeEvent) {
-    await new Promise((resolve) => {
-      unsubscribe = context.subscribeEvent(action.event, () => {
-        if (!cancelled) resolve();
-      });
-      if (action.durationMs !== void 0) {
-        timeoutId = setTimeout(() => {
-          if (!cancelled) resolve();
-        }, action.durationMs);
-      }
-    });
-  } else if (action.durationMs !== void 0) {
-    await new Promise((resolve) => {
-      timeoutId = setTimeout(() => {
-        if (!cancelled) resolve();
-      }, action.durationMs);
-    });
-  }
-  return result;
-};
-
-// src/actions/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 == null ? void 0 : 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 (error2) {
-      console.error(`[Tour] Failed to execute step "${step.id}":`, error2);
-      context.publishEvent("tour.step_failed", {
-        tourId,
-        stepId: step.id,
-        error: String(error2)
-      });
-      return;
-    }
-    if (step.onAction && context.subscribeEvent) {
-      eventUnsubscribe = context.subscribeEvent("action.modal_cta_clicked", (props) => {
-        const actionId = props == null ? void 0 : props.actionId;
-        if (actionId && step.onAction) {
-          const nextStepId = step.onAction[actionId];
-          if (nextStepId) {
-            advanceToStep(nextStepId);
-          }
+  };
+};
+var executeParallel = async (action, context) => {
+  const handles = [];
+  if (context.applyAction) {
+    const promises = action.actions.map((childAction) => context.applyAction(childAction));
+    if (action.waitFor === "any") {
+      const firstHandle = await Promise.race(promises);
+      handles.push(firstHandle);
+      const remaining = await Promise.allSettled(promises);
+      for (const result of remaining) {
+        if (result.status === "fulfilled" && result.value !== firstHandle) {
+          handles.push(result.value);
         }
-      });
-      const tooltipUnsubscribe = context.subscribeEvent("action.tooltip_cta_clicked", (props) => {
-        const actionId = props == null ? void 0 : props.actionId;
-        if (actionId && step.onAction) {
-          const nextStepId = step.onAction[actionId];
-          if (nextStepId) {
-            advanceToStep(nextStepId);
-          }
+      }
+    } else {
+      const allHandles = await Promise.all(promises);
+      handles.push(...allHandles);
+    }
+  }
+  return {
+    cleanup: async () => {
+      for (const handle of handles) {
+        try {
+          await handle.revert();
+        } catch {
         }
-      });
-      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());
+};
+var executeWait = async (action, context) => {
+  let unsubscribe;
+  let timeoutId;
+  let cancelled = false;
+  const result = {
+    cleanup: () => {
+      cancelled = true;
+      if (timeoutId) clearTimeout(timeoutId);
+      if (unsubscribe) unsubscribe();
     }
-    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
+  if (action.event && context.subscribeEvent) {
+    await new Promise((resolve) => {
+      unsubscribe = context.subscribeEvent(action.event, () => {
+        if (!cancelled) resolve();
+      });
+      if (action.durationMs !== void 0) {
+        timeoutId = setTimeout(() => {
+          if (!cancelled) resolve();
+        }, action.durationMs);
+      }
     });
-  } else {
-    context.publishEvent("tour.resumed", {
-      tourId,
-      stepId: state.currentStepId
+  } else if (action.durationMs !== void 0) {
+    await new Promise((resolve) => {
+      timeoutId = setTimeout(() => {
+        if (!cancelled) resolve();
+      }, action.durationMs);
     });
   }
-  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 };
+  return result;
 };
 
 // src/actions/executors/index.ts
@@ -5842,7 +7243,6 @@ var ExecutorRegistry = class {
     this.registerCore("core:sequence", executeSequence);
     this.registerCore("core:parallel", executeParallel);
     this.registerCore("core:wait", executeWait);
-    this.registerCore("core:tour", executeTour);
   }
   /**
    * Register a core executor (synchronous, built-in, cannot be overridden).
@@ -6121,18 +7521,46 @@ function validateAction(action) {
   };
 }
 function validateAnchorAction(action, errors, warnings) {
-  if (!action.anchorId || typeof action.anchorId !== "string") {
+  const anchorId = action.anchorId;
+  if (!anchorId || typeof anchorId !== "object") {
     errors.push({
       code: "MISSING_ANCHOR_ID",
-      message: "Action requires an 'anchorId' property",
+      message: "Action requires an 'anchorId' object with a 'selector' string",
       field: "anchorId"
     });
-  } else if (action.anchorId.length > 200) {
+    return;
+  }
+  if (!anchorId.selector || typeof anchorId.selector !== "string") {
+    errors.push({
+      code: "MISSING_ANCHOR_SELECTOR",
+      message: "anchorId requires a 'selector' string",
+      field: "anchorId.selector"
+    });
+  } else if (anchorId.selector.length > 200) {
     warnings.push({
       code: "LONG_ANCHOR_ID",
-      message: "Anchor ID is unusually long",
-      suggestion: "Consider using a shorter, more descriptive ID"
+      message: "Anchor selector is unusually long",
+      suggestion: "Consider using a shorter, more descriptive selector"
+    });
+  }
+  if (anchorId.route === void 0 || anchorId.route === null) {
+    errors.push({
+      code: "MISSING_ANCHOR_ROUTE",
+      message: `anchorId requires a 'route' (string or array of strings). Use "**" for all routes.`,
+      field: "anchorId.route"
     });
+  } else {
+    const routes = Array.isArray(anchorId.route) ? anchorId.route : [anchorId.route];
+    for (const route of routes) {
+      if (typeof route !== "string") {
+        errors.push({
+          code: "INVALID_ANCHOR_ROUTE",
+          message: "anchorId.route must be a string or array of strings",
+          field: "anchorId.route"
+        });
+        break;
+      }
+    }
   }
 }
 function validateBadgeAction(action, errors, warnings) {
@@ -6581,11 +8009,14 @@ function createActionEngine(options) {
     eventBus,
     surfaces,
     anchorResolver,
+    waitForAnchor,
     adaptiveId,
     executorRegistry: executorRegistry2 = executorRegistry,
-    subscribeNavigation
+    subscribeNavigation,
+    runtime: runtime3
   } = options;
   const activeActions = /* @__PURE__ */ new Map();
+  const conditionalUnsubs = /* @__PURE__ */ new Map();
   function generateId() {
     return `action-${++actionIdCounter}`;
   }
@@ -6598,6 +8029,7 @@ function createActionEngine(options) {
     return {
       overlayRoot,
       resolveAnchor: anchorResolver,
+      waitForAnchor,
       generateId,
       publishEvent,
       adaptiveId,
@@ -6648,6 +8080,67 @@ function createActionEngine(options) {
       }
     };
   }
+  async function executeAction(action, context) {
+    if (action.kind === "core:mountWidget") {
+      return executeMountWidget(action, context);
+    }
+    const executor = executorRegistry2.get(action.kind);
+    if (!executor) {
+      const registered = "list" in executorRegistry2 ? executorRegistry2.list() : "(list unavailable)";
+      console.error(
+        `[ActionEngine] No executor for kind="${action.kind}".`,
+        `Registered: [${registered}]`
+      );
+      throw new Error(`No executor for action kind: ${action.kind}`);
+    }
+    return executor(action, context);
+  }
+  function subscribeForReeval(id, action, triggerWhen, handle) {
+    if (!runtime3) return;
+    const unsubs = [];
+    const onReeval = async () => {
+      const entry = activeActions.get(id);
+      if (!entry) return;
+      const result = runtime3.evaluateSync(triggerWhen);
+      const shouldApply = result.value;
+      if (entry.state === "applied" && !shouldApply) {
+        try {
+          await entry.cleanup();
+        } catch (error2) {
+          console.error(`[ActionEngine] Error reverting conditional action ${id}:`, error2);
+        }
+        entry.state = "deferred";
+        entry.cleanup = () => {
+        };
+        entry.updateFn = void 0;
+        publishEvent("action.deferred", { id, kind: action.kind });
+      } else if (entry.state === "deferred" && shouldApply) {
+        try {
+          const context = createExecutorContext();
+          const execResult = await executeAction(action, context);
+          entry.state = "applied";
+          entry.cleanup = execResult.cleanup;
+          entry.updateFn = execResult.updateFn;
+          entry.appliedTs = Date.now();
+          publishEvent("action.applied", {
+            id,
+            kind: action.kind,
+            anchorId: "anchorId" in action ? action.anchorId : void 0
+          });
+        } catch (error2) {
+          console.error(`[ActionEngine] Error applying deferred action ${id}:`, error2);
+          entry.state = "failed";
+        }
+      }
+    };
+    if (runtime3.context) {
+      unsubs.push(runtime3.context.subscribe(onReeval));
+    }
+    if (runtime3.accumulator) {
+      unsubs.push(runtime3.accumulator.subscribe(onReeval));
+    }
+    conditionalUnsubs.set(id, unsubs);
+  }
   async function apply(action) {
     const validation = validateAction(action);
     if (!validation.valid) {
@@ -6660,22 +8153,61 @@ function createActionEngine(options) {
       throw new Error(`Action validation failed: ${errorMessages}`);
     }
     const id = generateId();
-    const context = createExecutorContext();
-    let result;
-    if (action.kind === "core:mountWidget") {
-      result = await executeMountWidget(action, context);
-    } else {
-      const executor = executorRegistry2.get(action.kind);
-      if (!executor) {
-        const registered = "list" in executorRegistry2 ? executorRegistry2.list() : "(list unavailable)";
-        console.error(
-          `[ActionEngine] No executor for kind="${action.kind}".`,
-          `Registered: [${registered}]`
-        );
-        throw new Error(`No executor for action kind: ${action.kind}`);
+    const triggerWhen = action.triggerWhen;
+    if (triggerWhen && runtime3) {
+      const evalResult = runtime3.evaluateSync(triggerWhen);
+      if (!evalResult.value) {
+        const entry2 = {
+          id,
+          action,
+          adaptiveId,
+          appliedTs: Date.now(),
+          state: "deferred",
+          cleanup: () => {
+          }
+        };
+        activeActions.set(id, entry2);
+        const handle2 = {
+          id,
+          action,
+          async revert() {
+            const entry3 = activeActions.get(id);
+            if (!entry3) return;
+            const unsubs = conditionalUnsubs.get(id);
+            if (unsubs) {
+              for (const unsub of unsubs) unsub();
+              conditionalUnsubs.delete(id);
+            }
+            entry3.state = "reverted";
+            activeActions.delete(id);
+          },
+          isApplied() {
+            const entry3 = activeActions.get(id);
+            return (entry3 == null ? void 0 : entry3.state) === "applied";
+          },
+          async update(changes) {
+            const entry3 = activeActions.get(id);
+            if (!entry3 || entry3.state !== "applied") {
+              throw new Error("Cannot update action that is not applied");
+            }
+            if (entry3.updateFn) {
+              await entry3.updateFn(changes);
+            } else {
+              throw new Error(`Action kind ${action.kind} does not support updates`);
+            }
+          },
+          getState() {
+            var _a2;
+            const entry3 = activeActions.get(id);
+            return (_a2 = entry3 == null ? void 0 : entry3.state) != null ? _a2 : "reverted";
+          }
+        };
+        subscribeForReeval(id, action, triggerWhen, handle2);
+        return handle2;
       }
-      result = await executor(action, context);
     }
+    const context = createExecutorContext();
+    const result = await executeAction(action, context);
     const entry = {
       id,
       action,
@@ -6697,6 +8229,11 @@ function createActionEngine(options) {
       async revert() {
         const entry2 = activeActions.get(id);
         if (!entry2 || entry2.state !== "applied") return;
+        const unsubs = conditionalUnsubs.get(id);
+        if (unsubs) {
+          for (const unsub of unsubs) unsub();
+          conditionalUnsubs.delete(id);
+        }
         try {
           await entry2.cleanup();
           entry2.state = "reverted";
@@ -6734,6 +8271,9 @@ function createActionEngine(options) {
         return (_a2 = entry2 == null ? void 0 : entry2.state) != null ? _a2 : "reverted";
       }
     };
+    if (triggerWhen && runtime3) {
+      subscribeForReeval(id, action, triggerWhen, handle);
+    }
     return handle;
   }
   async function applyBatch(actions) {
@@ -6749,7 +8289,7 @@ function createActionEngine(options) {
         errorMessages,
         "\nActions:",
         actions.map(
-          (a, i) => `  [${i}] ${a.kind} ${a.anchorId ? `anchor="${a.anchorId}"` : ""} ${a.label ? `label="${a.label}"` : ""}`
+          (a, i) => `  [${i}] ${a.kind} ${a.anchorId ? `anchor="${typeof a.anchorId === "string" ? a.anchorId : a.anchorId.selector}"` : ""} ${a.label ? `label="${a.label}"` : ""}`
         ).join("\n")
       );
       throw new Error(`Batch validation failed: ${errorMessages}`);
@@ -6808,6 +8348,15 @@ function createActionEngine(options) {
     }));
   }
   function destroy() {
+    for (const unsubs of conditionalUnsubs.values()) {
+      for (const unsub of unsubs) {
+        try {
+          unsub();
+        } catch {
+        }
+      }
+    }
+    conditionalUnsubs.clear();
     for (const entry of activeActions.values()) {
       if (entry.state === "applied") {
         try {
@@ -6828,6 +8377,154 @@ function createActionEngine(options) {
   };
 }
 
+// src/anchor/AnchorResolver.ts
+function createAnchorResolver(opts) {
+  var _a2, _b;
+  const root = (_a2 = opts == null ? void 0 : opts.root) != null ? _a2 : typeof document !== "undefined" ? document.body : null;
+  const defaultTimeoutMs = (_b = opts == null ? void 0 : opts.defaultTimeoutMs) != null ? _b : 5e3;
+  const waiters = /* @__PURE__ */ new Map();
+  const appearWatchers = /* @__PURE__ */ new Map();
+  let observer = null;
+  let destroyed = false;
+  function resolve(selector) {
+    if (!root) return null;
+    try {
+      return root.querySelector(selector);
+    } catch {
+      return null;
+    }
+  }
+  function checkPending() {
+    for (const [selector, set] of waiters) {
+      const el = resolve(selector);
+      if (el) {
+        for (const w of set) {
+          clearTimeout(w.timer);
+          w.resolve(el);
+        }
+        waiters.delete(selector);
+      }
+    }
+    for (const [selector, set] of appearWatchers) {
+      const el = resolve(selector);
+      if (el) {
+        for (const watcher of set) {
+          if (!watcher.cancelled) {
+            watcher.cb(el);
+          }
+        }
+        appearWatchers.delete(selector);
+      }
+    }
+    if (waiters.size === 0 && appearWatchers.size === 0) {
+      disconnectObserver();
+    }
+  }
+  function ensureObserver() {
+    if (observer || destroyed) return;
+    if (typeof MutationObserver === "undefined" || !root) return;
+    observer = new MutationObserver(() => {
+      checkPending();
+    });
+    observer.observe(root, { childList: true, subtree: true });
+  }
+  function disconnectObserver() {
+    if (observer) {
+      observer.disconnect();
+      observer = null;
+    }
+  }
+  function removeWaiter(selector, waiter) {
+    const set = waiters.get(selector);
+    if (set) {
+      set.delete(waiter);
+      if (set.size === 0) {
+        waiters.delete(selector);
+      }
+    }
+    if (waiters.size === 0 && appearWatchers.size === 0) {
+      disconnectObserver();
+    }
+  }
+  function waitFor(selector, timeoutMs) {
+    if (destroyed) {
+      return Promise.reject(new Error("AnchorResolver destroyed"));
+    }
+    const existing = resolve(selector);
+    if (existing) return Promise.resolve(existing);
+    const timeout = timeoutMs != null ? timeoutMs : defaultTimeoutMs;
+    return new Promise((res, rej) => {
+      const waiter = {
+        resolve: res,
+        reject: rej,
+        timer: setTimeout(() => {
+          removeWaiter(selector, waiter);
+          rej(new Error(`waitFor("${selector}") timed out after ${timeout}ms`));
+        }, timeout)
+      };
+      let set = waiters.get(selector);
+      if (!set) {
+        set = /* @__PURE__ */ new Set();
+        waiters.set(selector, set);
+      }
+      set.add(waiter);
+      ensureObserver();
+    });
+  }
+  function onAppear(selector, cb) {
+    if (destroyed) return () => {
+    };
+    const existing = resolve(selector);
+    if (existing) {
+      cb(existing);
+      return () => {
+      };
+    }
+    const watcher = { cb, cancelled: false };
+    let set = appearWatchers.get(selector);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      appearWatchers.set(selector, set);
+    }
+    set.add(watcher);
+    ensureObserver();
+    return () => {
+      watcher.cancelled = true;
+      const s = appearWatchers.get(selector);
+      if (s) {
+        s.delete(watcher);
+        if (s.size === 0) {
+          appearWatchers.delete(selector);
+        }
+      }
+      if (waiters.size === 0 && appearWatchers.size === 0) {
+        disconnectObserver();
+      }
+    };
+  }
+  function pendingCount() {
+    let count = 0;
+    for (const set of waiters.values()) {
+      count += set.size;
+    }
+    return count;
+  }
+  function destroy() {
+    destroyed = true;
+    disconnectObserver();
+    const err = new Error("AnchorResolver destroyed");
+    for (const set of waiters.values()) {
+      for (const w of set) {
+        clearTimeout(w.timer);
+        w.reject(err);
+      }
+    }
+    waiters.clear();
+    appearWatchers.clear();
+  }
+  return { resolve, waitFor, onAppear, pendingCount, destroy };
+}
+
 // src/context/ContextManager.ts
 function createDefaultContext() {
   const now = Date.now();
@@ -7059,13 +8756,13 @@ function createContextManager(options = {}) {
 
 // src/decisions/strategies/rules.ts
 function evaluateCondition(condition, evalContext) {
-  var _a2, _b, _c, _d, _e;
+  var _a2, _b, _c, _d, _e, _f, _g;
   const { context, state, events } = evalContext;
   switch (condition.type) {
     case "page_url": {
       const { url } = condition;
-      const currentUrl = context.page.url;
-      const pattern = url.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*");
+      const currentUrl = context.page.url.split("?")[0].split("#")[0];
+      const pattern = url.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*");
       const regex = new RegExp(`^${pattern}$`);
       return regex.test(currentUrl);
     }
@@ -7073,7 +8770,8 @@ function evaluateCondition(condition, evalContext) {
       return context.page.routeId === condition.routeId;
     }
     case "anchor_visible": {
-      const anchor = (_a2 = context.anchors) == null ? void 0 : _a2.find((a) => a.anchorId === condition.anchorId);
+      const condSelector = typeof condition.anchorId === "string" ? condition.anchorId : (_b = (_a2 = condition.anchorId) == null ? void 0 : _a2.selector) != null ? _b : "";
+      const anchor = (_c = context.anchors) == null ? void 0 : _c.find((a) => a.anchorId === condSelector);
       switch (condition.state) {
         case "visible":
           return (anchor == null ? void 0 : anchor.visible) === true;
@@ -7087,7 +8785,7 @@ function evaluateCondition(condition, evalContext) {
     }
     case "event_occurred": {
       if (!events) return false;
-      const withinMs = (_b = condition.withinMs) != null ? _b : 6e4;
+      const withinMs = (_d = condition.withinMs) != null ? _d : 6e4;
       return events.hasRecentEvent(condition.eventName, withinMs);
     }
     case "state_equals": {
@@ -7122,17 +8820,17 @@ function evaluateCondition(condition, evalContext) {
       }
     }
     case "dismissed": {
-      if (!state) return (_c = condition.inverted) != null ? _c : false;
+      if (!state) return (_e = condition.inverted) != null ? _e : false;
       const isDismissed = state.isDismissed(condition.key);
       return condition.inverted ? !isDismissed : isDismissed;
     }
     case "cooldown_active": {
-      if (!state) return (_d = condition.inverted) != null ? _d : false;
+      if (!state) return (_f = condition.inverted) != null ? _f : false;
       const isActive = state.isCooldownActive(condition.key);
       return condition.inverted ? !isActive : isActive;
     }
     case "frequency_limit": {
-      if (!state) return (_e = condition.inverted) != null ? _e : false;
+      if (!state) return (_g = condition.inverted) != null ? _g : false;
       const count = state.getFrequencyCount(condition.key);
       const limitReached = count >= condition.limit;
       return condition.inverted ? !limitReached : limitReached;
@@ -8323,7 +10021,7 @@ function createSurfaces(options) {
       if (!anchorResolver) {
         throw new Error("Anchor resolver required for inline slots");
       }
-      const anchorEl = anchorResolver(anchorId);
+      const anchorEl = anchorResolver({ selector: anchorId, route: "**" });
       if (!anchorEl) {
         throw new Error(`Anchor not found for inline slot: ${anchorId}`);
       }
@@ -8336,7 +10034,7 @@ function createSurfaces(options) {
       if (!anchorResolver) {
         throw new Error("Anchor resolver required for adjacent slots");
       }
-      const anchorEl = anchorResolver(anchorId);
+      const anchorEl = anchorResolver({ selector: anchorId, route: "**" });
       if (!anchorEl) {
         throw new Error(`Anchor not found for adjacent slot: ${anchorId}`);
       }
@@ -8739,16 +10437,15 @@ function matchesRouteFilter(url, filter) {
 function matchRoutePattern(pathname, pattern) {
   const normalizedPattern = pattern.replace(/\/$/, "") || "/";
   if (pathname === normalizedPattern) return true;
-  const regexPattern = normalizedPattern.replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, ".*").replace(/\*/g, "[^/]*").replace(/:[^/]+/g, "[^/]+");
+  const regexPattern = normalizedPattern.replace(/\*\*/g, "\0GLOBSTAR\0").replace(/[.+^${}()|[\]\\]/g, "\\$&").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*").replace(/:[^/]+/g, "[^/]+");
   const regex = new RegExp(`^${regexPattern}$`);
   return regex.test(pathname);
 }
-function resolveAnchorById(anchorId) {
-  try {
-    return document.querySelector(anchorId);
-  } catch {
-    return null;
-  }
+function matchesAnchorRoute(anchorId) {
+  const pathname = typeof window !== "undefined" ? window.location.pathname : "/";
+  const normalizedPath = pathname.replace(/\/$/, "") || "/";
+  const routes = Array.isArray(anchorId.route) ? anchorId.route : [anchorId.route];
+  return routes.some((pattern) => matchRoutePattern(normalizedPath, pattern));
 }
 function createSmartCanvasRuntime(options = {}) {
   var _a2, _b, _c, _d;
@@ -8777,7 +10474,19 @@ function createSmartCanvasRuntime(options = {}) {
     accumulator
   });
   const overlayRoot = ensureOverlayRoot();
-  const anchorResolver = (anchorId) => resolveAnchorById(anchorId);
+  const anchorResolverService = createAnchorResolver();
+  const anchorResolver = (anchorId) => {
+    if (!matchesAnchorRoute(anchorId)) return null;
+    return anchorResolverService.resolve(anchorId.selector);
+  };
+  const waitForAnchor = async (anchorId, timeoutMs) => {
+    if (!matchesAnchorRoute(anchorId)) return null;
+    try {
+      return await anchorResolverService.waitFor(anchorId.selector, timeoutMs);
+    } catch {
+      return null;
+    }
+  };
   const surfaces = createSurfaces({
     overlayRoot,
     eventBus: events,
@@ -8789,8 +10498,14 @@ function createSmartCanvasRuntime(options = {}) {
     eventBus: events,
     surfaces,
     anchorResolver,
+    waitForAnchor,
     executorRegistry: executors3,
-    subscribeNavigation: (callback) => navigation.subscribe(callback)
+    subscribeNavigation: (callback) => navigation.subscribe(callback),
+    runtime: {
+      evaluateSync: (strategy) => decisionEngine.evaluateSync(strategy, context.get()),
+      context,
+      accumulator
+    }
   });
   const runtime3 = {
     telemetry,
@@ -8804,6 +10519,7 @@ function createSmartCanvasRuntime(options = {}) {
     executors: executors3,
     apps,
     accumulator,
+    anchorResolver: anchorResolverService,
     navigation,
     version: RUNTIME_VERSION,
     mode,
@@ -8814,6 +10530,7 @@ function createSmartCanvasRuntime(options = {}) {
       return decisionEngine.evaluateSync(strategy, context.get());
     },
     async filterTiles(tiles) {
+      var _a3, _b2;
       const currentUrl = context.get().page.url;
       const results = [];
       for (const tile of tiles) {
@@ -8825,14 +10542,20 @@ function createSmartCanvasRuntime(options = {}) {
         if (!matchesRouteFilter(currentUrl, activation.routes)) {
           continue;
         }
-        if (!activation.strategy) {
-          results.push(tile);
-          continue;
-        }
-        const result = await this.evaluate(activation.strategy);
-        if (result.value) {
-          results.push(tile);
+        if (activation.onlyIfPopulated) {
+          const actions2 = (_b2 = (_a3 = tile.props) == null ? void 0 : _a3.actions) != null ? _b2 : [];
+          if (actions2.length > 0) {
+            const hasVisible = actions2.some((a) => {
+              if (!a.triggerWhen) return true;
+              return decisionEngine.evaluateSync(
+                a.triggerWhen,
+                context.get()
+              ).value;
+            });
+            if (!hasVisible) continue;
+          }
         }
+        results.push(tile);
       }
       return results;
     },
@@ -8843,6 +10566,7 @@ function createSmartCanvasRuntime(options = {}) {
       apps.unbind().catch((err) => {
         console.error("[Runtime] Error unbinding apps registry:", err);
       });
+      anchorResolverService.destroy();
       accumulator.destroy();
       navigation.destroy();
       context.destroy();
@@ -9433,7 +11157,7 @@ async function init(options) {
       console.log(
         "[Syntro Bootstrap] Actions in config:",
         config.actions.map(
-          (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${a.anchorId}"` : ""}${a.label ? ` "${a.label}"` : ""}`
+          (a, i) => `[${i}] ${a.kind}${a.anchorId ? ` anchor="${typeof a.anchorId === "string" ? a.anchorId : a.anchorId.selector}"` : ""}${a.label ? ` "${a.label}"` : ""}`
         ).join(", ")
       );
     }
@@ -9504,11 +11228,9 @@ if (typeof window !== "undefined") {
 export {
   runtime,
   base,
-  brand,
   slateGrey,
   red,
   purple,
-  border,
   runtime2,
   createAppContext,
   cleanupAppContext,
@@ -9567,6 +11289,7 @@ export {
   validateAction,
   validateActions,
   createActionEngine,
+  createAnchorResolver,
   ContextManager,
   createContextManager,
   evaluateCondition,
@@ -9605,4 +11328,4 @@ export {
   encodeToken,
   Syntro
 };
-//# sourceMappingURL=chunk-QGWATS3Z.js.map
+//# sourceMappingURL=chunk-Q4WGXNKC.js.map