@guidelytech/guide-runtime 0.0.0-stage → 0.1.0

package/dist/index.cjs

@@ -0,0 +1,2381 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  DEFAULT_THEME: () => DEFAULT_THEME,
+  HOST_ID: () => HOST_ID2,
+  STYLES: () => STYLES,
+  TargetTimeoutError: () => TargetTimeoutError,
+  anchor: () => anchor,
+  applyTheme: () => applyTheme,
+  buildCard: () => buildCard,
+  createScope: () => createScope,
+  describeElement: () => describeElement,
+  destroyHost: () => destroyHost,
+  ensureHost: () => ensureHost,
+  generateSelectors: () => generateSelectors,
+  highlightSelectors: () => highlightSelectors,
+  isAnchoredStep: () => isAnchoredStep,
+  isChecklistComplete: () => isChecklistComplete,
+  isGuidelyElement: () => isGuidelyElement,
+  isQuestionVisible: () => isQuestionVisible,
+  isStableId: () => isStableId,
+  isVisible: () => isVisible,
+  normalizeText: () => normalizeText,
+  prefersReducedMotion: () => prefersReducedMotion,
+  previewStep: () => previewStep,
+  querySelectorStrategy: () => querySelectorStrategy,
+  renderBanner: () => renderBanner,
+  renderChecklist: () => renderChecklist,
+  renderCustom: () => renderCustom,
+  renderHotspot: () => renderHotspot,
+  renderModal: () => renderModal,
+  renderResourceCenter: () => renderResourceCenter,
+  renderSlideout: () => renderSlideout,
+  renderSpotlight: () => renderSpotlight,
+  renderStep: () => renderStep,
+  renderSurvey: () => renderSurvey,
+  renderTooltip: () => renderTooltip,
+  resolveTarget: () => resolveTarget,
+  resolveTheme: () => resolveTheme,
+  runGuide: () => runGuide,
+  sanitizeHtml: () => sanitizeHtml,
+  sanitizeToFragment: () => sanitizeToFragment,
+  setSanitizedHtml: () => setSanitizedHtml,
+  startAuthoring: () => startAuthoring,
+  textSnapshotOf: () => textSnapshotOf,
+  trackRect: () => trackRect,
+  urlMatches: () => urlMatches,
+  waitForTarget: () => waitForTarget
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/selectors.ts
+var import_runtime = require("@guidelytech/shared/runtime");
+function urlMatches(pattern, url) {
+  if (!pattern) return true;
+  if ((0, import_runtime.matchUrlPattern)(pattern, url)) return true;
+  try {
+    const u = new URL(url, "http://localhost");
+    if (!pattern.includes("?") && !pattern.includes("#")) return (0, import_runtime.matchUrlPattern)(pattern, u.pathname) || (0, import_runtime.matchUrlPattern)(pattern, u.origin + u.pathname);
+  } catch {
+  }
+  return false;
+}
+var TEXT_CANDIDATES = "button, a, [role='button'], [role='link'], [role='tab'], [role='menuitem'], h1, h2, h3, h4, h5, h6, label, summary";
+var HOST_ID = "guidely-root";
+function docOf(root) {
+  return root.nodeType === 9 ? root : root.ownerDocument;
+}
+function hasLayout(doc) {
+  const de = doc.documentElement;
+  if (!de) return false;
+  const r = de.getBoundingClientRect();
+  return r.width > 0 || r.height > 0;
+}
+function normalizeText(text) {
+  return (text || "").replace(/\s+/g, " ").trim();
+}
+function isVisible(el2) {
+  if (!el2.isConnected) return false;
+  const doc = el2.ownerDocument;
+  const win = doc.defaultView;
+  let cur = el2;
+  while (cur && cur !== doc.documentElement) {
+    if (cur.hidden) return false;
+    if (win) {
+      const cs = win.getComputedStyle(cur);
+      if (cs.display === "none" || cs.visibility === "hidden") return false;
+    }
+    cur = cur.parentElement ?? cur.getRootNode().host ?? null;
+  }
+  if (hasLayout(doc)) {
+    const r = el2.getBoundingClientRect();
+    if (r.width === 0 && r.height === 0) return false;
+  }
+  return true;
+}
+function isGuidelyElement(el2) {
+  if (!el2) return false;
+  const root = el2.getRootNode();
+  if (root instanceof ShadowRoot && root.host.id === HOST_ID) return true;
+  return el2.id === HOST_ID || !!el2.closest?.(`#${HOST_ID}`);
+}
+function safeQueryAll(root, selector) {
+  try {
+    return Array.from(root.querySelectorAll(selector));
+  } catch {
+    return [];
+  }
+}
+function escapeCss(value) {
+  const g = globalThis;
+  if (g.CSS && typeof g.CSS.escape === "function") return g.CSS.escape(value);
+  return value.replace(/["\\]/g, "\\$&");
+}
+function queryXPath(root, expr) {
+  const doc = docOf(root);
+  const d = doc;
+  if (typeof d.evaluate !== "function") return [];
+  try {
+    const result = d.evaluate(expr, root, null, 7, null);
+    const out = [];
+    for (let i = 0; i < result.snapshotLength; i++) {
+      const n = result.snapshotItem(i);
+      if (n && n.nodeType === 1) out.push(n);
+    }
+    return out;
+  } catch {
+    return [];
+  }
+}
+function queryText(root, text) {
+  const needle = normalizeText(text).toLowerCase();
+  if (!needle) return [];
+  const candidates = safeQueryAll(root, TEXT_CANDIDATES);
+  const exact = candidates.filter((c) => normalizeText(c.textContent).toLowerCase() === needle);
+  if (exact.length) return exact;
+  return candidates.filter((c) => normalizeText(c.textContent).toLowerCase().includes(needle));
+}
+function querySelectorStrategy(strategy, root) {
+  const value = strategy.value.trim();
+  if (!value) return [];
+  switch (strategy.kind) {
+    case "id": {
+      const id = value.startsWith("#") ? value.slice(1) : value;
+      return safeQueryAll(root, `#${escapeCss(id)}`);
+    }
+    case "data-attr":
+    case "aria":
+    case "css":
+      return safeQueryAll(root, value.startsWith("[") || /^[a-z*#.[]/i.test(value) ? value : `[${value}]`);
+    case "text":
+      return queryText(root, value);
+    case "xpath":
+      return queryXPath(root, value);
+    default:
+      return [];
+  }
+}
+function resolveTarget(target, root = document) {
+  const selectors = Array.isArray(target) ? target : target.selectors;
+  for (const strategy of selectors) {
+    const matches = querySelectorStrategy(strategy, root).filter((el2) => !isGuidelyElement(el2) && isVisible(el2));
+    if (matches.length === 1) return matches[0];
+  }
+  return null;
+}
+var TargetTimeoutError = class extends Error {
+  constructor(message = "Target element not found before timeout") {
+    super(message);
+    __publicField(this, "name", "TargetTimeoutError");
+  }
+};
+function waitForTarget(target, options = {}) {
+  const timeoutMs = options.timeoutMs ?? 5e3;
+  const root = options.root ?? document;
+  const pollMs = Math.min(250, Math.max(16, options.pollMs ?? 250));
+  return new Promise((resolve, reject) => {
+    const immediate = resolveTarget(target, root);
+    if (immediate) return resolve(immediate);
+    if (options.signal?.aborted) return reject(new DOMException("Aborted", "AbortError"));
+    let done = false;
+    let observer = null;
+    let timer = null;
+    let timeout = null;
+    const cleanup = () => {
+      done = true;
+      observer?.disconnect();
+      if (timer) clearInterval(timer);
+      if (timeout) clearTimeout(timeout);
+      options.signal?.removeEventListener("abort", onAbort);
+    };
+    const check = () => {
+      if (done) return;
+      const el2 = resolveTarget(target, root);
+      if (el2) {
+        cleanup();
+        resolve(el2);
+      }
+    };
+    const onAbort = () => {
+      cleanup();
+      reject(new DOMException("Aborted", "AbortError"));
+    };
+    options.signal?.addEventListener("abort", onAbort);
+    const observeRoot = root.nodeType === 9 ? root.documentElement : root;
+    if (typeof MutationObserver !== "undefined" && observeRoot) {
+      observer = new MutationObserver(check);
+      observer.observe(observeRoot, { childList: true, subtree: true, attributes: true, attributeFilter: ["class", "style", "hidden", "id", "data-tour", "aria-label"] });
+    }
+    timer = setInterval(check, pollMs);
+    if (timeoutMs > 0) {
+      timeout = setTimeout(() => {
+        cleanup();
+        reject(new TargetTimeoutError());
+      }, timeoutMs);
+    }
+  });
+}
+var GENERATED_ID = /(\d{4,}|:r[0-9a-z]+:|^radix-|^headlessui-|^mui-|^ember\d|^react-|^\w*-\d+$|__|^[a-f0-9]{8,}$|^svelte-)/i;
+var GENERATED_CLASS = /(^css-|^sc-|^jss\d|^svelte-|^emotion-|^chakra-|^Mui|^_|[0-9a-f]{6,}|^\w{1,2}$|^[a-z]+-\d+$|[:[\]/])/;
+var PREFERRED_DATA_ATTRS = ["data-testid", "data-tour", "data-test", "data-test-id", "data-cy", "data-qa", "data-id", "data-name", "data-guidely"];
+var IGNORED_DATA_ATTRS = /^data-(state|v-|reactid|react|radix|headlessui|svelte|hydrated|orientation|highlighted|focus|key|index|rbd|dnd|rk-|sveltekit)/i;
+function isStableId(id) {
+  return !!id && /^[A-Za-z][\w-]*$/.test(id) && !GENERATED_ID.test(id);
+}
+function isStableClass(cls) {
+  return !!cls && !GENERATED_CLASS.test(cls) && cls.length <= 40;
+}
+function uniqueIn(doc, selector, el2) {
+  const all = safeQueryAll(doc, selector);
+  return all.length === 1 && all[0] === el2;
+}
+function attrSelector(name, value) {
+  return `[${name}='${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`;
+}
+function cssPath(el2, doc) {
+  const segments = [];
+  let cur = el2;
+  while (cur && cur.nodeType === 1 && cur !== doc.body && cur !== doc.documentElement) {
+    const tag = cur.tagName.toLowerCase();
+    if (isStableId(cur.id)) {
+      segments.unshift(`#${cur.id}`);
+      break;
+    }
+    let seg = tag;
+    const parent = cur.parentElement;
+    if (parent) {
+      const sameTag = Array.from(parent.children).filter((c) => c.tagName === cur.tagName);
+      if (sameTag.length > 1) {
+        const stableCls = Array.from(cur.classList).find((c) => isStableClass(c) && sameTag.filter((s) => s.classList.contains(c)).length === 1);
+        seg += stableCls ? `.${escapeCss(stableCls)}` : `:nth-of-type(${sameTag.indexOf(cur) + 1})`;
+      }
+    }
+    segments.unshift(seg);
+    const candidate = segments.join(" > ");
+    if (uniqueIn(doc, candidate, el2)) return candidate;
+    cur = parent;
+  }
+  const full = segments.join(" > ");
+  return uniqueIn(doc, full, el2) ? full : null;
+}
+function textSnapshotOf(el2) {
+  const he = el2;
+  const own = normalizeText(he.innerText ?? el2.textContent);
+  const alt = normalizeText(el2.getAttribute("aria-label") || el2.getAttribute("title") || el2.getAttribute("placeholder") || el2.getAttribute("alt") || el2.value);
+  return (own || alt).slice(0, 200);
+}
+function generateSelectors(el2) {
+  const doc = el2.ownerDocument;
+  const out = [];
+  const seen = /* @__PURE__ */ new Set();
+  const push = (s) => {
+    const k = `${s.kind}:${s.value}`;
+    if (!seen.has(k)) {
+      seen.add(k);
+      out.push(s);
+    }
+  };
+  const tag = el2.tagName.toLowerCase();
+  if (isStableId(el2.id) && uniqueIn(doc, `#${escapeCss(el2.id)}`, el2)) push({ kind: "id", value: `#${el2.id}`, label: `id ${el2.id}` });
+  const dataAttrs = Array.from(el2.attributes).filter((a) => a.name.startsWith("data-") && !IGNORED_DATA_ATTRS.test(a.name) && a.value && a.value.length <= 120 && !/\d{5,}/.test(a.value));
+  dataAttrs.sort((a, b) => {
+    const ia = PREFERRED_DATA_ATTRS.indexOf(a.name);
+    const ib = PREFERRED_DATA_ATTRS.indexOf(b.name);
+    return (ia === -1 ? 99 : ia) - (ib === -1 ? 99 : ib);
+  });
+  for (const a of dataAttrs) {
+    const sel = attrSelector(a.name, a.value);
+    if (uniqueIn(doc, sel, el2)) push({ kind: "data-attr", value: sel, label: `${a.name}=${a.value}` });
+    else if (uniqueIn(doc, tag + sel, el2)) push({ kind: "data-attr", value: tag + sel, label: `${a.name}=${a.value}` });
+  }
+  const aria = el2.getAttribute("aria-label");
+  if (aria && aria.length <= 120) {
+    const sel = attrSelector("aria-label", aria);
+    if (uniqueIn(doc, sel, el2)) push({ kind: "aria", value: sel, label: aria });
+    else if (uniqueIn(doc, tag + sel, el2)) push({ kind: "aria", value: tag + sel, label: aria });
+  }
+  const name = el2.getAttribute("name");
+  if (name && uniqueIn(doc, tag + attrSelector("name", name), el2)) push({ kind: "css", value: tag + attrSelector("name", name), label: `${tag} name=${name}` });
+  const role = el2.getAttribute("role");
+  if (role) {
+    const title = el2.getAttribute("title") || el2.getAttribute("aria-labelledby");
+    const sel = title ? `[role='${role}']${attrSelector(el2.getAttribute("title") ? "title" : "aria-labelledby", title)}` : `[role='${role}']`;
+    if (uniqueIn(doc, sel, el2)) push({ kind: "css", value: sel, label: `role ${role}` });
+  }
+  if (tag === "a") {
+    const href = el2.getAttribute("href");
+    if (href && href.length <= 200 && uniqueIn(doc, `a${attrSelector("href", href)}`, el2)) push({ kind: "css", value: `a${attrSelector("href", href)}`, label: `link ${href}` });
+  }
+  const path = cssPath(el2, doc);
+  if (path) push({ kind: "css", value: path, label: "css path" });
+  if (/^(button|a|h[1-6]|label|summary)$/.test(tag) || role === "button" || role === "link" || role === "tab" || role === "menuitem") {
+    const text = normalizeText(el2.innerText ?? el2.textContent);
+    if (text && text.length <= 80) push({ kind: "text", value: text, label: `text "${text}"` });
+  }
+  return out.slice(0, 10);
+}
+function describeElement(el2) {
+  const r = el2.getBoundingClientRect();
+  return {
+    selectors: generateSelectors(el2),
+    textSnapshot: textSnapshotOf(el2),
+    rect: { x: r.x, y: r.y, width: r.width, height: r.height },
+    tag: el2.tagName.toLowerCase()
+  };
+}
+
+// src/sanitize.ts
+var ALLOWED_TAGS = /* @__PURE__ */ new Set(["p", "br", "strong", "b", "em", "i", "u", "a", "ul", "ol", "li", "img", "h1", "h2", "h3", "h4", "code", "pre", "blockquote", "span", "div", "hr", "button"]);
+var DROP_TAGS = /* @__PURE__ */ new Set(["script", "style", "iframe", "object", "embed", "form", "input", "textarea", "select", "link", "meta", "base", "template", "svg", "math", "frame", "frameset", "noscript"]);
+var ALLOWED_ATTRS = /* @__PURE__ */ new Set(["href", "src", "alt", "title", "target", "rel", "class", "data-g-action", "data-g-value"]);
+function isSafeUrl(value, attr, tag) {
+  const v = value.trim().replace(/[\u0000-\u001f\s]/g, "").toLowerCase();
+  if (!v) return false;
+  const m = /^([a-z][a-z0-9+.-]*):/.exec(v);
+  if (!m) return true;
+  const scheme = m[1];
+  if (scheme === "data") return tag === "img" && attr === "src" && v.startsWith("data:image/");
+  return scheme === "http" || scheme === "https" || scheme === "mailto" || scheme === "tel";
+}
+function sanitizeElement(el2) {
+  const tag = el2.tagName.toLowerCase();
+  for (const attr of Array.from(el2.attributes)) {
+    const name = attr.name.toLowerCase();
+    if (name.startsWith("on") || !ALLOWED_ATTRS.has(name)) {
+      el2.removeAttribute(attr.name);
+      continue;
+    }
+    if ((name === "href" || name === "src") && !isSafeUrl(attr.value, name, tag)) el2.removeAttribute(attr.name);
+  }
+  if (tag === "a") {
+    const target = el2.getAttribute("target");
+    if (target && target !== "_blank" && target !== "_self") el2.removeAttribute("target");
+    if (el2.getAttribute("target") === "_blank") el2.setAttribute("rel", "noopener noreferrer");
+  }
+  if (tag === "button") el2.setAttribute("type", "button");
+  if (tag === "img") {
+    el2.setAttribute("loading", "lazy");
+    if (!el2.getAttribute("alt")) el2.setAttribute("alt", "");
+  }
+}
+function walk(node) {
+  const children = Array.from(node.childNodes);
+  for (const child of children) {
+    if (child.nodeType === 8) {
+      node.removeChild(child);
+      continue;
+    }
+    if (child.nodeType !== 1) continue;
+    const el2 = child;
+    const tag = el2.tagName.toLowerCase();
+    if (DROP_TAGS.has(tag)) {
+      node.removeChild(el2);
+      continue;
+    }
+    if (!ALLOWED_TAGS.has(tag)) {
+      while (el2.firstChild) node.insertBefore(el2.firstChild, el2);
+      node.removeChild(el2);
+      walk(node);
+      return;
+    }
+    sanitizeElement(el2);
+    walk(el2);
+  }
+}
+function sanitizeToFragment(html, doc = document) {
+  const tpl = doc.createElement("template");
+  tpl.innerHTML = html || "";
+  walk(tpl.content);
+  return tpl.content;
+}
+function sanitizeHtml(html, doc = document) {
+  const frag = sanitizeToFragment(html, doc);
+  const div = doc.createElement("div");
+  div.appendChild(frag);
+  return div.innerHTML;
+}
+function setSanitizedHtml(el2, html) {
+  el2.textContent = "";
+  el2.appendChild(sanitizeToFragment(html, el2.ownerDocument));
+}
+
+// src/styles.ts
+var STYLES = `
+:host{all:initial;position:static;display:block;contain:none}
+*,*::before,*::after{box-sizing:border-box}
+.g-scope [hidden]{display:none!important}
+.g-scope{
+  --g-primary:#4f46e5;--g-bg:#ffffff;--g-text:#111827;--g-radius:12px;--g-font:Inter,system-ui,-apple-system,sans-serif;--g-z:2147483000;--g-overlay:.5;
+  --g-muted:color-mix(in srgb,var(--g-text) 62%,transparent);--g-border:color-mix(in srgb,var(--g-text) 12%,transparent);
+  --g-subtle:color-mix(in srgb,var(--g-text) 5%,transparent);--g-shadow:0 10px 40px rgba(0,0,0,.18),0 2px 8px rgba(0,0,0,.08);
+  --g-primary-text:#ffffff;
+  font-family:var(--g-font);font-size:14px;line-height:1.5;color:var(--g-text);-webkit-font-smoothing:antialiased;
+}
+.g-scope[data-theme="dark"]{--g-shadow:0 10px 40px rgba(0,0,0,.5),0 2px 8px rgba(0,0,0,.3)}
+.g-live{position:fixed;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
+.g-layer{position:fixed;inset:0;z-index:var(--g-z);pointer-events:none}
+.g-overlay{position:fixed;inset:0;background:rgba(0,0,0,var(--g-overlay));z-index:calc(var(--g-z) + 3);pointer-events:auto}
+.g-overlay.g-transparent{background:transparent}
+.g-spot-rect{position:fixed;background:rgba(0,0,0,var(--g-overlay));z-index:calc(var(--g-z) + 3);pointer-events:auto}
+.g-spot-ring{position:fixed;z-index:calc(var(--g-z) + 3);pointer-events:none;border-radius:6px;box-shadow:0 0 0 2px var(--g-primary),0 0 0 6px color-mix(in srgb,var(--g-primary) 30%,transparent)}
+.g-card{
+  position:fixed;z-index:calc(var(--g-z) + 4);pointer-events:auto;background:var(--g-bg);color:var(--g-text);border-radius:var(--g-radius);
+  box-shadow:var(--g-shadow);border:1px solid var(--g-border);width:min(360px,calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto;outline:none;
+}
+.g-card.g-modal{left:50%;top:50%;transform:translate(-50%,-50%);width:min(480px,calc(100vw - 32px))}
+.g-card.g-tooltip,.g-card.g-popover,.g-card.g-spotlight-card,.g-card.g-hotspot-card{top:0;left:0;width:min(320px,calc(100vw - 32px))}
+.g-card.g-slideout{width:min(360px,calc(100vw - 32px));margin:16px}
+.g-pos-bottom-right{right:0;bottom:0}.g-pos-bottom-left{left:0;bottom:0}.g-pos-top-right{right:0;top:0}.g-pos-top-left{left:0;top:0}
+.g-pos-center{left:50%;top:50%;transform:translate(-50%,-50%)}
+.g-pos-top{top:0;left:0;right:0}.g-pos-bottom{bottom:0;left:0;right:0}
+.g-banner{position:fixed;left:0;right:0;z-index:calc(var(--g-z) + 1);pointer-events:auto;background:var(--g-primary);color:var(--g-primary-text);padding:10px 48px 10px 16px;display:flex;align-items:center;gap:12px;font-size:14px;box-shadow:0 2px 10px rgba(0,0,0,.15);max-width:100vw}
+.g-banner .g-body{flex:1;min-width:0}
+.g-banner .g-body a{color:inherit;text-decoration:underline}
+.g-banner .g-close{color:inherit;right:8px;top:50%;transform:translateY(-50%)}
+.g-banner .g-btn{background:rgba(255,255,255,.18);color:inherit;border-color:transparent;min-height:36px}
+.g-banner.g-pos-top{top:0}.g-banner.g-pos-bottom{bottom:0}
+.g-inner{padding:20px}
+.g-close{position:absolute;top:8px;right:8px;width:40px;height:40px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;color:var(--g-muted);border-radius:999px;cursor:pointer;font:inherit;font-size:20px;line-height:1}
+.g-close:hover,.g-close:focus-visible{background:var(--g-subtle);color:var(--g-text);outline:none}
+.g-close:focus-visible,.g-btn:focus-visible,.g-task:focus-visible,.g-choice:focus-visible,.g-scale button:focus-visible,.g-launcher:focus-visible,.g-input:focus-visible,.g-rc-item:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+.g-image{display:block;width:100%;max-height:220px;object-fit:cover;border-radius:var(--g-radius) var(--g-radius) 0 0}
+.g-title{margin:0 28px 6px 0;font-size:16px;font-weight:600;line-height:1.3}
+.g-body{font-size:14px;color:var(--g-text)}
+.g-body p{margin:0 0 8px}.g-body p:last-child{margin-bottom:0}
+.g-body ul,.g-body ol{margin:6px 0;padding-left:20px}
+.g-body a{color:var(--g-primary)}
+.g-body img{max-width:100%;height:auto;border-radius:6px}
+.g-body code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;background:var(--g-subtle);padding:1px 4px;border-radius:4px}
+.g-body pre{background:var(--g-subtle);padding:10px;border-radius:6px;overflow:auto}
+.g-body blockquote{margin:6px 0;padding-left:10px;border-left:3px solid var(--g-border);color:var(--g-muted)}
+.g-footer{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
+.g-progress{font-size:12px;color:var(--g-muted);margin-right:auto}
+.g-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;padding:8px 14px;border-radius:calc(var(--g-radius) * .66);border:1px solid transparent;font:inherit;font-size:14px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .15s,color .15s,border-color .15s}
+.g-btn-primary{background:var(--g-primary);color:var(--g-primary-text)}
+.g-btn-primary:hover{filter:brightness(1.08)}
+.g-btn-secondary{background:var(--g-subtle);color:var(--g-text);border-color:var(--g-border)}
+.g-btn-secondary:hover{background:color-mix(in srgb,var(--g-text) 10%,transparent)}
+.g-btn-ghost{background:transparent;color:var(--g-muted)}
+.g-btn-ghost:hover{background:var(--g-subtle);color:var(--g-text)}
+.g-btn-link{background:transparent;color:var(--g-primary);padding-left:4px;padding-right:4px}
+.g-btn-link:hover{text-decoration:underline}
+.g-btn:disabled{opacity:.5;cursor:not-allowed}
+.g-arrow{position:absolute;width:12px;height:12px;background:var(--g-bg);transform:rotate(45deg);border:1px solid var(--g-border);z-index:-1}
+.g-hotspot{position:fixed;z-index:calc(var(--g-z) + 1);pointer-events:auto;border-radius:999px;background:var(--g-primary);border:2px solid #fff;box-shadow:0 0 0 2px color-mix(in srgb,var(--g-primary) 40%,transparent);cursor:pointer;padding:0;margin:0}
+.g-hotspot::after{content:"";position:absolute;inset:-4px;border-radius:999px;border:2px solid var(--g-primary);opacity:0}
+.g-hotspot.g-pulse::after{animation:g-pulse 1.8s ease-out infinite}
+.g-hotspot-hit{position:absolute;inset:-14px}
+.g-custom{position:fixed;z-index:calc(var(--g-z) + 4);pointer-events:auto;left:50%;top:50%;transform:translate(-50%,-50%);max-width:calc(100vw - 32px);max-height:calc(100vh - 32px);overflow:auto}
+/* animations */
+.g-scope[data-anim="fade"] .g-card,.g-scope[data-anim="fade"] .g-banner,.g-scope[data-anim="fade"] .g-panel{animation:g-fade .18s ease-out}
+.g-scope[data-anim="slide"] .g-card,.g-scope[data-anim="slide"] .g-panel{animation:g-slide .22s ease-out}
+.g-scope[data-anim="none"] *{animation:none!important;transition:none!important}
+@keyframes g-fade{from{opacity:0}to{opacity:1}}
+@keyframes g-slide{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
+@keyframes g-pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.2);opacity:0}}
+@media (prefers-reduced-motion:reduce){.g-scope *{animation:none!important;transition:none!important}}
+/* launcher + panel (checklist / resource center) */
+.g-launcher{position:fixed;z-index:calc(var(--g-z) + 1);pointer-events:auto;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:999px;border:0;background:var(--g-primary);color:var(--g-primary-text);font:inherit;font-size:14px;font-weight:600;cursor:pointer;box-shadow:var(--g-shadow);margin:16px}
+.g-launcher .g-ring{width:22px;height:22px;border-radius:999px;background:conic-gradient(#fff var(--g-pct,0%),rgba(255,255,255,.3) 0);display:inline-flex;align-items:center;justify-content:center;font-size:10px;position:relative}
+.g-launcher .g-ring::after{content:"";position:absolute;inset:3px;border-radius:999px;background:var(--g-primary)}
+.g-launcher .g-count{position:relative;z-index:1}
+.g-panel{position:fixed;z-index:calc(var(--g-z) + 2);pointer-events:auto;width:min(380px,calc(100vw - 32px));max-height:min(620px,calc(100vh - 100px));display:flex;flex-direction:column;background:var(--g-bg);color:var(--g-text);border-radius:var(--g-radius);box-shadow:var(--g-shadow);border:1px solid var(--g-border);margin:16px;bottom:60px;overflow:hidden}
+.g-panel-head{padding:16px 48px 12px 20px;border-bottom:1px solid var(--g-border);position:relative}
+.g-panel-title{margin:0;font-size:16px;font-weight:600}
+.g-panel-sub{margin:4px 0 0;font-size:12px;color:var(--g-muted)}
+.g-panel-body{overflow:auto;padding:8px 0;flex:1}
+.g-bar{height:6px;border-radius:999px;background:var(--g-subtle);overflow:hidden;margin-top:10px}
+.g-bar > span{display:block;height:100%;background:var(--g-primary);transition:width .3s}
+.g-task{display:flex;gap:12px;align-items:flex-start;width:100%;padding:12px 20px;border:0;background:transparent;text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:44px}
+.g-task:hover{background:var(--g-subtle)}
+.g-task[disabled]{cursor:not-allowed;opacity:.55}
+.g-task .g-check{flex:none;width:22px;height:22px;border-radius:999px;border:2px solid var(--g-border);display:inline-flex;align-items:center;justify-content:center;font-size:13px;margin-top:1px;color:#fff}
+.g-task.g-done .g-check{background:var(--g-primary);border-color:var(--g-primary)}
+.g-task.g-done .g-task-title{text-decoration:line-through;color:var(--g-muted)}
+.g-task-title{font-weight:500}
+.g-task-desc{font-size:12px;color:var(--g-muted);margin-top:2px}
+.g-panel-foot{padding:10px 20px;border-top:1px solid var(--g-border);display:flex;justify-content:flex-end;gap:8px}
+.g-complete{padding:28px 20px;text-align:center}
+.g-complete .g-title{margin-right:0;font-size:18px}
+/* survey */
+.g-question{margin-bottom:16px}
+.g-q-title{font-weight:600;margin:0 0 4px}
+.g-q-desc{font-size:12px;color:var(--g-muted);margin:0 0 8px}
+.g-scale{display:flex;gap:4px;flex-wrap:wrap}
+.g-scale button{min-width:34px;height:40px;flex:1;padding:0 4px;border-radius:6px;border:1px solid var(--g-border);background:var(--g-subtle);color:var(--g-text);font:inherit;cursor:pointer}
+.g-scale button[aria-pressed="true"],.g-scale button:hover{background:var(--g-primary);color:var(--g-primary-text);border-color:var(--g-primary)}
+.g-scale-labels{display:flex;justify-content:space-between;font-size:11px;color:var(--g-muted);margin-top:4px}
+.g-stars button,.g-thumbs button{font-size:22px;background:transparent;border:0;cursor:pointer;color:var(--g-muted);min-width:40px;height:40px;font:inherit}
+.g-stars button[aria-pressed="true"],.g-stars button.g-on{color:#f59e0b}
+.g-thumbs button[aria-pressed="true"]{color:var(--g-primary)}
+.g-choice{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--g-border);border-radius:8px;margin-bottom:6px;cursor:pointer;min-height:40px;font:inherit;background:transparent;color:inherit;width:100%;text-align:left}
+.g-choice[aria-checked="true"]{border-color:var(--g-primary);background:color-mix(in srgb,var(--g-primary) 8%,transparent)}
+.g-choice .g-dot{width:16px;height:16px;border-radius:999px;border:2px solid var(--g-border);flex:none}
+.g-choice.g-multi .g-dot{border-radius:4px}
+.g-choice[aria-checked="true"] .g-dot{background:var(--g-primary);border-color:var(--g-primary)}
+.g-input{width:100%;min-height:40px;padding:8px 10px;border:1px solid var(--g-border);border-radius:8px;background:var(--g-bg);color:var(--g-text);font:inherit;resize:vertical}
+.g-error{color:#dc2626;font-size:12px;margin-top:4px}
+/* resource center */
+.g-rc-search{padding:12px 20px 4px}
+.g-rc-section{padding:8px 20px 4px;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--g-muted);font-weight:600}
+.g-rc-item{display:flex;align-items:flex-start;gap:10px;width:100%;padding:10px 20px;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;min-height:44px;text-decoration:none}
+.g-rc-item:hover{background:var(--g-subtle)}
+.g-rc-item .g-rc-title{font-weight:500}
+.g-rc-item .g-rc-sum{font-size:12px;color:var(--g-muted);margin-top:2px}
+.g-rc-item .g-rc-icon{flex:none;width:20px;text-align:center;color:var(--g-primary)}
+.g-rc-article{padding:16px 20px}
+.g-rc-back{margin-bottom:8px}
+.g-rc-empty{padding:24px 20px;color:var(--g-muted);text-align:center}
+.g-faq-a{padding:0 20px 12px 50px;font-size:13px;color:var(--g-muted)}
+.g-faq-a[hidden]{display:none}
+/* authoring */
+.g-auth-bar{position:fixed;top:0;left:0;right:0;z-index:calc(var(--g-z) + 10);pointer-events:auto;display:flex;align-items:center;gap:12px;padding:8px 16px;background:#111827;color:#fff;font:500 13px/1.4 var(--g-font);box-shadow:0 2px 10px rgba(0,0,0,.3)}
+.g-auth-bar .g-dot-live{width:8px;height:8px;border-radius:999px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.3)}
+.g-auth-bar .g-spacer{flex:1}
+.g-auth-bar .g-btn{min-height:32px;padding:4px 12px;font-size:13px}
+.g-auth-bar .g-btn-secondary{background:rgba(255,255,255,.12);color:#fff;border-color:transparent}
+.g-auth-outline{position:fixed;z-index:calc(var(--g-z) + 9);pointer-events:none;border:2px solid var(--g-primary);background:color-mix(in srgb,var(--g-primary) 12%,transparent);border-radius:4px;transition:all .06s linear}
+.g-auth-label{position:absolute;left:-2px;top:-24px;background:var(--g-primary);color:#fff;font:600 11px/1 var(--g-font);padding:5px 7px;border-radius:4px;white-space:nowrap;max-width:320px;overflow:hidden;text-overflow:ellipsis}
+.g-auth-outline.g-picked{border-style:dashed;border-color:#22c55e;background:rgba(34,197,94,.12)}
+.g-auth-outline.g-picked .g-auth-label{background:#16a34a}
+.g-highlight{position:fixed;z-index:calc(var(--g-z) + 8);pointer-events:none;border:2px dashed #f59e0b;background:rgba(245,158,11,.12);border-radius:4px}
+@media (max-width:480px){.g-card.g-modal,.g-panel{width:calc(100vw - 32px)}.g-inner{padding:16px}}
+`;
+
+// src/host.ts
+var HOST_ID2 = "guidely-root";
+var current = null;
+var DEFAULT_THEME = {
+  primaryColor: "#4f46e5",
+  backgroundColor: "#ffffff",
+  textColor: "#111827",
+  borderRadius: 12,
+  fontFamily: "Inter, system-ui, -apple-system, sans-serif"
+};
+function ensureHost(doc = document) {
+  if (current && current.host.isConnected && current.host.ownerDocument === doc) return current;
+  let host = doc.getElementById(HOST_ID2);
+  if (!host) {
+    host = doc.createElement("div");
+    host.id = HOST_ID2;
+    host.setAttribute("data-guidely", "");
+    (doc.body || doc.documentElement).appendChild(host);
+  }
+  const shadow = host.shadowRoot ?? host.attachShadow({ mode: "open" });
+  if (!shadow.querySelector("style[data-g-base]")) {
+    const style = doc.createElement("style");
+    style.setAttribute("data-g-base", "");
+    style.textContent = STYLES;
+    shadow.appendChild(style);
+  }
+  let live = shadow.querySelector(".g-live");
+  if (!live) {
+    live = doc.createElement("div");
+    live.className = "g-live";
+    live.setAttribute("aria-live", "polite");
+    live.setAttribute("aria-atomic", "true");
+    shadow.appendChild(live);
+  }
+  const liveEl = live;
+  current = {
+    host,
+    shadow,
+    live: liveEl,
+    announce(text) {
+      liveEl.textContent = "";
+      setTimeout(() => {
+        liveEl.textContent = text;
+      }, 30);
+    },
+    destroy() {
+      host?.remove();
+      if (current?.host === host) current = null;
+    }
+  };
+  return current;
+}
+function destroyHost() {
+  current?.destroy();
+  const stray = typeof document !== "undefined" ? document.getElementById(HOST_ID2) : null;
+  stray?.remove();
+  current = null;
+}
+function prefersDark() {
+  try {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-color-scheme: dark)").matches;
+  } catch {
+    return false;
+  }
+}
+function prefersReducedMotion() {
+  try {
+    return typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  } catch {
+    return false;
+  }
+}
+function resolveTheme(theme, appearance) {
+  const t = { ...DEFAULT_THEME, ...theme || {} };
+  const a = appearance || {};
+  const requested = a.theme ?? "auto";
+  const mode = requested === "auto" ? prefersDark() ? "dark" : "light" : requested;
+  const dark = mode === "dark";
+  return {
+    primary: a.primaryColor || t.primaryColor,
+    bg: a.backgroundColor || (dark ? "#1f2937" : t.backgroundColor),
+    text: a.textColor || (dark ? "#f9fafb" : t.textColor),
+    radius: a.borderRadius ?? t.borderRadius,
+    font: a.fontFamily || t.fontFamily,
+    z: a.zIndex ?? 2147483e3,
+    overlay: a.overlayOpacity ?? 0.5,
+    mode,
+    animation: prefersReducedMotion() ? "none" : a.animation ?? "fade"
+  };
+}
+function applyTheme(el2, vars) {
+  el2.style.setProperty("--g-primary", vars.primary);
+  el2.style.setProperty("--g-bg", vars.bg);
+  el2.style.setProperty("--g-text", vars.text);
+  el2.style.setProperty("--g-radius", `${vars.radius}px`);
+  el2.style.setProperty("--g-font", vars.font);
+  el2.style.setProperty("--g-z", String(vars.z));
+  el2.style.setProperty("--g-overlay", String(vars.overlay));
+  el2.setAttribute("data-theme", vars.mode);
+  el2.setAttribute("data-anim", vars.animation);
+}
+function createScope(theme, appearance, doc = document) {
+  const handle = ensureHost(doc);
+  const el2 = doc.createElement("div");
+  el2.className = "g-scope";
+  const vars = resolveTheme(theme, appearance);
+  applyTheme(el2, vars);
+  handle.shadow.appendChild(el2);
+  let mq = null;
+  const onChange = () => applyTheme(el2, resolveTheme(theme, appearance));
+  if ((appearance?.theme ?? "auto") === "auto" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
+    try {
+      mq = window.matchMedia("(prefers-color-scheme: dark)");
+      mq.addEventListener?.("change", onChange);
+    } catch {
+      mq = null;
+    }
+  }
+  return {
+    el: el2,
+    vars,
+    destroy() {
+      mq?.removeEventListener?.("change", onChange);
+      el2.remove();
+    }
+  };
+}
+
+// src/position.ts
+var import_dom = require("@floating-ui/dom");
+function anchor(reference, floating, options = {}) {
+  const placement = options.placement ?? "auto";
+  const gap = options.offset ?? 10;
+  const middleware = [(0, import_dom.offset)(gap + (options.arrowEl ? 4 : 0))];
+  if (placement === "auto") middleware.push((0, import_dom.autoPlacement)({ padding: 16 }));
+  else middleware.push((0, import_dom.flip)({ padding: 16 }));
+  middleware.push((0, import_dom.shift)({ padding: 16 }));
+  if (options.arrowEl) middleware.push((0, import_dom.arrow)({ element: options.arrowEl, padding: 8 }));
+  let stopped = false;
+  const update = async () => {
+    if (stopped || !floating.isConnected) return;
+    try {
+      const result = await (0, import_dom.computePosition)(reference, floating, {
+        placement: placement === "auto" ? "bottom" : placement,
+        strategy: "fixed",
+        middleware
+      });
+      if (stopped) return;
+      floating.style.left = `${Math.round(result.x)}px`;
+      floating.style.top = `${Math.round(result.y)}px`;
+      floating.setAttribute("data-placement", result.placement);
+      if (options.arrowEl && result.middlewareData.arrow) {
+        const { x, y } = result.middlewareData.arrow;
+        const side = result.placement.split("-")[0];
+        const staticSide = { top: "bottom", right: "left", bottom: "top", left: "right" }[side];
+        Object.assign(options.arrowEl.style, {
+          left: x != null ? `${x}px` : "",
+          top: y != null ? `${y}px` : "",
+          right: "",
+          bottom: "",
+          [staticSide]: "-7px"
+        });
+      }
+      options.onUpdate?.(result.placement);
+    } catch {
+    }
+  };
+  let stopAuto = null;
+  try {
+    stopAuto = (0, import_dom.autoUpdate)(reference, floating, () => void update(), { animationFrame: false });
+  } catch {
+    void update();
+  }
+  return () => {
+    stopped = true;
+    stopAuto?.();
+  };
+}
+function trackRect(el2, cb) {
+  let raf = 0;
+  let stopped = false;
+  const run = () => {
+    if (stopped) return;
+    cb(el2.getBoundingClientRect());
+  };
+  const schedule = () => {
+    if (stopped) return;
+    if (typeof requestAnimationFrame === "function") {
+      cancelAnimationFrame(raf);
+      raf = requestAnimationFrame(run);
+    } else run();
+  };
+  run();
+  const win = el2.ownerDocument.defaultView;
+  win?.addEventListener("scroll", schedule, true);
+  win?.addEventListener("resize", schedule);
+  let ro = null;
+  if (typeof ResizeObserver !== "undefined") {
+    try {
+      ro = new ResizeObserver(schedule);
+      ro.observe(el2);
+      if (el2.ownerDocument.documentElement) ro.observe(el2.ownerDocument.documentElement);
+    } catch {
+      ro = null;
+    }
+  }
+  const interval = setInterval(run, 500);
+  return () => {
+    stopped = true;
+    win?.removeEventListener("scroll", schedule, true);
+    win?.removeEventListener("resize", schedule);
+    ro?.disconnect();
+    clearInterval(interval);
+    if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(raf);
+  };
+}
+
+// src/render.ts
+var FOCUSABLE = "button:not([disabled]),[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex='-1'])";
+var uid = 0;
+var nextId = (p) => `g-${p}-${++uid}`;
+function h(doc, tag, className, text) {
+  const el2 = doc.createElement(tag);
+  if (className) el2.className = className;
+  if (text != null) el2.textContent = text;
+  return el2;
+}
+function buildButtons(doc, step, onButton) {
+  return step.buttons.map((b) => {
+    const btn = h(doc, "button", `g-btn g-btn-${b.variant}`, b.label);
+    btn.type = "button";
+    btn.setAttribute("data-action", b.action);
+    btn.addEventListener("click", (e) => {
+      e.preventDefault();
+      onButton(b);
+    });
+    return btn;
+  });
+}
+function buildCard(doc, opts, extraClass) {
+  const { step } = opts;
+  const card = h(doc, "div", `g-card ${extraClass}`);
+  card.tabIndex = -1;
+  card.setAttribute("data-step-id", step.id);
+  if (step.width) card.style.width = `min(${step.width}px, calc(100vw - 32px))`;
+  const titleId = nextId("title");
+  const bodyId = nextId("body");
+  if (step.imageUrl) {
+    const img = h(doc, "img", "g-image");
+    img.src = step.imageUrl;
+    img.alt = "";
+    card.appendChild(img);
+  }
+  const inner = h(doc, "div", "g-inner");
+  if (step.showClose) {
+    const close = h(doc, "button", "g-close", "\xD7");
+    close.type = "button";
+    close.setAttribute("aria-label", "Close");
+    close.addEventListener("click", (e) => {
+      e.preventDefault();
+      opts.onClose();
+    });
+    card.appendChild(close);
+  }
+  if (step.title) {
+    const t = h(doc, "h2", "g-title", step.title);
+    t.id = titleId;
+    inner.appendChild(t);
+  }
+  if (step.body) {
+    const b = h(doc, "div", "g-body");
+    b.id = bodyId;
+    setSanitizedHtml(b, step.body);
+    inner.appendChild(b);
+  }
+  const buttons = buildButtons(doc, step, opts.onButton);
+  if (buttons.length || step.showProgress && opts.total > 1) {
+    const footer = h(doc, "div", "g-footer");
+    if (step.showProgress && opts.total > 1) footer.appendChild(h(doc, "span", "g-progress", `${opts.index + 1} of ${opts.total}`));
+    buttons.forEach((b) => footer.appendChild(b));
+    inner.appendChild(footer);
+  }
+  card.appendChild(inner);
+  if (step.title) card.setAttribute("aria-labelledby", titleId);
+  if (step.body) card.setAttribute("aria-describedby", bodyId);
+  return { card, inner, titleId, bodyId };
+}
+function focusables(root) {
+  return Array.from(root.querySelectorAll(FOCUSABLE));
+}
+function installKeyboard(card, step, trap, onClose) {
+  const onKey = (e) => {
+    if (e.key === "Escape" && step.showClose) {
+      e.stopPropagation();
+      onClose();
+      return;
+    }
+    if (trap && e.key === "Tab") {
+      const items = focusables(card);
+      if (!items.length) {
+        e.preventDefault();
+        card.focus();
+        return;
+      }
+      const first = items[0];
+      const last = items[items.length - 1];
+      const active = card.getRootNode().activeElement;
+      if (e.shiftKey && (active === first || active === card)) {
+        e.preventDefault();
+        last.focus();
+      } else if (!e.shiftKey && active === last) {
+        e.preventDefault();
+        first.focus();
+      }
+    }
+  };
+  card.addEventListener("keydown", onKey);
+  return () => card.removeEventListener("keydown", onKey);
+}
+function focusInto(card) {
+  const doc = card.ownerDocument;
+  const previous = doc.activeElement;
+  const primary = card.querySelector(".g-btn-primary") || focusables(card)[0] || card;
+  try {
+    primary.focus({ preventScroll: true });
+  } catch {
+  }
+  return () => {
+    try {
+      if (previous && previous.isConnected && typeof previous.focus === "function") previous.focus({ preventScroll: true });
+    } catch {
+    }
+  };
+}
+function overlayEl(doc, opts, transparent = false) {
+  const overlay = h(doc, "div", `g-overlay${transparent ? " g-transparent" : ""}`);
+  if (opts.step.dismissOnOutsideClick) overlay.addEventListener("click", () => opts.onClose());
+  return overlay;
+}
+function positionClass(position) {
+  return `g-pos-${position}`;
+}
+function renderModal(doc, opts) {
+  const cleanups = [];
+  const { card } = buildCard(doc, opts, "g-modal");
+  card.setAttribute("role", "dialog");
+  card.setAttribute("aria-modal", "true");
+  const wrapper = h(doc, "div", "g-step");
+  if (opts.step.showOverlay || opts.asModal) wrapper.appendChild(overlayEl(doc, opts));
+  else if (opts.step.dismissOnOutsideClick) wrapper.appendChild(overlayEl(doc, opts, true));
+  wrapper.appendChild(card);
+  opts.scope.appendChild(wrapper);
+  cleanups.push(installKeyboard(card, opts.step, true, opts.onClose));
+  cleanups.push(focusInto(card));
+  return { el: wrapper, card, destroy: () => cleanupAll(cleanups, wrapper) };
+}
+function cleanupAll(cleanups, el2) {
+  cleanups.splice(0).forEach((fn) => {
+    try {
+      fn();
+    } catch {
+    }
+  });
+  el2.remove();
+}
+function setTargetDescribedBy(target, id) {
+  const prev = target.getAttribute("aria-describedby");
+  try {
+    target.setAttribute("aria-describedby", prev ? `${prev} ${id}` : id);
+  } catch {
+    return () => {
+    };
+  }
+  return () => {
+    if (prev) target.setAttribute("aria-describedby", prev);
+    else target.removeAttribute("aria-describedby");
+  };
+}
+function renderTooltip(doc, opts, kind) {
+  const target = opts.target;
+  if (!target) return renderModal(doc, { ...opts, asModal: true });
+  const cleanups = [];
+  const { card } = buildCard(doc, opts, `g-${kind}`);
+  const arrowEl = h(doc, "div", "g-arrow");
+  card.appendChild(arrowEl);
+  card.setAttribute("role", kind === "tooltip" ? "tooltip" : "dialog");
+  card.id = nextId(kind);
+  const wrapper = h(doc, "div", "g-step");
+  if (opts.step.showOverlay) wrapper.appendChild(overlayEl(doc, opts));
+  else if (opts.step.dismissOnOutsideClick) wrapper.appendChild(overlayEl(doc, opts, true));
+  wrapper.appendChild(card);
+  opts.scope.appendChild(wrapper);
+  if (opts.step.target?.scrollIntoView !== false) scrollTo(target);
+  cleanups.push(anchor(target, card, { placement: opts.step.placement, offset: opts.step.offset, arrowEl }));
+  cleanups.push(setTargetDescribedBy(target, card.id));
+  cleanups.push(installKeyboard(card, opts.step, false, opts.onClose));
+  cleanups.push(focusInto(card));
+  return { el: wrapper, card, destroy: () => cleanupAll(cleanups, wrapper) };
+}
+function scrollTo(target) {
+  try {
+    target.scrollIntoView?.({ block: "nearest", inline: "nearest", behavior: "auto" });
+  } catch {
+  }
+}
+function renderSpotlight(doc, opts) {
+  const target = opts.target;
+  if (!target) return renderModal(doc, { ...opts, asModal: true });
+  const cleanups = [];
+  const wrapper = h(doc, "div", "g-step");
+  const pad = opts.step.spotlightPadding ?? 6;
+  const rects = ["top", "left", "right", "bottom"].map((side) => {
+    const r = h(doc, "div", `g-spot-rect g-spot-${side}`);
+    if (opts.step.dismissOnOutsideClick) r.addEventListener("click", () => opts.onClose());
+    wrapper.appendChild(r);
+    return r;
+  });
+  const ring = h(doc, "div", "g-spot-ring");
+  wrapper.appendChild(ring);
+  const { card } = buildCard(doc, opts, "g-spotlight-card");
+  card.setAttribute("role", "dialog");
+  const arrowEl = h(doc, "div", "g-arrow");
+  card.appendChild(arrowEl);
+  wrapper.appendChild(card);
+  opts.scope.appendChild(wrapper);
+  if (opts.step.target?.scrollIntoView !== false) scrollTo(target);
+  const win = doc.defaultView;
+  const layout = (r) => {
+    const vw = win?.innerWidth ?? 0;
+    const vh = win?.innerHeight ?? 0;
+    const x = Math.max(0, r.left - pad);
+    const y = Math.max(0, r.top - pad);
+    const w = Math.min(vw, r.right + pad) - x;
+    const hgt = Math.min(vh, r.bottom + pad) - y;
+    const [top, left, right, bottom] = rects;
+    Object.assign(top.style, { left: "0", top: "0", width: "100%", height: `${y}px` });
+    Object.assign(left.style, { left: "0", top: `${y}px`, width: `${x}px`, height: `${hgt}px` });
+    Object.assign(right.style, { left: `${x + w}px`, top: `${y}px`, width: `${Math.max(0, vw - x - w)}px`, height: `${hgt}px` });
+    Object.assign(bottom.style, { left: "0", top: `${y + hgt}px`, width: "100%", height: `${Math.max(0, vh - y - hgt)}px` });
+    Object.assign(ring.style, { left: `${x}px`, top: `${y}px`, width: `${w}px`, height: `${hgt}px` });
+  };
+  cleanups.push(trackRect(target, layout));
+  cleanups.push(anchor(target, card, { placement: opts.step.placement, offset: opts.step.offset + pad, arrowEl }));
+  cleanups.push(installKeyboard(card, opts.step, false, opts.onClose));
+  cleanups.push(focusInto(card));
+  return { el: wrapper, card, destroy: () => cleanupAll(cleanups, wrapper) };
+}
+function renderHotspot(doc, opts) {
+  const target = opts.target;
+  if (!target) return renderModal(doc, { ...opts, asModal: true });
+  const cleanups = [];
+  const cfg = opts.step.hotspot ?? { size: 14, pulse: true, openOn: "click" };
+  const wrapper = h(doc, "div", "g-step");
+  const dot = h(doc, "button", `g-hotspot${cfg.pulse ? " g-pulse" : ""}`);
+  dot.type = "button";
+  dot.setAttribute("aria-label", opts.step.title || "Open hint");
+  dot.setAttribute("aria-expanded", "false");
+  dot.style.width = `${cfg.size}px`;
+  dot.style.height = `${cfg.size}px`;
+  dot.appendChild(h(doc, "span", "g-hotspot-hit"));
+  wrapper.appendChild(dot);
+  opts.scope.appendChild(wrapper);
+  cleanups.push(trackRect(target, (r) => {
+    dot.style.left = `${Math.round(r.right - cfg.size / 2)}px`;
+    dot.style.top = `${Math.round(r.top - cfg.size / 2)}px`;
+  }));
+  let card = null;
+  let stopAnchor = null;
+  let stopKeys = null;
+  const close = () => {
+    stopAnchor?.();
+    stopKeys?.();
+    card?.remove();
+    card = null;
+    dot.setAttribute("aria-expanded", "false");
+  };
+  const open = () => {
+    if (card) return;
+    const built = buildCard(doc, { ...opts, onClose: () => opts.onClose() }, "g-hotspot-card");
+    card = built.card;
+    card.setAttribute("role", "dialog");
+    const arrowEl = h(doc, "div", "g-arrow");
+    card.appendChild(arrowEl);
+    wrapper.appendChild(card);
+    stopAnchor = anchor(target, card, { placement: opts.step.placement, offset: opts.step.offset, arrowEl });
+    stopKeys = installKeyboard(card, opts.step, false, close);
+    dot.setAttribute("aria-expanded", "true");
+    opts.onOpen?.();
+    if (cfg.openOn === "click") focusInto(card);
+  };
+  dot.addEventListener("click", (e) => {
+    e.preventDefault();
+    if (card) close();
+    else open();
+  });
+  if (cfg.openOn === "hover") {
+    dot.addEventListener("mouseenter", open);
+    dot.addEventListener("focus", open);
+  }
+  cleanups.push(close);
+  return { el: wrapper, card: dot, destroy: () => cleanupAll(cleanups, wrapper) };
+}
+function renderBanner(doc, opts) {
+  const { step } = opts;
+  const cleanups = [];
+  const pos = step.position === "top" || step.placement === "top" || step.position.startsWith("top") ? "top" : "bottom";
+  const banner = h(doc, "div", `g-banner g-pos-${pos}`);
+  banner.setAttribute("role", "status");
+  banner.setAttribute("data-step-id", step.id);
+  const body = h(doc, "div", "g-body");
+  if (step.title) body.appendChild(h(doc, "strong", "", `${step.title} `));
+  const text = h(doc, "span");
+  setSanitizedHtml(text, step.body);
+  body.appendChild(text);
+  banner.appendChild(body);
+  buildButtons(doc, step, opts.onButton).forEach((b) => banner.appendChild(b));
+  if (step.showClose) {
+    const close = h(doc, "button", "g-close", "\xD7");
+    close.type = "button";
+    close.setAttribute("aria-label", "Dismiss");
+    close.addEventListener("click", () => opts.onClose());
+    banner.appendChild(close);
+  }
+  opts.scope.appendChild(banner);
+  cleanups.push(installKeyboard(banner, step, false, opts.onClose));
+  return { el: banner, card: banner, destroy: () => cleanupAll(cleanups, banner) };
+}
+function renderSlideout(doc, opts) {
+  const cleanups = [];
+  const pos = opts.step.position === "top" ? "top-right" : opts.step.position === "bottom" ? "bottom-right" : opts.step.position;
+  const { card } = buildCard(doc, opts, `g-slideout ${positionClass(pos)}`);
+  card.setAttribute("role", "dialog");
+  const wrapper = h(doc, "div", "g-step");
+  if (opts.step.dismissOnOutsideClick) wrapper.appendChild(overlayEl(doc, opts, true));
+  wrapper.appendChild(card);
+  opts.scope.appendChild(wrapper);
+  cleanups.push(installKeyboard(card, opts.step, false, opts.onClose));
+  cleanups.push(focusInto(card));
+  return { el: wrapper, card, destroy: () => cleanupAll(cleanups, wrapper) };
+}
+function renderCustom(doc, opts) {
+  const cleanups = [];
+  const wrapper = h(doc, "div", "g-step");
+  if (opts.step.showOverlay) wrapper.appendChild(overlayEl(doc, opts));
+  const el2 = h(doc, "div", "g-custom");
+  el2.tabIndex = -1;
+  el2.setAttribute("data-step-id", opts.step.id);
+  setSanitizedHtml(el2, opts.step.customHtml || opts.step.body || "");
+  const onClick = (e) => {
+    const t = e.target?.closest?.("[data-g-action]");
+    const action = t?.getAttribute("data-g-action");
+    if (!action) return;
+    e.preventDefault();
+    if (action === "dismiss") opts.onClose();
+    else opts.onButton({ id: `custom-${action}`, label: action, action, variant: "primary", value: t?.getAttribute("data-g-value") || void 0 });
+  };
+  el2.addEventListener("click", onClick);
+  wrapper.appendChild(el2);
+  opts.scope.appendChild(wrapper);
+  cleanups.push(installKeyboard(el2, opts.step, false, opts.onClose));
+  cleanups.push(focusInto(el2));
+  return { el: wrapper, card: el2, destroy: () => cleanupAll(cleanups, wrapper) };
+}
+function renderStep(opts) {
+  const doc = opts.scope.ownerDocument;
+  const type = opts.asModal ? "modal" : opts.step.type;
+  switch (type) {
+    case "tooltip":
+      return renderTooltip(doc, opts, "tooltip");
+    case "popover":
+      return renderTooltip(doc, opts, "popover");
+    case "spotlight":
+      return renderSpotlight(doc, opts);
+    case "hotspot":
+      return renderHotspot(doc, opts);
+    case "banner":
+      return renderBanner(doc, opts);
+    case "slideout":
+      return renderSlideout(doc, opts);
+    case "custom":
+      return renderCustom(doc, opts);
+    case "modal":
+    case "checklist":
+    case "survey":
+    default:
+      return renderModal(doc, opts);
+  }
+}
+function isAnchoredStep(step) {
+  return (step.type === "tooltip" || step.type === "popover" || step.type === "spotlight" || step.type === "hotspot") && !!step.target && step.target.selectors.length > 0;
+}
+
+// src/controller.ts
+var import_runtime3 = require("@guidelytech/shared/runtime");
+function noop() {
+}
+function runGuide(guide, options = {}) {
+  const doc = options.doc ?? (options.container?.ownerDocument || document);
+  const steps = guide.config.steps;
+  const total = steps.length;
+  const onEvent = options.onEvent ?? noop;
+  const onError = options.onError ?? noop;
+  const getCtx = () => (typeof options.ctx === "function" ? options.ctx() : options.ctx) ?? null;
+  const currentUrl = options.currentUrl ?? (() => typeof location !== "undefined" ? location.href : "");
+  let status = "idle";
+  let index = -1;
+  let pendingIndex = -1;
+  let view = null;
+  const stepCleanups = [];
+  let started = false;
+  let stepDone = false;
+  let ended = false;
+  const history = [];
+  let scope = null;
+  const emit = (name, step, stepIndex, properties) => {
+    try {
+      onEvent({ name, guideId: guide.id, guideKey: guide.key, guideVersion: guide.version, stepId: step?.id, stepIndex, properties });
+    } catch (err) {
+      onError(err);
+    }
+  };
+  const announce = (text) => {
+    try {
+      ensureHost(doc).announce(text);
+    } catch {
+    }
+  };
+  const getScope = () => {
+    if (options.container) return options.container;
+    if (!scope) scope = createScope(options.theme, guide.config.appearance, doc);
+    return scope.el;
+  };
+  const clearStep = () => {
+    stepCleanups.splice(0).forEach((fn) => {
+      try {
+        fn();
+      } catch {
+      }
+    });
+    try {
+      view?.destroy();
+    } catch (err) {
+      onError(err);
+    }
+    view = null;
+    stepDone = false;
+  };
+  const end = (reason) => {
+    if (ended) return;
+    ended = true;
+    const step = steps[index];
+    clearStep();
+    status = "ended";
+    if (reason === "completed") emit("guide_completed", step, index);
+    else if (reason === "dismissed") emit("guide_dismissed", step, index);
+    else if (reason === "skipped") emit("guide_skipped", step, index);
+    scope?.destroy();
+    scope = null;
+    try {
+      options.onEnd?.(reason);
+    } catch (err) {
+      onError(err);
+    }
+  };
+  const completeStep = () => {
+    if (stepDone || index < 0) return;
+    stepDone = true;
+    emit("step_completed", steps[index], index);
+  };
+  const goNext = (overrideStepId) => {
+    const step = steps[index];
+    let target = -1;
+    const ctx = getCtx();
+    if (step && ctx) {
+      for (const branch of step.branches) {
+        if ((0, import_runtime3.evaluateRules)(branch.when, ctx)) {
+          target = steps.findIndex((s) => s.id === branch.goTo);
+          if (target >= 0) break;
+        }
+      }
+    }
+    if (target < 0 && overrideStepId) target = steps.findIndex((s) => s.id === overrideStepId);
+    if (target < 0) target = index + 1;
+    if (target >= total) return end("completed");
+    history.push(index);
+    showStep(target, 1);
+  };
+  const advance = () => {
+    if (ended) return;
+    completeStep();
+    goNext();
+  };
+  const handleButton = (b) => {
+    try {
+      switch (b.action) {
+        case "next":
+          completeStep();
+          goNext(b.value);
+          break;
+        case "back":
+          controller.back();
+          break;
+        case "dismiss":
+          end("dismissed");
+          break;
+        case "complete":
+          completeStep();
+          end("completed");
+          break;
+        case "skip":
+          end("skipped");
+          break;
+        case "url": {
+          completeStep();
+          const url = b.value || "";
+          if (options.onNavigate) options.onNavigate(url, b.newTab);
+          else if (b.newTab) window.open(url, "_blank", "noopener");
+          else location.assign(url);
+          if (index + 1 >= total) end("completed");
+          else goNext();
+          break;
+        }
+        case "start_guide":
+          completeStep();
+          end("completed");
+          options.onAction?.("start_guide", b.value, b);
+          break;
+        case "event":
+          options.onAction?.("event", b.value, b);
+          break;
+        case "open_resource_center":
+          options.onAction?.("open_resource_center", b.value, b);
+          break;
+        default:
+          break;
+      }
+    } catch (err) {
+      onError(err);
+    }
+  };
+  const setupAdvance = (step) => {
+    const modes = step.advanceOn === "any" ? ["element_click", "element_visible", "event", "delay"] : [step.advanceOn];
+    for (const mode of modes) {
+      if (mode === "element_click" && step.advanceValue) {
+        const selector = step.advanceValue;
+        const handler = (e) => {
+          const t = e.target;
+          try {
+            if (t && typeof t.closest === "function" && t.closest(selector)) advance();
+          } catch {
+          }
+        };
+        doc.addEventListener("click", handler, true);
+        doc.addEventListener("focusin", handler, true);
+        stepCleanups.push(() => {
+          doc.removeEventListener("click", handler, true);
+          doc.removeEventListener("focusin", handler, true);
+        });
+      } else if (mode === "element_visible" && step.advanceValue) {
+        const ac = new AbortController();
+        stepCleanups.push(() => ac.abort());
+        waitForTarget([{ kind: "css", value: step.advanceValue }], { timeoutMs: 0, signal: ac.signal, root: doc }).then((el2) => {
+          if (ac.signal.aborted) return;
+          if (typeof IntersectionObserver === "undefined") return advance();
+          const io = new IntersectionObserver((entries) => {
+            if (entries.some((en) => en.isIntersecting)) {
+              io.disconnect();
+              advance();
+            }
+          });
+          io.observe(el2);
+          stepCleanups.push(() => io.disconnect());
+        }).catch(noop);
+      } else if (mode === "event" && step.advanceValue && options.eventBus) {
+        stepCleanups.push(options.eventBus.on(step.advanceValue, advance));
+      } else if (mode === "delay") {
+        const t = setTimeout(advance, step.advanceDelayMs ?? 3e3);
+        stepCleanups.push(() => clearTimeout(t));
+      }
+    }
+  };
+  const render = (step, target, asModal = false) => {
+    if (ended) return;
+    status = "running";
+    try {
+      view = renderStep({
+        scope: getScope(),
+        step,
+        index,
+        total,
+        target,
+        asModal,
+        onButton: handleButton,
+        onClose: () => end("dismissed"),
+        announce
+      });
+    } catch (err) {
+      onError(err);
+      view = null;
+      if (index + 1 < total) return goNext();
+      return end("skipped");
+    }
+    if (!started) {
+      started = true;
+      emit("guide_started", step, index);
+    }
+    emit("step_viewed", step, index, asModal ? { fallback: "show_as_modal" } : void 0);
+    announce(step.title ? `${step.title}. Step ${index + 1} of ${total}` : `Step ${index + 1} of ${total}`);
+    setupAdvance(step);
+  };
+  const applyFallback = (step, direction) => {
+    const fallback = step.target?.fallback ?? "skip";
+    emit("step_viewed", step, index, { fallback, targetMissing: true });
+    if (fallback === "show_as_modal") return render(step, null, true);
+    if (fallback === "end_guide") return end("skipped");
+    const nextIndex = index + direction;
+    if (nextIndex < 0) return showStep(0, 1);
+    if (nextIndex >= total) return end("completed");
+    showStep(nextIndex, direction);
+  };
+  function showStep(i, direction = 1) {
+    if (ended) return;
+    clearStep();
+    if (i < 0) i = 0;
+    if (i >= total) return end("completed");
+    index = i;
+    const step = steps[i];
+    const ctx = getCtx();
+    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime3.evaluateRules)(step.targeting, ctx)) {
+      const nextIndex = i + direction;
+      if (nextIndex >= total) return end("completed");
+      if (nextIndex < 0) return;
+      return showStep(nextIndex, direction);
+    }
+    if (step.url && !urlMatches(step.url, currentUrl())) {
+      status = "waiting_url";
+      pendingIndex = i;
+      return;
+    }
+    pendingIndex = -1;
+    if (isAnchoredStep(step) && step.target) {
+      status = "waiting_target";
+      const ac = new AbortController();
+      stepCleanups.push(() => ac.abort());
+      const timeoutMs = step.target.fallback === "wait" ? 0 : step.target.waitMs;
+      waitForTarget(step.target, { timeoutMs, signal: ac.signal, root: doc }).then((el2) => {
+        if (ac.signal.aborted || ended) return;
+        render(step, el2);
+      }).catch((err) => {
+        if (ac.signal.aborted || ended) return;
+        if (err && err.name === "AbortError") return;
+        applyFallback(step, direction);
+      });
+      return;
+    }
+    render(step, null);
+  }
+  const controller = {
+    guide,
+    start() {
+      if (status !== "idle") return;
+      emit("guide_viewed");
+      if (total === 0) return end("completed");
+      let startIndex = options.startAtStep ? steps.findIndex((s) => s.id === options.startAtStep) : 0;
+      if (startIndex < 0) startIndex = 0;
+      showStep(startIndex, 1);
+    },
+    next() {
+      if (ended || index < 0) return;
+      completeStep();
+      goNext();
+    },
+    back() {
+      if (ended) return;
+      const prev = history.pop();
+      if (prev == null) {
+        if (index > 0) showStep(index - 1, -1);
+        return;
+      }
+      showStep(prev, -1);
+    },
+    goTo(stepId) {
+      const i = steps.findIndex((s) => s.id === stepId);
+      if (i >= 0 && !ended) {
+        if (index >= 0) history.push(index);
+        showStep(i, 1);
+      }
+    },
+    dismiss: () => end("dismissed"),
+    complete() {
+      completeStep();
+      end("completed");
+    },
+    skip: () => end("skipped"),
+    resume() {
+      if (ended) return;
+      if (status === "waiting_url" && pendingIndex >= 0) {
+        showStep(pendingIndex, 1);
+        return;
+      }
+      const step = steps[index];
+      if (step?.url && status === "running" && !urlMatches(step.url, currentUrl())) showStep(index, 1);
+    },
+    destroy() {
+      if (ended) return;
+      ended = true;
+      clearStep();
+      status = "ended";
+      scope?.destroy();
+      scope = null;
+      try {
+        options.onEnd?.("destroyed");
+      } catch (err) {
+        onError(err);
+      }
+    },
+    getState: () => ({ status, stepId: steps[index]?.id ?? null, stepIndex: index, total })
+  };
+  return controller;
+}
+
+// src/checklist.ts
+function isChecklistComplete(config, progress) {
+  const done = new Set(progress.completedTaskIds);
+  return config.tasks.filter((t) => t.required).every((t) => done.has(t.id));
+}
+function renderChecklist(options) {
+  const { scope, config } = options;
+  const doc = scope.ownerDocument;
+  let progress = options.progress ?? { completedTaskIds: [] };
+  let open = options.open ?? config.autoOpen;
+  const pos = `g-pos-${config.position}`;
+  const root = doc.createElement("div");
+  root.className = "g-checklist";
+  const launcher = doc.createElement("button");
+  launcher.type = "button";
+  launcher.className = `g-launcher ${pos}`;
+  launcher.setAttribute("aria-expanded", "false");
+  const ring = doc.createElement("span");
+  ring.className = "g-ring";
+  const count = doc.createElement("span");
+  count.className = "g-count";
+  ring.appendChild(count);
+  launcher.appendChild(ring);
+  const label = doc.createElement("span");
+  label.textContent = config.launcherLabel;
+  launcher.appendChild(label);
+  const panel = doc.createElement("div");
+  panel.className = `g-panel ${pos}`;
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", config.launcherLabel);
+  panel.hidden = true;
+  const head = doc.createElement("div");
+  head.className = "g-panel-head";
+  const title = doc.createElement("h2");
+  title.className = "g-panel-title";
+  title.textContent = config.launcherLabel;
+  const sub = doc.createElement("p");
+  sub.className = "g-panel-sub";
+  const bar = doc.createElement("div");
+  bar.className = "g-bar";
+  const fill = doc.createElement("span");
+  bar.appendChild(fill);
+  const close = doc.createElement("button");
+  close.type = "button";
+  close.className = "g-close";
+  close.textContent = "\xD7";
+  close.setAttribute("aria-label", "Minimize checklist");
+  head.append(title, sub, bar, close);
+  const body = doc.createElement("div");
+  body.className = "g-panel-body";
+  const foot = doc.createElement("div");
+  foot.className = "g-panel-foot";
+  panel.append(head, body, foot);
+  root.append(launcher, panel);
+  scope.appendChild(root);
+  const setOpen = (v) => {
+    open = v;
+    panel.hidden = !v;
+    launcher.setAttribute("aria-expanded", String(v));
+    if (v) {
+      (panel.querySelector(".g-task:not([disabled])") || close).focus?.({ preventScroll: true });
+      options.onOpen?.();
+    } else options.onClose?.();
+  };
+  const renderTasks = () => {
+    const done = new Set(progress.completedTaskIds);
+    const doneCount = config.tasks.filter((t) => done.has(t.id)).length;
+    const pct = config.tasks.length ? Math.round(doneCount / config.tasks.length * 100) : 0;
+    count.textContent = `${doneCount}/${config.tasks.length}`;
+    launcher.style.setProperty("--g-pct", `${pct}%`);
+    launcher.setAttribute("aria-label", `${config.launcherLabel}: ${doneCount} of ${config.tasks.length} tasks completed`);
+    sub.textContent = `${doneCount} of ${config.tasks.length} completed`;
+    fill.style.width = `${pct}%`;
+    bar.setAttribute("role", "progressbar");
+    bar.setAttribute("aria-valuenow", String(pct));
+    bar.setAttribute("aria-valuemin", "0");
+    bar.setAttribute("aria-valuemax", "100");
+    body.textContent = "";
+    foot.textContent = "";
+    const complete = isChecklistComplete(config, progress);
+    if (complete) {
+      const wrap = doc.createElement("div");
+      wrap.className = "g-complete";
+      const t = doc.createElement("h3");
+      t.className = "g-title";
+      t.textContent = config.completionTitle;
+      const b = doc.createElement("div");
+      b.className = "g-body";
+      setSanitizedHtml(b, config.completionBody);
+      wrap.append(t, b);
+      body.appendChild(wrap);
+    }
+    const list = doc.createElement("div");
+    list.setAttribute("role", "list");
+    let locked = false;
+    config.tasks.forEach((task, i) => {
+      const isDone = done.has(task.id);
+      const btn = doc.createElement("button");
+      btn.type = "button";
+      btn.className = `g-task${isDone ? " g-done" : ""}`;
+      btn.setAttribute("role", "listitem");
+      btn.setAttribute("data-task-id", task.id);
+      btn.setAttribute("aria-checked", String(isDone));
+      if (config.ordered && locked && !isDone) {
+        btn.disabled = true;
+        btn.title = "Complete the previous task first";
+      }
+      if (config.ordered && !isDone) locked = true;
+      const check = doc.createElement("span");
+      check.className = "g-check";
+      check.setAttribute("aria-hidden", "true");
+      check.textContent = isDone ? "\u2713" : "";
+      const text = doc.createElement("span");
+      const tt = doc.createElement("div");
+      tt.className = "g-task-title";
+      tt.textContent = `${i + 1}. ${task.title}`;
+      text.appendChild(tt);
+      if (task.description) {
+        const td = doc.createElement("div");
+        td.className = "g-task-desc";
+        td.textContent = task.description;
+        text.appendChild(td);
+      }
+      btn.append(check, text);
+      btn.addEventListener("click", () => options.onTaskClick?.(task));
+      list.appendChild(btn);
+    });
+    body.appendChild(list);
+    if (config.dismissible) {
+      const dismiss = doc.createElement("button");
+      dismiss.type = "button";
+      dismiss.className = "g-btn g-btn-ghost";
+      dismiss.textContent = complete ? "Close" : "Dismiss checklist";
+      dismiss.addEventListener("click", () => options.onDismiss?.());
+      foot.appendChild(dismiss);
+    }
+  };
+  launcher.addEventListener("click", () => setOpen(!open));
+  close.addEventListener("click", () => setOpen(false));
+  const onKey = (e) => {
+    if (e.key === "Escape" && open) {
+      e.stopPropagation();
+      setOpen(false);
+      launcher.focus();
+    }
+  };
+  panel.addEventListener("keydown", onKey);
+  renderTasks();
+  if (open) setOpen(true);
+  return {
+    el: root,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    toggle: () => setOpen(!open),
+    isOpen: () => open,
+    setProgress(p) {
+      progress = p;
+      renderTasks();
+    },
+    destroy() {
+      panel.removeEventListener("keydown", onKey);
+      root.remove();
+    }
+  };
+}
+
+// src/survey.ts
+function isQuestionVisible(q, answers) {
+  if (!q.showWhen) return true;
+  const actual = answers[q.showWhen.questionId];
+  if (actual === void 0) return false;
+  const expected = q.showWhen.value;
+  switch (q.showWhen.op) {
+    case "equals":
+      return Array.isArray(actual) ? actual.includes(String(expected)) : String(actual) === String(expected);
+    case "lte":
+      return Number(actual) <= Number(expected);
+    case "gte":
+      return Number(actual) >= Number(expected);
+    case "in": {
+      const list = Array.isArray(expected) ? expected : [String(expected)];
+      return Array.isArray(actual) ? actual.some((a) => list.includes(a)) : list.includes(String(actual));
+    }
+    default:
+      return false;
+  }
+}
+function renderSurvey(options) {
+  const { scope, config } = options;
+  const doc = scope.ownerDocument;
+  const answers = {};
+  const card = doc.createElement("div");
+  card.className = `g-card g-survey g-slideout g-pos-${config.position}`;
+  card.setAttribute("role", "dialog");
+  card.setAttribute("aria-label", options.title || "Survey");
+  card.tabIndex = -1;
+  const inner = doc.createElement("div");
+  inner.className = "g-inner";
+  card.appendChild(inner);
+  if (options.onDismiss) {
+    const close = doc.createElement("button");
+    close.type = "button";
+    close.className = "g-close";
+    close.textContent = "\xD7";
+    close.setAttribute("aria-label", "Close survey");
+    close.addEventListener("click", () => options.onDismiss?.());
+    card.appendChild(close);
+  }
+  scope.appendChild(card);
+  const form = doc.createElement("form");
+  form.noValidate = true;
+  inner.appendChild(form);
+  const errorEl = doc.createElement("div");
+  errorEl.className = "g-error";
+  errorEl.setAttribute("role", "alert");
+  const setAnswer = (id, v) => {
+    if (v === void 0 || v === "" || Array.isArray(v) && v.length === 0) delete answers[id];
+    else answers[id] = v;
+    options.onChange?.({ ...answers });
+    updateVisibility();
+  };
+  const questionEls = /* @__PURE__ */ new Map();
+  const scaleButtons = (q, min, max, labels) => {
+    const wrap = doc.createElement("div");
+    const row = doc.createElement("div");
+    row.className = "g-scale";
+    row.setAttribute("role", "radiogroup");
+    row.setAttribute("aria-label", q.title);
+    for (let i = min; i <= max; i++) {
+      const b = doc.createElement("button");
+      b.type = "button";
+      b.textContent = String(i);
+      b.setAttribute("aria-pressed", "false");
+      b.addEventListener("click", () => {
+        row.querySelectorAll("button").forEach((x) => x.setAttribute("aria-pressed", "false"));
+        b.setAttribute("aria-pressed", "true");
+        setAnswer(q.id, i);
+      });
+      row.appendChild(b);
+    }
+    wrap.appendChild(row);
+    if (labels && (q.lowLabel || q.highLabel)) {
+      const l = doc.createElement("div");
+      l.className = "g-scale-labels";
+      l.append(Object.assign(doc.createElement("span"), { textContent: q.lowLabel || "" }), Object.assign(doc.createElement("span"), { textContent: q.highLabel || "" }));
+      wrap.appendChild(l);
+    }
+    return wrap;
+  };
+  const buildInput = (q) => {
+    switch (q.type) {
+      case "nps":
+        return scaleButtons(q, 0, 10, true);
+      case "csat":
+        return scaleButtons(q, 1, q.scaleMax ?? 5, true);
+      case "rating": {
+        const max = q.scaleMax ?? 5;
+        const row = doc.createElement("div");
+        row.className = "g-stars";
+        row.setAttribute("role", "radiogroup");
+        row.setAttribute("aria-label", q.title);
+        const btns = [];
+        for (let i = 1; i <= max; i++) {
+          const b = doc.createElement("button");
+          b.type = "button";
+          b.textContent = "\u2605";
+          b.setAttribute("aria-label", `${i} of ${max}`);
+          b.setAttribute("aria-pressed", "false");
+          b.addEventListener("click", () => {
+            btns.forEach((x, j) => {
+              x.classList.toggle("g-on", j < i);
+              x.setAttribute("aria-pressed", String(j === i - 1));
+            });
+            setAnswer(q.id, i);
+          });
+          btns.push(b);
+          row.appendChild(b);
+        }
+        return row;
+      }
+      case "thumbs": {
+        const row = doc.createElement("div");
+        row.className = "g-thumbs";
+        row.setAttribute("role", "radiogroup");
+        [
+          ["up", "\u{1F44D}", "Thumbs up"],
+          ["down", "\u{1F44E}", "Thumbs down"]
+        ].forEach(([val, icon, lbl]) => {
+          const b = doc.createElement("button");
+          b.type = "button";
+          b.textContent = icon;
+          b.setAttribute("aria-label", lbl);
+          b.setAttribute("aria-pressed", "false");
+          b.addEventListener("click", () => {
+            row.querySelectorAll("button").forEach((x) => x.setAttribute("aria-pressed", "false"));
+            b.setAttribute("aria-pressed", "true");
+            setAnswer(q.id, val === "up");
+          });
+          row.appendChild(b);
+        });
+        return row;
+      }
+      case "single_choice":
+      case "multiple_choice": {
+        const multi = q.type === "multiple_choice";
+        const group = doc.createElement("div");
+        group.setAttribute("role", multi ? "group" : "radiogroup");
+        group.setAttribute("aria-label", q.title);
+        q.options.forEach((opt) => {
+          const b = doc.createElement("button");
+          b.type = "button";
+          b.className = `g-choice${multi ? " g-multi" : ""}`;
+          b.setAttribute("role", multi ? "checkbox" : "radio");
+          b.setAttribute("aria-checked", "false");
+          b.setAttribute("data-option-id", opt.id);
+          const dot = doc.createElement("span");
+          dot.className = "g-dot";
+          b.append(dot, Object.assign(doc.createElement("span"), { textContent: opt.label }));
+          b.addEventListener("click", () => {
+            if (multi) {
+              const cur = new Set(answers[q.id] ?? []);
+              if (cur.has(opt.id)) cur.delete(opt.id);
+              else cur.add(opt.id);
+              b.setAttribute("aria-checked", String(cur.has(opt.id)));
+              setAnswer(q.id, Array.from(cur));
+            } else {
+              group.querySelectorAll(".g-choice").forEach((x) => x.setAttribute("aria-checked", "false"));
+              b.setAttribute("aria-checked", "true");
+              setAnswer(q.id, opt.id);
+            }
+          });
+          group.appendChild(b);
+        });
+        return group;
+      }
+      case "text":
+      default: {
+        const ta = doc.createElement("textarea");
+        ta.className = "g-input";
+        ta.rows = 3;
+        ta.placeholder = q.placeholder || "";
+        ta.setAttribute("aria-label", q.title);
+        ta.addEventListener("input", () => setAnswer(q.id, ta.value.slice(0, 5e3)));
+        return ta;
+      }
+    }
+  };
+  config.questions.forEach((q) => {
+    const wrap = doc.createElement("div");
+    wrap.className = "g-question";
+    wrap.setAttribute("data-question-id", q.id);
+    const t = doc.createElement("p");
+    t.className = "g-q-title";
+    t.textContent = q.title + (q.required ? "" : " (optional)");
+    wrap.appendChild(t);
+    if (q.description) {
+      const d = doc.createElement("p");
+      d.className = "g-q-desc";
+      d.textContent = q.description;
+      wrap.appendChild(d);
+    }
+    wrap.appendChild(buildInput(q));
+    questionEls.set(q.id, wrap);
+    form.appendChild(wrap);
+  });
+  const footer = doc.createElement("div");
+  footer.className = "g-footer";
+  const submit = doc.createElement("button");
+  submit.type = "submit";
+  submit.className = "g-btn g-btn-primary";
+  submit.textContent = "Submit";
+  footer.appendChild(submit);
+  form.appendChild(errorEl);
+  form.appendChild(footer);
+  function updateVisibility() {
+    config.questions.forEach((q) => {
+      const el2 = questionEls.get(q.id);
+      if (!el2) return;
+      const visible = isQuestionVisible(q, answers);
+      el2.hidden = !visible;
+      if (!visible && answers[q.id] !== void 0) delete answers[q.id];
+    });
+  }
+  form.addEventListener("submit", (e) => {
+    e.preventDefault();
+    const missing = config.questions.filter((q) => q.required && isQuestionVisible(q, answers) && answers[q.id] === void 0);
+    if (missing.length) {
+      errorEl.textContent = `Please answer: ${missing.map((q) => q.title).join(", ")}`;
+      questionEls.get(missing[0].id)?.querySelector("button,textarea")?.focus();
+      return;
+    }
+    errorEl.textContent = "";
+    options.onSubmit({ ...answers });
+  });
+  const onKey = (e) => {
+    if (e.key === "Escape" && options.onDismiss) {
+      e.stopPropagation();
+      options.onDismiss();
+    }
+  };
+  card.addEventListener("keydown", onKey);
+  updateVisibility();
+  (form.querySelector("button,textarea") || card).focus?.({ preventScroll: true });
+  return {
+    el: card,
+    getAnswers: () => ({ ...answers }),
+    showThankYou() {
+      inner.textContent = "";
+      const wrap = doc.createElement("div");
+      wrap.className = "g-complete";
+      const t = doc.createElement("h3");
+      t.className = "g-title";
+      t.textContent = config.thankYouTitle;
+      const b = doc.createElement("div");
+      b.className = "g-body";
+      setSanitizedHtml(b, config.thankYouBody);
+      const done = doc.createElement("button");
+      done.type = "button";
+      done.className = "g-btn g-btn-primary";
+      done.textContent = "Done";
+      done.style.marginTop = "12px";
+      done.addEventListener("click", () => options.onDismiss?.());
+      wrap.append(t, b, done);
+      inner.appendChild(wrap);
+      done.focus?.({ preventScroll: true });
+    },
+    destroy() {
+      card.removeEventListener("keydown", onKey);
+      card.remove();
+    }
+  };
+}
+
+// src/resource-center.ts
+function el(doc, tag, cls, text) {
+  const e = doc.createElement(tag);
+  if (cls) e.className = cls;
+  if (text != null) e.textContent = text;
+  return e;
+}
+function item(doc, icon, title, summary) {
+  const b = el(doc, "button", "g-rc-item");
+  b.type = "button";
+  const i = el(doc, "span", "g-rc-icon", icon);
+  i.setAttribute("aria-hidden", "true");
+  const text = el(doc, "span");
+  text.appendChild(el(doc, "div", "g-rc-title", title));
+  if (summary) text.appendChild(el(doc, "div", "g-rc-sum", summary));
+  b.append(i, text);
+  return b;
+}
+function renderResourceCenter(options) {
+  const { scope, config } = options;
+  const doc = scope.ownerDocument;
+  const guides = options.guides ?? [];
+  let open = false;
+  let query = "";
+  let serverResults = [];
+  let searchSeq = 0;
+  let activeArticle = null;
+  const pos = `g-pos-${config.launcher.position}`;
+  const root = el(doc, "div", "g-resource-center");
+  const launcher = el(doc, "button", `g-launcher ${pos}`);
+  launcher.type = "button";
+  launcher.setAttribute("aria-expanded", "false");
+  if (config.launcher.showIcon) {
+    const icon = el(doc, "span", "", "?");
+    icon.setAttribute("aria-hidden", "true");
+    launcher.appendChild(icon);
+  }
+  launcher.appendChild(el(doc, "span", "", config.launcher.label || config.title));
+  launcher.setAttribute("aria-label", config.launcher.label || config.title);
+  if (options.hideLauncher) launcher.hidden = true;
+  const panel = el(doc, "div", `g-panel ${pos}`);
+  panel.setAttribute("role", "dialog");
+  panel.setAttribute("aria-label", config.title);
+  panel.hidden = true;
+  const head = el(doc, "div", "g-panel-head");
+  head.appendChild(el(doc, "h2", "g-panel-title", config.title));
+  const close = el(doc, "button", "g-close", "\xD7");
+  close.type = "button";
+  close.setAttribute("aria-label", "Close");
+  head.appendChild(close);
+  const searchWrap = el(doc, "div", "g-rc-search");
+  const input = el(doc, "input", "g-input");
+  input.type = "search";
+  input.placeholder = "Search help articles\u2026";
+  input.setAttribute("aria-label", "Search help articles");
+  searchWrap.appendChild(input);
+  const body = el(doc, "div", "g-panel-body");
+  panel.append(head, searchWrap, body);
+  root.append(launcher, panel);
+  scope.appendChild(root);
+  const openArticle = (article) => {
+    if (article.externalUrl) {
+      window.open(article.externalUrl, "_blank", "noopener,noreferrer");
+      options.onArticleView?.(article);
+      return;
+    }
+    activeArticle = article;
+    options.onArticleView?.(article);
+    renderBody();
+  };
+  const renderArticle = (article) => {
+    const wrap = el(doc, "div", "g-rc-article");
+    const back = el(doc, "button", "g-btn g-btn-link g-rc-back", "\u2190 Back");
+    back.type = "button";
+    back.addEventListener("click", () => {
+      activeArticle = null;
+      renderBody();
+    });
+    const title = el(doc, "h3", "g-title", article.title);
+    const content = el(doc, "div", "g-body");
+    setSanitizedHtml(content, article.body);
+    wrap.append(back, title, content);
+    body.appendChild(wrap);
+    back.focus?.({ preventScroll: true });
+  };
+  const section = (label) => body.appendChild(el(doc, "div", "g-rc-section", label));
+  const renderBody = () => {
+    body.textContent = "";
+    if (activeArticle) return renderArticle(activeArticle);
+    const q = query.trim().toLowerCase();
+    if (q) {
+      const local = config.articles.filter((a) => a.title.toLowerCase().includes(q) || a.summary.toLowerCase().includes(q));
+      const seen = new Set(local.map((a) => a.id));
+      const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id))];
+      section(`Results (${merged.length})`);
+      if (!merged.length) body.appendChild(el(doc, "div", "g-rc-empty", "No articles match your search."));
+      merged.forEach((a) => {
+        const b = item(doc, "\u{1F4C4}", a.title, a.summary);
+        b.addEventListener("click", () => openArticle(a));
+        body.appendChild(b);
+      });
+      return;
+    }
+    const recommended = config.recommendedGuideIds.map((id) => guides.find((g) => g.id === id || g.key === id)).filter((g) => !!g);
+    if (recommended.length) {
+      section("Recommended");
+      recommended.forEach((g) => {
+        const b = item(doc, "\u25B6", g.name, "Start guide");
+        b.addEventListener("click", () => options.onStartGuide?.(g.id));
+        body.appendChild(b);
+      });
+    }
+    const checklists = config.checklistGuideIds.map((id) => guides.find((g) => g.id === id || g.key === id)).filter((g) => !!g);
+    if (checklists.length) {
+      section("Checklists");
+      checklists.forEach((g) => {
+        const b = item(doc, "\u2611", g.name, "Open checklist");
+        b.addEventListener("click", () => options.onOpenChecklist?.(g.id));
+        body.appendChild(b);
+      });
+    }
+    const collections = [...config.collections].sort((a, b) => a.order - b.order);
+    const uncollected = config.articles.filter((a) => !a.collectionId || !collections.some((c) => c.id === a.collectionId));
+    collections.forEach((c) => {
+      const articles = config.articles.filter((a) => a.collectionId === c.id);
+      if (!articles.length) return;
+      section(c.name);
+      articles.forEach((a) => {
+        const b = item(doc, "\u{1F4C4}", a.title, a.summary);
+        b.addEventListener("click", () => openArticle(a));
+        body.appendChild(b);
+      });
+    });
+    if (uncollected.length) {
+      section("Articles");
+      uncollected.forEach((a) => {
+        const b = item(doc, "\u{1F4C4}", a.title, a.summary);
+        b.addEventListener("click", () => openArticle(a));
+        body.appendChild(b);
+      });
+    }
+    if (config.faqs.length) {
+      section("FAQ");
+      config.faqs.forEach((f) => {
+        const b = item(doc, "?", f.question);
+        b.setAttribute("aria-expanded", "false");
+        const a = el(doc, "div", "g-faq-a");
+        setSanitizedHtml(a, f.answer);
+        a.hidden = true;
+        b.addEventListener("click", () => {
+          a.hidden = !a.hidden;
+          b.setAttribute("aria-expanded", String(!a.hidden));
+        });
+        body.append(b, a);
+      });
+    }
+    if (config.links.length) {
+      section("Links");
+      config.links.forEach((l) => {
+        const a = el(doc, "a", "g-rc-item");
+        a.href = l.url;
+        a.target = "_blank";
+        a.rel = "noopener noreferrer";
+        const i = el(doc, "span", "g-rc-icon", "\u2197");
+        i.setAttribute("aria-hidden", "true");
+        a.append(i, el(doc, "span", "g-rc-title", l.label));
+        body.appendChild(a);
+      });
+    }
+    if (!body.childNodes.length) body.appendChild(el(doc, "div", "g-rc-empty", "Nothing here yet."));
+  };
+  let debounce = null;
+  input.addEventListener("input", () => {
+    query = input.value;
+    activeArticle = null;
+    renderBody();
+    if (debounce) clearTimeout(debounce);
+    if (!options.search || !query.trim()) {
+      serverResults = [];
+      return;
+    }
+    const seq = ++searchSeq;
+    debounce = setTimeout(() => {
+      options.search?.(query.trim()).then((results) => {
+        if (seq !== searchSeq) return;
+        serverResults = Array.isArray(results) ? results : [];
+        renderBody();
+      }).catch(() => {
+      });
+    }, 250);
+  });
+  const setOpen = (v) => {
+    if (open === v) return;
+    open = v;
+    panel.hidden = !v;
+    launcher.setAttribute("aria-expanded", String(v));
+    if (v) {
+      renderBody();
+      input.focus?.({ preventScroll: true });
+      options.onOpen?.();
+    } else {
+      activeArticle = null;
+      options.onClose?.();
+    }
+  };
+  launcher.addEventListener("click", () => setOpen(!open));
+  close.addEventListener("click", () => setOpen(false));
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.stopPropagation();
+      setOpen(false);
+      launcher.focus();
+    }
+  };
+  panel.addEventListener("keydown", onKey);
+  return {
+    el: root,
+    open: () => setOpen(true),
+    close: () => setOpen(false),
+    toggle: () => setOpen(!open),
+    isOpen: () => open,
+    destroy() {
+      if (debounce) clearTimeout(debounce);
+      panel.removeEventListener("keydown", onKey);
+      root.remove();
+    }
+  };
+}
+
+// src/authoring.ts
+var DEFAULT_MESSAGE = "Guidely authoring \u2014 hover an element and click to select \xB7 Esc to cancel";
+function startAuthoring(options) {
+  const doc = options.doc ?? document;
+  const win = doc.defaultView ?? window;
+  const scope = createScope(null, { theme: "light", animation: "none" }, doc);
+  const bar = doc.createElement("div");
+  bar.className = "g-auth-bar";
+  bar.setAttribute("role", "toolbar");
+  const dot = doc.createElement("span");
+  dot.className = "g-dot-live";
+  const status = doc.createElement("span");
+  status.textContent = options.message ?? DEFAULT_MESSAGE;
+  const spacer = doc.createElement("span");
+  spacer.className = "g-spacer";
+  const done = doc.createElement("button");
+  done.type = "button";
+  done.className = "g-btn g-btn-primary";
+  done.textContent = "Done";
+  const exit = doc.createElement("button");
+  exit.type = "button";
+  exit.className = "g-btn g-btn-secondary";
+  exit.textContent = "Exit authoring";
+  bar.append(dot, status, spacer, done, exit);
+  const outline = doc.createElement("div");
+  outline.className = "g-auth-outline";
+  outline.hidden = true;
+  const label = doc.createElement("span");
+  label.className = "g-auth-label";
+  outline.appendChild(label);
+  scope.el.append(bar, outline);
+  let picking = true;
+  let hovered = null;
+  let stopped = false;
+  const describe = (el2) => {
+    const tag = el2.tagName.toLowerCase();
+    const id = el2.id ? `#${el2.id}` : "";
+    const tour = el2.getAttribute("data-tour") || el2.getAttribute("data-testid");
+    const text = (el2.textContent || "").replace(/\s+/g, " ").trim().slice(0, 40);
+    return `${tag}${id}${tour ? `[${tour}]` : ""}${text ? ` \u201C${text}\u201D` : ""}`;
+  };
+  const paint = (el2, picked = false) => {
+    if (!el2) {
+      outline.hidden = true;
+      return;
+    }
+    const r = el2.getBoundingClientRect();
+    outline.hidden = false;
+    outline.classList.toggle("g-picked", picked);
+    Object.assign(outline.style, { left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px` });
+    label.textContent = describe(el2);
+    label.style.top = r.top < 30 ? "100%" : "-24px";
+  };
+  const elementAt = (x, y) => {
+    const el2 = doc.elementFromPoint(x, y);
+    if (!el2 || isGuidelyElement(el2) || el2 === doc.documentElement || el2 === doc.body) return null;
+    return el2;
+  };
+  const onMove = (e) => {
+    if (!picking || stopped) return;
+    const el2 = elementAt(e.clientX, e.clientY);
+    if (el2 !== hovered) {
+      hovered = el2;
+      paint(el2);
+    }
+  };
+  const onScroll = () => {
+    if (hovered) paint(hovered);
+  };
+  const onClick = (e) => {
+    if (!picking || stopped) return;
+    if (e.target && isGuidelyElement(e.target)) return;
+    const el2 = elementAt(e.clientX, e.clientY) ?? hovered;
+    if (!el2) return;
+    e.preventDefault();
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    const d = describeElement(el2);
+    paint(el2, true);
+    status.textContent = `Selected ${describe(el2)} \u2014 click another element or press Done`;
+    options.onPick({ selectors: d.selectors, textSnapshot: d.textSnapshot, rect: d.rect, url: win.location.href, element: el2 });
+  };
+  const swallow = (e) => {
+    if (!picking || stopped) return;
+    const t = e.target;
+    if (t && isGuidelyElement(t)) return;
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  const onKey = (e) => {
+    if (e.key === "Escape") {
+      e.preventDefault();
+      e.stopPropagation();
+      stop();
+      options.onExit();
+    }
+  };
+  const stop = () => {
+    if (stopped) return;
+    stopped = true;
+    doc.removeEventListener("mousemove", onMove, true);
+    doc.removeEventListener("click", onClick, true);
+    doc.removeEventListener("mousedown", swallow, true);
+    doc.removeEventListener("mouseup", swallow, true);
+    doc.removeEventListener("keydown", onKey, true);
+    win.removeEventListener("scroll", onScroll, true);
+    win.removeEventListener("resize", onScroll);
+    scope.destroy();
+  };
+  done.addEventListener("click", () => {
+    stop();
+    options.onExit();
+  });
+  exit.addEventListener("click", () => {
+    stop();
+    options.onExit();
+  });
+  doc.addEventListener("mousemove", onMove, true);
+  doc.addEventListener("click", onClick, true);
+  doc.addEventListener("mousedown", swallow, true);
+  doc.addEventListener("mouseup", swallow, true);
+  doc.addEventListener("keydown", onKey, true);
+  win.addEventListener("scroll", onScroll, true);
+  win.addEventListener("resize", onScroll);
+  return {
+    setStatus: (text) => {
+      status.textContent = text;
+    },
+    setPicking: (enabled) => {
+      picking = enabled;
+      if (!enabled) paint(null);
+    },
+    stop
+  };
+}
+function previewStep(step, theme, options = {}) {
+  const previewStepConfig = { ...step, target: step.target ? { ...step.target, fallback: "show_as_modal", waitMs: Math.min(step.target.waitMs, 1500) } : step.target };
+  const guide = {
+    id: `preview-${step.id}`,
+    key: "preview",
+    name: "Preview",
+    kind: "flow",
+    version: 0,
+    config: { steps: [previewStepConfig], targeting: { id: "root", op: "and", rules: [] }, trigger: { type: "manual", delayMs: 0 }, frequency: { mode: "every_time", cooldownHours: 0, priority: 0, mutuallyExclusiveWith: [], reshowAfterDismiss: true }, appearance: options.appearance ?? { theme: "auto", animation: "fade" }, urlPatterns: [] }
+  };
+  const controller = runGuide(guide, { theme, doc: options.doc, onEnd: () => options.onEnd?.(), onNavigate: () => {
+  }, onAction: () => {
+  } });
+  controller.start();
+  return { controller, destroy: () => controller.destroy() };
+}
+function highlightSelectors(selectors, options = {}) {
+  const doc = options.doc ?? document;
+  const scope = createScope(null, { theme: "light", animation: "none" }, doc);
+  const boxes = [];
+  const counts = [];
+  let resolved = null;
+  const matched = /* @__PURE__ */ new Set();
+  selectors.forEach((s) => {
+    const els = querySelectorStrategy(s, doc).filter((el2) => !isGuidelyElement(el2));
+    const visible = els.filter(isVisible);
+    counts.push(els.length);
+    if (!resolved && visible.length === 1) resolved = visible[0];
+    els.forEach((el2) => matched.add(el2));
+  });
+  matched.forEach((el2) => {
+    const r = el2.getBoundingClientRect();
+    const box = doc.createElement("div");
+    box.className = "g-highlight";
+    Object.assign(box.style, { left: `${r.left}px`, top: `${r.top}px`, width: `${r.width}px`, height: `${r.height}px` });
+    if (el2 === resolved) box.style.borderColor = "#22c55e";
+    scope.el.appendChild(box);
+    boxes.push(box);
+  });
+  let timer = null;
+  const destroy = () => {
+    if (timer) clearTimeout(timer);
+    scope.destroy();
+  };
+  if (options.durationMs !== 0) timer = setTimeout(destroy, options.durationMs ?? 2500);
+  ensureHost(doc);
+  return { counts, resolved, destroy };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DEFAULT_THEME,
+  HOST_ID,
+  STYLES,
+  TargetTimeoutError,
+  anchor,
+  applyTheme,
+  buildCard,
+  createScope,
+  describeElement,
+  destroyHost,
+  ensureHost,
+  generateSelectors,
+  highlightSelectors,
+  isAnchoredStep,
+  isChecklistComplete,
+  isGuidelyElement,
+  isQuestionVisible,
+  isStableId,
+  isVisible,
+  normalizeText,
+  prefersReducedMotion,
+  previewStep,
+  querySelectorStrategy,
+  renderBanner,
+  renderChecklist,
+  renderCustom,
+  renderHotspot,
+  renderModal,
+  renderResourceCenter,
+  renderSlideout,
+  renderSpotlight,
+  renderStep,
+  renderSurvey,
+  renderTooltip,
+  resolveTarget,
+  resolveTheme,
+  runGuide,
+  sanitizeHtml,
+  sanitizeToFragment,
+  setSanitizedHtml,
+  startAuthoring,
+  textSnapshotOf,
+  trackRect,
+  urlMatches,
+  waitForTarget
+});
+//# sourceMappingURL=index.cjs.map