arcy.js 0.1.4 → 0.1.6

package/dist/index.cjs

@@ -361,7 +361,7 @@ var init_message = __esm({
     DESIGN_MODE_PICK = "arcy:design-mode:pick";
     DESIGN_MODE_EXIT = "arcy:design-mode:exit";
     DESIGN_MODE_SCREENSHOT = "arcy:design-mode:screenshot";
-    SCREENSHOT_RENDER_BUDGET_MS = 8e3;
+    SCREENSHOT_RENDER_BUDGET_MS = 5e3;
   }
 });
 
@@ -3992,9 +3992,6 @@ function mount(context) {
             flowOffers: result.flowsOffered
           });
           context.touchConversation?.();
-          if (result.isFallback) {
-            context.track?.("fallback_triggered", {}, { question: text });
-          }
           for (const offer of result.flowsOffered) {
             context.track?.(
               "flow_suggested",
@@ -5639,6 +5636,25 @@ function evaluateCurrentPage(node, href) {
   if (node.matches.length === 0) return true;
   return node.matches.some((pattern) => globMatches(pattern, href));
 }
+function parseInstant(value) {
+  if (!DATE_SHAPED.test(value)) return null;
+  const ms = new Date(value).getTime();
+  return Number.isFinite(ms) ? ms : null;
+}
+function compareOrdered(live, expected) {
+  if (live.trim() === "" || expected.trim() === "") return null;
+  const liveNumber = Number(live);
+  const expectedNumber = Number(expected);
+  if (Number.isFinite(liveNumber) && Number.isFinite(expectedNumber)) {
+    return liveNumber - expectedNumber;
+  }
+  const liveInstant = parseInstant(live);
+  const expectedInstant = parseInstant(expected);
+  if (liveInstant !== null && expectedInstant !== null) {
+    return liveInstant - expectedInstant;
+  }
+  return null;
+}
 function compareText(operator, live, expected) {
   if (live === void 0) return false;
   switch (operator) {
@@ -5660,16 +5676,14 @@ function compareText(operator, live, expected) {
       return live === "";
     case "is_not_empty":
       return live !== "";
-    // Numeric compares parse both sides; either side not a number means the
-    // condition cannot hold (never throw, never coerce NaN into an answer).
+    // Ordered compares read both sides as numbers, then as instants; either
+    // side unreadable means the condition cannot hold (never throw, never
+    // coerce NaN into an answer).
     case "greater_than":
     case "less_than": {
-      const liveNumber = Number(live);
-      const expectedNumber = Number(expected);
-      if (live.trim() === "" || !Number.isFinite(liveNumber) || !Number.isFinite(expectedNumber)) {
-        return false;
-      }
-      return operator === "greater_than" ? liveNumber > expectedNumber : liveNumber < expectedNumber;
+      const ordered = compareOrdered(live, expected);
+      if (ordered === null) return false;
+      return operator === "greater_than" ? ordered > 0 : ordered < 0;
     }
     // The same `*` glob `current_page` uses, applied to a field value.
     case "matches_pattern":
@@ -5738,15 +5752,22 @@ function evaluateElement(node, ctx) {
       return false;
   }
 }
+function isEmptyValue(live) {
+  if (live === void 0 || live === null || live === "") return true;
+  if (Array.isArray(live)) return live.length === 0;
+  if (typeof live === "object") return Object.keys(live).length === 0;
+  return false;
+}
 function evaluateAttribute(node, ctx) {
   const live = ctx.getTrait?.(node.codeName);
   switch (node.operator) {
     case "has_any_value":
-      return live !== void 0 && live !== null && live !== "";
+      return !isEmptyValue(live);
     case "is_empty":
-      return live === void 0 || live === null || live === "";
+      return isEmptyValue(live);
   }
   if (live === void 0) return false;
+  if (typeof live === "object") return false;
   const liveText = String(live);
   const expected = node.value === void 0 ? "" : String(node.value);
   return compareText(node.operator, liveText, expected);
@@ -5799,7 +5820,7 @@ function needsIdleCheck(node) {
   if (node.type === "group") return node.children.some(needsIdleCheck);
   return false;
 }
-var MAX_CONDITION_DEPTH, CONDITION_TYPES;
+var MAX_CONDITION_DEPTH, CONDITION_TYPES, DATE_SHAPED;
 var init_condition = __esm({
   "src/flow/condition.ts"() {
     init_matcher();
@@ -5816,6 +5837,7 @@ var init_condition = __esm({
       "always_true",
       "group"
     ];
+    DATE_SHAPED = /^\d{4}-\d{2}-\d{2}/;
   }
 });
 
@@ -6027,6 +6049,21 @@ var init_runtime = __esm({
         /** ADR 0166: true while a fill question is awaiting the end user's
          *  answer. Suspends trigger evaluation for the duration. */
         this.inputPending = false;
+        /**
+         * True from the moment a step is entered until its own action has
+         * settled. Suspends trigger evaluation for exactly that window, the same
+         * posture `inputPending` takes around a fill question.
+         *
+         * **This is what makes a step's type mean anything.** The builder's
+         * default condition for a new trigger is `always_true` with no wait
+         * (`flow-draft.ts`'s `newTrigger`), so the ordinary way to say "then go to
+         * step 2" is a trigger that is true the instant the step mounts. Without
+         * this flag `startWatch`'s initial pass fired that trigger before the step
+         * had clicked, filled or navigated anything, and the action never ran at
+         * all: a two-step flow counted to step 2 and quietly ended, having done
+         * nothing. A step acts first; its triggers are how it is left.
+         */
+        this.actionPending = false;
         /** Extra capture-phase listeners `startWatch` installs alongside the
          *  click listener (D1297): typing, focus moves and checkbox flips change
          *  nothing a MutationObserver can see, yet `text_input`, `is_focused`
@@ -6163,6 +6200,7 @@ var init_runtime = __esm({
         }
         this.activityListeners = [];
         this.inputPending = false;
+        this.actionPending = false;
         this.trueSince.clear();
         this.clicked.clear();
         this.initialValues.clear();
@@ -6252,7 +6290,7 @@ var init_runtime = __esm({
       }
       checkTriggers(step, ctx) {
         if (this.stopped) return;
-        if (this.inputPending) return;
+        const mayFire = !this.inputPending && !this.actionPending;
         const now = this.now();
         for (const trigger of [...step.triggers].sort((a, b) => a.position - b.position)) {
           const parsed = this.parsedTrigger(trigger);
@@ -6266,7 +6304,7 @@ var init_runtime = __esm({
           const since = this.trueSince.get(key) ?? now;
           if (!this.trueSince.has(key)) this.trueSince.set(key, since);
           const waitMs = (trigger.waitSeconds ?? 0) * 1e3;
-          if (now - since >= waitMs) {
+          if (now - since >= waitMs && mayFire) {
             this.fireTrigger(trigger);
             return;
           }
@@ -6352,8 +6390,7 @@ var init_runtime = __esm({
         }
         this.checkTriggers(step, this.conditionContext());
       }
-      async runExecutor(step) {
-        const startIndex = this.stepIndex;
+      async runExecutor(step, startIndex) {
         try {
           const outcome = await this.executor(step, {
             doc: this.doc,
@@ -6365,6 +6402,7 @@ var init_runtime = __esm({
             }
           });
           if (this.stopped || this.stepIndex !== startIndex) return;
+          this.actionPending = false;
           if (outcome.status === "advance") {
             this.emit("flow_step_completed");
             if (step.isCompletion) {
@@ -6409,11 +6447,14 @@ var init_runtime = __esm({
             );
             return;
           }
+          this.scheduleCheck(step);
         } catch {
+          this.actionPending = false;
         }
       }
       enterStep() {
         const step = this.currentStep();
+        const stepIndex = this.stepIndex;
         if (!step || this.stopped) {
           this.finish(step ? "completed" : "error", step ? void 0 : { reason: "missing_step" });
           return;
@@ -6428,8 +6469,9 @@ var init_runtime = __esm({
         });
         const begin = () => {
           if (this.stopped) return;
+          this.actionPending = true;
           this.startWatch(step);
-          void this.runExecutor(step);
+          void this.runExecutor(step, stepIndex);
         };
         this.waitForPageReady(begin);
       }
@@ -8630,6 +8672,208 @@ 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) };
 }
+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;
+}
+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 style2 = view.getComputedStyle(el);
+    return style2.transform !== "" && style2.transform !== "none" || style2.perspective !== "" && style2.perspective !== "none" || style2.translate !== "" && style2.translate !== "none" || style2.rotate !== "" && style2.rotate !== "none" || style2.scale !== "" && style2.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;
@@ -8639,6 +8883,56 @@ 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 {
+  }
+}
+function applyUsedMargins(liveParent, live, clone, view) {
+  try {
+    const style2 = view.getComputedStyle(live);
+    if (style2.marginLeft !== "0px" || style2.marginRight !== "0px") return false;
+    if (style2.position !== "static" && style2.position !== "relative") return false;
+    if (style2.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;
@@ -8671,7 +8965,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();
@@ -8711,6 +9006,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,
@@ -8719,31 +9016,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);
@@ -8758,10 +9078,11 @@ async function captureElementScreenshot(el) {
     return null;
   }
 }
-var CROP_MARGIN_RATIO, CROP_MARGIN_MAX_PX, CROP_MARGIN_MIN_PX, CROP_MAX_WIDTH, CROP_MAX_HEIGHT, OUTPUT_MAX_DPR, OUTPUT_MAX_PIXELS, DATA_URL_SOFT_MAX, RENDER_TIMEOUT_MS, PII_PATTERNS2, MASK2, OUTLINE_COLOR;
+var CROP_MARGIN_RATIO, CROP_MARGIN_MAX_PX, CROP_MARGIN_MIN_PX, CROP_MAX_WIDTH, CROP_MAX_HEIGHT, OUTPUT_MAX_DPR, OUTPUT_MAX_PIXELS, DATA_URL_SOFT_MAX, RENDER_TIMEOUT_MS, RESOURCE_TIMEOUT_MS, PII_PATTERNS2, MASK2, OUTLINE_COLOR, SETTLE_MAX_MS, SETTLE_STABLE_FRAMES, NODE_BUDGET, AREA_BUDGET_SCREENS, MIN_CROP_KEPT, BLOCK_DISPLAYS;
 var init_screenshot = __esm({
   "src/picker/screenshot.ts"() {
     init_dist();
+    init_shadow();
     init_host();
     init_message();
     CROP_MARGIN_RATIO = 0.25;
@@ -8773,6 +9094,7 @@ var init_screenshot = __esm({
     OUTPUT_MAX_PIXELS = 26e5;
     DATA_URL_SOFT_MAX = 36e5;
     RENDER_TIMEOUT_MS = SCREENSHOT_RENDER_BUDGET_MS;
+    RESOURCE_TIMEOUT_MS = 1500;
     PII_PATTERNS2 = [
       /[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}/g,
       /\b\d{3}-\d{2}-\d{4}\b/g,
@@ -8780,6 +9102,12 @@ var init_screenshot = __esm({
     ];
     MASK2 = "[masked]";
     OUTLINE_COLOR = "#f04e23";
+    SETTLE_MAX_MS = 900;
+    SETTLE_STABLE_FRAMES = 2;
+    NODE_BUDGET = 800;
+    AREA_BUDGET_SCREENS = 3;
+    MIN_CROP_KEPT = 0.4;
+    BLOCK_DISPLAYS = /* @__PURE__ */ new Set(["block", "flow-root", "list-item", "table-cell"]);
   }
 });
 
@@ -8791,10 +9119,6 @@ function applySurvivalStyle(el, pointerEvents, offsets = []) {
     el.style.setProperty(property, value, "important");
   }
 }
-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;
@@ -8817,28 +9141,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() {
@@ -8921,7 +9253,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;
@@ -8932,17 +9263,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;
@@ -9008,7 +9351,7 @@ function createPickerOverlay(context) {
   setMode("pick");
   return { destroy };
 }
-var PICKER_HOST_ID, BANNER_CLASS, HIGHLIGHT_CLASS, PICKER_CSS, HIGHLIGHT_STYLE, BANNER_OFFSET, BANNER_STYLE;
+var PICKER_HOST_ID, BANNER_CLASS, HIGHLIGHT_CLASS, INK, SURFACE, HAIRLINE, TEXT, MUTED, ACCENT, ON_ACCENT, PICKER_CSS, HIGHLIGHT_STYLE, BANNER_OFFSET, BANNER_STYLE;
 var init_overlay = __esm({
   "src/picker/overlay.ts"() {
     init_capture();
@@ -9022,54 +9365,102 @@ var init_overlay = __esm({
     PICKER_HOST_ID = "arcy-picker";
     BANNER_CLASS = "arcy-picker-banner";
     HIGHLIGHT_CLASS = "arcy-picker-highlight";
+    INK = "#17131A";
+    SURFACE = "#201B23";
+    HAIRLINE = "#332B33";
+    TEXT = "#F3EEE8";
+    MUTED = "#9E959A";
+    ACCENT = "#FF5A3C";
+    ON_ACCENT = "#17131A";
     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;
 }
 `;
     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)"]
     ];
     BANNER_OFFSET = [
       ["left", "50%"],
@@ -13485,15 +13876,19 @@ function createArcyInternals(internalOptions = {}) {
       token,
       sessionToken,
       sessionId: telemetry?.sessionId(),
-      // Slice 18.1's trigger conditions read traits set via identify();
-      // `Attributes` also allows null and string[], neither of which
-      // `ConditionContext.getTrait` accepts, so both degrade to
-      // "unresolvable" rather than being coerced into something wrong.
+      // Slice 18.1's trigger conditions read attributes set via identify().
+      // Every present, non-null value is reported as it is and judged here
+      // not at all (ADR 0205). Filtering lists out used to report a written
+      // key as absent, which made `has_any_value` false for a list the
+      // customer had sent; what a value *means* is `condition.ts`'s call and
+      // is made in one place there.
+      //
+      // Nothing becomes comparable by arriving: `condition.ts` refuses every
+      // comparison on an object or an array (ADR 0198's opaque rule), so no
+      // value here can become `is "[object Object]"`.
       getTrait: (codeName) => {
         const value = identity.attributes[codeName];
-        if (value === void 0 || value === null || Array.isArray(value)) {
-          return void 0;
-        }
+        if (value === void 0 || value === null) return void 0;
         return value;
       },
       // D1299: absent entirely (rather than answering false) when storage