@exxatdesignux/ui 0.2.19 → 0.3.0

package/template/components/data-views/list-page-split-hub-chrome.tsx

@@ -1,68 +1 @@
-"use client"
-
-/**
- * Shared **centered** chrome for list-hub split surfaces (finder / tree / multi-column explorers).
- *
- * Composes `ListPageViewFrame` (gutter + max width) with a single bordered card + fixed viewport
- * height so panel and tree views match across routes (`AGENTS.md` §4.5).
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import {
-  ListPageViewFrame,
-  LIST_PAGE_VIEW_FRAME_GUTTER,
-  LIST_PAGE_VIEW_FRAME_MAX_WIDE,
-} from "@/components/data-views/list-page-view-frame"
-
-/** Default height band for split views under `ListPageTemplate` + toolbar. */
-export const LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE: React.CSSProperties = {
-  height: "calc(100vh - 280px)",
-  minHeight: 420,
-}
-
-/**
- * Viewport band for calendar under `ListPageTemplate` + hub toolbar (+ optional metrics).
- * Uses a fixed height (not min-height) so the week strip scrolls inside the card, not the page.
- */
-export const LIST_PAGE_CALENDAR_HEIGHT_STYLE: React.CSSProperties = {
-  height: "clamp(420px, calc(100dvh - 22rem), 880px)",
-}
-
-const SURFACE_CLASS =
-  "flex min-h-0 flex-1 flex-col overflow-hidden rounded-xl border border-border bg-card"
-
-export interface ListPageSplitHubChromeProps {
-  children: React.ReactNode
-  "aria-label"?: string
-  gutterClassName?: string
-  maxWidthClassName?: string
-  /** Override default split viewport height / min-height */
-  surfaceStyle?: React.CSSProperties
-  surfaceClassName?: string
-}
-
-export function ListPageSplitHubChrome({
-  children,
-  "aria-label": ariaLabel,
-  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
-  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,
-  surfaceStyle,
-  surfaceClassName,
-}: ListPageSplitHubChromeProps) {
-  return (
-    <ListPageViewFrame
-      gutterClassName={gutterClassName}
-      maxWidthClassName={maxWidthClassName}
-      className="flex min-h-0 flex-1 flex-col"
-    >
-      <div
-        className={cn(SURFACE_CLASS, surfaceClassName)}
-        style={{ ...LIST_PAGE_SPLIT_HUB_HEIGHT_STYLE, ...surfaceStyle }}
-        aria-label={ariaLabel}
-      >
-        {children}
-      </div>
-    </ListPageViewFrame>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-split-hub-chrome"

package/template/components/data-views/list-page-split-hub-tokens.ts

@@ -1,16 +1 @@
-/**
- * Shared layout tokens for list-hub split surfaces (Miller columns, tree + details).
- * Keeps Question bank panel / tree and generic `FinderPanelView` visually aligned.
- */
-
-/** `ResizableHandle` between miller / tree columns — matches Question bank panel. */
-export const LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS =
-  "w-1 bg-border/40 hover:bg-brand/20 transition-colors"
-
-/** Primary column stack (scope list, folder list, record list, …). */
-export const LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS =
-  "flex min-h-0 min-w-0 flex-col bg-card"
-
-/** Right-hand inspector / detail column shell. */
-export const LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS =
-  "flex min-h-0 min-w-0 flex-col bg-card"
+export * from "@exxatdesignux/ui/components/data-views/list-page-split-hub-tokens"

package/template/components/data-views/list-page-tree-column-header.tsx

@@ -1,31 +1 @@
-"use client"
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-export interface ListPageTreeColumnHeaderProps {
-  title: string
-  /** Right side (e.g. icon buttons) — keep touch targets ≥ 24px */
-  trailing?: React.ReactNode
-  className?: string
-}
-
-/**
- * Shared left-column header for tree / outline surfaces — matches Question bank “Questions” bar.
- */
-export function ListPageTreeColumnHeader({
-  title,
-  trailing,
-  className,
-}: ListPageTreeColumnHeaderProps) {
-  return (
-    <div className={cn("shrink-0 border-b border-border/50 bg-card px-3 py-2", className)}>
-      <div className="flex h-9 items-center justify-between gap-2">
-        <h3 className="min-w-0 flex-1 truncate text-sm font-medium text-foreground">{title}</h3>
-        {trailing ? (
-          <div className="flex shrink-0 items-center gap-0.5">{trailing}</div>
-        ) : null}
-      </div>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-tree-column-header"

package/template/components/data-views/list-page-tree-panel-shell.tsx

@@ -1,91 +1 @@
-"use client"
-
-/**
- * Generic two-pane layout: scrollable **tree / outline** column + **details** column,
- * with persisted split sizes (`ResizablePanelGroup` `id`) and shared **split hub chrome**
- * (`ListPageSplitHubChrome`) so tree views match finder / folder panels across the app.
- *
- * Domain hubs pass `tree` and `details` nodes; this module stays entity-agnostic.
- */
-
-import * as React from "react"
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from "@/components/ui/resizable"
-import { ListPageSplitHubChrome } from "@/components/data-views/list-page-split-hub-chrome"
-import {
-  LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS,
-  LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS,
-  LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS,
-} from "@/components/data-views/list-page-split-hub-tokens"
-import {
-  LIST_PAGE_VIEW_FRAME_GUTTER,
-  LIST_PAGE_VIEW_FRAME_MAX_WIDE,
-} from "@/components/data-views/list-page-view-frame"
-
-export interface ListPageTreePanelShellProps {
-  /** Stable id for `react-resizable-panels` layout persistence (per hub / route). */
-  resizableGroupId: string
-  /** Left column (tree chrome + body). */
-  tree: React.ReactNode
-  /** Right column (detail / inspector). */
-  details: React.ReactNode
-  /** Accessible name for the split surface, e.g. “Curriculum tree and details”. */
-  ariaLabel: string
-  treePanelId?: string
-  detailsPanelId?: string
-  treeDefaultSize?: string
-  treeMinSize?: string
-  treeMaxSize?: string
-  detailsDefaultSize?: string
-  detailsMinSize?: string
-  gutterClassName?: string
-  maxWidthClassName?: string
-}
-
-export function ListPageTreePanelShell({
-  resizableGroupId,
-  tree,
-  details,
-  ariaLabel,
-  treePanelId = "tree",
-  detailsPanelId = "details",
-  treeDefaultSize = "40%",
-  treeMinSize = "20%",
-  treeMaxSize = "60%",
-  detailsDefaultSize = "60%",
-  detailsMinSize = "30%",
-  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
-  maxWidthClassName = LIST_PAGE_VIEW_FRAME_MAX_WIDE,
-}: ListPageTreePanelShellProps) {
-  return (
-    <ListPageSplitHubChrome
-      aria-label={ariaLabel}
-      gutterClassName={gutterClassName}
-      maxWidthClassName={maxWidthClassName}
-    >
-      <ResizablePanelGroup id={resizableGroupId} direction="horizontal" className="h-full min-h-0 w-full flex-1">
-        <ResizablePanel
-          id={treePanelId}
-          defaultSize={treeDefaultSize}
-          minSize={treeMinSize}
-          maxSize={treeMaxSize}
-          className={LIST_PAGE_SPLIT_MILLER_COLUMN_PANEL_CLASS}
-        >
-          {tree}
-        </ResizablePanel>
-        <ResizableHandle withHandle className={LIST_PAGE_SPLIT_RESIZABLE_HANDLE_CLASS} />
-        <ResizablePanel
-          id={detailsPanelId}
-          defaultSize={detailsDefaultSize}
-          minSize={detailsMinSize}
-          className={LIST_PAGE_SPLIT_MILLER_DETAIL_PANEL_CLASS}
-        >
-          {details}
-        </ResizablePanel>
-      </ResizablePanelGroup>
-    </ListPageSplitHubChrome>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/list-page-tree-panel-shell"

package/template/components/data-views/list-page-view-frame.tsx

@@ -1,53 +1,5 @@
-"use client"
-
-/**
- * ListPageViewFrame — shared horizontal gutter + optional centered max-width for list-hub **view bodies**
- * (folder icon grid, finder panel chrome, OS-style folder explorer, dashboard slices, etc.).
- *
- * **MUST** be used instead of ad-hoc `mx-4 lg:mx-6` + `mx-auto max-w-*` pairs on each page — see
- * `AGENTS.md` §4.5 and `.cursor/rules/exxat-list-page-view-shells.mdc`.
- *
- * **MUST NOT** wrap `DataTable` when its toolbar already applies the same inset (avoid double gutter);
- * use this for **non-table** view branches or **sections below** the shared toolbar.
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-
-/** Default horizontal rhythm for view bodies under `ListPageTemplate` (matches `FolderGridView`). */
-export const LIST_PAGE_VIEW_FRAME_GUTTER = "mx-4 mb-6 lg:mx-6"
-
-/** Typical max width for icon grids / dense tile views on ultra-wide monitors. */
-export const LIST_PAGE_VIEW_FRAME_MAX_ICON_GRID = "max-w-6xl"
-
-/** Slightly wider shell when a view includes toolbar + breadcrumbs + grid (e.g. OS folder explorer). */
-export const LIST_PAGE_VIEW_FRAME_MAX_WIDE = "max-w-7xl"
-
-export interface ListPageViewFrameProps extends React.HTMLAttributes<HTMLDivElement> {
-  children: React.ReactNode
-  /**
-   * When set, children are wrapped in `mx-auto w-full min-w-0` + this max-width so the block stays
-   * centered inside the primary page column.
-   */
-  maxWidthClassName?: string
-  /** Override outer gutter; default `LIST_PAGE_VIEW_FRAME_GUTTER`. */
-  gutterClassName?: string
-}
-
-export function ListPageViewFrame({
-  children,
-  className,
-  maxWidthClassName,
-  gutterClassName = LIST_PAGE_VIEW_FRAME_GUTTER,
-  ...rest
-}: ListPageViewFrameProps) {
-  return (
-    <div className={cn(gutterClassName, className)} {...rest}>
-      {maxWidthClassName ? (
-        <div className={cn("mx-auto w-full min-w-0", maxWidthClassName)}>{children}</div>
-      ) : (
-        children
-      )}
-    </div>
-  )
-}
+// ListPageViewFrame was promoted to `@exxatdesignux/ui` on 2026-05-20.
+// This shim keeps every existing
+// `import … from "@/components/data-views/list-page-view-frame"` site
+// working — including the `data-views/index.ts` barrel re-export.
+export * from "@exxatdesignux/ui/components/list-page-view-frame"

package/template/components/data-views/os-folder-glyph.tsx

@@ -1,129 +1 @@
-"use client"
-
-/**
- * Windows 11–style folder art (Icons8) + optional FA glyph on the pocket.
- * Static asset: `public/folders/icons8-folder-windows-11.svg`
- */
-
-import * as React from "react"
-import { cn } from "@/lib/utils"
-import type { QuestionBankFolderColorKey } from "@/lib/mock/question-bank-folders"
-
-/** Served from `apps/web/public/folders/` (copied from Icons8 “folder windows 11 color”). */
-export const OS_FOLDER_GLYPH_SRC = "/folders/icons8-folder-windows-11.svg"
-
-/** Subtle hue tweak so “color” choice still reads on the shared yellow asset. */
-const COLOR_TINT_FILTER: Record<QuestionBankFolderColorKey, string> = {
-  brand: "hue-rotate(-42deg) saturate(1.25) brightness(0.97)",
-  success: "hue-rotate(82deg) saturate(1.2) brightness(0.95)",
-  warning: "hue-rotate(-5deg) saturate(1.35) brightness(1.02)",
-  destructive: "hue-rotate(300deg) saturate(1.15) brightness(0.92)",
-  muted: "saturate(0.15) brightness(1.08)",
-  chart1: "hue-rotate(200deg) saturate(1.2) brightness(0.96)",
-  chart2: "hue-rotate(95deg) saturate(1.15) brightness(0.96)",
-  chart3: "hue-rotate(265deg) saturate(1.2) brightness(0.96)",
-}
-
-const SIZE_MAP = {
-  /** Compact — folder inspector / column headers (matches ~36px row height). */
-  xs: "h-9 w-[2.6rem]",
-  sm: "h-[3.35rem] w-[3.85rem]",
-  md: "h-[4.6rem] w-[5.25rem]",
-  lg: "h-[6.5rem] w-[7.25rem]",
-}
-
-const ICON_TEXT: Record<keyof typeof SIZE_MAP, string> = {
-  xs: "text-[13px] leading-none",
-  sm: "text-lg",
-  md: "text-2xl",
-  lg: "text-4xl",
-}
-
-/** Darker version of each folder color for punched icon appearance. */
-const ICON_COLOR: Record<QuestionBankFolderColorKey, string> = {
-  brand: "text-orange-800 dark:text-orange-600",
-  success: "text-emerald-800 dark:text-emerald-600",
-  warning: "text-amber-800 dark:text-amber-600",
-  destructive: "text-red-800 dark:text-red-600",
-  muted: "text-slate-600 dark:text-slate-400",
-  chart1: "text-blue-800 dark:text-blue-600",
-  chart2: "text-lime-800 dark:text-lime-600",
-  chart3: "text-purple-800 dark:text-purple-600",
-}
-
-export interface OsFolderGlyphProps {
-  colorKey: QuestionBankFolderColorKey
-  /** Font Awesome icon classes without weight (e.g. `fa-stethoscope`). */
-  icon: string
-  size?: keyof typeof SIZE_MAP
-  className?: string
-  variant?: "solid" | "outline"
-  /**
-   * When false, exposes `role="img"` + `aria-label` (use with a short label, e.g. sheet preview).
-   * When true (default), hides the glyph from AT — parent control should name the action.
-   */
-  decorative?: boolean
-  /** Required when `decorative={false}` */
-  label?: string
-}
-
-export function OsFolderGlyph({
-  colorKey,
-  icon,
-  size = "md",
-  className,
-  variant = "solid",
-  decorative = true,
-  label,
-}: OsFolderGlyphProps) {
-  const outline = variant === "outline"
-  const tint = COLOR_TINT_FILTER[colorKey]
-
-  return (
-    <div
-      className={cn(
-        "group relative shrink-0 select-none transition-[transform,box-shadow] duration-200 ease-out",
-        "hover:z-[1] hover:scale-105 motion-reduce:transform-none motion-reduce:hover:scale-100",
-        SIZE_MAP[size],
-        className,
-      )}
-      role={!decorative && label ? "img" : undefined}
-      aria-label={!decorative ? label : undefined}
-      aria-hidden={decorative ? true : undefined}
-    >
-      {/* Static SVG — `next/image` can't optimize SVGs without
-          `dangerouslyAllowSVG`, so we stay on plain <img> but add the same
-          loading/decoding hints `next/image` would. Folder grids render many
-          of these at once; lazy-loading lets the browser skip off-screen
-          glyphs until they scroll near the viewport. */}
-      {/* eslint-disable-next-line @next/next/no-img-element -- SVG; next/image can't optimize without dangerouslyAllowSVG */}
-      <img
-        src={OS_FOLDER_GLYPH_SRC}
-        alt=""
-        width={240}
-        height={240}
-        draggable={false}
-        loading="lazy"
-        decoding="async"
-        className={cn(
-          "h-full w-full object-contain",
-          "transition-[filter] duration-200",
-          outline && "opacity-75 saturate-[0.65]",
-        )}
-        style={outline ? undefined : { filter: tint }}
-      />
-      <span
-        className={cn(
-          "pointer-events-none absolute inset-0 flex items-center justify-center",
-          size === "xs" ? "translate-y-[0.18rem]" : "translate-y-[0.35rem]",
-          ICON_TEXT[size],
-          outline
-            ? "text-muted-foreground"
-            : cn(ICON_COLOR[colorKey], "opacity-100"),
-        )}
-      >
-        <i className={cn("fa-solid", icon)} aria-hidden="true" />
-      </span>
-    </div>
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/os-folder-glyph"

package/template/components/data-views/outline-tree-menu.tsx

@@ -1,157 +1 @@
-"use client"
-
-/**
- * Central outline-tree chrome — mirrors shadcn/ui **Sidebar** file-tree structure
- * (`SidebarMenu` → `SidebarMenuItem` + `Collapsible` → `SidebarMenuSub` → rows) without
- * coupling to `useSidebar`.
- *
- * - **`guideLayout="inset"`** — same rhythm as `SidebarMenuSub` (`mx-3.5` + `translate-x-px`).
- * - **`guideLayout="chevronRail"`** — use with **`OutlineTreeCollapsibleContentRail`**: a **`w-6`**
- *   spacer lines up the vertical guide with the **horizontal center** of a **`size-8`** chevron
- *   when the folder row uses **`px-2`** (8px padding + 16px half of 32px chevron hit target).
- *
- * @see packages/ui/src/components/ui/sidebar.tsx — `SidebarMenuSub`, `SidebarMenuSubItem`
- */
-
-import * as React from "react"
-import { CollapsibleContent } from "@/components/ui/collapsible"
-import { cn } from "@/lib/utils"
-
-export type OutlineTreeSurface = "sidebar" | "panel"
-
-export type OutlineTreeGuideLayout = "inset" | "chevronRail"
-
-const outlineTreeSubInsetClass: Record<OutlineTreeSurface, string> = {
-  sidebar:
-    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-sidebar-border px-2.5 py-0.5 rtl:-translate-x-px",
-  panel:
-    "mx-3.5 flex min-w-0 list-none translate-x-px flex-col gap-1 border-s border-border/60 px-2.5 py-0.5 rtl:-translate-x-px",
-}
-
-const outlineTreeSubChevronRailClass: Record<OutlineTreeSurface, string> = {
-  sidebar:
-    "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-sidebar-border py-0.5 ps-2.5",
-  panel: "flex min-w-0 flex-1 list-none flex-col gap-1 border-s border-border/60 py-0.5 ps-2.5",
-}
-
-/** Pull row content onto the guide line — matches `SidebarMenuSubButton` horizontal nudge (inset layout only). */
-export const OUTLINE_TREE_SUB_ROW_SHIFT_CLASS = "-translate-x-px rtl:translate-x-px"
-
-/** `CollapsibleContent` row: spacer width = `px-2` (8px) + half of `size-8` chevron (16px) → guide under chevron center. */
-export const OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS = "flex min-w-0 w-full"
-
-/** Spacer column — keep in sync with folder row `px-2` + `size-8` chevron. */
-export const OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS = "w-6 shrink-0"
-
-/** Wrap `OutlineTreeSub` with `guideLayout="chevronRail"` so the vertical border meets the chevron center. */
-export function OutlineTreeCollapsibleContentRail({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof CollapsibleContent>) {
-  return (
-    <CollapsibleContent
-      className={cn(OUTLINE_TREE_COLLAPSIBLE_CONTENT_RAIL_CLASS, className)}
-      {...props}
-    >
-      <div className={OUTLINE_TREE_CHEVRON_GUIDE_SPACER_CLASS} aria-hidden />
-      {children}
-    </CollapsibleContent>
-  )
-}
-
-/** Nested list under a folder — vertical guide + indent. */
-export function OutlineTreeSub({
-  surface = "panel",
-  guideLayout = "inset",
-  className,
-  ...props
-}: React.ComponentProps<"ul"> & {
-  surface?: OutlineTreeSurface
-  guideLayout?: OutlineTreeGuideLayout
-}) {
-  return (
-    <ul
-      data-slot="outline-tree-sub"
-      data-guide-layout={guideLayout}
-      className={cn(
-        guideLayout === "inset" && outlineTreeSubInsetClass[surface],
-        guideLayout === "chevronRail" && outlineTreeSubChevronRailClass[surface],
-        className,
-      )}
-      {...props}
-    />
-  )
-}
-
-/** Root or nested branch list — matches `SidebarMenu` spacing. */
-export function OutlineTreeMenu({ className, ...props }: React.ComponentProps<"ul">) {
-  return (
-    <ul
-      data-slot="outline-tree-menu"
-      className={cn("flex w-full min-w-0 list-none flex-col gap-0", className)}
-      {...props}
-    />
-  )
-}
-
-/** Expandable folder row wrapper — matches `SidebarMenuItem`. */
-export function OutlineTreeMenuItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="outline-tree-menu-item"
-      className={cn("group/menu-item relative min-w-0 w-full list-none", className)}
-      {...props}
-    />
-  )
-}
-
-/** Leaf / nested row inside `OutlineTreeSub` — matches `SidebarMenuSubItem`. */
-export function OutlineTreeSubItem({ className, ...props }: React.ComponentProps<"li">) {
-  return (
-    <li
-      data-slot="outline-tree-sub-item"
-      className={cn("group/menu-sub-item relative min-w-0 w-full list-none", className)}
-      {...props}
-    />
-  )
-}
-
-export interface OutlineTreeLeafButtonProps extends React.ComponentProps<"button"> {
-  surface?: OutlineTreeSurface
-  isActive?: boolean
-  /** Inset `OutlineTreeSub` only — nudge like `SidebarMenuSubButton`. Ignored when parent uses `chevronRail`. */
-  subGuideAlign?: boolean
-}
-
-/** Selectable leaf row (file / terminal row) — `SidebarMenuSubButton`–aligned rhythm. */
-export function OutlineTreeLeafButton({
-  surface = "panel",
-  isActive = false,
-  subGuideAlign = false,
-  className,
-  ...props
-}: OutlineTreeLeafButtonProps) {
-  return (
-    <button
-      type="button"
-      data-active={isActive || undefined}
-      className={cn(
-        "flex min-h-8 w-full min-w-0 cursor-pointer select-none items-center gap-2 overflow-hidden rounded-md px-2 text-start text-sm outline-none ring-ring focus-visible:ring-2 focus-visible:ring-inset [&>svg]:size-4 [&>svg]:shrink-0",
-        subGuideAlign && OUTLINE_TREE_SUB_ROW_SHIFT_CLASS,
-        surface === "panel" &&
-          cn(
-            "text-foreground hover:bg-muted/50",
-            isActive && "bg-accent font-medium text-accent-foreground",
-          ),
-        surface === "sidebar" &&
-          cn(
-            "text-sidebar-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
-            isActive && "bg-sidebar-accent font-medium text-sidebar-accent-foreground",
-          ),
-        className,
-      )}
-      {...props}
-    />
-  )
-}
+export * from "@exxatdesignux/ui/components/data-views/outline-tree-menu"

package/template/components/export-drawer.test.tsx

@@ -0,0 +1,71 @@
+/**
+ * ExportDrawer — render smoke tests
+ *
+ * Verify the promoted component renders without throwing and exposes the
+ * correct accessible structure when open. ExportDrawer is fully controlled
+ * (no built-in trigger); it must be wrapped in TooltipProvider.
+ */
+
+import { render, screen } from "@testing-library/react"
+import { describe, expect, it, vi } from "vitest"
+
+import { TooltipProvider } from "@/components/ui/tooltip"
+import { ExportDrawer } from "./export-drawer"
+
+function Wrapper({ children }: { children: React.ReactNode }) {
+  return <TooltipProvider>{children}</TooltipProvider>
+}
+
+describe("ExportDrawer", () => {
+  const noop = vi.fn()
+
+  it("renders without throwing when closed", () => {
+    expect(() =>
+      render(<ExportDrawer open={false} onOpenChange={noop} />, { wrapper: Wrapper }),
+    ).not.toThrow()
+  })
+
+  it("renders the drawer title when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByRole("heading", { name: /export/i })).toBeInTheDocument()
+  })
+
+  it("renders the Export submit button when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    const buttons = screen.getAllByRole("button", { name: /export/i })
+    expect(buttons.length).toBeGreaterThan(0)
+  })
+
+  it("renders the Cancel button when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    expect(screen.getByRole("button", { name: /cancel/i })).toBeInTheDocument()
+  })
+
+  it("renders the date range helper text when open", () => {
+    const { baseElement } = render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    // The form shows a date range section — confirmed by looking for the "Date range" label
+    expect(baseElement.textContent).toMatch(/date range/i)
+  })
+
+  it("shows file format options when open", () => {
+    render(
+      <ExportDrawer open onOpenChange={noop} />,
+      { wrapper: Wrapper },
+    )
+    // The format field renders radio tiles — at least one "CSV" label should be visible
+    const csvElements = screen.getAllByText(/csv/i)
+    expect(csvElements.length).toBeGreaterThan(0)
+  })
+})