@opengeni/react 7.6.1 → 7.7.0-canary.37111190284001

package/dist/timeline-pill-geometry-Z23V243M.js

@@ -1,110 +0,0 @@
-// src/components/timeline-pill-geometry.ts
-var INTERACTIVE = 'a[href], button, input, select, textarea, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="switch"], [role="checkbox"], [contenteditable="true"]';
-var ROW_WIDTH_RATIO = 0.8;
-function chooseQuestionPosition(pill, frame, scroller, preference, current) {
-  const rect = pill.getBoundingClientRect();
-  const bounds = frame.getBoundingClientRect();
-  const view = scroller.getBoundingClientRect();
-  if (!rect.width || !view.width) return current;
-  const style = getComputedStyle(frame);
-  const baseTop = bounds.top - current.offsetY;
-  const left = (placement) => placement === "start" ? bounds.left + parseFloat(style.paddingLeft || "0") : placement === "end" ? bounds.right - parseFloat(style.paddingRight || "0") - rect.width : bounds.left + (bounds.width - rect.width) / 2;
-  const controls = [];
-  for (const control of scroller.querySelectorAll(INTERACTIVE)) {
-    const box = control.getBoundingClientRect();
-    if (!box.width || !box.height || box.bottom <= baseTop || box.top >= view.bottom) continue;
-    if (box.width < view.width * ROW_WIDTH_RATIO) controls.push(box);
-    else {
-      for (const icon of control.querySelectorAll("svg, img, canvas, video"))
-        controls.push(icon.getBoundingClientRect());
-      const walker = scroller.ownerDocument.createTreeWalker(control, NodeFilter.SHOW_TEXT);
-      for (let text = walker.nextNode(); text; text = walker.nextNode()) {
-        if (!text.textContent?.trim()) continue;
-        const range = scroller.ownerDocument.createRange();
-        range.selectNodeContents(text);
-        controls.push(...range.getClientRects());
-      }
-    }
-  }
-  const clear = (placement, offsetY) => !controls.some(
-    (control) => control.right > left(placement) && control.left < left(placement) + rect.width && control.bottom > baseTop + offsetY && control.top < baseTop + offsetY + rect.height
-  );
-  const order = [current.placement, ...preference.filter((value) => value !== current.placement)];
-  for (const placement of order) if (clear(placement, 0)) return { placement, offsetY: 0 };
-  const offsets = [...new Set(controls.map((control) => control.bottom + 4 - baseTop))].filter((offset) => offset > 0 && baseTop + offset + rect.height <= view.bottom).sort((a, b) => a - b);
-  for (const offsetY of offsets) {
-    for (const placement of order) if (clear(placement, offsetY)) return { placement, offsetY };
-  }
-  return current;
-}
-function choosePlacement(pill, frame, scroller, preference, current) {
-  const pillRect = pill.getBoundingClientRect();
-  const frameRect = frame.getBoundingClientRect();
-  const view = scroller.getBoundingClientRect();
-  if (pillRect.width === 0 || view.width === 0) return current;
-  const inset = Math.max(0, pillRect.left - frameRect.left, frameRect.right - pillRect.right);
-  const gutter = Math.min(inset, parseFloat(getComputedStyle(scroller).paddingLeft) || 16);
-  const left = (placement) => placement === "start" ? frameRect.left + gutter : placement === "end" ? frameRect.right - gutter - pillRect.width : frameRect.left + (frameRect.width - pillRect.width) / 2;
-  const collisions = (placement) => countCollisions(
-    pill,
-    scroller,
-    view,
-    left(placement),
-    pillRect.top,
-    pillRect.width,
-    pillRect.height
-  );
-  if (collisions(current) === 0) return current;
-  let best = current;
-  let fewest = Number.POSITIVE_INFINITY;
-  for (const candidate of preference) {
-    const count = candidate === current ? collisions(current) : collisions(candidate);
-    if (count === 0) return candidate;
-    if (count < fewest) {
-      fewest = count;
-      best = candidate;
-    }
-  }
-  return best;
-}
-function countCollisions(pill, scroller, view, left, top, width, height) {
-  const document = scroller.ownerDocument;
-  let count = 0;
-  for (const fx of [0.06, 0.3, 0.5, 0.7, 0.94]) {
-    for (const fy of [0.2, 0.5, 0.8]) {
-      const x = left + width * fx;
-      const y = top + height * fy;
-      if (x < view.left || x > view.right || y < view.top || y > view.bottom) continue;
-      if (coversControl(document.elementsFromPoint(x, y), pill, scroller, view, x, y)) count += 1;
-    }
-  }
-  return count;
-}
-function coversControl(stack, pill, scroller, view, x, y) {
-  for (const element of stack) {
-    if (pill.contains(element)) continue;
-    if (!scroller.contains(element) || element === scroller) return false;
-    const control = element.closest(INTERACTIVE);
-    if (!control || !scroller.contains(control)) return false;
-    if (control.getBoundingClientRect().width < view.width * ROW_WIDTH_RATIO) return true;
-    if (element.closest("svg, img, canvas, video")) return true;
-    return textUnderPoint(element, x, y);
-  }
-  return false;
-}
-function textUnderPoint(element, x, y) {
-  const range = element.ownerDocument.createRange();
-  for (const node of element.childNodes) {
-    if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim()) continue;
-    range.selectNodeContents(node);
-    for (const rect of range.getClientRects()) {
-      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) return true;
-    }
-  }
-  return false;
-}
-export {
-  choosePlacement,
-  chooseQuestionPosition
-};
-//# sourceMappingURL=timeline-pill-geometry-Z23V243M.js.map

package/dist/timeline-pill-geometry-Z23V243M.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/components/timeline-pill-geometry.ts"],"sourcesContent":["import type { TimelinePillPlacement, TimelinePillPosition } from \"./timeline-pill-placement\";\n\nconst INTERACTIVE =\n  'a[href], button, input, select, textarea, summary, [role=\"button\"], [role=\"link\"], [role=\"menuitem\"], [role=\"tab\"], [role=\"switch\"], [role=\"checkbox\"], [contenteditable=\"true\"]';\n\n/** A control this wide is a row (a disclosure header); only what it draws counts. */\nconst ROW_WIDTH_RATIO = 0.8;\n\n/** The full contextual label may not fit beside a compact toolbar on phones. */\nexport function chooseQuestionPosition(\n  pill: HTMLElement,\n  frame: HTMLElement,\n  scroller: HTMLElement,\n  preference: readonly TimelinePillPlacement[],\n  current: TimelinePillPosition,\n): TimelinePillPosition {\n  const rect = pill.getBoundingClientRect();\n  const bounds = frame.getBoundingClientRect();\n  const view = scroller.getBoundingClientRect();\n  if (!rect.width || !view.width) return current;\n  const style = getComputedStyle(frame);\n  const baseTop = bounds.top - current.offsetY;\n  const left = (placement: TimelinePillPlacement) =>\n    placement === \"start\"\n      ? bounds.left + parseFloat(style.paddingLeft || \"0\")\n      : placement === \"end\"\n        ? bounds.right - parseFloat(style.paddingRight || \"0\") - rect.width\n        : bounds.left + (bounds.width - rect.width) / 2;\n  const controls: DOMRect[] = [];\n  for (const control of scroller.querySelectorAll<HTMLElement>(INTERACTIVE)) {\n    const box = control.getBoundingClientRect();\n    if (!box.width || !box.height || box.bottom <= baseTop || box.top >= view.bottom) continue;\n    if (box.width < view.width * ROW_WIDTH_RATIO) controls.push(box);\n    else {\n      for (const icon of control.querySelectorAll(\"svg, img, canvas, video\"))\n        controls.push(icon.getBoundingClientRect());\n      const walker = scroller.ownerDocument.createTreeWalker(control, NodeFilter.SHOW_TEXT);\n      for (let text = walker.nextNode(); text; text = walker.nextNode()) {\n        if (!text.textContent?.trim()) continue;\n        const range = scroller.ownerDocument.createRange();\n        range.selectNodeContents(text);\n        controls.push(...range.getClientRects());\n      }\n    }\n  }\n  const clear = (placement: TimelinePillPlacement, offsetY: number) =>\n    !controls.some(\n      (control) =>\n        control.right > left(placement) &&\n        control.left < left(placement) + rect.width &&\n        control.bottom > baseTop + offsetY &&\n        control.top < baseTop + offsetY + rect.height,\n    );\n  const order = [current.placement, ...preference.filter((value) => value !== current.placement)];\n  // Return to the normal strip once it is clear, without touching scroll geometry.\n  for (const placement of order) if (clear(placement, 0)) return { placement, offsetY: 0 };\n  const offsets = [...new Set(controls.map((control) => control.bottom + 4 - baseTop))]\n    .filter((offset) => offset > 0 && baseTop + offset + rect.height <= view.bottom)\n    .sort((a, b) => a - b);\n  for (const offsetY of offsets) {\n    for (const placement of order) if (clear(placement, offsetY)) return { placement, offsetY };\n  }\n  return current;\n}\n\n/**\n * Hit-testing for useTimelinePillPlacement, loaded only once a pill shows so it\n * stays out of a session's first load.\n */\nexport function choosePlacement(\n  pill: HTMLElement,\n  frame: HTMLElement,\n  scroller: HTMLElement,\n  preference: readonly TimelinePillPlacement[],\n  current: TimelinePillPlacement,\n): TimelinePillPlacement {\n  const pillRect = pill.getBoundingClientRect();\n  const frameRect = frame.getBoundingClientRect();\n  const view = scroller.getBoundingClientRect();\n  if (pillRect.width === 0 || view.width === 0) return current;\n  const inset = Math.max(0, pillRect.left - frameRect.left, frameRect.right - pillRect.right);\n  const gutter = Math.min(inset, parseFloat(getComputedStyle(scroller).paddingLeft) || 16);\n  const left = (placement: TimelinePillPlacement) =>\n    placement === \"start\"\n      ? frameRect.left + gutter\n      : placement === \"end\"\n        ? frameRect.right - gutter - pillRect.width\n        : frameRect.left + (frameRect.width - pillRect.width) / 2;\n  const collisions = (placement: TimelinePillPlacement) =>\n    countCollisions(\n      pill,\n      scroller,\n      view,\n      left(placement),\n      pillRect.top,\n      pillRect.width,\n      pillRect.height,\n    );\n  // Stay put while the current spot is clear, so the pill does not wander.\n  if (collisions(current) === 0) return current;\n  let best = current;\n  let fewest = Number.POSITIVE_INFINITY;\n  for (const candidate of preference) {\n    const count = candidate === current ? collisions(current) : collisions(candidate);\n    if (count === 0) return candidate;\n    if (count < fewest) {\n      fewest = count;\n      best = candidate;\n    }\n  }\n  return best;\n}\n\nfunction countCollisions(\n  pill: HTMLElement,\n  scroller: HTMLElement,\n  view: DOMRect,\n  left: number,\n  top: number,\n  width: number,\n  height: number,\n): number {\n  const document = scroller.ownerDocument;\n  let count = 0;\n  for (const fx of [0.06, 0.3, 0.5, 0.7, 0.94]) {\n    for (const fy of [0.2, 0.5, 0.8]) {\n      const x = left + width * fx;\n      const y = top + height * fy;\n      if (x < view.left || x > view.right || y < view.top || y > view.bottom) continue;\n      if (coversControl(document.elementsFromPoint(x, y), pill, scroller, view, x, y)) count += 1;\n    }\n  }\n  return count;\n}\n\nfunction coversControl(\n  stack: Element[],\n  pill: HTMLElement,\n  scroller: HTMLElement,\n  view: DOMRect,\n  x: number,\n  y: number,\n): boolean {\n  for (const element of stack) {\n    if (pill.contains(element)) continue;\n    if (!scroller.contains(element) || element === scroller) return false;\n    const control = element.closest(INTERACTIVE);\n    if (!control || !scroller.contains(control)) return false;\n    // A compact control (a link, an icon button) is covered anywhere on its box.\n    if (control.getBoundingClientRect().width < view.width * ROW_WIDTH_RATIO) return true;\n    // A full-width row (a disclosure header) only where it draws something: an\n    // icon or the glyphs of its label, never its empty background.\n    if (element.closest(\"svg, img, canvas, video\")) return true;\n    return textUnderPoint(element, x, y);\n  }\n  return false;\n}\n\nfunction textUnderPoint(element: Element, x: number, y: number): boolean {\n  const range = element.ownerDocument.createRange();\n  for (const node of element.childNodes) {\n    if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim()) continue;\n    range.selectNodeContents(node);\n    for (const rect of range.getClientRects()) {\n      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) return true;\n    }\n  }\n  return false;\n}\n"],"mappings":"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","names":[]}

package/src/components/timeline-pill-geometry.ts

@@ -1,169 +0,0 @@
-import type { TimelinePillPlacement, TimelinePillPosition } from "./timeline-pill-placement";
-
-const INTERACTIVE =
-  'a[href], button, input, select, textarea, summary, [role="button"], [role="link"], [role="menuitem"], [role="tab"], [role="switch"], [role="checkbox"], [contenteditable="true"]';
-
-/** A control this wide is a row (a disclosure header); only what it draws counts. */
-const ROW_WIDTH_RATIO = 0.8;
-
-/** The full contextual label may not fit beside a compact toolbar on phones. */
-export function chooseQuestionPosition(
-  pill: HTMLElement,
-  frame: HTMLElement,
-  scroller: HTMLElement,
-  preference: readonly TimelinePillPlacement[],
-  current: TimelinePillPosition,
-): TimelinePillPosition {
-  const rect = pill.getBoundingClientRect();
-  const bounds = frame.getBoundingClientRect();
-  const view = scroller.getBoundingClientRect();
-  if (!rect.width || !view.width) return current;
-  const style = getComputedStyle(frame);
-  const baseTop = bounds.top - current.offsetY;
-  const left = (placement: TimelinePillPlacement) =>
-    placement === "start"
-      ? bounds.left + parseFloat(style.paddingLeft || "0")
-      : placement === "end"
-        ? bounds.right - parseFloat(style.paddingRight || "0") - rect.width
-        : bounds.left + (bounds.width - rect.width) / 2;
-  const controls: DOMRect[] = [];
-  for (const control of scroller.querySelectorAll<HTMLElement>(INTERACTIVE)) {
-    const box = control.getBoundingClientRect();
-    if (!box.width || !box.height || box.bottom <= baseTop || box.top >= view.bottom) continue;
-    if (box.width < view.width * ROW_WIDTH_RATIO) controls.push(box);
-    else {
-      for (const icon of control.querySelectorAll("svg, img, canvas, video"))
-        controls.push(icon.getBoundingClientRect());
-      const walker = scroller.ownerDocument.createTreeWalker(control, NodeFilter.SHOW_TEXT);
-      for (let text = walker.nextNode(); text; text = walker.nextNode()) {
-        if (!text.textContent?.trim()) continue;
-        const range = scroller.ownerDocument.createRange();
-        range.selectNodeContents(text);
-        controls.push(...range.getClientRects());
-      }
-    }
-  }
-  const clear = (placement: TimelinePillPlacement, offsetY: number) =>
-    !controls.some(
-      (control) =>
-        control.right > left(placement) &&
-        control.left < left(placement) + rect.width &&
-        control.bottom > baseTop + offsetY &&
-        control.top < baseTop + offsetY + rect.height,
-    );
-  const order = [current.placement, ...preference.filter((value) => value !== current.placement)];
-  // Return to the normal strip once it is clear, without touching scroll geometry.
-  for (const placement of order) if (clear(placement, 0)) return { placement, offsetY: 0 };
-  const offsets = [...new Set(controls.map((control) => control.bottom + 4 - baseTop))]
-    .filter((offset) => offset > 0 && baseTop + offset + rect.height <= view.bottom)
-    .sort((a, b) => a - b);
-  for (const offsetY of offsets) {
-    for (const placement of order) if (clear(placement, offsetY)) return { placement, offsetY };
-  }
-  return current;
-}
-
-/**
- * Hit-testing for useTimelinePillPlacement, loaded only once a pill shows so it
- * stays out of a session's first load.
- */
-export function choosePlacement(
-  pill: HTMLElement,
-  frame: HTMLElement,
-  scroller: HTMLElement,
-  preference: readonly TimelinePillPlacement[],
-  current: TimelinePillPlacement,
-): TimelinePillPlacement {
-  const pillRect = pill.getBoundingClientRect();
-  const frameRect = frame.getBoundingClientRect();
-  const view = scroller.getBoundingClientRect();
-  if (pillRect.width === 0 || view.width === 0) return current;
-  const inset = Math.max(0, pillRect.left - frameRect.left, frameRect.right - pillRect.right);
-  const gutter = Math.min(inset, parseFloat(getComputedStyle(scroller).paddingLeft) || 16);
-  const left = (placement: TimelinePillPlacement) =>
-    placement === "start"
-      ? frameRect.left + gutter
-      : placement === "end"
-        ? frameRect.right - gutter - pillRect.width
-        : frameRect.left + (frameRect.width - pillRect.width) / 2;
-  const collisions = (placement: TimelinePillPlacement) =>
-    countCollisions(
-      pill,
-      scroller,
-      view,
-      left(placement),
-      pillRect.top,
-      pillRect.width,
-      pillRect.height,
-    );
-  // Stay put while the current spot is clear, so the pill does not wander.
-  if (collisions(current) === 0) return current;
-  let best = current;
-  let fewest = Number.POSITIVE_INFINITY;
-  for (const candidate of preference) {
-    const count = candidate === current ? collisions(current) : collisions(candidate);
-    if (count === 0) return candidate;
-    if (count < fewest) {
-      fewest = count;
-      best = candidate;
-    }
-  }
-  return best;
-}
-
-function countCollisions(
-  pill: HTMLElement,
-  scroller: HTMLElement,
-  view: DOMRect,
-  left: number,
-  top: number,
-  width: number,
-  height: number,
-): number {
-  const document = scroller.ownerDocument;
-  let count = 0;
-  for (const fx of [0.06, 0.3, 0.5, 0.7, 0.94]) {
-    for (const fy of [0.2, 0.5, 0.8]) {
-      const x = left + width * fx;
-      const y = top + height * fy;
-      if (x < view.left || x > view.right || y < view.top || y > view.bottom) continue;
-      if (coversControl(document.elementsFromPoint(x, y), pill, scroller, view, x, y)) count += 1;
-    }
-  }
-  return count;
-}
-
-function coversControl(
-  stack: Element[],
-  pill: HTMLElement,
-  scroller: HTMLElement,
-  view: DOMRect,
-  x: number,
-  y: number,
-): boolean {
-  for (const element of stack) {
-    if (pill.contains(element)) continue;
-    if (!scroller.contains(element) || element === scroller) return false;
-    const control = element.closest(INTERACTIVE);
-    if (!control || !scroller.contains(control)) return false;
-    // A compact control (a link, an icon button) is covered anywhere on its box.
-    if (control.getBoundingClientRect().width < view.width * ROW_WIDTH_RATIO) return true;
-    // A full-width row (a disclosure header) only where it draws something: an
-    // icon or the glyphs of its label, never its empty background.
-    if (element.closest("svg, img, canvas, video")) return true;
-    return textUnderPoint(element, x, y);
-  }
-  return false;
-}
-
-function textUnderPoint(element: Element, x: number, y: number): boolean {
-  const range = element.ownerDocument.createRange();
-  for (const node of element.childNodes) {
-    if (node.nodeType !== Node.TEXT_NODE || !node.textContent?.trim()) continue;
-    range.selectNodeContents(node);
-    for (const rect of range.getClientRects()) {
-      if (x >= rect.left && x <= rect.right && y >= rect.top && y <= rect.bottom) return true;
-    }
-  }
-  return false;
-}

package/src/components/timeline-pill-placement.ts

@@ -1,99 +0,0 @@
-import { type RefObject, useEffect, useState } from "react";
-
-/** Where a floating timeline pill sits along its edge of the conversation. */
-export type TimelinePillPlacement = "start" | "center" | "end";
-export type TimelinePillPosition = { placement: TimelinePillPlacement; offsetY: number };
-
-const RECHECK_MS = 1000;
-
-/**
- * Floating pills (Jump to latest, Back to your message) sit over the scrolling
- * conversation. Prefer sliding one sideways when its spot would cover
- * a control: a link, a button, or the label and chevron of a full-width row
- * such as the active turn's "Working" header. Plain prose may sit under a pill;
- * controls may not. The top contextual pill can also move below a toolbar when
- * no horizontal slot fits. Only the pill moves — the scroller's size, padding, and
- * scroll position never change — so timeline anchoring stays untouched.
- */
-export function useTimelinePillPlacement({
-  pillRef,
-  scrollerRef,
-  active,
-  preference,
-  allowDownwardFallback = false,
-}: {
-  pillRef: RefObject<HTMLElement | null>;
-  scrollerRef: RefObject<HTMLElement | null>;
-  active: boolean;
-  /** Placements in order of preference; the first is the resting position. */
-  preference: readonly TimelinePillPlacement[];
-  allowDownwardFallback?: boolean;
-}): TimelinePillPosition {
-  const [position, setPosition] = useState<TimelinePillPosition>({
-    placement: preference[0]!,
-    offsetY: 0,
-  });
-  const key = preference.join(",");
-
-  useEffect(() => {
-    if (!active) {
-      setPosition({ placement: preference[0]!, offsetY: 0 });
-      return;
-    }
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-    let frame = 0;
-    let current: TimelinePillPosition = { placement: preference[0]!, offsetY: 0 };
-    let geometry: typeof import("./timeline-pill-geometry") | null = null;
-    let disposed = false;
-    void import("./timeline-pill-geometry").then((loaded) => {
-      if (disposed) return;
-      geometry = loaded;
-      schedule();
-    });
-    const evaluate = () => {
-      frame = 0;
-      const pill = pillRef.current;
-      const frameElement = pill?.offsetParent;
-      if (!geometry || !pill || !(frameElement instanceof HTMLElement)) return;
-      const next = allowDownwardFallback
-        ? geometry.chooseQuestionPosition(pill, frameElement, scroller, preference, current)
-        : {
-            placement: geometry.choosePlacement(
-              pill,
-              frameElement,
-              scroller,
-              preference,
-              current.placement,
-            ),
-            offsetY: 0,
-          };
-      if (next.placement !== current.placement || next.offsetY !== current.offsetY) {
-        current = next;
-        setPosition(next);
-      }
-    };
-    const schedule = () => {
-      if (frame === 0) frame = requestAnimationFrame(evaluate);
-    };
-    schedule();
-    const view = scroller.ownerDocument.defaultView;
-    scroller.addEventListener("scroll", schedule, { passive: true });
-    view?.addEventListener("resize", schedule);
-    // Content and panel width can change under a stationary reader (a streaming
-    // row, a ticking elapsed time, a resized host panel), so look again now and
-    // then while the pill is shown.
-    const timer = setInterval(schedule, RECHECK_MS);
-    return () => {
-      disposed = true;
-      if (frame !== 0) cancelAnimationFrame(frame);
-      scroller.removeEventListener("scroll", schedule);
-      view?.removeEventListener("resize", schedule);
-      clearInterval(timer);
-    };
-    // `key` stands in for the preference array's contents.
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [active, key, pillRef, scrollerRef, allowDownwardFallback]);
-
-  return active ? position : { placement: preference[0]!, offsetY: 0 };
-}