@opengeni/react 7.4.0-canary.36844267522001 → 7.4.0

package/src/components/artifacts/session-artifact-viewer.tsx

@@ -1,376 +0,0 @@
-import { SESSION_SCOPE_HEADER, type ClientConfig, type OpenGeniClient } from "@opengeni/sdk";
-import { createEditableArtifactReplicaId } from "@opengeni/sdk/editable-artifacts";
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import { cn } from "../../lib/cn";
-import { useOpenGeni, type ClientOverride } from "../../session-context";
-import {
-  ArtifactLabelsProvider,
-  ArtifactLoading,
-  ArtifactProblem,
-  ArtifactViewerHeader,
-  artifactLoadErrorView,
-  useArtifactLabels,
-  type ArtifactKind,
-  type ArtifactLabels,
-} from "./artifact-chrome";
-import { EditableArtifactView, type EditableArtifactRuntimes } from "./editable-artifact-view";
-import type { SiteToolBridgeFactory } from "./chat-interactive-block";
-import { SiteView } from "./site-view";
-
-/** An artifact opened from a session: the targets agent links and Site previews name. */
-export type SessionArtifactTarget = Readonly<
-  | { kind: "editable-artifact"; artifactId: string; title?: string | undefined }
-  | { kind: "site"; artifactId: string; title?: string | undefined }
->;
-
-/** Every string the viewer shows, including its Site frame and states. */
-export type SessionArtifactViewerLabels = Partial<ArtifactLabels>;
-
-export type SessionArtifactViewerProps = ClientOverride &
-  Readonly<{
-    /** The conversation the artifact belongs to; the proxy only serves its artifacts. */
-    sessionId: string;
-    target: SessionArtifactTarget;
-    onClose: () => void;
-    /** Show a Back control, for example to return to the conversation on phones. */
-    onBack?: (() => void) | undefined;
-    /** Browser kernels and Worker for documents, spreadsheets, and presentations. */
-    editableRuntimes?: EditableArtifactRuntimes | undefined;
-    theme?: "light" | "dark" | undefined;
-    /** Host-owned Site API access; omit it and Sites render without workspace tools. */
-    siteToolBridge?: SiteToolBridgeFactory | undefined;
-    labels?: SessionArtifactViewerLabels | undefined;
-    className?: string | undefined;
-  }>;
-
-type ViewerClient = Pick<
-  OpenGeniClient,
-  | "withHeaders"
-  | "apiUrl"
-  | "fetchApi"
-  | "getClientConfig"
-  | "getEditableArtifact"
-  | "getWorkspaceArtifact"
-  | "getWorkspaceArtifactHtml"
->;
-
-const viewerClientKeys = new WeakMap<ViewerClient, string>();
-
-function viewerClientKey(client: ViewerClient): string {
-  let key = viewerClientKeys.get(client);
-  if (!key) {
-    key = crypto.randomUUID();
-    viewerClientKeys.set(client, key);
-  }
-  return key;
-}
-
-/**
- * A host-mountable viewer for one editable artifact or Site from a session,
- * with its own header (title, Back, Close). Mount it in any sized container
- * (a side panel, a sheet); it fills it. Data flows through the provider's
- * client and `createSessionProxyHandler({ artifacts: true })`, scoped to
- * `sessionId`.
- */
-export function SessionArtifactViewer({ labels, ...props }: SessionArtifactViewerProps) {
-  return (
-    <ArtifactLabelsProvider labels={labels}>
-      <Viewer {...props} />
-    </ArtifactLabelsProvider>
-  );
-}
-
-function Viewer({
-  client: clientOverride,
-  workspaceId: workspaceOverride,
-  sessionId,
-  target,
-  onClose,
-  onBack,
-  editableRuntimes,
-  theme,
-  siteToolBridge,
-  className,
-}: Omit<SessionArtifactViewerProps, "labels">) {
-  const labels = useArtifactLabels();
-  const context = useOpenGeni({ client: clientOverride, workspaceId: workspaceOverride });
-  const base = context.client as unknown as ViewerClient;
-  const workspaceId = context.workspaceId;
-  const client = useMemo(
-    () => base.withHeaders({ [SESSION_SCOPE_HEADER]: sessionId }),
-    [base, sessionId],
-  );
-  const [loaded, setLoaded] = useState<{
-    key: string;
-    client: ViewerClient;
-    workspaceId: string;
-    title: string;
-    kind: ArtifactKind | null;
-  } | null>(null);
-  const targetKey = `${target.kind}:${target.artifactId}`;
-  const current =
-    loaded?.key === targetKey && loaded.client === client && loaded.workspaceId === workspaceId
-      ? loaded
-      : null;
-  const kind: ArtifactKind | null = target.kind === "site" ? "site" : (current?.kind ?? null);
-  const [unavailable, setUnavailable] = useState<{
-    key: string;
-    client: ViewerClient;
-    workspaceId: string;
-  } | null>(null);
-  const markUnavailable = useCallback(
-    () => setUnavailable({ key: targetKey, client, workspaceId }),
-    [client, targetKey, workspaceId],
-  );
-  const title =
-    current?.title ??
-    target.title ??
-    (unavailable?.key === targetKey &&
-    unavailable.client === client &&
-    unavailable.workspaceId === workspaceId
-      ? labels.artifact
-      : labels.opening);
-  return (
-    <section
-      aria-label={title}
-      data-og-artifact-viewer={target.kind}
-      className={cn("og-root flex h-full min-h-0 w-full min-w-0 flex-col bg-bg text-fg", className)}
-    >
-      <ArtifactViewerHeader
-        kind={kind}
-        title={title}
-        onBack={onBack}
-        backLabel={labels.back}
-        onClose={onClose}
-        closeLabel={labels.close}
-      />
-      <div className="flex min-h-0 min-w-0 flex-1 flex-col overflow-hidden">
-        {target.kind === "site" ? (
-          <SiteView
-            key={targetKey}
-            client={client}
-            workspaceId={workspaceId}
-            siteId={target.artifactId}
-            theme={theme}
-            toolBridge={siteToolBridge}
-            showTitle={false}
-            onTitle={(next) =>
-              setLoaded({ key: targetKey, client, workspaceId, title: next, kind: "site" })
-            }
-          />
-        ) : (
-          <EditableBody
-            key={targetKey}
-            client={client}
-            workspaceId={workspaceId}
-            sessionId={sessionId}
-            artifactId={target.artifactId}
-            runtimes={editableRuntimes}
-            onOpened={(next, modality) =>
-              setLoaded({ key: targetKey, client, workspaceId, title: next, kind: modality })
-            }
-            onUnavailable={markUnavailable}
-          />
-        )}
-      </div>
-    </section>
-  );
-}
-
-function EditableBody({
-  client,
-  workspaceId,
-  sessionId,
-  artifactId,
-  runtimes,
-  onOpened,
-  onUnavailable,
-}: {
-  client: ViewerClient;
-  workspaceId: string;
-  sessionId: string;
-  artifactId: string;
-  runtimes: EditableArtifactRuntimes | undefined;
-  onOpened: (title: string, modality: ArtifactKind) => void;
-  onUnavailable: () => void;
-}) {
-  const labels = useArtifactLabels();
-  const clientKey = viewerClientKey(client);
-  const [retryEpoch, setRetryEpoch] = useState(0);
-  const [configState, setConfigState] = useState<{
-    client: ViewerClient;
-    workspaceId: string;
-    sessionId: string;
-    result:
-      | { kind: "ready"; config: NonNullable<ClientConfig["artifacts"]> }
-      | { kind: "unavailable" }
-      | { kind: "error"; error: unknown };
-  } | null>(null);
-  const current =
-    configState?.client === client &&
-    configState.workspaceId === workspaceId &&
-    configState.sessionId === sessionId
-      ? configState.result
-      : null;
-  const config = current?.kind === "ready" ? current.config : null;
-  const scopeRef = useRef({ client, workspaceId, sessionId });
-  scopeRef.current = { client, workspaceId, sessionId };
-  useEffect(() => {
-    let live = true;
-    setConfigState(null);
-    client.getClientConfig().then(
-      (value) =>
-        live &&
-        setConfigState({
-          client,
-          workspaceId,
-          sessionId,
-          result: value.artifacts
-            ? { kind: "ready", config: value.artifacts }
-            : { kind: "unavailable" },
-        }),
-      (error: unknown) =>
-        live &&
-        setConfigState({ client, workspaceId, sessionId, result: { kind: "error", error } }),
-    );
-    return () => {
-      live = false;
-    };
-  }, [client, retryEpoch, sessionId, workspaceId]);
-  const baseUrl = useMemo(
-    () => new URL(client.apiUrl("/"), globalThis.location?.href ?? "http://localhost/"),
-    [client],
-  );
-  const transport = useMemo(() => {
-    if (!config) return undefined;
-    const socket = new URL(config.editableLiveUrl);
-    let scope = new AbortController();
-    const checkCurrent = (signal: AbortSignal) => {
-      signal.throwIfAborted();
-      if (
-        scopeRef.current.client !== client ||
-        scopeRef.current.workspaceId !== workspaceId ||
-        scopeRef.current.sessionId !== sessionId
-      ) {
-        throw new DOMException("Artifact viewer scope changed", "AbortError");
-      }
-    };
-    return {
-      activate: () => {
-        if (scope.signal.aborted) scope = new AbortController();
-      },
-      abort: () => scope.abort(),
-      fetch: (async (input: RequestInfo | URL, init?: RequestInit) => {
-        const signal = AbortSignal.any([scope.signal, ...(init?.signal ? [init.signal] : [])]);
-        checkCurrent(signal);
-        const url = new URL(input instanceof Request ? input.url : input, baseUrl);
-        if (
-          init?.method === "POST" &&
-          url.pathname ===
-            new URL(
-              `v1/workspaces/${encodeURIComponent(workspaceId)}/editable-artifacts/${encodeURIComponent(artifactId)}/live-ticket`,
-              baseUrl,
-            ).pathname
-        ) {
-          // A reconnect must revalidate the current host principal before
-          // minting a ticket for the editor's retained cache partition.
-          const next = (await client.getClientConfig({ signal })).artifacts;
-          checkCurrent(signal);
-          if (!next || artifactCapabilityKey(next) !== artifactCapabilityKey(config)) {
-            setConfigState({
-              client,
-              workspaceId,
-              sessionId,
-              result: next ? { kind: "ready", config: next } : { kind: "unavailable" },
-            });
-            scope.abort();
-            signal.throwIfAborted();
-          }
-          const { replicaId } = (await new Request(input, init).json()) as {
-            replicaId?: unknown;
-          };
-          if (typeof replicaId !== "string") throw new TypeError("Artifact replica is required");
-          await client.getEditableArtifact(workspaceId, artifactId, { replicaId, signal });
-          checkCurrent(signal);
-        }
-        return client.fetchApi(url, { ...init, signal });
-      }) as typeof fetch,
-      webSocketUrl: socket,
-      ...(isLoopback(baseUrl) && isLoopback(socket)
-        ? { allowInsecureDevelopmentTransport: true }
-        : {}),
-    };
-  }, [artifactId, baseUrl, client, config, sessionId, workspaceId]);
-  useEffect(() => {
-    transport?.activate();
-    return () => transport?.abort();
-  }, [transport]);
-  const blocked = current !== null && (current.kind !== "ready" || !runtimes);
-  useEffect(() => {
-    if (blocked) onUnavailable();
-  }, [blocked, onUnavailable]);
-  if (!current) return <ArtifactLoading label={labels.opening} />;
-  if (current.kind === "error") {
-    return (
-      <ArtifactProblem
-        view={artifactLoadErrorView(current.error, "editable", labels)}
-        onRetry={() => setRetryEpoch((value) => value + 1)}
-      />
-    );
-  }
-  if (!config || !transport) {
-    return <ArtifactProblem view={{ ...labels.viewingDisabled, retryable: false }} />;
-  }
-  if (!runtimes) {
-    return <ArtifactProblem view={{ ...labels.editorsMissing, retryable: false }} />;
-  }
-  return (
-    <EditableArtifactView
-      baseUrl={baseUrl}
-      workspaceId={workspaceId}
-      artifactId={artifactId}
-      authorityKey={JSON.stringify([clientKey, sessionId, artifactCapabilityKey(config)])}
-      runtimes={{
-        ...runtimes,
-        ...(isLoopback(baseUrl) ? { allowInsecureDevelopmentAssets: true } : {}),
-      }}
-      transport={transport}
-      showHeader={false}
-      open={async (signal) => {
-        const replicaId = createEditableArtifactReplicaId();
-        const artifact = await client.getEditableArtifact(workspaceId, artifactId, {
-          replicaId,
-          signal,
-        });
-        signal.throwIfAborted();
-        onOpened(artifact.title, artifact.modality);
-        return {
-          artifact,
-          replicaId,
-          authority: {
-            deploymentOrigin: baseUrl.origin,
-            workspaceId,
-            ...config.cachePartition,
-          },
-        };
-      }}
-    />
-  );
-}
-
-function artifactCapabilityKey(config: NonNullable<ClientConfig["artifacts"]>): string {
-  return JSON.stringify([
-    config.editableLiveUrl,
-    config.cachePartition.accountId,
-    config.cachePartition.principalId,
-    config.cachePartition.authorizationEpoch,
-  ]);
-}
-
-function isLoopback(url: URL): boolean {
-  return (
-    (url.protocol === "http:" || url.protocol === "ws:") &&
-    (url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]")
-  );
-}

package/src/components/artifacts/site-view.tsx

@@ -1,116 +0,0 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from "react";
-
-import { loadSiteSnapshot } from "../../sites-ui";
-import {
-  ArtifactLoading,
-  ArtifactProblem,
-  artifactLoadErrorView,
-  useArtifactLabels,
-} from "./artifact-chrome";
-import { ArtifactSandbox } from "./artifact-sandbox";
-import type { SiteSnapshotClient, SiteToolBridgeFactory } from "./chat-interactive-block";
-
-type Snapshot = Awaited<ReturnType<typeof loadSiteSnapshot>>;
-
-export type SiteViewProps = {
-  client: SiteSnapshotClient;
-  workspaceId: string;
-  siteId: string;
-  /** Host-owned Site API access. Omit it and the Site renders without workspace tools. */
-  toolBridge?: SiteToolBridgeFactory | undefined;
-  theme?: "light" | "dark" | undefined;
-  /** Shown instead of the archived notice; the console links to its full page. */
-  archivedMessage?: string | undefined;
-  /** Show the Site title in the frame bar; hide it under a host header that already does. */
-  showTitle?: boolean | undefined;
-  /** Loading copy; defaults to "Loading Site…". */
-  loadingLabel?: string | undefined;
-  /** Called with the loaded title, for a host header. */
-  onTitle?: ((title: string) => void) | undefined;
-  className?: string | undefined;
-};
-
-/**
- * A published Site filling its container: the console's session dock and an
- * embedding host's artifact viewer render the same view.
- */
-export function SiteView({
-  client,
-  workspaceId,
-  siteId,
-  toolBridge,
-  theme,
-  archivedMessage,
-  showTitle = true,
-  loadingLabel,
-  onTitle,
-  className,
-}: SiteViewProps) {
-  const labels = useArtifactLabels();
-  const [snapshot, setSnapshot] = useState<Snapshot | null>(null);
-  const [error, setError] = useState<unknown>(null);
-  const readAbort = useRef<AbortController | null>(null);
-  const onTitleRef = useRef(onTitle);
-  onTitleRef.current = onTitle;
-  const load = useCallback(async () => {
-    readAbort.current?.abort();
-    const abort = new AbortController();
-    readAbort.current = abort;
-    try {
-      setError(null);
-      const next = await loadSiteSnapshot(client, workspaceId, siteId, {
-        signal: abort.signal,
-        includeArchivedContent: true,
-      });
-      if (abort.signal.aborted) return;
-      setSnapshot(next);
-      onTitleRef.current?.(next.detail.artifact.title);
-    } catch (nextError) {
-      if (abort.signal.aborted) return;
-      setSnapshot(null);
-      setError(nextError);
-    }
-  }, [client, siteId, workspaceId]);
-  useEffect(() => {
-    setSnapshot(null);
-    void load();
-    return () => readAbort.current?.abort();
-  }, [load]);
-  const content = snapshot?.content;
-  const bridge = useMemo(
-    () =>
-      content
-        ? toolBridge?.({
-            artifactId: siteId,
-            siteVersionId: content.versionId,
-            requestedTools: content.requestedTools,
-          })
-        : undefined,
-    [content, siteId, toolBridge],
-  );
-  if (error)
-    return (
-      <ArtifactProblem
-        view={artifactLoadErrorView(error, "site", labels)}
-        onRetry={() => void load()}
-      />
-    );
-  if (!snapshot || !content) return <ArtifactLoading label={loadingLabel ?? labels.loadingSite} />;
-  if (snapshot.detail.artifact.status === "archived")
-    return (
-      <div className="p-4 text-sm text-fg-muted">{archivedMessage ?? labels.siteArchived}</div>
-    );
-  return (
-    <ArtifactSandbox
-      html={content.html}
-      title={snapshot.detail.artifact.title}
-      showTitle={showTitle}
-      versionLabel={`v${snapshot.detail.artifact.currentVersion?.revision}`}
-      toolBridge={bridge}
-      connectedToolCount={content.requestedTools.length}
-      theme={theme}
-      fill
-      className={className ?? "h-full rounded-none border-0"}
-    />
-  );
-}

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

@@ -1,112 +0,0 @@
-import type { TimelinePillPlacement } 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;
-
-/**
- * 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,81 +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";
-
-const RECHECK_MS = 1000;
-
-/**
- * Floating pills (Jump to latest, Latest question) sit over the scrolling
- * conversation. Slide one sideways, never up or down, 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. 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,
-}: {
-  pillRef: RefObject<HTMLElement | null>;
-  scrollerRef: RefObject<HTMLElement | null>;
-  active: boolean;
-  /** Placements in order of preference; the first is the resting position. */
-  preference: readonly TimelinePillPlacement[];
-}): TimelinePillPlacement {
-  const [placement, setPlacement] = useState<TimelinePillPlacement>(preference[0]!);
-  const key = preference.join(",");
-
-  useEffect(() => {
-    if (!active) {
-      setPlacement(preference[0]!);
-      return;
-    }
-    const scroller = scrollerRef.current;
-    if (!scroller) return;
-    let frame = 0;
-    let current: TimelinePillPlacement = preference[0]!;
-    let choose: typeof import("./timeline-pill-geometry").choosePlacement | null = null;
-    let disposed = false;
-    void import("./timeline-pill-geometry").then((geometry) => {
-      if (disposed) return;
-      choose = geometry.choosePlacement;
-      schedule();
-    });
-    const evaluate = () => {
-      frame = 0;
-      const pill = pillRef.current;
-      const frameElement = pill?.offsetParent;
-      if (!choose || !pill || !(frameElement instanceof HTMLElement)) return;
-      const next = choose(pill, frameElement, scroller, preference, current);
-      if (next !== current) {
-        current = next;
-        setPlacement(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]);
-
-  return active ? placement : preference[0]!;
-}