@guidelytech/guide-runtime 0.9.0 → 0.11.0

package/dist/capture.cjs

@@ -76,6 +76,12 @@ var CAPTURE_STYLES = `
 // src/selectors.ts
 var import_runtime = require("@guidelytech/shared/runtime");
 var HOST_ID = "guidely-root";
+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();
 }
@@ -92,6 +98,56 @@ 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(el) {
+  const root = el.getRootNode?.();
+  return isShadowRoot(root) ? root : null;
+}
+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 el of safeQueryAll(scope, "*")) if (el.shadowRoot) hosts.push(el);
+    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((el) => el.shadowRoot).filter((sr) => !!sr);
+  });
+  return matches;
+}
 function escapeCss(value) {
   const g = globalThis;
   if (g.CSS && typeof g.CSS.escape === "function") return g.CSS.escape(value);
@@ -107,14 +163,15 @@ function isStableId(id) {
 function isStableClass(cls) {
   return !!cls && !GENERATED_CLASS.test(cls) && cls.length <= 40;
 }
-function uniqueIn(doc, selector, el) {
-  const all = safeQueryAll(doc, selector);
+function uniqueWithin(root, selector, el) {
+  const all = safeQueryAll(root, selector);
   return all.length === 1 && all[0] === el;
 }
 function attrSelector(name, value) {
   return `[${name}='${value.replace(/\\/g, "\\\\").replace(/'/g, "\\'")}']`;
 }
-function cssPath(el, doc) {
+function cssPath(el, root) {
+  const doc = el.ownerDocument;
   const segments = [];
   let cur = el;
   while (cur && cur.nodeType === 1 && cur !== doc.body && cur !== doc.documentElement) {
@@ -134,20 +191,48 @@ function cssPath(el, doc) {
     }
     segments.unshift(seg);
     const candidate = segments.join(" > ");
-    if (uniqueIn(doc, candidate, el)) return candidate;
+    if (uniqueWithin(root, candidate, el)) return candidate;
     cur = parent;
   }
   const full = segments.join(" > ");
-  return uniqueIn(doc, full, el) ? full : null;
+  return uniqueWithin(root, full, el) ? full : null;
+}
+function shadowHostChain(el) {
+  const steps = [];
+  for (let root = shadowRootOf(el); 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(el, selector) {
+  const root = shadowRootOf(el);
+  if (!root) return uniqueWithin(el.ownerDocument, selector, el) ? selector : null;
+  if (!uniqueWithin(root, selector, el)) return null;
+  const doc = el.ownerDocument;
+  const only = (sel) => {
+    const all = queryCss(doc, sel, true);
+    return all.length === 1 && all[0] === el;
+  };
+  if (only(selector)) return selector;
+  const chain = shadowHostChain(el);
+  const scoped = chain ? chain + SHADOW_SEPARATOR + selector : null;
+  return scoped && only(scoped) ? scoped : null;
+}
+function shadowText(el) {
+  if (!el.shadowRoot) return "";
+  const parts = Array.from(el.shadowRoot.children).filter((c) => !/^(STYLE|SCRIPT|TEMPLATE)$/.test(c.tagName));
+  return normalizeText(parts.map((c) => c.innerText ?? c.textContent).join(" "));
 }
 function textSnapshotOf(el) {
   const he = el;
-  const own = normalizeText(he.innerText ?? el.textContent);
+  const own = normalizeText(he.innerText ?? el.textContent) || shadowText(el);
   const alt = normalizeText(el.getAttribute("aria-label") || el.getAttribute("title") || el.getAttribute("placeholder") || el.getAttribute("alt") || el.value);
   return (own || alt).slice(0, 200);
 }
 function generateSelectors(el) {
-  const doc = el.ownerDocument;
   const out = [];
   const seen = /* @__PURE__ */ new Set();
   const push = (s) => {
@@ -158,9 +243,15 @@ function generateSelectors(el) {
     }
   };
   const tag = el.tagName.toLowerCase();
+  const pushFor = (kind, selector, value, label) => {
+    const resolved = selectorFor(el, selector);
+    if (resolved === selector) push({ kind, value, label });
+    else if (resolved) push({ kind: "css", value: resolved, label });
+    return !!resolved;
+  };
   const guidelyId = el.getAttribute("data-guidely-id");
-  if (guidelyId && uniqueIn(doc, attrSelector("data-guidely-id", guidelyId), el)) push({ kind: "guidely-id", value: guidelyId, label: `Guidely id ${guidelyId}` });
-  if (isStableId(el.id) && uniqueIn(doc, `#${escapeCss(el.id)}`, el)) push({ kind: "id", value: `#${el.id}`, label: `id ${el.id}` });
+  if (guidelyId) pushFor("guidely-id", attrSelector("data-guidely-id", guidelyId), guidelyId, `Guidely id ${guidelyId}`);
+  if (isStableId(el.id)) pushFor("id", `#${escapeCss(el.id)}`, `#${el.id}`, `id ${el.id}`);
   const dataAttrs = Array.from(el.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);
@@ -169,42 +260,75 @@ function generateSelectors(el) {
   });
   for (const a of dataAttrs) {
     const sel = attrSelector(a.name, a.value);
-    if (uniqueIn(doc, sel, el)) push({ kind: "data-attr", value: sel, label: `${a.name}=${a.value}` });
-    else if (uniqueIn(doc, tag + sel, el)) 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 = el.getAttribute("aria-label");
   if (aria && aria.length <= 120) {
     const sel = attrSelector("aria-label", aria);
-    if (uniqueIn(doc, sel, el)) push({ kind: "aria", value: sel, label: aria });
-    else if (uniqueIn(doc, tag + sel, el)) push({ kind: "aria", value: tag + sel, label: aria });
+    if (!pushFor("aria", sel, sel, aria)) pushFor("aria", tag + sel, tag + sel, aria);
   }
   const name = el.getAttribute("name");
-  if (name && uniqueIn(doc, tag + attrSelector("name", name), el)) 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 = el.getAttribute("role");
   if (role) {
     const title = el.getAttribute("title") || el.getAttribute("aria-labelledby");
     const sel = title ? `[role='${role}']${attrSelector(el.getAttribute("title") ? "title" : "aria-labelledby", title)}` : `[role='${role}']`;
-    if (uniqueIn(doc, sel, el)) push({ kind: "css", value: sel, label: `role ${role}` });
+    pushFor("css", sel, sel, `role ${role}`);
   }
   if (tag === "a") {
     const href = el.getAttribute("href");
-    if (href && href.length <= 200 && uniqueIn(doc, `a${attrSelector("href", href)}`, el)) 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(el, doc);
-  if (path) push({ kind: "css", value: path, label: "css path" });
+  const path = cssPath(el, shadowRootOf(el) ?? el.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(el.innerText ?? el.textContent);
     if (text && text.length <= 80) push({ kind: "text", value: text, label: `text "${text}"` });
   }
   return out.slice(0, 10);
 }
+function visualRect(el) {
+  const own = el.getBoundingClientRect();
+  if (!el.shadowRoot) return own;
+  const boxes = [own, ...Array.from(el.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(el) {
+  if (!hasLayout(el.ownerDocument)) return el;
+  let cur = el;
+  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 h = visualRect(host);
+    const hostArea = h.width * h.height;
+    const inside = r.left >= h.left - 1 && r.top >= h.top - 1 && r.right <= h.right + 1 && r.bottom <= h.bottom + 1;
+    if (!area || !inside || hostArea > area * ANCHOR_MAX_AREA_RATIO) break;
+    cur = host;
+  }
+  return cur;
+}
 function describeElement(el) {
-  const r = el.getBoundingClientRect();
+  const target = componentAnchor(el);
+  const r = visualRect(target);
   return {
-    selectors: generateSelectors(el),
-    textSnapshot: textSnapshotOf(el),
+    selectors: generateSelectors(target),
+    textSnapshot: textSnapshotOf(target) || textSnapshotOf(el),
     rect: { x: r.x, y: r.y, width: r.width, height: r.height },
-    tag: el.tagName.toLowerCase()
+    tag: target.tagName.toLowerCase()
   };
 }
 
@@ -622,6 +746,9 @@ function screenshotDataUrl(canvas) {
   }
 }
 
+// src/host.ts
+var import_runtime3 = require("@guidelytech/shared/runtime");
+
 // src/styles.ts
 var STYLES = `
 :host{all:initial;position:static;display:block;contain:none}
@@ -805,6 +932,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
@@ -893,6 +1035,7 @@ function resolveTheme(theme, appearance) {
 }
 function applyTheme(el, vars) {
   el.style.setProperty("--g-primary", vars.primary);
+  if (/^#[0-9a-f]{3}([0-9a-f]{3})?$/i.test(vars.primary)) el.style.setProperty("--g-primary-text", (0, import_runtime3.readableTextOn)(vars.primary));
   el.style.setProperty("--g-bg", vars.bg);
   el.style.setProperty("--g-text", vars.text);
   el.style.setProperty("--g-radius", `${vars.radius}px`);
@@ -909,6 +1052,16 @@ function createScope(theme, appearance, doc = document) {
   const vars = resolveTheme(theme, appearance);
   applyTheme(el, vars);
   handle.shadow.appendChild(el);
+  const css = [appearance ? theme?.customCss : void 0, appearance?.customCss].filter((c) => !!c && !!c.trim());
+  let style = null;
+  if (css.length) {
+    const id = `c${++cssScopeSeq}`;
+    el.setAttribute("data-g-css", id);
+    style = doc.createElement("style");
+    style.setAttribute("data-g-custom", id);
+    style.textContent = css.map((c) => (0, import_runtime3.scopeCustomCss)(c, `.g-scope[data-g-css="${id}"]`)).join("\n");
+    handle.shadow.insertBefore(style, el);
+  }
   let mq = null;
   const onChange = () => applyTheme(el, resolveTheme(theme, appearance));
   if ((appearance?.theme ?? "auto") === "auto" && typeof window !== "undefined" && typeof window.matchMedia === "function") {
@@ -924,10 +1077,12 @@ function createScope(theme, appearance, doc = document) {
     vars,
     destroy() {
       mq?.removeEventListener?.("change", onChange);
+      style?.remove();
       el.remove();
     }
   };
 }
+var cssScopeSeq = 0;
 
 // src/capture.ts
 var DOUBLE_CLICK_MS = 400;
@@ -948,12 +1103,6 @@ function button(doc, text, cls, attr) {
   b.setAttribute(attr, "");
   return b;
 }
-function eventTarget(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;
-}
 function deepActiveElementIn(el) {
   const root = el.getRootNode();
   return root.activeElement ?? null;
@@ -1097,7 +1246,7 @@ function startCapture(options) {
   };
   const onPointerDown = (e) => {
     if (!recording() || e.button !== 0) return;
-    const target = eventTarget(e);
+    const target = composedTarget(e);
     if (!target || isGuidelyElement(target)) return;
     const active = deepActiveElement(doc);
     if (active && active !== target && !active.contains(target) && isTextEntry(active)) flushField(active);
@@ -1121,7 +1270,7 @@ function startCapture(options) {
   };
   const onChange = (e) => {
     if (!recording()) return;
-    const el = eventTarget(e);
+    const el = composedTarget(e);
     if (!el || isGuidelyElement(el)) return;
     if (el.tagName === "SELECT") {
       const sensitive = isSensitiveField(el, mask);
@@ -1138,19 +1287,19 @@ function startCapture(options) {
     if (isTextEntry(el)) flushField(el);
   };
   const onFocusIn = (e) => {
-    const el = eventTarget(e);
+    const el = composedTarget(e);
     if (el && !isGuidelyElement(el) && isTextEntry(el)) {
       const host = el.tagName === "INPUT" || el.tagName === "TEXTAREA" ? el : actionTarget(el);
       baseline.set(host, fieldValue(host));
     }
   };
   const onFocusOut = (e) => {
-    const el = eventTarget(e);
+    const el = composedTarget(e);
     if (el && el.tagName !== "INPUT" && el.tagName !== "TEXTAREA" && isTextEntry(el)) flushField(el);
   };
   const onKeyDown = (e) => {
     if (e.key !== "Enter" || e.isComposing) return;
-    const el = eventTarget(e);
+    const el = composedTarget(e);
     if (el && (el.tagName === "INPUT" || (e.metaKey || e.ctrlKey) && isTextEntry(el))) flushField(el);
   };
   const checkUrl = () => {
@@ -1169,7 +1318,7 @@ function startCapture(options) {
     movedAt = performance.now();
   };
   const onInput = (e) => {
-    const el = eventTarget(e);
+    const el = composedTarget(e);
     if (el && !isGuidelyElement(el)) typedAt = performance.now();
   };
   const expand = (open) => {