@holdyapp/sdk 1.5.0 → 1.6.0

package/dist/index.cjs

@@ -630,6 +630,119 @@ function installFrictionCapture(opts) {
   };
 }
 
+// src/skeleton.ts
+var SKELETON_SELECTOR = 'a[href], button, input, select, textarea, [role="button"], [role="link"], [role="tab"], [role="menuitem"], [role="checkbox"], [role="radio"], [role="switch"], [data-testid]';
+var SKELETON_MAX_ELEMENTS = 80;
+var SKELETON_DELAY_MS = 1500;
+var SENT_STORAGE_KEY = "holdy_skeletons";
+var SENT_STORAGE_MAX = 200;
+function fnv1a(input) {
+  let hash = 2166136261;
+  for (let i = 0; i < input.length; i++) {
+    hash ^= input.charCodeAt(i);
+    hash = Math.imul(hash, 16777619) >>> 0;
+  }
+  return hash.toString(16).padStart(8, "0");
+}
+function attr(el, name, max) {
+  const value = el.getAttribute(name);
+  if (!value) return void 0;
+  const trimmed = value.replace(/\s+/g, " ").trim().slice(0, max);
+  return trimmed || void 0;
+}
+function isVisible(el) {
+  if (!el.getBoundingClientRect) return true;
+  const rect = el.getBoundingClientRect();
+  return rect.width > 0 && rect.height > 0;
+}
+function relativeBox(rect, viewport) {
+  const pct = (value, base) => base > 0 ? Math.max(0, Math.min(100, Math.round(value / base * 100))) : 0;
+  return [pct(rect.x, viewport.width), pct(rect.y + viewport.scrollY, viewport.height), pct(rect.width, viewport.width), pct(rect.height, viewport.height)];
+}
+function describeSkeletonElement(el, viewport) {
+  const out = { t: el.tagName.toLowerCase() };
+  const role = attr(el, "role", 40);
+  if (role) out.r = role;
+  const testid = attr(el, "data-testid", 80);
+  if (testid) out.id = testid;
+  const name = attr(el, "name", 80);
+  if (name) out.n = name;
+  const label = attr(el, "aria-label", 80);
+  if (label) out.l = label;
+  if (out.t === "input" || out.t === "button") {
+    const type = attr(el, "type", 20);
+    if (type) out.k = type.toLowerCase();
+  }
+  if (viewport && el.getBoundingClientRect) out.b = relativeBox(el.getBoundingClientRect(), viewport);
+  return out;
+}
+function collectSkeleton(root, path, viewport) {
+  const found = root.querySelectorAll(SKELETON_SELECTOR);
+  const visible = [];
+  for (let i = 0; i < found.length; i++) {
+    const el = found[i];
+    if (el.tagName.toLowerCase() === "input" && (el.getAttribute("type") ?? "").toLowerCase() === "hidden") continue;
+    if (!isVisible(el)) continue;
+    visible.push(el);
+  }
+  const elements = visible.slice(0, SKELETON_MAX_ELEMENTS).map((el) => describeSkeletonElement(el, viewport));
+  const structural = elements.map(({ b: _b, ...rest }) => rest);
+  return { path, hash: fnv1a(JSON.stringify(structural)), count: visible.length, elements };
+}
+function loadSent() {
+  try {
+    const raw = sessionStorage.getItem(SENT_STORAGE_KEY);
+    const list = raw ? JSON.parse(raw) : [];
+    return new Set(Array.isArray(list) ? list.filter((x) => typeof x === "string") : []);
+  } catch {
+    return /* @__PURE__ */ new Set();
+  }
+}
+function saveSent(sent) {
+  try {
+    sessionStorage.setItem(SENT_STORAGE_KEY, JSON.stringify([...sent].slice(-SENT_STORAGE_MAX)));
+  } catch {
+    return;
+  }
+}
+function installSkeletonCapture(opts) {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return { onNavigate: () => void 0, teardown: () => void 0 };
+  }
+  const delay = opts.delayMs ?? SKELETON_DELAY_MS;
+  const sent = loadSent();
+  let pending = null;
+  const capture = (path) => {
+    pending = null;
+    if (location.pathname !== path) return;
+    try {
+      const viewport = {
+        width: window.innerWidth,
+        height: Math.max(document.documentElement.scrollHeight, window.innerHeight),
+        scrollY: window.scrollY
+      };
+      const skeleton = collectSkeleton(document, path, viewport);
+      const key = `${path}:${skeleton.hash}`;
+      if (sent.has(key)) return;
+      sent.add(key);
+      saveSent(sent);
+      opts.onSkeleton(skeleton);
+    } catch {
+      return;
+    }
+  };
+  return {
+    onNavigate: (path) => {
+      if (pending) clearTimeout(pending);
+      pending = setTimeout(() => capture(path), delay);
+    },
+    teardown: () => {
+      if (pending) clearTimeout(pending);
+      pending = null;
+    }
+  };
+}
+
 // src/web-context.ts
 var UTM_KEYS = [
   "utm_source",
@@ -748,7 +861,7 @@ function buildWebContext() {
 }
 
 // src/arm.ts
-function fnv1a(input) {
+function fnv1a2(input) {
   let hash = 2166136261;
   for (let i = 0; i < input.length; i++) {
     hash ^= input.charCodeAt(i);
@@ -757,7 +870,7 @@ function fnv1a(input) {
   return hash >>> 0;
 }
 function changeBucket(changeId, accountKey) {
-  return fnv1a(`${changeId}:${accountKey}`) % 100;
+  return fnv1a2(`${changeId}:${accountKey}`) % 100;
 }
 function changeArm(changeId, accountKey, holdoutPct) {
   return changeBucket(changeId, accountKey) < holdoutPct ? "holdout" : "change";
@@ -1047,6 +1160,7 @@ var HoldyWeb = class extends HoldyCore {
   teardownAutoCapture = null;
   friction = null;
   changes = null;
+  skeleton = null;
   constructor(opts) {
     super("sdk_web", opts);
     this.anonymousId = resolveAnonymousId();
@@ -1064,12 +1178,19 @@ var HoldyWeb = class extends HoldyCore {
         onFriction: (signal) => this.track(`$${signal.kind}`, signal.properties)
       });
     }
+    if (opts.skeleton !== false) {
+      this.skeleton = installSkeletonCapture({
+        onSkeleton: (skeleton) => this.track("$page_skeleton", { ...skeleton })
+      });
+    }
     if (opts.autoCapture !== false) {
       this.teardownAutoCapture = installAutoCapture({
         onNavigate: (kind) => {
           this.page(void 0, { navigation: kind });
-          this.friction?.onNavigate(typeof location !== "undefined" ? location.pathname : "/");
+          const path = typeof location !== "undefined" ? location.pathname : "/";
+          this.friction?.onNavigate(path);
           this.changes?.onNavigate();
+          this.skeleton?.onNavigate(path);
         }
       });
     }
@@ -1119,6 +1240,8 @@ var HoldyWeb = class extends HoldyCore {
     this.friction = null;
     this.changes?.teardown();
     this.changes = null;
+    this.skeleton?.teardown();
+    this.skeleton = null;
     await super.shutdown();
   }
   environmentContext() {