@guidelytech/guide-runtime 0.9.0 → 0.11.0

package/dist/index.cjs

@@ -24,12 +24,19 @@ var src_exports = {};
 __export(src_exports, {
   DEFAULT_THEME: () => DEFAULT_THEME,
   HOST_ID: () => HOST_ID2,
+  SHADOW_SEPARATOR: () => SHADOW_SEPARATOR,
   STYLES: () => STYLES,
   TargetTimeoutError: () => TargetTimeoutError,
   anchor: () => anchor,
   applyTheme: () => applyTheme,
   buildCard: () => buildCard,
+  closestComposed: () => closestComposed,
+  componentAnchor: () => componentAnchor,
+  composedParent: () => composedParent,
+  composedTarget: () => composedTarget,
+  containsComposed: () => containsComposed,
   createScope: () => createScope,
+  deepElementFromPoint: () => deepElementFromPoint,
   describeElement: () => describeElement,
   destroyHost: () => destroyHost,
   enhancePdfViewers: () => enhancePdfViewers,
@@ -37,9 +44,10 @@ __export(src_exports, {
   generateSelectors: () => generateSelectors,
   highlightSelectors: () => highlightSelectors,
   isAnchoredStep: () => isAnchoredStep,
-  isChecklistComplete: () => import_runtime6.isChecklistComplete,
+  isChecklistComplete: () => import_runtime7.isChecklistComplete,
   isGuidelyElement: () => isGuidelyElement,
-  isQuestionVisible: () => import_runtime7.isQuestionVisible,
+  isQuestionVisible: () => import_runtime8.isQuestionVisible,
+  isStableClass: () => isStableClass,
   isStableId: () => isStableId,
   isVisible: () => isVisible,
   normalizeText: () => normalizeText,
@@ -63,10 +71,12 @@ __export(src_exports, {
   sanitizeHtml: () => sanitizeHtml,
   sanitizeToFragment: () => sanitizeToFragment,
   setSanitizedHtml: () => setSanitizedHtml,
+  shadowHostChain: () => shadowHostChain,
   startAuthoring: () => startAuthoring,
   textSnapshotOf: () => textSnapshotOf,
   trackRect: () => trackRect,
   urlMatches: () => urlMatches,
+  visualRect: () => visualRect,
   waitForTarget: () => waitForTarget
 });
 module.exports = __toCommonJS(src_exports);
@@ -129,6 +139,82 @@ function safeQueryAll(root, selector) {
     return [];
   }
 }
+var SHADOW_SEPARATOR = " >>> ";
+var SHADOW_SPLIT = /\s*>>>\s*/;
+function isShadowRoot(node) {
+  return !!node && node.nodeType === 11 && !!node.host;
+}
+function shadowRootOf(el2) {
+  const root = el2.getRootNode?.();
+  return isShadowRoot(root) ? root : null;
+}
+function composedParent(el2) {
+  return el2.parentElement ?? shadowRootOf(el2)?.host ?? null;
+}
+function containsComposed(ancestor, node) {
+  let cur = node ? node.nodeType === 1 ? node : node.parentElement : null;
+  for (; cur; cur = composedParent(cur)) if (cur === ancestor) return true;
+  return false;
+}
+function composedTarget(e) {
+  const path = typeof e.composedPath === "function" ? e.composedPath() : [];
+  const first = path[0] ?? e.target;
+  if (!first) return null;
+  return first.nodeType === 1 ? first : first.parentElement;
+}
+var shadowRootCache = null;
+function shadowRootsIn(root) {
+  const cached = shadowRootCache?.get(root);
+  if (cached) return cached;
+  const out = [];
+  const visit = (scope) => {
+    const own = scope.nodeType === 1 ? scope.shadowRoot : null;
+    const hosts = own ? [scope] : [];
+    for (const el2 of safeQueryAll(scope, "*")) if (el2.shadowRoot) hosts.push(el2);
+    for (const host of hosts) {
+      if (host.id === HOST_ID || !host.shadowRoot || out.includes(host.shadowRoot)) continue;
+      out.push(host.shadowRoot);
+      visit(host.shadowRoot);
+    }
+  };
+  visit(root);
+  shadowRootCache?.set(root, out);
+  return out;
+}
+function queryAllDeep(root, selector) {
+  const out = safeQueryAll(root, selector);
+  for (const sr of shadowRootsIn(root)) out.push(...safeQueryAll(sr, selector));
+  return out;
+}
+function queryCss(root, selector, deep) {
+  if (!selector.includes(">>>")) return deep ? queryAllDeep(root, selector) : safeQueryAll(root, selector);
+  const steps = selector.split(SHADOW_SPLIT).filter(Boolean);
+  let scopes = [root];
+  let matches = [];
+  steps.forEach((step, i) => {
+    matches = Array.from(new Set(scopes.flatMap((scope) => queryAllDeep(scope, step))));
+    if (i < steps.length - 1) scopes = matches.map((el2) => el2.shadowRoot).filter((sr) => !!sr);
+  });
+  return matches;
+}
+function closestComposed(el2, selector) {
+  if (selector.includes(">>>")) {
+    const hits = new Set(queryCss(docOf(el2), selector, true));
+    for (let cur = el2; cur; cur = composedParent(cur)) if (hits.has(cur)) return cur;
+    return null;
+  }
+  for (let cur = el2; cur; cur = composedParent(cur)) if (cur.matches(selector)) return cur;
+  return null;
+}
+function deepElementFromPoint(doc, x, y) {
+  let el2 = doc.elementFromPoint(x, y);
+  while (el2?.shadowRoot && el2.id !== HOST_ID && typeof el2.shadowRoot.elementFromPoint === "function") {
+    const inner = el2.shadowRoot.elementFromPoint(x, y);
+    if (!inner || inner === el2) break;
+    el2 = inner;
+  }
+  return el2;
+}
 function escapeCss(value) {
   const g = globalThis;
   if (g.CSS && typeof g.CSS.escape === "function") return g.CSS.escape(value);
@@ -150,32 +236,32 @@ function queryXPath(root, expr) {
     return [];
   }
 }
-function queryText(root, text) {
+function queryText(root, text, deep) {
   const needle = normalizeText(text).toLowerCase();
   if (!needle) return [];
-  const candidates = safeQueryAll(root, TEXT_CANDIDATES);
+  const candidates = queryCss(root, TEXT_CANDIDATES, deep);
   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) {
+function querySelectorStrategy(strategy, root, deep = true) {
   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)}`);
+      return queryCss(root, `#${escapeCss(id)}`, deep);
     }
     case "guidely-id": {
       const id = value.startsWith("#") ? value.slice(1) : value;
-      return safeQueryAll(root, attrSelector("data-guidely-id", id));
+      return queryCss(root, attrSelector("data-guidely-id", id), deep);
     }
     case "data-attr":
     case "aria":
     case "css":
-      return safeQueryAll(root, value.startsWith("[") || /^[a-z*#.[]/i.test(value) ? value : `[${value}]`);
+      return queryCss(root, value.startsWith("[") || /^[a-z*#.[]/i.test(value) ? value : `[${value}]`, deep);
     case "text":
-      return queryText(root, value);
+      return queryText(root, value, deep);
     case "xpath":
       return queryXPath(root, value);
     default:
@@ -184,11 +270,19 @@ function querySelectorStrategy(strategy, root) {
 }
 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];
+  const visibleMatches = (strategy, deep) => querySelectorStrategy(strategy, root, deep).filter((el2) => !isGuidelyElement(el2) && isVisible(el2));
+  const outer = shadowRootCache;
+  shadowRootCache ?? (shadowRootCache = /* @__PURE__ */ new Map());
+  try {
+    for (const strategy of selectors) {
+      let matches = visibleMatches(strategy, false);
+      if (!matches.length && strategy.kind !== "xpath") matches = visibleMatches(strategy, true);
+      if (matches.length === 1) return matches[0];
+    }
+    return null;
+  } finally {
+    shadowRootCache = outer;
   }
-  return null;
 }
 var TargetTimeoutError = class extends Error {
   constructor(message = "Target element not found before timeout") {
@@ -252,14 +346,15 @@ function isStableId(id) {
 function isStableClass(cls) {
   return !!cls && !GENERATED_CLASS.test(cls) && cls.length <= 40;
 }
-function uniqueIn(doc, selector, el2) {
-  const all = safeQueryAll(doc, selector);
+function uniqueWithin(root, selector, el2) {
+  const all = safeQueryAll(root, selector);
   return all.length === 1 && all[0] === el2;
 }
 function attrSelector(name, value) {
   return `[${name}='${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`;
 }
-function cssPath(el2, doc) {
+function cssPath(el2, root) {
+  const doc = el2.ownerDocument;
   const segments = [];
   let cur = el2;
   while (cur && cur.nodeType === 1 && cur !== doc.body && cur !== doc.documentElement) {
@@ -279,20 +374,48 @@ function cssPath(el2, doc) {
     }
     segments.unshift(seg);
     const candidate = segments.join(" > ");
-    if (uniqueIn(doc, candidate, el2)) return candidate;
+    if (uniqueWithin(root, candidate, el2)) return candidate;
     cur = parent;
   }
   const full = segments.join(" > ");
-  return uniqueIn(doc, full, el2) ? full : null;
+  return uniqueWithin(root, full, el2) ? full : null;
+}
+function shadowHostChain(el2) {
+  const steps = [];
+  for (let root = shadowRootOf(el2); root; root = shadowRootOf(root.host)) {
+    const host = root.host;
+    const step = cssPath(host, shadowRootOf(host) ?? host.ownerDocument);
+    if (!step) return null;
+    steps.unshift(step);
+  }
+  return steps.join(SHADOW_SEPARATOR);
+}
+function selectorFor(el2, selector) {
+  const root = shadowRootOf(el2);
+  if (!root) return uniqueWithin(el2.ownerDocument, selector, el2) ? selector : null;
+  if (!uniqueWithin(root, selector, el2)) return null;
+  const doc = el2.ownerDocument;
+  const only = (sel) => {
+    const all = queryCss(doc, sel, true);
+    return all.length === 1 && all[0] === el2;
+  };
+  if (only(selector)) return selector;
+  const chain = shadowHostChain(el2);
+  const scoped = chain ? chain + SHADOW_SEPARATOR + selector : null;
+  return scoped && only(scoped) ? scoped : null;
+}
+function shadowText(el2) {
+  if (!el2.shadowRoot) return "";
+  const parts = Array.from(el2.shadowRoot.children).filter((c) => !/^(STYLE|SCRIPT|TEMPLATE)$/.test(c.tagName));
+  return normalizeText(parts.map((c) => c.innerText ?? c.textContent).join(" "));
 }
 function textSnapshotOf(el2) {
   const he = el2;
-  const own = normalizeText(he.innerText ?? el2.textContent);
+  const own = normalizeText(he.innerText ?? el2.textContent) || shadowText(el2);
   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) => {
@@ -303,9 +426,15 @@ function generateSelectors(el2) {
     }
   };
   const tag = el2.tagName.toLowerCase();
+  const pushFor = (kind, selector, value, label) => {
+    const resolved = selectorFor(el2, selector);
+    if (resolved === selector) push({ kind, value, label });
+    else if (resolved) push({ kind: "css", value: resolved, label });
+    return !!resolved;
+  };
   const guidelyId = el2.getAttribute("data-guidely-id");
-  if (guidelyId && uniqueIn(doc, attrSelector("data-guidely-id", guidelyId), el2)) push({ kind: "guidely-id", value: guidelyId, label: `Guidely id ${guidelyId}` });
-  if (isStableId(el2.id) && uniqueIn(doc, `#${escapeCss(el2.id)}`, el2)) push({ kind: "id", value: `#${el2.id}`, label: `id ${el2.id}` });
+  if (guidelyId) pushFor("guidely-id", attrSelector("data-guidely-id", guidelyId), guidelyId, `Guidely id ${guidelyId}`);
+  if (isStableId(el2.id)) pushFor("id", `#${escapeCss(el2.id)}`, `#${el2.id}`, `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);
@@ -314,42 +443,75 @@ function generateSelectors(el2) {
   });
   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}` });
+    if (!pushFor("data-attr", sel, sel, `${a.name}=${a.value}`)) pushFor("data-attr", tag + sel, tag + sel, `${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 });
+    if (!pushFor("aria", sel, sel, aria)) pushFor("aria", tag + sel, tag + sel, 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}` });
+  if (name) pushFor("css", tag + attrSelector("name", name), tag + attrSelector("name", name), `${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}` });
+    pushFor("css", sel, sel, `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}` });
+    if (href && href.length <= 200) pushFor("css", `a${attrSelector("href", href)}`, `a${attrSelector("href", href)}`, `link ${href}`);
   }
-  const path = cssPath(el2, doc);
-  if (path) push({ kind: "css", value: path, label: "css path" });
+  const path = cssPath(el2, shadowRootOf(el2) ?? el2.ownerDocument);
+  if (path) pushFor("css", path, path, "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 visualRect(el2) {
+  const own = el2.getBoundingClientRect();
+  if (!el2.shadowRoot) return own;
+  const boxes = [own, ...Array.from(el2.shadowRoot.children).map((c) => c.getBoundingClientRect())].filter((r) => r.width > 0 && r.height > 0);
+  if (boxes.length < 2) return boxes[0] ?? own;
+  const left = Math.min(...boxes.map((r) => r.left));
+  const top = Math.min(...boxes.map((r) => r.top));
+  const right = Math.max(...boxes.map((r) => r.right));
+  const bottom = Math.max(...boxes.map((r) => r.bottom));
+  return new DOMRect(left, top, right - left, bottom - top);
+}
+var ANCHOR_MAX_AREA_RATIO = 4;
+var CONTROL_SELECTOR = "button, a[href], input, select, textarea, [role='button'], [role='link'], [role='checkbox'], [role='radio'], [role='switch'], [role='tab'], [role='menuitem'], [role='combobox'], [role='option']";
+function componentAnchor(el2) {
+  if (!hasLayout(el2.ownerDocument)) return el2;
+  let cur = el2;
+  for (let root = shadowRootOf(cur); root; root = shadowRootOf(cur)) {
+    const host = root.host;
+    if (host.id === HOST_ID) break;
+    let control = null;
+    try {
+      control = cur.closest(CONTROL_SELECTOR);
+    } catch {
+    }
+    const r = visualRect(control ?? cur);
+    const area = r.width * r.height;
+    const h2 = visualRect(host);
+    const hostArea = h2.width * h2.height;
+    const inside = r.left >= h2.left - 1 && r.top >= h2.top - 1 && r.right <= h2.right + 1 && r.bottom <= h2.bottom + 1;
+    if (!area || !inside || hostArea > area * ANCHOR_MAX_AREA_RATIO) break;
+    cur = host;
+  }
+  return cur;
+}
 function describeElement(el2) {
-  const r = el2.getBoundingClientRect();
+  const target = componentAnchor(el2);
+  const r = visualRect(target);
   return {
-    selectors: generateSelectors(el2),
-    textSnapshot: textSnapshotOf(el2),
+    selectors: generateSelectors(target),
+    textSnapshot: textSnapshotOf(target) || textSnapshotOf(el2),
     rect: { x: r.x, y: r.y, width: r.width, height: r.height },
-    tag: el2.tagName.toLowerCase()
+    tag: target.tagName.toLowerCase()
   };
 }
 
@@ -458,6 +620,9 @@ function setSanitizedHtml(el2, html) {
 }
 
 // src/pdf-viewer.ts
+var import_runtime5 = require("@guidelytech/shared/runtime");
+
+// src/host.ts
 var import_runtime4 = require("@guidelytech/shared/runtime");
 
 // src/styles.ts
@@ -643,6 +808,21 @@ var STYLES = `
 .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}}
+/* resource center: unread badge + "What's new" */
+.g-launcher-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#dc2626;color:#fff;font-size:11px;font-weight:700;line-height:20px;text-align:center;box-shadow:0 0 0 2px var(--g-bg)}
+.g-rc-news{padding:10px 20px 12px;border-bottom:1px solid var(--g-border)}
+.g-rc-news:last-of-type{border-bottom:0}
+.g-rc-news-head{display:flex;align-items:baseline;gap:8px}
+.g-rc-news-title{margin:0;font-size:14px;font-weight:600;line-height:1.35;flex:1}
+.g-rc-news-new{flex:none;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--g-primary-text);background:var(--g-primary);border-radius:999px;padding:2px 7px}
+.g-rc-news-date{display:block;font-size:12px;color:var(--g-muted);margin:2px 0 6px}
+.g-rc-news-body{font-size:13px}
+.g-rc-news-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
+.g-rc-news-actions .g-btn{min-height:32px;padding:6px 12px;font-size:13px}
+/* accessibility */
+.g-sr-only{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
+.g-hotspot:focus-visible,.g-custom:focus-visible,.g-card:focus-visible{outline:2px solid var(--g-primary);outline-offset:2px}
+@media (forced-colors:active){.g-card,.g-panel,.g-banner{border:1px solid CanvasText}.g-btn{border:1px solid ButtonText}}
 `;
 
 // src/host.ts
@@ -737,6 +917,7 @@ function resolveTheme(theme, appearance) {
 }
 function applyTheme(el2, vars) {
   el2.style.setProperty("--g-primary", vars.primary);
+  if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(vars.primary)) el2.style.setProperty("--g-primary-text", (0, import_runtime4.readableTextOn)(vars.primary));
   el2.style.setProperty("--g-bg", vars.bg);
   el2.style.setProperty("--g-text", vars.text);
   el2.style.setProperty("--g-radius", `${vars.radius}px`);
@@ -753,6 +934,16 @@ function createScope(theme, appearance, doc = document) {
   const vars = resolveTheme(theme, appearance);
   applyTheme(el2, vars);
   handle.shadow.appendChild(el2);
+  const css = [appearance ? theme?.customCss : void 0, appearance?.customCss].filter((c) => !!c && !!c.trim());
+  let style = null;
+  if (css.length) {
+    const id = `c${++cssScopeSeq}`;
+    el2.setAttribute("data-g-css", id);
+    style = doc.createElement("style");
+    style.setAttribute("data-g-custom", id);
+    style.textContent = css.map((c) => (0, import_runtime4.scopeCustomCss)(c, `.g-scope[data-g-css="${id}"]`)).join("\n");
+    handle.shadow.insertBefore(style, el2);
+  }
   let mq = null;
   const onChange = () => applyTheme(el2, resolveTheme(theme, appearance));
   if ((appearance?.theme ?? "auto") === "auto" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
@@ -768,16 +959,18 @@ function createScope(theme, appearance, doc = document) {
     vars,
     destroy() {
       mq?.removeEventListener?.("change", onChange);
+      style?.remove();
       el2.remove();
     }
   };
 }
+var cssScopeSeq = 0;
 
 // src/pdf-viewer.ts
 function enhancePdfViewers(root, doc = root.ownerDocument) {
-  for (const block of Array.from(root.querySelectorAll(`div.${import_runtime4.PDF_BLOCK_CLASS}`))) {
-    const link = block.querySelector(`a.${import_runtime4.FILE_LINK_CLASS}`);
-    const strip = block.querySelector(`.${import_runtime4.PDF_PAGES_CLASS}`);
+  for (const block of Array.from(root.querySelectorAll(`div.${import_runtime5.PDF_BLOCK_CLASS}`))) {
+    const link = block.querySelector(`a.${import_runtime5.FILE_LINK_CLASS}`);
+    const strip = block.querySelector(`.${import_runtime5.PDF_PAGES_CLASS}`);
     if (!link || !strip || block.hasAttribute("data-g-ready")) continue;
     for (const img of Array.from(strip.querySelectorAll("img:not([src])"))) img.remove();
     const pages = Array.from(strip.querySelectorAll("img"));
@@ -904,7 +1097,8 @@ function openReader(doc, block, link, pages, start) {
 
 // src/position.ts
 var import_dom = require("@floating-ui/dom");
-function anchor(reference, floating, options = {}) {
+function anchor(target, floating, options = {}) {
+  const reference = target.shadowRoot ? { getBoundingClientRect: () => visualRect(target), contextElement: target } : target;
   const placement = options.placement ?? "auto";
   const gap = options.offset ?? 10;
   const middleware = [(0, import_dom.offset)(gap + (options.arrowEl ? 4 : 0))];
@@ -957,7 +1151,7 @@ function trackRect(el2, cb) {
   let stopped = false;
   const run = () => {
     if (stopped) return;
-    cb(el2.getBoundingClientRect());
+    cb(visualRect(el2));
   };
   const schedule = () => {
     if (stopped) return;
@@ -970,6 +1164,9 @@ function trackRect(el2, cb) {
   const win = el2.ownerDocument.defaultView;
   win?.addEventListener("scroll", schedule, true);
   win?.addEventListener("resize", schedule);
+  const shadowRoots = [];
+  for (let root = el2.getRootNode(); root.nodeType === 11 && root.host; root = root.host.getRootNode()) shadowRoots.push(root);
+  for (const root of shadowRoots) root.addEventListener("scroll", schedule, true);
   let ro = null;
   if (typeof ResizeObserver !== "undefined") {
     try {
@@ -985,6 +1182,7 @@ function trackRect(el2, cb) {
     stopped = true;
     win?.removeEventListener("scroll", schedule, true);
     win?.removeEventListener("resize", schedule);
+    for (const root of shadowRoots) root.removeEventListener("scroll", schedule, true);
     ro?.disconnect();
     clearInterval(interval);
     if (typeof cancelAnimationFrame === "function") cancelAnimationFrame(raf);
@@ -1025,7 +1223,7 @@ function buildCard(doc, opts, extraClass) {
   if (step.imageUrl) {
     const img = h(doc, "img", "g-image");
     img.src = step.imageUrl;
-    img.alt = "";
+    img.alt = step.imageAlt ?? "";
     card.appendChild(img);
   }
   const inner = h(doc, "div", "g-inner");
@@ -1053,18 +1251,29 @@ function buildCard(doc, opts, extraClass) {
   const buttons = buildButtons(doc, step, opts.canGoBack ?? opts.index > 0, 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}`));
+    if (step.showProgress && opts.total > 1) {
+      const progress = h(doc, "span", "g-progress", `${opts.index + 1} of ${opts.total}`);
+      progress.setAttribute("aria-label", `Step ${opts.index + 1} of ${opts.total}`);
+      footer.appendChild(progress);
+    }
     buttons.forEach((b) => footer.appendChild(b));
     inner.appendChild(footer);
   }
   card.appendChild(inner);
   if (step.title) card.setAttribute("aria-labelledby", titleId);
+  else card.setAttribute("aria-label", opts.total > 1 ? `Step ${opts.index + 1} of ${opts.total}` : "Guide");
   if (step.body) card.setAttribute("aria-describedby", bodyId);
   return { card, inner, titleId, bodyId };
 }
 function focusables(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE));
 }
+function isTextEntry(el2) {
+  const t = el2;
+  if (!t || !t.tagName) return false;
+  const tag = t.tagName.toLowerCase();
+  return tag === "input" || tag === "textarea" || tag === "select" || t.isContentEditable === true;
+}
 function installKeyboard(card, step, trap, onClose) {
   const onKey = (e) => {
     if (e.key === "Escape" && step.showClose) {
@@ -1072,6 +1281,16 @@ function installKeyboard(card, step, trap, onClose) {
       onClose();
       return;
     }
+    if ((e.key === "ArrowRight" || e.key === "ArrowLeft") && !e.altKey && !e.ctrlKey && !e.metaKey && !isTextEntry(e.target)) {
+      const actions = e.key === "ArrowRight" ? ["next", "complete"] : ["back"];
+      const btn = actions.map((a) => card.querySelector(`button[data-action="${a}"]`)).find(Boolean);
+      if (btn) {
+        e.preventDefault();
+        e.stopPropagation();
+        btn.click();
+      }
+      return;
+    }
     if (trap && e.key === "Tab") {
       const items = focusables(card);
       if (!items.length) {
@@ -1096,7 +1315,8 @@ function installKeyboard(card, step, trap, onClose) {
 }
 function focusInto(card) {
   const doc = card.ownerDocument;
-  const previous = doc.activeElement;
+  const active = doc.activeElement;
+  const previous = active && active.id !== "guidely-root" ? active : null;
   const primary = card.querySelector(".g-btn-primary") || focusables(card)[0] || card;
   try {
     primary.focus({ preventScroll: true });
@@ -1244,23 +1464,32 @@ function renderHotspot(doc, opts) {
   let card = null;
   let stopAnchor = null;
   let stopKeys = null;
-  const close = () => {
+  const close = (returnFocus = false) => {
+    const hadFocus = !!card && card.getRootNode().activeElement !== null && card.contains(card.getRootNode().activeElement);
     stopAnchor?.();
     stopKeys?.();
     card?.remove();
     card = null;
     dot.setAttribute("aria-expanded", "false");
+    if (returnFocus || hadFocus) {
+      try {
+        dot.focus({ preventScroll: true });
+      } catch {
+      }
+    }
   };
   const open = () => {
     if (card) return;
     const built = buildCard(doc, { ...opts, onClose: () => opts.onClose() }, "g-hotspot-card");
     card = built.card;
     card.setAttribute("role", "dialog");
+    card.id = nextId("hotspot");
+    dot.setAttribute("aria-controls", card.id);
     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);
+    stopKeys = installKeyboard(card, opts.step, false, () => close(true));
     dot.setAttribute("aria-expanded", "true");
     opts.onOpen?.();
     if (cfg.openOn === "click") focusInto(card);
@@ -1282,7 +1511,8 @@ function renderBanner(doc, 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("role", "region");
+  banner.setAttribute("aria-label", step.title || "Announcement");
   banner.setAttribute("data-step-id", step.id);
   const body = h(doc, "div", "g-body");
   if (step.title) body.appendChild(h(doc, "strong", "", `${step.title} `));
@@ -1315,6 +1545,27 @@ function renderSlideout(doc, opts) {
   cleanups.push(focusInto(card));
   return { el: wrapper, card, destroy: () => cleanupAll(cleanups, wrapper) };
 }
+function runCodeBlock(code, container, opts) {
+  const act = (action) => () => opts.onButton({ id: `code-${action}`, label: action, action, variant: "primary" });
+  const api = Object.freeze({ next: act("next"), back: act("back"), complete: act("complete"), skip: act("skip"), dismiss: () => opts.onClose(), stepId: opts.step.id });
+  try {
+    const fn = new Function("guidely", "container", `"use strict";
+${code}`);
+    const result = fn(api, container);
+    return typeof result === "function" ? () => {
+      try {
+        result();
+      } catch (err) {
+        opts.onError?.(err);
+      }
+    } : () => {
+    };
+  } catch (err) {
+    opts.onError?.(err);
+    return () => {
+    };
+  }
+}
 function renderCustom(doc, opts) {
   const cleanups = [];
   const wrapper = h(doc, "div", "g-step");
@@ -1323,6 +1574,9 @@ function renderCustom(doc, opts) {
   el2.tabIndex = -1;
   el2.setAttribute("data-step-id", opts.step.id);
   setSanitizedHtml(el2, opts.step.customHtml || opts.step.body || "");
+  el2.setAttribute("role", opts.step.showOverlay ? "dialog" : "group");
+  el2.setAttribute("aria-label", opts.step.title || "Guide");
+  if (opts.step.showOverlay) el2.setAttribute("aria-modal", "true");
   const onClick = (e) => {
     const t = e.target?.closest?.("[data-g-action]");
     const action = t?.getAttribute("data-g-action");
@@ -1336,6 +1590,7 @@ function renderCustom(doc, opts) {
   opts.scope.appendChild(wrapper);
   cleanups.push(installKeyboard(el2, opts.step, false, opts.onClose));
   cleanups.push(focusInto(el2));
+  if (opts.runCode && opts.step.code) cleanups.push(runCodeBlock(opts.step.code, el2, opts));
   return { el: wrapper, card: el2, destroy: () => cleanupAll(cleanups, wrapper) };
 }
 function renderStep(opts) {
@@ -1368,7 +1623,7 @@ function isAnchoredStep(step) {
 }
 
 // src/controller.ts
-var import_runtime5 = require("@guidelytech/shared/runtime");
+var import_runtime6 = require("@guidelytech/shared/runtime");
 function noop() {
 }
 var escapeHtml = (s) => s.replace(/[&<>"']/g, (c) => `&#${c.charCodeAt(0)};`);
@@ -1433,6 +1688,17 @@ function runGuide(guide, options = {}) {
     view = null;
     stepDone = false;
   };
+  let returnFocusTo = null;
+  const restoreFocus = () => {
+    const el2 = returnFocusTo;
+    returnFocusTo = null;
+    try {
+      const now = doc.activeElement;
+      const lost = !now || now === doc.body || now.id === "guidely-root";
+      if (el2 && lost && el2.isConnected && typeof el2.focus === "function") el2.focus({ preventScroll: true });
+    } catch {
+    }
+  };
   const end = (reason) => {
     if (ended) return;
     ended = true;
@@ -1444,6 +1710,7 @@ function runGuide(guide, options = {}) {
     else if (reason === "skipped") emit("guide_skipped", step, index);
     scope?.destroy();
     scope = null;
+    restoreFocus();
     try {
       options.onEnd?.(reason);
     } catch (err) {
@@ -1461,7 +1728,7 @@ function runGuide(guide, options = {}) {
     const ctx = getCtx();
     if (step && ctx) {
       for (const branch of step.branches) {
-        if ((0, import_runtime5.evaluateRules)(branch.when, ctx)) {
+        if ((0, import_runtime6.evaluateRules)(branch.when, ctx)) {
           target = steps.findIndex((s) => s.id === branch.goTo);
           if (target >= 0) break;
         }
@@ -1532,9 +1799,9 @@ function runGuide(guide, options = {}) {
       if (mode === "element_click" && (step.advanceValue || target)) {
         const selector = step.advanceValue;
         const handler = (e) => {
-          const t = e.target;
+          const t = composedTarget(e);
           try {
-            if (selector ? t && typeof t.closest === "function" && t.closest(selector) : t && target?.contains(t)) advance();
+            if (selector ? t && closestComposed(t, selector) : t && target && containsComposed(target, t)) advance();
           } catch {
           }
         };
@@ -1582,7 +1849,9 @@ function runGuide(guide, options = {}) {
         asModal,
         onButton: handleButton,
         onClose: () => end("dismissed"),
-        announce
+        announce,
+        runCode: options.runCode,
+        onError
       });
     } catch (err) {
       onError(err);
@@ -1652,7 +1921,7 @@ function runGuide(guide, options = {}) {
     index = i;
     const step = steps[i];
     const ctx = getCtx();
-    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime5.evaluateRules)(step.targeting, ctx)) {
+    if (step.targeting && step.targeting.rules.length && ctx && !(0, import_runtime6.evaluateRules)(step.targeting, ctx)) {
       const nextIndex = i + direction;
       if (nextIndex >= total) return end("completed");
       if (nextIndex < 0) return;
@@ -1694,6 +1963,8 @@ function runGuide(guide, options = {}) {
     guide,
     start() {
       if (status !== "idle") return;
+      const focused = doc.activeElement;
+      if (focused && focused !== doc.body && focused.id !== "guidely-root") returnFocusTo = focused;
       emit("guide_viewed");
       if (total === 0) return end("completed");
       let startIndex = options.startAtStep ? steps.findIndex((s) => s.id === options.startAtStep) : 0;
@@ -1755,7 +2026,7 @@ function runGuide(guide, options = {}) {
 }
 
 // src/checklist.ts
-var import_runtime6 = require("@guidelytech/shared/runtime");
+var import_runtime7 = require("@guidelytech/shared/runtime");
 function renderChecklist(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -1830,7 +2101,7 @@ function renderChecklist(options) {
     bar.setAttribute("aria-valuemax", "100");
     body.textContent = "";
     foot.textContent = "";
-    const complete = (0, import_runtime6.isChecklistComplete)(config, progress);
+    const complete = (0, import_runtime7.isChecklistComplete)(config, progress);
     if (complete) {
       const wrap = doc.createElement("div");
       wrap.className = "g-complete";
@@ -1918,7 +2189,7 @@ function renderChecklist(options) {
 }
 
 // src/survey.ts
-var import_runtime7 = require("@guidelytech/shared/runtime");
+var import_runtime8 = require("@guidelytech/shared/runtime");
 function renderSurvey(options) {
   const { scope, config } = options;
   const doc = scope.ownerDocument;
@@ -2110,14 +2381,14 @@ function renderSurvey(options) {
     config.questions.forEach((q) => {
       const el2 = questionEls.get(q.id);
       if (!el2) return;
-      const visible = (0, import_runtime7.isQuestionVisible)(q, answers);
+      const visible = (0, import_runtime8.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 && (0, import_runtime7.isQuestionVisible)(q, answers) && answers[q.id] === void 0);
+    const missing = config.questions.filter((q) => q.required && (0, import_runtime8.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();
@@ -2165,8 +2436,11 @@ function renderSurvey(options) {
   };
 }
 
+// src/resource-center.ts
+var import_runtime10 = require("@guidelytech/shared/runtime");
+
 // src/help-view.ts
-var import_runtime8 = require("@guidelytech/shared/runtime");
+var import_runtime9 = require("@guidelytech/shared/runtime");
 var SHOW_ME_KINDS = /* @__PURE__ */ new Set(["flow", "modal", "tooltip", "announcement"]);
 function startableGuide(guides, keyOrId) {
   if (!keyOrId || !guides) return null;
@@ -2185,8 +2459,8 @@ function resultRow(doc, icon, title, summary, onOpen, showMe) {
   return row;
 }
 function enhanceShowMe(root, doc, canStart, start) {
-  for (const a of Array.from(root.querySelectorAll(`a[href^="${import_runtime8.SHOW_ME_HREF_PREFIX}"]`))) {
-    const key = (0, import_runtime8.showMeKeyFromHref)(a.getAttribute("href"));
+  for (const a of Array.from(root.querySelectorAll(`a[href^="${import_runtime9.SHOW_ME_HREF_PREFIX}"]`))) {
+    const key = (0, import_runtime9.showMeKeyFromHref)(a.getAttribute("href"));
     const holder = a.closest("p.gd-show-me") ?? a;
     if (!key || !canStart(key)) {
       if (holder !== a) holder.remove();
@@ -2301,10 +2575,11 @@ function createHelpView(options) {
     if (active) return renderArticle(active);
     const data = options.data();
     const member = options.audienceIds?.() ?? [];
-    const sections = (0, import_runtime8.resourceCenterSections)(data.collections, data.articles, member);
+    searchWrap.hidden = !!data.modules && !data.modules.includes("search");
+    const sections = (0, import_runtime9.resourceCenterSections)(data.collections, data.articles, member);
     const q = query.trim().toLowerCase();
     if (q) {
-      const walkthroughs = (data.recommended ?? []).filter((g) => (0, import_runtime8.matchesHelpQuery)(g.name, q) && startableGuide(options.guides?.() ?? data.recommended, g.id));
+      const walkthroughs = (data.recommended ?? []).filter((g) => (0, import_runtime9.matchesHelpQuery)(g.name, q) && startableGuide(options.guides?.() ?? data.recommended, g.id));
       if (walkthroughs.length) {
         section(`Walkthroughs (${walkthroughs.length})`);
         for (const g of walkthroughs) body.appendChild(resultRow(doc, "\u25B6", g.name, "Show me, step by step", () => options.onStartGuide?.(g.id)));
@@ -2313,10 +2588,10 @@ function createHelpView(options) {
     body.append(...options.extra?.(q) ?? []);
     if (q) {
       const visible = sections.flatMap((s) => s.articles);
-      const local = visible.filter((a) => (0, import_runtime8.matchesHelpQuery)(`${a.title} ${a.summary}`, q));
+      const local = visible.filter((a) => (0, import_runtime9.matchesHelpQuery)(`${a.title} ${a.summary}`, q));
       const seen = new Set(local.map((a) => a.id));
       const hidden = new Set(data.articles.map((a) => a.id).filter((id) => !visible.some((v) => v.id === id)));
-      const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id) && !hidden.has(a.id) && (0, import_runtime8.isArticleListed)(data.collections, a, member))];
+      const merged = [...local, ...serverResults.filter((a) => !seen.has(a.id) && !hidden.has(a.id) && (0, import_runtime9.isArticleListed)(data.collections, a, member))];
       section(`Results (${merged.length})`);
       if (!merged.length) body.appendChild(el(doc, "div", "g-rc-empty", "No articles match your search."));
       merged.forEach(articleButton);
@@ -2331,55 +2606,124 @@ function createHelpView(options) {
         body.appendChild(b);
       });
     }
-    if (data.recommended?.length) {
-      section("Recommended");
-      data.recommended.forEach((g) => {
-        const b = listItem(doc, "\u25B6", g.name, "Start guide");
-        b.addEventListener("click", () => options.onStartGuide?.(g.id));
-        body.appendChild(b);
-      });
-    }
-    if (data.checklists?.length) {
-      section("Checklists");
-      data.checklists.forEach((g) => {
-        const b = listItem(doc, "\u2611", g.name, "Open checklist");
-        b.addEventListener("click", () => options.onOpenChecklist?.(g.id));
-        body.appendChild(b);
-      });
-    }
-    for (const s of sections) {
-      section(s.collection ? s.path.join(" \u203A ") : "Articles", s.depth);
-      s.articles.forEach(articleButton);
-    }
-    if (data.faqs?.length) {
-      section("FAQ");
-      data.faqs.forEach((f) => {
-        const b = listItem(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));
+    const renderers = {
+      search: () => {
+      },
+      announcements: () => {
+        if (!data.announcements?.length) return;
+        section(import_runtime9.RC_MODULE_LABELS.announcements);
+        const seen = data.announcementsSeenAt ? Date.parse(data.announcementsSeenAt) : NaN;
+        data.announcements.slice(0, 20).forEach((n) => body.appendChild(announcementItem(n, Number.isNaN(seen) || Date.parse(n.publishedAt) > seen)));
+      },
+      guides: () => {
+        if (!data.recommended?.length) return;
+        section("Recommended");
+        data.recommended.forEach((g) => {
+          const b = listItem(doc, "\u25B6", g.name, "Start guide");
+          b.addEventListener("click", () => options.onStartGuide?.(g.id));
+          body.appendChild(b);
         });
-        body.append(b, a);
-      });
+      },
+      checklists: () => {
+        if (!data.checklists?.length) return;
+        section("Checklists");
+        data.checklists.forEach((g) => {
+          const b = listItem(doc, "\u2611", g.name, "Open checklist");
+          b.addEventListener("click", () => options.onOpenChecklist?.(g.id));
+          body.appendChild(b);
+        });
+      },
+      articles: () => {
+        for (const s of sections) {
+          section(s.collection ? s.path.join(" \u203A ") : "Articles", s.depth);
+          s.articles.forEach(articleButton);
+        }
+      },
+      faqs: () => {
+        if (!data.faqs?.length) return;
+        section("FAQ");
+        data.faqs.forEach((f) => {
+          const b = listItem(doc, "?", f.question);
+          b.setAttribute("aria-expanded", "false");
+          const a = el(doc, "div", "g-faq-a");
+          a.id = `g-faq-${f.id}`;
+          b.setAttribute("aria-controls", a.id);
+          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);
+        });
+      },
+      links: () => {
+        if (!data.links?.length) return;
+        section("Links");
+        data.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));
+          a.setAttribute("aria-label", `${l.label} (opens in a new tab)`);
+          body.appendChild(a);
+        });
+      }
+    };
+    for (const id of data.modules ?? import_runtime9.RC_MODULE_IDS) renderers[id]?.();
+    if (!body.childNodes.length) body.appendChild(el(doc, "div", "g-rc-empty", "Nothing here yet."));
+  }
+  function announcementItem(n, unread) {
+    const item = el(doc, "article", `g-rc-news${unread ? " g-rc-news-unread" : ""}`);
+    const head = el(doc, "div", "g-rc-news-head");
+    const title = el(doc, "h3", "g-rc-news-title", n.title);
+    head.appendChild(title);
+    if (unread) {
+      const dot = el(doc, "span", "g-rc-news-new", "New");
+      head.appendChild(dot);
+    }
+    const date = el(doc, "time", "g-rc-news-date");
+    date.dateTime = n.publishedAt;
+    try {
+      date.textContent = new Date(n.publishedAt).toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+    } catch {
+      date.textContent = n.publishedAt.slice(0, 10);
+    }
+    item.append(head, date);
+    if (n.body) {
+      const b = el(doc, "div", "g-body g-rc-news-body");
+      setSanitizedHtml(b, n.body);
+      item.appendChild(b);
+    }
+    const actions = el(doc, "div", "g-rc-news-actions");
+    const guide = n.guideId ? startableGuide(options.guides?.(), n.guideId) : null;
+    if (guide) {
+      const b = el(doc, "button", "g-btn g-btn-primary", n.linkLabel || "Show me");
+      b.type = "button";
+      b.addEventListener("click", () => options.onShowMe ? options.onShowMe(guide.key) : options.onStartGuide?.(guide.id));
+      actions.appendChild(b);
+    }
+    if (n.articleId) {
+      const listed = options.data().articles.find((a) => a.id === n.articleId);
+      if (listed) {
+        const b = el(doc, "button", "g-btn g-btn-secondary", guide ? "Read more" : n.linkLabel || "Read more");
+        b.type = "button";
+        b.addEventListener("click", () => openArticle(listed));
+        actions.appendChild(b);
+      }
     }
-    if (data.links?.length) {
-      section("Links");
-      data.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 (n.url && /^https?:\/\//i.test(n.url)) {
+      const a = el(doc, "a", "g-btn g-btn-link", !guide && !n.articleId && n.linkLabel ? n.linkLabel : "Learn more");
+      a.href = n.url;
+      a.target = "_blank";
+      a.rel = "noopener noreferrer";
+      actions.appendChild(a);
     }
-    if (!body.childNodes.length) body.appendChild(el(doc, "div", "g-rc-empty", "Nothing here yet."));
+    if (actions.childNodes.length) item.appendChild(actions);
+    return item;
   }
   let debounce = null;
   const onInput = () => {
@@ -2451,6 +2795,19 @@ function renderResourceCenter(options) {
   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 badge = el(doc, "span", "g-launcher-badge");
+  badge.hidden = true;
+  launcher.appendChild(badge);
+  const modules = () => (0, import_runtime10.orderedModules)(config.modules).filter((m) => m.enabled && (!("targeting" in m) || !m.targeting || !options.evaluate || options.evaluate(m.targeting))).map((m) => m.id);
+  const announcements = () => modules().includes("announcements") ? (0, import_runtime10.visibleAnnouncements)(config.announcements, options.audienceIds?.() ?? []) : [];
+  const updateBadge = () => {
+    const unread = (0, import_runtime10.unreadAnnouncements)(announcements(), options.announcementsSeenAt?.());
+    badge.hidden = unread === 0;
+    badge.textContent = unread > 9 ? "9+" : String(unread);
+    const label = config.launcher.label || config.title;
+    launcher.setAttribute("aria-label", unread ? `${label} (${unread} new update${unread === 1 ? "" : "s"})` : label);
+  };
+  updateBadge();
   const panel = el(doc, "div", `g-panel ${pos}`);
   panel.setAttribute("role", "dialog");
   panel.setAttribute("aria-label", config.title);
@@ -2461,9 +2818,20 @@ function renderResourceCenter(options) {
   close.type = "button";
   close.setAttribute("aria-label", "Close");
   head.appendChild(close);
+  let seenAtOpen = options.announcementsSeenAt?.() ?? null;
   const help = createHelpView({
     doc,
-    data: () => ({ collections: config.collections, articles: config.articles, recommended: byId(config.recommendedGuideIds), checklists: byId(config.checklistGuideIds), faqs: config.faqs, links: config.links }),
+    data: () => ({
+      collections: config.collections,
+      articles: config.articles,
+      recommended: byId(config.recommendedGuideIds),
+      checklists: byId(config.checklistGuideIds),
+      faqs: config.faqs,
+      links: config.links,
+      announcements: announcements(),
+      announcementsSeenAt: seenAtOpen,
+      modules: modules()
+    }),
     search: options.search,
     audienceIds: options.audienceIds,
     loadArticle: options.loadArticle,
@@ -2487,8 +2855,13 @@ function renderResourceCenter(options) {
     panel.hidden = !v;
     launcher.setAttribute("aria-expanded", String(v));
     if (v) {
+      seenAtOpen = options.announcementsSeenAt?.() ?? null;
       help.render();
       help.focusSearch();
+      if (announcements().length) {
+        options.onAnnouncementsSeen?.();
+        updateBadge();
+      }
       options.onOpen?.();
     } else {
       help.reset();
@@ -2565,7 +2938,7 @@ function startAuthoring(options) {
       outline.hidden = true;
       return;
     }
-    const r = el2.getBoundingClientRect();
+    const r = visualRect(el2);
     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` });
@@ -2573,9 +2946,9 @@ function startAuthoring(options) {
     label.style.top = r.top < 30 ? "100%" : "-24px";
   };
   const elementAt = (x, y) => {
-    const el2 = doc.elementFromPoint(x, y);
+    const el2 = deepElementFromPoint(doc, x, y);
     if (!el2 || isGuidelyElement(el2) || el2 === doc.documentElement || el2 === doc.body) return null;
-    return el2;
+    return componentAnchor(el2);
   };
   const onMove = (e) => {
     if (!picking || stopped) return;
@@ -2590,7 +2963,7 @@ function startAuthoring(options) {
   };
   const onClick = (e) => {
     if (!picking || stopped) return;
-    if (e.target && isGuidelyElement(e.target)) return;
+    if (isGuidelyElement(composedTarget(e))) return;
     const el2 = elementAt(e.clientX, e.clientY) ?? hovered;
     if (!el2) return;
     e.preventDefault();
@@ -2603,8 +2976,7 @@ function startAuthoring(options) {
   };
   const swallow = (e) => {
     if (!picking || stopped) return;
-    const t = e.target;
-    if (t && isGuidelyElement(t)) return;
+    if (isGuidelyElement(composedTarget(e))) return;
     e.preventDefault();
     e.stopPropagation();
   };
@@ -2675,17 +3047,15 @@ function highlightSelectors(selectors, options = {}) {
   const scope = createScope(null, { theme: "light", animation: "none" }, doc);
   const boxes = [];
   const counts = [];
-  let resolved = null;
+  const resolved = resolveTarget(selectors, doc);
   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 r = visualRect(el2);
     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` });
@@ -2706,12 +3076,19 @@ function highlightSelectors(selectors, options = {}) {
 0 && (module.exports = {
   DEFAULT_THEME,
   HOST_ID,
+  SHADOW_SEPARATOR,
   STYLES,
   TargetTimeoutError,
   anchor,
   applyTheme,
   buildCard,
+  closestComposed,
+  componentAnchor,
+  composedParent,
+  composedTarget,
+  containsComposed,
   createScope,
+  deepElementFromPoint,
   describeElement,
   destroyHost,
   enhancePdfViewers,
@@ -2722,6 +3099,7 @@ function highlightSelectors(selectors, options = {}) {
   isChecklistComplete,
   isGuidelyElement,
   isQuestionVisible,
+  isStableClass,
   isStableId,
   isVisible,
   normalizeText,
@@ -2745,10 +3123,12 @@ function highlightSelectors(selectors, options = {}) {
   sanitizeHtml,
   sanitizeToFragment,
   setSanitizedHtml,
+  shadowHostChain,
   startAuthoring,
   textSnapshotOf,
   trackRect,
   urlMatches,
+  visualRect,
   waitForTarget
 });
 //# sourceMappingURL=index.cjs.map