@runtypelabs/persona 4.10.1 → 4.11.0

package/src/utils/table-scroll-fade.test.ts

@@ -0,0 +1,123 @@
+// @vitest-environment jsdom
+
+import { describe, it, expect, beforeEach } from "vitest";
+import { wrapScrollableTables, refreshTableScrollFades } from "./table-scroll-fade";
+
+// Off-edge fade value: a themeable token reference, not a resolved px length.
+const FADE_ON = "var(--persona-md-table-scroll-fade, 24px)";
+
+// jsdom has no layout, so scroll metrics are stubbed per element.
+function stubMetrics(
+  el: HTMLElement,
+  { scrollWidth, clientWidth, scrollLeft = 0 }: { scrollWidth: number; clientWidth: number; scrollLeft?: number }
+): void {
+  Object.defineProperty(el, "scrollWidth", { value: scrollWidth, configurable: true });
+  Object.defineProperty(el, "clientWidth", { value: clientWidth, configurable: true });
+  let sl = scrollLeft;
+  Object.defineProperty(el, "scrollLeft", {
+    get: () => sl,
+    set: (v: number) => {
+      sl = v;
+    },
+    configurable: true,
+  });
+}
+
+function makeContainerWithTable(): { container: HTMLElement; table: HTMLElement } {
+  const container = document.createElement("div");
+  const bubble = document.createElement("div");
+  bubble.className = "persona-message-content";
+  const table = document.createElement("table");
+  table.innerHTML = "<tbody><tr><td>a</td></tr></tbody>";
+  bubble.appendChild(table);
+  container.appendChild(bubble);
+  return { container, table };
+}
+
+describe("wrapScrollableTables", () => {
+  it("wraps a bare table in a .persona-table-scroll container", () => {
+    const { container, table } = makeContainerWithTable();
+    wrapScrollableTables(container);
+    const wrapper = table.parentElement!;
+    expect(wrapper.className).toBe("persona-table-scroll");
+    expect(wrapper.firstElementChild).toBe(table);
+  });
+
+  it("is idempotent: an already-wrapped table is not double-wrapped", () => {
+    const { container, table } = makeContainerWithTable();
+    wrapScrollableTables(container);
+    wrapScrollableTables(container);
+    expect(container.querySelectorAll(".persona-table-scroll").length).toBe(1);
+    expect(table.parentElement!.parentElement!.className).toBe("persona-message-content");
+  });
+});
+
+describe("refreshTableScrollFades", () => {
+  let container: HTMLElement;
+  let wrapper: HTMLElement;
+
+  beforeEach(() => {
+    const built = makeContainerWithTable();
+    container = built.container;
+    wrapScrollableTables(container);
+    wrapper = built.table.parentElement!;
+  });
+
+  it("marks an overflowing table scrollable and fades only the right edge at start", () => {
+    stubMetrics(wrapper, { scrollWidth: 600, clientWidth: 300, scrollLeft: 0 });
+    refreshTableScrollFades(container);
+    expect(wrapper.hasAttribute("data-persona-scroll-x")).toBe(true);
+    expect(wrapper.style.getPropertyValue("--persona-fade-l")).toBe("0px");
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe(FADE_ON);
+  });
+
+  it("fades only the left edge when scrolled to the end", () => {
+    stubMetrics(wrapper, { scrollWidth: 600, clientWidth: 300, scrollLeft: 300 });
+    refreshTableScrollFades(container);
+    expect(wrapper.style.getPropertyValue("--persona-fade-l")).toBe(FADE_ON);
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe("0px");
+  });
+
+  it("fades both edges mid-scroll", () => {
+    stubMetrics(wrapper, { scrollWidth: 600, clientWidth: 300, scrollLeft: 120 });
+    refreshTableScrollFades(container);
+    expect(wrapper.style.getPropertyValue("--persona-fade-l")).toBe(FADE_ON);
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe(FADE_ON);
+  });
+
+  // RTL scrolls on the negative model: scrollLeft runs [-overflow, 0], starting
+  // at 0 with the hidden content to the physical left (mirror of LTR).
+  it("fades the left edge at an RTL table's start position", () => {
+    wrapper.style.direction = "rtl";
+    stubMetrics(wrapper, { scrollWidth: 600, clientWidth: 300, scrollLeft: 0 });
+    refreshTableScrollFades(container);
+    expect(wrapper.style.getPropertyValue("--persona-fade-l")).toBe(FADE_ON);
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe("0px");
+  });
+
+  it("fades the right edge when an RTL table is scrolled to its end", () => {
+    wrapper.style.direction = "rtl";
+    stubMetrics(wrapper, { scrollWidth: 600, clientWidth: 300, scrollLeft: -300 });
+    refreshTableScrollFades(container);
+    expect(wrapper.style.getPropertyValue("--persona-fade-l")).toBe("0px");
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe(FADE_ON);
+  });
+
+  it("leaves a table that fits unmarked (no fade)", () => {
+    stubMetrics(wrapper, { scrollWidth: 300, clientWidth: 300, scrollLeft: 0 });
+    refreshTableScrollFades(container);
+    expect(wrapper.hasAttribute("data-persona-scroll-x")).toBe(false);
+  });
+
+  it("updates fades when the table is scrolled (delegated capture listener)", () => {
+    stubMetrics(wrapper, { scrollWidth: 600, clientWidth: 300, scrollLeft: 0 });
+    refreshTableScrollFades(container);
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe(FADE_ON);
+    // Simulate a real scroll to the end: move position, fire the event the
+    // container's capture-phase listener is waiting for.
+    wrapper.scrollLeft = 300;
+    wrapper.dispatchEvent(new Event("scroll"));
+    expect(wrapper.style.getPropertyValue("--persona-fade-l")).toBe(FADE_ON);
+    expect(wrapper.style.getPropertyValue("--persona-fade-r")).toBe("0px");
+  });
+});

package/src/utils/table-scroll-fade.ts

@@ -0,0 +1,75 @@
+// Wide markdown tables must scroll inside their own container, never widen the
+// chat column. Tables render from an HTML string with no wrapper, so we wrap
+// them in the freshly-built morph container before idiomorph runs: the wrapper
+// then exists on both sides of every subsequent diff, so it (and its scroll
+// position) survives streaming re-renders.
+
+// Off-edge fade width, themeable via --persona-md-table-scroll-fade (set it to
+// 0 to disable the fade). Written as a var() reference, not a resolved px value,
+// so a consumer's CSS token wins over this inline style.
+const FADE = "var(--persona-md-table-scroll-fade, 24px)";
+
+// Containers that already carry the delegated scroll listener.
+const LISTENING = new WeakSet<HTMLElement>();
+
+/**
+ * Wrap every unwrapped `<table>` under `root` in a `.persona-table-scroll`
+ * horizontal-scroll container. Idempotent: tables already wrapped are skipped.
+ */
+export function wrapScrollableTables(root: HTMLElement): void {
+  const tables = root.querySelectorAll("table");
+  tables.forEach((table) => {
+    const parent = table.parentElement;
+    if (parent?.classList.contains("persona-table-scroll")) return;
+    const wrapper = document.createElement("div");
+    wrapper.className = "persona-table-scroll";
+    table.replaceWith(wrapper);
+    wrapper.appendChild(table);
+  });
+}
+
+// Toggle the edge-fade mask for one scroll container based on its position.
+function updateFade(el: HTMLElement): void {
+  const overflow = el.scrollWidth - el.clientWidth;
+  if (overflow <= 1) {
+    el.removeAttribute("data-persona-scroll-x");
+    return;
+  }
+  el.setAttribute("data-persona-scroll-x", "");
+  // Each edge fades only when content is hidden past it, so the amounts must be
+  // physical (left/right), not directional. RTL scrolls on the negative model:
+  // scrollLeft runs [-overflow, 0] and starts at 0 with content hidden to the
+  // left, the mirror of LTR. Magnitude alone can't tell them apart at 0.
+  const rtl = getComputedStyle(el).direction === "rtl";
+  const hiddenLeft = rtl ? overflow + el.scrollLeft : el.scrollLeft;
+  const hiddenRight = overflow - hiddenLeft;
+  el.style.setProperty("--persona-fade-l", hiddenLeft <= 1 ? "0px" : FADE);
+  el.style.setProperty("--persona-fade-r", hiddenRight <= 1 ? "0px" : FADE);
+}
+
+/**
+ * Refresh edge-fade state for every table scroll container under `container`,
+ * and (once per container) attach the delegated scroll listener that keeps the
+ * fades in sync as the user scrolls. Call after each transcript morph.
+ */
+export function refreshTableScrollFades(container: HTMLElement): void {
+  if (!LISTENING.has(container)) {
+    LISTENING.add(container);
+    // scroll does not bubble, but it does fire in the capture phase, so one
+    // ancestor listener catches every table without per-table wiring that
+    // idiomorph would strip.
+    container.addEventListener(
+      "scroll",
+      (event) => {
+        const target = event.target as HTMLElement | null;
+        if (target?.classList?.contains("persona-table-scroll")) {
+          updateFade(target);
+        }
+      },
+      true
+    );
+  }
+  container
+    .querySelectorAll<HTMLElement>(".persona-table-scroll")
+    .forEach(updateFade);
+}

package/src/utils/tooltip.test.ts

@@ -0,0 +1,226 @@
+// @vitest-environment jsdom
+
+import { afterEach, describe, expect, it, vi } from "vitest";
+import { attachTooltip } from "./tooltip";
+
+const rect = (
+  left: number,
+  top: number,
+  width: number,
+  height: number
+): DOMRect =>
+  ({
+    left,
+    top,
+    width,
+    height,
+    right: left + width,
+    bottom: top + height,
+    x: left,
+    y: top,
+    toJSON: () => ({}),
+  }) as DOMRect;
+
+describe("attachTooltip", () => {
+  afterEach(() => {
+    document.body.innerHTML = "";
+    vi.restoreAllMocks();
+    vi.unstubAllGlobals();
+  });
+
+  it("portals outside a clipped wrapper and clamps a long tooltip to the viewport", () => {
+    const wrapper = document.createElement("div");
+    wrapper.style.overflow = "hidden";
+    const button = document.createElement("button");
+    button.setAttribute("aria-label", "Add context — a slide, element or comment");
+    wrapper.appendChild(button);
+    document.body.appendChild(wrapper);
+
+    Object.defineProperty(document.documentElement, "clientWidth", {
+      configurable: true,
+      value: 320,
+    });
+    Object.defineProperty(document.documentElement, "clientHeight", {
+      configurable: true,
+      value: 500,
+    });
+    vi.spyOn(button, "getBoundingClientRect").mockReturnValue(
+      rect(4, 400, 40, 40)
+    );
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        return this.classList.contains("persona-control-tooltip")
+          ? rect(0, 0, 300, 32)
+          : rect(0, 0, 0, 0);
+      }
+    );
+
+    attachTooltip({
+      anchor: button,
+      trigger: wrapper,
+      text: () => button.getAttribute("aria-label") ?? "",
+    });
+    wrapper.dispatchEvent(new MouseEvent("mouseenter"));
+
+    const tooltip = document.body.querySelector<HTMLElement>(
+      ".persona-control-tooltip"
+    );
+    expect(tooltip).not.toBeNull();
+    expect(wrapper.contains(tooltip)).toBe(false);
+    expect(tooltip!.textContent).toContain("Add context");
+    expect(tooltip!.style.left).toBe("8px");
+    expect(tooltip!.style.getPropertyValue("--persona-tooltip-arrow-x")).toBe(
+      "16px"
+    );
+    expect(tooltip!.dataset.placement).toBe("top");
+  });
+
+  it("flips below the control when there is not enough room above", () => {
+    const button = document.createElement("button");
+    document.body.appendChild(button);
+    Object.defineProperty(document.documentElement, "clientWidth", {
+      configurable: true,
+      value: 500,
+    });
+    Object.defineProperty(document.documentElement, "clientHeight", {
+      configurable: true,
+      value: 300,
+    });
+    vi.spyOn(button, "getBoundingClientRect").mockReturnValue(
+      rect(200, 4, 40, 40)
+    );
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        return this.classList.contains("persona-control-tooltip")
+          ? rect(0, 0, 120, 32)
+          : rect(0, 0, 0, 0);
+      }
+    );
+
+    attachTooltip({ anchor: button, text: "Close chat" });
+    button.focus();
+
+    const tooltip = document.body.querySelector<HTMLElement>(
+      ".persona-control-tooltip"
+    );
+    expect(tooltip?.dataset.placement).toBe("bottom");
+    expect(tooltip?.style.top).toBe("52px");
+
+    button.blur();
+    expect(document.body.querySelector(".persona-control-tooltip")).toBeNull();
+  });
+
+  it("dismisses an open tooltip with Escape", () => {
+    const button = document.createElement("button");
+    document.body.appendChild(button);
+
+    attachTooltip({ anchor: button, text: "Close chat" });
+    button.focus();
+    expect(document.body.querySelector(".persona-control-tooltip")).not.toBeNull();
+
+    button.dispatchEvent(new KeyboardEvent("keydown", { key: "Escape" }));
+
+    expect(document.body.querySelector(".persona-control-tooltip")).toBeNull();
+  });
+
+  it("suppresses hover tooltips when the device has no hover capability", () => {
+    vi.stubGlobal(
+      "matchMedia",
+      vi.fn().mockReturnValue({ matches: true })
+    );
+    const button = document.createElement("button");
+    button.setAttribute("aria-label", "Add context");
+    document.body.appendChild(button);
+
+    attachTooltip({
+      anchor: button,
+      text: () => button.getAttribute("aria-label") ?? "",
+    });
+    button.dispatchEvent(new MouseEvent("mouseenter"));
+
+    expect(document.body.querySelector(".persona-control-tooltip")).toBeNull();
+    expect(button.getAttribute("aria-label")).toBe("Add context");
+  });
+
+  it("repositions an open tooltip after resize and scroll", () => {
+    const button = document.createElement("button");
+    document.body.appendChild(button);
+    Object.defineProperty(document.documentElement, "clientWidth", {
+      configurable: true,
+      value: 500,
+    });
+    Object.defineProperty(document.documentElement, "clientHeight", {
+      configurable: true,
+      value: 300,
+    });
+    let anchorLeft = 100;
+    vi.spyOn(button, "getBoundingClientRect").mockImplementation(() =>
+      rect(anchorLeft, 200, 40, 40)
+    );
+    vi.spyOn(HTMLElement.prototype, "getBoundingClientRect").mockImplementation(
+      function (this: HTMLElement) {
+        return this.classList.contains("persona-control-tooltip")
+          ? rect(0, 0, 120, 32)
+          : rect(0, 0, 0, 0);
+      }
+    );
+
+    attachTooltip({ anchor: button, text: "Add context" });
+    button.focus();
+    const tooltip = document.body.querySelector<HTMLElement>(
+      ".persona-control-tooltip"
+    );
+    expect(tooltip?.style.left).toBe("60px");
+
+    anchorLeft = 200;
+    window.dispatchEvent(new Event("resize"));
+    expect(tooltip?.style.left).toBe("160px");
+
+    anchorLeft = 300;
+    window.dispatchEvent(new Event("scroll"));
+    expect(tooltip?.style.left).toBe("260px");
+  });
+
+  it("cleans up an open tooltip when its anchor is removed", async () => {
+    const button = document.createElement("button");
+    document.body.appendChild(button);
+
+    attachTooltip({ anchor: button, text: "Add context" });
+    button.focus();
+    expect(document.body.querySelector(".persona-control-tooltip")).not.toBeNull();
+
+    button.remove();
+
+    await vi.waitFor(() => {
+      expect(document.body.querySelector(".persona-control-tooltip")).toBeNull();
+    });
+  });
+
+  it("re-attaching replaces old listeners and disabled tooltips stay closed", () => {
+    const button = document.createElement("button");
+    document.body.appendChild(button);
+    const old = attachTooltip({ anchor: button, text: "Old" });
+    const next = attachTooltip({ anchor: button, text: "New", enabled: false });
+
+    expect(old.isOpen).toBe(false);
+    button.focus();
+    expect(next.isOpen).toBe(false);
+    expect(document.body.querySelector(".persona-control-tooltip")).toBeNull();
+  });
+
+  it("portals into the anchor's shadow root so widget styles still apply", () => {
+    const host = document.createElement("div");
+    const shadow = host.attachShadow({ mode: "open" });
+    const button = document.createElement("button");
+    shadow.appendChild(button);
+    document.body.appendChild(host);
+
+    attachTooltip({ anchor: button, text: "Shadow tooltip" });
+    button.focus();
+
+    expect(shadow.querySelector(".persona-control-tooltip")?.textContent).toContain(
+      "Shadow tooltip"
+    );
+    expect(document.body.querySelector(".persona-control-tooltip")).toBeNull();
+  });
+});

package/src/utils/tooltip.ts

@@ -0,0 +1,245 @@
+import { PORTALED_OVERLAY_Z_INDEX } from "./constants";
+
+const DEFAULT_GAP = 8;
+const DEFAULT_VIEWPORT_PADDING = 8;
+const MIN_ARROW_INSET = 10;
+
+export interface TooltipOptions {
+  /** The control the tooltip describes and positions against. */
+  anchor: HTMLElement;
+  /** Hover target. Defaults to `anchor`; wrappers make small icon buttons easier to hit. */
+  trigger?: HTMLElement;
+  /** Tooltip copy. A callback keeps live aria-label updates in sync. */
+  text: string | (() => string);
+  /** Whether the visual tooltip may open. The anchor's accessible name is unaffected. */
+  enabled?: boolean;
+  /** Gap between the control and tooltip, in pixels. */
+  gap?: number;
+  /** Minimum distance from viewport edges, in pixels. */
+  viewportPadding?: number;
+}
+
+export interface TooltipHandle {
+  readonly isOpen: boolean;
+  show(): void;
+  hide(): void;
+  reposition(): void;
+  destroy(): void;
+}
+
+const handles = new WeakMap<HTMLElement, TooltipHandle>();
+
+const isShadowRoot = (root: Node): root is ShadowRoot =>
+  root.nodeType === Node.DOCUMENT_FRAGMENT_NODE && "host" in root;
+
+const tooltipContainer = (anchor: HTMLElement): HTMLElement | ShadowRoot | null => {
+  const root = anchor.getRootNode?.();
+  if (isShadowRoot(root)) return root;
+  return anchor.ownerDocument.body;
+};
+
+const clamp = (value: number, min: number, max: number): number =>
+  Math.min(Math.max(value, min), Math.max(min, max));
+
+/**
+ * Attach a portaled, viewport-aware tooltip to an icon control.
+ *
+ * The tooltip is created only while visible and is mounted outside the widget
+ * panel's clipping containers. Re-attaching to the same anchor replaces the
+ * previous behavior, which makes controller.update() safe and idempotent.
+ */
+export function attachTooltip(options: TooltipOptions): TooltipHandle {
+  handles.get(options.anchor)?.destroy();
+
+  const {
+    anchor,
+    trigger = anchor,
+    text,
+    enabled = true,
+    gap = DEFAULT_GAP,
+    viewportPadding = DEFAULT_VIEWPORT_PADDING,
+  } = options;
+  const currentDocument = (): Document => anchor.ownerDocument;
+  const currentWindow = (): Window =>
+    currentDocument().defaultView ?? window;
+
+  let tooltip: HTMLElement | null = null;
+  let label: HTMLElement | null = null;
+  let detachOpenListeners: (() => void) | null = null;
+  let hovered = false;
+  let focused = false;
+  let destroyed = false;
+
+  const resolvedText = (): string =>
+    (typeof text === "function" ? text() : text).trim();
+
+  const hide = (): void => {
+    detachOpenListeners?.();
+    detachOpenListeners = null;
+    tooltip?.remove();
+    tooltip = null;
+    label = null;
+  };
+
+  const reposition = (): void => {
+    if (!tooltip) return;
+
+    const ownerDocument = currentDocument();
+    const ownerWindow = currentWindow();
+    const anchorRect = anchor.getBoundingClientRect();
+    const tooltipRect = tooltip.getBoundingClientRect();
+    const viewportWidth =
+      ownerDocument.documentElement.clientWidth || ownerWindow.innerWidth;
+    const viewportHeight =
+      ownerDocument.documentElement.clientHeight || ownerWindow.innerHeight;
+
+    const maxLeft = viewportWidth - viewportPadding - tooltipRect.width;
+    const desiredLeft =
+      anchorRect.left + anchorRect.width / 2 - tooltipRect.width / 2;
+    const left = clamp(desiredLeft, viewportPadding, maxLeft);
+
+    const roomAbove = anchorRect.top - viewportPadding;
+    const roomBelow = viewportHeight - viewportPadding - anchorRect.bottom;
+    const requiredHeight = tooltipRect.height + gap;
+    const placement =
+      roomAbove >= requiredHeight || roomAbove >= roomBelow ? "top" : "bottom";
+    const desiredTop =
+      placement === "top"
+        ? anchorRect.top - gap - tooltipRect.height
+        : anchorRect.bottom + gap;
+    const maxTop = viewportHeight - viewportPadding - tooltipRect.height;
+    const top = clamp(desiredTop, viewportPadding, maxTop);
+
+    const anchorCenter = anchorRect.left + anchorRect.width / 2;
+    const arrowMax = Math.max(MIN_ARROW_INSET, tooltipRect.width - MIN_ARROW_INSET);
+    const arrowX = clamp(
+      anchorCenter - left,
+      MIN_ARROW_INSET,
+      arrowMax
+    );
+
+    tooltip.dataset.placement = placement;
+    tooltip.style.left = `${left}px`;
+    tooltip.style.top = `${top}px`;
+    tooltip.style.setProperty("--persona-tooltip-arrow-x", `${arrowX}px`);
+  };
+
+  const show = (): void => {
+    if (destroyed || !enabled || tooltip || !anchor.isConnected) return;
+    const copy = resolvedText();
+    const container = tooltipContainer(anchor);
+    if (!copy || !container) return;
+
+    const ownerDocument = currentDocument();
+    const ownerWindow = currentWindow();
+    tooltip = ownerDocument.createElement("div");
+    tooltip.className = "persona-control-tooltip";
+    tooltip.setAttribute("role", "tooltip");
+    tooltip.dataset.state = "measuring";
+    tooltip.style.zIndex = String(PORTALED_OVERLAY_Z_INDEX);
+
+    label = ownerDocument.createElement("span");
+    label.className = "persona-control-tooltip__label";
+    label.textContent = copy;
+    tooltip.appendChild(label);
+
+    const arrow = ownerDocument.createElement("span");
+    arrow.className = "persona-control-tooltip__arrow";
+    tooltip.appendChild(arrow);
+
+    container.appendChild(tooltip);
+    reposition();
+    tooltip.dataset.state = "open";
+
+    const onReposition = (): void => {
+      if (!anchor.isConnected) {
+        hide();
+        return;
+      }
+      if (label) label.textContent = resolvedText();
+      reposition();
+    };
+    ownerWindow.addEventListener("scroll", onReposition, true);
+    ownerWindow.addEventListener("resize", onReposition);
+
+    const root = anchor.getRootNode();
+    const mutationTarget =
+      isShadowRoot(root)
+        ? root
+        : ownerDocument.documentElement;
+    const observer =
+      typeof MutationObserver === "undefined"
+        ? null
+        : new MutationObserver(() => {
+            if (!anchor.isConnected) hide();
+          });
+    observer?.observe(mutationTarget, { childList: true, subtree: true });
+
+    detachOpenListeners = () => {
+      ownerWindow.removeEventListener("scroll", onReposition, true);
+      ownerWindow.removeEventListener("resize", onReposition);
+      observer?.disconnect();
+    };
+  };
+
+  const syncVisibility = (): void => {
+    if (hovered || focused) show();
+    else hide();
+  };
+  const onMouseEnter = (): void => {
+    const ownerWindow = currentWindow();
+    const hasHover =
+      !ownerWindow.matchMedia ||
+      !ownerWindow.matchMedia("(hover: none)").matches;
+    if (!hasHover) return;
+    hovered = true;
+    syncVisibility();
+  };
+  const onMouseLeave = (): void => {
+    hovered = false;
+    syncVisibility();
+  };
+  const onFocus = (): void => {
+    focused = true;
+    syncVisibility();
+  };
+  const onBlur = (): void => {
+    focused = false;
+    syncVisibility();
+  };
+  const onKeyDown = (event: KeyboardEvent): void => {
+    if (event.key !== "Escape") return;
+    hovered = false;
+    focused = false;
+    hide();
+  };
+
+  trigger.addEventListener("mouseenter", onMouseEnter);
+  trigger.addEventListener("mouseleave", onMouseLeave);
+  anchor.addEventListener("focus", onFocus);
+  anchor.addEventListener("blur", onBlur);
+  anchor.addEventListener("keydown", onKeyDown);
+
+  const handle: TooltipHandle = {
+    get isOpen() {
+      return tooltip !== null;
+    },
+    show,
+    hide,
+    reposition,
+    destroy: () => {
+      if (destroyed) return;
+      destroyed = true;
+      hide();
+      trigger.removeEventListener("mouseenter", onMouseEnter);
+      trigger.removeEventListener("mouseleave", onMouseLeave);
+      anchor.removeEventListener("focus", onFocus);
+      anchor.removeEventListener("blur", onBlur);
+      anchor.removeEventListener("keydown", onKeyDown);
+      handles.delete(anchor);
+    },
+  };
+
+  handles.set(anchor, handle);
+  return handle;
+}

package/dist/chunk-IPVK3KOM.js

@@ -1 +0,0 @@
-var zt=(e,t)=>{let n=document.createElement(e);return t&&(n.className=t),n},Bt=(e,t,n)=>{let o=e.createElement(t);return n&&(o.className=n),o},Ft=()=>document.createDocumentFragment(),Kt=(e,t={},...n)=>{let o=document.createElement(e);if(t.className&&(o.className=t.className),t.text!==void 0&&(o.textContent=t.text),t.attrs)for(let[s,a]of Object.entries(t.attrs))o.setAttribute(s,a);if(t.style){let s=o.style,a=t.style;for(let c of Object.keys(a)){let l=a[c];l!=null&&(s[c]=l)}}let r=n.filter(s=>s!=null);return r.length>0&&o.append(...r),o},Wt=(...e)=>e.filter(Boolean).join(" ");import{Activity as A,ArrowDown as k,ArrowUp as P,ArrowUpRight as L,Bot as I,ChevronDown as R,ChevronUp as D,ChevronRight as H,ChevronLeft as O,Check as z,Clipboard as B,ClipboardCopy as F,CodeXml as K,Copy as W,File as U,FileCode as j,FileSpreadsheet as $,FileText as q,ImagePlus as V,Loader as X,LoaderCircle as G,Mic as _,Paperclip as Y,RefreshCw as Z,Search as J,Send as Q,ShieldAlert as ee,ShieldCheck as te,ShieldX as ne,Square as oe,ThumbsDown as re,ThumbsUp as ie,Upload as se,Volume2 as ae,X as le,User as ce,Mail as de,Phone as ue,Calendar as me,Clock as pe,Building as ge,MapPin as he,Lock as fe,Key as we,CreditCard as ye,AtSign as be,Hash as ve,Globe as xe,Link as Ce,CircleCheck as Se,CircleX as Ee,TriangleAlert as Te,Info as Me,Ban as Ne,Shield as Ae,ArrowLeft as ke,ArrowRight as Pe,ExternalLink as Le,Ellipsis as Ie,EllipsisVertical as Re,Menu as De,House as He,Plus as Oe,Minus as ze,Pencil as Be,Trash as Fe,Trash2 as Ke,Save as We,Download as Ue,Share as je,Funnel as $e,Settings as qe,RotateCw as Ve,Maximize as Xe,Minimize as Ge,ShoppingCart as _e,ShoppingBag as Ye,Package as Ze,Truck as Je,Tag as Qe,Gift as et,Receipt as tt,Wallet as nt,Store as ot,DollarSign as rt,Percent as it,Play as st,Pause as at,VolumeX as lt,Camera as ct,Image as dt,Film as ut,Headphones as mt,MessageCircle as pt,MessageSquare as gt,Bell as ht,Heart as ft,Star as wt,Eye as yt,EyeOff as bt,Bookmark as vt,CalendarDays as xt,History as Ct,Timer as St,Folder as Et,FolderOpen as Tt,Files as Mt,Sparkles as Nt,Zap as At,Sun as kt,Moon as Pt,Flag as Lt,Monitor as It,Smartphone as Rt}from"lucide";var Dt={activity:A,"arrow-down":k,"arrow-up":P,"arrow-up-right":L,bot:I,"chevron-down":R,"chevron-up":D,"chevron-right":H,"chevron-left":O,check:z,clipboard:B,"clipboard-copy":F,"code-xml":K,copy:W,file:U,"file-code":j,"file-spreadsheet":$,"file-text":q,"image-plus":V,loader:X,"loader-circle":G,mic:_,paperclip:Y,"refresh-cw":Z,search:J,send:Q,"shield-alert":ee,"shield-check":te,"shield-x":ne,square:oe,"thumbs-down":re,"thumbs-up":ie,upload:se,"volume-2":ae,x:le,user:ce,mail:de,phone:ue,calendar:me,clock:pe,building:ge,"map-pin":he,lock:fe,key:we,"credit-card":ye,"at-sign":be,hash:ve,globe:xe,link:Ce,"circle-check":Se,"circle-x":Ee,"triangle-alert":Te,info:Me,ban:Ne,shield:Ae,"arrow-left":ke,"arrow-right":Pe,"external-link":Le,ellipsis:Ie,"ellipsis-vertical":Re,menu:De,house:He,plus:Oe,minus:ze,pencil:Be,trash:Fe,"trash-2":Ke,save:We,download:Ue,share:je,funnel:$e,settings:qe,"rotate-cw":Ve,maximize:Xe,minimize:Ge,"shopping-cart":_e,"shopping-bag":Ye,package:Ze,truck:Je,tag:Qe,gift:et,receipt:tt,wallet:nt,store:ot,"dollar-sign":rt,percent:it,play:st,pause:at,"volume-x":lt,camera:ct,image:dt,film:ut,headphones:mt,"message-circle":pt,"message-square":gt,bell:ht,heart:ft,star:wt,eye:yt,"eye-off":bt,bookmark:vt,"calendar-days":xt,history:Ct,timer:St,folder:Et,"folder-open":Tt,files:Mt,sparkles:Nt,zap:At,sun:kt,moon:Pt,flag:Lt,monitor:It,smartphone:Rt},$t=(e,t=24,n="currentColor",o=2)=>{let r=Dt[e];return r?Ht(r,t,n,o):(console.warn(`Lucide icon "${e}" is not in the Persona registry. Add it to packages/widget/src/utils/icons.ts (see docs/icon-registry-shortlist.md).`),null)};function Ht(e,t,n,o){if(!Array.isArray(e))return null;let r=document.createElementNS("http://www.w3.org/2000/svg","svg");return r.setAttribute("width",String(t)),r.setAttribute("height",String(t)),r.setAttribute("viewBox","0 0 24 24"),r.setAttribute("fill","none"),r.setAttribute("stroke",n),r.setAttribute("stroke-width",String(o)),r.setAttribute("stroke-linecap","round"),r.setAttribute("stroke-linejoin","round"),r.setAttribute("aria-hidden","true"),e.forEach(s=>{if(!Array.isArray(s)||s.length<2)return;let a=s[0],c=s[1];if(!c)return;let l=document.createElementNS("http://www.w3.org/2000/svg",a);Object.entries(c).forEach(([h,f])=>{h!=="stroke"&&l.setAttribute(h,String(f))}),r.appendChild(l)}),r}function Vt(e){let t={trigger:e.trigger??"@",position:e.triggerPosition??"anywhere",allowSpaces:!1,sources:Array.isArray(e.sources)?e.sources:[],searchPlaceholder:e.searchPlaceholder,showButton:e.showButton!==!1,buttonIconName:e.buttonIconName,buttonTooltipText:e.buttonTooltipText},n=(e.triggers??[]).map(o=>({trigger:o.trigger,position:o.triggerPosition??"anywhere",allowSpaces:o.allowSpaces??!1,sources:Array.isArray(o.sources)?o.sources:[],searchPlaceholder:o.searchPlaceholder,showButton:o.showButton===!0,buttonIconName:o.buttonIconName,buttonTooltipText:o.buttonTooltipText}));return[t,...n]}function T(e){let t=e.getRootNode?.();return t instanceof ShadowRoot||t instanceof Document?t:e.ownerDocument??document}function b(e,t,n){let o=e instanceof Document?e.head:e,r=t.replace(/["\\]/g,"\\$&");if(o.querySelector(`style[data-persona-plugin-style="${r}"]`))return;let a=(e instanceof Document?e:e.ownerDocument??document).createElement("style");a.setAttribute("data-persona-plugin-style",t),a.textContent=n,o.appendChild(a)}function Gt(e,t,n){if(e instanceof Document||e instanceof ShadowRoot){b(e,t,n);return}let o=e;if(o.isConnected){b(T(o),t,n);return}let r=o.ownerDocument??document;b(r,t,n),queueMicrotask(()=>{let s=T(o);s!==r&&b(s,t,n)})}function Ot(e){let t=e.getRootNode?.();return t instanceof ShadowRoot?t:(e.ownerDocument??document).body}function _t(e){let{anchor:t,content:n,placement:o="bottom-start",offset:r=6,matchAnchorWidth:s=!1,horizontalOffset:a,verticalOffset:c,zIndex:l=2147483e3,onOpen:h,onDismiss:f}=e,M=e.container??Ot(t),d=!1,w=null,v=()=>{if(!d)return;let i=t.getBoundingClientRect();n.style.position="fixed",s&&(n.style.minWidth=`${i.width}px`),a&&(n.style.maxWidth=`${i.width}px`);let m=n.getBoundingClientRect(),u=c?.()??null,y=u!=null?i.top+u:i.top,x=o==="top-start"||o==="top-end"?y-r-m.height:i.bottom+r,g=o==="bottom-end"||o==="top-end"?i.right-m.width:i.left,E=a?.()??null;if(E!=null){let N=Math.max(i.left,i.right-m.width);g=Math.min(Math.max(i.left+E,i.left),N)}n.style.top=`${x}px`,n.style.left=`${g}px`},p=()=>{d&&(d=!1,w&&(w(),w=null),n.remove())},S=()=>{if(d)return;d=!0,l!=null&&(n.style.zIndex=String(l)),M.appendChild(n),v();let i=(t.ownerDocument??document).defaultView??window,m=t.ownerDocument??document,u=()=>{if(!t.isConnected){p(),f?.("anchor-removed");return}v()},y=C=>{let g=typeof C.composedPath=="function"?C.composedPath():[];g.includes(n)||g.includes(t)||(p(),f?.("outside"))},x=i.setTimeout(()=>{m.addEventListener("pointerdown",y,!0)},0);i.addEventListener("scroll",u,!0),i.addEventListener("resize",u),w=()=>{i.clearTimeout(x),m.removeEventListener("pointerdown",y,!0),i.removeEventListener("scroll",u,!0),i.removeEventListener("resize",u)},h?.()};return{get isOpen(){return d},open:S,close:p,toggle:()=>d?p():S(),reposition:v,destroy:p}}function Yt(e){return(typeof e.composedPath=="function"?e.composedPath():[]).some(n=>n instanceof HTMLElement&&(n.tagName==="INPUT"||n.tagName==="TEXTAREA"||n.isContentEditable))}export{zt as a,Bt as b,Ft as c,Kt as d,Wt as e,$t as f,Vt as g,Gt as h,_t as i,Yt as j};