@a5c-ai/babysitter-observer-dashboard 5.0.1-staging.7a8768ec

package/src/components/ui/accordion.tsx

@@ -0,0 +1,61 @@
+"use client";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronRight } from "lucide-react";
+import { cn } from "@/lib/cn";
+
+interface AccordionProps {
+  type?: "single" | "multiple";
+  defaultValue?: string | string[];
+  value?: string | string[];
+  onValueChange?: (value: string | string[]) => void;
+  collapsible?: boolean;
+  className?: string;
+  children: React.ReactNode;
+}
+
+export function Accordion({ children, className, ...props }: AccordionProps) {
+  // Cast to any to avoid React 18 ForwardRefExoticComponent type mismatch
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Root = AccordionPrimitive.Root as any;
+  return <Root className={className} {...props}>{children}</Root>;
+}
+
+export function AccordionItem({ className, children, value }: { className?: string; children: React.ReactNode; value: string }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Item = AccordionPrimitive.Item as any;
+  return (
+    <Item value={value} className={className}>
+      {children}
+    </Item>
+  );
+}
+
+export function AccordionTrigger({ className, children }: { className?: string; children: React.ReactNode }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Header = AccordionPrimitive.Header as any;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Trigger = AccordionPrimitive.Trigger as any;
+  return (
+    <Header className="flex">
+      <Trigger
+        className={cn(
+          "flex flex-1 items-center gap-2 py-3 text-sm font-medium transition-all duration-200 hover:text-primary [&[data-state=open]>svg]:rotate-90 [&[data-state=open]]:text-foreground",
+          className
+        )}
+      >
+        <ChevronRight className="h-4 w-4 shrink-0 text-foreground-muted transition-transform duration-300 ease-in-out" />
+        {children}
+      </Trigger>
+    </Header>
+  );
+}
+
+export function AccordionContent({ className, children }: { className?: string; children: React.ReactNode }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Content = AccordionPrimitive.Content as any;
+  return (
+    <Content className="overflow-hidden text-sm data-[state=open]:animate-[fadeIn_200ms_ease-out] data-[state=closed]:animate-[fadeIn_200ms_ease-out_reverse]">
+      <div className={cn("pb-4 pt-0", className)}>{children}</div>
+    </Content>
+  );
+}

package/src/components/ui/badge.tsx

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full px-2.5 py-1 text-[11px] font-medium uppercase tracking-[0.08em] ring-1 ring-inset transition-all duration-200",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted text-foreground-secondary ring-border",
+        success: "bg-success-muted text-success ring-success/20 shadow-neon-glow-success-sm",
+        error: "bg-error-muted text-error ring-error/20 shadow-neon-glow-error-sm",
+        warning: "bg-warning-muted text-warning ring-warning/20 shadow-neon-glow-warning-badge",
+        info: "bg-info-muted text-info ring-info/20 shadow-neon-glow-cyan-sm",
+        pending: "bg-pending-muted text-pending ring-pending/20",
+      },
+    },
+    defaultVariants: { variant: "default" },
+  }
+);
+
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {}
+
+export function Badge({ className, variant, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant }), className)} {...props} />;
+}

package/src/components/ui/button.tsx

@@ -0,0 +1,40 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@/lib/cn";
+import { Slot } from "@radix-ui/react-slot";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md border text-sm font-medium italic tracking-[0.04em] transition-all duration-200 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 font-serif",
+  {
+    variants: {
+      variant: {
+        default: "border-primary/60 bg-primary text-primary-foreground shadow-sm hover:bg-[var(--primary-hover)] hover:shadow-md",
+        neon: "border-primary/40 bg-primary-muted text-primary hover:border-primary/60 hover:bg-primary-muted/80 hover:shadow-glow-primary",
+        outline: "border-border-hover bg-transparent text-foreground hover:bg-card hover:border-primary/30 hover:shadow-sm",
+        ghost: "border-transparent bg-transparent text-foreground-secondary hover:bg-muted hover:text-foreground",
+        destructive: "border-destructive/60 bg-destructive text-destructive-foreground hover:bg-destructive/90 hover:shadow-glow-error",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-11 px-3 text-xs",
+        lg: "h-10 px-6",
+        icon: "h-11 w-11",
+      },
+    },
+    defaultVariants: { variant: "default", size: "default" },
+  }
+);
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const SlotComp = Slot as any;
+
+export function Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {
+  const classes = cn(buttonVariants({ variant, size }), className);
+  if (asChild) {
+    return <SlotComp className={classes} {...props} />;
+  }
+  return <button className={classes} {...props} />;
+}

package/src/components/ui/card.tsx

@@ -0,0 +1,21 @@
+import { cn } from "@/lib/cn";
+
+export function Card({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "rounded-xl border border-card-border bg-card text-card-foreground shadow-sm transition-all duration-200 hover:bg-[var(--card-hover)] hover:border-[var(--border-hover)] hover:shadow-md",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export function CardHeader({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col space-y-1.5 p-4", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-4 pt-0", className)} {...props} />;
+}

package/src/components/ui/scroll-area.tsx

@@ -0,0 +1,35 @@
+"use client";
+import * as React from "react";
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+import { cn } from "@/lib/cn";
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  children: React.ReactNode;
+}
+
+export const ScrollArea = React.forwardRef<HTMLDivElement, ScrollAreaProps>(
+  function ScrollArea({ className, children, ...props }, ref) {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Root = ScrollAreaPrimitive.Root as any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Viewport = ScrollAreaPrimitive.Viewport as any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Scrollbar = ScrollAreaPrimitive.Scrollbar as any;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const Thumb = ScrollAreaPrimitive.Thumb as any;
+    return (
+      <Root ref={ref} className={cn("relative overflow-hidden", className)} {...props}>
+        <Viewport className="h-full w-full rounded-[inherit]">
+          {children}
+        </Viewport>
+        <Scrollbar
+          orientation="vertical"
+          className="flex touch-none select-none p-0.5 transition-colors data-[orientation=vertical]:w-2"
+        >
+          <Thumb className="relative flex-1 rounded-full bg-primary/20 hover:bg-primary/35 transition-colors duration-200" />
+        </Scrollbar>
+      </Root>
+    );
+  }
+);

package/src/components/ui/separator.tsx

@@ -0,0 +1,24 @@
+"use client";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { cn } from "@/lib/cn";
+
+export function Separator({
+  className,
+  orientation = "horizontal",
+}: {
+  className?: string;
+  orientation?: "horizontal" | "vertical";
+}) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Root = SeparatorPrimitive.Root as any;
+  return (
+    <Root
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-px w-full" : "h-full w-px",
+        className
+      )}
+    />
+  );
+}

package/src/components/ui/tabs.tsx

@@ -0,0 +1,64 @@
+"use client";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { cn } from "@/lib/cn";
+
+interface TabsProps {
+  className?: string;
+  children: React.ReactNode;
+  defaultValue?: string;
+  value?: string;
+  onValueChange?: (value: string) => void;
+  "data-testid"?: string;
+}
+
+export function Tabs({ className, children, "data-testid": testId, ...props }: TabsProps) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Root = TabsPrimitive.Root as any;
+  return (
+    <Root className={className} data-testid={testId} {...props}>
+      {children}
+    </Root>
+  );
+}
+
+export function TabsList({ className, children }: { className?: string; children: React.ReactNode }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const List = TabsPrimitive.List as any;
+  return (
+    <List
+      className={cn("inline-flex h-9 items-center gap-1 rounded-lg bg-background-secondary p-1", className)}
+    >
+      {children}
+    </List>
+  );
+}
+
+export function TabsTrigger({ className, children, value }: { className?: string; children: React.ReactNode; value: string }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Trigger = TabsPrimitive.Trigger as any;
+  return (
+    <Trigger
+      value={value}
+      className={cn(
+        "relative inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium text-foreground-muted transition-all duration-200",
+        "hover:text-foreground-secondary hover:bg-muted/50",
+        "data-[state=active]:bg-background-tertiary data-[state=active]:text-foreground data-[state=active]:shadow-sm",
+        "after:absolute after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:h-0.5 after:w-0 after:rounded-full after:bg-primary after:transition-all after:duration-200",
+        "data-[state=active]:after:w-2/3",
+        className
+      )}
+    >
+      {children}
+    </Trigger>
+  );
+}
+
+export function TabsContent({ className, children, value }: { className?: string; children: React.ReactNode; value: string }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Content = TabsPrimitive.Content as any;
+  return (
+    <Content value={value} className={cn("mt-2 focus-visible:outline-none", className)}>
+      {children}
+    </Content>
+  );
+}

package/src/components/ui/tooltip.tsx

@@ -0,0 +1,37 @@
+"use client";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { cn } from "@/lib/cn";
+
+export function TooltipProvider({ children }: { children: React.ReactNode }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Provider = TooltipPrimitive.Provider as any;
+  return <Provider delayDuration={200}>{children}</Provider>;
+}
+
+export function Tooltip({ children, open, defaultOpen, onOpenChange }: { children: React.ReactNode; open?: boolean; defaultOpen?: boolean; onOpenChange?: (open: boolean) => void }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Root = TooltipPrimitive.Root as any;
+  return <Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange}>{children}</Root>;
+}
+
+export function TooltipTrigger({ children, asChild }: { children: React.ReactNode; asChild?: boolean }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Trigger = TooltipPrimitive.Trigger as any;
+  return <Trigger asChild={asChild}>{children}</Trigger>;
+}
+
+export function TooltipContent({ className, children, sideOffset = 4 }: { className?: string; children: React.ReactNode; sideOffset?: number }) {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const Content = TooltipPrimitive.Content as any;
+  return (
+    <Content
+      sideOffset={sideOffset}
+      className={cn(
+        "z-50 overflow-hidden rounded-md border border-card-border bg-card px-3 py-1.5 text-xs text-foreground-secondary shadow-md backdrop-blur-sm",
+        className
+      )}
+    >
+      {children}
+    </Content>
+  );
+}

package/src/hooks/__tests__/use-animated-number.test.ts

@@ -0,0 +1,184 @@
+import { renderHook, act } from "@testing-library/react";
+import { useAnimatedNumber } from "../use-animated-number";
+
+describe("useAnimatedNumber", () => {
+  let mockNow = 0;
+  let rafCallbacks: Map<number, FrameRequestCallback>;
+  let rafId: number;
+
+  beforeEach(() => {
+    vi.useFakeTimers();
+    mockNow = 0;
+    rafId = 0;
+    rafCallbacks = new Map();
+
+    // Mock performance.now to advance in sync with our fake time
+    vi.spyOn(performance, "now").mockImplementation(() => mockNow);
+
+    // Mock requestAnimationFrame: schedules via setTimeout(16ms) and
+    // passes the current mock time to the callback.
+    vi.stubGlobal("requestAnimationFrame", (cb: FrameRequestCallback) => {
+      const id = ++rafId;
+      const timer = setTimeout(() => {
+        rafCallbacks.delete(id);
+        cb(mockNow);
+      }, 16);
+      rafCallbacks.set(id, timer as any);
+      return id;
+    });
+
+    vi.stubGlobal("cancelAnimationFrame", (id: number) => {
+      const timer = rafCallbacks.get(id);
+      if (timer !== undefined) {
+        clearTimeout(timer as any);
+        rafCallbacks.delete(id);
+      }
+    });
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+    vi.restoreAllMocks();
+  });
+
+  /** Advance fake time by `ms` milliseconds, also advancing performance.now(). */
+  async function advanceTime(ms: number) {
+    mockNow += ms;
+    await act(async () => {
+      await vi.advanceTimersByTimeAsync(ms);
+    });
+  }
+
+  it("returns the target value immediately on first render", () => {
+    const { result } = renderHook(() => useAnimatedNumber(42));
+    expect(result.current).toBe(42);
+  });
+
+  it("snaps immediately for small changes (diff <= 2)", () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target),
+      { initialProps: { target: 10 } }
+    );
+
+    expect(result.current).toBe(10);
+
+    // Change by 1 -- should snap immediately
+    rerender({ target: 11 });
+    expect(result.current).toBe(11);
+
+    // Change by 2 -- should snap immediately
+    rerender({ target: 13 });
+    expect(result.current).toBe(13);
+  });
+
+  it("animates towards the target for larger changes", async () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target, 600),
+      { initialProps: { target: 10 } }
+    );
+
+    expect(result.current).toBe(10);
+
+    // Change by 40 -- should start animating
+    rerender({ target: 50 });
+
+    // Advance a few frames -- value should be in between
+    await advanceTime(200);
+
+    expect(result.current).toBeGreaterThanOrEqual(10);
+    expect(result.current).toBeLessThanOrEqual(50);
+  });
+
+  it("reaches exact target after full animation duration", async () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target, 300),
+      { initialProps: { target: 0 } }
+    );
+
+    rerender({ target: 100 });
+
+    // Wait well past the animation duration
+    await advanceTime(500);
+
+    expect(result.current).toBe(100);
+  });
+
+  it("handles going from a higher number to lower", async () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target, 300),
+      { initialProps: { target: 100 } }
+    );
+
+    expect(result.current).toBe(100);
+
+    rerender({ target: 20 });
+
+    // Wait for animation to complete
+    await advanceTime(500);
+    expect(result.current).toBe(20);
+  });
+
+  it("interrupts in-progress animation when target changes mid-flight", async () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target, 600),
+      { initialProps: { target: 0 } }
+    );
+
+    // Start animating to 100
+    rerender({ target: 100 });
+
+    await advanceTime(100);
+
+    // Mid-animation, change target to 200
+    rerender({ target: 200 });
+
+    // Wait for new animation to fully complete
+    await advanceTime(800);
+
+    expect(result.current).toBe(200);
+  });
+
+  it("does not animate when target stays the same", () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target),
+      { initialProps: { target: 42 } }
+    );
+
+    expect(result.current).toBe(42);
+
+    // Re-render with same value
+    rerender({ target: 42 });
+    expect(result.current).toBe(42);
+  });
+
+  it("cleans up animation on unmount without errors", async () => {
+    const { unmount, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target, 600),
+      { initialProps: { target: 10 } }
+    );
+
+    // Start animation
+    rerender({ target: 100 });
+
+    // Unmount mid-animation -- should not throw
+    unmount();
+
+    // Advance timers -- no error should occur
+    await advanceTime(700);
+  });
+
+  it("returns integer values (never fractional)", async () => {
+    const { result, rerender } = renderHook(
+      ({ target }) => useAnimatedNumber(target, 300),
+      { initialProps: { target: 0 } }
+    );
+
+    rerender({ target: 91 });
+
+    // Check at various points during animation
+    for (let ms = 0; ms < 400; ms += 16) {
+      await advanceTime(16);
+      expect(Number.isInteger(result.current)).toBe(true);
+    }
+  });
+});