arcy.js 0.1.4 → 0.1.6

package/dist/{picker-GPZ2GHB4.js → picker-6REZLJW3.js}

@@ -1,8 +1,8 @@
 import { PICKER_CONTRACT, PICKER_GLOBAL } from './chunk-DKYMIAYF.js';
-import { SCREENSHOT_RENDER_BUDGET_MS } from './chunk-GDGE3HLE.js';
+import { SCREENSHOT_RENDER_BUDGET_MS } from './chunk-7S5DA67F.js';
 import { createShell, injectStyles, warn, HOST_ATTRIBUTE } from './chunk-LGWYJSYX.js';
-import { matchTarget } from './chunk-NIHUDSWK.js';
-import { resolveInteractiveTarget, createTargetFingerprint, captureEventFingerprint, closestAcrossShadow, isStableId, containsPii, SELECTOR_CANDIDATES_MAX, collectElementsDeep, querySelectorAllDeep } from './chunk-NY3NXM2V.js';
+import { matchTarget } from './chunk-QDCO2MRA.js';
+import { resolveInteractiveTarget, createTargetFingerprint, captureEventFingerprint, closestAcrossShadow, isStableId, containsPii, SELECTOR_CANDIDATES_MAX, parentOrHost, collectElementsDeep, querySelectorAllDeep } from './chunk-AW7DHYSA.js';
 
 /* arcy.js — https://arcyai.com */
 
@@ -1667,6 +1667,7 @@ var OUTPUT_MAX_DPR = 2;
 var OUTPUT_MAX_PIXELS = 26e5;
 var DATA_URL_SOFT_MAX = 36e5;
 var RENDER_TIMEOUT_MS = SCREENSHOT_RENDER_BUDGET_MS;
+var RESOURCE_TIMEOUT_MS = 1500;
 var PII_PATTERNS = [
   /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
   /\b\d{3}-\d{2}-\d{4}\b/g,
@@ -1701,6 +1702,213 @@ function computeCropRect(target, viewportWidth, viewportHeight) {
   if (bottom - top > height) top += (bottom - top - height) / 2;
   return { left, top, width: Math.max(0, width), height: Math.max(0, height) };
 }
+var SETTLE_MAX_MS = 900;
+var SETTLE_STABLE_FRAMES = 2;
+function effectiveOpacity(el, view) {
+  let opacity = 1;
+  let current = el;
+  let depth = 0;
+  while (current !== null && depth < 64) {
+    try {
+      const value = Number.parseFloat(view.getComputedStyle(current).opacity);
+      if (!Number.isNaN(value)) opacity *= value;
+    } catch {
+      break;
+    }
+    if (opacity <= 1e-3) return 0;
+    current = parentOrHost(current);
+    depth++;
+  }
+  return opacity;
+}
+function waitUntilSettled(el, view) {
+  return new Promise((resolve) => {
+    const raf = view.requestAnimationFrame;
+    if (typeof raf !== "function") {
+      resolve();
+      return;
+    }
+    const start = Date.now();
+    let previous = null;
+    let stable = 0;
+    const check = () => {
+      try {
+        if (Date.now() - start >= SETTLE_MAX_MS) {
+          resolve();
+          return;
+        }
+        const rect = el.getBoundingClientRect();
+        const now = `${Math.round(rect.left)},${Math.round(rect.top)},${Math.round(rect.width)},${Math.round(rect.height)}`;
+        const opaque = effectiveOpacity(el, view) >= 0.99;
+        stable = opaque && now === previous ? stable + 1 : 0;
+        previous = now;
+        if (stable >= SETTLE_STABLE_FRAMES) {
+          resolve();
+          return;
+        }
+        raf.call(view, check);
+      } catch {
+        resolve();
+      }
+    };
+    raf.call(view, check);
+  });
+}
+function findRenderRoot(el, crop, root, view) {
+  let covering = null;
+  let cheapest = null;
+  let current = el;
+  let depth = 0;
+  while (current !== null && current !== root && depth < 64) {
+    if (isTransformed(current, view)) {
+      covering = null;
+      cheapest = null;
+    } else {
+      const rect = current.getBoundingClientRect();
+      if (covering === null && covers(rect, crop)) covering = current;
+      if (cheapest === null && keptRatio(rect, crop) >= MIN_CROP_KEPT) {
+        cheapest = current;
+      }
+    }
+    current = parentOrHost(current);
+    depth++;
+  }
+  if (covering !== null && isAffordable(covering, view)) return covering;
+  return cheapest ?? covering ?? root;
+}
+function isAffordable(el, view) {
+  if (countElements(el) > NODE_BUDGET) return false;
+  const rect = el.getBoundingClientRect();
+  const viewport = Math.max(1, view.innerWidth * view.innerHeight);
+  return rect.width * rect.height / viewport <= AREA_BUDGET_SCREENS;
+}
+var NODE_BUDGET = 800;
+var AREA_BUDGET_SCREENS = 3;
+var MIN_CROP_KEPT = 0.4;
+function keptRatio(bounds, crop) {
+  const whole = crop.width * crop.height;
+  if (whole <= 0) return 0;
+  const kept = clipCrop(crop, {
+    left: bounds.left,
+    top: bounds.top,
+    width: bounds.width,
+    height: bounds.height
+  });
+  return kept.width * kept.height / whole;
+}
+function countElements(el) {
+  try {
+    return el.getElementsByTagName("*").length;
+  } catch {
+    return Number.MAX_SAFE_INTEGER;
+  }
+}
+function clipCrop(crop, bounds) {
+  const left = Math.max(crop.left, bounds.left);
+  const top = Math.max(crop.top, bounds.top);
+  const right = Math.min(crop.left + crop.width, bounds.left + bounds.width);
+  const bottom = Math.min(crop.top + crop.height, bounds.top + bounds.height);
+  return {
+    left,
+    top,
+    width: Math.max(0, right - left),
+    height: Math.max(0, bottom - top)
+  };
+}
+function isTransformed(el, view) {
+  try {
+    const style = view.getComputedStyle(el);
+    return style.transform !== "" && style.transform !== "none" || style.perspective !== "" && style.perspective !== "none" || style.translate !== "" && style.translate !== "none" || style.rotate !== "" && style.rotate !== "none" || style.scale !== "" && style.scale !== "none";
+  } catch {
+    return false;
+  }
+}
+function covers(rect, crop) {
+  return rect.left <= crop.left + 0.5 && rect.top <= crop.top + 0.5 && rect.right >= crop.left + crop.width - 0.5 && rect.bottom >= crop.top + crop.height - 0.5;
+}
+function backgroundUnder(root, crop, doc, view) {
+  const points = [
+    [crop.left + crop.width / 2, crop.top + crop.height / 2],
+    [crop.left + 1, crop.top + 1],
+    [crop.left + crop.width - 1, crop.top + crop.height - 1]
+  ];
+  for (const [x, y] of points) {
+    let stack = [];
+    try {
+      stack = doc.elementsFromPoint(x, y) ?? [];
+    } catch {
+      break;
+    }
+    for (const candidate of stack) {
+      if (candidate === root || root.contains(candidate)) continue;
+      if (candidate.hasAttribute(HOST_ATTRIBUTE)) continue;
+      const color = opaqueBackground(candidate, view);
+      if (color) return color;
+    }
+  }
+  let current = root;
+  let depth = 0;
+  while (current !== null && depth < 64) {
+    const color = opaqueBackground(current, view);
+    if (color) return color;
+    current = parentOrHost(current);
+    depth++;
+  }
+  return "#ffffff";
+}
+function opaqueBackground(el, view) {
+  try {
+    const color = view.getComputedStyle(el).backgroundColor;
+    if (!color || color === "transparent") return null;
+    if (color.replace(/\s/g, "").startsWith("rgba(0,0,0,0)")) return null;
+    return color;
+  } catch {
+    return null;
+  }
+}
+function renderRootStyle(root, rootRect, doc, view, shiftX, shiftY) {
+  const placement = {
+    transform: `translate(${shiftX}px, ${shiftY}px)`,
+    transformOrigin: "top left",
+    margin: "0"
+  };
+  if (root === doc.documentElement) {
+    return {
+      ...placement,
+      width: `${view.innerWidth}px`,
+      minHeight: `${view.innerHeight}px`,
+      overflow: "visible"
+    };
+  }
+  return {
+    ...placement,
+    position: "static",
+    inset: "auto",
+    float: "none",
+    // The size has to be stated, and this is the line the whole subtree render
+    // stands on. The clone is laid out inside a `foreignObject` the size of
+    // the CROP, and a block element with no width of its own fills its
+    // parent: a 1440px section became 163px wide and the page reflowed into a
+    // column, which is why the hero came back as an empty panel rather than a
+    // misplaced one. `documentElement` was pinned the same way from the start,
+    // which is why nobody met this until the root became something else.
+    // Border-box, because a measured rect is a border box.
+    boxSizing: "border-box",
+    width: `${rootRect.width}px`,
+    minHeight: `${rootRect.height}px`
+  };
+}
+function withDeadline(work, ms, view) {
+  return Promise.race([
+    work,
+    new Promise((resolve) => {
+      try {
+        view.setTimeout(() => resolve(null), ms);
+      } catch {
+      }
+    })
+  ]);
+}
 function isTextualField(el) {
   if (el instanceof HTMLTextAreaElement) return true;
   if (!(el instanceof HTMLInputElement)) return false;
@@ -1710,6 +1918,57 @@ function isTextualField(el) {
 function isCapturable(node) {
   return !(node instanceof Element && node.hasAttribute(HOST_ATTRIBUTE));
 }
+function repairAutoMargins(live, clone, view) {
+  let repaired = 0;
+  const walk = (liveNode, cloneNode2, depth) => {
+    if (depth > 64 || repaired > 2e3) return;
+    const liveKids = liveNode.children;
+    const cloneKids = cloneNode2.children;
+    let l = 0;
+    let c = 0;
+    while (l < liveKids.length && c < cloneKids.length) {
+      const liveKid = liveKids[l];
+      const cloneKid = cloneKids[c];
+      if (liveKid.tagName !== cloneKid.tagName) {
+        l++;
+        continue;
+      }
+      if (applyUsedMargins(liveNode, liveKid, cloneKid, view)) repaired++;
+      walk(liveKid, cloneKid, depth + 1);
+      l++;
+      c++;
+    }
+  };
+  try {
+    walk(live, clone, 0);
+  } catch {
+  }
+}
+var BLOCK_DISPLAYS = /* @__PURE__ */ new Set(["block", "flow-root", "list-item", "table-cell"]);
+function applyUsedMargins(liveParent, live, clone, view) {
+  try {
+    const style = view.getComputedStyle(live);
+    if (style.marginLeft !== "0px" || style.marginRight !== "0px") return false;
+    if (style.position !== "static" && style.position !== "relative") return false;
+    if (style.float !== "none") return false;
+    const parentStyle = view.getComputedStyle(liveParent);
+    if (!BLOCK_DISPLAYS.has(parentStyle.display)) return false;
+    const rect = live.getBoundingClientRect();
+    const parentRect = liveParent.getBoundingClientRect();
+    const contentLeft = parentRect.left + parseFloat(parentStyle.borderLeftWidth || "0") + parseFloat(parentStyle.paddingLeft || "0");
+    const contentRight = parentRect.right - parseFloat(parentStyle.borderRightWidth || "0") - parseFloat(parentStyle.paddingRight || "0");
+    const left = rect.left - contentLeft;
+    const right = contentRight - rect.right;
+    if (left < 0.5 || right < 0.5 || Math.abs(left - right) > 1) return false;
+    const target = clone;
+    if (!target.style) return false;
+    target.style.setProperty("margin-left", `${left}px`);
+    target.style.setProperty("margin-right", `${right}px`);
+    return true;
+  } catch {
+    return false;
+  }
+}
 function maskClone(root) {
   const doc = root.ownerDocument ?? root;
   const view = doc.defaultView;
@@ -1742,7 +2001,8 @@ function maskClone(root) {
           el.value = masked;
         }
         const placeholder = el.getAttribute("placeholder");
-        if (placeholder) el.setAttribute("placeholder", maskPiiText(placeholder));
+        if (placeholder)
+          el.setAttribute("placeholder", maskPiiText(placeholder));
       }
     }
     node = walker.nextNode();
@@ -1782,6 +2042,8 @@ async function captureElementScreenshot(el) {
     const doc = el.ownerDocument;
     const view = doc.defaultView;
     if (!view || !doc.documentElement || !el.isConnected) return null;
+    await waitUntilSettled(el, view);
+    if (!el.isConnected) return null;
     const targetRectRaw = el.getBoundingClientRect();
     const targetRect = {
       left: targetRectRaw.left,
@@ -1790,31 +2052,54 @@ async function captureElementScreenshot(el) {
       height: targetRectRaw.height
     };
     if (targetRect.width <= 0 || targetRect.height <= 0) return null;
-    const cropRect = computeCropRect(targetRect, view.innerWidth, view.innerHeight);
+    const idealCrop = computeCropRect(
+      targetRect,
+      view.innerWidth,
+      view.innerHeight
+    );
+    if (idealCrop.width <= 0 || idealCrop.height <= 0) return null;
+    const renderRoot = findRenderRoot(el, idealCrop, doc.documentElement, view);
+    const rootRect = renderRoot.getBoundingClientRect();
+    const rootBox = {
+      left: rootRect.left,
+      top: rootRect.top,
+      width: rootRect.width,
+      height: rootRect.height
+    };
+    const cropRect = clipCrop(idealCrop, rootBox);
     if (cropRect.width <= 0 || cropRect.height <= 0) return null;
     const scale = outputScale(view, cropRect);
-    const shiftX = -(cropRect.left + (view.scrollX || 0));
-    const shiftY = -(cropRect.top + (view.scrollY || 0));
-    const canvas = await domToCanvas(doc.documentElement, {
-      width: cropRect.width,
-      height: cropRect.height,
-      scale,
-      backgroundColor: "#ffffff",
-      timeout: RENDER_TIMEOUT_MS,
-      filter: isCapturable,
-      onCloneNode: (cloned) => {
-        maskClone(cloned);
-      },
-      font: { preferredFormat: "woff2" },
-      style: {
-        transform: `translate(${shiftX}px, ${shiftY}px)`,
-        transformOrigin: "top left",
-        width: `${view.innerWidth}px`,
-        minHeight: `${view.innerHeight}px`,
-        margin: "0",
-        overflow: "visible"
-      }
-    });
+    const shiftX = -(cropRect.left - rootRect.left);
+    const shiftY = -(cropRect.top - rootRect.top);
+    const canvas = await withDeadline(
+      domToCanvas(renderRoot, {
+        width: cropRect.width,
+        height: cropRect.height,
+        scale,
+        backgroundColor: backgroundUnder(renderRoot, cropRect, doc, view),
+        // Per resource, not per capture. `RENDER_TIMEOUT_MS` is the total,
+        // and it is the race around this call that enforces it.
+        timeout: RESOURCE_TIMEOUT_MS,
+        filter: isCapturable,
+        onCloneNode: (cloned) => {
+          if (cloned instanceof Element) {
+            repairAutoMargins(renderRoot, cloned, view);
+          }
+          maskClone(cloned);
+        },
+        // No `preferredFormat`. Asking for woff2 sounds like asking for the
+        // smaller file and is really a filter: a face whose chosen source is
+        // not woff2 is dropped rather than downgraded, and the text renders in
+        // the browser's serif fallback. On our own hero that turned the button
+        // label into Times (D1258). Let the library take whatever each face
+        // actually offers.
+        font: {},
+        style: renderRootStyle(renderRoot, rootBox, doc, view, shiftX, shiftY)
+      }),
+      RENDER_TIMEOUT_MS,
+      view
+    );
+    if (!canvas) return null;
     const ctx = canvas.getContext("2d");
     if (!ctx) return null;
     drawOutline(ctx, targetRect, cropRect, scale);
@@ -1834,48 +2119,91 @@ async function captureElementScreenshot(el) {
 var PICKER_HOST_ID = "arcy-picker";
 var BANNER_CLASS = "arcy-picker-banner";
 var HIGHLIGHT_CLASS = "arcy-picker-highlight";
+var INK = "#17131A";
+var SURFACE = "#201B23";
+var HAIRLINE = "#332B33";
+var TEXT = "#F3EEE8";
+var MUTED = "#9E959A";
+var ACCENT = "#FF5A3C";
+var ON_ACCENT = "#17131A";
 var PICKER_CSS = `
 .${BANNER_CLASS} {
   display: flex;
   align-items: center;
-  gap: 10px;
-  padding: 10px 14px;
+  gap: 12px;
+  padding: 7px 8px 7px 16px;
   border-radius: 999px;
-  background: #101828;
-  color: #ffffff;
-  font: 13px/1.4 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.28);
+  background: ${INK};
+  border: 1px solid ${HAIRLINE};
+  color: ${TEXT};
+  font: 400 14px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.38);
   white-space: nowrap;
 }
-.${BANNER_CLASS}__title {
+.${BANNER_CLASS}__mark {
+  display: flex;
+  align-items: baseline;
+  gap: 7px;
+}
+.${BANNER_CLASS}__brand {
   font-weight: 600;
-  margin-right: 2px;
+  letter-spacing: 0.02em;
 }
-.${BANNER_CLASS}__status {
-  max-width: 260px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: #d0d5dd;
+/* The label role from DESIGN.md: 600, 12px, uppercase, tracked wide. */
+.${BANNER_CLASS}__label {
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: ${MUTED};
+}
+/* Pick and Browse are one control with two states, not two buttons that
+ * happen to disagree. The old bar drew both as outlines and coloured whichever
+ * was on, which reads as two things you can press rather than as a switch. */
+.${BANNER_CLASS}__modes {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  padding: 3px;
+  border-radius: 999px;
+  background: ${SURFACE};
 }
 .${BANNER_CLASS} button {
   appearance: none;
-  border: 1px solid rgba(255, 255, 255, 0.25);
+  border: 1px solid transparent;
   border-radius: 999px;
   background: transparent;
-  color: #ffffff;
+  color: ${MUTED};
   font: inherit;
-  padding: 4px 12px;
+  font-weight: 500;
+  padding: 5px 14px;
   cursor: pointer;
+  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
 }
 .${BANNER_CLASS} button:hover {
-  background: rgba(255, 255, 255, 0.1);
+  color: ${TEXT};
+}
+.${BANNER_CLASS} button:focus-visible {
+  outline: 2px solid ${ACCENT};
+  outline-offset: 2px;
 }
-.${BANNER_CLASS} button.is-active {
-  background: #f04e23;
-  border-color: #f04e23;
+/* The one filled control on the bar (DESIGN.md, one accent fill per surface). */
+.${BANNER_CLASS}__modes button.is-active {
+  background: ${ACCENT};
+  color: ${ON_ACCENT};
+  font-weight: 600;
+}
+.${BANNER_CLASS}__modes button.is-active:hover {
+  color: ${ON_ACCENT};
+}
+.${BANNER_CLASS}__exit {
+  border-color: ${HAIRLINE} !important;
+}
+.${BANNER_CLASS}__exit:hover {
+  background: ${SURFACE};
 }
 .${HIGHLIGHT_CLASS} {
-  border-radius: 3px;
+  border-radius: 4px;
 }
 `;
 function applySurvivalStyle(el, pointerEvents, offsets = []) {
@@ -1887,8 +2215,13 @@ function applySurvivalStyle(el, pointerEvents, offsets = []) {
 }
 var HIGHLIGHT_STYLE = [
   ["box-sizing", "border-box"],
-  ["border", "2px solid #f04e23"],
-  ["background", "rgba(240, 78, 35, 0.08)"]
+  [
+    "border",
+    // ADR 0171's accent border rule: an edge, not a fill. The tint behind it
+    // is what keeps a thin outline readable on a busy page.
+    `2px solid ${ACCENT}`
+  ],
+  ["background", "rgba(255, 90, 60, 0.1)"]
 ];
 var BANNER_OFFSET = [
   ["left", "50%"],
@@ -1897,10 +2230,6 @@ var BANNER_OFFSET = [
 var BANNER_STYLE = [
   ["transform", "translateX(-50%)"]
 ];
-function statusLabel(target) {
-  const { text, tag } = target.core;
-  return text ? `Sent "${text}" to ARCY` : `Sent <${tag}> to ARCY`;
-}
 function createPickerOverlay(context) {
   let shell = createShell({ id: PICKER_HOST_ID });
   if (!shell) return null;
@@ -1923,28 +2252,36 @@ function createPickerOverlay(context) {
   for (const [property, value] of BANNER_STYLE) {
     banner.style.setProperty(property, value);
   }
-  const title = doc.createElement("span");
-  title.className = `${BANNER_CLASS}__title`;
-  title.textContent = "ARCY element picker";
+  const mark = doc.createElement("span");
+  mark.className = `${BANNER_CLASS}__mark`;
+  const brand = doc.createElement("span");
+  brand.className = `${BANNER_CLASS}__brand`;
+  brand.textContent = "ARCY";
+  const label = doc.createElement("span");
+  label.className = `${BANNER_CLASS}__label`;
+  label.textContent = "Element picker";
+  mark.append(brand, label);
+  const modes = doc.createElement("span");
+  modes.className = `${BANNER_CLASS}__modes`;
+  applySurvivalStyle(modes, "auto");
+  modes.style.setProperty("position", "relative", "important");
   const pickButton = doc.createElement("button");
   pickButton.type = "button";
   pickButton.textContent = "Pick";
   const browseButton = doc.createElement("button");
   browseButton.type = "button";
   browseButton.textContent = "Browse";
-  const status = doc.createElement("span");
-  status.className = `${BANNER_CLASS}__status`;
-  status.textContent = "Click the element you want this step to target.";
+  modes.append(pickButton, browseButton);
   const exitButton = doc.createElement("button");
   exitButton.type = "button";
+  exitButton.className = `${BANNER_CLASS}__exit`;
   exitButton.textContent = "Exit";
-  banner.append(title, pickButton, browseButton, status, exitButton);
+  banner.append(mark, modes, exitButton);
   shell.root.append(highlight, banner);
   function setMode(next) {
     mode = next;
     pickButton.classList.toggle("is-active", next === "pick");
     browseButton.classList.toggle("is-active", next === "browse");
-    status.textContent = next === "pick" ? "Click the element you want this step to target." : "Browsing. Clicks work normally; switch back to pick.";
     if (next === "browse") hideHighlight();
   }
   function hideHighlight() {
@@ -2027,7 +2364,6 @@ function createPickerOverlay(context) {
       const ranked = rankSelectors(el);
       fingerprint.selector = ranked.autoSelector;
       fingerprint.selectorCandidates = ranked.candidates;
-      status.textContent = statusLabel(fingerprint);
       hovered = el;
       moveHighlight(el);
       let matchCount = 0;
@@ -2038,17 +2374,29 @@ function createPickerOverlay(context) {
       context.onPick(fingerprint, matchCount);
       if (context.screenshotsEnabled === false) return;
       const token = ++screenshotToken;
-      void captureElementScreenshot(el).then((screenshot) => {
-        if (!screenshot || destroyed || token !== screenshotToken) return;
-        try {
-          context.onScreenshot?.(screenshot);
-        } catch {
-        }
+      afterNextPaint(() => {
+        if (destroyed || token !== screenshotToken) return;
+        void captureElementScreenshot(el).then((screenshot) => {
+          if (!screenshot || destroyed || token !== screenshotToken) return;
+          try {
+            context.onScreenshot?.(screenshot);
+          } catch {
+          }
+        });
       });
     } catch (error) {
       warn(`The element picker could not read that element. ${String(error)}`);
     }
   };
+  function afterNextPaint(fn) {
+    const view = doc.defaultView;
+    const raf = view?.requestAnimationFrame;
+    if (typeof raf !== "function") {
+      setTimeout(fn, 0);
+      return;
+    }
+    raf.call(view, () => raf.call(view, fn));
+  }
   function isEditable(target) {
     if (!(target instanceof Element)) return false;
     const tag = target.tagName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "arcy.js",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "ARCY — the universal JavaScript utility for embedding an AI agent that talks to, learns from, and acts on behalf of your users.",
   "license": "MIT",
   "type": "module",