@sentry/junior-dashboard 0.263.0 → 0.264.0

package/src/tailwind.css

@@ -1,5 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700&display=swap");
 @import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
 
 /*
  * Dashboard design tokens. components/README.md explains each role.
@@ -214,6 +216,81 @@
   --color-violet-400: oklch(54.1% 0.281 293.009);
 }
 
+/* shadcn components use the dashboard tokens in both themes. */
+@layer base {
+  :root {
+    --radius: 0.5rem;
+    --background: var(--color-dashboard-bg);
+    --foreground: var(--color-dashboard-text);
+    --card: var(--color-dashboard-surface-panel);
+    --card-foreground: var(--color-dashboard-text);
+    --popover: var(--color-dashboard-bg-elevated);
+    --popover-foreground: var(--color-dashboard-text);
+    --primary: var(--color-dashboard-text-solid);
+    --primary-foreground: var(--color-dashboard-text-inverse);
+    --secondary: var(--color-dashboard-surface-raised);
+    --secondary-foreground: var(--color-dashboard-text);
+    --muted: var(--color-dashboard-surface-raised);
+    --muted-foreground: var(--color-dashboard-text-muted);
+    --accent: var(--color-dashboard-surface-hover);
+    --accent-foreground: var(--color-dashboard-text);
+    --destructive: var(--color-rose-300);
+    --border: var(--color-dashboard-border);
+    --input: var(--color-dashboard-border-emphasis);
+    --ring: var(--color-dashboard-focus);
+    --chart-1: var(--color-violet-400);
+    --chart-2: var(--color-sky-400);
+    --chart-3: var(--color-emerald-400);
+    --chart-4: var(--color-amber-400);
+    --chart-5: var(--color-rose-400);
+    --sidebar: var(--color-dashboard-surface-panel);
+    --sidebar-foreground: var(--color-dashboard-text);
+    --sidebar-primary: var(--primary);
+    --sidebar-primary-foreground: var(--color-dashboard-text-inverse);
+    --sidebar-accent: var(--color-dashboard-surface-hover);
+    --sidebar-accent-foreground: var(--color-dashboard-text);
+    --sidebar-border: var(--color-dashboard-border);
+    --sidebar-ring: var(--color-dashboard-focus);
+  }
+}
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --color-chart-1: var(--chart-1);
+  --color-chart-2: var(--chart-2);
+  --color-chart-3: var(--chart-3);
+  --color-chart-4: var(--chart-4);
+  --color-chart-5: var(--chart-5);
+  --color-sidebar: var(--sidebar);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-ring: var(--sidebar-ring);
+}
+
+/* The dashboard defaults to dark and selects light with data-theme. */
+@custom-variant dark (&:where(:root:not([data-theme="light"]), :root:not([data-theme="light"]) *));
+
 /* Style one-off values that the token and palette mirror cannot cover. */
 @custom-variant light (&:where([data-theme="light"], [data-theme="light"] *));
 

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;