@sentry/junior-dashboard 0.263.0 → 0.265.0

package/src/client/components/Sheet.tsx

@@ -1,141 +0,0 @@
-// Adapted from shadcn/ui's Base UI Sheet. Drawer adds native swipe support.
-// https://ui.shadcn.com/docs/components/base/sheet
-import { Drawer as SheetPrimitive } from "@base-ui/react/drawer";
-import {
-  createContext,
-  useContext,
-  useEffect,
-  useRef,
-  useState,
-  useSyncExternalStore,
-  type ReactNode,
-  type RefObject,
-} from "react";
-
-import {
-  acquireBodyScrollLock,
-  releaseBodyScrollLock,
-} from "../bodyScrollLock";
-import { cn } from "../styles";
-
-const SheetContext = createContext<{
-  closingRef: RefObject<boolean>;
-  popupRef: RefObject<HTMLDivElement | null>;
-  topmost: boolean;
-} | null>(null);
-
-// Separate roots can overlap when a resize mounts a sheet below an open drawer.
-// Only the last modal in document order may trap focus or handle dismissal.
-function subscribeToSheets(onChange: () => void) {
-  const observer = new MutationObserver(onChange);
-  observer.observe(document.body, { childList: true, subtree: true });
-  return () => observer.disconnect();
-}
-
-/** Keep modal state until Base UI finishes its close transition. */
-export function Sheet(props: {
-  children: ReactNode;
-  onClose(): void;
-  side: "right" | "bottom";
-}) {
-  const [open, setOpen] = useState(false);
-  const closingRef = useRef(false);
-  const popupRef = useRef<HTMLDivElement>(null);
-  const topmost = useSyncExternalStore(
-    subscribeToSheets,
-    () => {
-      const modals = document.querySelectorAll("[data-dashboard-modal]");
-      const last = modals[modals.length - 1];
-      return popupRef.current ? last === popupRef.current : !last;
-    },
-    () => true,
-  );
-  useEffect(() => {
-    // The mobile conversation shell uses this same document scroll lock.
-    acquireBodyScrollLock();
-    setOpen(true);
-    return releaseBodyScrollLock;
-  }, []);
-
-  return (
-    <SheetContext value={{ closingRef, popupRef, topmost }}>
-      <SheetPrimitive.Root
-        open={open}
-        modal={topmost ? "trap-focus" : false}
-        disablePointerDismissal={!topmost}
-        swipeDirection={props.side === "bottom" ? "down" : "right"}
-        onOpenChange={(open, details) => {
-          if (!open && !topmost) {
-            details.cancel();
-            return;
-          }
-          closingRef.current = !open;
-          setOpen(open);
-        }}
-        onOpenChangeComplete={(open) => {
-          if (!open && closingRef.current) props.onClose();
-        }}
-      >
-        {props.children}
-      </SheetPrimitive.Root>
-    </SheetContext>
-  );
-}
-
-/** Close the enclosing sheet through its transition and focus lifecycle. */
-export const SheetClose = SheetPrimitive.Close;
-
-/** Render sheet chrome, a fading backdrop, and Base UI's focus boundary. */
-export function SheetContent(
-  props: {
-    children: ReactNode;
-    className?: string;
-    initialFocusRef?: RefObject<HTMLElement | null>;
-    side: "right" | "bottom";
-  } & ({ label: string; titleId?: never } | { label?: never; titleId: string }),
-) {
-  const sheet = useContext(SheetContext);
-  const popupRef = sheet?.popupRef;
-  const portalRef = useRef<HTMLDivElement>(null);
-  return (
-    <>
-      <div ref={portalRef} className="contents" />
-      <SheetPrimitive.Portal container={portalRef}>
-        <SheetPrimitive.Backdrop className="fixed inset-0 z-50 bg-dashboard-overlay opacity-[calc(1-var(--drawer-swipe-progress,0))] transition-opacity duration-180 data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:transition-none motion-reduce:transition-none" />
-        <SheetPrimitive.Viewport className="pointer-events-none fixed inset-0 z-50">
-          <SheetPrimitive.Popup
-            ref={popupRef}
-            aria-modal={sheet?.topmost ? true : undefined}
-            aria-label={props.label}
-            aria-labelledby={props.titleId}
-            data-dashboard-modal=""
-            data-base-ui-swipe-ignore={props.side === "right" ? "" : undefined}
-            finalFocus={() =>
-              Boolean(sheet?.closingRef.current && sheet.topmost)
-            }
-            initialFocus={() => {
-              // A resize can mount a sheet beneath an existing event dialog.
-              const modals = document.querySelectorAll(
-                "[data-dashboard-modal]",
-              );
-              if (modals[modals.length - 1] !== popupRef?.current) return false;
-              return props.initialFocusRef?.current ?? true;
-            }}
-            className={cn(
-              "pointer-events-auto grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] bg-dashboard-bg-elevated outline-none transition-[opacity,transform] duration-180 ease-[cubic-bezier(0.2,0.8,0.2,1)] data-[ending-style]:opacity-0 data-[starting-style]:opacity-0 data-[swiping]:transition-none motion-reduce:transition-none",
-              props.side === "bottom"
-                ? "absolute inset-x-0 bottom-0 mx-auto h-[85dvh] max-h-full w-full max-w-2xl [transform:translateY(var(--drawer-swipe-movement-y,0px))] rounded-t-2xl border border-b-0 border-dashboard-border-strong shadow-[0_-12px_40px_rgba(0,0,0,0.25)] data-[ending-style]:[transform:translateY(100%)] data-[starting-style]:[transform:translateY(2.5rem)]"
-                : "absolute right-0 top-0 h-full w-full shadow-[-12px_0_40px_rgba(0,0,0,0.25)] data-[ending-style]:[transform:translateX(2.5rem)] data-[starting-style]:[transform:translateX(2.5rem)] md:border-l md:border-dashboard-border-strong",
-              props.className,
-            )}
-          >
-            {props.children}
-          </SheetPrimitive.Popup>
-        </SheetPrimitive.Viewport>
-      </SheetPrimitive.Portal>
-    </>
-  );
-}
-
-/** Keep text selection and scrolling separate from the swipe handle. */
-export const SheetBody = SheetPrimitive.Content;

package/src/client/components/Skeleton.tsx

@@ -1,17 +0,0 @@
-import type { ElementType } from "react";
-
-import { cn } from "../styles";
-
-/** Hide one content placeholder from assistive technology. */
-export function Skeleton(props: { as?: ElementType; className?: string }) {
-  const Component = props.as ?? "div";
-  return (
-    <Component
-      aria-hidden="true"
-      className={cn(
-        "animate-pulse rounded-md bg-dashboard-fill-soft motion-reduce:animate-none",
-        props.className,
-      )}
-    />
-  );
-}

package/src/client/components/TextInput.tsx

@@ -1,58 +0,0 @@
-import type { InputHTMLAttributes, TextareaHTMLAttributes } from "react";
-
-import { cn } from "../styles";
-
-const textControlClassName =
-  "block w-full rounded-md border border-dashboard-border-emphasis bg-dashboard-ink px-3 py-2 font-sans text-sm text-dashboard-text placeholder:text-dashboard-text-muted/70 focus:border-dashboard-focus focus:outline-none focus:ring-1 focus:ring-dashboard-focus/25 aria-invalid:border-rose-300 disabled:cursor-not-allowed disabled:opacity-50";
-
-export type TextInputProps = Omit<
-  InputHTMLAttributes<HTMLInputElement>,
-  "size"
-> & {
-  className?: string;
-  size?: "default" | "comfortable";
-};
-
-/** Render the dashboard's standard single-line text control. */
-export function TextInput({
-  className,
-  type = "text",
-  size = "default",
-  ...props
-}: TextInputProps) {
-  return (
-    <input
-      {...props}
-      className={cn(
-        textControlClassName,
-        size === "comfortable" && "min-h-11 text-base sm:min-h-10 sm:text-sm",
-        className,
-      )}
-      type={type}
-    />
-  );
-}
-
-export type TextAreaProps = TextareaHTMLAttributes<HTMLTextAreaElement> & {
-  prose?: boolean;
-  className?: string;
-};
-
-/** Render the dashboard's standard multi-line text control. */
-export function TextArea({
-  className,
-  prose = false,
-  ...props
-}: TextAreaProps) {
-  return (
-    <textarea
-      {...props}
-      className={cn(
-        textControlClassName,
-        "min-h-36",
-        prose ? "font-sans leading-relaxed" : "font-mono",
-        className,
-      )}
-    />
-  );
-}

package/src/client/components/Tooltip.tsx

@@ -1,216 +0,0 @@
-import * as HoverCard from "@radix-ui/react-hover-card";
-import {
-  type ReactElement,
-  type ReactNode,
-  type RefObject,
-  useEffect,
-  useId,
-  useRef,
-  useState,
-} from "react";
-
-import { cn } from "../styles";
-
-type TooltipProps = {
-  align?: "center" | "left" | "right";
-  children: ReactElement;
-  className?: string;
-  content: ReactNode;
-  focusable?: boolean;
-  label?: ReactNode;
-  placement?: "above" | "below";
-  triggerClassName?: string;
-};
-
-const VIEWPORT_GAP = 8;
-const ANCHOR_GAP = 10;
-const CLOSE_DELAY_MS = 150;
-const TOOLTIP_MEDIA_QUERY =
-  "(min-width: 768px) and (hover: hover) and (pointer: fine)";
-
-/** SVG hosts cannot wrap triggers in an HTML span without collapsing geometry. */
-const SVG_TRIGGER_TAGS = new Set([
-  "circle",
-  "ellipse",
-  "g",
-  "line",
-  "path",
-  "polygon",
-  "polyline",
-  "rect",
-  "svg",
-  "text",
-]);
-
-function isSvgTrigger(element: ReactElement): boolean {
-  return typeof element.type === "string" && SVG_TRIGGER_TAGS.has(element.type);
-}
-
-/** Show selectable dashboard details beside an element. */
-export function Tooltip({
-  align = "center",
-  children,
-  className,
-  content,
-  focusable = false,
-  label,
-  placement = "above",
-  triggerClassName,
-}: TooltipProps) {
-  const tooltipId = useId();
-  const rootRef = useRef<Element | null>(null);
-  const touchStartedOpenRef = useRef<boolean | null>(null);
-  const suppressOpenUntilRef = useRef(0);
-  const [open, setOpen] = useState(false);
-  const [available, setAvailable] = useState(() =>
-    typeof window === "undefined"
-      ? false
-      : window.matchMedia(TOOLTIP_MEDIA_QUERY).matches,
-  );
-  const svgTrigger = isSvgTrigger(children);
-
-  useEffect(() => {
-    const media = window.matchMedia(TOOLTIP_MEDIA_QUERY);
-    const syncAvailable = () => {
-      setAvailable(media.matches);
-      if (!media.matches) setOpen(false);
-    };
-    syncAvailable();
-    media.addEventListener("change", syncAvailable);
-    return () => media.removeEventListener("change", syncAvailable);
-  }, []);
-
-  useEffect(() => {
-    if (!open) return;
-    const onPointerDown = (event: PointerEvent) => {
-      const root = rootRef.current;
-      const target = event.target;
-      if (!(target instanceof Node)) return;
-      // Keep interactions inside the trigger or content from auto-closing.
-      if (root?.contains(target)) return;
-      const contentNode = document.getElementById(tooltipId);
-      if (contentNode?.contains(target)) return;
-      suppressOpenUntilRef.current = performance.now() + CLOSE_DELAY_MS + 50;
-      setOpen(false);
-    };
-    document.addEventListener("pointerdown", onPointerDown, true);
-    return () => {
-      document.removeEventListener("pointerdown", onPointerDown, true);
-    };
-  }, [open, tooltipId]);
-
-  // Keep chart/layout wrappers even when tooltips are off.
-  if (!available) {
-    if (svgTrigger) return children;
-    return (
-      <span className={cn("inline-flex", triggerClassName)}>{children}</span>
-    );
-  }
-
-  const card = (
-    <HoverCard.Root
-      closeDelay={CLOSE_DELAY_MS}
-      onOpenChange={(nextOpen) => {
-        // Touch toggle/outside close can race HoverCard's hover reopen.
-        if (nextOpen && performance.now() < suppressOpenUntilRef.current) {
-          return;
-        }
-        setOpen(nextOpen);
-      }}
-      open={open}
-      openDelay={0}
-    >
-      <HoverCard.Trigger
-        aria-describedby={open ? tooltipId : undefined}
-        asChild
-        onBlur={focusable ? () => setOpen(false) : undefined}
-        onFocus={focusable ? () => setOpen(true) : undefined}
-        onPointerCancel={() => {
-          touchStartedOpenRef.current = null;
-        }}
-        onPointerDown={(event) => {
-          if (event.pointerType === "touch") {
-            touchStartedOpenRef.current = open;
-          }
-        }}
-        onPointerUp={(event) => {
-          if (
-            event.pointerType !== "touch" ||
-            touchStartedOpenRef.current === null
-          ) {
-            return;
-          }
-          const nextOpen = !touchStartedOpenRef.current;
-          if (!nextOpen) {
-            suppressOpenUntilRef.current =
-              performance.now() + CLOSE_DELAY_MS + 50;
-          }
-          setOpen(nextOpen);
-          touchStartedOpenRef.current = null;
-        }}
-        ref={
-          svgTrigger
-            ? (node) => {
-                rootRef.current = node;
-              }
-            : undefined
-        }
-      >
-        {children}
-      </HoverCard.Trigger>
-      <HoverCard.Portal>
-        <HoverCard.Content
-          align={
-            align === "left" ? "start" : align === "right" ? "end" : "center"
-          }
-          className={cn(
-            "z-50 select-text outline-none",
-            className ??
-              "min-w-36 max-w-lg rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-3 py-2 font-sans text-xs leading-relaxed text-dashboard-text-muted shadow-2xl shadow-black/70",
-          )}
-          collisionPadding={VIEWPORT_GAP}
-          hideWhenDetached
-          id={tooltipId}
-          role="tooltip"
-          side={placement === "above" ? "top" : "bottom"}
-          sideOffset={ANCHOR_GAP}
-        >
-          {label ? (
-            <div className="mb-1 font-semibold text-dashboard-text-muted">
-              {label}
-            </div>
-          ) : null}
-          {content}
-        </HoverCard.Content>
-      </HoverCard.Portal>
-    </HoverCard.Root>
-  );
-
-  if (svgTrigger) return card;
-
-  return (
-    <span
-      className={cn("inline-flex", triggerClassName)}
-      ref={rootRef as RefObject<HTMLSpanElement | null>}
-    >
-      {card}
-    </span>
-  );
-}
-
-/** Compact label tooltip for icon-only controls such as header actions. */
-export function IconButtonTooltip(props: {
-  children: ReactElement;
-  label: string;
-  placement?: "above" | "below";
-}) {
-  return (
-    <Tooltip
-      className="min-w-0 rounded-md border border-dashboard-border-emphasis bg-dashboard-surface-raised px-2.5 py-1.5 font-sans text-xs leading-none text-dashboard-text shadow-2xl shadow-black/70"
-      content={props.label}
-      placement={props.placement ?? "above"}
-    >
-      <span className="inline-flex">{props.children}</span>
-    </Tooltip>
-  );
-}

package/src/client/components/charts/useChartLayout.ts

@@ -1,27 +0,0 @@
-import { useLayoutEffect, useRef, useState } from "react";
-import { createActivityChartLayout } from "./ActivityChart";
-
-/** Keep chart height and label spacing fixed as its container width changes. */
-export function useChartLayout(height: number, left = 64) {
-  const ref = useRef<HTMLDivElement>(null);
-  const [width, setWidth] = useState(400);
-  useLayoutEffect(() => {
-    const container = ref.current;
-    if (!container) return;
-    const observer = new ResizeObserver(([entry]) => {
-      if (entry && entry.contentRect.width > 0)
-        setWidth(entry.contentRect.width);
-    });
-    observer.observe(container);
-    return () => observer.disconnect();
-  }, []);
-  return {
-    ref,
-    layout: createActivityChartLayout(height, {
-      width,
-      left,
-      top: 18,
-      bottom: 28,
-    }),
-  };
-}

package/src/client/conversations/ConversationDetailsFrame.tsx

@@ -1,91 +0,0 @@
-import { X } from "lucide-react";
-import {
-  useEffect,
-  useId,
-  useRef,
-  useSyncExternalStore,
-  type ReactNode,
-} from "react";
-
-import { Button } from "../components/Button";
-import { BottomSheet } from "../components/BottomSheet";
-
-const panelMediaQuery = "(min-width: 1280px)";
-
-function subscribeToPanelLayout(onChange: () => void) {
-  const media = window.matchMedia(panelMediaQuery);
-  media.addEventListener("change", onChange);
-  return () => media.removeEventListener("change", onChange);
-}
-
-function hasPanelSpace() {
-  return window.matchMedia(panelMediaQuery).matches;
-}
-
-/** Keep details beside the chat when space permits, or in a modal bottom sheet. */
-export function ConversationDetailsFrame(props: {
-  children: ReactNode;
-  onClose(): void;
-}) {
-  const titleId = useId();
-  const panel = useSyncExternalStore(
-    subscribeToPanelLayout,
-    hasPanelSpace,
-    () => false,
-  );
-  const closeRef = useRef<HTMLButtonElement>(null);
-  const wasPanel = useRef(panel);
-  useEffect(() => {
-    if (
-      panel &&
-      !wasPanel.current &&
-      !document.querySelector("[data-dashboard-modal]")
-    ) {
-      closeRef.current?.focus({ preventScroll: true });
-    }
-    wasPanel.current = panel;
-  }, [panel]);
-  if (!panel) {
-    return (
-      <BottomSheet label="Conversation details" onClose={props.onClose}>
-        {props.children}
-      </BottomSheet>
-    );
-  }
-
-  return (
-    <aside
-      aria-labelledby={titleId}
-      className="grid min-h-0 min-w-0 grid-rows-[auto_minmax(0,1fr)] border-l border-dashboard-border bg-dashboard-bg-elevated"
-      onKeyDown={(event) => {
-        if (
-          event.key === "Escape" &&
-          !event.defaultPrevented &&
-          !document.querySelector("[data-dashboard-modal]")
-        ) {
-          event.preventDefault();
-          props.onClose();
-        }
-      }}
-    >
-      <header className="flex items-center justify-between gap-3 border-b border-dashboard-border px-5 py-3">
-        <h2
-          aria-label="Conversation details"
-          className="m-0 text-base font-semibold text-dashboard-text"
-          id={titleId}
-        >
-          Details
-        </h2>
-        <Button
-          ref={closeRef}
-          aria-label="Close conversation details"
-          onClick={props.onClose}
-          size="icon"
-        >
-          <X aria-hidden="true" size={15} />
-        </Button>
-      </header>
-      <div className="min-h-0">{props.children}</div>
-    </aside>
-  );
-}

package/src/client/conversations/CopyMarkdownButton.tsx

@@ -1,65 +0,0 @@
-import { useState } from "react";
-import { Check, Copy } from "lucide-react";
-
-import { Button } from "../components/Button";
-import { IconButtonTooltip } from "../components/Tooltip";
-
-/** Copy an available Markdown document while exposing clipboard result state. */
-export function CopyMarkdownButton(props: {
-  getMarkdown?: () => Promise<string> | string;
-  /** `menu` shows icon + label for mobile overflow lists. */
-  layout?: "icon" | "menu";
-}) {
-  const [status, setStatus] = useState<
-    "copied" | "copying" | "failed" | "idle"
-  >("idle");
-  const label =
-    status === "copied"
-      ? "Copied"
-      : status === "copying"
-        ? "Preparing Markdown"
-        : status === "failed"
-          ? "Copy failed"
-          : "Copy as Markdown";
-  const Icon = status === "copied" ? Check : Copy;
-
-  async function copyMarkdown() {
-    if (!props.getMarkdown) return;
-
-    try {
-      setStatus("copying");
-      await navigator.clipboard.writeText(await props.getMarkdown());
-      setStatus("copied");
-    } catch {
-      setStatus("failed");
-    }
-  }
-
-  if (props.layout === "menu") {
-    return (
-      <button
-        aria-label={label}
-        className="flex w-full cursor-pointer items-center gap-2.5 rounded-md border-0 bg-transparent px-2.5 py-2 text-left text-sm font-semibold text-dashboard-text transition-colors hover:bg-dashboard-fill-strong focus-visible:bg-dashboard-fill-strong focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50"
-        disabled={!props.getMarkdown || status === "copying"}
-        onClick={() => void copyMarkdown()}
-        type="button"
-      >
-        <Icon aria-hidden="true" size={16} strokeWidth={2} />
-        <span>{label}</span>
-      </button>
-    );
-  }
-
-  return (
-    <IconButtonTooltip label={label}>
-      <Button
-        aria-label={label}
-        disabled={!props.getMarkdown || status === "copying"}
-        onClick={() => void copyMarkdown()}
-        size="icon"
-      >
-        <Icon aria-hidden="true" size={15} strokeWidth={2} />
-      </Button>
-    </IconButtonTooltip>
-  );
-}